feat: support isolation mode tag

.changeset/huge-otters-battle.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+feat: support isolated mode tag

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

@@ -0,0 +1,23 @@
+import { cn } from '@venusprotocol/ui';
+
+import { useTranslation } from 'libs/translations';
+import { InfoIcon } from '../InfoIcon';
+
+export interface IsolatedAssetIndicatorProps {
+  className?: string;
+}
+
+export const IsolatedAssetIndicator: React.FC<IsolatedAssetIndicatorProps> = ({ className }) => {
+  const { t } = useTranslation();
+
+  return (
+    <span className={cn('inline-flex items-center gap-x-1 text-yellow', className)}>
+      <span className="text-b2s">{t('marketTable.assetColumn.isolated')}</span>
+
+      <InfoIcon
+        iconClassName="text-yellow"
+        tooltip={t('marketTable.assetColumn.isolatedTooltip')}
+      />
+    </span>
+  );
+};

apps/evm/src/components/index.ts

@@ -60,6 +60,7 @@ export * from './EModeIcon';
 export * from './ProtectionModeIndicator';
 export * from './MarketStatus';
 export * from './Slider';
+export * from './IsolatedAssetIndicator';
 export * from './IsolatedEModeGroupTooltip';
 export * from './TokenIcon';
 export * from './BalanceUpdates';

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

@@ -42,6 +42,7 @@ export interface MarketTableProps
   columns: ColumnKey[];
   modalColumn?: boolean;
   userEModeGroup?: EModeGroup;
+  eModeGroups?: EModeGroup[];
   isolatedModeGroup?: EModeGroup;
   controls?: boolean;
   rowControl?: boolean;
@@ -60,6 +61,7 @@ export const MarketTable: React.FC<MarketTableProps> = ({
   marketType,
   columns: columnKeys,
   userEModeGroup,
+  eModeGroups,
   isolatedModeGroup,
   initialOrder,
   breakpoint,
@@ -115,6 +117,7 @@ export const MarketTable: React.FC<MarketTableProps> = ({
     columnKeys,
     collateralOnChange: handleCollateralChange,
     userEModeGroup,
+    eModeGroups,
     marketType,
   });
 

apps/evm/src/containers/MarketTable/useColumns/index.tsx

@@ -4,11 +4,13 @@ import { cn } from '@venusprotocol/ui';
 import {
   EModeIcon,
   InfoIcon,
+  IsolatedAssetIndicator,
   LayeredValues,
   ProgressBar,
   ProtectionModeIndicator,
   type TableColumn,
   Toggle,
+  TokenIcon,
   TokenIconWithSymbol,
   Tooltip,
 } from 'components';
@@ -67,11 +69,13 @@ export const useColumns = ({
   columnKeys,
   collateralOnChange,
   userEModeGroup,
+  eModeGroups,
   marketType,
 }: {
   columnKeys: ColumnKey[];
   collateralOnChange: (asset: Asset) => void;
   userEModeGroup?: EModeGroup;
+  eModeGroups?: EModeGroup[];
   marketType?: 'supply' | 'borrow';
 }) => {
   const { t, Trans } = useTranslation();
@@ -132,14 +136,36 @@ export const useColumns = ({
         });
 
         if (column === 'asset' || column === 'assetAndChain') {
+          const showIsolatedIndicator =
+            column === 'asset' &&
+            asset.collateralFactor === 0 &&
+            !asset.isBorrowable &&
+            !!eModeGroups?.some(
+              group =>
+                group.isIsolated &&
+                group.assetSettings.some(settings => areTokensEqual(settings.vToken, asset.vToken)),
+            );
+
           return (
             <div className="flex min-w-0 items-center space-x-1">
-              <TokenIconWithSymbol
-                token={asset.vToken.underlyingToken}
-                displayChain={column === 'assetAndChain'}
-                size={column === 'assetAndChain' ? 'md' : 'xl'}
-                className="min-w-[5rem]"
-              />
+              {showIsolatedIndicator ? (
+                <div className="flex min-w-[5rem] items-center gap-x-3">
+                  <TokenIcon token={asset.vToken.underlyingToken} size="xl" className="shrink-0" />
+
+                  <div className="min-w-0">
+                    <p className="truncate font-semibold">{asset.vToken.underlyingToken.symbol}</p>
+
+                    <IsolatedAssetIndicator />
+                  </div>
+                </div>
+              ) : (
+                <TokenIconWithSymbol
+                  token={asset.vToken.underlyingToken}
+                  displayChain={column === 'assetAndChain'}
+                  size={column === 'assetAndChain' ? 'md' : 'xl'}
+                  className="min-w-[5rem]"
+                />
+              )}
 
               {userEModeGroup && isInUserEModeGroup && (
                 <Tooltip

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

@@ -289,7 +289,13 @@
   "assetWarning": {
     "borrowDescription": "You may borrow {{tokenSymbol}} according to your collateralized supply in the {{poolName}} pool. <Button>Show all tokens</Button>",
     "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>"
+    "modeInfoHint": "<LineBreak/>Visit the <ModeInfoButton>Mode info</ModeInfoButton> section to explore more available groups.",
+    "modeOnly": {
+      "eMode": "{{tokenSymbol}} is only available in E-mode. Visit the <ModeInfoButton>Mode info</ModeInfoButton> section to enable the group, or browse other assets in <Button>Show all markets</Button>.",
+      "eModeAndIsolation": "{{tokenSymbol}} is only available in E-mode and Isolation mode. Visit the <ModeInfoButton>Mode info</ModeInfoButton> section to enable one of the groups, or browse other assets in <Button>Show all markets</Button>.",
+      "isolation": "{{tokenSymbol}} is only available in Isolation mode. Visit the <ModeInfoButton>Mode info</ModeInfoButton> section to enable the group, or browse other assets in <Button>Show all markets</Button>."
+    },
+    "supplyDescription": "Supplying {{tokenSymbol}} to the Core Pool lets you borrow tokens from this pool exclusively. <Button>Show all markets</Button>"
   },
   "availableBalance": {
     "label": "Available"
@@ -1004,6 +1010,8 @@
   "marketTable": {
     "assetColumn": {
       "eMode": "This market is part of the {{eModeGroupName}} E-mode group",
+      "isolated": "Isolated",
+      "isolatedTooltip": "This asset is only available in its corresponding isolation mode.",
       "isolationMode": "This market is part of the {{eModeGroupName}} isolation mode group",
       "pausedAssetTooltip": "Asset paused by Venus Governance. Borrowing and supplying have been disabled.",
       "protectionMode": "Protection mode is active for {{tokenName}} due to price volatility, affecting its collateral and borrow prices. <LearnMore>Learn more</LearnMore>",

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

@@ -289,7 +289,13 @@
   "assetWarning": {
     "borrowDescription": "{{poolName}}プールで担保として供給しているため、{{tokenSymbol}}を借りられます。<Button>すべてのトークンを表示</Button>",
     "modalTitle": "{{ poolName }} トークン",
-    "supplyDescription": "{{poolName}}プールに{{tokenSymbol}}を供給すると、このプールのみからトークンを借りられるようになります。<Button>すべてのマーケットを表示</Button>"
+    "modeInfoHint": "<LineBreak/>利用可能なグループをさらに確認するには、<ModeInfoButton>モード情報</ModeInfoButton>セクションをご覧ください。",
+    "modeOnly": {
+      "eMode": "{{tokenSymbol}}はEモードでのみ利用可能です。<ModeInfoButton>モード情報</ModeInfoButton>セクションでグループを有効にするか、<Button>すべてのマーケットを表示</Button>から他の資産を確認してください。",
+      "eModeAndIsolation": "{{tokenSymbol}}はEモードと隔離モードでのみ利用可能です。<ModeInfoButton>モード情報</ModeInfoButton>セクションでいずれかのグループを有効にするか、<Button>すべてのマーケットを表示</Button>から他の資産を確認してください。",
+      "isolation": "{{tokenSymbol}}は隔離モードでのみ利用可能です。<ModeInfoButton>モード情報</ModeInfoButton>セクションでグループを有効にするか、<Button>すべてのマーケットを表示</Button>から他の資産を確認してください。"
+    },
+    "supplyDescription": "コアプールに{{tokenSymbol}}を供給すると、このプールからのみトークンを借りられます。<Button>すべてのマーケットを表示</Button>"
   },
   "availableBalance": {
     "label": "利用可能"
@@ -1004,6 +1010,8 @@
   "marketTable": {
     "assetColumn": {
       "eMode": "このマーケットは{{eModeGroupName}}のEモードグループに含まれます",
+      "isolated": "隔離",
+      "isolatedTooltip": "この資産は対応する隔離モードでのみ利用可能です。",
       "isolationMode": "このマーケットは{{eModeGroupName}}の隔離モードグループに含まれます",
       "pausedAssetTooltip": "資産はVenusガバナンスにより停止されています。借入と供給が無効化されています。",
       "protectionMode": "価格変動により、{{tokenName}} のプロテクションモードが有効になっています。担保価格と借入価格に影響します。 <LearnMore>詳細はこちら</LearnMore>",

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

@@ -289,7 +289,13 @@
   "assetWarning": {
     "borrowDescription": "คุณสามารถยืม {{tokenSymbol}} ได้ตามยอดฝากที่เป็นหลักประกันในพูล {{poolName}} <Button>แสดงโทเคนทั้งหมด</Button>",
     "modalTitle": "โทเคน {{ poolName }}",
-    "supplyDescription": "การฝาก {{tokenSymbol}} ในพูล {{poolName}} จะทำให้คุณยืมโทเคนได้เฉพาะจากพูลนี้ <Button>แสดงตลาดทั้งหมด</Button>"
+    "modeInfoHint": "<LineBreak/>เยี่ยมชมส่วน <ModeInfoButton>ข้อมูลโหมด</ModeInfoButton> เพื่อสำรวจกลุ่มที่มีให้ใช้เพิ่มเติม",
+    "modeOnly": {
+      "eMode": "{{tokenSymbol}} ใช้งานได้เฉพาะใน E-mode เท่านั้น เยี่ยมชมส่วน <ModeInfoButton>ข้อมูลโหมด</ModeInfoButton> เพื่อเปิดใช้งานกลุ่ม หรือเรียกดูสินทรัพย์อื่นใน <Button>แสดงตลาดทั้งหมด</Button>",
+      "eModeAndIsolation": "{{tokenSymbol}} ใช้งานได้เฉพาะใน E-mode และโหมดแยกเท่านั้น เยี่ยมชมส่วน <ModeInfoButton>ข้อมูลโหมด</ModeInfoButton> เพื่อเปิดใช้งานกลุ่มใดกลุ่มหนึ่ง หรือเรียกดูสินทรัพย์อื่นใน <Button>แสดงตลาดทั้งหมด</Button>",
+      "isolation": "{{tokenSymbol}} ใช้งานได้เฉพาะในโหมดแยกเท่านั้น เยี่ยมชมส่วน <ModeInfoButton>ข้อมูลโหมด</ModeInfoButton> เพื่อเปิดใช้งานกลุ่ม หรือเรียกดูสินทรัพย์อื่นใน <Button>แสดงตลาดทั้งหมด</Button>"
+    },
+    "supplyDescription": "การฝาก {{tokenSymbol}} ใน Core Pool จะทำให้คุณยืมโทเคนได้เฉพาะจากพูลนี้ <Button>แสดงตลาดทั้งหมด</Button>"
   },
   "availableBalance": {
     "label": "ใช้ได้"
@@ -1004,6 +1010,8 @@
   "marketTable": {
     "assetColumn": {
       "eMode": "ตลาดนี้เป็นส่วนหนึ่งของกลุ่ม E-mode {{eModeGroupName}}",
+      "isolated": "แยก",
+      "isolatedTooltip": "สินทรัพย์นี้ใช้งานได้เฉพาะในโหมดแยกที่เกี่ยวข้องเท่านั้น",
       "isolationMode": "ตลาดนี้เป็นส่วนหนึ่งของกลุ่มโหมดแยก {{eModeGroupName}}",
       "pausedAssetTooltip": "สินทรัพย์ถูกหยุดโดยการกำกับดูแลของ Venus การยืมและการฝากถูกปิดใช้งาน",
       "protectionMode": "โหมดป้องกันเปิดใช้งานสำหรับ {{tokenName}} เนื่องจากความผันผวนของราคา ส่งผลต่อราคาหลักประกันและราคาการกู้ยืม <LearnMore>เรียนรู้เพิ่มเติม</LearnMore>",

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

@@ -289,7 +289,13 @@
   "assetWarning": {
     "borrowDescription": "{{poolName}} havuzundaki teminatlı tedarikinize göre {{tokenSymbol}} borç alabilirsiniz. <Button>Tüm tokenları göster</Button>",
     "modalTitle": "{{ poolName }} tokenları",
-    "supplyDescription": "{{poolName}} havuzuna {{tokenSymbol}} tedarik etmek, yalnızca bu havuzdan token borç almanıza olanak tanır. <Button>Tüm piyasaları göster</Button>"
+    "modeInfoHint": "<LineBreak/>Mevcut diğer grupları keşfetmek için <ModeInfoButton>Mod bilgisi</ModeInfoButton> bölümünü ziyaret edin.",
+    "modeOnly": {
+      "eMode": "{{tokenSymbol}} yalnızca E-modunda kullanılabilir. <ModeInfoButton>Mod bilgisi</ModeInfoButton> bölümünden grubu etkinleştirin veya <Button>Tüm piyasaları göster</Button> bölümünden diğer varlıklara göz atın.",
+      "eModeAndIsolation": "{{tokenSymbol}} yalnızca E-modunda ve İzolasyon modunda kullanılabilir. <ModeInfoButton>Mod bilgisi</ModeInfoButton> bölümünden gruplardan birini etkinleştirin veya <Button>Tüm piyasaları göster</Button> bölümünden diğer varlıklara göz atın.",
+      "isolation": "{{tokenSymbol}} yalnızca İzolasyon modunda kullanılabilir. <ModeInfoButton>Mod bilgisi</ModeInfoButton> bölümünden grubu etkinleştirin veya <Button>Tüm piyasaları göster</Button> bölümünden diğer varlıklara göz atın."
+    },
+    "supplyDescription": "Core Pool'a {{tokenSymbol}} tedarik etmek, yalnızca bu havuzdan token borç almanıza olanak tanır. <Button>Tüm piyasaları göster</Button>"
   },
   "availableBalance": {
     "label": "Mevcut"
@@ -1004,6 +1010,8 @@
   "marketTable": {
     "assetColumn": {
       "eMode": "Bu piyasa {{eModeGroupName}} E-modu grubunun bir parçasıdır",
+      "isolated": "İzole",
+      "isolatedTooltip": "Bu varlık yalnızca ilgili izolasyon modunda kullanılabilir.",
       "isolationMode": "Bu piyasa {{eModeGroupName}} izolasyon modu grubunun bir parçasıdır",
       "pausedAssetTooltip": "Varlık Venus Yönetişimi tarafından duraklatıldı. Borç alma ve tedarik devre dışı bırakıldı.",
       "protectionMode": "Fiyat dalgalanması nedeniyle {{tokenName}} için Koruma Modu etkin, teminat ve borçlanma fiyatlarını etkilemektedir. <LearnMore>Daha fazla bilgi</LearnMore>",

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

@@ -289,7 +289,13 @@
   "assetWarning": {
     "borrowDescription": "Bạn có thể vay {{tokenSymbol}} theo mức cung cấp làm tài sản thế chấp trong pool {{poolName}}. <Button>Hiển thị tất cả token</Button>",
     "modalTitle": "Token {{ poolName }}",
-    "supplyDescription": "Cung cấp {{tokenSymbol}} vào pool {{poolName}} sẽ cho phép bạn vay token chỉ từ pool này. <Button>Hiển thị tất cả thị trường</Button>"
+    "modeInfoHint": "<LineBreak/>Truy cập phần <ModeInfoButton>Thông tin chế độ</ModeInfoButton> để khám phá thêm các nhóm khả dụng.",
+    "modeOnly": {
+      "eMode": "{{tokenSymbol}} chỉ khả dụng trong E-mode. Truy cập phần <ModeInfoButton>Thông tin chế độ</ModeInfoButton> để bật nhóm, hoặc duyệt các tài sản khác trong <Button>Hiển thị tất cả thị trường</Button>.",
+      "eModeAndIsolation": "{{tokenSymbol}} chỉ khả dụng trong E-mode và chế độ cô lập. Truy cập phần <ModeInfoButton>Thông tin chế độ</ModeInfoButton> để bật một trong các nhóm, hoặc duyệt các tài sản khác trong <Button>Hiển thị tất cả thị trường</Button>.",
+      "isolation": "{{tokenSymbol}} chỉ khả dụng trong chế độ cô lập. Truy cập phần <ModeInfoButton>Thông tin chế độ</ModeInfoButton> để bật nhóm, hoặc duyệt các tài sản khác trong <Button>Hiển thị tất cả thị trường</Button>."
+    },
+    "supplyDescription": "Cung cấp {{tokenSymbol}} vào Core Pool sẽ cho phép bạn vay token chỉ từ pool này. <Button>Hiển thị tất cả thị trường</Button>"
   },
   "availableBalance": {
     "label": "Có sẵn"
@@ -1004,6 +1010,8 @@
   "marketTable": {
     "assetColumn": {
       "eMode": "Thị trường này thuộc nhóm E-mode {{eModeGroupName}}",
+      "isolated": "Cô lập",
+      "isolatedTooltip": "Tài sản này chỉ khả dụng trong chế độ cô lập tương ứng.",
       "isolationMode": "Thị trường này thuộc nhóm chế độ cô lập {{eModeGroupName}}",
       "pausedAssetTooltip": "Tài sản đã bị tạm dừng bởi Venus Governance. Việc vay và cung cấp đã bị vô hiệu hóa.",
       "protectionMode": "Chế độ Bảo vệ đang hoạt động cho {{tokenName}} do biến động giá, ảnh hưởng đến giá thế chấp và giá vay. <LearnMore>Tìm hiểu thêm</LearnMore>",

apps/evm/src/libs/translations/translations/zh-Hans.json

@@ -289,7 +289,13 @@
   "assetWarning": {
     "borrowDescription": "根据你在 {{poolName}} 池中的可抵押存款，可借入 {{tokenSymbol}}。<Button>显示全部代币</Button>",
     "modalTitle": "{{ poolName }} 代币",
-    "supplyDescription": "向 {{poolName}} 池提供 {{tokenSymbol}} 将使你只能从该池借入代币。<Button>显示全部市场</Button>"
+    "modeInfoHint": "<LineBreak/>访问<ModeInfoButton>模式信息</ModeInfoButton>区域以查看更多可用的组。",
+    "modeOnly": {
+      "eMode": "{{tokenSymbol}} 仅在 E-mode 中可用。访问<ModeInfoButton>模式信息</ModeInfoButton>区域以启用该组，或在<Button>显示全部市场</Button>中浏览其他资产。",
+      "eModeAndIsolation": "{{tokenSymbol}} 仅在 E-mode 和隔离模式中可用。访问<ModeInfoButton>模式信息</ModeInfoButton>区域以启用其中一个组，或在<Button>显示全部市场</Button>中浏览其他资产。",
+      "isolation": "{{tokenSymbol}} 仅在隔离模式中可用。访问<ModeInfoButton>模式信息</ModeInfoButton>区域以启用该组，或在<Button>显示全部市场</Button>中浏览其他资产。"
+    },
+    "supplyDescription": "向核心池提供 {{tokenSymbol}} 将使你只能从该池借入代币。<Button>显示全部市场</Button>"
   },
   "availableBalance": {
     "label": "可用"
@@ -1004,6 +1010,8 @@
   "marketTable": {
     "assetColumn": {
       "eMode": "该市场属于 {{eModeGroupName}} E-mode组",
+      "isolated": "隔离",
+      "isolatedTooltip": "该资产仅在对应的隔离模式中可用。",
       "isolationMode": "该市场属于 {{eModeGroupName}} 隔离模式组",
       "pausedAssetTooltip": "资产已被 Venus 治理暂停。借款与存款已禁用。",
       "protectionMode": "由于价格波动，{{tokenName}} 的保护模式已激活，影响其抵押和借款价格。 <LearnMore>了解更多</LearnMore>",