1  import { ProtocolAction } from '@aave/contract-helpers';
  2  import { Trans } from '@lingui/macro';
  3  import { Button } from '@mui/material';
  4  import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
  5  import { useAssetCaps } from 'src/hooks/useAssetCaps';
  6  import { useModalContext } from 'src/hooks/useModal';
  7  import { useRootStore } from 'src/store/root';
  8  import { DashboardReserve } from 'src/utils/dashboardSortUtils';
  9  import { GENERAL } from 'src/utils/mixPanelEvents';
 10  import { showExternalIncentivesTooltip } from 'src/utils/utils';
 11  import { useShallow } from 'zustand/shallow';
 12  
 13  import { ListColumn } from '../../../../components/lists/ListColumn';
 14  import { isFeatureEnabled } from '../../../../utils/marketsAndNetworksConfig';
 15  import { ListAPRColumn } from '../ListAPRColumn';
 16  import { ListButtonsColumn } from '../ListButtonsColumn';
 17  import { ListItemUsedAsCollateral } from '../ListItemUsedAsCollateral';
 18  import { ListItemWrapper } from '../ListItemWrapper';
 19  import { ListValueColumn } from '../ListValueColumn';
 20  
 21  export const SuppliedPositionsListItem = ({
 22    reserve,
 23    underlyingBalance,
 24    underlyingBalanceUSD,
 25    usageAsCollateralEnabledOnUser,
 26    underlyingAsset,
 27  }: DashboardReserve) => {
 28    const { user } = useAppDataContext();
 29    const { isIsolated, aIncentivesData, aTokenAddress, isFrozen, isActive, isPaused } = reserve;
 30    const { openSupply, openWithdraw, openCollateralChange, openSwap } = useModalContext();
 31    const { debtCeiling } = useAssetCaps();
 32    const [trackEvent, currentMarketData, currentMarket] = useRootStore(
 33      useShallow((store) => [store.trackEvent, store.currentMarketData, store.currentMarket])
 34    );
 35  
 36    const showSwitchButton = isFeatureEnabled.liquiditySwap(currentMarketData);
 37  
 38    const canBeEnabledAsCollateral = user
 39      ? !debtCeiling.isMaxed &&
 40        reserve.reserveLiquidationThreshold !== '0' &&
 41        ((!reserve.isIsolated && !user.isInIsolationMode) ||
 42          user.isolatedReserve?.underlyingAsset === reserve.underlyingAsset ||
 43          (reserve.isIsolated && user.totalCollateralMarketReferenceCurrency === '0'))
 44      : false;
 45  
 46    const disableSwap = !isActive || isPaused || reserve.symbol == 'stETH';
 47    const disableWithdraw = !isActive || isPaused;
 48    const disableSupply = !isActive || isFrozen || isPaused;
 49  
 50    return (
 51      <ListItemWrapper
 52        symbol={reserve.symbol}
 53        iconSymbol={reserve.iconSymbol}
 54        name={reserve.name}
 55        detailsAddress={underlyingAsset}
 56        currentMarket={currentMarket}
 57        frozen={reserve.isFrozen}
 58        paused={isPaused}
 59        data-cy={`dashboardSuppliedListItem_${reserve.symbol.toUpperCase()}_${
 60          canBeEnabledAsCollateral && usageAsCollateralEnabledOnUser ? 'Collateral' : 'NoCollateral'
 61        }`}
 62        showSupplyCapTooltips
 63        showDebtCeilingTooltips
 64        showExternalIncentivesTooltips={showExternalIncentivesTooltip(
 65          reserve.symbol,
 66          currentMarket,
 67          ProtocolAction.supply
 68        )}
 69      >
 70        <ListValueColumn
 71          symbol={reserve.iconSymbol}
 72          value={Number(underlyingBalance)}
 73          subValue={Number(underlyingBalanceUSD)}
 74          disabled={Number(underlyingBalance) === 0}
 75        />
 76  
 77        <ListAPRColumn
 78          value={Number(reserve.supplyAPY)}
 79          market={currentMarket}
 80          protocolAction={ProtocolAction.supply}
 81          address={aTokenAddress}
 82          incentives={aIncentivesData}
 83          symbol={reserve.symbol}
 84        />
 85  
 86        <ListColumn>
 87          <ListItemUsedAsCollateral
 88            disabled={reserve.isPaused}
 89            isIsolated={isIsolated}
 90            usageAsCollateralEnabledOnUser={usageAsCollateralEnabledOnUser}
 91            canBeEnabledAsCollateral={canBeEnabledAsCollateral}
 92            onToggleSwitch={() => {
 93              openCollateralChange(
 94                underlyingAsset,
 95                currentMarket,
 96                reserve.name,
 97                'dashboard',
 98                usageAsCollateralEnabledOnUser
 99              );
100            }}
101            data-cy={`collateralStatus`}
102          />
103        </ListColumn>
104  
105        <ListButtonsColumn>
106          {showSwitchButton ? (
107            <Button
108              disabled={disableSwap}
109              variant="contained"
110              onClick={() => {
111                // track
112  
113                trackEvent(GENERAL.OPEN_MODAL, {
114                  modal: 'Swap Collateral',
115                  market: currentMarket,
116                  assetName: reserve.name,
117                  asset: underlyingAsset,
118                });
119                openSwap(underlyingAsset);
120              }}
121              data-cy={`swapButton`}
122            >
123              <Trans>Switch</Trans>
124            </Button>
125          ) : (
126            <Button
127              disabled={disableSupply}
128              variant="contained"
129              onClick={() => openSupply(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
130            >
131              <Trans>Supply</Trans>
132            </Button>
133          )}
134          <Button
135            disabled={disableWithdraw}
136            variant="outlined"
137            onClick={() => {
138              openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard');
139            }}
140          >
141            <Trans>Withdraw</Trans>
142          </Button>
143        </ListButtonsColumn>
144      </ListItemWrapper>
145    );
146  };