feat: refactored actions on reserve-overview page

Author: AGMASO

src/components/transactions/Borrow/BorrowActionsSDK.tsx

@@ -66,8 +66,6 @@ export const BorrowActionsSDK = React.memo(
     const [requiresApproval, setRequiresApproval] = useState(
       borrowNative && poolAddress === API_ETH_MOCK_ADDRESS
     );
-    console.log('BorrowActionsSDK render requiresApproval:', requiresApproval);
-    console.log('PoolAddress', poolAddress);
     useEffect(() => {
       setRequiresApproval(
         borrowNative && poolAddress === API_ETH_MOCK_ADDRESS && !approvalTxState.success

src/components/transactions/Borrow/BorrowModalContentSDK.tsx

@@ -57,15 +57,13 @@ export const BorrowModalContentSDK = ({
   const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
   const { borrowCap } = useAssetCapsSDK();
   const borrowNative = borrowUnWrapped && !!poolReserve.acceptsNative;
-  console.log('BorrowModalContentSDK render borrowNative:', borrowNative);
   const borrowProtocolIncentives = mapAaveProtocolIncentives(poolReserve.incentives, 'borrow');
 
   const [amount, setAmount] = useState('');
   const [hfPreviewAfter, setHfPreviewAfter] = useState<string | undefined>();
   const [riskCheckboxAccepted, setRiskCheckboxAccepted] = useState(false);
 
   // amount calculations
-  // const maxAmountToBorrow = getMaxAmountAvailableToBorrow(poolReserve, user);
   const maxAmountToBorrow = poolReserve.userState?.borrowable.amount.value || '0';
 
   // We set this in a useEffect, so it doesn't constantly change when
@@ -116,14 +114,11 @@ export const BorrowModalContentSDK = ({
         });
 
         if (result.isOk()) {
-          //!Debug
-          console.log('healthFactorPreview result', result.value);
           setHfPreviewAfter(result.value.after?.toString());
         } else {
           setHfPreviewAfter(undefined);
         }
       } catch (error) {
-        console.error('healthFactorPreview failed', error);
         setHfPreviewAfter(undefined);
       }
     }, 300);

src/components/transactions/FlowCommons/ModalWrapperSDK.tsx

@@ -71,18 +71,13 @@ export const ModalWrapperSDK: React.FC<{
     );
 
   if (!poolReserveSDK) throw new Error(`Reserve not found for ${underlyingAsset}`);
-
-  //!Debug
-  console.log('poolReserveSDK', poolReserveSDK);
-
   const reserveUserState = poolReserveSDK.userState;
   const marketUserState = sdkMarket?.userState;
 
   const symbol =
     poolReserveSDK.acceptsNative && !keepWrappedSymbol
       ? currentNetworkConfig.baseAssetSymbol
       : poolReserveSDK.underlyingToken.symbol;
-  //!Para balacne nativo, no se si esto esta correcto
   const nativeKey = API_ETH_MOCK_ADDRESS.toLowerCase();
   const tokenKey = poolReserveSDK.underlyingToken.address.toLowerCase();
   const nativeBalance = walletBalances[nativeKey]?.amount || '0';
@@ -112,10 +107,6 @@ export const ModalWrapperSDK: React.FC<{
         isWrongNetwork,
         nativeBalance,
         tokenBalance,
-        //!esto es lo que habia, lo he cambiado por lo de arriba como recomendacion para ensenar el correcto balance
-        // nativeBalance: walletBalances[API_ETH_MOCK_ADDRESS.toLowerCase()]?.amount || '0',
-        // tokenBalance:
-        //   walletBalances[poolReserveSDK.underlyingToken.address.toLowerCase()]?.amount || '0',
         poolReserve: poolReserveSDK,
         symbol,
         underlyingAsset,

src/components/transactions/Supply/SupplyModalContentSDK.tsx

@@ -72,13 +72,12 @@ export const SupplyModalContentWrapperSDK = (
   const wrappedTokenReserves = useWrappedTokens();
   const { walletBalances } = useWalletBalances(currentMarketData);
   const { supplyCap: supplyCapUsage, debtCeiling: debtCeilingUsage } = useAssetCapsSDK();
-  const { supplyReserves } = useAppDataContext(); //! with SDK
+  const { supplyReserves } = useAppDataContext();
   const { poolReserve, reserveUserState, marketUserState } = params;
 
   const wrappedToken = wrappedTokenReserves.find(
     (r) => r.tokenOut.underlyingAsset === params.underlyingAsset
   );
-
   const canSupplyAsWrappedToken =
     wrappedToken &&
     walletBalances[wrappedToken.tokenIn.underlyingAsset.toLowerCase()].amount !== '0';
@@ -153,15 +152,10 @@ export const SupplyModalContentSDK = React.memo(
     debtCeilingWarning,
     user,
   }: SupplyModalContentPropsSDK) => {
-    // const { marketReferencePriceInUsd } = useAppDataContext();
     const { mainTxState: supplyTxState, gasLimit, txError } = useModalContext();
     const { chainId, currentAccount } = useWeb3Context();
-    const [minRemainingBaseTokenBalance, currentMarketData, currentNetworkConfig] = useRootStore(
-      useShallow((state) => [
-        state.poolComputed.minRemainingBaseTokenBalance,
-        state.currentMarketData,
-        state.currentNetworkConfig,
-      ])
+    const [currentMarketData, currentNetworkConfig] = useRootStore(
+      useShallow((state) => [state.currentMarketData, state.currentNetworkConfig])
     );
 
     // states
@@ -175,12 +169,11 @@ export const SupplyModalContentSDK = React.memo(
     const supplyApy = poolReserve.supplyInfo.apy.value;
 
     // Calculate max amount to supply
-    const maxAmountToSupply = getMaxAmountAvailableToSupplySDK({
+    const maxAmountToSupply = getMaxAmountAvailableToSupplySDK(
       walletBalance,
-      reserve: poolReserve, // ReserveWithId del SDK
-      isNativeSelected: !!poolReserve.acceptsNative && supplyUnWrapped,
-      minRemainingBaseTokenBalance,
-    });
+      poolReserve,
+      underlyingAsset.toLowerCase()
+    );
 
     const handleChange = (value: string) => {
       if (value === '-1') {
@@ -230,17 +223,14 @@ export const SupplyModalContentSDK = React.memo(
           });
 
           if (result.isOk()) {
-            //!Debug
-            console.log('healthFactorPreview result', result.value);
             setHfPreviewAfter(result.value.after?.toString());
           } else {
             setHfPreviewAfter(undefined);
           }
         } catch (error) {
-          console.error('healthFactorPreview failed', error);
           setHfPreviewAfter(undefined);
         }
-      }, 2000);
+      }, 300);
 
       return () => clearTimeout(timer);
     }, [
@@ -343,7 +333,7 @@ export const SupplyModalContentSDK = React.memo(
           <DetailsHFLine
             visibleHfChange={!!amount}
             healthFactor={user ? user.healthFactor : '-1'}
-            futureHealthFactor={hfPreviewAfter?.toString()}
+            futureHealthFactor={hfPreviewAfter?.toString() ? hfPreviewAfter.toString() : '-1'}
           />
         </TxModalDetails>
 
@@ -372,9 +362,6 @@ export const SupplyWrappedTokenModalContentSDK = ({
   const { mainTxState: supplyTxState, gasLimit, txError } = useModalContext();
   const { currentAccount } = useWeb3Context();
   const { walletBalances } = useWalletBalances(currentMarketData);
-  const minRemainingBaseTokenBalance = useRootStore(
-    (state) => state.poolComputed.minRemainingBaseTokenBalance
-  );
   const [hfPreviewAfter, setHfPreviewAfter] = useState<string | undefined>();
   const supplyProtocolIncentives = mapAaveProtocolIncentives(poolReserve.incentives, 'supply');
 
@@ -421,12 +408,11 @@ export const SupplyWrappedTokenModalContentSDK = ({
   const supplyCap = poolReserve.supplyInfo.supplyCap.amount.value;
   const totalLiquidity = poolReserve.supplyInfo.total.value;
 
-  const maxAmountToSupplyTokenOut = getMaxAmountAvailableToSupplySDK({
-    walletBalance: tokenOutBalance,
-    reserve: poolReserve,
-    isNativeSelected: false,
-    minRemainingBaseTokenBalance,
-  });
+  const maxAmountToSupplyTokenOut = getMaxAmountAvailableToSupplySDK(
+    tokenOutBalance,
+    poolReserve,
+    poolReserve.underlyingToken.address
+  );
 
   const tokenOutRemainingSupplyCap = remainingCap(supplyCap, totalLiquidity);
 
@@ -512,10 +498,9 @@ export const SupplyWrappedTokenModalContentSDK = ({
           setHfPreviewAfter(undefined);
         }
       } catch (error) {
-        console.error('healthFactorPreview failed', error);
         setHfPreviewAfter(undefined);
       }
-    }, 2000);
+    }, 300);
 
     return () => clearTimeout(timer);
   }, [

src/components/transactions/utils.ts

@@ -110,17 +110,13 @@ export const getAssetCollateralTypeSdk = ({
   marketUserState?: MarketUserState | null;
   debtCeilingIsMaxed: boolean;
 }) => {
-  // el asset se puede usar como colateral a nivel de protocolo
   if (!reserve.supplyInfo.canBeCollateral) return CollateralType.UNAVAILABLE;
 
   const isIsolationAsset = reserve.isolationModeConfig?.canBeCollateral === true;
   const userIsInIsolationMode = marketUserState?.isInIsolationMode === true;
   const userHasSuppliedReserve = (reserveUserState?.balance.amount.value ?? '0') !== '0';
   const userHasCollateral = (marketUserState?.totalCollateralBase ?? '0') !== '0';
-
-  // No tenemos usageAsCollateralEnabledOnUser; usamos el estado actual del SDK
-  const userCollateralEnabled =
-    reserveUserState?.canBeCollateral === true || !userHasSuppliedReserve;
+  const userCollateralEnabled = reserveUserState?.canBeCollateral === true;
 
   let collateralType: CollateralType = CollateralType.ENABLED;
 
@@ -146,6 +142,6 @@ export const getAssetCollateralTypeSdk = ({
       collateralType = userCollateralEnabled ? CollateralType.ENABLED : CollateralType.DISABLED;
     }
   }
-
+  console.log('collateralType', collateralType);
   return collateralType;
 };

src/modules/reserve-overview/ReserveActions.tsx

@@ -1,4 +1,5 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { Box, Button, Divider, Paper, Skeleton, Stack, Typography, useTheme } from '@mui/material';
 import React, { ReactNode, useState } from 'react';
@@ -16,6 +17,7 @@ import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { BuyWithFiat } from 'src/modules/staking/BuyWithFiat';
 import { useRootStore } from 'src/store/root';
 import { GENERAL } from 'src/utils/events';
+import { getMaxAmountAvailableToSupplySDK } from 'src/utils/getMaxAmountAvailableToSupply';
 import { useShallow } from 'zustand/shallow';
 
 import { CapType } from '../../components/caps/helper';
@@ -29,7 +31,6 @@ interface ReserveActionsProps {
 
 export const ReserveActions = ({ reserve }: ReserveActionsProps) => {
   const [selectedAsset, setSelectedAsset] = useState<string>(reserve.underlyingToken.symbol);
-
   const { currentAccount } = useWeb3Context();
   const { openBorrowSDK, openSupplySDK } = useModalContext();
   const [currentMarket, currentNetworkConfig, currentMarketData] = useRootStore(
@@ -42,28 +43,27 @@ export const ReserveActions = ({ reserve }: ReserveActionsProps) => {
   const { loading: loadingReserves } = useAppDataContext();
   const { walletBalances, loading: loadingWalletBalance } = useWalletBalances(currentMarketData);
   const { baseAssetSymbol } = currentNetworkConfig;
-  let balance = walletBalances[reserve.underlyingToken.address.toLowerCase()];
-  if (!!reserve.acceptsNative && selectedAsset === baseAssetSymbol) {
-    balance = walletBalances[API_ETH_MOCK_ADDRESS.toLowerCase()];
-  }
-
+  const isNativeSelected = reserve.acceptsNative && selectedAsset === baseAssetSymbol;
+  const walletBalance = isNativeSelected
+    ? walletBalances[API_ETH_MOCK_ADDRESS.toLowerCase()]?.amount ?? '0'
+    : walletBalances[reserve.underlyingToken.address.toLowerCase()]?.amount ?? '0';
+  const underlyingAsset =
+    selectedAsset === baseAssetSymbol ? API_ETH_MOCK_ADDRESS : reserve.underlyingToken.address;
   let maxAmountToBorrow = '0';
-
   let maxAmountToSupply = '0';
-  //! MaxAmountToSupply no funciona para NATIVE TOKEN
+
   if (reserve.userState) {
     maxAmountToBorrow = reserve.userState.borrowable.amount.value || '0';
-    console.log('maxAmountToBorrow', maxAmountToBorrow);
-    maxAmountToSupply = reserve.userState.suppliable.amount.value || '0';
-    console.log('maxAmountToSupply', maxAmountToSupply);
+    maxAmountToSupply = getMaxAmountAvailableToSupplySDK(walletBalance, reserve, underlyingAsset);
   }
 
   const maxAmountToBorrowUsd = reserve.userState?.borrowable.usd || '0';
-
-  const maxAmountToSupplyUsd = reserve.userState?.suppliable.usd || '0';
+  const maxAmountToSupplyUsd = valueToBigNumber(maxAmountToSupply)
+    .multipliedBy(reserve.usdExchangeRate ?? '0')
+    .toString();
 
   const { disableSupplyButton, disableBorrowButton, alerts } = useReserveActionState({
-    balance: balance?.amount || '0',
+    balance: walletBalance || '0',
     maxAmountToSupply: maxAmountToSupply.toString(),
     maxAmountToBorrow: maxAmountToBorrow.toString(),
     reserve,
@@ -112,7 +112,7 @@ export const ReserveActions = ({ reserve }: ReserveActionsProps) => {
         </Box>
       )}
       <WalletBalance
-        balance={balance.amount}
+        balance={walletBalance}
         symbol={selectedAsset}
         marketTitle={market.marketTitle}
       />
@@ -375,7 +375,11 @@ const WrappedBaseAssetSelector = ({
       color="primary"
       value={selectedAsset}
       exclusive
-      onChange={(_, value) => setSelectedAsset(value)}
+      onChange={(_, value) => {
+        if (value !== null) {
+          setSelectedAsset(value);
+        }
+      }}
       sx={{ mb: 4 }}
     >
       <StyledTxModalToggleButton value={assetSymbol}>

src/modules/umbrella/StakeAssets/UmbrellaAssetsList.tsx

@@ -86,15 +86,15 @@ export default function UmbrellaAssetsList({
         const balanceB = Number(b.formattedBalances.totalAvailableToStake);
         return sortDesc ? balanceB - balanceA : balanceA - balanceB;
       }
-      //! Your Staked Amount: shows the underlying of assets(ej. USDC, WETH) staked or equivalent to the
-      //! shares.
-      //! Using stakeTokenReedemableAmount should be the equivalent in Asset to the shares
+      // Your Staked Amount: shows the underlying of assets(ej. USDC, WETH) staked or equivalent to the
+      // shares.
+      // Using stakeTokenReedemableAmount should be the equivalent in Asset to the shares
       if (sortName === 'stakeTokenUnderlyingBalance') {
         const balanceA = Number(a.formattedBalances?.stakeTokenRedeemableAmount || '0');
         const balanceB = Number(b.formattedBalances?.stakeTokenRedeemableAmount || '0');
         return sortDesc ? balanceB - balanceA : balanceA - balanceB;
       }
-      //!trial: Shares shows the staked StkToken obtained from the staked asset amount
+
       if (sortName === 'stakeSharesTokens') {
         const balanceA = Number(a.formattedBalances?.stakeTokenBalance || '0');
         const balanceB = Number(b.formattedBalances?.stakeTokenBalance || '0');

src/utils/getMaxAmountAvailableToSupply.ts

@@ -56,28 +56,41 @@ export function getMaxAmountAvailableToSupply(
   return roundToTokenDecimals(maxAmountToSupply.toString(10), poolReserve.decimals);
 }
 
-export const getMaxAmountAvailableToSupplySDK = ({
-  walletBalance,
-  reserve,
-  isNativeSelected,
-  minRemainingBaseTokenBalance,
-}: {
-  walletBalance: string; // balance ya normalizado a decimales del token
-  reserve: ReserveWithId;
-  isNativeSelected: boolean;
-  minRemainingBaseTokenBalance: string;
-}) => {
-  // 1) saldo de wallet, dejando buffer si es nativo
-  const walletAfterBuffer = isNativeSelected
-    ? BigNumber.max(
-        valueToBigNumber(walletBalance).minus(minRemainingBaseTokenBalance),
-        0
-      ).toString()
-    : walletBalance;
+export function getMaxAmountAvailableToSupplySDK(
+  walletBalance: string,
+  poolReserve: ReserveWithId,
+  underlyingAsset: string
+): string {
+  if (poolReserve.isFrozen) {
+    return '0';
+  }
+
+  // Calculate max amount to supply
+  let maxAmountToSupply = valueToBigNumber(walletBalance);
+
+  // keep a bit for other transactions
+  if (
+    maxAmountToSupply.gt(0) &&
+    underlyingAsset.toLowerCase() === API_ETH_MOCK_ADDRESS.toLowerCase()
+  ) {
+    maxAmountToSupply;
+  }
 
-  // 2) límite de protocolo (caps/debt ceiling/estado user) ya calculado por el SDK
-  const protocolLimit = reserve.userState?.suppliable.amount.value ?? '0';
+  // make sure we don't try to supply more then maximum supply cap
+  if (poolReserve.supplyInfo.supplyCap.amount.value !== '0') {
+    maxAmountToSupply = BigNumber.min(
+      maxAmountToSupply,
+      remainingCap(
+        poolReserve.supplyInfo.supplyCap.amount.value,
+        poolReserve.supplyInfo.total.value
+      )
+    );
+  }
 
-  // 3) máximo final = mínimo entre saldo y límite
-  return BigNumber.min(walletAfterBuffer, protocolLimit).toString();
-};
+  if (maxAmountToSupply.lte(0)) {
+    return '0';
+  }
+
+  // Convert amount to smallest allowed precision based on token decimals
+  return roundToTokenDecimals(maxAmountToSupply.toString(10), poolReserve.underlyingToken.decimals);
+}