@lifi/widget 4.0.0 → 4.2.0

package/src/stores/navigationTabs/utils.ts

@@ -0,0 +1,196 @@
+import type {
+  DefaultUI,
+  InternalNavigationTabKey,
+  ModeOptions,
+  NavigationTabKey,
+  RequiredUIConfig,
+  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',
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
+  private: {
+    key: 'private',
+    variant: 'compact',
+    mode: 'default',
+    defaultUI: {
+      layout: 'cards',
+    },
+    requiredUI: { toAddress: true },
+  },
+  refuel: {
+    key: 'refuel',
+    variant: 'wide',
+    mode: 'refuel',
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
+  limit: {
+    key: 'limit',
+    variant: 'compact',
+    mode: 'limit',
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
+  'swap-advanced': {
+    key: 'swap-advanced',
+    variant: 'wide',
+    mode: 'split',
+    modeOptions: { split: 'swap' },
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
+  'bridge-advanced': {
+    key: 'bridge-advanced',
+    variant: 'wide',
+    mode: 'split',
+    modeOptions: { split: 'bridge' },
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
+}
+
+/** 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
+}
+
+/**
+ * Default UI for a tab, layered over the widget config's `defaultUI` so the
+ * tab overrides only the fields it sets and inherits the rest.
+ */
+export const getTabDefaultUI = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): DefaultUI | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  if (!tab?.defaultUI) {
+    return config.defaultUI
+  }
+  return { ...config.defaultUI, ...tab.defaultUI }
+}
+
+/**
+ * Required UI for a tab, layered over the widget config's `requiredUI` so the
+ * tab overrides only the fields it sets and inherits the rest.
+ */
+export const getTabRequiredUI = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): RequiredUIConfig | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  if (!tab?.requiredUI) {
+    return config.requiredUI
+  }
+  return { ...config.requiredUI, ...tab.requiredUI }
+}

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

@@ -3,14 +3,17 @@ import type { DefaultValues } from '../stores/form/types.js'
 import type { SettingsProps } from '../stores/settings/types.js'
 import type { NavigationRouteType } from '../utils/navigationRoutes.js'
 import type { TokenAmount } from './token.js'
+import type { Appearance, NavigationTabKey } from './widget.js'
 
 export enum WidgetEvent {
+  AppearanceChanged = 'appearanceChanged',
   AvailableRoutes = 'availableRoutes',
   ChainPinned = 'chainPinned',
   ContactSupport = 'contactSupport',
   DestinationChainTokenSelected = 'destinationChainTokenSelected',
   FormFieldChanged = 'formFieldChanged',
   LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
+  NavigationTabChanged = 'navigationTabChanged',
   PageEntered = 'pageEntered',
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
@@ -26,12 +29,14 @@ export enum WidgetEvent {
 }
 
 export type WidgetEvents = {
+  appearanceChanged: (data: Appearance) => void
   availableRoutes: (data: Route[]) => void
   chainPinned: (data: ChainPinned) => void
   contactSupport: (data: ContactSupport) => void
   destinationChainTokenSelected: (data: ChainTokenSelected) => void
   formFieldChanged: (data: FormFieldChanged) => void
   lowAddressActivityConfirmed: (data: LowAddressActivityConfirmed) => void
+  navigationTabChanged: (data: NavigationTabChanged) => void
   pageEntered: (data: NavigationRouteType) => void
   routeExecutionCompleted: (data: Route) => void
   routeExecutionFailed: (data: RouteExecutionUpdate) => void
@@ -112,3 +117,10 @@ export type LowAddressActivityConfirmed = {
   address: string
   chainId: number
 }
+
+export type NavigationTabChanged = {
+  /** Key of the now-active tab. */
+  tab: NavigationTabKey
+  /** Key of the previously active tab, or `undefined` on first render. */
+  previousTab?: NavigationTabKey
+}

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 {
   /**
@@ -150,6 +173,15 @@ export interface RequiredUIConfig {
 export type DefaultUI = {
   transactionDetailsExpanded?: boolean
   navigationHeaderTitleNoWrap?: boolean
+  /**
+   * Layout for the main form.
+   * - `'default'`: the chain/token selectors plus single amount input.
+   * - `'cards'`: the redesigned card-based layout — stacked Send/Receive amount
+   *   cards (`AmountInputCardPair`) with inline token pill selectors and a swap
+   *   button.
+   * @default 'default'
+   */
+  layout?: 'default' | 'cards'
 }
 
 export interface WidgetWalletConfig {
@@ -344,6 +376,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/src/utils/format.ts

@@ -175,7 +175,11 @@ const units = [
   ['second', 1],
 ] as const
 
-export function formatDuration(seconds: number, locale: string): string {
+export function formatDuration(
+  seconds: number,
+  locale: string,
+  unitDisplay: Intl.NumberFormatOptions['unitDisplay'] = 'narrow'
+): string {
   const match = units.find(([, v]) => seconds >= v)
   const amount = match ? Math.floor(seconds / match[1]) : 0
   const unit = match?.[0] ?? 'second'
@@ -183,7 +187,7 @@ export function formatDuration(seconds: number, locale: string): string {
   return amount.toLocaleString(locale, {
     style: 'unit',
     unit,
-    unitDisplay: 'narrow',
+    unitDisplay,
   })
 }
 

package/src/utils/limitOrder.ts

@@ -0,0 +1,88 @@
+import { formatInputAmount } from './format.js'
+
+/** Default order validity: 1 day, expressed as a duration in seconds. */
+export const DEFAULT_VALID_UNTIL_SECONDS: number = 24 * 60 * 60
+
+/**
+ * High-precision formatter for derived limit-order values. Mirrors the
+ * approach used by `priceToTokenAmount` — these are display-level derivations;
+ * the route request re-parses amounts via `parseUnits`.
+ */
+const preciseFormatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 20,
+  maximumFractionDigits: 20,
+  useGrouping: false,
+})
+
+function parsePositive(value?: string): number | undefined {
+  if (!value) {
+    return undefined
+  }
+  const parsed = Number.parseFloat(value)
+  if (Number.isNaN(parsed) || parsed <= 0) {
+    return undefined
+  }
+  return parsed
+}
+
+/**
+ * Derive the receive amount: `receiveAmount = sendAmount × limitPrice`.
+ * Returns an empty string when either input is missing or invalid.
+ */
+export function deriveReceiveAmount(
+  sendAmount?: string,
+  limitPrice?: string,
+  toDecimals?: number
+): string {
+  const send = parsePositive(sendAmount)
+  const price = parsePositive(limitPrice)
+  if (send === undefined || price === undefined) {
+    return ''
+  }
+  return formatInputAmount(
+    preciseFormatter.format(send * price),
+    toDecimals ?? null
+  )
+}
+
+/**
+ * Derive the limit price: `limitPrice = receiveAmount ÷ sendAmount`.
+ * Returns an empty string when either input is missing or invalid.
+ */
+export function deriveLimitPrice(
+  sendAmount?: string,
+  receiveAmount?: string
+): string {
+  const send = parsePositive(sendAmount)
+  const receive = parsePositive(receiveAmount)
+  if (send === undefined || receive === undefined) {
+    return ''
+  }
+  return preciseFormatter.format(receive / send)
+}
+
+/** Invert a price for display flipping: `1 ÷ price`. */
+export function invertPrice(price?: string): string {
+  const parsed = parsePositive(price)
+  if (parsed === undefined) {
+    return ''
+  }
+  return preciseFormatter.format(1 / parsed)
+}
+
+/**
+ * Apply a percentage offset to a price, e.g. `percent = 2` → `price × 1.02`.
+ * Used by the quick-set buttons (+2%, +5%).
+ */
+export function applyPriceOffset(
+  price: string | undefined,
+  percent: number
+): string {
+  const parsed = parsePositive(price)
+  if (parsed === undefined) {
+    return ''
+  }
+  return preciseFormatter.format(parsed * (1 + percent / 100))
+}

package/src/utils/navigationRoutes.ts

@@ -8,6 +8,8 @@ export const navigationRoutes = {
   languages: 'languages',
   routes: 'routes',
   settings: 'settings',
+  routePriority: 'route-priority',
+  slippage: 'slippage',
   toChain: 'to-chain',
   toToken: 'to-token',
   toTokenNative: 'to-token-native',
@@ -30,6 +32,8 @@ export const stickyHeaderRoutes: string[] = [
   navigationRoutes.home,
   navigationRoutes.routes,
   navigationRoutes.settings,
+  navigationRoutes.routePriority,
+  navigationRoutes.slippage,
   navigationRoutes.toChain,
   navigationRoutes.toTokenNative,
   navigationRoutes.transactionDetails,
@@ -50,6 +54,8 @@ export const backButtonRoutes: string[] = [
   navigationRoutes.fromToken,
   navigationRoutes.routes,
   navigationRoutes.settings,
+  navigationRoutes.routePriority,
+  navigationRoutes.slippage,
   navigationRoutes.toChain,
   navigationRoutes.toToken,
   navigationRoutes.toTokenNative,

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"}