feat: add E-mode and Isolation mode tabs to Markets page

Author: therealemjy

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

@@ -4,6 +4,7 @@ export interface ButtonGroupProps {
   buttonLabels: React.ReactNode[];
   activeButtonIndex: number;
   onButtonClick: (newIndex: number) => void;
+  variant?: 'primary' | 'secondary';
   fullWidth?: boolean;
   className?: string;
   buttonClassName?: string;
@@ -15,15 +16,19 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({
   activeButtonIndex = 0,
   onButtonClick,
   fullWidth = false,
+  variant = 'primary',
   className,
   buttonClassName,
   buttonSize,
 }) => {
   return (
     <div
       className={cn(
-        'flex items-center bg-dark-blue-disabled border border-dark-blue-hover rounded-lg whitespace-nowrap',
+        'flex items-center whitespace-nowrap',
         fullWidth ? 'w-full' : 'max-sm:w-full',
+        variant === 'primary'
+          ? 'bg-dark-blue-disabled border border-dark-blue-hover rounded-lg'
+          : 'gap-x-3',
         className,
       )}
     >

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

@@ -1,4 +1,5 @@
 import { cn } from '@venusprotocol/ui';
+import { Fragment } from 'react/jsx-runtime';
 
 import { Card } from 'components';
 import { Cell, type CellProps } from '../Cell';
@@ -33,9 +34,8 @@ export const CellGroup: React.FC<CellGroupProps> = ({
     {...containerProps}
   >
     {cells.map((cell, index) => (
-      <>
+      <Fragment key={`cell-group-item-${cell.label}`}>
         <Cell
-          key={`cell-group-item-${cell.label}`}
           {...cell}
           className={cn(
             'xl:bg-transparent',
@@ -57,7 +57,7 @@ export const CellGroup: React.FC<CellGroupProps> = ({
             )}
           />
         )}
-      </>
+      </Fragment>
     ))}
   </Card>
 );

apps/evm/src/containers/SwitchChain/index.tsx

@@ -9,7 +9,7 @@ import type { ChainId } from 'types';
 export interface SwitchChainProps extends React.HTMLAttributes<HTMLDivElement> {
   buttonClassName?: string;
   buttonVariant?: ButtonProps['variant'];
-  small?: boolean;
+  buttonSize?: ButtonProps['size'];
   chainId?: ChainId;
 }
 
@@ -18,7 +18,7 @@ export const SwitchChain: React.FC<SwitchChainProps> = ({
   chainId,
   buttonClassName,
   buttonVariant,
-  small,
+  buttonSize,
   ...otherProps
 }) => {
   const { accountAddress } = useAccountAddress();
@@ -43,7 +43,7 @@ export const SwitchChain: React.FC<SwitchChainProps> = ({
           className={cn('w-full', buttonClassName)}
           onClick={handleSwitchChain}
           variant={buttonVariant}
-          size={small ? 'xs' : 'md'}
+          size={buttonSize}
         >
           {t('switchChain.switchButton', {
             chainName: targetChain.name,

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

@@ -18,10 +18,6 @@
     "limit": "Limit:",
     "tooltip": "Borrow balance:<LineBreak/>{{borrowBalance}} ({{borrowLimitUsedPercentage}} of your borrow limit)<LineBreak/><LineBreak/>Safe borrow limit:<LineBreak/>{{safeBorrowLimit}} ({{safeBorrowLimitPercentage}}% of your borrow limit)"
   },
-  "adBanner": {
-    "learnMore": "Learn more",
-    "startNow": "Start now"
-  },
   "adCarousel": {
     "boostBanner": {
       "buttonLabel": "Learn more",
@@ -202,17 +198,6 @@
     "modalTitle": "{{ poolName }} tokens",
     "supplyDescription": "Supplying {{tokenSymbol}} to the {{poolName}} pool will enable you to borrow tokens from this pool exclusively. <Button>Show all markets</Button>"
   },
-  "binanceWalletBanner": {
-    "bgIllustrationAltText": "Background illustration",
-    "binanceLogoAltText": "Binance logo",
-    "description": "Borrow USDT and share <Bold>$400,000</Bold> in rewards!",
-    "title": "Venus is live on Binance Wallet Earn."
-  },
-  "boostBanner": {
-    "description": "One-click leverage to boost your yield <White>up to 5x</White>.",
-    "rocketAltText": "Rocket illustration",
-    "title": "Boost is available now!"
-  },
   "breadcrumbs": {
     "bridge": "Bridge",
     "dashboard": "Dashboard",
@@ -392,9 +377,6 @@
           "title": "No borrow positions yet"
         }
       },
-      "placeholder": {
-        "title": "No supply or borrow positions yet"
-      },
       "supplyTab": {
         "placeholder": {
           "title": "No supply positions yet"
@@ -462,7 +444,7 @@
     "exploreButtonLabel": "Explore",
     "illustrationAltText": "E-mode illustration",
     "manageEModeButtonLabel": "Manage E-mode",
-    "title": "Boost your borrowing power with E-Mode"
+    "title": "Boost your borrowing power with E-mode"
   },
   "errors": {
     "couldNotRetrieveSigner": "Signer could not be retrieved, please make sure your wallet is unlocked then reload the page",
@@ -584,11 +566,6 @@
       "utilizationRate": "Utilization rate"
     }
   },
-  "isolatedPoolsSunsetBanner": {
-    "description": "Claim your rewards and close your positions",
-    "illustrationAltText": "Illustration",
-    "title": "Isolated pools are being sunsetted"
-  },
   "landing": {
     "benefits": {
       "text1": "Access an immutable money market directly on-chain.",
@@ -786,61 +763,32 @@
     },
     "supplyInfo": {
       "title": "Supply info"
+    },
+    "tabs": {
+      "eMode": {
+        "illustrationAltText": "Lightning illustration",
+        "liquidationPenalty": {
+          "label": "Liquidation penalty"
+        },
+        "liquidationThreshold": {
+          "label": "Liquidation threshold"
+        },
+        "maxLtv": {
+          "label": "Max LTV",
+          "tooltip": "The maximum LTV is the borrowing limit. At {{maxLtv}} LTV, 1 {{tokenSymbol}} of collateral allows borrowing {{userCollateralFactor}} {{tokenSymbol}} worth of currency."
+        }
+      }
     }
   },
   "markets": {
     "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": {
-            "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",
-        "disabledNotice": "This E-Mode group is no longer supported. Your account now falls back to default parameters. Please switch to another available E-mode group or disable it.",
-        "enableButtonLabel": "Enable",
-        "healthFactor": "Health factor:",
-        "switchButtonLabel": "Switch"
-      },
-      "notice": "Enabling E-Mode allows you to maximize your borrowing power, however, borrowing is restricted to assets within the selected group. <Link>Learn more</Link>",
-      "search": {
-        "placeholder": "Search asset or group"
-      },
       "table": {
         "card": {
           "header": {
             "borrowable": "Borrowable",
             "collateral": "Collateral"
-          },
-          "rows": {
-            "liquidationPenalty": "Liquidation penalty",
-            "liquidationThreshold": "Liquidation threshold",
-            "maxLtv": "Max LTV"
           }
-        },
-        "columns": {
-          "asset": "Asset",
-          "collateral": "Collateral",
-          "isBorrowable": "Borrowable",
-          "liquidationPenalty": "Liquidation penalty",
-          "liquidationThreshold": "Liquidation threshold",
-          "maxLtv": "Max LTV",
-          "penalty": "Penalty",
-          "threshold": "Threshold"
-        },
-        "mobileSelectLabel": "Sort by:"
+        }
       }
     },
     "errors": {
@@ -868,22 +816,62 @@
       }
     },
     "tabs": {
-      "assets": {
-        "title": "Assets"
-      },
       "eMode": {
-        "illustrationAltText": "Lightning illustration",
-        "liquidationPenalty": {
-          "label": "Liquidation penalty"
+        "eModeNotice": "Enabling E-mode allows you to maximize your borrowing power, however, borrowing is restricted to assets within the selected group. <Link>Learn more</Link>",
+        "group": {
+          "cannotDisable": {
+            "tooltip": {
+              "blockingPositions": "You can't disable this 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 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> group:",
+              "repayButtonLabel": "Repay",
+              "title": "Your positions"
+            },
+            "tooltip": {
+              "blockingPositions": "You can't enable this 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 group because your total collateral value would not cover your total borrow balance"
+            }
+          },
+          "disableButtonLabel": "Disable",
+          "disabledNotice": "This group is no longer supported. Your account now falls back to Core Pool parameters. Please switch to another available group or disable it.",
+          "enableButtonLabel": "Enable",
+          "healthFactor": "Health factor:",
+          "switchButtonLabel": "Switch"
         },
-        "liquidationThreshold": {
-          "label": "Liquidation threshold"
+        "isolationModeNotice": "Enabling isolation mode allows you to maximize your borrowing power, however, supplying and borrowing are restricted to assets within the selected group. <Link>Learn more</Link>",
+        "label": "E-mode",
+        "pausedAssetsToggle": {
+          "label": "Paused assets"
         },
-        "maxLtv": {
-          "label": "Max LTV",
-          "tooltip": "The maximum LTV is the borrowing limit. At {{maxLtv}} LTV, 1 {{tokenSymbol}} of collateral allows borrowing {{userCollateralFactor}} {{tokenSymbol}} worth of currency."
+        "search": {
+          "placeholder": "Search asset or group"
+        },
+        "table": {
+          "columns": {
+            "asset": "Asset",
+            "collateral": "Collateral",
+            "isBorrowable": "Borrowable",
+            "liquidationPenalty": "Liquidation penalty",
+            "liquidationThreshold": "Liquidation threshold",
+            "maxLtv": "Max LTV",
+            "penalty": "Penalty",
+            "threshold": "Threshold"
+          },
+          "mobileSelectLabel": "Sort by:"
         },
-        "title": "E-mode"
+        "userAssetsOnlyToggle": {
+          "label": "My assets only"
+        }
+      },
+      "isolationMode": {
+        "label": "Isolation mode"
+      },
+      "markets": {
+        "label": "Markets"
       }
     }
   },
@@ -1133,11 +1121,6 @@
     "tokensLeft_other": "<WhiteText>{{count}}</WhiteText> prime tokens left",
     "waitForPrimeTitle": "{{claimWaitingPeriod}} until you can claim Prime rewards"
   },
-  "probableBanner": {
-    "description": "Give your conviction a boost on probable.markets",
-    "probableAltText": "Probable illustration",
-    "title": "Believe in something?"
-  },
   "proposalList": {
     "selectOptions": {
       "all": {