@lifi/widget 4.6.0 → 4.7.1

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/shared.ts

@@ -188,4 +188,5 @@ export {
 export { getPriceImpact } from './utils/getPriceImpact.js'
 export { fitInputText } from './utils/input.js'
 export { navigationRoutes } from './utils/navigationRoutes.js'
+export { isHttpUrl, openInNewTab } from './utils/url.js'
 export { shortenAddress } from './utils/wallet.js'

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>

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))
+}