@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -1,13 +1,14 @@
+import { useLocation } from '@tanstack/react-router'
 import { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useAddressValidation } from '../../hooks/useAddressValidation.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
-import { formatInputAmount } from '../../utils/format.js'
 import { useBookmarkActions } from '../bookmarks/useBookmarkActions.js'
-import type { DefaultValues, FormFieldNames } from '../form/types.js'
+import type { FormFieldNames } from '../form/types.js'
 import { useFieldActions } from '../form/useFieldActions.js'
 import { useFieldValues } from '../form/useFieldValues.js'
 import { useTouchedFields } from '../form/useTouchedFields.js'
+import { getDefaultValuesFromQueryString } from './getDefaultValuesFromQueryString.js'
 
 const formValueKeys: FormFieldNames[] = [
   'fromAmount',
@@ -18,34 +19,6 @@ const formValueKeys: FormFieldNames[] = [
   'toToken',
 ]
 
-const getDefaultValuesFromQueryString = (): Partial<DefaultValues> => {
-  const searchParams = Object.fromEntries(
-    new URLSearchParams(window?.location.search)
-  )
-
-  // Prevent using fromToken/toToken params if chain is not selected
-  ;['from', 'to'].forEach((key) => {
-    if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
-      delete searchParams[`${key}Token`]
-    }
-  })
-
-  return {
-    ...(Number.isFinite(Number.parseInt(searchParams.fromChain, 10))
-      ? { fromChain: Number.parseInt(searchParams.fromChain, 10) }
-      : {}),
-    ...(Number.isFinite(Number.parseInt(searchParams.toChain, 10))
-      ? { toChain: Number.parseInt(searchParams.toChain, 10) }
-      : {}),
-    ...(searchParams.fromToken ? { fromToken: searchParams.fromToken } : {}),
-    ...(searchParams.toToken ? { toToken: searchParams.toToken } : {}),
-    ...(Number.isFinite(Number.parseFloat(searchParams.fromAmount))
-      ? { fromAmount: formatInputAmount(searchParams.fromAmount) }
-      : {}),
-    ...(searchParams.toAddress ? { toAddress: searchParams.toAddress } : {}),
-  }
-}
-
 export const URLSearchParamsBuilder = () => {
   const { pathname } = useLocation()
   const touchedFields = useTouchedFields()
@@ -53,7 +26,7 @@ export const URLSearchParamsBuilder = () => {
   const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark, addRecentWallet } = useBookmarkActions()
   const { validateAddress } = useAddressValidation()
-
+  const { buildUrl } = 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
@@ -62,7 +35,8 @@ export const URLSearchParamsBuilder = () => {
 
   useEffect(() => {
     // get the initial values from the querystring
-    const formValues = getDefaultValuesFromQueryString()
+    const formValues = getDefaultValuesFromQueryString({ buildUrl })
+    const { toAddress, ...initialFormValues } = formValues
 
     /**
      * When URL builder is enabled and user opens a page with toAddress parameter,
@@ -71,19 +45,17 @@ export const URLSearchParamsBuilder = () => {
      * same way as a manually entered and validated address.
      */
     const initializeFromAddress = async () => {
-      if (formValues.toAddress) {
+      if (toAddress) {
         try {
           const validationResult = await validateAddress({
-            value: formValues.toAddress,
+            value: toAddress,
           })
-          // Check if the toAddress is still in the query string
-          // Could be modified by the user before the validation is done
-          const { toAddress } = getDefaultValuesFromQueryString()
           if (validationResult.isValid && toAddress) {
             const bookmark = {
               address: validationResult.address,
               chainType: validationResult.chainType,
             }
+            setUserAndDefaultValues({ toAddress })
             setSelectedBookmark(bookmark)
             addRecentWallet(bookmark)
             setSendToWallet(true)
@@ -94,14 +66,15 @@ export const URLSearchParamsBuilder = () => {
       }
     }
 
+    setUserAndDefaultValues(initialFormValues)
     initializeFromAddress()
-    setUserAndDefaultValues(formValues)
   }, [
     setUserAndDefaultValues,
     setSendToWallet,
     validateAddress,
     setSelectedBookmark,
     addRecentWallet,
+    buildUrl,
   ])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only when pathname changes

package/src/stores/form/getDefaultValuesFromQueryString.ts

@@ -0,0 +1,48 @@
+import { formatInputAmount } from '../../utils/format.js'
+import type { DefaultValues } from './types.js'
+
+interface GetDefaultValuesFromQueryStringOptions {
+  includeToAddress?: boolean
+  buildUrl?: boolean
+}
+
+export const getDefaultValuesFromQueryString = ({
+  buildUrl = false,
+  includeToAddress = true,
+}: GetDefaultValuesFromQueryStringOptions): Partial<DefaultValues> => {
+  if (typeof window === 'undefined') {
+    return {}
+  }
+
+  if (!buildUrl) {
+    return {}
+  }
+
+  const searchParams = Object.fromEntries(
+    new URLSearchParams(window.location.search)
+  )
+
+  // Prevent using fromToken/toToken params if chain is not selected.
+  ;(['from', 'to'] as const).forEach((key) => {
+    if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
+      delete searchParams[`${key}Token`]
+    }
+  })
+
+  return {
+    ...(Number.isFinite(Number.parseInt(searchParams.fromChain, 10))
+      ? { fromChain: Number.parseInt(searchParams.fromChain, 10) }
+      : {}),
+    ...(Number.isFinite(Number.parseInt(searchParams.toChain, 10))
+      ? { toChain: Number.parseInt(searchParams.toChain, 10) }
+      : {}),
+    ...(searchParams.fromToken ? { fromToken: searchParams.fromToken } : {}),
+    ...(searchParams.toToken ? { toToken: searchParams.toToken } : {}),
+    ...(Number.isFinite(Number.parseFloat(searchParams.fromAmount))
+      ? { fromAmount: formatInputAmount(searchParams.fromAmount) }
+      : {}),
+    ...(includeToAddress && searchParams.toAddress
+      ? { toAddress: searchParams.toAddress }
+      : {}),
+  }
+}

package/src/stores/form/types.ts

@@ -1,6 +1,5 @@
 import type { ContractCall } from '@lifi/sdk'
-import type { StoreApi } from 'zustand'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { StoreApi, UseBoundStore } from 'zustand'
 
 export interface DefaultFieldValues {
   fromChain?: number
@@ -85,9 +84,7 @@ export type FormValuesState = FormProps &
   ValidationProps &
   ValidationActions
 
-export type FormStoreStore = UseBoundStoreWithEqualityFn<
-  StoreApi<FormValuesState>
->
+export type FormStoreStore = UseBoundStore<StoreApi<FormValuesState>>
 
 export interface SetOptions {
   isDirty?: boolean

package/src/stores/header/types.ts

@@ -1,12 +1,12 @@
-import type { StoreApi } from 'zustand'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { StoreApi, UseBoundStore } from 'zustand'
 
-export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>
+export type HeaderStore = UseBoundStore<StoreApi<HeaderState>>
 
 interface HeaderStateBase {
   element?: React.ReactNode | null
   title?: string
   headerHeight: number
+  backAction?: () => void
 }
 
 export interface HeaderState extends HeaderStateBase {
@@ -15,4 +15,6 @@ export interface HeaderState extends HeaderStateBase {
   removeAction(): void
   removeTitle(): void
   setHeaderHeight(headerHeight: number): void
+  setBackAction(action: () => void): void
+  executeBackAction(): void
 }

package/src/stores/header/useHeaderStore.tsx

@@ -84,4 +84,18 @@ const createHeaderStore = () =>
         headerHeight,
       }))
     },
+    setBackAction: (action) => {
+      set(() => ({
+        backAction: action,
+      }))
+    },
+    executeBackAction: () => {
+      const { backAction } = get()
+      if (backAction) {
+        backAction()
+        set(() => ({
+          backAction: undefined,
+        }))
+      }
+    },
   }))

package/src/stores/pinnedTokens/PinnedTokensStore.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, useRef } from 'react'
+import { useShallow } from 'zustand/shallow'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createPinnedTokensStore } from './createPinnedTokensStore.js'
+import type { PinnedTokensState, PinnedTokensStore } from './types.js'
+
+const PinnedTokensStoreContext = createContext<PinnedTokensStore | null>(null)
+
+export const PinnedTokensStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const storeRef = useRef<PinnedTokensStore>(null)
+
+  if (!storeRef.current) {
+    storeRef.current = createPinnedTokensStore(props)
+  }
+
+  return (
+    <PinnedTokensStoreContext.Provider value={storeRef.current}>
+      {children}
+    </PinnedTokensStoreContext.Provider>
+  )
+}
+
+export function usePinnedTokensStore<T>(
+  selector: (store: PinnedTokensState) => T
+) {
+  const useStore = useContext(PinnedTokensStoreContext)
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${PinnedTokensStoreProvider.name}>.`
+    )
+  }
+
+  return useStore(useShallow(selector))
+}

package/src/stores/pinnedTokens/createPinnedTokensStore.ts

@@ -0,0 +1,71 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { PersistStoreProps } from '../types.js'
+import type { PinnedTokensState } from './types.js'
+
+export const createPinnedTokensStore = ({ namePrefix }: PersistStoreProps) =>
+  create<PinnedTokensState>()(
+    persist(
+      (set, get) => ({
+        pinnedTokens: {},
+        pinToken: (chainId: number, tokenAddress: string) => {
+          set((state) => {
+            const normalizedAddress = tokenAddress.toLowerCase()
+            const chainTokens = state.pinnedTokens[chainId] || []
+            if (!chainTokens.includes(normalizedAddress)) {
+              return {
+                pinnedTokens: {
+                  ...state.pinnedTokens,
+                  [chainId]: [...chainTokens, normalizedAddress],
+                },
+              }
+            }
+            return state
+          })
+        },
+        unpinToken: (chainId: number, tokenAddress: string) => {
+          set((state) => {
+            const normalizedAddress = tokenAddress.toLowerCase()
+            const chainTokens = state.pinnedTokens[chainId] || []
+            if (chainTokens.includes(normalizedAddress)) {
+              return {
+                pinnedTokens: {
+                  ...state.pinnedTokens,
+                  [chainId]: chainTokens.filter(
+                    (addr) => addr !== normalizedAddress
+                  ),
+                },
+              }
+            }
+            return state
+          })
+        },
+        isPinned: (chainId: number, tokenAddress: string) => {
+          const normalizedAddress = tokenAddress.toLowerCase()
+          const chainTokens = get().pinnedTokens[chainId] || []
+          return chainTokens.includes(normalizedAddress)
+        },
+        getPinnedTokens: (chainId: number) => {
+          return get().pinnedTokens[chainId] || []
+        },
+        getAllPinnedTokens: () => {
+          const allPinned: Array<{ chainId: number; tokenAddress: string }> = []
+          const pinnedTokens = get().pinnedTokens
+          Object.entries(pinnedTokens).forEach(([chainIdStr, addresses]) => {
+            const chainId = Number.parseInt(chainIdStr, 10)
+            addresses.forEach((address) => {
+              allPinned.push({ chainId, tokenAddress: address })
+            })
+          })
+          return allPinned
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-pinned-tokens`,
+        version: 0,
+        partialize: (state) => ({
+          pinnedTokens: state.pinnedTokens,
+        }),
+      }
+    )
+  )

package/src/stores/pinnedTokens/types.ts

@@ -0,0 +1,20 @@
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+
+export interface PinnedTokensProps {
+  pinnedTokens: Record<number, string[]>
+}
+
+export interface PinnedTokensActions {
+  pinToken: (chainId: number, tokenAddress: string) => void
+  unpinToken: (chainId: number, tokenAddress: string) => void
+  isPinned: (chainId: number, tokenAddress: string) => boolean
+  getPinnedTokens: (chainId: number) => string[]
+  getAllPinnedTokens: () => Array<{ chainId: number; tokenAddress: string }>
+}
+
+export type PinnedTokensState = PinnedTokensProps & PinnedTokensActions
+
+export type PinnedTokensStore = UseBoundStoreWithEqualityFn<
+  StoreApi<PinnedTokensState>
+>

package/src/stores/routes/RouteExecutionStore.tsx

@@ -1,14 +1,11 @@
 import { createContext, useContext, useRef } from 'react'
-import type { StoreApi } from 'zustand'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import { createRouteExecutionStore } from './createRouteExecutionStore.js'
 import type { RouteExecutionState } from './types.js'
 
-type RouteExecutionStore = UseBoundStoreWithEqualityFn<
-  StoreApi<RouteExecutionState>
->
+type RouteExecutionStore = UseBoundStore<StoreApi<RouteExecutionState>>
 
 const RouteExecutionStoreContext = createContext<RouteExecutionStore | null>(
   null

package/src/stores/routes/createRouteExecutionStore.ts

@@ -121,7 +121,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-routes`,
-        version: 2,
+        version: 3,
         partialize: (state) => ({ routes: state.routes }),
         merge: (persistedState: any, currentState: RouteExecutionState) => {
           const state = {
@@ -134,10 +134,9 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
             const oneDay = 1000 * 60 * 60 * 24
             Object.values(state.routes).forEach((routeExecution) => {
               const startedAt =
-                routeExecution?.route.steps
-                  ?.find((step) => step.execution?.status === 'FAILED')
-                  ?.execution?.process.find((process) => process.startedAt)
-                  ?.startedAt ?? 0
+                routeExecution?.route.steps?.find(
+                  (step) => step.execution?.status === 'FAILED'
+                )?.execution?.startedAt ?? 0
               const outdated = startedAt > 0 && currentTime - startedAt > oneDay
               if (routeExecution?.route && outdated) {
                 delete state.routes[routeExecution.route.id]

package/src/stores/routes/useExecutingRoutesIds.ts

@@ -16,8 +16,8 @@ export const useExecutingRoutesIds = () => {
       )
       .sort(
         (a, b) =>
-          (b?.route.steps[0].execution?.process[0]?.startedAt ?? 0) -
-          (a?.route.steps[0].execution?.process[0]?.startedAt ?? 0)
+          (b?.route.steps[0].execution?.startedAt ?? 0) -
+          (a?.route.steps[0].execution?.startedAt ?? 0)
       )
       .map(({ route }) => route.id)
   )

package/src/stores/routes/utils.ts

@@ -1,4 +1,4 @@
-import type { Process, RouteExtended } from '@lifi/sdk'
+import type { ExecutionAction, RouteExtended } from '@lifi/sdk'
 import microdiff from 'microdiff'
 
 export const isRouteDone = (route: RouteExtended) => {
@@ -7,13 +7,13 @@ export const isRouteDone = (route: RouteExtended) => {
 
 export const isRoutePartiallyDone = (route: RouteExtended) => {
   return route.steps.some((step) =>
-    step.execution?.process.some((process) => process.substatus === 'PARTIAL')
+    step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')
   )
 }
 
 export const isRouteRefunded = (route: RouteExtended) => {
   return route.steps.some((step) =>
-    step.execution?.process.some((process) => process.substatus === 'REFUNDED')
+    step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')
   )
 }
 
@@ -31,31 +31,33 @@ export const isRouteActive = (route?: RouteExtended) => {
   return !isDone && !isFailed && alreadyStarted
 }
 
-export const getUpdatedProcess = (
+export const getUpdatedAction = (
   currentRoute: RouteExtended,
   updatedRoute: RouteExtended
-): Process | undefined => {
-  const processDiff = microdiff(currentRoute, updatedRoute).find((diff) =>
-    diff.path.includes('process')
+): ExecutionAction | undefined => {
+  const actionDiff = microdiff(currentRoute, updatedRoute).find((diff) =>
+    diff.path.includes('actions')
   )
-  if (!processDiff) {
+  if (!actionDiff) {
     return undefined
   }
-  // Find process index in the diff array so we can slice the complete rpocess object
-  // e.g. ['steps', 0, 'execution', 'process', 0, 'message']
-  const processDiffIndex = processDiff.path.indexOf('process') + 2
-  const processPathSlice = processDiff.path.slice(0, processDiffIndex)
+  // Find action index in the diff array so we can slice the complete action object
+  // e.g. ['steps', 0, 'execution', 'actions', 0, 'message']
+  const actionDiffIndex = actionDiff.path.indexOf('actions') + 2
+  const actionPathSlice = actionDiff.path.slice(0, actionDiffIndex)
   // Reduce updated route using the diff path to get updated process
-  const process = processPathSlice.reduce(
+  const action = actionPathSlice.reduce(
     (obj, path) => obj[path],
     updatedRoute as any
-  ) as Process
-  return process
+  ) as ExecutionAction
+  return action
 }
 
 export const getSourceTxHash = (route?: RouteExtended) => {
-  const sourceProcess = route?.steps[0].execution?.process
-    .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
-    .find((process) => process.txHash || process.taskId)
-  return sourceProcess?.txHash || sourceProcess?.taskId
+  const sourceAction = route?.steps[0].execution?.actions
+    .filter(
+      (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)
+    )
+    .find((action) => action.txHash || action.taskId)
+  return sourceAction?.txHash || sourceAction?.taskId
 }

package/src/stores/settings/SettingsStore.tsx

@@ -4,13 +4,12 @@ import {
   useContext,
   useRef,
 } from 'react'
-import type { StoreApi } from 'zustand'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import { createSettingsStore } from './createSettingsStore.js'
 import type { SettingsState, SettingsStoreProviderProps } from './types.js'
 
-type SettingsStore = UseBoundStoreWithEqualityFn<StoreApi<SettingsState>>
+type SettingsStore = UseBoundStore<StoreApi<SettingsState>>
 
 const SettingsStoreContext = createContext<SettingsStore | null>(null)
 

package/src/stores/settings/createSettingsStore.ts

@@ -29,6 +29,7 @@ const defaultSettings: SettingsProps = {
   enabledExchanges: [],
   _enabledBridges: {},
   _enabledExchanges: {},
+  smallBalanceThreshold: undefined,
 }
 
 export const createSettingsStore = (config: WidgetConfig) =>
@@ -145,7 +146,7 @@ export const createSettingsStore = (config: WidgetConfig) =>
       }),
       {
         name: 'li.fi-widget-settings',
-        version: 5,
+        version: 6,
         partialize: (state) => {
           const {
             disabledBridges,

package/src/stores/settings/types.ts

@@ -1,7 +1,6 @@
 import type { Order } from '@lifi/sdk'
 import type { PropsWithChildren } from 'react'
-import type { StoreApi } from 'zustand'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import type { LanguageResource } from '../../providers/I18nProvider/types.js'
 import type { SplitSubvariant, WidgetConfig } from '../../types/widget.js'
 
@@ -29,6 +28,7 @@ export interface SettingsProps {
   disabledExchanges: string[]
   enabledExchanges: string[]
   _enabledExchanges: Record<string, boolean>
+  smallBalanceThreshold?: string
 }
 
 export interface SettingsActions {
@@ -61,9 +61,7 @@ export interface SplitSubvariantState {
   setState(state: SplitSubvariant): void
 }
 
-export type SplitSubvariantStore = UseBoundStoreWithEqualityFn<
-  StoreApi<SplitSubvariantState>
->
+export type SplitSubvariantStore = UseBoundStore<StoreApi<SplitSubvariantState>>
 
 export interface SplitSubvariantProps {
   state?: SplitSubvariant

package/src/types/events.ts

@@ -1,4 +1,4 @@
-import type { ChainId, ChainType, Process, Route } from '@lifi/sdk'
+import type { ChainId, ChainType, ExecutionAction, Route } from '@lifi/sdk'
 import type { DefaultValues } from '../stores/form/types.js'
 import type { SettingsProps } from '../stores/settings/types.js'
 import type { NavigationRouteType } from '../utils/navigationRoutes.js'
@@ -26,7 +26,6 @@ export enum WidgetEvent {
   SettingUpdated = 'settingUpdated',
   SourceChainTokenSelected = 'sourceChainTokenSelected',
   TokenSearch = 'tokenSearch',
-  TokensReversed = 'tokensReversed',
   WidgetExpanded = 'widgetExpanded',
 }
 
@@ -49,7 +48,6 @@ export type WidgetEvents = {
   settingUpdated: SettingUpdated
   sourceChainTokenSelected: ChainTokenSelected
   tokenSearch: TokenSearch
-  tokensReversed: TokensReversed
   walletConnected: WalletConnected
   widgetExpanded: boolean
 }
@@ -68,7 +66,7 @@ export type RouteHighValueLossUpdate = {
 
 export type RouteExecutionUpdate = {
   route: Route
-  process: Process
+  action: ExecutionAction
 }
 
 export type RouteSelected = {
@@ -81,13 +79,6 @@ export type TokenSearch = {
   tokens: TokenAmount[]
 }
 
-export type TokensReversed = {
-  fromChainId?: ChainId
-  fromTokenAddress?: string
-  toChainId?: ChainId
-  toTokenAddress?: string
-}
-
 export type ChainTokenSelected = {
   chainId: ChainId
   tokenAddress: string

package/src/types/token.ts

@@ -7,6 +7,7 @@ import type {
 interface TokenFlags {
   featured?: boolean
   popular?: boolean
+  pinned?: boolean
   verified?: boolean
 }