@lifi/widget 4.6.0 → 4.7.0

package/src/hooks/useTokens.ts

@@ -12,6 +12,7 @@ import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import type { TokensByChain } from '../types/token.js'
+import { isAddressQuery } from '../utils/address.js'
 import { defaultChainIdsByType } from '../utils/chainType.js'
 import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
@@ -32,6 +33,8 @@ export const useTokens = (
   allTokens: Record<number, TokenExtended[]> | undefined
   isLoading: boolean
   isSearchLoading: boolean
+  /** The search is a contract address, so only the token at that address matches. */
+  isAddressSearch: boolean
 } => {
   const {
     tokens: configTokens,
@@ -39,7 +42,16 @@ export const useTokens = (
     keyPrefix,
   } = useWidgetConfig()
   const sdkClient = useSDKClient()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { getChainTypeFromTokenAddress } = useChainTypeFromAddress()
+  // A pasted address often carries a trailing space or newline, which the
+  // API rejects. Trim once so the key, the requests and the checks agree.
+  const trimmedSearch = search?.trim()
+  // Keep this memoized, and out of any per-token loop: a provider validates by
+  // parsing, which costs microseconds per call rather than nanoseconds.
+  const isAddressSearch = useMemo(
+    () => isAddressQuery(trimmedSearch, getChainTypeFromTokenAddress),
+    [trimmedSearch, getChainTypeFromTokenAddress]
+  )
 
   // Main tokens cache - verified tokens from API
   const { data: verifiedTokens, isLoading } = useQuery({
@@ -82,13 +94,14 @@ export const useTokens = (
 
   // Search tokens cache - unverified tokens from search
   const { data: searchTokens, isLoading: isSearchLoading } = useQuery({
-    queryKey: [getQueryKey('tokens-search', keyPrefix), search, chainId],
+    queryKey: [
+      getQueryKey('tokens-search', keyPrefix),
+      trimmedSearch,
+      chainId,
+      isAddressSearch,
+    ] as const,
     queryFn: async ({ queryKey, signal }) => {
-      const [, searchQuery, searchChainId] = queryKey as [
-        string,
-        string,
-        number,
-      ]
+      const [, searchQuery, searchChainId, addressSearch] = queryKey
       const chainTypes = [
         ChainType.EVM,
         ChainType.SVM,
@@ -111,32 +124,60 @@ export const useTokens = (
         { signal }
       )
 
-      // If the chainId is not provided, try to get it from the search query
-      let _chainId = searchChainId
-      if (!_chainId) {
-        const chainType = getChainTypeFromAddress(searchQuery)
-        if (chainType && chainType in defaultChainIdsByType) {
-          _chainId = defaultChainIdsByType[chainType]
-        }
-      }
-
-      // Fallback: If the main search returned no tokens for the specific chainId,
-      // fetch a single token using the /token endpoint
-      if (_chainId && searchQuery) {
-        const existingTokens = tokensResponse.tokens[_chainId] || []
-        if (!existingTokens.length) {
-          const token = await getToken(sdkClient, _chainId, searchQuery, {
-            signal,
-          })
-          if (token) {
-            tokensResponse.tokens[_chainId] = [token]
+      // Fallback: fetch a single token from the /token endpoint when the
+      // search did not deliver one. Look it up on the selected chain, or
+      // without one on the default chain of the address format.
+      if (searchQuery) {
+        const chainType = getChainTypeFromTokenAddress(searchQuery)
+        const lookupChainId =
+          searchChainId ??
+          (chainType ? defaultChainIdsByType[chainType] : undefined)
+        if (lookupChainId) {
+          const existingTokens = tokensResponse.tokens[lookupChainId] ?? []
+          // The search index also matches names, so for an address query
+          // impersonators that embed the address can fill the list while the
+          // token at that address is missing. Without a selected chain the
+          // token can sit on any chain of the response.
+          const hasTokenAtAddress = () => {
+            const address = searchQuery.toLowerCase()
+            const candidates = searchChainId
+              ? [existingTokens]
+              : Object.values(tokensResponse.tokens)
+            return candidates.some((tokens) =>
+              tokens.some((token) => token.address?.toLowerCase() === address)
+            )
+          }
+          const isTokenMissing = addressSearch
+            ? !hasTokenAtAddress()
+            : !existingTokens.length
+          if (isTokenMissing) {
+            try {
+              const token = await getToken(
+                sdkClient,
+                lookupChainId,
+                searchQuery,
+                { signal }
+              )
+              if (token) {
+                tokensResponse.tokens[lookupChainId] = [
+                  ...existingTokens,
+                  token,
+                ]
+              }
+            } catch (error) {
+              // A guessed chain may not hold the token (HTTP 400). Keep the
+              // search results instead of failing the whole query.
+              if (signal.aborted) {
+                throw error
+              }
+            }
           }
         }
       }
 
       return tokensResponse.tokens as TokensByChain
     },
-    enabled: !!search,
+    enabled: !!trimmedSearch,
     refetchInterval,
     staleTime: refetchInterval,
   })
@@ -170,5 +211,6 @@ export const useTokens = (
     allTokens,
     isLoading,
     isSearchLoading,
+    isAddressSearch,
   }
 }

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -36,8 +36,8 @@ export const TokenValueBottomSheet = ({
   ref?: Ref<BottomSheetBase>
 }): JSX.Element => {
   const handleCancel = () => {
+    // close() reaches onClose, which is onCancel
     ;(ref as RefObject<BottomSheetBase>).current?.close()
-    onCancel?.()
   }
 
   return (

package/src/pages/TransactionPage/TokenVerificationBottomSheet.tsx

@@ -31,8 +31,8 @@ export const TokenVerificationBottomSheet = ({
   ref?: Ref<BottomSheetBase>
 }): JSX.Element => {
   const handleCancel = () => {
+    // close() reaches onClose, which is onCancel
     ;(ref as RefObject<BottomSheetBase>).current?.close()
-    onCancel?.()
   }
 
   return (

package/src/pages/TransactionPage/TransactionFailedButtons.tsx

@@ -5,12 +5,20 @@ import { useTranslation } from 'react-i18next'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { useAddressActivity } from '../../hooks/useAddressActivity.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { WidgetEvent } from '../../types/events.js'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
 import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import { StartTransactionButton } from './StartTransactionButton.js'
 import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
-import { getTokenValueLossThreshold } from './utils.js'
+import type { RetryGate } from './utils.js'
+import {
+  calculateValueLossPercentage,
+  getRetryGates,
+  getTokenValueLossThreshold,
+  openNextGate,
+} from './utils.js'
 
 interface TransactionFailedButtonsProps {
   route: RouteExtended
@@ -22,6 +30,7 @@ export const TransactionFailedButtons: React.FC<
   TransactionFailedButtonsProps
 > = ({ route, restartRoute, deleteRoute }) => {
   const { t } = useTranslation()
+  const emitter = useWidgetEvents()
   const navigateBack = useNavigateBack()
   const { mode, hiddenUI } = useWidgetConfig()
 
@@ -40,34 +49,61 @@ export const TransactionFailedButtons: React.FC<
     deleteRoute()
   }
 
-  const handleRetryClick = () => {
-    if (
-      toAddress &&
-      !hasActivity &&
-      !isLoadingAddressActivity &&
-      isActivityAddressFetched &&
-      !hiddenUI?.lowAddressActivityConfirmation
-    ) {
-      confirmToAddressSheetRef.current?.open()
-      return
-    }
-
+  const retryGates = (() => {
     const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
-    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
-    const toAmountUSD = Number.parseFloat(route.toAmountUSD)
-    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
-      fromAmountUSD,
-      toAmountUSD,
-      gasCostUSD,
-      feeCostUSD
+    return getRetryGates({
+      toAddress,
+      hasActivity,
+      isLoadingAddressActivity,
+      isActivityAddressFetched,
+      confirmationHidden: Boolean(hiddenUI?.lowAddressActivityConfirmation),
+      valueLossExceeded: getTokenValueLossThreshold(
+        Number.parseFloat(route.fromAmountUSD),
+        Number.parseFloat(route.toAmountUSD),
+        gasCostUSD,
+        feeCostUSD
+      ),
+      isCustomMode: mode === 'custom',
+    })
+  })()
+
+  const openGate = (after?: RetryGate) =>
+    openNextGate(
+      retryGates,
+      {
+        address: () => confirmToAddressSheetRef.current?.open(),
+        value: () => tokenValueBottomSheetRef.current?.open(),
+      },
+      handleRestartRoute,
+      after
     )
-    if (tokenValueLossThresholdExceeded && mode !== 'custom') {
-      tokenValueBottomSheetRef.current?.open()
-    } else {
-      restartRoute()
+
+  const handleRestartRoute = () => {
+    if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+      emitter.emit(WidgetEvent.RouteHighValueLoss, {
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD
+        ),
+      })
     }
+    tokenValueBottomSheetRef.current?.close()
+    restartRoute()
   }
 
+  const handleRetryClick = () => openGate()
+
+  const handleConfirmToAddressContinue = () => openGate('address')
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
       <Box sx={{ display: 'flex', gap: 1.5 }}>
@@ -89,13 +125,13 @@ export const TransactionFailedButtons: React.FC<
         <TokenValueBottomSheet
           route={route}
           ref={tokenValueBottomSheetRef}
-          onContinue={restartRoute}
+          onContinue={handleRestartRoute}
         />
       ) : null}
       {!hiddenUI?.lowAddressActivityConfirmation ? (
         <ConfirmToAddressSheet
           ref={confirmToAddressSheetRef}
-          onContinue={restartRoute}
+          onContinue={handleConfirmToAddressContinue}
           toAddress={toAddress!}
           toChainId={route.toChainId!}
         />

package/src/pages/TransactionPage/TransactionReview.tsx

@@ -20,9 +20,12 @@ import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import { StartTransactionButton } from './StartTransactionButton.js'
 import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
 import { TokenVerificationBottomSheet } from './TokenVerificationBottomSheet.js'
+import type { StartGate } from './utils.js'
 import {
   calculateValueLossPercentage,
+  getStartGates,
   getTokenValueLossThreshold,
+  openNextGate,
 } from './utils.js'
 
 interface TransactionReviewProps {
@@ -74,7 +77,6 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
       })
     }
     tokenValueBottomSheetRef.current?.close()
-    flaggedTokenSheetRef.current?.close()
     executeRoute()
     setFieldValue('fromAmount', '')
     if (mode === 'custom') {
@@ -86,49 +88,46 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
     })
   }
 
-  // Runs the remaining gates. The flagged-token sheet continues into this
-  // rather than executing, so accepting it does not skip the others.
-  const handleStartAfterTokenCheck = () => {
-    if (
-      toAddress &&
-      !hasActivity &&
-      !isLoadingAddressActivity &&
-      isActivityAddressFetched &&
-      !hiddenUI?.lowAddressActivityConfirmation
-    ) {
-      confirmToAddressSheetRef.current?.open()
-      return
-    }
-
+  const startGates = (() => {
     const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
-    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
-    const toAmountUSD = Number.parseFloat(route.toAmountUSD)
-    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
-      fromAmountUSD,
-      toAmountUSD,
-      gasCostUSD,
-      feeCostUSD
+    return getStartGates({
+      flaggedTokenCount: flaggedTokens.length,
+      toAddress,
+      hasActivity,
+      isLoadingAddressActivity,
+      isActivityAddressFetched,
+      confirmationHidden: Boolean(hiddenUI?.lowAddressActivityConfirmation),
+      valueLossExceeded: getTokenValueLossThreshold(
+        Number.parseFloat(route.fromAmountUSD),
+        Number.parseFloat(route.toAmountUSD),
+        gasCostUSD,
+        feeCostUSD
+      ),
+      isCustomMode: mode === 'custom',
+    })
+  })()
+
+  const openGate = (after?: StartGate) =>
+    openNextGate(
+      startGates,
+      {
+        flagged: () => flaggedTokenSheetRef.current?.open(),
+        address: () => confirmToAddressSheetRef.current?.open(),
+        value: () => tokenValueBottomSheetRef.current?.open(),
+      },
+      handleExecuteRoute,
+      after
     )
-    if (tokenValueLossThresholdExceeded && mode !== 'custom') {
-      tokenValueBottomSheetRef.current?.open()
-    } else {
-      handleExecuteRoute()
-    }
-  }
 
-  const handleStartClick = () => {
-    if (flaggedTokens.length) {
-      flaggedTokenSheetRef.current?.open()
-      return
-    }
-    handleStartAfterTokenCheck()
-  }
+  const handleStartClick = () => openGate()
 
   const handleFlaggedTokensContinue = () => {
     flaggedTokenSheetRef.current?.close()
-    handleStartAfterTokenCheck()
+    openGate('flagged')
   }
 
+  const handleConfirmToAddressContinue = () => openGate('address')
+
   const getButtonText = (): string => {
     switch (mode) {
       case 'custom':
@@ -180,7 +179,7 @@ export const TransactionReview: React.FC<TransactionReviewProps> = ({
       {!hiddenUI?.lowAddressActivityConfirmation ? (
         <ConfirmToAddressSheet
           ref={confirmToAddressSheetRef}
-          onContinue={handleExecuteRoute}
+          onContinue={handleConfirmToAddressContinue}
           toAddress={toAddress!}
           toChainId={route.toChainId!}
         />

package/src/pages/TransactionPage/utils.ts

@@ -23,3 +23,81 @@ export const getTokenValueLossThreshold = (
   }
   return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9
 }
+
+interface AddressGateInput {
+  toAddress: string | undefined
+  hasActivity: boolean | undefined
+  isLoadingAddressActivity: boolean
+  isActivityAddressFetched: boolean
+  confirmationHidden: boolean
+}
+
+const needsAddressConfirmation = ({
+  toAddress,
+  hasActivity,
+  isLoadingAddressActivity,
+  isActivityAddressFetched,
+  confirmationHidden,
+}: AddressGateInput): boolean =>
+  Boolean(
+    toAddress &&
+      !hasActivity &&
+      !isLoadingAddressActivity &&
+      isActivityAddressFetched &&
+      !confirmationHidden
+  )
+
+export type RetryGate = 'address' | 'value'
+
+export const getRetryGates = (
+  input: AddressGateInput & {
+    valueLossExceeded: boolean
+    isCustomMode: boolean
+  }
+): readonly (readonly [gate: RetryGate, needed: boolean])[] => [
+  ['address', needsAddressConfirmation(input)],
+  ['value', input.valueLossExceeded && !input.isCustomMode],
+]
+
+/** Ordering lives here so no sheet decides what follows it — that is how gates came to be skipped. */
+export const nextGate = <T extends string>(
+  gates: readonly (readonly [gate: T, needed: boolean])[],
+  after?: T
+): T | undefined => {
+  if (!after) {
+    return gates.find(([, needed]) => needed)?.[0]
+  }
+  const index = gates.findIndex(([gate]) => gate === after)
+  if (index < 0) {
+    return undefined
+  }
+  return gates.slice(index + 1).find(([, needed]) => needed)?.[0]
+}
+
+export const openNextGate = <T extends string>(
+  gates: readonly (readonly [gate: T, needed: boolean])[],
+  open: Record<T, () => void>,
+  done: () => void,
+  after?: T
+): void => {
+  const gate = nextGate(gates, after)
+  if (gate) {
+    open[gate]()
+    return
+  }
+  done()
+}
+
+export type StartGate = 'flagged' | 'address' | 'value'
+
+export const getStartGates = (
+  input: AddressGateInput & {
+    flaggedTokenCount: number
+    valueLossExceeded: boolean
+    isCustomMode: boolean
+  }
+): readonly (readonly [gate: StartGate, needed: boolean])[] => [
+  ['flagged', input.flaggedTokenCount > 0],
+  ['address', needsAddressConfirmation(input)],
+  ['value', input.valueLossExceeded && !input.isCustomMode],
+]

package/src/stores/StoreProvider.tsx

@@ -6,6 +6,7 @@ import { FormStoreProvider } from './form/FormStore.js'
 import { HeaderStoreProvider } from './header/useHeaderStore.js'
 import { NavigationTabsStoreProvider } from './navigationTabs/useNavigationTabsStore.js'
 import { PinnedTokensStoreProvider } from './pinnedTokens/PinnedTokensStore.js'
+import { RecentTokensStoreProvider } from './recentTokens/RecentTokensStore.js'
 import { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js'
 
 export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
@@ -18,13 +19,15 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
         <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
           <PinnedTokensStoreProvider namePrefix={config?.keyPrefix}>
-            <FormStoreProvider formRef={formRef}>
-              <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
-                <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
-                  {children}
-                </RouteExecutionStoreProvider>
-              </ChainOrderStoreProvider>
-            </FormStoreProvider>
+            <RecentTokensStoreProvider namePrefix={config?.keyPrefix}>
+              <FormStoreProvider formRef={formRef}>
+                <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+                  <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                    {children}
+                  </RouteExecutionStoreProvider>
+                </ChainOrderStoreProvider>
+              </FormStoreProvider>
+            </RecentTokensStoreProvider>
           </PinnedTokensStoreProvider>
         </BookmarkStoreProvider>
       </HeaderStoreProvider>