@lifi/widget 0.0.0-preview-6cc63bac

package/src/stores/routes/RouteExecutionStore.tsx

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

package/src/stores/routes/createRouteExecutionStore.ts

@@ -0,0 +1,167 @@
+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 { RouteExecution, RouteExecutionState } from './types.js'
+import { RouteExecutionStatus } from './types.js'
+import {
+  isRouteDone,
+  isRouteFailed,
+  isRoutePartiallyDone,
+  isRouteRefunded,
+} from './utils.js'
+
+export const createRouteExecutionStore = ({
+  namePrefix,
+}: PersistStoreProps): UseBoundStore<StoreApi<RouteExecutionState>> =>
+  create<RouteExecutionState>()(
+    persist(
+      (set, get) => ({
+        routes: {},
+        setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {
+          if (!get().routes[route.id]) {
+            set((state: RouteExecutionState) => {
+              const routes = { ...state.routes }
+              // clean previous idle routes
+              Object.keys(routes)
+                .filter(
+                  (routeId) =>
+                    !observableRouteIds?.includes(routeId) &&
+                    hasEnumFlag(
+                      routes[routeId]!.status,
+                      RouteExecutionStatus.Idle
+                    )
+                )
+                .forEach((routeId) => {
+                  delete routes[routeId]
+                })
+              routes[route.id] = {
+                route,
+                status: RouteExecutionStatus.Idle,
+              }
+              return {
+                routes,
+              }
+            })
+          }
+        },
+        updateRoute: (route: RouteExtended) => {
+          if (get().routes[route.id]) {
+            set((state: RouteExecutionState) => {
+              const updatedState = {
+                routes: {
+                  ...state.routes,
+                  [route.id]: { ...state.routes[route.id]!, route },
+                },
+              }
+              const isFailed = isRouteFailed(route)
+              if (isFailed) {
+                updatedState.routes[route.id]!.status =
+                  RouteExecutionStatus.Failed
+                return updatedState
+              }
+              const isDone = isRouteDone(route)
+              if (isDone) {
+                updatedState.routes[route.id]!.status =
+                  RouteExecutionStatus.Done
+                if (isRoutePartiallyDone(route)) {
+                  updatedState.routes[route.id]!.status |=
+                    RouteExecutionStatus.Partial
+                } else if (isRouteRefunded(route)) {
+                  updatedState.routes[route.id]!.status |=
+                    RouteExecutionStatus.Refunded
+                }
+                return updatedState
+              }
+              const isLoading = route.steps.some((step) => step.execution)
+              if (isLoading) {
+                updatedState.routes[route.id]!.status =
+                  RouteExecutionStatus.Pending
+              }
+              return updatedState
+            })
+          }
+        },
+        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) => {
+              const routes = { ...state.routes }
+              delete routes[routeId]
+              return {
+                routes,
+              }
+            })
+          }
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-widget-routes`,
+        // 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 = {
+            ...currentState,
+            ...persistedState,
+          } as RouteExecutionState
+          try {
+            // 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)
+          }
+          return state
+        },
+      }
+    )
+  )

package/src/stores/routes/types.ts

@@ -0,0 +1,26 @@
+import type { Route, RouteExtended } from '@lifi/sdk'
+
+export interface RouteExecution {
+  route: RouteExtended
+  status: RouteExecutionStatus
+}
+
+export interface RouteExecutionState {
+  routes: Partial<Record<string, RouteExecution>>
+  setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void
+  updateRoute: (route: Route) => void
+  deleteRoute: (routeId: string) => void
+  deleteRoutes: (
+    type: 'completed' | 'active' | 'failed',
+    accountAddresses?: string[]
+  ) => void
+}
+
+export enum RouteExecutionStatus {
+  Idle = 1 << 0,
+  Pending = 1 << 1,
+  Done = 1 << 2,
+  Failed = 1 << 3,
+  Partial = 1 << 4,
+  Refunded = 1 << 5,
+}

package/src/stores/routes/useIntermediateRoutesStore.ts

@@ -0,0 +1,29 @@
+import type { Route } from '@lifi/sdk'
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { create } from 'zustand'
+
+interface IntermediateRoutesState {
+  intermediateRoutes: Record<string, Route[] | undefined>
+  setIntermediateRoutes: (
+    key: readonly unknown[],
+    routes: Route[] | undefined
+  ) => void
+  getIntermediateRoutes: (key: readonly unknown[]) => Route[] | undefined
+}
+
+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

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

package/src/stores/routes/utils.ts

@@ -0,0 +1,63 @@
+import type { ExecutionAction, RouteExtended } from '@lifi/sdk'
+import microdiff from 'microdiff'
+
+export const isRouteDone = (route: RouteExtended): boolean => {
+  return route.steps.every((step) => step.execution?.status === 'DONE')
+}
+
+export const isRoutePartiallyDone = (route: RouteExtended): boolean => {
+  return route.steps.some((step) =>
+    step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')
+  )
+}
+
+export const isRouteRefunded = (route: RouteExtended): boolean => {
+  return route.steps.some((step) =>
+    step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')
+  )
+}
+
+export const isRouteFailed = (route: RouteExtended): boolean => {
+  return route.steps.some((step) => step.execution?.status === 'FAILED')
+}
+
+export const isRouteActive = (route?: RouteExtended): boolean => {
+  if (!route) {
+    return false
+  }
+  const isDone = isRouteDone(route)
+  const isFailed = isRouteFailed(route)
+  const alreadyStarted = route.steps.some((step) => step.execution)
+  return !isDone && !isFailed && alreadyStarted
+}
+
+export const getUpdatedAction = (
+  currentRoute: RouteExtended,
+  updatedRoute: RouteExtended
+): ExecutionAction | undefined => {
+  const actionDiff = microdiff(currentRoute, updatedRoute).find((diff) =>
+    diff.path.includes('actions')
+  )
+  if (!actionDiff) {
+    return undefined
+  }
+  // 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 action = actionPathSlice.reduce(
+    (obj, path) => obj[path],
+    updatedRoute as any
+  ) as ExecutionAction
+  return action
+}
+
+export const getSourceTxHash = (route?: RouteExtended): string | undefined => {
+  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

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  type JSX,
+  type PropsWithChildren,
+  useContext,
+  useRef,
+} from 'react'
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+import { createSettingsStore } from './createSettingsStore.js'
+import type { SettingsState, SettingsStoreProviderProps } from './types.js'
+
+type SettingsStore = UseBoundStore<StoreApi<SettingsState>>
+
+const SettingsStoreContext = createContext<SettingsStore | null>(null)
+
+export const SettingsStoreProvider = ({
+  children,
+  config,
+}: PropsWithChildren<SettingsStoreProviderProps>): JSX.Element => {
+  const storeRef = useRef<SettingsStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createSettingsStore(config)
+  }
+  return (
+    <SettingsStoreContext.Provider value={storeRef.current}>
+      {children}
+    </SettingsStoreContext.Provider>
+  )
+}
+
+export function useSettingsStoreContext(): any {
+  const useStore = useContext(SettingsStoreContext)
+  if (!useStore) {
+    throw new Error(
+      'You forgot to wrap your component in SettingsStoreContext.'
+    )
+  }
+  return useStore
+}
+
+export function useSettingsStore<T>(selector: (state: SettingsState) => T): T {
+  const useStore = useSettingsStoreContext()
+  return useStore(useShallow(selector))
+}

package/src/stores/settings/createSettingsStore.ts

@@ -0,0 +1,219 @@
+/** 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'
+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 { SettingsToolTypes } from './types.js'
+import { getStateValues } from './utils/getStateValues.js'
+
+export const defaultSlippage = undefined
+
+export const defaultConfigurableSettings: Pick<
+  SettingsState,
+  'routePriority' | 'slippage' | 'gasPrice'
+> = {
+  routePriority: 'CHEAPEST',
+  slippage: defaultSlippage,
+  gasPrice: 'normal',
+}
+
+const defaultSettings: SettingsProps = {
+  gasPrice: 'normal',
+  enabledAutoRefuel: true,
+  disabledBridges: [],
+  disabledExchanges: [],
+  enabledBridges: [],
+  enabledExchanges: [],
+  _enabledBridges: {},
+  _enabledExchanges: {},
+  smallBalanceThreshold: undefined,
+}
+
+export const createSettingsStore = (
+  config: WidgetConfig
+): UseBoundStore<StoreApi<SettingsState>> =>
+  create<SettingsState>()(
+    persist(
+      (set, get) => ({
+        ...defaultSettings,
+        setValue: (key, value) =>
+          set(() => ({
+            [key]: value,
+          })),
+        setValues: (values: Partial<SettingsProps>) =>
+          set(() => ({
+            ...values,
+          })),
+        getSettings: () => getStateValues(get()),
+        getValue: (key) => get()[key],
+        initializeTools: (toolType, tools, reset) => {
+          if (!tools.length) {
+            return
+          }
+          set((state) => {
+            const updatedState = { ...state }
+            if (!reset) {
+              // Add new tools
+              tools.forEach((tool) => {
+                if (!Object.hasOwn(updatedState[`_enabled${toolType}`], tool)) {
+                  updatedState[`_enabled${toolType}`][tool] = true
+                }
+              })
+              // Filter tools we no longer have
+              updatedState[`_enabled${toolType}`] = Object.fromEntries(
+                Object.entries(updatedState[`_enabled${toolType}`]).filter(
+                  ([key]) => tools.includes(key)
+                )
+              )
+            } else {
+              tools.forEach((tool) => {
+                updatedState[`_enabled${toolType}`][tool] = true
+              })
+            }
+            const enabledToolKeys = Object.keys(
+              updatedState[`_enabled${toolType}`]
+            )
+            updatedState[`enabled${toolType}`] = enabledToolKeys.filter(
+              (key) => updatedState[`_enabled${toolType}`][key]
+            )
+            updatedState[`disabled${toolType}`] = enabledToolKeys.filter(
+              (key) => !updatedState[`_enabled${toolType}`][key]
+            )
+            return updatedState
+          })
+        },
+        setToolValue: (toolType, tool, value) =>
+          set((state) => {
+            const enabledTools = {
+              ...state[`_enabled${toolType}`],
+              [tool]: value,
+            }
+            const enabledToolKeys = Object.keys(enabledTools)
+            return {
+              [`_enabled${toolType}`]: enabledTools,
+              [`enabled${toolType}`]: enabledToolKeys.filter(
+                (key) => enabledTools[key]
+              ),
+              [`disabled${toolType}`]: enabledToolKeys.filter(
+                (key) => !enabledTools[key]
+              ),
+            }
+          }),
+        toggleToolKeys: (toolType, toolKeys) =>
+          set((state) => {
+            const allKeysInCollectionEnabled = toolKeys.every(
+              (toolKey) => state[`_enabled${toolType}`][toolKey]
+            )
+
+            // then toggle those keys to false
+            const updatedTools = toolKeys.reduce(
+              (accum, toolKey) => {
+                accum[toolKey] = !allKeysInCollectionEnabled
+                return accum
+              },
+              {
+                ...state[`_enabled${toolType}`],
+              }
+            )
+
+            const enableKeys: string[] = []
+            const disabledKeys: string[] = []
+
+            Object.entries(updatedTools).forEach(([key, value]) => {
+              if (value) {
+                enableKeys.push(key)
+              } else {
+                disabledKeys.push(key)
+              }
+            })
+
+            return {
+              [`_enabled${toolType}`]: updatedTools,
+              [`enabled${toolType}`]: enableKeys,
+              [`disabled${toolType}`]: disabledKeys,
+            }
+          }),
+        reset: (bridges, exchanges) => {
+          set(() => ({
+            ...defaultSettings,
+            ...defaultConfigurableSettings,
+          }))
+          get().initializeTools('Bridges', bridges, true)
+          get().initializeTools('Exchanges', exchanges, true)
+          return { ...get() }
+        },
+      }),
+      {
+        name: 'li.fi-widget-settings',
+        version: 6,
+        partialize: (state) => {
+          const {
+            disabledBridges,
+            disabledExchanges,
+            enabledBridges,
+            enabledExchanges,
+            ...partializedState
+          } = state
+          return partializedState
+        },
+        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]
+              )
+              state[`disabled${toolType}`] = enabledToolKeys.filter(
+                (key) => !persistedState[`_enabled${toolType}`][key]
+              )
+            }
+          })
+          return state
+        },
+        migrate: () => ({}),
+        onRehydrateStorage: () => {
+          const initializeLanguageSettings = async (
+            state: SettingsState,
+            initialLanguage?: string
+          ) => {
+            const customLanguages = Object.keys(
+              config?.languageResources || {}
+            ).filter((key) => !allLanguages.includes(key as LanguageKey))
+            if (
+              initialLanguage &&
+              // Custom language resources and English are added statically.
+              initialLanguage !== 'en' &&
+              !customLanguages.includes(initialLanguage)
+            ) {
+              await loadLocale(
+                initialLanguage as LanguageKey,
+                config?.languageResources?.[initialLanguage as LanguageKey]
+              ).then((languageResource) => {
+                state.setValues({
+                  language: initialLanguage,
+                  languageCache: languageResource,
+                })
+              })
+            }
+          }
+          return (state?: SettingsState) => {
+            // Preload translations (from existing translation files)
+            if (state) {
+              // NB: State always exists unless there is any error
+              initializeLanguageSettings(
+                state,
+                state.getValue('language') || config?.languages?.default
+              )
+            }
+          }
+        },
+      }
+    )
+  )