@lifi/widget 3.25.0-beta.4 → 3.25.0

package/src/components/Chains/VirtualizedChainList.tsx

@@ -1,7 +1,9 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { RefObject } from 'react'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { shallow } from 'zustand/shallow'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore'
 import { List } from './ChainList.style'
 import { ChainListItem } from './ChainListItem'
 
@@ -11,6 +13,7 @@ interface VirtualizedChainListProps {
   onSelect: (chain: ExtendedChain) => void
   selectedChainId?: number
   itemsSize: 'small' | 'medium'
+  withPinnedChains: boolean
 }
 
 export const VirtualizedChainList = ({
@@ -19,17 +22,33 @@ export const VirtualizedChainList = ({
   selectedChainId,
   itemsSize,
   scrollElementRef,
+  withPinnedChains,
 }: VirtualizedChainListProps) => {
-  const initialSelectedChainIdRef = useRef(selectedChainId)
+  const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded
+  const hasScrolledRef = useRef(false)
+  const [pinnedChains, setPinnedChain] = useChainOrderStore(
+    (state) => [state.pinnedChains, state.setPinnedChain],
+    shallow
+  )
+  const onPin = useCallback(
+    (chainId: number) => {
+      setPinnedChain(chainId)
+    },
+    [setPinnedChain]
+  )
+
   const sortedChains = useMemo(() => {
-    const selectedChain = chains.find(
-      (chain) => chain.id === initialSelectedChainIdRef.current
-    )
-    const otherChains = chains.filter(
-      (chain) => chain.id !== initialSelectedChainIdRef.current
-    )
-    return selectedChain ? [selectedChain, ...otherChains] : chains
-  }, [chains])
+    if (!pinnedChains.length) {
+      return chains
+    }
+    // Pinning logic: move pinned chains to the top of the list
+    const pinned = pinnedChains
+      .map((id) => chains.find((c) => c.id === id))
+      .filter(Boolean) as ExtendedChain[]
+    const pinnedIds = new Set(pinned.map((c) => c.id))
+    const rest = chains.filter((c) => !pinnedIds.has(c.id))
+    return [...pinned, ...rest]
+  }, [chains, pinnedChains])
 
   const getItemKey = useCallback(
     (index: number) => {
@@ -38,16 +57,17 @@ export const VirtualizedChainList = ({
     [sortedChains]
   )
 
-  const { getVirtualItems, getTotalSize, measure } = useVirtualizer({
-    count: sortedChains.length,
-    overscan: 3,
-    paddingEnd: 0,
-    getScrollElement: () => scrollElementRef.current,
-    estimateSize: () => {
-      return itemsSize === 'small' ? 48 : 60
-    },
-    getItemKey,
-  })
+  const { getVirtualItems, getTotalSize, measure, scrollToIndex, range } =
+    useVirtualizer({
+      count: sortedChains.length,
+      overscan: 3,
+      paddingEnd: 0,
+      getScrollElement: () => scrollElementRef.current,
+      estimateSize: () => {
+        return itemsSize === 'small' ? 48 : 60
+      },
+      getItemKey,
+    })
 
   // Using mountOnEnter of the ExpansionTransition component
   // leads to a short delay for setting up scrollElementRef,
@@ -59,6 +79,31 @@ export const VirtualizedChainList = ({
     }
   }, [measure, scrollElementRef.current])
 
+  useLayoutEffect(() => {
+    // Only scroll if sortedChains is not empty and we haven't scrolled yet
+    if (!hasScrolledRef.current && sortedChains.length > 0 && range) {
+      const selectedChainIndex = sortedChains.findIndex(
+        (chain) => chain.id === selectedChainIdRef.current
+      )
+      if (selectedChainIndex !== -1) {
+        // Only scroll if the selected chain is not in the visible range
+        // +1 and -1 to account for partially visible items
+        if (
+          range.startIndex + 1 > selectedChainIndex ||
+          range.endIndex - 1 < selectedChainIndex
+        ) {
+          requestAnimationFrame(() => {
+            scrollToIndex(selectedChainIndex, {
+              align: 'center',
+              behavior: 'smooth',
+            })
+          })
+          hasScrolledRef.current = true // Mark as scrolled (when needed)
+        }
+      }
+    }
+  }, [sortedChains, scrollToIndex, range])
+
   return (
     <List
       className="long-list"
@@ -76,6 +121,9 @@ export const VirtualizedChainList = ({
             itemsSize={itemsSize}
             size={item.size}
             start={item.start}
+            withPin={withPinnedChains}
+            isPinned={pinnedChains.includes(chain.id)}
+            onPin={onPin}
           />
         )
       })}

package/src/components/Messages/MinFromAmountUSDMessage.tsx

@@ -0,0 +1,35 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+type MinFromAmountUSDMessageProps = BoxProps & {
+  minFromAmountUSD: number
+}
+
+export const MinFromAmountUSDMessage: React.FC<
+  MinFromAmountUSDMessageProps
+> = ({ minFromAmountUSD, ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          {t('warning.message.minFromAmountUSD', {
+            amount: minFromAmountUSD,
+            minimumFractionDigits: 0,
+          })}
+        </Typography>
+      }
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -5,6 +5,7 @@ import { AccountDeployedMessage } from './AccountDeployedMessage.js'
 import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+import { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'
 import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
 import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
@@ -40,6 +41,13 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
             {...props}
           />
         )
+      case 'MIN_FROM_AMOUNT_USD':
+        return (
+          <MinFromAmountUSDMessage
+            minFromAmountUSD={messages[0].props?.minFromAmountUSD}
+            {...props}
+          />
+        )
       case 'ACCOUNT_NOT_DEPLOYED':
         return <AccountNotDeployedMessage {...props} />
       case 'ACCOUNT_DEPLOYED':

package/src/components/Messages/useMessageQueue.ts

@@ -1,5 +1,6 @@
 import type { Route } from '@lifi/sdk'
 import { useMemo } from 'react'
+import { useFromAmountThreshold } from '../../hooks/useFromAmountThreshold.js'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
 import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'
@@ -25,6 +26,7 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     useGasSufficiency(route)
   const { missingChain, missingAccountAddress } =
     useRouteRequiredAccountConnection(route)
+  const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold()
 
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
@@ -44,10 +46,18 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
       })
     }
 
+    if (belowMinFromAmountUSD) {
+      queue.push({
+        id: 'MIN_FROM_AMOUNT_USD',
+        priority: 3,
+        props: { minFromAmountUSD },
+      })
+    }
+
     if (insufficientGas?.length) {
       queue.push({
         id: 'INSUFFICIENT_GAS',
-        priority: 3,
+        priority: 4,
         props: { insufficientGas },
       })
     }
@@ -55,21 +65,21 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     if (accountNotDeployedAtDestination && !allowInteraction) {
       queue.push({
         id: 'ACCOUNT_NOT_DEPLOYED',
-        priority: 4,
+        priority: 5,
       })
     }
 
     if (requiredToAddress && !toAddress) {
       queue.push({
         id: 'TO_ADDRESS_REQUIRED',
-        priority: 5,
+        priority: 6,
       })
     }
 
     if (accountDeployedAtDestination && !allowInteraction) {
       queue.push({
         id: 'ACCOUNT_DEPLOYED',
-        priority: 6,
+        priority: 7,
       })
     }
 
@@ -84,6 +94,8 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     toAddress,
     missingChain,
     missingAccountAddress,
+    belowMinFromAmountUSD,
+    minFromAmountUSD,
   ])
 
   return {

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -29,8 +29,6 @@ export const TokenDetailsSheet = forwardRef<
       },
       close: () => {
         bottomSheetRef.current?.close()
-        setTokenAddress(undefined)
-        setWithoutContractAddress(false)
       },
     }),
     []

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -117,7 +117,7 @@ export const TokenDetailsSheetContent = forwardRef<
             color: 'text.primary',
           }}
         >
-          {token
+          {token?.priceUSD
             ? t('format.currency', {
                 value: formatTokenPrice('1', token.priceUSD, token.decimals),
               })
@@ -169,6 +169,54 @@ export const TokenDetailsSheetContent = forwardRef<
           </Box>
         </MetricWithSkeleton>
       )}
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.marketCap')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.marketCapUSD
+            ? t('format.currency', {
+                value: token.marketCapUSD,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.volume24h')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.volumeUSD24H
+            ? t('format.currency', {
+                value: token.volumeUSD24H,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
     </TokenDetailsSheetContainer>
   )
 })

package/src/components/TokenList/TokenList.tsx

@@ -1,3 +1,4 @@
+import type { BaseToken } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { Box } from '@mui/material'
 import { type FC, useEffect } from 'react'
@@ -6,10 +7,12 @@ import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
 import { useTokenBalances } from '../../hooks/useTokenBalances.js'
 import { useTokenSearch } from '../../hooks/useTokenSearch.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { TokenAmount } from '../../types/token.js'
+import { getConfigItemSets, isFormItemAllowed } from '../../utils/item.js'
 import { TokenNotFound } from './TokenNotFound.js'
 import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
@@ -32,6 +35,8 @@ export const TokenList: FC<TokenListProps> = ({
     'tokenSearchFilter'
   )
 
+  const { tokens: configTokens } = useWidgetConfig()
+
   const { chain: selectedChain, isLoading: isSelectedChainLoading } =
     useChain(selectedChainId)
   const { account } = useAccount({
@@ -45,12 +50,30 @@ export const TokenList: FC<TokenListProps> = ({
     isBalanceLoading,
     featuredTokens,
     popularTokens,
-  } = useTokenBalances(selectedChainId, formType)
+  } = useTokenBalances(selectedChainId)
 
   let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
   const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
   const searchFilter = normalizedSearchFilter?.toUpperCase() ?? ''
 
+  const filteredConfigTokens = getConfigItemSets(
+    configTokens,
+    (tokens: BaseToken[]) =>
+      new Set(
+        tokens
+          .filter((t) => t.chainId === selectedChainId)
+          .map((t) => t.address)
+      ),
+    formType
+  )
+
+  // Get the appropriate allow/deny lists based on formType
+  filteredTokens = filteredTokens.filter(
+    (token) =>
+      token.chainId === selectedChainId &&
+      isFormItemAllowed(token, filteredConfigTokens, formType, (t) => t.address)
+  )
+
   filteredTokens = tokenSearchFilter
     ? filteredTokens
         .filter(

package/src/components/TokenList/TokenListItem.tsx

@@ -12,6 +12,7 @@ import {
 import type { MouseEventHandler } from 'react'
 import { memo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLongPress } from '../../hooks/useLongPress.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { ListItemButton } from '../ListItem/ListItemButton.js'
@@ -147,11 +148,16 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
     token.decimals
   )
 
+  const longPressEvents = useLongPress(() =>
+    onShowTokenDetails(token.address, withoutContractAddress)
+  )
+
   return (
     <ListItemButton
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      {...longPressEvents}
       dense
       selected={selected}
       sx={{

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.25.0-beta.4'
+export const version = '3.25.0'

package/src/hooks/useFromAmountThreshold.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider'
+import { FormKeyHelper } from '../stores/form/types'
+import { useFieldValues } from '../stores/form/useFieldValues'
+import { formatTokenPrice } from '../utils/format'
+import { useToken } from './useToken'
+
+export const useFromAmountThreshold = () => {
+  const { minFromAmountUSD } = useWidgetConfig()
+
+  const [chainId, tokenAddress, fromAmount] = useFieldValues(
+    FormKeyHelper.getChainKey('from'),
+    FormKeyHelper.getTokenKey('from'),
+    FormKeyHelper.getAmountKey('from')
+  )
+  const { token } = useToken(chainId, tokenAddress)
+
+  const belowMinFromAmountUSD = useMemo(() => {
+    const fromAmountUSD = formatTokenPrice(fromAmount, token?.priceUSD)
+
+    if (!minFromAmountUSD || !fromAmountUSD) {
+      return false
+    }
+    return fromAmountUSD < minFromAmountUSD
+  }, [minFromAmountUSD, fromAmount, token?.priceUSD])
+
+  return {
+    belowMinFromAmountUSD,
+    minFromAmountUSD,
+  }
+}

package/src/hooks/useLongPress.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef } from 'react'
+
+export const useLongPress = (callback = () => {}, ms = 500) => {
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const isPressedRef = useRef(false)
+  const startPosRef = useRef<{ x: number; y: number } | null>(null)
+
+  const start = useCallback(
+    (e: React.PointerEvent) => {
+      isPressedRef.current = true
+      startPosRef.current = { x: e.clientX, y: e.clientY }
+      timerRef.current = setTimeout(() => {
+        if (isPressedRef.current) {
+          callback()
+        }
+      }, ms)
+    },
+    [callback, ms]
+  )
+
+  const clear = useCallback(() => {
+    isPressedRef.current = false
+    startPosRef.current = null
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  // Based on https://github.com/minwork/react/tree/main/packages/use-long-press
+  const move = useCallback(
+    (e: React.PointerEvent) => {
+      if (isPressedRef.current && startPosRef.current) {
+        const dx = Math.abs(e.clientX - startPosRef.current.x)
+        const dy = Math.abs(e.clientY - startPosRef.current.y)
+        const limit = 25
+        if (dx > limit || dy > limit) {
+          clear() // cancel on movement
+        }
+      }
+    },
+    [clear]
+  )
+
+  return {
+    onPointerDown: start,
+    onPointerUp: clear,
+    onPointerLeave: clear,
+    onPointerCancel: clear,
+    onPointerMove: move,
+  }
+}

package/src/hooks/useTokenBalances.ts

@@ -3,21 +3,15 @@ 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,
-  formType?: FormType
-) => {
-  const { tokens, featuredTokens, popularTokens, chain, isLoading } = useTokens(
-    selectedChainId,
-    formType
-  )
+export const useTokenBalances = (selectedChainId?: number) => {
+  const { tokens, featuredTokens, popularTokens, chain, isLoading } =
+    useTokens(selectedChainId)
   const { account } = useAccount({ chainType: chain?.chainType })
   const { keyPrefix } = useWidgetConfig()
 
@@ -36,7 +30,6 @@ export const useTokenBalances = (
       account.address,
       selectedChainId,
       tokens?.length,
-      formType,
     ],
     queryFn: async ({ queryKey: [, accountAddress] }) => {
       const tokensWithBalance: TokenAmount[] = await getTokenBalances(

package/src/hooks/useTokenSearch.ts

@@ -2,12 +2,12 @@ import {
   type BaseToken,
   type ChainId,
   getToken,
+  type TokenExtended,
   type TokensResponse,
 } 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 { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
@@ -62,13 +62,13 @@ export const useTokenSearch = (
               )
             ) {
               const clonedData = { ...data }
-              clonedData.tokens[chainId as number]?.push(token as TokenAmount)
+              clonedData.tokens[chainId as number]?.push(token as TokenExtended)
               return clonedData
             }
           }
         )
       }
-      return token as TokenAmount
+      return token as TokenExtended
     },
 
     enabled: Boolean(chainId && tokenQuery && enabled),

package/src/hooks/useTokens.ts

@@ -1,14 +1,12 @@
-import { type BaseToken, ChainType, getTokens } from '@lifi/sdk'
+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 { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useChains } from './useChains.js'
 
-export const useTokens = (selectedChainId?: number, formType?: FormType) => {
+export const useTokens = (selectedChainId?: number) => {
   const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('tokens', keyPrefix)],
@@ -47,30 +45,6 @@ export const useTokens = (selectedChainId?: number, formType?: FormType) => {
       filteredTokens = [...includedTokens, ...filteredTokens]
     }
 
-    // Filter config tokens by chain before checking if token is allowed
-    const filteredConfigTokens = getConfigItemSets(
-      configTokens,
-      (tokens: BaseToken[]) =>
-        new Set(
-          tokens
-            .filter((t) => t.chainId === selectedChainId)
-            .map((t) => t.address)
-        ),
-      formType
-    )
-
-    // Get the appropriate allow/deny lists based on formType
-    filteredTokens = filteredTokens.filter(
-      (token) =>
-        token.chainId === selectedChainId &&
-        isFormItemAllowed(
-          token,
-          filteredConfigTokens,
-          formType,
-          (t) => t.address
-        )
-    )
-
     const filteredTokensMap = new Map(
       filteredTokens.map((token) => [token.address, token])
     )
@@ -123,7 +97,6 @@ export const useTokens = (selectedChainId?: number, formType?: FormType) => {
     getChainById,
     isSupportedChainsLoading,
     selectedChainId,
-    formType,
   ])
 
   return {

package/src/i18n/bn.json

@@ -129,6 +129,7 @@
       "highValueLoss": "প্রাপ্ত টোকেনগুলির মান সোওয়াপ করা টোকেন এবং লেনদেনের খরচের তুলনায় উল্লেখযোগ্যভাবে কম।",
       "insufficientFunds": "সোওয়াপ সম্পূর্ণ করার জন্য আপনার কাছে পর্যাপ্ত তহবিল নেই।",
       "insufficientGas": "সোওয়াপ সম্পূর্ণ করার জন্য আপনার কাছে পর্যাপ্ত গ্যাস নেই। আপনাকে অন্তত যোগ করতে হবে:",
+      "minFromAmountUSD": "",
       "rateChanged": "বিনিময় হার পরিবর্তিত হয়েছে। সোওয়াপ চালিয়ে যাওয়ার মাধ্যমে, আপনি নতুন হার গ্রহণ করবেন।",
       "resetSettings": "এটি আপনার রুটের অগ্রাধিকার, স্লিপেজ, গ্যাসের দাম, সক্ষম ব্রিজ এবং এক্সচেঞ্জ রিসেট করবে।",
       "slippageOutsideRecommendedLimits": "",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/de.json

@@ -129,6 +129,7 @@
       "highValueLoss": "Der Wert der erhaltenen Token ist deutlich niedriger als die getauschten Token und die Transaktionskosten.",
       "insufficientFunds": "Sie haben nicht genug Token, um diesen Swap abzuschließen.",
       "insufficientGas": "Sie haben nicht genug Gas um diesen Swap abzuschließen. Sie müssen mindestens hinzufügen:",
+      "minFromAmountUSD": "",
       "rateChanged": "Der Wechselkurs hat sich geändert. Durch Fortsetzen des Swaps akzeptieren Sie den neuen Kurs.",
       "resetSettings": "Dies wird Ihre Routenpriorität, Slippage, Gaspreis, aktivierte Brücken und Exchanges zurücksetzen.",
       "slippageOutsideRecommendedLimits": "",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }