@lifi/widget 4.0.0 → 4.2.0

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,7 +1,7 @@
 import type { Route } from '@lifi/sdk'
 import { Button, Checkbox, FormControlLabel } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import { forwardRef, useRef, useState } from 'react'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -27,26 +27,29 @@ interface TokenValueBottomSheetProps {
   onCancel?(): void
 }
 
-export const TokenValueBottomSheet: ForwardRefExoticComponent<
-  TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>
-> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(
-  ({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = () => {
-      ;(ref as RefObject<BottomSheetBase>).current?.close()
-      onCancel?.()
-    }
-
-    return (
-      <BottomSheet ref={ref} onClose={onCancel}>
-        <TokenValueBottomSheetContent
-          route={route}
-          onContinue={onContinue}
-          onCancel={handleCancel}
-        />
-      </BottomSheet>
-    )
+export const TokenValueBottomSheet = ({
+  route,
+  onContinue,
+  onCancel,
+  ref,
+}: TokenValueBottomSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const handleCancel = () => {
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
+    onCancel?.()
   }
-)
+
+  return (
+    <BottomSheet ref={ref} onClose={onCancel}>
+      <TokenValueBottomSheetContent
+        route={route}
+        onContinue={onContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+}
 
 const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   route,

package/src/pages/TransactionPage/TransactionExecutionContent.tsx

@@ -76,13 +76,15 @@ export const TransactionExecutionContent: React.FC<
             iconSlot={iconSlot}
             footerSlot={footerSlot}
           />
-          <WarningMessages route={route} allowInteraction />
           {status === RouteExecutionStatus.Failed ? (
-            <TransactionFailedButtons
-              route={route}
-              restartRoute={restartRoute}
-              deleteRoute={deleteRoute}
-            />
+            <>
+              <WarningMessages route={route} allowInteraction />
+              <TransactionFailedButtons
+                route={route}
+                restartRoute={restartRoute}
+                deleteRoute={deleteRoute}
+              />
+            </>
           ) : isDone ? (
             <TransactionDoneButtons route={route} status={status} />
           ) : null}

package/src/providers/QueryClientProvider.tsx

@@ -3,13 +3,13 @@ import {
   QueryClientProvider as TanstackQueryClientProvider,
 } from '@tanstack/react-query'
 import type { PropsWithChildren } from 'react'
-import { useContext } from 'react'
+import { use } from 'react'
 import { queryClient } from '../config/queryClient.js'
 
 export const QueryClientProvider: React.FC<PropsWithChildren> = ({
   children,
 }) => {
-  const existingQueryClient = useContext(TanstackQueryClientContext)
+  const existingQueryClient = use(TanstackQueryClientContext)
   return existingQueryClient ? (
     children
   ) : (

package/src/providers/SDKClientProvider.tsx

@@ -3,7 +3,7 @@ import {
   createContext,
   type JSX,
   type PropsWithChildren,
-  useContext,
+  use,
   useMemo,
 } from 'react'
 import { version } from '../config/version.js'
@@ -11,7 +11,7 @@ import { useWidgetConfig } from './WidgetProvider/WidgetProvider.js'
 
 const SDKClientContext = createContext<SDKClient>({} as SDKClient)
 
-export const useSDKClient = (): SDKClient => useContext(SDKClientContext)
+export const useSDKClient = (): SDKClient => use(SDKClientContext)
 
 export const SDKClientProvider = ({
   children,
@@ -51,9 +51,5 @@ export const SDKClientProvider = ({
     slippage,
   ])
 
-  return (
-    <SDKClientContext.Provider value={client}>
-      {children}
-    </SDKClientContext.Provider>
-  )
+  return <SDKClientContext value={client}>{children}</SDKClientContext>
 }

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,4 +1,5 @@
-import { createContext, useContext, useId, useMemo } from 'react'
+import type { Context } from 'react'
+import { createContext, use, useId, useMemo } from 'react'
 import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
 import type { WidgetContextProps, WidgetProviderProps } from './types.js'
 
@@ -7,10 +8,10 @@ const initialContext: WidgetContextProps = {
   integrator: '',
 }
 
-const WidgetContext = createContext<WidgetContextProps>(initialContext)
+export const WidgetContext: Context<WidgetContextProps> =
+  createContext<WidgetContextProps>(initialContext)
 
-export const useWidgetConfig = (): WidgetContextProps =>
-  useContext(WidgetContext)
+export const useWidgetConfig = (): WidgetContextProps => use(WidgetContext)
 
 export const WidgetProvider: React.FC<
   React.PropsWithChildren<WidgetProviderProps>
@@ -43,7 +44,5 @@ export const WidgetProvider: React.FC<
       }
     }
   }, [elementId, widgetConfig, setDefaultSettings])
-  return (
-    <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
-  )
+  return <WidgetContext value={value}>{children}</WidgetContext>
 }

package/src/stores/StoreProvider.tsx

@@ -1,13 +1,12 @@
 import type { PropsWithChildren } from 'react'
 import type { WidgetConfigProps } from '../types/widget.js'
-import { getSplitMode } from '../utils/variant.js'
 import { BookmarkStoreProvider } from './bookmarks/BookmarkStore.js'
 import { ChainOrderStoreProvider } from './chains/ChainOrderStore.js'
 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 { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js'
-import { SplitModeStoreProvider } from './settings/useSplitModeStore.js'
 
 export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   children,
@@ -15,13 +14,7 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   formRef,
 }) => {
   return (
-    <SplitModeStoreProvider
-      state={
-        config.mode === 'split'
-          ? getSplitMode(config.modeOptions?.split)
-          : undefined
-      }
-    >
+    <NavigationTabsStoreProvider config={config}>
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
         <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
           <PinnedTokensStoreProvider namePrefix={config?.keyPrefix}>
@@ -35,6 +28,6 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
           </PinnedTokensStoreProvider>
         </BookmarkStoreProvider>
       </HeaderStoreProvider>
-    </SplitModeStoreProvider>
+    </NavigationTabsStoreProvider>
   )
 }

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef } from 'react'
+import { createContext, use, useRef } from 'react'
 import { useShallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { PersistStoreProviderProps } from '../types.js'
@@ -19,14 +19,14 @@ export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
   }
 
   return (
-    <BookmarkStoreContext.Provider value={storeRef.current}>
+    <BookmarkStoreContext value={storeRef.current}>
       {children}
-    </BookmarkStoreContext.Provider>
+    </BookmarkStoreContext>
   )
 }
 
 export function useBookmarkStore<T>(selector: (store: BookmarkState) => T): T {
-  const useStore = useContext(BookmarkStoreContext)
+  const useStore = use(BookmarkStoreContext)
 
   if (!useStore) {
     throw new Error(

package/src/stores/chains/ChainOrderStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, type JSX, useContext, useEffect, useRef } from 'react'
+import { createContext, type JSX, use, useEffect, useRef } from 'react'
 import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { useChains } from '../../hooks/useChains.js'
@@ -141,14 +141,14 @@ export function ChainOrderStoreProvider({
   ])
 
   return (
-    <ChainOrderStoreContext.Provider value={storeRef.current}>
+    <ChainOrderStoreContext value={storeRef.current}>
       {children}
-    </ChainOrderStoreContext.Provider>
+    </ChainOrderStoreContext>
   )
 }
 
 function useChainOrderStoreContext() {
-  const useStore = useContext(ChainOrderStoreContext)
+  const useStore = use(ChainOrderStoreContext)
   if (!useStore) {
     throw new Error(
       `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`

package/src/stores/form/FormStore.tsx

@@ -125,9 +125,9 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
   useFormRef(storeRef.current, formRef)
 
   return (
-    <FormStoreContext.Provider value={storeRef.current}>
+    <FormStoreContext value={storeRef.current}>
       {children}
       <FormUpdater reactiveFormValues={reactiveFormValues} />
-    </FormStoreContext.Provider>
+    </FormStoreContext>
   )
 }

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -18,13 +18,23 @@ const formValueKeys: FormFieldNames[] = [
   'toToken',
 ]
 
+// Limit-order params are only mirrored to the URL while the limit tab is
+// active, and stripped when the user leaves it. Unlike the base keys these are
+// presence-gated (not touched-gated) so the URL fully reproduces the limit
+// order — including the boolean/number fields, which are never "falsy-empty".
+const limitFormValueKeys: FormFieldNames[] = [
+  'toAmount',
+  'validUntil',
+  'partiallyFillable',
+]
+
 export const URLSearchParamsBuilder = () => {
   const { pathname } = useLocation()
   const touchedFields = useTouchedFields()
-  const values = useFieldValues(...formValueKeys)
+  const values = useFieldValues(...formValueKeys, ...limitFormValueKeys)
   const { setSelectedBookmark, addRecentWallet } = useBookmarkActions()
   const { validateAddress } = useAddressValidation()
-  const { buildUrl } = useWidgetConfig()
+  const { buildUrl, mode } = useWidgetConfig()
   // Using these methods as trying to use the touchedFields and values above
   // often has a lag that can effect the widgets initialisation sequence
   // and accidentally cause values to be wiped from the query string
@@ -85,9 +95,21 @@ export const URLSearchParamsBuilder = () => {
         url.searchParams.delete(key)
       }
     })
+    // Limit params live in the URL only while the limit tab is active.
+    limitFormValueKeys.forEach((key) => {
+      const value = getFieldValues(key)[0]
+      // Booleans are always "set" (false is meaningful); strings/numbers use
+      // truthiness so an empty toAmount is treated as absent.
+      const hasValue = typeof value === 'boolean' ? true : Boolean(value)
+      if (mode === 'limit' && hasValue) {
+        url.searchParams.set(key, String(value))
+      } else {
+        url.searchParams.delete(key)
+      }
+    })
     url.searchParams.sort()
     window.history.replaceState(window.history.state, '', url)
-  }, [pathname, touchedFields, values, isTouched, getFieldValues])
+  }, [pathname, touchedFields, values, isTouched, getFieldValues, mode])
 
   return null
 }

package/src/stores/form/createFormStore.ts

@@ -1,6 +1,6 @@
 import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
-
+import { DEFAULT_VALID_UNTIL_SECONDS } from '../../utils/limitOrder.js'
 import type {
   DefaultValues,
   FormFieldArray,
@@ -14,6 +14,9 @@ export const formDefaultValues: DefaultValues = {
   fromAmount: '',
   toAmount: '',
   tokenSearchFilter: '',
+  priceInverted: false,
+  validUntil: DEFAULT_VALID_UNTIL_SECONDS,
+  partiallyFillable: true,
 }
 
 const defaultValueToFormValue = <T>(value: T): FormValueControl<T> => ({
@@ -32,7 +35,8 @@ const valuesToFormValues = (defaultValues: DefaultValues): FormValues => {
   )
 }
 
-const isString = (str: any) => typeof str === 'string' || str instanceof String
+const isString = (str: unknown): str is string =>
+  typeof str === 'string' || str instanceof String
 
 const getUpdatedTouchedFields = (userValues: FormValues) => {
   return (Object.keys(userValues) as FormFieldNames[]).reduce(
@@ -58,7 +62,7 @@ const mergeDefaultFormValues = (
         ),
         isDirty: !!(userValues[key]?.isDirty || defaultValues[key]?.isTouched),
         value:
-          userValues[key]?.value || Number.isFinite(userValues[key]?.value)
+          userValues[key]?.value !== undefined && userValues[key]?.value !== ''
             ? userValues[key]?.value
             : defaultValues[key]?.value,
       }

package/src/stores/form/getDefaultValuesFromQueryString.ts

@@ -41,6 +41,17 @@ export const getDefaultValuesFromQueryString = ({
     ...(Number.isFinite(Number.parseFloat(searchParams.fromAmount))
       ? { fromAmount: formatInputAmount(searchParams.fromAmount) }
       : {}),
+    ...(Number.isFinite(Number.parseFloat(searchParams.toAmount))
+      ? { toAmount: formatInputAmount(searchParams.toAmount) }
+      : {}),
+    // Limit-order params (written only while on the limit tab).
+    ...(Number.isFinite(Number.parseInt(searchParams.validUntil, 10))
+      ? { validUntil: Number.parseInt(searchParams.validUntil, 10) }
+      : {}),
+    ...(searchParams.partiallyFillable === 'true' ||
+    searchParams.partiallyFillable === 'false'
+      ? { partiallyFillable: searchParams.partiallyFillable === 'true' }
+      : {}),
     ...(includeToAddress && searchParams.toAddress
       ? { toAddress: searchParams.toAddress }
       : {}),

package/src/stores/form/types.ts

@@ -14,9 +14,22 @@ export interface DefaultFieldValues {
 export interface DefaultValues extends DefaultFieldValues {
   contractCalls?: ContractCall[]
   tokenSearchFilter: string
+  /** Limit-order: when true, the price is displayed/entered inverted. */
+  priceInverted: boolean
+  /** Limit-order: order validity as a duration in seconds. */
+  validUntil: number
+  /** Limit-order: whether the order may be partially filled. */
+  partiallyFillable: boolean
+  /** Limit-order: id of the route the user picked. */
+  selectedRouteId?: string
 }
 
-export type GenericFormValue = string | number | ContractCall[] | undefined
+export type GenericFormValue =
+  | string
+  | number
+  | boolean
+  | ContractCall[]
+  | undefined
 export interface FormValueControl<T> {
   isTouched: boolean
   isDirty: boolean

package/src/stores/form/useClearAmountFields.ts

@@ -6,5 +6,6 @@ export const useClearAmountFields = (): (() => void) => {
   return useCallback(() => {
     setFieldValue('fromAmount', '')
     setFieldValue('toAmount', '')
+    setFieldValue('selectedRouteId', undefined)
   }, [setFieldValue])
 }

package/src/stores/form/useFormStore.ts

@@ -1,10 +1,10 @@
-import { useContext } from 'react'
+import { use } from 'react'
 import { useShallow } from 'zustand/shallow'
 import { FormStoreContext } from './FormStoreContext.js'
 import type { FormValuesState } from './types.js'
 
 export function useFormStore<T>(selector: (state: FormValuesState) => T): T {
-  const useStore = useContext(FormStoreContext)
+  const useStore = use(FormStoreContext)
 
   if (!useStore) {
     throw new Error('You forgot to wrap your component in <FormStoreProvider>.')

package/src/stores/header/useHeaderStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef } from 'react'
+import { createContext, use, useRef } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import type { PersistStoreProviderProps } from '../types.js'
@@ -14,14 +14,12 @@ export function HeaderStoreProvider({
     storeRef.current = createHeaderStore()
   }
   return (
-    <HeaderStoreContext.Provider value={storeRef.current}>
-      {children}
-    </HeaderStoreContext.Provider>
+    <HeaderStoreContext value={storeRef.current}>{children}</HeaderStoreContext>
   )
 }
 
 function useHeaderStoreContext() {
-  const useStore = useContext(HeaderStoreContext)
+  const useStore = use(HeaderStoreContext)
   if (!useStore) {
     throw new Error(
       `You forgot to wrap your component in <${HeaderStoreProvider.name}>.`

package/src/stores/navigationTabs/types.ts

@@ -0,0 +1,33 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+import type {
+  DefaultUI,
+  ModeOptions,
+  NavigationTabKey,
+  RequiredUIConfig,
+  WidgetMode,
+  WidgetVariant,
+} from '../../types/widget.js'
+
+export interface NavigationTab {
+  /** Stable, language-independent identity; resolved to a label via a hook. */
+  key: NavigationTabKey
+  /** When omitted, the tab inherits `config.variant`. */
+  variant?: WidgetVariant
+  /** When omitted, the tab inherits `config.mode`. */
+  mode?: WidgetMode
+  modeOptions?: ModeOptions
+  /** Layered over `config.defaultUI` while the tab is active. */
+  defaultUI?: DefaultUI
+  /** Layered over `config.requiredUI` while the tab is active. */
+  requiredUI?: RequiredUIConfig
+}
+
+export interface NavigationTabsState {
+  /** Tabs to render in the header, resolved from config (empty when none). */
+  tabs: NavigationTabKey[]
+  /** Key of the active tab, or `undefined` when there are no tabs. */
+  activeTab?: NavigationTabKey
+  setActiveTab(activeTab: NavigationTabKey): void
+}
+
+export type NavigationTabsStore = UseBoundStore<StoreApi<NavigationTabsState>>

package/src/stores/navigationTabs/useNavigationTabLabel.ts

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next'
+import type { NavigationTabKey } from '../../types/widget.js'
+
+export const useNavigationTabLabel = (): ((
+  key: NavigationTabKey
+) => string) => {
+  const { t } = useTranslation()
+  return (key: NavigationTabKey) => {
+    switch (key) {
+      case 'default':
+        return t('header.swapAndBridge')
+      case 'private':
+        return t('header.private')
+      case 'refuel':
+        return t('header.gas')
+      case 'swap':
+      case 'swap-advanced':
+        return t('header.swap')
+      case 'bridge':
+      case 'bridge-advanced':
+        return t('header.bridge')
+      case 'limit':
+        return t('header.limit')
+      default:
+        return t('header.swapAndBridge')
+    }
+  }
+}

package/src/stores/navigationTabs/useNavigationTabsStore.tsx

@@ -0,0 +1,113 @@
+import {
+  createContext,
+  type JSX,
+  type PropsWithChildren,
+  use,
+  useMemo,
+  useRef,
+} from 'react'
+import { create } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+import {
+  useWidgetConfig,
+  WidgetContext,
+} from '../../providers/WidgetProvider/WidgetProvider.js'
+import type {
+  NavigationTabKey,
+  SplitMode,
+  WidgetConfig,
+} from '../../types/widget.js'
+import type { NavigationTabsState, NavigationTabsStore } from './types.js'
+import {
+  getInitialActiveTab,
+  getNavigationTabKeys,
+  getTabDefaultUI,
+  getTabMode,
+  getTabModeOptions,
+  getTabRequiredUI,
+  getTabSplitMode,
+  getTabVariant,
+} from './utils.js'
+
+const NavigationTabsStoreContext = createContext<NavigationTabsStore | null>(
+  null
+)
+
+export function NavigationTabsStoreProvider({
+  children,
+  config,
+}: PropsWithChildren<{ config: WidgetConfig }>): JSX.Element {
+  const tabs = getNavigationTabKeys(config)
+  const initialActiveTab = getInitialActiveTab(config)
+  // Recreate (re-seeding tabs + active tab) only when the config-driven inputs
+  // change — not on runtime tab clicks, which must be preserved.
+  const signature = `${tabs.join(',')}|${initialActiveTab ?? ''}`
+  const storeRef = useRef<NavigationTabsStore>(null)
+  const signatureRef = useRef(signature)
+  let store = storeRef.current
+  if (!store || signatureRef.current !== signature) {
+    store = createNavigationTabsStore(tabs, initialActiveTab)
+    storeRef.current = store
+    signatureRef.current = signature
+  }
+
+  // Override the widget config with the active tab's mode, variant,
+  // modeOptions, defaultUI and requiredUI (each falling back to the config), so
+  // the rest of the widget reads tab-driven config transparently. No-op when
+  // there is no active tab.
+  const widgetConfig = useWidgetConfig()
+  const activeTab = store((state) => state.activeTab)
+  const tabConfig = useMemo(() => {
+    if (!activeTab) {
+      return widgetConfig
+    }
+    return {
+      ...widgetConfig,
+      mode: getTabMode(widgetConfig, activeTab),
+      variant: getTabVariant(widgetConfig, activeTab),
+      modeOptions: getTabModeOptions(widgetConfig, activeTab),
+      defaultUI: getTabDefaultUI(widgetConfig, activeTab),
+      requiredUI: getTabRequiredUI(widgetConfig, activeTab),
+    }
+  }, [widgetConfig, activeTab])
+
+  return (
+    <NavigationTabsStoreContext value={store}>
+      <WidgetContext value={tabConfig}>{children}</WidgetContext>
+    </NavigationTabsStoreContext>
+  )
+}
+
+function useNavigationTabsStoreContext(): NavigationTabsStore {
+  const useStore = use(NavigationTabsStoreContext)
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${NavigationTabsStoreProvider.name}>.`
+    )
+  }
+  return useStore
+}
+
+export function useNavigationTabsStore<T>(
+  selector: (state: NavigationTabsState) => T
+): T {
+  const useStore = useNavigationTabsStoreContext()
+  return useStore(useShallow(selector))
+}
+
+/** Effective split mode derived from the active tab. */
+export function useSplitMode(): SplitMode | undefined {
+  return useNavigationTabsStore((state) => getTabSplitMode(state.activeTab))
+}
+
+const createNavigationTabsStore = (
+  tabs: NavigationTabKey[],
+  initialActiveTab?: NavigationTabKey
+): NavigationTabsStore =>
+  create<NavigationTabsState>((set) => ({
+    tabs,
+    activeTab: initialActiveTab,
+    setActiveTab(activeTab) {
+      set({ activeTab })
+    },
+  }))