@lifi/widget 4.0.0-beta.1 → 4.0.0-beta.10

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,28 +126,6 @@ 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`,
@@ -129,19 +137,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,7 +53,7 @@ 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(
       (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)

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) => ({

package/src/stores/settings/types.ts

@@ -48,14 +48,6 @@ export interface SettingsActions {
 
 export type SettingsState = SettingsProps & SettingsActions
 
-interface SendToWalletState {
-  showSendToWallet: boolean
-}
-
-export interface SendToWalletStore extends SendToWalletState {
-  setSendToWallet(value: boolean): void
-}
-
 export interface SplitSubvariantState {
   state?: SplitSubvariant
   setState(state: SplitSubvariant): void

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,

package/src/stores/settings/useSplitSubvariantStore.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef } from 'react'
+import { createContext, type JSX, useContext, useRef } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import type {
@@ -23,7 +23,7 @@ const shouldRecreateStore = (
 export function SplitSubvariantStoreProvider({
   children,
   ...props
-}: SplitSubvariantProviderProps) {
+}: SplitSubvariantProviderProps): JSX.Element {
   const storeRef = useRef<SplitSubvariantStore>(null)
   if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
     storeRef.current = createSplitSubvariantStore(props)

package/src/themes/createTheme.ts

@@ -1,11 +1,15 @@
-import type { CSSObject, Shape, SimplePaletteColorOptions } from '@mui/material'
+import type {
+  CSSObject,
+  Shape,
+  SimplePaletteColorOptions,
+  Theme,
+} from '@mui/material'
 import {
   alpha,
   buttonClasses,
   createTheme as createMuiTheme,
   css,
   darken,
-  dialogActionsClasses,
   keyframes,
   lighten,
   tabsClasses,
@@ -33,7 +37,7 @@ const enterKeyframe = keyframes`
   }
 `
 
-export const createTheme = (widgetTheme: WidgetTheme = {}) => {
+export const createTheme = (widgetTheme: WidgetTheme = {}): Theme => {
   const configuredPaletteLight =
     widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette
   const configuredPaletteDark =
@@ -117,11 +121,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
         },
       },
     },
-    container: {
-      // Set height to 'fit-content' if not explicitly set
-      height: 'fit-content',
-      ...widgetTheme.container,
-    },
+    container: widgetTheme.container,
     routesContainer: widgetTheme.routesContainer,
     chainSidebarContainer: widgetTheme.chainSidebarContainer,
     header: widgetTheme.header,
@@ -341,9 +341,6 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
           }),
           sizeMedium: ({ ownerState }) => ({
             padding: '10px 14px',
-            [`.${dialogActionsClasses.root} &`]: {
-              padding: '6px 12px',
-            },
             ...getStyleOverrides(
               'MuiButton',
               'sizeMedium',

package/src/themes/utils.ts

@@ -7,7 +7,7 @@ export const getStyleOverrides = (
   styleOverrideProp: string,
   theme: WidgetTheme,
   ownerState?: any
-) => {
+): any => {
   const component = theme.components?.[componentName]
   const property = (component?.styleOverrides as any)?.[styleOverrideProp]
 

package/src/utils/chainType.ts

@@ -1,9 +1,10 @@
 import { ChainId, ChainType } from '@lifi/sdk'
 
-export const defaultChainIdsByType = {
+export const defaultChainIdsByType: Record<ChainType, ChainId> = {
   [ChainType.EVM]: ChainId.ETH,
   [ChainType.SVM]: ChainId.SOL,
   [ChainType.UTXO]: ChainId.BTC,
   [ChainType.MVM]: ChainId.SUI,
   [ChainType.TVM]: ChainId.TRN,
+  [ChainType.STL]: ChainId.XLM,
 }

package/src/utils/compactNumberFormatter.ts

@@ -26,7 +26,7 @@ function toSubscript(n: number): string {
 export const compactNumberFormatter = (
   lng: string | undefined,
   options: any
-) => {
+): ((value: any) => string) => {
   const formatter = new Intl.NumberFormat(lng, {
     notation: 'standard',
     roundingPriority: 'morePrecision',

package/src/utils/converters.ts

@@ -66,7 +66,7 @@ const buildActionsFromTxHistory = (tx: FullStatusData): ExecutionAction[] => {
 export const buildRouteFromTxHistory = (
   tx: FullStatusData,
   tools?: ToolsResponse
-) => {
+): RouteExecution | undefined => {
   const sending = tx.sending as ExtendedTransactionInfo
   const receiving = tx.receiving as ExtendedTransactionInfo
 
@@ -203,7 +203,9 @@ export const buildRouteFromTxHistory = (
           integrator: tx.metadata?.integrator ?? '',
           execution: {
             status: 'DONE', // can be FAILED
-            startedAt: sending.timestamp ?? Date.now(),
+            startedAt: sending.timestamp
+              ? sending.timestamp * 1000
+              : Date.now(),
             actions: buildActionsFromTxHistory(tx),
             fromAmount: sending.amount,
             toAmount: receiving.amount,

package/src/utils/currencyExtendedFormatter.ts

@@ -1,7 +1,7 @@
 export const currencyExtendedFormatter = (
   lng: string | undefined,
   options: any
-) => {
+): ((value: any) => string) => {
   const formatter = new Intl.NumberFormat(lng, {
     ...options,
     style: 'currency',

package/src/utils/deepEqual.ts

@@ -1,6 +1,6 @@
 /** Forked from https://github.com/epoberezkin/fast-deep-equal */
 
-export function deepEqual(a: any, b: any) {
+export function deepEqual(a: any, b: any): boolean {
   if (a === b) {
     return true
   }

package/src/utils/deepMerge.ts

@@ -1,6 +1,6 @@
-const isObject = (obj: any) => obj && typeof obj === 'object'
+const isObject = (obj: any): boolean => obj && typeof obj === 'object'
 
-export const deepMerge = (...objects: any[]) => {
+export const deepMerge = (...objects: any[]): any => {
   return objects.reduce((prev, obj) => {
     for (const key in obj) {
       if (isObject(prev[key]) && isObject(obj[key])) {

package/src/utils/elements.ts

@@ -5,26 +5,28 @@ export enum ElementId {
   ScrollableContainer = 'widget-scrollable-container',
 }
 
-export const createElementId = (ElementId: ElementId, elementId: string) =>
-  elementId ? `${ElementId}-${elementId}` : ElementId
+export const createElementId = (
+  ElementId: ElementId,
+  elementId: string
+): string => (elementId ? `${ElementId}-${elementId}` : ElementId)
 
 // NOTE: The getter functions here are often used with code that can be effected by css changes in the
 //   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
 
-export const getAppContainer = (elementId: string) =>
+export const getAppContainer = (elementId: string): HTMLElement | null =>
   document.getElementById(
     createElementId(ElementId.AppExpandedContainer, elementId)
   )
 
-export const getRelativeContainer = (elementId: string) =>
+export const getRelativeContainer = (elementId: string): HTMLElement | null =>
   document.getElementById(
     createElementId(ElementId.RelativeContainer, elementId)
   )
 
-export const getScrollableContainer = (elementId: string) =>
+export const getScrollableContainer = (elementId: string): HTMLElement | null =>
   document.getElementById(
     createElementId(ElementId.ScrollableContainer, elementId)
   )
 
-export const getHeaderElement = (elementId: string) =>
+export const getHeaderElement = (elementId: string): HTMLElement | null =>
   document.getElementById(createElementId(ElementId.Header, elementId))

package/src/utils/enum.ts

@@ -1,2 +1,4 @@
-export const hasEnumFlag = <T extends number | bigint>(flags: T, flag: T) =>
-  (flags & flag) === flag
+export const hasEnumFlag = <T extends number | bigint>(
+  flags: T,
+  flag: T
+): boolean => (flags & flag) === flag

package/src/utils/fees.ts

@@ -9,8 +9,14 @@ export interface FeesBreakdown {
 
 export const getAccumulatedFeeCostsBreakdown = (
   route: RouteExtended,
-  included = false
-) => {
+  included: boolean = false
+): {
+  gasCosts: FeesBreakdown[]
+  feeCosts: FeesBreakdown[]
+  gasCostUSD: number
+  feeCostUSD: number
+  combinedFeesUSD: number
+} => {
   const gasCosts = getGasCostsBreakdown(route)
   const feeCosts = getFeeCostsBreakdown(route, included)
   const gasCostUSD = gasCosts.reduce(

package/src/utils/format.ts

@@ -10,7 +10,7 @@ export const usdDecimals = 2
 export function formatTokenAmount(
   amount: bigint | undefined,
   decimals: number
-) {
+): string {
   const formattedAmount = amount ? formatUnits(amount, decimals) : '0'
   const parsedAmount = Number.parseFloat(formattedAmount)
   if (!parsedAmount || Number.isNaN(Number(formattedAmount))) {
@@ -59,8 +59,8 @@ export function formatSlippage(
 export function formatInputAmount(
   amount: string,
   decimals: number | null = null,
-  returnInitial = false
-) {
+  returnInitial: boolean = false
+): string {
   if (!amount) {
     return amount
   }
@@ -116,7 +116,7 @@ export function formatTokenPrice(
   amount?: string | bigint,
   price?: string,
   decimals?: number
-) {
+): number {
   if (!amount || !price) {
     return 0
   }
@@ -146,7 +146,10 @@ const formatter = new Intl.NumberFormat('en', {
 /**
  * Convert price value to token amount
  */
-export function priceToTokenAmount(priceValue: string, priceUSD?: string) {
+export function priceToTokenAmount(
+  priceValue: string,
+  priceUSD?: string
+): string {
   if (!priceValue || !priceUSD) {
     return '0'
   }

package/src/utils/getErrorMessage.ts

@@ -12,7 +12,7 @@ export function getErrorMessage(
   getChainById: (chainId: number) => EVMChain | undefined,
   step: LiFiStepExtended,
   failedAction?: ExecutionAction
-) {
+): { title: string; message: string } {
   const error = failedAction?.error
   if (!error) {
     return {

package/src/utils/getPriceImpact.ts

@@ -13,7 +13,7 @@ export const getPriceImpact = ({
   toToken,
   fromAmount,
   toAmount,
-}: GetPriceImpactProps) => {
+}: GetPriceImpactProps): number => {
   const fromTokenPrice = formatTokenPrice(
     fromAmount,
     fromToken.priceUSD,

package/src/utils/input.ts

@@ -2,7 +2,7 @@ export const fitInputText = (
   maxFontSize: number,
   minFontSize: number,
   element: HTMLElement
-) => {
+): void => {
   if (!element) {
     return
   }