@lifi/widget 3.24.3 → 3.25.0-beta.1

package/src/pages/SelectEnabledToolsPage.tsx

@@ -5,10 +5,10 @@ import CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined'
 import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined'
 import {
   Avatar,
+  debounce,
   IconButton,
   ListItemAvatar,
   Tooltip,
-  debounce,
   useTheme,
 } from '@mui/material'
 import type { MouseEventHandler } from 'react'

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -24,7 +24,9 @@ export const SearchTokenInput = () => {
       placeholder={t('main.tokenSearch')}
       onChange={(e) => onChange((e.target as HTMLInputElement).value)}
       onBlur={onBlur}
+      onClear={() => setFieldValue('tokenSearchFilter', '')}
       value={value as string | undefined}
+      autoFocus
     />
   )
 }

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import type { FC } from 'react'
+import type { FC, RefObject } from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'
@@ -10,24 +10,22 @@ import { useListHeight } from '../../hooks/useListHeight.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import type { FormTypeProps } from '../../stores/form/types.js'
+import type { FormType, FormTypeProps } from '../../stores/form/types.js'
 import { HiddenUI } from '../../types/widget.js'
 import { SearchTokenInput } from './SearchTokenInput.js'
 
 export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useScrollableOverflowHidden()
-  const { navigateBack } = useNavigateBack()
+
   const headerRef = useRef<HTMLElement>(null)
-  const listParentRef = useRef<HTMLUListElement | null>(null)
-  const { listHeight, minListHeight } = useListHeight({
-    listParentRef,
-    headerRef,
-  })
 
   const swapOnly = useSwapOnly()
 
-  const { subvariant, hiddenUI } = useWidgetConfig()
+  const { subvariant, hiddenUI, subvariantOptions } = useWidgetConfig()
+  const wideVariant = useWideVariant()
+
   const { t } = useTranslation()
   const title =
     formType === 'from'
@@ -39,7 +37,9 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useHeader(title)
 
   const hideChainSelect =
-    (swapOnly && formType === 'to') || hiddenUI?.includes(HiddenUI.ChainSelect)
+    (wideVariant && (subvariantOptions?.wide?.enableChainSidebar ?? true)) ||
+    (swapOnly && formType === 'to') ||
+    hiddenUI?.includes(HiddenUI.ChainSelect)
 
   return (
     <FullPageContainer disableGutters>
@@ -59,18 +59,40 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           <SearchTokenInput />
         </Box>
       </Box>
-      <Box
-        sx={{
-          height: minListHeight,
-        }}
-      >
-        <TokenList
-          parentRef={listParentRef}
-          height={listHeight}
-          onClick={navigateBack}
-          formType={formType}
-        />
-      </Box>
+      <WrappedTokenList
+        // Rerender component if variant changes (since chains tiles change height)
+        key={hideChainSelect ? 'without-offset' : 'with-offset'}
+        headerRef={headerRef}
+        formType={formType}
+      />
     </FullPageContainer>
   )
 }
+
+type WrappedTokenListProps = {
+  headerRef: RefObject<HTMLElement | null>
+  formType: FormType
+}
+
+const WrappedTokenList = ({ headerRef, formType }: WrappedTokenListProps) => {
+  const { navigateBack } = useNavigateBack()
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { listHeight, minListHeight } = useListHeight({
+    listParentRef,
+    headerRef,
+  })
+  return (
+    <Box
+      sx={{
+        height: minListHeight,
+      }}
+    >
+      <TokenList
+        parentRef={listParentRef}
+        height={listHeight}
+        onClick={navigateBack}
+        formType={formType}
+      />
+    </Box>
+  )
+}

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
-import { ListItemButton } from '../../components/ListItem//ListItemButton.js'
 import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem//ListItemButton.js'
 import { Menu } from '../../components/Menu.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useHeader } from '../../hooks/useHeader.js'

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -1,12 +1,12 @@
 import {
   Alert,
+  alertClasses,
   Box,
   IconButton,
-  List,
-  Typography,
-  alertClasses,
   inputBaseClasses,
+  List,
   styled,
+  Typography,
 } from '@mui/material'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { InputCard } from '../../components/Card/InputCard.js'

package/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material'
+import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'
 
 export const SettingsList = styled(Box)(({ theme }) => ({
   display: 'flex',

package/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -37,9 +37,9 @@ export const SettingCardExpandable: React.FC<
         </CardTitleContainer>
         {!expanded && value}
       </CardRowButton>
+      {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
       <Collapse
         id={collapseId}
-        // biome-ignore lint/a11y/useSemanticElements:
         role="region"
         aria-labelledby={buttonId}
         in={expanded}

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,6 +1,6 @@
 import Percent from '@mui/icons-material/Percent'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Typography, debounce } from '@mui/material'
+import { Box, debounce, Typography } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -2,17 +2,16 @@ import type { FullStatusData } from '@lifi/sdk'
 import { Box, List } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type React from 'react'
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
-
 import { useListHeight } from '../../hooks/useListHeight.js'
+import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
+import { minTransactionListHeight } from './constants.js'
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
 import { TransactionHistoryItem } from './TransactionHistoryItem.js'
 import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
-import { minTransactionListHeight } from './constants.js'
 
 export const TransactionHistoryPage: React.FC = () => {
   // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
@@ -26,14 +25,20 @@ export const TransactionHistoryPage: React.FC = () => {
     listParentRef: parentRef,
   })
 
+  const getItemKey = useCallback(
+    (index: number) => {
+      return `${(transactions[index] as FullStatusData).transactionId}-${index}`
+    },
+    [transactions]
+  )
+
   const { getVirtualItems, getTotalSize } = useVirtualizer({
     count: transactions.length,
-    overscan: 5,
+    overscan: 3,
     paddingEnd: 12,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 186,
-    getItemKey: (index) =>
-      `${(transactions[index] as FullStatusData).transactionId}-${index}`,
+    getItemKey,
   })
 
   if (!transactions.length && !isLoading) {

package/src/pages/TransactionPage/RouteTracker.tsx

@@ -33,7 +33,7 @@ export const RouteTracker = ({
    * This allows us to query the route using the same tool each time we refresh.
    * The observable and reviewable routes can be the same when we first enter the review page.
    */
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when currentRoute changes
   useEffect(() => {
     if (
       observableRouteIdRef.current &&
@@ -57,7 +57,7 @@ export const RouteTracker = ({
 
   return (
     <ProgressToNextUpdate
-      updatedAt={dataUpdatedAt || new Date().getTime()}
+      updatedAt={dataUpdatedAt || Date.now()}
       timeToUpdate={refetchTime}
       isLoading={isFetching}
       onClick={handleRefetch}

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Typography } from '@mui/material'
 import type { RefObject } from 'react'
@@ -51,7 +51,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     getAccumulatedFeeCostsBreakdown(route)
   const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
   const toAmountUSD = Number.parseFloat(route.toAmountUSD)
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
   return (
     <Box
       ref={ref}
@@ -106,14 +106,14 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
         <Typography>{t('main.fees.network')}</Typography>
         <FeeBreakdownTooltip
           gasCosts={gasCosts}
-          relayerSupport={hasGaslessSupport}
+          relayerSupport={hasRelayerSupport}
         >
           <Typography
             sx={{
               fontWeight: 600,
             }}
           >
-            {hasGaslessSupport
+            {hasRelayerSupport
               ? t('main.fees.free')
               : t('format.currency', { value: gasCostUSD })}
           </Typography>

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -7,7 +7,7 @@ import { useSettings } from '../../stores/settings/useSettings.js'
 import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
 import { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'
 import { deepMerge } from '../../utils/deepMerge.js'
-import { isItemAllowed } from '../../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import { percentFormatter } from '../../utils/percentFormatter.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import type { LanguageKey, LanguageTranslationResources } from './types.js'
@@ -19,16 +19,22 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
   const { language } = useSettings(['language'])
 
   const i18n = useMemo(() => {
+    const languagesConfigSets = getConfigItemSets(
+      languages,
+      (languages) => new Set(languages)
+    )
     let resources = (Object.keys(supportedLanguages) as LanguageKey[])
-      .filter((lng) => isItemAllowed(lng, languages))
+      .filter((lng) => isItemAllowedForSets(lng, languagesConfigSets))
       .reduce((resources, lng) => {
         resources[lng] = {
           translation: languageResources?.[lng]
             ? (deepMerge(
+                // biome-ignore lint/performance/noDynamicNamespaceImportAccess: TODO: make it dynamic
                 supportedLanguages[lng],
                 languageResources[lng]
-              ) as any)
-            : supportedLanguages[lng],
+              ) as LanguageTranslationResources)
+            : // biome-ignore lint/performance/noDynamicNamespaceImportAccess: TODO: make it dynamic
+              supportedLanguages[lng],
         }
         return resources
       }, {} as LanguageTranslationResources)

package/src/providers/QueryClientProvider.tsx

@@ -2,8 +2,8 @@ import {
   QueryClientContext as TanstackQueryClientContext,
   QueryClientProvider as TanstackQueryClientProvider,
 } from '@tanstack/react-query'
-import { useContext } from 'react'
 import type { PropsWithChildren } from 'react'
+import { useContext } from 'react'
 import { queryClient } from '../config/queryClient'
 
 export const QueryClientProvider: React.FC<PropsWithChildren> = ({

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -1,7 +1,7 @@
 import { getConnectorClient as getBigmiConnectorClient } from '@bigmi/client'
 import { useConfig as useBigmiConfig } from '@bigmi/react'
 import type { SDKProvider } from '@lifi/sdk'
-import { ChainType, EVM, Solana, Sui, UTXO, config } from '@lifi/sdk'
+import { ChainType, config, EVM, Solana, Sui, UTXO } from '@lifi/sdk'
 import { useCurrentWallet } from '@mysten/dapp-kit'
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base'
 import { useWallet } from '@solana/wallet-adapter-react'

package/src/providers/WalletProvider/SuiBaseProvider.tsx

@@ -1,8 +1,8 @@
 import { ChainId } from '@lifi/sdk'
 import {
+  createNetworkConfig,
   SuiClientProvider,
   WalletProvider,
-  createNetworkConfig,
 } from '@mysten/dapp-kit'
 import { getFullnodeUrl } from '@mysten/sui/client'
 import { type FC, type PropsWithChildren, useMemo } from 'react'

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMProvider } from './EVMProvider.js'
 import { SDKProviders } from './SDKProviders.js'
-import { SVMProvider } from './SVMProvider.js'
 import { SuiProvider } from './SuiProvider.js'
+import { SVMProvider } from './SVMProvider.js'
 import { UTXOProvider } from './UTXOProvider.js'
 import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -2,8 +2,8 @@ import { ChainType } from '@lifi/sdk'
 import { useContext, useMemo } from 'react'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMExternalContext } from './EVMExternalContext.js'
-import { SVMExternalContext } from './SVMExternalContext.js'
 import { SuiExternalContext } from './SuiExternalContext.js'
+import { SVMExternalContext } from './SVMExternalContext.js'
 import { UTXOExternalContext } from './UTXOExternalContext.js'
 
 interface ExternalWalletProvider {

package/src/stores/chains/ChainOrderStore.tsx

@@ -4,7 +4,7 @@ import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import { useChains } from '../../hooks/useChains.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { isItemAllowed } from '../../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import type { FormType } from '../form/types.js'
 import { useFieldActions } from '../form/useFieldActions.js'
 import type { PersistStoreProviderProps } from '../types.js'
@@ -40,9 +40,14 @@ export function ChainOrderStoreProvider({
         const configChainIds = chainsConfig?.[key]
         const isFromKey = key === 'from'
 
+        // Convert configChainIds to Sets for O(1) lookup
+        const configChainIdsSet = getConfigItemSets(
+          configChainIds,
+          (chainIds) => new Set(chainIds)
+        )
         const filteredChains = chains.filter((chain) => {
-          const passesChainsConfigFilter = configChainIds
-            ? isItemAllowed(chain.id, configChainIds)
+          const passesChainsConfigFilter = configChainIdsSet
+            ? isItemAllowedForSets(chain.id, configChainIdsSet)
             : true
           // If the integrator uses external wallet management and has not opted in for partial wallet management,
           // restrict the displayed chains to those compatible with external wallet management.

package/src/stores/form/FormStore.tsx

@@ -2,9 +2,9 @@ import type { PropsWithChildren } from 'react'
 import { useMemo, useRef } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormRef, ToAddress } from '../../types/widget.js'
+import { createFormStore, formDefaultValues } from './createFormStore.js'
 import { FormStoreContext } from './FormStoreContext.js'
 import { FormUpdater } from './FormUpdater.js'
-import { createFormStore, formDefaultValues } from './createFormStore.js'
 import type { DefaultValues, FormStoreStore } from './types.js'
 import { useFormRef } from './useFormRef.js'
 

package/src/stores/form/FormUpdater.tsx

@@ -5,13 +5,19 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import { isItemAllowed } from '../../utils/item.js'
 import type { DefaultValues } from './types.js'
 import { useFieldActions } from './useFieldActions.js'
 
 export const FormUpdater: React.FC<{
   reactiveFormValues: Partial<DefaultValues>
 }> = ({ reactiveFormValues }) => {
-  const { fromChain, toChain, toAddress } = useWidgetConfig()
+  const {
+    fromChain,
+    toChain,
+    toAddress,
+    chains: configChains,
+  } = useWidgetConfig()
   const { account } = useAccount()
   const { chains } = useChains()
   const { setSendToWallet } = useSendToWalletActions()
@@ -21,21 +27,47 @@ export const FormUpdater: React.FC<{
 
   // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
   useEffect(() => {
-    const chainAllowed =
-      account.chainId && chains?.some((chain) => chain.id === account.chainId)
+    const fromChainAllowed =
+      account.chainId &&
+      chains?.some(
+        (chain) =>
+          chain.id === account.chainId &&
+          isItemAllowed(chain.id, configChains?.from)
+      )
+    const toChainAllowed =
+      account.chainId &&
+      chains?.some(
+        (chain) =>
+          chain.id === account.chainId &&
+          isItemAllowed(chain.id, configChains?.to)
+      )
 
-    if (!account.isConnected || !account.chainId || !chainAllowed) {
+    if (
+      !account.isConnected ||
+      !account.chainId ||
+      (!fromChainAllowed && !toChainAllowed)
+    ) {
       return
     }
 
-    if (!fromChain && !isTouched('fromChain') && !isTouched('fromToken')) {
+    if (
+      !fromChain &&
+      !isTouched('fromChain') &&
+      !isTouched('fromToken') &&
+      fromChainAllowed
+    ) {
       resetField('fromChain', { defaultValue: account.chainId })
       setFieldValue('fromToken', '')
       if (isTouched('fromAmount')) {
         setFieldValue('fromAmount', '')
       }
     }
-    if (!toChain && !isTouched('toChain') && !isTouched('toToken')) {
+    if (
+      !toChain &&
+      !isTouched('toChain') &&
+      !isTouched('toToken') &&
+      toChainAllowed
+    ) {
       resetField('toChain', { defaultValue: account.chainId })
       setFieldValue('toToken', '')
     }
@@ -48,6 +80,8 @@ export const FormUpdater: React.FC<{
     isTouched,
     resetField,
     setFieldValue,
+    configChains?.from,
+    configChains?.to,
   ])
 
   // Makes widget config options reactive to changes

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -104,7 +104,7 @@ export const URLSearchParamsBuilder = () => {
     addRecentWallet,
   ])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when pathname changes
   useEffect(() => {
     // set the values on the querysting
     const url = new URL(window.location as any)

package/src/stores/form/useFormRef.ts

@@ -9,58 +9,54 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
   const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
 
-  useImperativeHandle(
-    formRef,
-    () => {
-      const sanitizeValue: {
-        [key: string]: (value: any) => GenericFormValue
-      } = {
-        fromAmount: (value) =>
-          (typeof value === 'number' ? value?.toPrecision() : value) ||
-          formDefaultValues.fromAmount,
-        toAmount: (value) =>
-          (typeof value === 'number' ? value?.toPrecision() : value) ||
-          formDefaultValues.toAmount,
-        toAddress: (value) => {
-          const isToAddressObj = typeof value !== 'string'
-
-          const address =
-            (isToAddressObj ? value?.address : value) ||
-            formDefaultValues.toAddress
-
-          // sets the send to wallet button state to be open
-          // if there is an address to display
-          if (address) {
-            setSendToWallet(address)
-          }
-
-          // we can assume that the toAddress has been passed as ToAddress object
-          // and display it accordingly - this ensures that if a name is included
-          // that it is displayed in the Send To Wallet form field correctly
-          if (isToAddressObj) {
-            setSelectedBookmark(value)
-          }
-
-          return address
-        },
-      }
-
-      return {
-        setFieldValue: (fieldName, value, options) => {
-          const sanitizedValue = (
-            sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value
-          ) as GenericFormValue
-
-          const fieldValueOptions = options?.setUrlSearchParam
-            ? { isTouched: options?.setUrlSearchParam }
-            : undefined
-
-          formStore
-            .getState()
-            .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
-        },
-      }
-    },
-    [formStore, setSendToWallet, setSelectedBookmark]
-  )
+  useImperativeHandle(formRef, () => {
+    const sanitizeValue: {
+      [key: string]: (value: any) => GenericFormValue
+    } = {
+      fromAmount: (value) =>
+        (typeof value === 'number' ? value?.toPrecision() : value) ||
+        formDefaultValues.fromAmount,
+      toAmount: (value) =>
+        (typeof value === 'number' ? value?.toPrecision() : value) ||
+        formDefaultValues.toAmount,
+      toAddress: (value) => {
+        const isToAddressObj = typeof value !== 'string'
+
+        const address =
+          (isToAddressObj ? value?.address : value) ||
+          formDefaultValues.toAddress
+
+        // sets the send to wallet button state to be open
+        // if there is an address to display
+        if (address) {
+          setSendToWallet(address)
+        }
+
+        // we can assume that the toAddress has been passed as ToAddress object
+        // and display it accordingly - this ensures that if a name is included
+        // that it is displayed in the Send To Wallet form field correctly
+        if (isToAddressObj) {
+          setSelectedBookmark(value)
+        }
+
+        return address
+      },
+    }
+
+    return {
+      setFieldValue: (fieldName, value, options) => {
+        const sanitizedValue = (
+          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value
+        ) as GenericFormValue
+
+        const fieldValueOptions = options?.setUrlSearchParam
+          ? { isTouched: options?.setUrlSearchParam }
+          : undefined
+
+        formStore
+          .getState()
+          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
+      },
+    }
+  }, [formStore, setSendToWallet, setSelectedBookmark])
 }

package/src/stores/routes/createRouteExecutionStore.ts

@@ -140,7 +140,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
           } as RouteExecutionState
           try {
             // Remove failed transactions from history after 1 day
-            const currentTime = new Date().getTime()
+            const currentTime = Date.now()
             const oneDay = 1000 * 60 * 60 * 24
             Object.values(state.routes).forEach((routeExecution) => {
               const startedAt =

package/src/stores/settings/useSettingsStore.ts

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/noUnusedVariables: allowed in this store */
 import type { StateCreator } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { createWithEqualityFn } from 'zustand/traditional'