@lifi/widget 4.1.0 → 4.3.0

package/src/stores/navigationTabs/utils.ts

@@ -1,7 +1,9 @@
 import type {
+  DefaultUI,
   InternalNavigationTabKey,
   ModeOptions,
   NavigationTabKey,
+  RequiredUIConfig,
   SplitMode,
   SplitNavigationTabKey,
   WidgetConfig,
@@ -13,26 +15,56 @@ 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' },
+  default: {
+    key: 'default',
+    variant: 'wide',
+    mode: 'default',
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
   private: {
     key: 'private',
     variant: 'compact',
-    mode: 'split',
-    modeOptions: { split: 'swap' },
+    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',
+    },
   },
-  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' },
+    defaultUI: {
+      layout: 'cards',
+    },
   },
   'bridge-advanced': {
     key: 'bridge-advanced',
     variant: 'wide',
     mode: 'split',
     modeOptions: { split: 'bridge' },
+    defaultUI: {
+      layout: 'cards',
+    },
   },
 }
 
@@ -132,3 +164,33 @@ export const getTabModeOptions = (
   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/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

@@ -173,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 {
@@ -293,6 +302,7 @@ export type WidgetTokens = {
   featured?: StaticToken[]
   include?: Token[]
   popular?: StaticToken[]
+  verified?: BaseToken[]
 } & AllowDenyItems<BaseToken>
 
 export type WidgetLanguages = {

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/src/utils/token.ts

@@ -1,15 +1,32 @@
-import type {
-  BaseToken,
-  RouteExtended,
-  Token,
-  TokenAmount,
-  TokenExtended,
-} from '@lifi/sdk'
+import type { BaseToken, RouteExtended, Token, TokenAmount } from '@lifi/sdk'
 import type { FormType } from '../stores/form/types.js'
-import type { TokensByChain } from '../types/token.js'
+import type { TokensByChain, TokenWithVerified } from '../types/token.js'
 import type { WidgetChains, WidgetTokens } from '../types/widget.js'
 import { getConfigItemSets, isFormItemAllowed } from './item.js'
 
+/**
+ * Builds per-chain sets of lowercase token addresses from the
+ * `tokens.verified` config allowlist.
+ */
+export const getVerifiedTokensSets = (
+  configTokens?: WidgetTokens
+): Map<number, Set<string>> | undefined => {
+  if (!configTokens?.verified?.length) {
+    return undefined
+  }
+  const sets = new Map<number, Set<string>>()
+  for (const token of configTokens.verified) {
+    const chainId = Number(token.chainId)
+    let addresses = sets.get(chainId)
+    if (!addresses) {
+      addresses = new Set()
+      sets.set(chainId, addresses)
+    }
+    addresses.add(token.address.toLowerCase())
+  }
+  return sets
+}
+
 /**
  * Merges verified tokens with search tokens.
  * Verified tokens take priority - search tokens are only added if they don't already exist.
@@ -74,11 +91,11 @@ export const updateTokenInCache = (
 }
 
 export const filterAllowedTokens = (
-  dataTokens: { [chainId: number]: TokenExtended[] } | undefined,
+  dataTokens: TokensByChain | undefined,
   configTokens?: WidgetTokens,
   chainsConfig?: WidgetChains,
   formType?: FormType
-): { [chainId: number]: TokenExtended[] } | undefined => {
+): TokensByChain | undefined => {
   if (!dataTokens) {
     return
   }
@@ -103,12 +120,16 @@ export const filterAllowedTokens = (
       )
     : allChainIds
 
-  const allowedTokensByChain: { [chainId: number]: TokenExtended[] } = {}
+  const verifiedTokensSets = getVerifiedTokensSets(configTokens)
+
+  const allowedTokensByChain: TokensByChain = {}
   for (const chainId of allowedChainIds) {
-    const chainTokens = [
-      ...dataTokens[chainId],
-      ...includedTokens.filter((t) => Number(t.chainId) === chainId),
-    ]
+    const chainIncludedTokens = includedTokens.filter(
+      (t) => Number(t.chainId) === chainId
+    )
+    const includedAddresses = new Set(
+      chainIncludedTokens.map((t) => t.address.toLowerCase())
+    )
 
     const allowedAddresses = getConfigItemSets(
       configTokens,
@@ -121,11 +142,41 @@ export const filterAllowedTokens = (
       formType
     )
 
-    const filtered = chainTokens.filter((token) =>
-      isFormItemAllowed(token, allowedAddresses, formType, (t) =>
-        t.address.toLowerCase()
-      )
-    )
+    const verifiedAddresses = verifiedTokensSets?.get(chainId)
+
+    const chainTokens: TokenWithVerified[] = [
+      ...(dataTokens[chainId] ?? []),
+      ...chainIncludedTokens,
+    ]
+
+    const filtered: TokenWithVerified[] = []
+    const seenAddresses = new Set<string>()
+    for (const token of chainTokens) {
+      const address = token.address.toLowerCase()
+      // Data tokens come first and win over include duplicates,
+      // keeping their extended data
+      if (seenAddresses.has(address)) {
+        continue
+      }
+      seenAddresses.add(address)
+      if (
+        !isFormItemAllowed(token, allowedAddresses, formType, (t) =>
+          t.address.toLowerCase()
+        )
+      ) {
+        continue
+      }
+      // Include and verified-allowlist tokens are explicitly set by the
+      // integrator, mark them as verified
+      if (
+        !token.verified &&
+        (includedAddresses.has(address) || verifiedAddresses?.has(address))
+      ) {
+        filtered.push({ ...token, verified: true })
+      } else {
+        filtered.push(token)
+      }
+    }
 
     allowedTokensByChain[chainId] = filtered
   }