@lifi/widget 4.0.0-beta.9 → 4.0.0

package/src/stores/routes/createRouteExecutionStore.ts

@@ -1,9 +1,10 @@
 import type { Route, RouteExtended } from '@lifi/sdk'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { hasEnumFlag } from '../../utils/enum.js'
 import type { PersistStoreProps } from '../types.js'
-import type { RouteExecutionState } from './types.js'
+import type { RouteExecution, RouteExecutionState } from './types.js'
 import { RouteExecutionStatus } from './types.js'
 import {
   isRouteDone,
@@ -12,7 +13,9 @@ import {
   isRouteRefunded,
 } from './utils.js'
 
-export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
+export const createRouteExecutionStore = ({
+  namePrefix,
+}: PersistStoreProps): UseBoundStore<StoreApi<RouteExecutionState>> =>
   create<RouteExecutionState>()(
     persist(
       (set, get) => ({
@@ -21,18 +24,14 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
           if (!get().routes[route.id]) {
             set((state: RouteExecutionState) => {
               const routes = { ...state.routes }
-              // clean previous idle and done routes
+              // clean previous idle routes
               Object.keys(routes)
                 .filter(
                   (routeId) =>
-                    (!observableRouteIds?.includes(routeId) &&
-                      hasEnumFlag(
-                        routes[routeId]!.status,
-                        RouteExecutionStatus.Idle
-                      )) ||
+                    !observableRouteIds?.includes(routeId) &&
                     hasEnumFlag(
                       routes[routeId]!.status,
-                      RouteExecutionStatus.Done
+                      RouteExecutionStatus.Idle
                     )
                 )
                 .forEach((routeId) => {
@@ -85,6 +84,37 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
             })
           }
         },
+        deleteRoutes: (type, accountAddresses) =>
+          set((state: RouteExecutionState) => {
+            const routes = { ...state.routes }
+            Object.keys(routes)
+              .filter((routeId) => {
+                const route = routes[routeId]
+                if (
+                  accountAddresses &&
+                  !accountAddresses.includes(route?.route.fromAddress ?? '')
+                ) {
+                  return false
+                }
+                return type === 'completed'
+                  ? hasEnumFlag(route?.status ?? 0, RouteExecutionStatus.Done)
+                  : type === 'failed'
+                    ? hasEnumFlag(
+                        route?.status ?? 0,
+                        RouteExecutionStatus.Failed
+                      )
+                    : !hasEnumFlag(
+                        route?.status ?? 0,
+                        RouteExecutionStatus.Done
+                      )
+              })
+              .forEach((routeId) => {
+                delete routes[routeId]
+              })
+            return {
+              routes,
+            }
+          }),
         deleteRoute: (routeId: string) => {
           if (get().routes[routeId]) {
             set((state: RouteExecutionState) => {
@@ -96,32 +126,13 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
             })
           }
         },
-        deleteRoutes: (type) =>
-          set((state: RouteExecutionState) => {
-            const routes = { ...state.routes }
-            Object.keys(routes)
-              .filter((routeId) =>
-                type === 'completed'
-                  ? hasEnumFlag(
-                      routes[routeId]?.status ?? 0,
-                      RouteExecutionStatus.Done
-                    )
-                  : !hasEnumFlag(
-                      routes[routeId]?.status ?? 0,
-                      RouteExecutionStatus.Done
-                    )
-              )
-              .forEach((routeId) => {
-                delete routes[routeId]
-              })
-            return {
-              routes,
-            }
-          }),
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-routes`,
-        version: 3,
+        // Bump version on breaking changes to the stored structure.
+        version: 4,
+        // Clear stored routes on any version mismatch to avoid errors from incompatible data shapes.
+        migrate: () => ({ routes: {} }),
         partialize: (state) => ({ routes: state.routes }),
         merge: (persistedState: any, currentState: RouteExecutionState) => {
           const state = {
@@ -129,19 +140,23 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
             ...persistedState,
           } as RouteExecutionState
           try {
-            // Remove failed transactions from history after 1 day
-            const currentTime = Date.now()
-            const oneDay = 1000 * 60 * 60 * 24
-            Object.values(state.routes).forEach((routeExecution) => {
-              const startedAt =
-                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]
+            // Keep only the most recent 100 routes, evicting the oldest when the
+            // limit is exceeded.
+            const maxStoredRoutes = 100
+            const allRoutes = Object.values(state.routes) as RouteExecution[]
+            const storedRoutes = allRoutes
+              .sort(
+                (a, b) =>
+                  (b.route.steps[0]?.execution?.startedAt ?? 0) -
+                  (a.route.steps[0]?.execution?.startedAt ?? 0)
+              )
+              .slice(0, maxStoredRoutes)
+            const keepIds = new Set(storedRoutes.map((r) => r.route.id))
+            for (const id of Object.keys(state.routes)) {
+              if (!keepIds.has(id)) {
+                delete state.routes[id]
               }
-            })
+            }
           } catch (error) {
             console.error(error)
           }

package/src/stores/routes/types.ts

@@ -10,7 +10,10 @@ export interface RouteExecutionState {
   setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void
   updateRoute: (route: Route) => void
   deleteRoute: (routeId: string) => void
-  deleteRoutes: (type: 'completed' | 'active') => void
+  deleteRoutes: (
+    type: 'completed' | 'active' | 'failed',
+    accountAddresses?: string[]
+  ) => void
 }
 
 export enum RouteExecutionStatus {

package/src/stores/routes/useIntermediateRoutesStore.ts

@@ -1,4 +1,5 @@
 import type { Route } from '@lifi/sdk'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 
 interface IntermediateRoutesState {
@@ -10,19 +11,19 @@ interface IntermediateRoutesState {
   getIntermediateRoutes: (key: readonly unknown[]) => Route[] | undefined
 }
 
-export const useIntermediateRoutesStore = create<IntermediateRoutesState>(
-  (set, get) => ({
-    intermediateRoutes: {},
-    setIntermediateRoutes: (key, routes) => {
-      const stringKey = JSON.stringify(key)
-      // Create a new state with only the current key
-      const newRoutesByKey: Record<string, Route[] | undefined> = {}
-      newRoutesByKey[stringKey] = routes
-      set({ intermediateRoutes: newRoutesByKey })
-    },
-    getIntermediateRoutes: (key) => {
-      const stringKey = JSON.stringify(key)
-      return get().intermediateRoutes[stringKey]
-    },
-  })
-)
+export const useIntermediateRoutesStore: UseBoundStore<
+  StoreApi<IntermediateRoutesState>
+> = create<IntermediateRoutesState>((set, get) => ({
+  intermediateRoutes: {},
+  setIntermediateRoutes: (key, routes) => {
+    const stringKey = JSON.stringify(key)
+    // Create a new state with only the current key
+    const newRoutesByKey: Record<string, Route[] | undefined> = {}
+    newRoutesByKey[stringKey] = routes
+    set({ intermediateRoutes: newRoutesByKey })
+  },
+  getIntermediateRoutes: (key) => {
+    const stringKey = JSON.stringify(key)
+    return get().intermediateRoutes[stringKey]
+  },
+}))

package/src/stores/routes/useRouteExecutionIndicator.ts

@@ -0,0 +1,43 @@
+import { useAccount } from '@lifi/wallet-management'
+import { useCallback, useMemo } from 'react'
+import { useRouteExecutionStore } from './RouteExecutionStore.js'
+import type { RouteExecution, RouteExecutionState } from './types.js'
+import { RouteExecutionStatus } from './types.js'
+
+export type RouteExecutionIndicator = {
+  failed: boolean
+  active: boolean
+}
+
+const isRecentTransaction = (route: RouteExecution): boolean => {
+  const startedAt = route.route.steps[0]?.execution?.startedAt ?? 0
+  return startedAt > 0 && Date.now() - startedAt < 1000 * 60 * 60 * 24 // 1 day
+}
+
+export const useRouteExecutionIndicator = (): RouteExecutionIndicator => {
+  const { accounts } = useAccount()
+  const accountAddresses = useMemo(
+    () => accounts.map((account) => account.address),
+    [accounts]
+  )
+  const selector = useCallback(
+    (state: RouteExecutionState): RouteExecutionIndicator => {
+      const routes = Object.values(state.routes) as RouteExecution[]
+      const recentOwnedRoutes = routes.filter(
+        (route) =>
+          accountAddresses.includes(route.route.fromAddress) &&
+          isRecentTransaction(route)
+      )
+      return {
+        failed: recentOwnedRoutes.some(
+          (r) => r.status === RouteExecutionStatus.Failed
+        ),
+        active: recentOwnedRoutes.some(
+          (r) => r.status === RouteExecutionStatus.Pending
+        ),
+      }
+    },
+    [accountAddresses]
+  )
+  return useRouteExecutionStore(selector)
+}

package/src/stores/routes/useSetExecutableRoute.ts

@@ -1,5 +1,7 @@
 import { useRouteExecutionStore } from './RouteExecutionStore.js'
+import type { RouteExecutionState } from './types.js'
 
-export const useSetExecutableRoute = () => {
-  return useRouteExecutionStore((state) => state.setExecutableRoute)
-}
+export const useSetExecutableRoute =
+  (): RouteExecutionState['setExecutableRoute'] => {
+    return useRouteExecutionStore((state) => state.setExecutableRoute)
+  }

package/src/stores/routes/utils.ts

@@ -1,27 +1,27 @@
 import type { ExecutionAction, RouteExtended } from '@lifi/sdk'
 import microdiff from 'microdiff'
 
-export const isRouteDone = (route: RouteExtended) => {
+export const isRouteDone = (route: RouteExtended): boolean => {
   return route.steps.every((step) => step.execution?.status === 'DONE')
 }
 
-export const isRoutePartiallyDone = (route: RouteExtended) => {
+export const isRoutePartiallyDone = (route: RouteExtended): boolean => {
   return route.steps.some((step) =>
     step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')
   )
 }
 
-export const isRouteRefunded = (route: RouteExtended) => {
+export const isRouteRefunded = (route: RouteExtended): boolean => {
   return route.steps.some((step) =>
     step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')
   )
 }
 
-export const isRouteFailed = (route: RouteExtended) => {
+export const isRouteFailed = (route: RouteExtended): boolean => {
   return route.steps.some((step) => step.execution?.status === 'FAILED')
 }
 
-export const isRouteActive = (route?: RouteExtended) => {
+export const isRouteActive = (route?: RouteExtended): boolean => {
   if (!route) {
     return false
   }
@@ -53,9 +53,9 @@ export const getUpdatedAction = (
   return action
 }
 
-export const getSourceTxHash = (route?: RouteExtended) => {
+export const getSourceTxHash = (route?: RouteExtended): string | undefined => {
   const sourceAction = route?.steps[0].execution?.actions
-    .filter(
+    ?.filter(
       (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)
     )
     .find((action) => action.txHash || action.taskId)

package/src/stores/settings/SettingsStore.tsx

@@ -1,5 +1,6 @@
 import {
   createContext,
+  type JSX,
   type PropsWithChildren,
   useContext,
   useRef,
@@ -16,7 +17,7 @@ const SettingsStoreContext = createContext<SettingsStore | null>(null)
 export const SettingsStoreProvider = ({
   children,
   config,
-}: PropsWithChildren<SettingsStoreProviderProps>) => {
+}: PropsWithChildren<SettingsStoreProviderProps>): JSX.Element => {
   const storeRef = useRef<SettingsStore>(null)
   if (!storeRef.current) {
     storeRef.current = createSettingsStore(config)
@@ -28,7 +29,7 @@ export const SettingsStoreProvider = ({
   )
 }
 
-export function useSettingsStoreContext() {
+export function useSettingsStoreContext(): any {
   const useStore = useContext(SettingsStoreContext)
   if (!useStore) {
     throw new Error(

package/src/stores/settings/createSettingsStore.ts

@@ -1,4 +1,5 @@
 /** biome-ignore-all lint/correctness/noUnusedVariables: allowed in this store */
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { allLanguages } from '../../providers/I18nProvider/constants.js'
@@ -32,7 +33,9 @@ const defaultSettings: SettingsProps = {
   smallBalanceThreshold: undefined,
 }
 
-export const createSettingsStore = (config: WidgetConfig) =>
+export const createSettingsStore = (
+  config: WidgetConfig
+): UseBoundStore<StoreApi<SettingsState>> =>
   create<SettingsState>()(
     persist(
       (set, get) => ({
@@ -174,15 +177,7 @@ export const createSettingsStore = (config: WidgetConfig) =>
           })
           return state
         },
-        migrate: (persistedState: any, version) => {
-          if (version === 1) {
-            persistedState.slippage = defaultConfigurableSettings.slippage
-          }
-          if (version <= 3) {
-            persistedState.routePriority = 'CHEAPEST'
-          }
-          return persistedState as SettingsState
-        },
+        migrate: () => ({}),
         onRehydrateStorage: () => {
           const initializeLanguageSettings = async (
             state: SettingsState,

package/src/stores/settings/types.ts

@@ -2,7 +2,7 @@ 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 { SplitSubvariant, WidgetConfig } from '../../types/widget.js'
+import type { SplitMode, WidgetConfig } from '../../types/widget.js'
 
 export type ValueSetter<S> = <K extends keyof S>(
   key: K,
@@ -48,27 +48,18 @@ export interface SettingsActions {
 
 export type SettingsState = SettingsProps & SettingsActions
 
-interface SendToWalletState {
-  showSendToWallet: boolean
+export interface SplitModeState {
+  state?: SplitMode
+  setState(state: SplitMode): void
 }
 
-export interface SendToWalletStore extends SendToWalletState {
-  setSendToWallet(value: boolean): void
-}
-
-export interface SplitSubvariantState {
-  state?: SplitSubvariant
-  setState(state: SplitSubvariant): void
-}
-
-export type SplitSubvariantStore = UseBoundStore<StoreApi<SplitSubvariantState>>
+export type SplitModeStore = UseBoundStore<StoreApi<SplitModeState>>
 
-export interface SplitSubvariantProps {
-  state?: SplitSubvariant
+export interface SplitModeProps {
+  state?: SplitMode
 }
 
-export type SplitSubvariantProviderProps =
-  PropsWithChildren<SplitSubvariantProps>
+export type SplitModeProviderProps = PropsWithChildren<SplitModeProps>
 
 export interface SettingsStoreProviderProps {
   config: WidgetConfig

package/src/stores/settings/useSettingsActions.ts

@@ -42,7 +42,18 @@ const emitEventOnChange = <T extends (...args: any[]) => any>(
   }
 }
 
-export const useSettingsActions = () => {
+export const useSettingsActions = (): {
+  setValue: ValueSetter<SettingsProps>
+  setValues: (values: Partial<SettingsProps>) => void
+  setDefaultSettings: (config?: WidgetConfig) => void
+  resetSettings: (bridges: string[], exchanges: string[]) => void
+  setToolValue: (
+    toolType: SettingsToolType,
+    tool: string,
+    value: boolean
+  ) => void
+  toggleToolKeys: (toolType: SettingsToolType, toolKeys: string[]) => void
+} => {
   const emitter = useWidgetEvents()
   const actions = useSettingsStore((state) => ({
     setValue: state.setValue,
@@ -77,11 +88,8 @@ export const useSettingsActions = () => {
       const routePriority = actions.getValue('routePriority')
       const gasPrice = actions.getValue('gasPrice')
 
-      const defaultSlippage =
-        (config?.slippage || config?.sdkConfig?.routeOptions?.slippage || 0) *
-        100
-      const defaultRoutePriority =
-        config?.routePriority || config?.sdkConfig?.routeOptions?.order
+      const defaultSlippage = (config?.slippage || 0) * 100
+      const defaultRoutePriority = config?.routePriority
 
       defaultConfigurableSettings.slippage = (
         defaultSlippage || defaultConfigurableSettings.slippage

package/src/stores/settings/useSplitModeStore.tsx

@@ -0,0 +1,58 @@
+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,
+      }))
+    },
+  }))

package/src/themes/azureLight.ts

@@ -40,14 +40,14 @@ export const azureLightTheme: WidgetTheme = {
     fontFamily: 'Inter, sans-serif',
   },
   container: {
-    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+    filter: 'drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.08))',
     borderRadius: '16px',
   },
   components: {
     MuiCard: {
       defaultProps: { variant: 'filled' },
     },
-    // Used only for 'split' subvariant and can be safely removed if not used
+    // Used only for 'split' mode and can be safely removed if not used
     MuiNavigationTabs: {
       styleOverrides: {
         root: {