@lifi/widget 4.6.0 → 4.7.0

package/src/stores/chains/ChainOrderStore.test.tsx

@@ -0,0 +1,298 @@
+/** @vitest-environment happy-dom */
+
+import type { ExtendedChain } from '@lifi/sdk'
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+/**
+ * Regression cover for JUM-1541.
+ *
+ * Mock identities must stay stable. In production this effect's dependencies
+ * are config values, so it does not re-run when a form field changes; mocks
+ * that rebuild objects each render would re-run it and prove behaviour the
+ * widget does not have.
+ */
+
+const ETHEREUM = 1
+const ARBITRUM = 42161
+const POLYGON = 137
+const SOLANA = 1151111081099710
+
+const chain = (id: number): ExtendedChain =>
+  ({ id, name: `Chain ${id}`, chainType: 'EVM' }) as unknown as ExtendedChain
+
+let chainsConfig: { from?: { allow: number[] } } | undefined
+let availableChains: ExtendedChain[] = []
+let swapOnly = false
+let fromChainConfig: number | undefined
+
+const formValues = new Map<string, unknown>()
+const touchedFields = new Set<string>()
+const setFieldValue = vi.fn(
+  (key: string, value: unknown, options?: { isTouched?: boolean }) => {
+    formValues.set(key, value)
+    if (options?.isTouched === true) {
+      touchedFields.add(key)
+    } else if (options?.isTouched === false) {
+      touchedFields.delete(key)
+    }
+  }
+)
+
+vi.mock('../../hooks/useChains.js', () => ({
+  useChains: () => ({ chains: availableChains }),
+}))
+
+vi.mock('../../hooks/useSwapOnly.js', () => ({
+  useSwapOnly: () => swapOnly,
+}))
+
+// Stable identities, as production has them: `useExternalWalletProvider`
+// memoizes and `useFieldActions` selects store methods through `useShallow`.
+// Returning fresh objects here would put a new value in the effect's
+// dependency array on every render and re-run it — which production does not
+// do, and which would make these tests prove something the widget does not.
+const externalWalletProvider = {
+  externalChainTypes: [] as string[],
+  useExternalWalletProvidersOnly: false,
+}
+vi.mock('../../providers/WalletProvider/useExternalWalletProvider.js', () => ({
+  useExternalWalletProvider: () => externalWalletProvider,
+}))
+
+vi.mock('../../providers/WidgetProvider/WidgetProvider.js', () => ({
+  useWidgetConfig: () => ({
+    chains: chainsConfig,
+    hiddenUI: undefined,
+    fromChain: fromChainConfig,
+    toChain: undefined,
+    buildUrl: true,
+    variant: 'compact',
+  }),
+}))
+
+const getFieldValues = (key: string) => [formValues.get(key)]
+const isTouched = (key: string) => touchedFields.has(key)
+const fieldActions = { setFieldValue, getFieldValues, isTouched }
+vi.mock('../form/useFieldActions.js', () => ({
+  useFieldActions: () => fieldActions,
+}))
+
+const { ChainOrderStoreProvider, useChainOrderStore } = await import(
+  './ChainOrderStore.js'
+)
+
+/** What `selectAllNetworks` does to the form: clear the field, as touched. */
+const clickAllNetworks = (key: 'from' | 'to') => {
+  formValues.set(`${key}Chain`, '')
+  touchedFields.add(`${key}Chain`)
+}
+
+let fromIsAllNetworks: boolean | undefined
+
+const StoreHandle = (): null => {
+  fromIsAllNetworks = useChainOrderStore((state) => state.fromIsAllNetworks)
+  return null
+}
+
+let root: Root
+
+const render = () => {
+  act(() => {
+    root.render(
+      <ChainOrderStoreProvider namePrefix="test">
+        <StoreHandle />
+      </ChainOrderStoreProvider>
+    )
+  })
+}
+
+const fromChainWrites = () =>
+  setFieldValue.mock.calls.filter(([key]) => key === 'fromChain')
+
+const toChainWrites = () =>
+  setFieldValue.mock.calls.filter(([key]) => key === 'toChain')
+
+/** An integrator that derives `chains` from form state rebuilds it on every write. */
+const rebuildHostConfig = () => {
+  chainsConfig = { ...chainsConfig }
+  render()
+}
+
+beforeEach(() => {
+  ;(
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true
+  window.history.replaceState({}, '', '/')
+  window.localStorage.clear()
+  formValues.clear()
+  touchedFields.clear()
+  setFieldValue.mockClear()
+  chainsConfig = undefined
+  swapOnly = false
+  fromChainConfig = undefined
+  availableChains = [chain(ETHEREUM), chain(ARBITRUM)]
+  fromIsAllNetworks = undefined
+  root = createRoot(document.createElement('div'))
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+})
+
+describe('ChainOrderStoreProvider', () => {
+  it('starts on "All networks" when nothing names a chain', () => {
+    render()
+
+    expect(fromIsAllNetworks).toBe(true)
+    expect(fromChainWrites()).toHaveLength(0)
+  })
+
+  it('starts off "All networks" when a deep link named a chain', () => {
+    // How the widget learns this when the config carries nothing.
+    window.history.replaceState({}, '', `/?fromChain=${ARBITRUM}`)
+    formValues.set('fromChain', ARBITRUM)
+    render()
+
+    expect(fromIsAllNetworks).toBe(false)
+    expect(fromChainWrites()).toHaveLength(0)
+  })
+
+  it('starts off "All networks" when the config names a chain', () => {
+    fromChainConfig = POLYGON
+    render()
+
+    expect(fromIsAllNetworks).toBe(false)
+  })
+
+  it('does not put a chain back after the user chooses "All networks"', () => {
+    // jumper-frontend seeds its config from the URL, so a deep link arrives
+    // as a config chain as well as a form value and a query param.
+    fromChainConfig = ARBITRUM
+    formValues.set('fromChain', ARBITRUM)
+    window.history.replaceState({}, '', `/?fromChain=${ARBITRUM}`)
+    render()
+    expect(fromIsAllNetworks).toBe(false)
+
+    clickAllNetworks('from')
+    setFieldValue.mockClear()
+
+    // jumper-frontend rebuilds `chains` from form state, so clearing the
+    // field re-runs the effect on that same commit — while the config and the
+    // query string still name Arbitrum.
+    chainsConfig = { ...chainsConfig }
+    render()
+
+    expect(fromIsAllNetworks).toBe(true)
+    expect(fromChainWrites()).toHaveLength(0)
+  })
+
+  it('fills an empty chain when the "All networks" tab is withdrawn', () => {
+    render()
+    expect(fromChainWrites()).toHaveLength(0)
+
+    // An allow-list of one chain withdraws the tab, so this side needs a
+    // fallback.
+    chainsConfig = { from: { allow: [ARBITRUM] } }
+    setFieldValue.mockClear()
+    render()
+
+    expect(fromIsAllNetworks).toBe(false)
+    expect(fromChainWrites()).toHaveLength(1)
+    expect(fromChainWrites()[0][1]).toBe(ARBITRUM)
+  })
+})
+
+describe('ChainOrderStoreProvider in swap-only modes', () => {
+  beforeEach(() => {
+    swapOnly = true
+  })
+
+  const pickSource = (chainId: number) => {
+    window.history.replaceState({}, '', `/?fromChain=${chainId}`)
+    formValues.set('fromChain', chainId)
+  }
+
+  // The destination used to flip on every host rebuild until React threw #185.
+  it('does not alternate the destination while the source is on "All networks"', () => {
+    const destinations: unknown[] = []
+    render()
+    destinations.push(formValues.get('toChain'))
+    for (let rebuild = 0; rebuild < 4; rebuild++) {
+      rebuildHostConfig()
+      destinations.push(formValues.get('toChain'))
+    }
+
+    expect(fromIsAllNetworks).toBe(true)
+    expect(destinations).toEqual(Array(5).fill(ETHEREUM))
+    expect(toChainWrites()).toHaveLength(1)
+  })
+
+  it('fills an empty destination from the source, not from the chain order', () => {
+    pickSource(ARBITRUM)
+    render()
+
+    expect(formValues.get('toChain')).toBe(ARBITRUM)
+  })
+
+  it('moves a stale destination onto the source', () => {
+    pickSource(ARBITRUM)
+    formValues.set('toChain', ETHEREUM)
+    render()
+
+    expect(formValues.get('toChain')).toBe(ARBITRUM)
+  })
+
+  it('stops writing the destination once it matches the source', () => {
+    pickSource(ARBITRUM)
+    render()
+    expect(formValues.get('toChain')).toBe(ARBITRUM)
+    setFieldValue.mockClear()
+
+    rebuildHostConfig()
+    rebuildHostConfig()
+
+    expect(toChainWrites()).toHaveLength(0)
+  })
+
+  it('keeps the destination when the source goes back to "All networks"', () => {
+    pickSource(ARBITRUM)
+    render()
+    expect(formValues.get('toChain')).toBe(ARBITRUM)
+    clickAllNetworks('from')
+    setFieldValue.mockClear()
+
+    rebuildHostConfig()
+    rebuildHostConfig()
+
+    expect(formValues.get('toChain')).toBe(ARBITRUM)
+    expect(toChainWrites()).toHaveLength(0)
+  })
+
+  it('treats a zero source as no source', () => {
+    formValues.set('fromChain', 0)
+    render()
+    rebuildHostConfig()
+
+    expect(formValues.get('toChain')).toBe(ETHEREUM)
+    expect(toChainWrites()).toHaveLength(1)
+  })
+
+  // The list can shrink under a destination, e.g. when the integrator narrows `chains`.
+  it('replaces a destination the chain list does not offer while there is no source', () => {
+    swapOnly = false
+    availableChains = [chain(ETHEREUM), chain(ARBITRUM), chain(SOLANA)]
+    formValues.set('toChain', SOLANA)
+    render()
+    expect(formValues.get('toChain')).toBe(SOLANA)
+
+    swapOnly = true
+    availableChains = [chain(ETHEREUM), chain(ARBITRUM)]
+    render()
+    rebuildHostConfig()
+
+    expect(formValues.get('toChain')).toBe(ETHEREUM)
+    expect(toChainWrites()).toHaveLength(1)
+  })
+})

package/src/stores/chains/ChainOrderStore.tsx

@@ -30,7 +30,7 @@ export function ChainOrderStoreProvider({
   } = useWidgetConfig()
   const storeRef = useRef<ChainOrderStore>(null)
   const { chains } = useChains()
-  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { setFieldValue, getFieldValues, isTouched } = useFieldActions()
   const swapOnly = useSwapOnly()
   const { variant } = useWidgetConfig()
   const { externalChainTypes, useExternalWalletProvidersOnly } =
@@ -85,15 +85,30 @@ export function ChainOrderStoreProvider({
           key === 'from' ? urlValues.fromChain : urlValues.toChain
         const configChainValue =
           key === 'from' ? fromChainConfig : toChainConfig
+
+        // A touched, empty chain field was cleared deliberately — "All
+        // networks". It has to outrank the two values above, because both
+        // still name the chain the page was opened on at that moment: the
+        // query string is rewritten a commit later, and an integrator that
+        // seeds its config from the URL never rewrites it.
+        const [chainValue] = getFieldValues(`${key}Chain`)
+        const clearedForAllNetworks = !chainValue && isTouched(`${key}Chain`)
+
         const initialIsAllNetworks =
-          showAllNetworks && !configChainValue && !urlChainValue
+          showAllNetworks &&
+          (clearedForAllNetworks || (!configChainValue && !urlChainValue))
         storeRef.current?.getState().setIsAllNetworks(initialIsAllNetworks, key)
         storeRef.current?.getState().setShowAllNetworks(showAllNetworks, key)
 
-        // If swap only, set the to chain to the from chain
+        // Copying an empty source would alternate with the fallback below.
         if (isSwapTo) {
           const [fromChainValue] = getFieldValues('fromChain')
-          setFieldValue('toChain', fromChainValue)
+          if (fromChainValue) {
+            if (fromChainValue !== chainValue) {
+              setFieldValue('toChain', fromChainValue)
+            }
+            return
+          }
         }
 
         // When "All Networks" is active, don't auto-select a chain from the
@@ -104,8 +119,11 @@ export function ChainOrderStoreProvider({
           return
         }
 
-        const [chainValue] = getFieldValues(`${key}Chain`)
-        if (chainValue) {
+        // With no source to follow, drop a destination the list no longer offers.
+        const keepsChain =
+          chainValue &&
+          (!isSwapTo || filteredChains.some((chain) => chain.id === chainValue))
+        if (keepsChain) {
           return
         }
 
@@ -130,6 +148,7 @@ export function ChainOrderStoreProvider({
     chainsConfig,
     externalChainTypes,
     getFieldValues,
+    isTouched,
     setFieldValue,
     useExternalWalletProvidersOnly,
     variant,

package/src/stores/recentTokens/RecentTokensStore.tsx

@@ -0,0 +1,39 @@
+import { type Context, createContext, use, useRef } from 'react'
+import { useShallow } from 'zustand/shallow'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createRecentTokensStore } from './createRecentTokensStore.js'
+import type { RecentTokensState, RecentTokensStore } from './types.js'
+
+const RecentTokensStoreContext: Context<RecentTokensStore | null> =
+  createContext<RecentTokensStore | null>(null)
+
+export const RecentTokensStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const storeRef = useRef<RecentTokensStore>(null)
+
+  if (!storeRef.current) {
+    storeRef.current = createRecentTokensStore(props)
+  }
+
+  return (
+    <RecentTokensStoreContext value={storeRef.current}>
+      {children}
+    </RecentTokensStoreContext>
+  )
+}
+
+export function useRecentTokensStore<T>(
+  selector: (store: RecentTokensState) => T
+): T {
+  const useStore = use(RecentTokensStoreContext)
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${RecentTokensStoreProvider.name}>.`
+    )
+  }
+
+  return useStore(useShallow(selector))
+}

package/src/stores/recentTokens/createRecentTokensStore.ts

@@ -0,0 +1,107 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { PersistStoreProps } from '../types.js'
+import type {
+  RecentToken,
+  RecentTokensProps,
+  RecentTokensState,
+} from './types.js'
+import { getTokenKey } from './utils.js'
+
+const recentTokensLimit = 10
+
+const isStoredRecentToken = (value: unknown): value is RecentToken => {
+  const token = value as Partial<RecentToken> | null
+  return (
+    typeof token === 'object' &&
+    token !== null &&
+    typeof token.chainId === 'number' &&
+    typeof token.address === 'string' &&
+    typeof token.symbol === 'string' &&
+    typeof token.name === 'string' &&
+    typeof token.decimals === 'number' &&
+    (token.logoURI === undefined || typeof token.logoURI === 'string') &&
+    (token.flagged === undefined || typeof token.flagged === 'boolean')
+  )
+}
+
+// The key lives on the integrator's origin, so its content is untrusted.
+const sanitizeRecentTokens = (stored: unknown): RecentToken[] => {
+  if (!Array.isArray(stored)) {
+    return []
+  }
+  const seen = new Set<string>()
+  const recentTokens: RecentToken[] = []
+  for (const token of stored) {
+    if (!isStoredRecentToken(token)) {
+      continue
+    }
+    const key = getTokenKey(token.chainId, token.address)
+    if (!seen.has(key)) {
+      seen.add(key)
+      recentTokens.push(token)
+    }
+  }
+  return recentTokens.slice(0, recentTokensLimit)
+}
+
+export const createRecentTokensStore = ({
+  namePrefix,
+}: PersistStoreProps): UseBoundStore<StoreApi<RecentTokensState>> =>
+  create<RecentTokensState>()(
+    persist(
+      (set, get) => ({
+        recentTokens: [],
+        addRecentToken: (token) => {
+          const key = getTokenKey(token.chainId, token.address)
+          set((state) => ({
+            recentTokens: [
+              token,
+              ...state.recentTokens.filter(
+                (t) => getTokenKey(t.chainId, t.address) !== key
+              ),
+            ].slice(0, recentTokensLimit),
+          }))
+        },
+        removeRecentToken: (chainId, address) => {
+          const key = getTokenKey(chainId, address)
+          set((state) => ({
+            recentTokens: state.recentTokens.filter(
+              (t) => getTokenKey(t.chainId, t.address) !== key
+            ),
+          }))
+        },
+        clearRecentTokens: (entries) =>
+          set((state) => {
+            const removed = new Set(
+              entries.map((e) => getTokenKey(e.chainId, e.address))
+            )
+            return {
+              recentTokens: state.recentTokens.filter(
+                (t) => !removed.has(getTokenKey(t.chainId, t.address))
+              ),
+            }
+          }),
+        isRecentToken: (chainId, address) => {
+          const key = getTokenKey(chainId, address)
+          return get().recentTokens.some(
+            (t) => getTokenKey(t.chainId, t.address) === key
+          )
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-recent-tokens`,
+        version: 0,
+        partialize: (state) => ({
+          recentTokens: state.recentTokens,
+        }),
+        merge: (persisted, current) => ({
+          ...current,
+          recentTokens: sanitizeRecentTokens(
+            (persisted as Partial<RecentTokensProps> | undefined)?.recentTokens
+          ),
+        }),
+      }
+    )
+  )

package/src/stores/recentTokens/types.ts

@@ -0,0 +1,37 @@
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+
+export interface RecentToken {
+  chainId: number
+  /** The token's own casing. Compared case-insensitively with chainId. */
+  address: string
+  symbol: string
+  name: string
+  decimals: number
+  logoURI?: string
+  flagged?: boolean
+}
+
+/** Compared case-insensitively. */
+export interface RecentTokenId {
+  chainId: number
+  address: string
+}
+
+export interface RecentTokensProps {
+  recentTokens: RecentToken[]
+}
+
+export interface RecentTokensActions {
+  addRecentToken: (token: RecentToken) => void
+  removeRecentToken: (chainId: number, address: string) => void
+  /** Removes exactly these entries, never one outside the band's scope. */
+  clearRecentTokens: (entries: RecentTokenId[]) => void
+  isRecentToken: (chainId: number, address: string) => boolean
+}
+
+export type RecentTokensState = RecentTokensProps & RecentTokensActions
+
+export type RecentTokensStore = UseBoundStoreWithEqualityFn<
+  StoreApi<RecentTokensState>
+>

package/src/stores/recentTokens/utils.ts

@@ -0,0 +1,18 @@
+import type { TokenAmount } from '../../types/token.js'
+import type { RecentToken } from './types.js'
+
+export const getTokenKey = (chainId: number, address: string): string =>
+  `${chainId}-${address.toLowerCase()}`
+
+// No price, and no verdict but a flag: a stale "verified" would hide a warning.
+export const toRecentToken = (token: TokenAmount): RecentToken => ({
+  // Plain-JS configs can pass a string chainId or null fields; hydration rejects both.
+  chainId: Number(token.chainId),
+  // Keep the casing: the form and the selected check compare it exactly.
+  address: token.address,
+  symbol: token.symbol,
+  name: token.name ?? '',
+  decimals: token.decimals,
+  logoURI: token.logoURI ?? undefined,
+  flagged: token.verificationStatus === 'flagged' || undefined,
+})

package/src/types/token.ts

@@ -8,6 +8,8 @@ export interface TokenFlags {
   featured?: boolean
   popular?: boolean
   pinned?: boolean
+  /** A copy promoted into the "Recent searches" band. */
+  recent?: boolean
   verified?: boolean
   native?: boolean
   /** Came from the main token list rather than from a search. */

package/src/types/widget.ts

@@ -156,6 +156,11 @@ export interface HiddenUIConfig {
    */
   lowAddressActivityConfirmation?: boolean
   poweredBy?: boolean
+  /**
+   * Hide the "Recent searches" section in the token select view.
+   * @default false
+   */
+  recentSearches?: boolean
   reverseTokensButton?: boolean
   routeCardPriceImpact?: boolean
   routeTokenDescription?: boolean

package/src/utils/address.ts

@@ -0,0 +1,21 @@
+import type { ChainType } from '@lifi/sdk'
+
+/**
+ * True when a token search query is a contract address rather than free text.
+ * `getChainTypeFromTokenAddress` asks the configured providers' own
+ * `isTokenAddress` (see `useChainTypeFromAddress`), so it covers the token
+ * identifier of every ecosystem. Two consequences follow. `bitcoin` stays a
+ * name search, because the Bitcoin provider implements no token check. And an
+ * ecosystem is not detected unless the host configures its provider from
+ * `@lifi/sdk` 4.7.0 or later, even when its chains are listed.
+ */
+export const isAddressQuery = (
+  query: string | undefined,
+  getChainTypeFromTokenAddress: (address: string) => ChainType | undefined
+): boolean => {
+  const value = query?.trim()
+  if (!value) {
+    return false
+  }
+  return getChainTypeFromTokenAddress(value) !== undefined
+}

package/src/utils/customReceiver.ts

@@ -5,3 +5,27 @@ export const isCustomReceiverUnsupported = (
   fromChainType?: ChainType,
   toChainType?: ChainType
 ): boolean => fromChainType === ChainType.STL && toChainType === ChainType.STL
+
+export interface CustomReceiverBlockedArgs {
+  fromChainType?: ChainType
+  toChainType?: ChainType
+  toAddress?: string
+  signerAddress?: string
+  receiverRequired?: boolean
+}
+
+export const isCustomReceiverBlocked = ({
+  fromChainType,
+  toChainType,
+  toAddress,
+  signerAddress,
+  receiverRequired,
+}: CustomReceiverBlockedArgs): boolean => {
+  if (!isCustomReceiverUnsupported(fromChainType, toChainType)) {
+    return false
+  }
+  if (!toAddress) {
+    return Boolean(receiverRequired)
+  }
+  return toAddress.toLowerCase() !== signerAddress?.toLowerCase()
+}