1  import { ProtocolAction } from '@aave/contract-helpers';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Button } from '@mui/material';
  4  import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
  5  import { useAssetCaps } from 'src/hooks/useAssetCaps';
  6  import { useRootStore } from 'src/store/root';
  7  import { DashboardReserve } from 'src/utils/dashboardSortUtils';
  8  import { showExternalIncentivesTooltip } from 'src/utils/utils';
  9  import { useShallow } from 'zustand/shallow';
 10  
 11  import { IncentivesCard } from '../../../../components/incentives/IncentivesCard';
 12  import { Row } from '../../../../components/primitives/Row';
 13  import { useModalContext } from '../../../../hooks/useModal';
 14  import { isFeatureEnabled } from '../../../../utils/marketsAndNetworksConfig';
 15  import { ListItemUsedAsCollateral } from '../ListItemUsedAsCollateral';
 16  import { ListMobileItemWrapper } from '../ListMobileItemWrapper';
 17  import { ListValueRow } from '../ListValueRow';
 18  
 19  export const SuppliedPositionsListMobileItem = ({
 20    reserve,
 21    underlyingBalance,
 22    underlyingBalanceUSD,
 23    usageAsCollateralEnabledOnUser,
 24    underlyingAsset,
 25  }: DashboardReserve) => {
 26    const { user } = useAppDataContext();
 27    const [currentMarketData, currentMarket] = useRootStore(
 28      useShallow((state) => [state.currentMarketData, state.currentMarket])
 29    );
 30    const { openSupply, openSwap, openWithdraw, openCollateralChange } = useModalContext();
 31    const { debtCeiling } = useAssetCaps();
 32    const isSwapButton = isFeatureEnabled.liquiditySwap(currentMarketData);
 33    const {
 34      symbol,
 35      iconSymbol,
 36      name,
 37      supplyAPY,
 38      isIsolated,
 39      aIncentivesData,
 40      aTokenAddress,
 41      isFrozen,
 42      isActive,
 43      isPaused,
 44    } = reserve;
 45  
 46    const canBeEnabledAsCollateral = user
 47      ? !debtCeiling.isMaxed &&
 48        reserve.reserveLiquidationThreshold !== '0' &&
 49        ((!reserve.isIsolated && !user.isInIsolationMode) ||
 50          user.isolatedReserve?.underlyingAsset === reserve.underlyingAsset ||
 51          (reserve.isIsolated && user.totalCollateralMarketReferenceCurrency === '0'))
 52      : false;
 53  
 54    const disableSwap = !isActive || isPaused || reserve.symbol == 'stETH';
 55    const disableWithdraw = !isActive || isPaused;
 56    const disableSupply = !isActive || isFrozen || isPaused;
 57  
 58    return (
 59      <ListMobileItemWrapper
 60        symbol={symbol}
 61        iconSymbol={iconSymbol}
 62        name={name}
 63        underlyingAsset={underlyingAsset}
 64        currentMarket={currentMarket}
 65        frozen={reserve.isFrozen}
 66        showSupplyCapTooltips
 67        showDebtCeilingTooltips
 68        showExternalIncentivesTooltips={showExternalIncentivesTooltip(
 69          reserve.symbol,
 70          currentMarket,
 71          ProtocolAction.supply
 72        )}
 73      >
 74        <ListValueRow
 75          title={<Trans>Supply balance</Trans>}
 76          value={Number(underlyingBalance)}
 77          subValue={Number(underlyingBalanceUSD)}
 78          disabled={Number(underlyingBalance) === 0}
 79        />
 80  
 81        <Row
 82          caption={<Trans>Supply APY</Trans>}
 83          align="flex-start"
 84          captionVariant="description"
 85          mb={2}
 86        >
 87          <IncentivesCard
 88            value={Number(supplyAPY)}
 89            incentives={aIncentivesData}
 90            address={aTokenAddress}
 91            symbol={symbol}
 92            variant="secondary14"
 93            market={currentMarket}
 94            protocolAction={ProtocolAction.supply}
 95          />
 96        </Row>
 97  
 98        <Row
 99          caption={<Trans>Used as collateral</Trans>}
100          align={isIsolated ? 'flex-start' : 'center'}
101          captionVariant="description"
102          mb={2}
103        >
104          <ListItemUsedAsCollateral
105            disabled={reserve.isPaused}
106            isIsolated={isIsolated}
107            usageAsCollateralEnabledOnUser={usageAsCollateralEnabledOnUser}
108            canBeEnabledAsCollateral={canBeEnabledAsCollateral}
109            onToggleSwitch={() =>
110              openCollateralChange(
111                underlyingAsset,
112                currentMarket,
113                reserve.name,
114                'dashboard',
115                usageAsCollateralEnabledOnUser
116              )
117            }
118          />
119        </Row>
120  
121        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 5 }}>
122          {isSwapButton ? (
123            <Button
124              disabled={disableSwap}
125              variant="contained"
126              onClick={() => openSwap(underlyingAsset)}
127              fullWidth
128            >
129              <Trans>Switch</Trans>
130            </Button>
131          ) : (
132            <Button
133              disabled={disableSupply}
134              variant="contained"
135              onClick={() => openSupply(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
136              fullWidth
137            >
138              <Trans>Supply</Trans>
139            </Button>
140          )}
141          <Button
142            disabled={disableWithdraw}
143            variant="outlined"
144            onClick={() => openWithdraw(underlyingAsset, currentMarket, reserve.name, 'dashboard')}
145            sx={{ ml: 1.5 }}
146            fullWidth
147          >
148            <Trans>Withdraw</Trans>
149          </Button>
150        </Box>
151      </ListMobileItemWrapper>
152    );
153  };