feat: add logic to E-mode tab

Author: therealemjy

apps/evm/src/__mocks__/models/asset.ts

@@ -24,6 +24,7 @@ export const assetData: Asset[] = [
     supplierCount: 100,
     borrowerCount: 10,
     isBorrowable: true,
+    isBorrowableByUser: true,
     exchangeRateVTokens: new BigNumber(49.589181233),
     userWalletBalanceTokens: new BigNumber('100'),
     userWalletBalanceCents: new BigNumber('12786'),
@@ -94,6 +95,7 @@ export const assetData: Asset[] = [
     supplierCount: 100,
     borrowerCount: 10,
     isBorrowable: false,
+    isBorrowableByUser: false,
     exchangeRateVTokens: new BigNumber(1),
     userWalletBalanceTokens: new BigNumber('0'),
     userWalletBalanceCents: new BigNumber('0'),
@@ -182,6 +184,7 @@ export const assetData: Asset[] = [
     supplierCount: 100,
     borrowerCount: 10,
     isBorrowable: true,
+    isBorrowableByUser: true,
     exchangeRateVTokens: new BigNumber(0.981982),
     userWalletBalanceTokens: new BigNumber('900'),
     userWalletBalanceCents: new BigNumber('90000'),
@@ -266,6 +269,7 @@ export const assetData: Asset[] = [
     supplierCount: 100,
     borrowerCount: 10,
     isBorrowable: true,
+    isBorrowableByUser: true,
     exchangeRateVTokens: new BigNumber(1.000003),
     userWalletBalanceTokens: new BigNumber('110'),
     userWalletBalanceCents: new BigNumber('11000'),

apps/evm/src/clients/api/queries/useGetPools/__tests__/__snapshots__/index.eMode.spec.ts.snap

@@ -66,14 +66,11 @@ export const generateFakeEModeGroup = ({
             : convertFactorFromSmartContract({
                 factor: new BigNumber(market.collateralFactorMantissa),
               }) + 0.1,
-        liquidationThresholdPercentage: liquidationThresholdPercentage + 12,
-        liquidationPenaltyPercentage: liquidationThresholdPercentage - 50,
+        liquidationThresholdPercentage: i > 3 ? 0 : liquidationThresholdPercentage + 12,
+        liquidationPenaltyPercentage: i > 3 ? 0 : liquidationThresholdPercentage - 50,
         liquidityCents: liquidityTokens.multipliedBy(100).toNumber(),
         liquidityTokens,
-        isBorrowable:
-          underlyingToken.symbol !== 'XVS' &&
-          underlyingToken.symbol !== 'BTCB' &&
-          underlyingToken.symbol !== 'BUSD',
+        isBorrowable: i > 3,
       };
 
       return [...acc, assetSettings];

apps/evm/src/clients/api/queries/useGetPools/getPools/formatOutput/generateFakeEModeGroup.tsx renamed to apps/evm/src/clients/api/queries/useGetPools/getPools/formatOutput/generateFakeEModeGroup/index.tsx

@@ -80,7 +80,7 @@ export const formatOutput = ({
           name: 'DeFi',
           tokens,
           chainId,
-          apiMarkets: apiPool.markets.slice(2, 8),
+          apiMarkets: apiPool.markets.slice(5, 12),
         }),
         generateFakeEModeGroup({
           id: 2,
@@ -153,6 +153,8 @@ export const formatOutput = ({
         factor: new BigNumber(market.collateralFactorMantissa),
       });
 
+      const isBorrowable = true; // TODO: fetch from API
+
       let userCollateralFactor = collateralFactor;
       let isCollateralOfUser = !!userCollateralVTokenAddresses.some(address =>
         areAddressesEqual(address, vToken.address),
@@ -163,6 +165,7 @@ export const formatOutput = ({
       );
 
       let userLiquidationThresholdPercentage = liquidationThresholdPercentage;
+      let isBorrowableByUser = isBorrowable;
 
       if (userEModeGroup) {
         const eModeAssetSettings = userEModeGroup.assetSettings.find(settings =>
@@ -175,6 +178,10 @@ export const formatOutput = ({
           // If user has enabled an E-mode group and that asset is not in it, then it doesn't count as a user collateral
           0;
 
+        // If user has enabled an E-mode group and that asset is not in it, or is not borrowable in
+        // it, then it can't be borrowed by the user
+        isBorrowableByUser = eModeAssetSettings?.isBorrowable || false;
+
         userLiquidationThresholdPercentage =
           eModeAssetSettings?.liquidationThresholdPercentage ?? liquidationThresholdPercentage;
 
@@ -322,7 +329,8 @@ export const formatOutput = ({
         userWalletBalanceCents,
         userCollateralFactor,
         userLiquidationThresholdPercentage,
-        isBorrowable: true, // TODO: get from API
+        isBorrowable, // TODO: get from API
+        isBorrowableByUser,
         // This will be calculated after all assets have been formatted
         userPercentOfLimit: 0,
         isCollateralOfUser,

apps/evm/src/clients/api/queries/useGetPools/getPools/formatOutput/index.ts

@@ -5,7 +5,7 @@ import { Icon, type IconName } from '../Icon';
 import { Tooltip } from '../Tooltip';
 
 export interface InfoIconProps {
-  tooltip: string | React.ReactElement;
+  tooltip: string | React.ReactNode;
   iconName?: IconName;
   iconClassName?: string;
   className?: string;

apps/evm/src/components/InfoIcon/index.tsx

@@ -13,7 +13,7 @@ import { TooltipContent } from './TooltipContent';
 
 export interface TooltipProps extends TooltipPrimitiveProps {
   className?: string;
-  content: string | React.ReactElement;
+  content: string | React.ReactNode;
 }
 
 export const Tooltip = ({ className, content, children, ...props }: TooltipProps) => {

apps/evm/src/components/Tooltip/index.tsx

@@ -688,16 +688,25 @@
   "pool": {
     "eMode": {
       "group": {
+        "cannotDisable": {
+          "tooltip": {
+            "blockingPositions": "You can't disable this e-mode group because you have borrow positions with assets that can't be borrowed from the pool. <Link>Show my positions</Link>",
+            "notEnoughCollateral": "You can't disable this e-mode group because your total collateral value would not cover your total borrow balance"
+          }
+        },
         "cannotEnable": {
           "modal": {
             "description": "You will need to close the following borrow positions in order to enable the <WhiteText>{{ eModeGroupName }}</WhiteText> E-mode group:",
             "repayButtonLabel": "Repay",
             "title": "Your positions"
           },
-          "tooltip": "You can't enable this E-mode group because you have borrow positions with assets that don't belong in that group. <Link>Show my positions</Link>"
+          "tooltip": {
+            "blockingPositions": "You can't enable this e-mode group because you have borrow positions with assets that don't belong in that group. <Link>Show my positions</Link>",
+            "notEnoughCollateral": "You can't enable this e-mode group because your total collateral value would not cover your total borrow balance"
+          }
         },
+        "disableButtonLabel": "Disable",
         "enableButtonLabel": "Enable",
-        "enabledButtonLabel": "Enabled",
         "healthFactor": "Health factor:",
         "switchButtonLabel": "Switch"
       },

apps/evm/src/libs/translations/translations/en.json

@@ -28,8 +28,6 @@ export const EModeHeader: React.FC<EModeHeaderProps> = ({
     },
   });
 
-  console.log('rendered');
-
   return (
     <Link
       className={cn(

apps/evm/src/pages/Account/PoolPositions/Tables/EModeHeader/index.tsx

@@ -7,36 +7,34 @@ export interface AssetsProps {
   pool: Pool;
 }
 
-export const Assets: React.FC<AssetsProps> = ({ pool }) => {
-  return (
-    <div className="space-y-6">
-      <PoolStats pools={[pool]} stats={['supply', 'borrow', 'liquidity', 'assetCount']} />
+export const Assets: React.FC<AssetsProps> = ({ pool }) => (
+  <div className="space-y-6">
+    <PoolStats pools={[pool]} stats={['supply', 'borrow', 'liquidity', 'assetCount']} />
 
-      <MarketTable
-        pools={[pool]}
-        breakpoint="lg"
-        columns={[
-          'asset',
-          'supplyBalance',
-          'labeledSupplyApy',
-          'borrowBalance',
-          'labeledBorrowApy',
-          'liquidity',
-        ]}
-        initialOrder={{
-          orderBy: 'labeledSupplyApy',
-          orderDirection: 'desc',
-        }}
-        header={
-          pool.eModeGroups.length > 0 && (
-            <EModeBanner
-              className="lg:mt-4"
-              poolComptrollerContractAddress={pool.comptrollerAddress}
-              enabledEModeGroupName={pool.userEModeGroup?.name}
-            />
-          )
-        }
-      />
-    </div>
-  );
-};
+    <MarketTable
+      pools={[pool]}
+      breakpoint="lg"
+      columns={[
+        'asset',
+        'supplyBalance',
+        'labeledSupplyApy',
+        'borrowBalance',
+        'labeledBorrowApy',
+        'liquidity',
+      ]}
+      initialOrder={{
+        orderBy: 'labeledSupplyApy',
+        orderDirection: 'desc',
+      }}
+      header={
+        pool.eModeGroups.length > 0 && (
+          <EModeBanner
+            className="lg:mt-4"
+            poolComptrollerContractAddress={pool.comptrollerAddress}
+            enabledEModeGroupName={pool.userEModeGroup?.name}
+          />
+        )
+      }
+    />
+  </div>
+);

apps/evm/src/pages/Pool/Assets/index.tsx

@@ -0,0 +1,41 @@
+export const getHypotheticalAssetValues = ({
+  userSupplyBalanceCents,
+  userBorrowBalanceCents,
+  isBorrowable,
+  isCollateralOfUser,
+  collateralFactor,
+  liquidationThresholdPercentage,
+}: {
+  userSupplyBalanceCents: number;
+  userBorrowBalanceCents: number;
+  isBorrowable: boolean;
+  isCollateralOfUser: boolean;
+  collateralFactor: number;
+  liquidationThresholdPercentage: number;
+}) => {
+  let isBlocking = false;
+  let liquidationThresholdCents = 0;
+  let borrowLimitCents = 0;
+  let borrowBalanceCents = 0;
+
+  if (!isBorrowable && userBorrowBalanceCents > 0) {
+    isBlocking = true;
+  }
+
+  if (isBorrowable) {
+    borrowBalanceCents += userBorrowBalanceCents;
+  }
+
+  if (!!collateralFactor && !!liquidationThresholdPercentage && isCollateralOfUser) {
+    borrowLimitCents += userSupplyBalanceCents * collateralFactor;
+
+    liquidationThresholdCents += (userSupplyBalanceCents * liquidationThresholdPercentage) / 100;
+  }
+
+  return {
+    isBlocking,
+    liquidationThresholdCents,
+    borrowLimitCents,
+    borrowBalanceCents,
+  };
+};