@lifi/widget 4.0.0 → 4.1.0

package/src/stores/navigationTabs/utils.ts

@@ -0,0 +1,134 @@
+import type {
+  InternalNavigationTabKey,
+  ModeOptions,
+  NavigationTabKey,
+  SplitMode,
+  SplitNavigationTabKey,
+  WidgetConfig,
+  WidgetMode,
+  WidgetVariant,
+} from '../../types/widget.js'
+import { getSplitMode } from '../../utils/mode.js'
+import type { NavigationTab } from './types.js'
+
+/** Configured navigation tabs by key. Labels are resolved from the key by a hook. */
+const navigationTabsByKey: Record<InternalNavigationTabKey, NavigationTab> = {
+  default: { key: 'default', variant: 'wide', mode: 'default' },
+  private: {
+    key: 'private',
+    variant: 'compact',
+    mode: 'split',
+    modeOptions: { split: 'swap' },
+  },
+  refuel: { key: 'refuel', variant: 'wide', mode: 'refuel' },
+  limit: { key: 'limit', variant: 'compact', mode: 'limit' },
+  'swap-advanced': {
+    key: 'swap-advanced',
+    variant: 'wide',
+    mode: 'split',
+    modeOptions: { split: 'swap' },
+  },
+  'bridge-advanced': {
+    key: 'bridge-advanced',
+    variant: 'wide',
+    mode: 'split',
+    modeOptions: { split: 'bridge' },
+  },
+}
+
+/** Split-mode tabs (Swap / Bridge), shown when no navigation tabs are configured. */
+const splitTabs: NavigationTab[] = [
+  {
+    key: 'swap',
+    mode: 'split',
+    modeOptions: { split: 'swap' },
+  },
+  {
+    key: 'bridge',
+    mode: 'split',
+    modeOptions: { split: 'bridge' },
+  },
+]
+
+const splitTabsByKey = Object.fromEntries(
+  splitTabs.map((tab) => [tab.key, tab])
+) as Record<SplitNavigationTabKey, NavigationTab>
+
+/** Combined lookup across configured and split tabs. */
+const tabByKey: Record<NavigationTabKey, NavigationTab> = {
+  ...navigationTabsByKey,
+  ...splitTabsByKey,
+}
+
+/** Tab keys shown in split mode when no navigation tabs are configured. */
+export const splitTabKeys: NavigationTabKey[] = splitTabs.map((tab) => tab.key)
+
+/** Resolves which navigation tabs the header should render from the config. */
+export const getNavigationTabKeys = (
+  config: WidgetConfig
+): NavigationTabKey[] => {
+  if (config._navigationTabs?.length) {
+    return config._navigationTabs
+  }
+  // Split mode shows Swap / Bridge tabs unless pinned to a single side.
+  if (
+    config.mode === 'split' &&
+    typeof config.modeOptions?.split !== 'string'
+  ) {
+    return splitTabKeys
+  }
+  return []
+}
+
+/**
+ * The tab the store seeds as active from the config. With navigation tabs it's
+ * the first configured tab; otherwise split mode's selection is itself a tab
+ * (`swap`/`bridge`), so it seeds the active tab too.
+ */
+export const getInitialActiveTab = (
+  config: WidgetConfig
+): NavigationTabKey | undefined => {
+  if (config._navigationTabs?.length) {
+    return config._navigationTabs[0]
+  }
+  return config.mode === 'split'
+    ? getSplitMode(config.modeOptions?.split)
+    : undefined
+}
+
+/** Split mode (`swap`/`bridge`) implied by a tab, or `undefined` if not split. */
+export const getTabSplitMode = (
+  key?: NavigationTabKey
+): SplitMode | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  return tab?.mode === 'split'
+    ? getSplitMode(tab.modeOptions?.split)
+    : undefined
+}
+
+/** Variant for a tab, falling back to the widget config's variant when unset. */
+export const getTabVariant = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): WidgetVariant | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  return tab?.variant ?? config.variant
+}
+
+/** Mode for a tab, falling back to the widget config's mode when unset. */
+export const getTabMode = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): WidgetMode | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  return tab?.mode ?? config.mode
+}
+
+/** Mode options for a tab, falling back to the widget config's when unset. */
+export const getTabModeOptions = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): ModeOptions | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  return tab?.modeOptions ?? config.modeOptions
+}

package/src/stores/pinnedTokens/PinnedTokensStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef } from 'react'
+import { createContext, use, useRef } from 'react'
 import { useShallow } from 'zustand/shallow'
 import type { PersistStoreProviderProps } from '../types.js'
 import { createPinnedTokensStore } from './createPinnedTokensStore.js'
@@ -17,16 +17,16 @@ export const PinnedTokensStoreProvider: React.FC<PersistStoreProviderProps> = ({
   }
 
   return (
-    <PinnedTokensStoreContext.Provider value={storeRef.current}>
+    <PinnedTokensStoreContext value={storeRef.current}>
       {children}
-    </PinnedTokensStoreContext.Provider>
+    </PinnedTokensStoreContext>
   )
 }
 
 export function usePinnedTokensStore<T>(
   selector: (store: PinnedTokensState) => T
 ): T {
-  const useStore = useContext(PinnedTokensStoreContext)
+  const useStore = use(PinnedTokensStoreContext)
 
   if (!useStore) {
     throw new Error(

package/src/stores/routes/RouteExecutionStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, type JSX, useContext, useRef } from 'react'
+import { createContext, type JSX, use, useRef } from 'react'
 import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import type { PersistStoreProviderProps } from '../types.js'
@@ -20,14 +20,14 @@ export function RouteExecutionStoreProvider({
     storeRef.current = createRouteExecutionStore(props)
   }
   return (
-    <RouteExecutionStoreContext.Provider value={storeRef.current}>
+    <RouteExecutionStoreContext value={storeRef.current}>
       {children}
-    </RouteExecutionStoreContext.Provider>
+    </RouteExecutionStoreContext>
   )
 }
 
 export function useRouteExecutionStoreContext(): any {
-  const useStore = useContext(RouteExecutionStoreContext)
+  const useStore = use(RouteExecutionStoreContext)
   if (!useStore) {
     throw new Error(
       `You forgot to wrap your component in <${RouteExecutionStoreProvider.name}>.`

package/src/stores/settings/SettingsStore.tsx

@@ -2,7 +2,7 @@ import {
   createContext,
   type JSX,
   type PropsWithChildren,
-  useContext,
+  use,
   useRef,
 } from 'react'
 import type { StoreApi, UseBoundStore } from 'zustand'
@@ -23,14 +23,14 @@ export const SettingsStoreProvider = ({
     storeRef.current = createSettingsStore(config)
   }
   return (
-    <SettingsStoreContext.Provider value={storeRef.current}>
+    <SettingsStoreContext value={storeRef.current}>
       {children}
-    </SettingsStoreContext.Provider>
+    </SettingsStoreContext>
   )
 }
 
 export function useSettingsStoreContext(): any {
-  const useStore = useContext(SettingsStoreContext)
+  const useStore = use(SettingsStoreContext)
   if (!useStore) {
     throw new Error(
       'You forgot to wrap your component in SettingsStoreContext.'

package/src/stores/settings/createSettingsStore.ts

@@ -6,7 +6,8 @@ import { allLanguages } from '../../providers/I18nProvider/constants.js'
 import { loadLocale } from '../../providers/I18nProvider/i18n.js'
 import type { LanguageKey } from '../../providers/I18nProvider/types.js'
 import type { WidgetConfig } from '../../types/widget.js'
-import type { SettingsProps, SettingsState } from './types.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
+import type { SettingsProps, SettingsState, SettingsToolType } from './types.js'
 import { SettingsToolTypes } from './types.js'
 import { getStateValues } from './utils/getStateValues.js'
 
@@ -35,11 +36,44 @@ const defaultSettings: SettingsProps = {
 
 export const createSettingsStore = (
   config: WidgetConfig
-): UseBoundStore<StoreApi<SettingsState>> =>
-  create<SettingsState>()(
+): UseBoundStore<StoreApi<SettingsState>> => {
+  const configItemsByToolType = {
+    Bridges: config.bridges,
+    Exchanges: config.exchanges,
+  }
+  // Tool state from a candidate map, keeping only config-allowed tools.
+  const buildToolState = (
+    toolType: SettingsToolType,
+    enabledMap: Record<string, boolean>
+  ) => {
+    const configItemSets = getConfigItemSets(
+      configItemsByToolType[toolType],
+      (items) => new Set(items)
+    )
+    const allowed: Record<string, boolean> = Object.fromEntries(
+      Object.entries(enabledMap).filter(([key]) =>
+        isItemAllowedForSets(key, configItemSets)
+      )
+    )
+    const keys = Object.keys(allowed)
+    return {
+      [`_enabled${toolType}`]: allowed,
+      [`enabled${toolType}`]: keys.filter((key) => allowed[key]),
+      [`disabled${toolType}`]: keys.filter((key) => !allowed[key]),
+    }
+  }
+  const toEnabledMap = (keys: string[] = []): Record<string, boolean> =>
+    Object.fromEntries(keys.map((key) => [key, true] as const))
+  // Deny-only configs can't be seeded; the tool universe is unknown until /tools.
+  const initialSettings: SettingsProps = {
+    ...defaultSettings,
+    ...buildToolState('Bridges', toEnabledMap(config.bridges?.allow)),
+    ...buildToolState('Exchanges', toEnabledMap(config.exchanges?.allow)),
+  }
+  return create<SettingsState>()(
     persist(
       (set, get) => ({
-        ...defaultSettings,
+        ...initialSettings,
         setValue: (key, value) =>
           set(() => ({
             [key]: value,
@@ -163,15 +197,16 @@ export const createSettingsStore = (
         merge: (persistedState: any, currentState: SettingsState) => {
           const state = { ...currentState, ...persistedState }
           SettingsToolTypes.forEach((toolType) => {
-            if (persistedState?.[`_enabled${toolType}`]) {
-              const enabledToolKeys = Object.keys(
-                persistedState[`_enabled${toolType}`]
-              )
-              state[`enabled${toolType}`] = enabledToolKeys.filter(
-                (key) => persistedState[`_enabled${toolType}`][key]
+            const persistedEnabled = persistedState?.[`_enabled${toolType}`]
+            if (persistedEnabled) {
+              // Overlay persisted toggles on the config allow seed so an empty
+              // intersection keeps the allow-list instead of going unrestricted.
+              const allowMap = toEnabledMap(
+                configItemsByToolType[toolType]?.allow
               )
-              state[`disabled${toolType}`] = enabledToolKeys.filter(
-                (key) => !persistedState[`_enabled${toolType}`][key]
+              Object.assign(
+                state,
+                buildToolState(toolType, { ...allowMap, ...persistedEnabled })
               )
             }
           })
@@ -217,3 +252,4 @@ export const createSettingsStore = (
       }
     )
   )
+}

package/src/stores/settings/types.ts

@@ -1,8 +1,6 @@
 import type { Order } from '@lifi/sdk'
-import type { PropsWithChildren } from 'react'
-import type { StoreApi, UseBoundStore } from 'zustand'
 import type { LanguageResource } from '../../providers/I18nProvider/types.js'
-import type { SplitMode, WidgetConfig } from '../../types/widget.js'
+import type { WidgetConfig } from '../../types/widget.js'
 
 export type ValueSetter<S> = <K extends keyof S>(
   key: K,
@@ -48,19 +46,6 @@ export interface SettingsActions {
 
 export type SettingsState = SettingsProps & SettingsActions
 
-export interface SplitModeState {
-  state?: SplitMode
-  setState(state: SplitMode): void
-}
-
-export type SplitModeStore = UseBoundStore<StoreApi<SplitModeState>>
-
-export interface SplitModeProps {
-  state?: SplitMode
-}
-
-export type SplitModeProviderProps = PropsWithChildren<SplitModeProps>
-
 export interface SettingsStoreProviderProps {
   config: WidgetConfig
 }

package/src/types/widget.ts

@@ -35,7 +35,15 @@ import type {
 import type { DefaultFieldValues } from '../stores/form/types.js'
 
 export type WidgetVariant = 'compact' | 'wide' | 'drawer'
-export type WidgetMode = 'default' | 'split' | 'custom' | 'refuel'
+
+/** @internal Not part of the public API. */
+export type InternalWidgetMode = 'limit'
+export type WidgetMode =
+  | 'default'
+  | 'split'
+  | 'custom'
+  | 'refuel'
+  | InternalWidgetMode
 export type SplitMode = 'bridge' | 'swap'
 export type SplitModeOptions = {
   defaultTab: SplitMode
@@ -51,6 +59,21 @@ export interface ModeOptions {
   custom?: { type: CustomMode }
 }
 
+/**
+ * Identity of a header navigation tab. Each key maps to a widget variant, mode and
+ * (optionally) mode options; labels are resolved from the key.
+ */
+export type SplitNavigationTabKey = SplitMode
+/** @internal Not part of the public API. */
+export type InternalNavigationTabKey =
+  | 'default'
+  | 'private'
+  | 'refuel'
+  | 'swap-advanced'
+  | 'bridge-advanced'
+  | 'limit'
+export type NavigationTabKey = InternalNavigationTabKey | SplitNavigationTabKey
+
 export type Appearance = PaletteMode | 'system'
 export interface NavigationProps {
   /**
@@ -344,6 +367,13 @@ export interface WidgetConfig {
   variant?: WidgetVariant
   mode?: WidgetMode
   modeOptions?: ModeOptions
+  /**
+   * Header navigation tabs, in order. When set, the widget renders a tab bar
+   * and the active tab drives the displayed flow. Each entry is a tab key.
+   *
+   * @internal Not part of the public API.
+   */
+  _navigationTabs?: NavigationTabKey[]
 
   appearance?: Appearance
   theme?: WidgetTheme

package/dist/esm/components/Header/SplitNavigationTabs.js

@@ -1,33 +0,0 @@
-import { useSplitModeStore } from "../../stores/settings/useSplitModeStore.js";
-import { useFieldActions } from "../../stores/form/useFieldActions.js";
-import { NavigationTab, NavigationTabs } from "../Tabs/NavigationTabs.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-//#region src/components/Header/SplitNavigationTabs.tsx
-const SplitNavigationTabs = () => {
-	const { t } = useTranslation();
-	const [state, setState] = useSplitModeStore((state) => [state.state, state.setState]);
-	const { setFieldValue } = useFieldActions();
-	const handleChange = (_, value) => {
-		setFieldValue("fromAmount", "");
-		setFieldValue("fromToken", "");
-		setFieldValue("toToken", "");
-		setState(value === 0 ? "swap" : "bridge");
-	};
-	return /* @__PURE__ */ jsxs(NavigationTabs, {
-		value: state === "swap" ? 0 : 1,
-		onChange: handleChange,
-		"aria-label": "tabs",
-		children: [/* @__PURE__ */ jsx(NavigationTab, {
-			label: t("header.swap"),
-			disableRipple: true
-		}), /* @__PURE__ */ jsx(NavigationTab, {
-			label: t("header.bridge"),
-			disableRipple: true
-		})]
-	});
-};
-//#endregion
-export { SplitNavigationTabs };
-
-//# sourceMappingURL=SplitNavigationTabs.js.map

package/dist/esm/components/Header/SplitNavigationTabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SplitNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/SplitNavigationTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\nexport const SplitNavigationTabs = (): JSX.Element => {\n  const { t } = useTranslation()\n  const [state, setState] = useSplitModeStore((state) => [\n    state.state,\n    state.setState,\n  ])\n\n  const { setFieldValue } = useFieldActions()\n  const handleChange = (_: React.SyntheticEvent, value: number) => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('fromToken', '')\n    setFieldValue('toToken', '')\n    setState(value === 0 ? 'swap' : 'bridge')\n  }\n\n  return (\n    <NavigationTabs\n      value={state === 'swap' ? 0 : 1}\n      onChange={handleChange}\n      aria-label=\"tabs\"\n    >\n      <NavigationTab label={t('header.swap')} disableRipple />\n      <NavigationTab label={t('header.bridge')} disableRipple />\n    </NavigationTabs>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,4BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,OAAO,YAAY,mBAAmB,UAAU,CACrD,MAAM,OACN,MAAM,QACR,CAAC;CAED,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,gBAAgB,GAAyB,UAAkB;EAC/D,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,UAAU,IAAI,SAAS,QAAQ;CAC1C;CAEA,OACE,qBAAC,gBAAD;EACE,OAAO,UAAU,SAAS,IAAI;EAC9B,UAAU;EACV,cAAW;YAHb,CAKE,oBAAC,eAAD;GAAe,OAAO,EAAE,aAAa;GAAG,eAAA;EAAe,CAAA,GACvD,oBAAC,eAAD;GAAe,OAAO,EAAE,eAAe;GAAG,eAAA;EAAe,CAAA,CAC3C;;AAEpB"}

package/dist/esm/stores/settings/useSplitModeStore.js

@@ -1,36 +0,0 @@
-import { createContext, useContext, useRef } from "react";
-import { create } from "zustand";
-import { useShallow } from "zustand/shallow";
-import { jsx } from "react/jsx-runtime";
-//#region src/stores/settings/useSplitModeStore.tsx
-const SplitModeStoreContext = createContext(null);
-const shouldRecreateStore = (store, props) => {
-	const { state } = store.getState();
-	return state !== props.state;
-};
-function SplitModeStoreProvider({ children, ...props }) {
-	const storeRef = useRef(null);
-	if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) storeRef.current = createSplitModeStore(props);
-	return /* @__PURE__ */ jsx(SplitModeStoreContext.Provider, {
-		value: storeRef.current,
-		children
-	});
-}
-function useSplitModeStoreContext() {
-	const useStore = useContext(SplitModeStoreContext);
-	if (!useStore) throw new Error(`You forgot to wrap your component in <${SplitModeStoreProvider.name}>.`);
-	return useStore;
-}
-function useSplitModeStore(selector) {
-	return useSplitModeStoreContext()(useShallow(selector));
-}
-const createSplitModeStore = ({ state }) => create((set) => ({
-	state,
-	setState(state) {
-		set(() => ({ state }));
-	}
-}));
-//#endregion
-export { SplitModeStoreProvider, useSplitModeStore };
-
-//# sourceMappingURL=useSplitModeStore.js.map

package/dist/esm/stores/settings/useSplitModeStore.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSplitModeStore.js","names":[],"sources":["../../../../src/stores/settings/useSplitModeStore.tsx"],"sourcesContent":["import { createContext, type JSX, useContext, useRef } from 'react'\nimport { create } from 'zustand'\nimport { useShallow } from 'zustand/shallow'\nimport type {\n  SplitModeProps,\n  SplitModeProviderProps,\n  SplitModeState,\n  SplitModeStore,\n} from './types.js'\n\nconst SplitModeStoreContext = createContext<SplitModeStore | null>(null)\n\nconst shouldRecreateStore = (store: SplitModeStore, props: SplitModeProps) => {\n  const { state } = store.getState()\n  return state !== props.state\n}\n\nexport function SplitModeStoreProvider({\n  children,\n  ...props\n}: SplitModeProviderProps): JSX.Element {\n  const storeRef = useRef<SplitModeStore>(null)\n  if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {\n    storeRef.current = createSplitModeStore(props)\n  }\n  return (\n    <SplitModeStoreContext.Provider value={storeRef.current}>\n      {children}\n    </SplitModeStoreContext.Provider>\n  )\n}\n\nfunction useSplitModeStoreContext() {\n  const useStore = useContext(SplitModeStoreContext)\n  if (!useStore) {\n    throw new Error(\n      `You forgot to wrap your component in <${SplitModeStoreProvider.name}>.`\n    )\n  }\n  return useStore\n}\n\nexport function useSplitModeStore<T>(\n  selector: (state: SplitModeState) => T\n): T {\n  const useStore = useSplitModeStoreContext()\n  return useStore(useShallow(selector))\n}\n\nconst createSplitModeStore = ({ state }: SplitModeProps) =>\n  create<SplitModeState>((set) => ({\n    state,\n    setState(state) {\n      set(() => ({\n        state,\n      }))\n    },\n  }))\n"],"mappings":";;;;;AAUA,MAAM,wBAAwB,cAAqC,IAAI;AAEvE,MAAM,uBAAuB,OAAuB,UAA0B;CAC5E,MAAM,EAAE,UAAU,MAAM,SAAS;CACjC,OAAO,UAAU,MAAM;AACzB;AAEA,SAAgB,uBAAuB,EACrC,UACA,GAAG,SACmC;CACtC,MAAM,WAAW,OAAuB,IAAI;CAC5C,IAAI,CAAC,SAAS,WAAW,oBAAoB,SAAS,SAAS,KAAK,GAClE,SAAS,UAAU,qBAAqB,KAAK;CAE/C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,SAAS;EAC7C;CAC6B,CAAA;AAEpC;AAEA,SAAS,2BAA2B;CAClC,MAAM,WAAW,WAAW,qBAAqB;CACjD,IAAI,CAAC,UACH,MAAM,IAAI,MACR,yCAAyC,uBAAuB,KAAK,GACvE;CAEF,OAAO;AACT;AAEA,SAAgB,kBACd,UACG;CAEH,OADiB,yBACH,EAAE,WAAW,QAAQ,CAAC;AACtC;AAEA,MAAM,wBAAwB,EAAE,YAC9B,QAAwB,SAAS;CAC/B;CACA,SAAS,OAAO;EACd,WAAW,EACT,MACF,EAAE;CACJ;AACF,EAAE"}

package/dist/esm/utils/variant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"variant.js","names":[],"sources":["../../../src/utils/variant.ts"],"sourcesContent":["import type { SplitMode, SplitModeOptions } from '../types/widget.js'\n\nexport const getSplitMode = (\n  split?: SplitMode | SplitModeOptions\n): SplitMode => {\n  if (!split) {\n    return 'swap'\n  }\n  if (typeof split === 'string') {\n    return split\n  }\n  return split.defaultTab\n}\n"],"mappings":";AAEA,MAAa,gBACX,UACc;CACd,IAAI,CAAC,OACH,OAAO;CAET,IAAI,OAAO,UAAU,UACnB,OAAO;CAET,OAAO,MAAM;AACf"}

package/src/components/Header/SplitNavigationTabs.tsx

@@ -1,32 +0,0 @@
-import type { JSX } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'
-import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'
-
-export const SplitNavigationTabs = (): JSX.Element => {
-  const { t } = useTranslation()
-  const [state, setState] = useSplitModeStore((state) => [
-    state.state,
-    state.setState,
-  ])
-
-  const { setFieldValue } = useFieldActions()
-  const handleChange = (_: React.SyntheticEvent, value: number) => {
-    setFieldValue('fromAmount', '')
-    setFieldValue('fromToken', '')
-    setFieldValue('toToken', '')
-    setState(value === 0 ? 'swap' : 'bridge')
-  }
-
-  return (
-    <NavigationTabs
-      value={state === 'swap' ? 0 : 1}
-      onChange={handleChange}
-      aria-label="tabs"
-    >
-      <NavigationTab label={t('header.swap')} disableRipple />
-      <NavigationTab label={t('header.bridge')} disableRipple />
-    </NavigationTabs>
-  )
-}

package/src/stores/settings/useSplitModeStore.tsx

@@ -1,58 +0,0 @@
-import { createContext, type JSX, useContext, useRef } from 'react'
-import { create } from 'zustand'
-import { useShallow } from 'zustand/shallow'
-import type {
-  SplitModeProps,
-  SplitModeProviderProps,
-  SplitModeState,
-  SplitModeStore,
-} from './types.js'
-
-const SplitModeStoreContext = createContext<SplitModeStore | null>(null)
-
-const shouldRecreateStore = (store: SplitModeStore, props: SplitModeProps) => {
-  const { state } = store.getState()
-  return state !== props.state
-}
-
-export function SplitModeStoreProvider({
-  children,
-  ...props
-}: SplitModeProviderProps): JSX.Element {
-  const storeRef = useRef<SplitModeStore>(null)
-  if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
-    storeRef.current = createSplitModeStore(props)
-  }
-  return (
-    <SplitModeStoreContext.Provider value={storeRef.current}>
-      {children}
-    </SplitModeStoreContext.Provider>
-  )
-}
-
-function useSplitModeStoreContext() {
-  const useStore = useContext(SplitModeStoreContext)
-  if (!useStore) {
-    throw new Error(
-      `You forgot to wrap your component in <${SplitModeStoreProvider.name}>.`
-    )
-  }
-  return useStore
-}
-
-export function useSplitModeStore<T>(
-  selector: (state: SplitModeState) => T
-): T {
-  const useStore = useSplitModeStoreContext()
-  return useStore(useShallow(selector))
-}
-
-const createSplitModeStore = ({ state }: SplitModeProps) =>
-  create<SplitModeState>((set) => ({
-    state,
-    setState(state) {
-      set(() => ({
-        state,
-      }))
-    },
-  }))