@lifi/widget 3.4.4 → 3.5.1-beta.0

package/i18n/zh.json

@@ -4,18 +4,20 @@
     "title": "语言"
   },
   "format": {
-    "currency": "{{value, currency(currency: USD)}}",
-    "number": "{{value, number(maximumFractionDigits: 9)}}"
+    "currency": "",
+    "number": "{{value, number(maximumFractionDigits: 9)}}",
+    "percent": ""
   },
   "button": {
     "auto": "自动",
     "bookmark": "收藏",
     "bookmarks": "收藏夹",
     "bridge": "跨链",
+    "bridgeReview": "",
     "buy": "购买",
-    "buyNow": "立即购买",
     "cancel": "取消",
     "changeWallet": "更换钱包",
+    "checkoutReview": "",
     "close": "关闭",
     "confirm": "确认",
     "connectWallet": "关联钱包",
@@ -24,6 +26,8 @@
     "copyAddress": "复制地址",
     "dark": "深色主题",
     "delete": "删除",
+    "deposit": "",
+    "depositReview": "",
     "disconnect": "断开连接",
     "done": "确认",
     "exchange": "兑换",
@@ -36,14 +40,12 @@
     "removeTransaction": "删除交易",
     "reset": "重置",
     "resetSettings": "恢复默认设置",
-    "reviewBridge": "查看跨链详情",
-    "reviewPurchase": "查看购买详情",
-    "reviewSwap": "查看该兑换",
     "seeDetails": "查看详情",
     "showAll": "显示所有",
     "startBridging": "开始跨链",
     "startSwapping": "开始兑换",
     "swap": "兑换",
+    "swapReview": "",
     "tryAgain": "重试",
     "viewCoverage": "查看我们的覆盖范围",
     "viewOnExplorer": "在区块链浏览器上查看"
@@ -53,15 +55,18 @@
     "bookmarkedWallets": "已收藏的钱包",
     "bridge": "跨链",
     "checkout": "支付",
+    "checkoutDetails": "",
+    "deposit": "",
+    "depositDetails": "",
     "exchange": "兑换",
     "from": "兑换自",
     "gas": "燃气费",
     "payWith": "支付方式",
-    "purchase": "购买",
-    "purchaseDetails": "交易明细",
+    "receive": "",
     "recentWallets": "最近使用的钱包",
     "selectChain": "选择网络",
     "selectWallet": "选择你的钱包",
+    "send": "",
     "sendToWallet": "发送到该钱包",
     "settings": "设置",
     "swap": "兑换",
@@ -69,7 +74,8 @@
     "transactionDetails": "交易详情",
     "transactionHistory": "交易记录",
     "walletConnected": "连接钱包",
-    "youGet": "您获得"
+    "youGet": "您获得",
+    "youPay": ""
   },
   "info": {
     "message": {
@@ -82,7 +88,7 @@
       "routeNotFound": "导致其的原因可能是：流动性低，所选定代币的数额太低，燃气费过高，或者当前没有合适的交易路径。"
     },
     "title": {
-      "autoRefuel": "获得燃气费",
+      "autoRefuel": "",
       "emptyActiveTransactions": "没有正在进行的交易",
       "emptyTransactionHistory": "近期无交易",
       "routeNotFound": "没有可用的路由"
@@ -90,14 +96,15 @@
   },
   "success": {
     "message": {
-      "exchangePartiallySuccessful": "我们尝试完成本次交易，但是 {{tool}} 的 {{tokenSymbol}} 代币流动性不足。",
+      "exchangePartiallySuccessful": "",
       "exchangeSuccessful": "{{walletAddress}} 钱包在 {{chainName}} 链上收到 {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}",
-      "purchaseSuccessful": "您的 {{walletAddress}} 钱包在 {{chainName}} 链上拥有该 {{assetName}} 财产"
+      "checkoutSuccessful": ""
     },
     "title": {
       "bridgePartiallySuccessful": "跨链部分成功",
       "bridgeSuccessful": "跨链成功",
-      "purchaseSuccessful": "购买成功",
+      "depositSuccessful": "",
+      "checkoutSuccessful": "",
       "refundIssued": "退款已受理",
       "swapPartiallySuccessful": "兑换部分完成",
       "swapSuccessful": "兑换成功"
@@ -132,8 +139,10 @@
       "signatureRejected": "需要您签名来完成此次交易。不用担心，{{chainName}} 链上 {{amount, number(maximumFractionDigits: 9)}} 个 {{tokenSymbol}} 仍在您的钱包里。",
       "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
       "transactionCanceled": "交易已被取消。",
+      "transactionExpired": "",
       "transactionFailed": "请查看区块浏览器以了解更多信息。",
       "transactionNotSent": "交易未能发送。",
+      "transactionSimulationFailed": "",
       "unknown": "请再试一次或者联系支持。",
       "walletChangedDuringExecution": ""
     },
@@ -149,7 +158,9 @@
       "signatureRejected": "交易需要签名。",
       "slippageNotMet": "滑点未满足",
       "transactionCanceled": "交易取消",
+      "transactionExpired": "",
       "transactionFailed": "交易失败",
+      "transactionSimulationFailed": "",
       "transactionUnderpriced": "交易定价过低",
       "transactionUnprepared": "无法开始该交易",
       "unknown": "未知错误",
@@ -161,16 +172,20 @@
     }
   },
   "tooltip": {
-    "estimatedTime": "预计兑换的执行时间（分钟）。",
+    "deselectAll": "取消全选",
+    "estimatedTime": "",
+    "feeCollection": "",
+    "minReceived": "",
     "notFound": {
       "text": "我们找不到这个页面。",
       "title": "404"
     },
-    "numberOfSteps": "一系列的兑换步骤，每个步骤可能包含1-2个需要签名的交易。",
+    "numberOfSteps": "",
+    "priceImpact": "",
     "progressToNextUpdate": "数据将在{{value}} 秒后自动刷新，点击这里可以手动更新。",
-    "settingsModified": "设置(已修改)",
     "selectAll": "全选",
-    "deselectAll": "取消全选"
+    "settingsModified": "设置(已修改)",
+    "slippage": ""
   },
   "main": {
     "allTokens": "所有代币",
@@ -180,21 +195,22 @@
     "depositStepDetails": "通过 {{tool}} 存入资金",
     "featuredTokens": "精选代币",
     "fees": {
-      "estimated": "预估费用",
-      "networkEstimated": "预估网络费用:",
-      "networkPaid": "已支付网络费用：",
-      "paid": "已支付费用",
-      "providerEstimated": "预估流动性提供商费用：",
-      "providerPaid": "已支付流动性提供商费用："
+      "defaultIntegrator": "",
+      "estimated": "",
+      "integrator": "",
+      "network": "",
+      "paid": "",
+      "provider": ""
     },
     "from": "从",
-    "fromAmount": "需要支付",
-    "gasCost": "燃气费消耗",
     "inProgress": "进行中",
+    "maxSlippage": "",
+    "minReceived": "",
     "myTokens": "我的代币",
     "onChain": "在{{chainName}} 上",
     "ownedBy": "属于",
     "popularTokens": "热门代币",
+    "priceImpact": "",
     "process": {
       "bridge": {
         "actionRequired": "请签署此交易",
@@ -243,18 +259,17 @@
     "sentToAddress": "发送到{{address}}",
     "stepBridge": "跨链",
     "stepBridgeAndBuy": "跨链并购买",
+    "stepBridgeAndDeposit": "",
     "stepDetails": "通过 LI.FI {{tool}}",
     "stepSwap": "兑换",
     "stepSwapAndBridge": "兑换和跨链",
     "stepSwapAndBuy": "兑换并购买",
+    "stepSwapAndDeposit": "",
     "supportId": "支持ID",
     "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
     "tags": {
       "cheapest": "最佳报价",
-      "fastest": "速度最坏",
-      "insurable": "可投保",
-      "insurance": "保险",
-      "insured": "受保中"
+      "fastest": "速度最坏"
     },
     "to": "到",
     "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
@@ -262,12 +277,6 @@
     "tokenSearch": "按代币名称或者地址搜索",
     "valueLoss": "资金损失"
   },
-  "insurance": {
-    "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
-    "insure": "在跨链期间为<0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> 投保。",
-    "insured": "在跨链期间为<0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> 投保。",
-    "slippageError": "目标链代币的滑点错误"
-  },
   "settings": {
     "theme": "主题",
     "enabledBridges": "跨链桥",
@@ -279,7 +288,7 @@
       "title": "燃气费"
     },
     "routePriority": "路由优先级",
-    "slippage": "滑点",
+    "slippage": "",
     "custom": "自定义",
     "resetSettings": "您正在使用自定义设置来过滤可用路由。"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.4.4",
+  "version": "3.5.1-beta.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -32,29 +32,29 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.1.5",
-    "@lifi/wallet-management": "^3.1.3",
+    "@lifi/sdk": "^3.2.0",
+    "@lifi/wallet-management": "^3.1.5-beta.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.95.2",
-    "@tanstack/react-query": "^5.51.23",
-    "@tanstack/react-virtual": "^3.9.0",
-    "i18next": "^23.12.3",
+    "@solana/web3.js": "^1.95.3",
+    "@tanstack/react-query": "^5.55.4",
+    "@tanstack/react-virtual": "^3.10.7",
+    "i18next": "^23.15.1",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.1",
-    "react-intersection-observer": "^9.13.0",
-    "react-router-dom": "^6.26.0",
+    "react-intersection-observer": "^9.13.1",
+    "react-router-dom": "^6.26.2",
     "uuid": "^10.0.0",
-    "viem": "^2.19.4",
-    "wagmi": "^2.12.5",
+    "viem": "^2.21.4",
+    "wagmi": "^2.12.9",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

package/pages/SelectTokenPage/useTokenListHeight.ts

@@ -78,6 +78,9 @@ export const useTokenListHeight = ({
 
     const processResize = debounce(() => handleResize(), 40);
 
+    // calling this on initial mount prevents the lists resizing appearing glitchy
+    handleResize();
+
     const appContainer = document.getElementById(
       createElementId(ElementId.AppExpandedContainer, elementId),
     );

package/pages/SendToWallet/BookmarksPage.tsx

@@ -15,7 +15,7 @@ import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ListItemButton } from '../../components/ListItem//ListItemButton.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { Menu } from '../../components/Menu.js';
-import { useChains } from '../../hooks/useChains.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
@@ -43,11 +43,11 @@ export const BookmarksPage = () => {
   const { requiredToChainType } = useToAddressRequirements();
   const { addBookmark, removeBookmark, setSelectedBookmark } =
     useBookmarkActions();
-  const { getChainById } = useChains();
   const navigate = useNavigate();
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
   const { variant } = useWidgetConfig();
+  const { getAddressLink } = useExplorer();
 
   useHeader(t(`header.bookmarkedWallets`));
 
@@ -88,9 +88,11 @@ export const BookmarksPage = () => {
 
   const handleViewOnExplorer = () => {
     if (bookmark) {
-      const chain = getChainById(defaultChainIdsByType[bookmark.chainType]);
       window.open(
-        `${chain?.metamask.blockExplorerUrls[0]}address/${bookmark.address}`,
+        getAddressLink(
+          bookmark.address,
+          defaultChainIdsByType[bookmark.chainType],
+        ),
         '_blank',
       );
     }

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -14,7 +14,7 @@ import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
 import type { Account } from '../../hooks/useAccount.js';
 import { useAccount } from '../../hooks/useAccount.js';
-import { useChains } from '../../hooks/useChains.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
@@ -33,7 +33,6 @@ export const ConnectedWalletsPage = () => {
   const [selectedAccount, setSelectedAccount] = useState<Account>();
   const { accounts } = useAccount();
   const { setSelectedBookmark } = useBookmarkActions();
-  const { getChainById } = useChains();
   const { requiredToChainType } = useToAddressRequirements();
   const navigate = useNavigate();
   const { setFieldValue } = useFieldActions();
@@ -41,6 +40,7 @@ export const ConnectedWalletsPage = () => {
   const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
   const moreMenuId = useId();
   const open = Boolean(moreMenuAnchorEl);
+  const { getAddressLink } = useExplorer();
 
   useHeader(t('sendToWallet.connectedWallets'));
 
@@ -79,11 +79,12 @@ export const ConnectedWalletsPage = () => {
 
   const handleViewOnExplorer = () => {
     if (selectedAccount?.chainId) {
-      const chain = getChainById(selectedAccount.chainId);
-      window.open(
-        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedAccount.address}`,
-        '_blank',
-      );
+      if (selectedAccount.address) {
+        window.open(
+          getAddressLink(selectedAccount.address, selectedAccount.chainId),
+          '_blank',
+        );
+      }
     }
     closeMenu();
   };

package/pages/SendToWallet/RecentWalletsPage.tsx

@@ -15,7 +15,7 @@ import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
-import { useChains } from '../../hooks/useChains.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
@@ -47,12 +47,12 @@ export const RecentWalletsPage = () => {
     setSelectedBookmark,
     addRecentWallet,
   } = useBookmarkActions();
-  const { getChainById } = useChains();
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
   const moreMenuId = useId();
   const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
   const open = Boolean(moreMenuAnchorEl);
+  const { getAddressLink } = useExplorer();
 
   useHeader(t(`header.recentWallets`));
 
@@ -95,11 +95,11 @@ export const RecentWalletsPage = () => {
 
   const handleViewOnExplorer = () => {
     if (selectedRecent) {
-      const chain = getChainById(
-        defaultChainIdsByType[selectedRecent.chainType],
-      );
       window.open(
-        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedRecent.address}`,
+        getAddressLink(
+          selectedRecent.address,
+          defaultChainIdsByType[selectedRecent.chainType],
+        ),
         '_blank',
       );
     }

package/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -10,7 +10,7 @@ import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
-import { useChains } from '../../hooks/useChains.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
@@ -34,10 +34,10 @@ export const SendToConfiguredWalletPage = () => {
   const { requiredToChainType } = useToAddressRequirements();
   const { setSelectedBookmark } = useBookmarkActions();
   const { setFieldValue } = useFieldActions();
-  const { getChainById } = useChains();
   const moreMenuId = useId();
   const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
   const open = Boolean(moreMenuAnchorEl);
+  const { getAddressLink } = useExplorer();
 
   useHeader(t(`header.sendToWallet`));
 
@@ -65,11 +65,11 @@ export const SendToConfiguredWalletPage = () => {
 
   const handleViewOnExplorer = () => {
     if (selectedToAddress) {
-      const chain = getChainById(
-        defaultChainIdsByType[selectedToAddress.chainType],
-      );
       window.open(
-        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedToAddress.address}`,
+        getAddressLink(
+          selectedToAddress.address,
+          defaultChainIdsByType[selectedToAddress.chainType],
+        ),
         '_blank',
       );
     }

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -44,6 +44,9 @@ interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
 
 export const FullHeightAdjustablePageContainer = styled(
   SendToWalletPageContainer,
+  {
+    shouldForwardProp: (prop) => prop !== 'enableFullHeight',
+  },
 )<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
   justifyContent: 'space-between',
   ...(enableFullHeight && theme.container?.height === '100%'

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,12 +1,8 @@
 import type { FullStatusData } from '@lifi/sdk';
-import { ContentCopyRounded } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { Card } from '../../components/Card/Card.js';
-import { CardIconButton } from '../../components/Card/CardIconButton.js';
-import { CardTitle } from '../../components/Card/CardTitle.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { getStepList } from '../../components/Step/StepList.js';
@@ -22,6 +18,7 @@ import { buildRouteFromTxHistory } from '../../utils/converters.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { ContactSupportButton } from './ContactSupportButton.js';
 import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
+import { TransferIdCard } from './TransferIdCard.js';
 
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
@@ -66,10 +63,6 @@ export const TransactionDetailsPage: React.FC = () => {
     }
   }, [isLoading, navigate, routeExecution]);
 
-  const copySupportId = async () => {
-    await navigator.clipboard.writeText(supportId);
-  };
-
   const sourceTxHash = getSourceTxHash(routeExecution?.route);
 
   let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
@@ -117,30 +110,7 @@ export const TransactionDetailsPage: React.FC = () => {
           sx={{ marginTop: 2 }}
         />
       ) : null}
-      <Card sx={{ marginTop: 2 }}>
-        <Box
-          sx={{
-            display: 'flex',
-            flex: 1,
-          }}
-        >
-          <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
-          <Box mr={2} mt={1}>
-            <CardIconButton size="small" onClick={copySupportId}>
-              <ContentCopyRounded fontSize="inherit" />
-            </CardIconButton>
-          </Box>
-        </Box>
-        <Typography
-          variant="body2"
-          pt={1}
-          pb={2}
-          px={2}
-          sx={{ wordBreak: 'break-all' }}
-        >
-          {supportId}
-        </Typography>
-      </Card>
+      <TransferIdCard transferId={supportId} />
       <Box mt={2}>
         <ContactSupportButton supportId={supportId} />
       </Box>

package/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -0,0 +1,67 @@
+import { ContentCopyRounded, OpenInNew } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../../components/Card/Card.js';
+import { CardIconButton } from '../../components/Card/CardIconButton.js';
+import { CardTitle } from '../../components/Card/CardTitle.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
+
+interface TransferIdCardProps {
+  transferId: string;
+}
+
+const getTxHash = (transferId: string) =>
+  transferId.indexOf('_') !== -1
+    ? transferId.substring(0, transferId.indexOf('_'))
+    : transferId;
+
+export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
+  const { t } = useTranslation();
+  const { getTransactionLink } = useExplorer();
+
+  const copyTransferId = async () => {
+    await navigator.clipboard.writeText(transferId);
+  };
+
+  const openTransferIdInExplorer = () => {
+    const txHash = getTxHash(transferId);
+    window.open(getTransactionLink(txHash), '_blank');
+  };
+
+  return (
+    <Card sx={{ marginTop: 2 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
+        <CardTitle flex={1}>{t('main.transferId')}</CardTitle>
+        <Box
+          sx={{
+            gap: 1,
+            display: 'flex',
+            marginRight: 2,
+            marginTop: 1,
+          }}
+        >
+          <CardIconButton size="small" onClick={copyTransferId}>
+            <ContentCopyRounded fontSize="inherit" />
+          </CardIconButton>
+          <CardIconButton size="small" onClick={openTransferIdInExplorer}>
+            <OpenInNew fontSize="inherit" />
+          </CardIconButton>
+        </Box>
+      </Box>
+      <Typography
+        variant="body2"
+        pt={1}
+        pb={2}
+        px={2}
+        sx={{ wordBreak: 'break-all' }}
+      >
+        {transferId}
+      </Typography>
+    </Card>
+  );
+};

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -85,6 +85,7 @@ export const StatusBottomSheetContent: React.FC<
     subvariantOptions,
     contractSecondaryComponent,
     contractCompactComponent,
+    feeConfig,
   } = useWidgetConfig();
   const { getChainById } = useAvailableChains();
 
@@ -251,6 +252,8 @@ export const StatusBottomSheetContent: React.FC<
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
     (contractCompactComponent || contractSecondaryComponent);
 
+  const VcComponent = feeConfig?._vcComponent;
+
   return (
     <Box p={3} ref={ref}>
       {!showContractComponent ? (
@@ -296,6 +299,7 @@ export const StatusBottomSheetContent: React.FC<
       {secondaryMessage ? (
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
+      {VcComponent ? <VcComponent route={route} /> : null}
       <Box mt={2}>
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}

package/providers/I18nProvider/I18nProvider.tsx

@@ -8,6 +8,7 @@ import { deepMerge } from '../../utils/deepMerge.js';
 import { isItemAllowed } from '../../utils/item.js';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 import { currencyExtendedFormatter } from './currencyExtendedFormatter.js';
+import { percentFormatter } from './percentFormatter.js';
 import type { LanguageKey, LanguageTranslationResources } from './types.js';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -66,6 +67,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
       'currencyExt',
       currencyExtendedFormatter,
     );
+    i18n.services.formatter?.addCached('percent', percentFormatter);
 
     return i18n;
   }, [language, languageResources, languages]);

package/providers/I18nProvider/percentFormatter.ts

@@ -0,0 +1,18 @@
+/**
+ * We use <0.01% for both small positive and negative changes to keep it simple and clear, focusing on minimal impact rather than direction.
+ * Examples:
+ * +0.007% -> <0.01%
+ * -0.003% -> <0.01%
+ */
+export const percentFormatter = (lng: string | undefined, options: any) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    ...options,
+    style: 'percent',
+  });
+  return (value: any) => {
+    if ((value > 0 && value < 0.0001) || (value < 0 && value > -0.0001)) {
+      return `<${formatter.format(0.0001)}`;
+    }
+    return formatter.format(value);
+  };
+};