@lifi/widget 3.23.3 → 3.24.0

package/src/hooks/useTokenBalances.ts

@@ -3,15 +3,21 @@ import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
 import { formatUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
 import type { TokenAmount } from '../types/token.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useTokens } from './useTokens.js'
 
 const defaultRefetchInterval = 32_000
 
-export const useTokenBalances = (selectedChainId?: number) => {
-  const { tokens, featuredTokens, popularTokens, chain, isLoading } =
-    useTokens(selectedChainId)
+export const useTokenBalances = (
+  selectedChainId?: number,
+  formType?: FormType
+) => {
+  const { tokens, featuredTokens, popularTokens, chain, isLoading } = useTokens(
+    selectedChainId,
+    formType
+  )
   const { account } = useAccount({ chainType: chain?.chainType })
   const { keyPrefix } = useWidgetConfig()
 

package/src/hooks/useTokenSearch.ts

@@ -1,16 +1,20 @@
 import { type ChainId, type TokensResponse, getToken } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
 import type { TokenAmount } from '../types/token.js'
+import { isTokenAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export const useTokenSearch = (
   chainId?: number,
   tokenQuery?: string,
-  enabled?: boolean
+  enabled?: boolean,
+  formType?: FormType
 ) => {
   const queryClient = useQueryClient()
-  const { keyPrefix } = useWidgetConfig()
+  const { tokens: configTokens, keyPrefix } = useWidgetConfig()
+
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('token-search', keyPrefix), chainId, tokenQuery],
     queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
@@ -19,6 +23,11 @@ export const useTokenSearch = (
       })
 
       if (token) {
+        // Return undefined if the token is denied
+        if (!isTokenAllowed(token, configTokens, formType)) {
+          return undefined
+        }
+
         queryClient.setQueriesData<TokensResponse>(
           { queryKey: [getQueryKey('tokens', keyPrefix)] },
           (data) => {

package/src/hooks/useTokens.ts

@@ -2,11 +2,13 @@ import { ChainType, getTokens } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
 import type { TokenAmount } from '../types/token.js'
+import { isTokenAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useChains } from './useChains.js'
 
-export const useTokens = (selectedChainId?: number) => {
+export const useTokens = (selectedChainId?: number, formType?: FormType) => {
   const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('tokens', keyPrefix)],
@@ -45,27 +47,13 @@ export const useTokens = (selectedChainId?: number) => {
       filteredTokens = [...includedTokens, ...filteredTokens]
     }
 
-    if (configTokens?.allow?.length || configTokens?.deny?.length) {
-      const allowedTokensSet = new Set(
-        configTokens?.allow
-          ?.filter((token) => token.chainId === selectedChainId)
-          .map((token) => token.address)
-      )
-
-      const deniedTokenAddressesSet = new Set(
-        configTokens?.deny
-          ?.filter((token) => token.chainId === selectedChainId)
-          .map((token) => token.address)
-      )
+    // Get the appropriate allow/deny lists based on formType
+    filteredTokens = filteredTokens.filter(
+      (token) =>
+        token.chainId === selectedChainId &&
+        isTokenAllowed(token, configTokens, formType)
+    )
 
-      if (allowedTokensSet.size || deniedTokenAddressesSet.size) {
-        filteredTokens = filteredTokens.filter(
-          (token) =>
-            (!allowedTokensSet.size || allowedTokensSet.has(token.address)) &&
-            !deniedTokenAddressesSet.has(token.address)
-        )
-      }
-    }
     const filteredTokensMap = new Map(
       filteredTokens.map((token) => [token.address, token])
     )
@@ -118,6 +106,7 @@ export const useTokens = (selectedChainId?: number) => {
     getChainById,
     isSupportedChainsLoading,
     selectedChainId,
+    formType,
   ])
 
   return {

package/src/i18n/bn.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "আপনার {{chainName}} গ্যাস কম। চালিয়ে যাওয়ার মাধ্যমে, আপনি সোওয়াপ সম্পূর্ণ করার জন্য পর্যাপ্ত গ্যাস পাবেন।",
       "emptyActiveTransactions": "",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/de.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Sie haben nicht genug Gas auf {{chainName}}. Wenn Sie fortfahren, erhalten Sie zusätzlich genug Gas um den Swap abzuschließen.",
       "emptyActiveTransactions": "Laufende Swaps werden hier angezeigt. Sobald Sie fertig sind, finden Sie sie in der Transaktionshistorie.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/en.json

@@ -341,5 +341,9 @@
     "noBookmarkedWallets": "No bookmarked wallets",
     "noConnectedWallets": "No connected wallets",
     "noRecentWallets": "No recent wallets"
+  },
+  "tokenMetric": {
+    "currentPrice": "Current price",
+    "contractAddress": "Contract address"
   }
 }

package/src/i18n/es.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Tienes poco gas en {{chainName}}. Al continuar, obtendrás suficiente gas para completar la transacción.",
       "emptyActiveTransactions": "Las transacciones en progreso aparecerán aquí. Una vez completadas, encuéntralas en el historial de transacciones.",
       "emptyBridgesList": "No pudimos encontrar ningún puente que coincida con tu búsqueda",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "No hay billeteras preferidas",
     "noConnectedWallets": "No hay billeteras conectadas",
     "noRecentWallets": "No hay billeteras recientes"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/fr.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Vous avez peu de gaz sur {{chainName}}. En continuant, vous aurez assez de gaz pour compléter l'échange.",
       "emptyActiveTransactions": "Les transactions en cours apparaîtront ici. Une fois terminées, retrouvez-les dans l'historique des transactions.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Aucun portefeuille favori",
     "noConnectedWallets": "Aucun portefeuille connecté",
     "noRecentWallets": "Aucun portefeuille récent"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/hi.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "",
       "emptyActiveTransactions": "",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/id.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Gas anda hampir habis {{chainName}}. Dengan melanjutkan, anda akan mendapatkan cukup gas untuk menyelesaikan penukaran.",
       "emptyActiveTransactions": "Transaksi yang sedang berlangsung akan muncul di sini. Setelah selesai, temukan di riwayat transaksi.",
       "emptyBridgesList": "Kami tidak dapat menemukan bridge yang sesuai dengan pencarian Anda",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Tidak ada dompet yang ditandai",
     "noConnectedWallets": "Tida ada dompet yang di hubungkan",
     "noRecentWallets": "Tidak ada dompet terakhir yang digunakan"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/it.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Livello basso di gas su {{chainName}}. Continuando avrai abbastanza gas per completare lo scambio.",
       "emptyActiveTransactions": "Le transazioni in corso appariranno qui. Una volta completate, potrai trovarle nella cronologia delle transazioni.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/ja.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "{{chainName}} のガスが不足していますが、続行することでトランザクションを完了するのに十分なガスが補填されます。",
       "emptyActiveTransactions": "進行中のトランザクションがここに表示されます。完了すると、トランザクション履歴に表示されます。",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "ブックマークされたウォレットはありません",
     "noConnectedWallets": "接続中のウォレットはありません",
     "noRecentWallets": "最近使ったウォレットはありません"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/ko.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "현재 {{chainName}} 가스가 부족합니다. 이 기능을 통하여 스왑을 완료할 가스를 보충할 수 있습니다.",
       "emptyActiveTransactions": "진행 중인 스왑이 여기에 나타납니다. 완료 후에는 스왑 기록을 참조하십시오",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "",
     "noConnectedWallets": "",
     "noRecentWallets": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/pt.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "Sua conta inteligente pode não ter o mesmo endereço em outras cadeias. Por favor, verifique novamente antes de prosseguir.",
       "autoRefuel": "Você está com pouco gás na rede {{chainName}}. Ao continuar, você obterá gás suficiente para completar a conversão.",
       "emptyActiveTransactions": "As transações em andamento aparecerão aqui. Uma vez concluídas, encontre-as no histórico de transações.",
       "emptyBridgesList": "Não conseguimos encontrar nenhuma ponte que corresponda à sua pesquisa",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Sem carteiras favoritas",
     "noConnectedWallets": "Sem carteiras conectadas",
     "noRecentWallets": "Sem carteiras recentes"
+  },
+  "tokenMetric": {
+    "currentPrice": "Preço atual",
+    "contractAddress": "Endereço do Contrato"
   }
 }

package/src/i18n/th.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "คุณใช้แก็ส {{chainName}} เหลือน้อย เมื่อดำเนินการต่อ คุณจะได้รับแก็สเพียงพอสำหรับการแลกเปลี่ยนให้เสร็จสมบูรณ์",
       "emptyActiveTransactions": "การแลกเปลี่ยนที่กำลังดำเนินการจะปรากฏที่นี่. เมื่อเสร็จสิ้น, จะพบประวัติการแลกเปลี่ยน.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "ไม่มีกระเป๋าเงินที่ bookmark ไว้",
     "noConnectedWallets": "ไม่มีกระเป๋าเงินที่เชื่อมต่อไว้",
     "noRecentWallets": "ไม่พบกระเป๋าเงินล่าสุด"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/tr.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "{{chainName}} ağında gaz yetersiz. Devam ederek, işlem için gereken miktarda gaz alacaksınız.",
       "emptyActiveTransactions": "Devam eden işlemler burada görünecek. Tamamlandığında, işlem geçmişinden bulabilirsiniz.",
       "emptyBridgesList": "Aradığın köprüyü bulamadık",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Kayıtlı cüzdan bulunamadı",
     "noConnectedWallets": "Bağlı cüzdan bulunamadı",
     "noRecentWallets": "Son kullanılan cüzdan bulunamadı"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/uk.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "У вас замало {{chainName}} газу. Продовжуючи, ви отримаєте достатньо газу, щоб завершити обмін.",
       "emptyActiveTransactions": "Тут показуються незавершені транзакції. Після завершення ви можете знайти їх в історії транзакцій.",
       "emptyBridgesList": "Ми не змогли знайти жодного моста, що відповідає вашому запиту",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Немає гаманців в закладках",
     "noConnectedWallets": "Немає підключених гаманців",
     "noRecentWallets": "Немає недавніх гаманців"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/vi.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "Gas trên {{chainName}} chain của bạn đang thấp. Để tiếp tục, bạn nên có thêm gas để hoàn thành việc swap.",
       "emptyActiveTransactions": "Các lệnh swap đang xử lý sẽ được hiện ở đây. Khi nào lệnh hoàn tất, bạn có thể kiểm tra lại tại mục lịch sử swap.",
       "emptyBridgesList": "",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "Không có ví được đánh dấu",
     "noConnectedWallets": "Không có ví được kết nối",
     "noRecentWallets": "Không có ví gần đây"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/i18n/zh.json

@@ -86,6 +86,7 @@
   },
   "info": {
     "message": {
+      "accountDeployedMessage": "",
       "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
       "emptyActiveTransactions": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
       "emptyBridgesList": "我们找不到任何匹配的桥",
@@ -340,5 +341,9 @@
     "noBookmarkedWallets": "没有收藏的钱包",
     "noConnectedWallets": "没有已连接的钱包",
     "noRecentWallets": "没有最近使用的钱包"
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": ""
   }
 }

package/src/icons/lifi.ts

@@ -1,2 +1,2 @@
 export const LiFiToolLogo =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3e %3ccircle cx='16' cy='16' r='16' fill='%23F5B5FF'/%3e %3cpath fill='black' d='m15.503 19.203-5.334 1.235a.468.468 0 0 0-.34.439v3.672c0 .308.243.503.55.438l7.443-1.722c.308-.065.437-.357.308-.634l-1.346-2.778c-.21-.439 0-.894.47-.991l4.864-1.17c.34-.081.632-.439.632-.796V13.5c0-.309-.243-.52-.551-.439l-7.02 1.674c-.438.097-.633.52-.438.926l1.232 2.551c.211.439 0 .877-.47.991'/%3e %3cpath fill='black' d='m11.985 10.023 1.394 2.86c.179.374 0 .764-.405.845l-2.578.601c-.324.081-.584.406-.584.731v3.07c0 .52.422.846.925.732l2.4-.552c.323-.065.583-.406.583-.732l.016-3.151c0-.44.357-.878.778-.975l7.863-1.885a.468.468 0 0 0 .34-.439V7.456c0-.309-.242-.52-.55-.439L12.293 9.39c-.308.065-.438.357-.308.633'/%3e %3c/svg%3e"
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3e %3cpath fill='%23f5b5ff' d='M0 0h32v32H0z'/%3e %3cpath fill='black' d='m16 6 4.116 4.116a1.25 1.25 0 0 1 0 1.768l-2.45 2.45-1.667-1.667A4.714 4.714 0 0 1 16 6'/%3e %3cpath fill='black' fill-rule='evenodd' d='m16 26-6.667-6.667a4.714 4.714 0 0 1 0-6.666l5.783 5.783a1.25 1.25 0 0 0 1.767 0l5.783-5.783a4.714 4.714 0 0 1 0 6.666z' clip-rule='evenodd'/%3e %3c/svg%3e"

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './types/events.js'
 export type { TokenAmount } from './types/token.js'
 export * from './types/widget.js'
 export { getPriceImpact } from './utils/getPriceImpact.js'
+export * from './utils/format.js'
 export { percentFormatter } from './utils/percentFormatter.js'
 export { compactNumberFormatter } from './utils/compactNumberFormatter.js'
 export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js'

package/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -61,6 +61,7 @@ export const ActiveTransactionsPage = () => {
   return (
     <PageContainer disableGutters>
       <List
+        className="long-list"
         sx={{
           paddingTop: 0,
           paddingLeft: 1.5,

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -69,7 +69,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (
-    <Stack direction="column" spacing={2} flex={1}>
+    <Stack className="long-list" direction="column" spacing={2} flex={1}>
       {routeNotFound ? (
         <RouteNotFoundCard />
       ) : isLoading && !routes?.length ? (

package/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -72,7 +72,7 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
         placeholder={t('main.searchChains')}
       />
       {filteredChains.length ? (
-        <SearchList>
+        <SearchList className="long-list">
           {filteredChains.map((chain) => (
             <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
               <ListItemAvatar>

package/src/pages/SelectEnabledToolsPage.tsx

@@ -146,7 +146,7 @@ export const SelectEnabledToolsPage: React.FC<{
         placeholder={t(`main.search${type}`)}
       />
       {filteredTools.length ? (
-        <SearchList>
+        <SearchList className="long-list">
           {filteredTools.map((tool) => (
             <SettingsListItemButton
               key={tool.name}

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -63,6 +63,7 @@ export const TransactionHistoryPage: React.FC = () => {
           </List>
         ) : (
           <List
+            className="long-list"
             style={{
               height: getTotalSize(),
               position: 'relative',

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -10,13 +10,15 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
       return {
         color: theme.vars.palette.success.mainChannel,
         alpha: 0.12,
-        darken: 0,
+        lightDarken: 0,
+        darkDarken: 0,
       }
     case RouteExecutionStatus.Failed:
       return {
         color: theme.vars.palette.error.mainChannel,
         alpha: 0.12,
-        darken: 0,
+        lightDarken: 0,
+        darkDarken: 0,
       }
     case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
     case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
@@ -24,13 +26,15 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
       return {
         color: theme.vars.palette.warning.mainChannel,
         alpha: 0.48,
-        darken: theme.palette.mode === 'light' ? 0.32 : 0,
+        lightDarken: 0.32,
+        darkDarken: 0,
       }
     default:
       return {
         color: theme.vars.palette.primary.mainChannel,
         alpha: 0.12,
-        darken: 0,
+        lightDarken: 0,
+        darkDarken: 0,
       }
   }
 }
@@ -44,13 +48,10 @@ export const CenterContainer = styled(Box)(() => ({
 export const IconCircle = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'status',
 })<{ status: StatusColor }>(({ theme, status }) => {
-  const {
-    color,
-    alpha: alphaValue,
-    darken: darkenValue,
-  } = getStatusColor(status, theme)
+  const statusConfig = getStatusColor(status, theme)
+
   return {
-    backgroundColor: `rgba(${color} / ${alphaValue})`,
+    backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
     borderRadius: '50%',
     width: 72,
     height: 72,
@@ -58,9 +59,16 @@ export const IconCircle = styled(Box, {
     position: 'relative',
     placeItems: 'center',
     '& > svg': {
-      color: `color-mix(in srgb, rgb(${color}) ${(1 - darkenValue) * 100}%, black)`,
+      color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
       width: 36,
       height: 36,
     },
+    ...theme.applyStyles('dark', {
+      '& > svg': {
+        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+        width: 36,
+        height: 36,
+      },
+    }),
   }
 })

package/src/types/widget.ts

@@ -218,6 +218,8 @@ export type WidgetTokens = {
   featured?: StaticToken[]
   include?: Token[]
   popular?: StaticToken[]
+  from?: AllowDeny<BaseToken>
+  to?: AllowDeny<BaseToken>
 } & AllowDeny<BaseToken>
 
 export type WidgetLanguages = {

package/src/utils/format.ts

@@ -95,3 +95,22 @@ export function formatTokenPrice(
   }
   return Number.parseFloat(formattedAmount) * Number.parseFloat(price)
 }
+
+const units = [
+  ['day', 86400],
+  ['hour', 3600],
+  ['minute', 60],
+  ['second', 1],
+] as const
+
+export function formatDuration(seconds: number, locale: string): string {
+  const match = units.find(([, v]) => seconds >= v)
+  const amount = match ? Math.floor(seconds / match[1]) : 0
+  const unit = match?.[0] ?? 'second'
+
+  return amount.toLocaleString(locale, {
+    style: 'unit',
+    unit,
+    unitDisplay: 'narrow',
+  })
+}

package/src/utils/item.ts

@@ -1,8 +1,33 @@
-import type { AllowDeny } from '../types/widget.js'
+import type { BaseToken } from '@lifi/sdk'
+import type { FormType } from '../stores/form/types.js'
+import type { AllowDeny, WidgetTokens } from '../types/widget.js'
 
-export const isItemAllowed = <T>(itemId: T, items?: AllowDeny<T>) => {
+type IncludesFn<T> = (list: T[], item: T) => boolean
+
+export const isItemAllowed = <T>(
+  item: T,
+  items?: AllowDeny<T>,
+  includes: IncludesFn<T> = (list, val) => list.includes(val)
+): boolean => {
   if (items?.allow?.length) {
-    return items.allow.includes(itemId)
+    return includes(items.allow, item)
   }
-  return !items?.deny?.includes(itemId)
+
+  return !includes(items?.deny ?? [], item)
+}
+
+const tokenIncludes = (list: BaseToken[], item: BaseToken) =>
+  list.some((t) => t.address === item.address && t.chainId === item.chainId)
+
+export const isTokenAllowed = (
+  token: BaseToken,
+  configTokens: WidgetTokens | undefined,
+  formType: FormType | undefined
+) => {
+  return (
+    isItemAllowed(token, configTokens, tokenIncludes) &&
+    (formType
+      ? isItemAllowed(token, configTokens?.[formType], tokenIncludes)
+      : true)
+  )
 }