@lifi/widget 3.25.0 → 3.26.0

package/src/components/AmountInput/PriceFormHelperText.style.tsx

@@ -0,0 +1,29 @@
+import { Button, styled } from '@mui/material'
+
+export const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
+  color: theme.vars.palette.text.secondary,
+  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+  maxHeight: 16,
+  fontSize: '0.75rem',
+  fontWeight: 500,
+  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+  backgroundColor: 'transparent',
+  minWidth: 32,
+  ...(onClick
+    ? {
+        '&:hover': {
+          backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: 'transparent',
+          '&:hover': {
+            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+          },
+        }),
+      }
+    : {
+        cursor: 'text',
+        userSelect: 'text',
+        pointerEvents: 'none',
+      }),
+}))

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -1,11 +1,14 @@
 import type { TokenAmount } from '@lifi/sdk'
+import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { FormHelperText, Skeleton, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { InputPriceButton } from './PriceFormHelperText.style.js'
 
 export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
   const [chainId, tokenAddress] = useFieldValues(
@@ -33,11 +36,31 @@ export const PriceFormHelperTextBase: React.FC<
 > = ({ formType, isLoading, tokenAddress, token }) => {
   const { t } = useTranslation()
   const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
+  const { inputMode, toggleInputMode } = useInputModeStore()
+
+  const currentInputMode = inputMode[formType]
 
   const tokenAmount = token
     ? formatTokenAmount(token.amount, token.decimals)
     : '0'
-  const tokenPrice = formatTokenPrice(amount, token?.priceUSD)
+
+  const getPriceAmountDisplayValue = () => {
+    if (currentInputMode === 'amount') {
+      const tokenPrice = formatTokenPrice(
+        amount,
+        token?.priceUSD,
+        token?.decimals
+      )
+      return t('format.currency', { value: tokenPrice })
+    } else {
+      return t('format.tokenAmount', { value: amount || '0' })
+    }
+  }
+
+  const handleToggleMode = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    toggleInputMode(formType)
+  }
 
   return (
     <FormHelperText
@@ -45,28 +68,49 @@ export const PriceFormHelperTextBase: React.FC<
       sx={{
         display: 'flex',
         justifyContent: 'space-between',
+        alignItems: 'center',
         margin: 0,
-        marginLeft: 2,
-        marginTop: 0.75,
+        marginLeft: 1.25,
+        marginTop: 0.5,
       }}
     >
-      <Typography
-        sx={{
-          color: 'text.secondary',
-          fontWeight: 500,
-          fontSize: 12,
-          lineHeight: 1,
-          flex: 1,
-          wordBreak: 'break-word',
-          overflowWrap: 'break-word',
-        }}
+      <InputPriceButton
+        onClick={token?.priceUSD ? handleToggleMode : undefined}
       >
-        {t('format.currency', {
-          value: tokenPrice,
-        })}
-      </Typography>
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontWeight: 500,
+            fontSize: 12,
+            lineHeight: 1,
+            marginRight: 0.25,
+            maxWidth: 136,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {getPriceAmountDisplayValue()}
+        </Typography>
+        {currentInputMode === 'price' && token?.symbol ? (
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontWeight: 500,
+              fontSize: 12,
+              lineHeight: 1,
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              marginRight: 0.25,
+            }}
+          >
+            {token.symbol}
+          </Typography>
+        ) : null}
+        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}
+      </InputPriceButton>
       {isLoading && tokenAddress ? (
-        <Skeleton variant="text" width={48} height={12} />
+        <Skeleton variant="text" width={56} height={16} />
       ) : token?.amount ? (
         <Typography
           sx={{
@@ -74,7 +118,7 @@ export const PriceFormHelperTextBase: React.FC<
             fontSize: 12,
             color: 'text.secondary',
             lineHeight: 1,
-            pl: 0.25,
+            paddingLeft: 0.25,
           }}
           title={tokenAmount}
         >

package/src/components/AppContainer.tsx

@@ -71,6 +71,7 @@ export const RelativeContainer = styled(Box, {
           maxHeight: 'none',
           height: '100%',
           boxShadow: 'none',
+          borderRadius: 0,
         },
       },
     ],

package/src/components/ChainSelect/useChainSelect.ts

@@ -9,13 +9,11 @@ import { useChainOrder } from '../../stores/chains/useChainOrder.js'
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldController } from '../../stores/form/useFieldController.js'
 import type { DisabledUI } from '../../types/widget.js'
 
 export const useChainSelect = (formType: FormType) => {
   const { disabledUI } = useWidgetConfig()
   const chainKey = FormKeyHelper.getChainKey(formType)
-  const { onChange } = useFieldController({ name: chainKey })
   const { setFieldValue, getFieldValues } = useFieldActions()
   const { useExternalWalletProvidersOnly, externalChainTypes } =
     useExternalWalletProvider()
@@ -45,7 +43,7 @@ export const useChainSelect = (formType: FormType) => {
 
   const setCurrentChain = useCallback(
     (chainId: number) => {
-      onChange(chainId)
+      setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })
       if (swapOnly) {
         setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
           isTouched: true,
@@ -69,7 +67,7 @@ export const useChainSelect = (formType: FormType) => {
       setChainOrder(chainId, formType)
     },
     [
-      onChange,
+      chainKey,
       swapOnly,
       setFieldValue,
       disabledUI,

package/src/components/Chains/VirtualizedChainList.tsx

@@ -2,7 +2,6 @@ import type { ExtendedChain } from '@lifi/sdk'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { RefObject } 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'
@@ -26,10 +25,10 @@ export const VirtualizedChainList = ({
 }: VirtualizedChainListProps) => {
   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 [pinnedChains, setPinnedChain] = useChainOrderStore((state) => [
+    state.pinnedChains,
+    state.setPinnedChain,
+  ])
   const onPin = useCallback(
     (chainId: number) => {
       setPinnedChain(chainId)
@@ -98,9 +97,9 @@ export const VirtualizedChainList = ({
               behavior: 'smooth',
             })
           })
-          hasScrolledRef.current = true // Mark as scrolled (when needed)
         }
       }
+      hasScrolledRef.current = true // Mark as scrolled (when needed)
     }
   }, [sortedChains, scrollToIndex, range])
 

package/src/components/Header/NavigationHeader.tsx

@@ -37,7 +37,16 @@ export const NavigationHeader: React.FC = () => {
     <>
       <HeaderAppBar elevation={0}>
         {backButtonRoutes.includes(path) ? (
-          <BackButton onClick={navigateBack} />
+          <BackButton
+            onClick={() =>
+              navigateBack(
+                // From transaction details page, navigate to home page
+                path === navigationRoutes.transactionDetails
+                  ? navigationRoutes.home
+                  : undefined
+              )
+            }
+          />
         ) : null}
         {splitSubvariant ? (
           <Box

package/src/components/Routes/RoutesContent.tsx

@@ -29,6 +29,8 @@ interface RoutesContentProps {
   refetch: () => void
 }
 
+const headerHeight = '64px'
+
 export const RoutesContent = ({
   routes,
   isFetching,
@@ -77,7 +79,7 @@ export const RoutesContent = ({
 
   return (
     <Container enableColorScheme minimumHeight={isLoading}>
-      <Header>
+      <Header sx={{ height: headerHeight }}>
         <Typography
           noWrap
           sx={{
@@ -96,7 +98,9 @@ export const RoutesContent = ({
           sx={{ marginRight: -1 }}
         />
       </Header>
-      <PageContainer>
+      <PageContainer
+        sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
+      >
         <Stack
           direction="column"
           spacing={2}

package/src/components/Routes/RoutesExpanded.style.ts

@@ -12,11 +12,13 @@ export const Container = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<ContainerProps>(({ theme, minimumHeight }) => ({
   backgroundColor: theme.vars.palette.background.default,
-  overflow: 'auto',
+  overflow: 'hidden',
   width: routesExpansionWidth,
   display: 'flex',
   flexDirection: 'column',
   whiteSpace: 'normal',
+  borderRadius: theme.container?.borderRadius ?? 0,
+  boxShadow: theme.container?.boxShadow ?? 'none',
   ...(theme.container?.display !== 'flex'
     ? {
         maxHeight:
@@ -26,7 +28,6 @@ export const Container = styled(ScopedCssBaseline, {
         ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
       }
     : { height: minimumHeight ? 'auto' : '100%' }),
-  ...theme.container,
   ...theme.routesContainer,
 }))
 

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -36,7 +36,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
     subvariant,
     subvariantOptions,
   } = useWidgetConfig()
-  const { showSendToWallet } = useSendToWalletStore()
+  const { showSendToWallet } = useSendToWalletStore((state) => state)
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
     'toChain',

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -7,7 +7,10 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
+import {
+  sendToWalletStore,
+  useSendToWalletStore,
+} from '../../stores/settings/useSendToWalletStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { DisabledUI, HiddenUI } from '../../types/widget.js'
 
@@ -17,7 +20,9 @@ export const SendToWalletExpandButton: React.FC = () => {
   const { setFieldValue } = useFieldActions()
   const { setSelectedBookmark } = useBookmarkActions()
   const emitter = useWidgetEvents()
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore()
+  const { showSendToWallet, setSendToWallet } = useSendToWalletStore(
+    (state) => state
+  )
   const [toAddressFieldValue] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
 
@@ -33,7 +38,7 @@ export const SendToWalletExpandButton: React.FC = () => {
     setSendToWallet(!showSendToWallet)
     emitter.emit(
       WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet
+      sendToWalletStore.getState().showSendToWallet
     )
   }
 

package/src/components/Step/StepProcess.tsx

@@ -13,17 +13,12 @@ export const StepProcess: React.FC<{
   const { title, message } = useProcessMessage(step, process)
   const { getTransactionLink } = useExplorer()
 
-  const transactionLink = process.txHash
+  const transactionLink = process.txLink
     ? getTransactionLink({
-        txHash: process.txHash,
+        txLink: process.txLink,
         chain: process.chainId,
       })
-    : process.txLink
-      ? getTransactionLink({
-          txLink: process.txLink,
-          chain: process.chainId,
-        })
-      : undefined
+    : undefined
 
   return (
     <Box

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useTokenSearch } from '../../hooks/useTokenSearch.js'
-import { formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
@@ -119,7 +118,7 @@ export const TokenDetailsSheetContent = forwardRef<
         >
           {token?.priceUSD
             ? t('format.currency', {
-                value: formatTokenPrice('1', token.priceUSD, token.decimals),
+                value: token.priceUSD,
               })
             : noDataLabel}
         </Typography>

package/src/components/TokenList/useTokenSelect.ts

@@ -6,7 +6,6 @@ import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.j
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldController } from '../../stores/form/useFieldController.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
@@ -23,11 +22,10 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const chainOrderStore = useChainOrderStoreContext()
 
   const tokenKey = FormKeyHelper.getTokenKey(formType)
-  const { onChange } = useFieldController({ name: tokenKey })
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
-      onChange(tokenAddress)
+      setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })
       const selectedChainId =
         chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
       // Set chain again to trigger URL builder update
@@ -105,10 +103,10 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       emitter,
       formType,
       getFieldValues,
-      onChange,
       onClick,
       setFieldValue,
       subvariant,
+      tokenKey,
     ]
   )
 }

package/src/config/version.ts

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

package/src/hooks/useFromAmountThreshold.ts

@@ -16,13 +16,17 @@ export const useFromAmountThreshold = () => {
   const { token } = useToken(chainId, tokenAddress)
 
   const belowMinFromAmountUSD = useMemo(() => {
-    const fromAmountUSD = formatTokenPrice(fromAmount, token?.priceUSD)
+    const fromAmountUSD = formatTokenPrice(
+      fromAmount,
+      token?.priceUSD,
+      token?.decimals
+    )
 
     if (!minFromAmountUSD || !fromAmountUSD) {
       return false
     }
     return fromAmountUSD < minFromAmountUSD
-  }, [minFromAmountUSD, fromAmount, token?.priceUSD])
+  }, [minFromAmountUSD, fromAmount, token?.priceUSD, token?.decimals])
 
   return {
     belowMinFromAmountUSD,

package/src/hooks/useGasSufficiency.ts

@@ -57,7 +57,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       EVMAccount.chainType
     )
 
-  const { data: insufficientGas, isLoading } = useQuery({
+  const { data: insufficientGas, isLoading } = useQuery<GasSufficiency[]>({
     queryKey: [
       getQueryKey('gas-sufficiency-check', keyPrefix),
       relevantAccountsQueryKey,
@@ -66,7 +66,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     ] as const,
     queryFn: async () => {
       if (!route) {
-        return
+        return []
       }
 
       // Filter out steps that are relayer steps or have primaryType 'Permit' or 'Order'
@@ -80,7 +80,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
 
       // If all steps are filtered out, we don't need to check for gas sufficiency
       if (!filteredSteps.length) {
-        return
+        return []
       }
 
       // We assume that LI.Fuel protocol always refuels the destination chain
@@ -163,7 +163,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         .flatMap((result) => result.value)
 
       if (!tokenBalances?.length) {
-        return
+        return []
       }
 
       Object.keys(gasCosts).forEach((chainId) => {

package/src/hooks/useNavigateBack.ts

@@ -4,23 +4,32 @@ import { useNavigate } from 'react-router-dom'
 export const useNavigateBack = () => {
   const navigate = useNavigate()
 
-  const navigateBack = useCallback(() => {
-    // TODO: find a better router with nested memory routers support
-    // https://github.com/remix-run/react-router/pull/9112
-    // https://github.com/remix-run/react-router/discussions/9601
-    //
-    // if (window.history.length > 2) {
-    navigate(-1)
-    // } else {
-    //   navigate(
-    //     window.location.pathname.substring(
-    //       0,
-    //       window.location.pathname.lastIndexOf('/'),
-    //     ) || '/',
-    //     { replace: true },
-    //   );
-    // }
-  }, [navigate])
+  const navigateBack = useCallback(
+    (toPathname?: string) => {
+      // TODO: find a better router with nested memory routers support
+      // https://github.com/remix-run/react-router/pull/9112
+      // https://github.com/remix-run/react-router/discussions/9601
+      //
+      // if (window.history.length > 2) {
+      // navigate(-1)
+      // } else {
+      //   navigate(
+      //     window.location.pathname.substring(
+      //       0,
+      //       window.location.pathname.lastIndexOf('/'),
+      //     ) || '/',
+      //     { replace: true },
+      //   );
+      // }
+
+      if (toPathname) {
+        navigate(toPathname)
+      } else {
+        navigate(-1)
+      }
+    },
+    [navigate]
+  )
 
   return { navigateBack, navigate }
 }

package/src/hooks/useRouteExecution.ts

@@ -3,7 +3,6 @@ import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import {
   useRouteExecutionStore,
@@ -43,8 +42,7 @@ export const useRouteExecution = ({
     (state) => state.routes[routeId]
   )
   const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore(
-    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute],
-    shallow
+    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute]
   )
 
   const updateRouteHook = (updatedRoute: Route) => {

package/src/hooks/useRoutes.ts

@@ -1,4 +1,4 @@
-import type { Route, Token } from '@lifi/sdk'
+import type { Route, Token, TokensResponse } from '@lifi/sdk'
 import {
   ChainType,
   convertQuoteToRoute,
@@ -406,6 +406,24 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           // Update local tokens cache to keep priceUSD in sync
           const { fromToken, toToken } = routesResult.routes[0]
           ;[fromToken, toToken].forEach((token) => {
+            queryClient.setQueriesData<TokensResponse>(
+              { queryKey: [getQueryKey('tokens', keyPrefix)] },
+              (data) => {
+                if (data) {
+                  const clonedData = { ...data }
+                  const index = clonedData.tokens?.[token.chainId]?.findIndex(
+                    (dataToken) => dataToken.address === token.address
+                  )
+                  if (index >= 0) {
+                    clonedData.tokens[token.chainId][index] = {
+                      ...clonedData.tokens[token.chainId][index],
+                      ...token,
+                    }
+                  }
+                  return clonedData
+                }
+              }
+            )
             queryClient.setQueriesData<Token[]>(
               {
                 queryKey: [
@@ -420,9 +438,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                   const index = clonedData.findIndex(
                     (dataToken) => dataToken.address === token.address
                   )
-                  clonedData[index] = {
-                    ...clonedData[index],
-                    ...token,
+                  if (index >= 0) {
+                    clonedData[index] = {
+                      ...clonedData[index],
+                      ...token,
+                    }
                   }
                   return clonedData
                 }

package/src/hooks/useSettingMonitor.ts

@@ -1,4 +1,3 @@
-import { shallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import {
@@ -14,16 +13,13 @@ export const useSettingMonitor = () => {
     routePriority,
     slippage,
     gasPrice,
-  ] = useSettingsStore(
-    (state) => [
-      state.disabledBridges,
-      state.disabledExchanges,
-      state.routePriority,
-      state.slippage,
-      state.gasPrice,
-    ],
-    shallow
-  )
+  ] = useSettingsStore((state) => [
+    state.disabledBridges,
+    state.disabledExchanges,
+    state.routePriority,
+    state.slippage,
+    state.gasPrice,
+  ])
   const { tools } = useTools()
   const config = useWidgetConfig()
   const { setDefaultSettings, resetSettings } = useSettingsActions()

package/src/hooks/useTokenAddressBalance.ts

@@ -11,9 +11,14 @@ export const useTokenAddressBalance = (
 
   const token = useMemo(() => {
     if (tokenAddress && chainId) {
-      const token = (tokensWithBalance ?? tokens)?.find(
+      let token = tokensWithBalance?.find(
         (token) => token.address === tokenAddress && token.chainId === chainId
       )
+      if (!token) {
+        token = tokens?.find(
+          (token) => token.address === tokenAddress && token.chainId === chainId
+        )
+      }
       return token as TokenAmount
     }
   }, [chainId, tokenAddress, tokens, tokensWithBalance])

package/src/hooks/useTokenSearch.ts

@@ -61,8 +61,11 @@ export const useTokenSearch = (
                 (t) => t.address === token.address
               )
             ) {
-              const clonedData = { ...data }
-              clonedData.tokens[chainId as number]?.push(token as TokenExtended)
+              const clonedData = { ...data, tokens: { ...data.tokens } }
+              clonedData.tokens[chainId as number] = [
+                ...(clonedData.tokens[chainId as number] ?? []),
+                token,
+              ]
               return clonedData
             }
           }

package/src/hooks/useTokens.ts

@@ -19,8 +19,8 @@ export const useTokens = (selectedChainId?: number) => {
           ChainType.MVM,
         ],
       }),
-    refetchInterval: 3_600_000,
-    staleTime: 3_600_000,
+    refetchInterval: 300_000,
+    staleTime: 300_000,
   })
   const {
     chains,