feat: better message for disabled e-modes (#2910)

Author: JoaquinBattilana

src/components/transactions/Emode/EmodeModalContent.tsx

@@ -1,6 +1,6 @@
-import { formatUserSummary } from '@aave/math-utils';
+import { formatUserSummary, valueToBigNumber } from '@aave/math-utils';
 import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
-import { Trans } from '@lingui/macro';
+import { Plural, Trans } from '@lingui/macro';
 import {
   Box,
   Collapse,
@@ -20,6 +20,7 @@ import { Row } from 'src/components/primitives/Row';
 import { Warning } from 'src/components/primitives/Warning';
 import { EmodeCategory } from 'src/helpers/types';
 import {
+  ComputedReserveData,
   ExtendedFormattedUser,
   useAppDataContext,
 } from 'src/hooks/app-data-provider/useAppDataProvider';
@@ -46,22 +47,65 @@ export enum ErrorType {
 }
 
 export type EModeCategoryDisplay = EmodeCategory & {
-  available: boolean; // indicates if the user can enter this category
+  available: boolean;
+  blockReason: EModeCategoryBlockReason;
 };
 
-// An E-Mode category is available if the user has no borrow positions outside of the category
-function isEModeCategoryAvailable(user: ExtendedFormattedUser, eMode: EmodeCategory): boolean {
-  const borrowableReserves = eMode.assets
-    .filter((asset) => asset.borrowable)
-    .map((asset) => asset.underlyingAsset);
+export type EModeCategoryBlockReason = {
+  incompatibleBorrows: string[];
+  zeroLtvCollateral: string[];
+};
 
-  const hasIncompatiblePositions = user.userReservesData.some(
-    (userReserve) =>
-      Number(userReserve.scaledVariableDebt) > 0 &&
-      !borrowableReserves.includes(userReserve.reserve.underlyingAsset)
+// Checks why an E-Mode category is unavailable for the user
+function getEModeCategoryBlockReason(
+  user: ExtendedFormattedUser,
+  eMode: EmodeCategory,
+  reservesByAddress: Map<string, ComputedReserveData>
+): EModeCategoryBlockReason {
+  const incompatibleBorrows: string[] = [];
+  const zeroLtvCollateral: string[] = [];
+
+  // Check 1: Incompatible borrows
+  const borrowableReserves = new Set(
+    eMode.assets.filter((asset) => asset.borrowable).map((asset) => asset.underlyingAsset)
   );
 
-  return !hasIncompatiblePositions;
+  for (const userReserve of user.userReservesData) {
+    if (
+      valueToBigNumber(userReserve.scaledVariableDebt).gt(0) &&
+      !borrowableReserves.has(userReserve.reserve.underlyingAsset)
+    ) {
+      incompatibleBorrows.push(userReserve.reserve.symbol);
+    }
+  }
+
+  // Check 2: Collateral with 0 LTV in target category
+  for (const userReserve of user.userReservesData) {
+    if (!userReserve.usageAsCollateralEnabledOnUser) continue;
+
+    const reserve = reservesByAddress.get(userReserve.reserve.underlyingAsset);
+    if (!reserve) continue;
+
+    const reserveTargetEmode = reserve.eModes.find((e) => e.id === eMode.id);
+
+    if (
+      reserveTargetEmode &&
+      reserveTargetEmode.collateralEnabled &&
+      reserveTargetEmode.ltvzeroEnabled
+    ) {
+      zeroLtvCollateral.push(reserve.symbol);
+    } else if (!reserveTargetEmode || !reserveTargetEmode.collateralEnabled) {
+      if (Number(reserve.baseLTVasCollateral) === 0) {
+        zeroLtvCollateral.push(reserve.symbol);
+      }
+    }
+  }
+
+  return { incompatibleBorrows, zeroLtvCollateral };
+}
+
+function isEModeCategoryAvailable(blockReason: EModeCategoryBlockReason): boolean {
+  return blockReason.incompatibleBorrows.length === 0 && blockReason.zeroLtvCollateral.length === 0;
 }
 
 export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => {
@@ -80,14 +124,20 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
   const { gasLimit, mainTxState: emodeTxState, txError } = useModalContext();
   const [disableEmode, setDisableEmode] = useState(false);
 
+  const reservesByAddress = new Map(reserves.map((r) => [r.underlyingAsset, r]));
+
   const eModeCategories: Record<number, EModeCategoryDisplay> = Object.fromEntries(
-    Object.entries(eModes).map(([key, value]) => [
-      key,
-      {
-        ...value,
-        available: isEModeCategoryAvailable(user, value),
-      },
-    ])
+    Object.entries(eModes).map(([key, value]) => {
+      const blockReason = getEModeCategoryBlockReason(user, value, reservesByAddress);
+      return [
+        key,
+        {
+          ...value,
+          available: isEModeCategoryAvailable(blockReason),
+          blockReason,
+        },
+      ];
+    })
   );
 
   // For Horizon markets, use the next available category after [1]
@@ -136,22 +186,22 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
   const zeroLtvCollateralSymbols = user.userReservesData
     .filter(
       (userReserve) =>
-        Number(userReserve.scaledATokenBalance) > 0 &&
+        valueToBigNumber(userReserve.scaledATokenBalance).gt(0) &&
         userReserve.reserve.baseLTVasCollateral === '0' &&
-        userReserve.usageAsCollateralEnabledOnUser &&
-        userReserve.reserve.reserveLiquidationThreshold !== '0'
+        userReserve.usageAsCollateralEnabledOnUser
     )
     .map((r) => r.reserve.symbol);
 
   // error handling
   let blockingError: ErrorType | undefined = undefined;
-  // if user is disabling eMode
   if (user.isInEmode && disableEmode) {
     if (zeroLtvCollateralSymbols.length > 0) {
       blockingError = ErrorType.ZERO_LTV_COLLATERAL_BLOCKING;
     } else if (Number(newSummary.healthFactor) < 1.01 && newSummary.healthFactor !== '-1') {
       blockingError = ErrorType.EMODE_DISABLED_LIQUIDATION;
     }
+  } else if (!disableEmode && !selectedEmode.available) {
+    blockingError = ErrorType.CLOSE_POSITIONS_BEFORE_SWITCHING;
   }
 
   const Blocked: React.FC = () => {
@@ -184,6 +234,33 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
             </Typography>
           </Warning>
         );
+      case ErrorType.CLOSE_POSITIONS_BEFORE_SWITCHING: {
+        const { incompatibleBorrows, zeroLtvCollateral } = selectedEmode.blockReason;
+        return (
+          <Warning severity="info" sx={{ mt: 6, alignItems: 'center' }}>
+            <Typography variant="subheader1">
+              <Trans>Cannot switch to this category</Trans>
+            </Typography>
+            {incompatibleBorrows.length > 0 && (
+              <Typography variant="caption">
+                <Trans>
+                  Repay your {incompatibleBorrows.join(', ')}{' '}
+                  <Plural value={incompatibleBorrows.length} one="borrow" other="borrows" /> to use
+                  this category.
+                </Trans>
+              </Typography>
+            )}
+            {zeroLtvCollateral.length > 0 && (
+              <Typography variant="caption">
+                <Trans>
+                  Disable {zeroLtvCollateral.join(', ')} as collateral to use this category. These
+                  assets would have 0% LTV.
+                </Trans>
+              </Typography>
+            )}
+          </Warning>
+        );
+      }
       default:
         return null;
     }
@@ -390,14 +467,6 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
                   ))}
               </Select>
             </Stack>
-            {!selectedEmode.available && (
-              <Typography variant="caption" color="text.secondary" sx={{ mb: 3 }}>
-                <Trans>
-                  All borrow positions outside of this category must be closed to enable this
-                  category.
-                </Trans>
-              </Typography>
-            )}
             <Divider />
             <Row
               captionVariant="description"

src/components/transactions/Supply/CollateralOptionsSelector.tsx

@@ -76,7 +76,8 @@ function getBlockReason(
     if (incompatibleBorrow) {
       return (
         <Trans>
-          Active {incompatibleBorrow.reserve.symbol} borrow is not compatible with this category
+          Active {incompatibleBorrow.reserve.symbol} borrow is not compatible with this category.
+          Repay your {incompatibleBorrow.reserve.symbol} borrow to use this option.
         </Trans>
       );
     }
@@ -93,7 +94,12 @@ function getBlockReason(
     if (targetEmodeId === 0) {
       // Switching to no e-mode: check base LTV
       if (Number(reserve.baseLTVasCollateral) === 0) {
-        return <Trans>{reserve.symbol} collateral would have 0% LTV without E-Mode</Trans>;
+        return (
+          <Trans>
+            {reserve.symbol} collateral would have 0% LTV without E-Mode. Disable {reserve.symbol}{' '}
+            as collateral to use this option.
+          </Trans>
+        );
       }
     } else {
       // Switching to an e-mode: check if asset is in collateral bitmap with ltvzero
@@ -103,12 +109,22 @@ function getBlockReason(
         reserveTargetEmode.collateralEnabled &&
         reserveTargetEmode.ltvzeroEnabled
       ) {
-        return <Trans>{reserve.symbol} collateral would have 0% LTV in this category</Trans>;
+        return (
+          <Trans>
+            {reserve.symbol} collateral would have 0% LTV in this category. Disable {reserve.symbol}{' '}
+            as collateral to use this option.
+          </Trans>
+        );
       }
       // If asset is NOT in the category at all, it falls back to base LTV — check that too
       if (!reserveTargetEmode || !reserveTargetEmode.collateralEnabled) {
         if (Number(reserve.baseLTVasCollateral) === 0) {
-          return <Trans>{reserve.symbol} collateral would have 0% LTV in this category</Trans>;
+          return (
+            <Trans>
+              {reserve.symbol} collateral would have 0% LTV in this category. Disable{' '}
+              {reserve.symbol} as collateral to use this option.
+            </Trans>
+          );
         }
       }
     }

src/components/transactions/Supply/SupplyModalContent.tsx

@@ -261,20 +261,25 @@ export const SupplyModalContent = React.memo(
       return calculateHFAfterSupply(user, poolReserve, amountInEth);
     })();
 
-    // Override collateral type if switching e-modes changes collateral eligibility
+    // Override collateral type based on the selected e-mode's collateral eligibility,
+    // since getAssetCollateralType only considers base config and doesn't account for e-mode
     const effectiveCollateralType = (() => {
-      if (!needsEmodeSwitch) return collateralType;
+      if (!hasEmodeOptions) return collateralType;
       const targetEmode = poolReserve.eModes.find((e) => e.id === selectedEmodeId);
       if (selectedEmodeId === 0) {
-        // Switching to no e-mode — use base config
+        // Default / no e-mode — use base config
         return Number(poolReserve.baseLTVasCollateral) > 0 && poolReserve.usageAsCollateralEnabled
           ? CollateralType.ENABLED
           : CollateralType.UNAVAILABLE;
       }
       if (targetEmode && targetEmode.collateralEnabled && !targetEmode.ltvzeroEnabled) {
         return CollateralType.ENABLED;
       }
-      return CollateralType.DISABLED;
+      if (targetEmode && targetEmode.collateralEnabled && targetEmode.ltvzeroEnabled) {
+        return CollateralType.DISABLED;
+      }
+      // Not in this category's collateral bitmap — fall back to base
+      return collateralType;
     })();
 
     const supplyActionsProps = {