@lifi/widget 4.0.0 → 4.1.0

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,13 +1,7 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
 import { Box, Button, Typography } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
+import type { JSX, Ref } from 'react'
+import { useCallback, useImperativeHandle, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -28,62 +22,63 @@ interface ExchangeRateBottomSheetProps {
   onCancel?(): void
 }
 
-export const ExchangeRateBottomSheet: ForwardRefExoticComponent<
-  ExchangeRateBottomSheetProps & RefAttributes<ExchangeRateBottomSheetBase>
-> = forwardRef<ExchangeRateBottomSheetBase, ExchangeRateBottomSheetProps>(
-  ({ onContinue, onCancel }, ref) => {
-    const [data, setData] = useState<ExchangeRateUpdateParams>()
-    const bottomSheetRef = useRef<BottomSheetBase>(null)
-    const resolverRef = useRef<(value: boolean) => void>(null)
+export const ExchangeRateBottomSheet = ({
+  onContinue,
+  onCancel,
+  ref,
+}: ExchangeRateBottomSheetProps & {
+  ref?: Ref<ExchangeRateBottomSheetBase>
+}): JSX.Element => {
+  const [data, setData] = useState<ExchangeRateUpdateParams>()
+  const bottomSheetRef = useRef<BottomSheetBase>(null)
+  const resolverRef = useRef<(value: boolean) => void>(null)
 
-    const handleContinue = () => {
-      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)
-      onContinue?.()
+  const close = useCallback((value = false, bottomSheetClose = true) => {
+    resolverRef.current?.(value)
+    if (bottomSheetClose) {
+      bottomSheetRef.current?.close()
     }
+  }, [])
 
-    const handleCancel = useCallback(() => {
-      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)
-      onCancel?.()
-    }, [onCancel, ref])
+  const handleContinue = useCallback(() => {
+    close(true)
+    onContinue?.()
+  }, [close, onContinue])
 
-    const handleClose = useCallback(() => {
-      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(
-        false,
-        false
-      )
-      onCancel?.()
-    }, [onCancel, ref])
+  const handleCancel = useCallback(() => {
+    close(false)
+    onCancel?.()
+  }, [close, onCancel])
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => bottomSheetRef.current?.isOpen(),
-        open: (resolver, data) => {
-          setData(data)
-          resolverRef.current = resolver
-          bottomSheetRef.current?.open()
-        },
-        close: (value = false, bottomSheetClose = true) => {
-          resolverRef.current?.(value)
-          if (bottomSheetClose) {
-            bottomSheetRef.current?.close()
-          }
-        },
-      }),
-      []
-    )
+  const handleClose = useCallback(() => {
+    close(false, false)
+    onCancel?.()
+  }, [close, onCancel])
 
-    return (
-      <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
-        <ExchangeRateBottomSheetContent
-          data={data}
-          onContinue={handleContinue}
-          onCancel={handleCancel}
-        />
-      </BottomSheet>
-    )
-  }
-)
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => bottomSheetRef.current?.isOpen(),
+      open: (resolver, data) => {
+        setData(data)
+        resolverRef.current = resolver
+        bottomSheetRef.current?.open()
+      },
+      close,
+    }),
+    [close]
+  )
+
+  return (
+    <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
+      <ExchangeRateBottomSheetContent
+        data={data}
+        onContinue={handleContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+}
 
 const ExchangeRateBottomSheetContent: React.FC<
   ExchangeRateBottomSheetProps

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/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,27 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+import type {
+  ModeOptions,
+  NavigationTabKey,
+  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
+}
+
+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,108 @@
+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,
+  getTabMode,
+  getTabModeOptions,
+  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 and
+  // modeOptions (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),
+    }
+  }, [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 })
+    },
+  }))