1  import { Tooltip, Typography } from '@mui/material';
  2  import { ReactNode } from 'react';
  3  import { BorrowDisabledToolTip } from 'src/components/infoTooltips/BorrowDisabledToolTip';
  4  import { KernelAirdropTooltip } from 'src/components/infoTooltips/KernelAirdropTooltip';
  5  import { OffboardingTooltip } from 'src/components/infoTooltips/OffboardingToolTip';
  6  import { PausedTooltip } from 'src/components/infoTooltips/PausedTooltip';
  7  import { SpkAirdropTooltip } from 'src/components/infoTooltips/SpkAirdropTooltip';
  8  import { StETHCollateralToolTip } from 'src/components/infoTooltips/StETHCollateralToolTip';
  9  import { SuperFestTooltip } from 'src/components/infoTooltips/SuperFestTooltip';
 10  import { AssetsBeingOffboarded } from 'src/components/Warnings/OffboardingWarning';
 11  import { useAssetCaps } from 'src/hooks/useAssetCaps';
 12  import { useRootStore } from 'src/store/root';
 13  import { CustomMarket } from 'src/ui-config/marketsConfig';
 14  import { DASHBOARD_LIST_COLUMN_WIDTHS } from 'src/utils/dashboardSortUtils';
 15  import { DASHBOARD } from 'src/utils/mixPanelEvents';
 16  import { ExternalIncentivesTooltipsConfig } from 'src/utils/utils';
 17  
 18  import { AMPLToolTip } from '../../../components/infoTooltips/AMPLToolTip';
 19  import { FrozenTooltip } from '../../../components/infoTooltips/FrozenTooltip';
 20  import { RenFILToolTip } from '../../../components/infoTooltips/RenFILToolTip';
 21  import { ListColumn } from '../../../components/lists/ListColumn';
 22  import { ListItem } from '../../../components/lists/ListItem';
 23  import { Link, ROUTES } from '../../../components/primitives/Link';
 24  import { TokenIcon } from '../../../components/primitives/TokenIcon';
 25  
 26  interface ListItemWrapperProps {
 27    symbol: string;
 28    iconSymbol: string;
 29    name: string;
 30    detailsAddress: string;
 31    children: ReactNode;
 32    currentMarket: CustomMarket;
 33    frozen?: boolean;
 34    paused?: boolean;
 35    borrowEnabled?: boolean;
 36    showSupplyCapTooltips?: boolean;
 37    showBorrowCapTooltips?: boolean;
 38    showDebtCeilingTooltips?: boolean;
 39    showExternalIncentivesTooltips?: ExternalIncentivesTooltipsConfig;
 40  }
 41  
 42  export const ListItemWrapper = ({
 43    symbol,
 44    iconSymbol,
 45    children,
 46    name,
 47    detailsAddress,
 48    currentMarket,
 49    frozen,
 50    paused,
 51    borrowEnabled = true,
 52    showSupplyCapTooltips = false,
 53    showBorrowCapTooltips = false,
 54    showDebtCeilingTooltips = false,
 55    showExternalIncentivesTooltips = {
 56      superFestRewards: false,
 57      spkAirdrop: false,
 58      kernelPoints: false,
 59    },
 60    ...rest
 61  }: ListItemWrapperProps) => {
 62    const { supplyCap, borrowCap, debtCeiling } = useAssetCaps();
 63  
 64    const showFrozenTooltip = frozen && symbol !== 'renFIL' && symbol !== 'BUSD';
 65    const showRenFilTooltip = frozen && symbol === 'renFIL';
 66    const showAmplTooltip = !frozen && symbol === 'AMPL';
 67    const showstETHTooltip = symbol == 'stETH';
 68    const offboardingDiscussion = AssetsBeingOffboarded[currentMarket]?.[symbol];
 69    const showBorrowDisabledTooltip = !frozen && !borrowEnabled;
 70    const trackEvent = useRootStore((store) => store.trackEvent);
 71  
 72    return (
 73      <ListItem {...rest}>
 74        <ListColumn maxWidth={DASHBOARD_LIST_COLUMN_WIDTHS.CELL} isRow>
 75          <Link
 76            onClick={() =>
 77              trackEvent(DASHBOARD.DETAILS_NAVIGATION, {
 78                type: 'Row click',
 79                market: currentMarket,
 80                assetName: name,
 81                asset: detailsAddress,
 82              })
 83            }
 84            href={ROUTES.reserveOverview(detailsAddress, currentMarket)}
 85            noWrap
 86            sx={{ display: 'inline-flex', alignItems: 'center' }}
 87          >
 88            <TokenIcon symbol={iconSymbol} fontSize="large" />
 89            <Tooltip title={`${name} (${symbol})`} arrow placement="top">
 90              <Typography variant="subheader1" sx={{ ml: 3 }} noWrap data-cy={`assetName`}>
 91                {symbol}
 92              </Typography>
 93            </Tooltip>
 94          </Link>
 95          {paused && <PausedTooltip />}
 96          {showExternalIncentivesTooltips.superFestRewards && <SuperFestTooltip />}
 97          {showExternalIncentivesTooltips.spkAirdrop && <SpkAirdropTooltip />}
 98          {showExternalIncentivesTooltips.kernelPoints && <KernelAirdropTooltip />}
 99          {showFrozenTooltip && <FrozenTooltip symbol={symbol} currentMarket={currentMarket} />}
100          {showRenFilTooltip && <RenFILToolTip />}
101          {showAmplTooltip && <AMPLToolTip />}
102          {showstETHTooltip && <StETHCollateralToolTip />}
103          {offboardingDiscussion && <OffboardingTooltip discussionLink={offboardingDiscussion} />}
104          {showBorrowDisabledTooltip && (
105            <BorrowDisabledToolTip symbol={symbol} currentMarket={currentMarket} />
106          )}
107          {showSupplyCapTooltips && supplyCap.displayMaxedTooltip({ supplyCap })}
108          {showBorrowCapTooltips && borrowCap.displayMaxedTooltip({ borrowCap })}
109          {showDebtCeilingTooltips && debtCeiling.displayMaxedTooltip({ debtCeiling })}
110        </ListColumn>
111        {children}
112      </ListItem>
113    );
114  };