@lifi/widget 3.7.0 → 3.8.0-beta.1

package/src/stores/form/useFieldController.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+import type { FormFieldNames } from './types.js'
+import { useFieldActions } from './useFieldActions.js'
+import { useFieldValues } from './useFieldValues.js'
+
+interface UseFieldControllerProps {
+  name: FormFieldNames
+}
+
+export const useFieldController = ({ name }: UseFieldControllerProps) => {
+  const [fieldValue] = useFieldValues(name)
+  const { setFieldValue, setAsTouched } = useFieldActions()
+
+  const onChange = useCallback(
+    (newValue: string | number | undefined) => {
+      setFieldValue(name, newValue, { isDirty: true, isTouched: true })
+    },
+    [name, setFieldValue]
+  )
+
+  const onBlur = useCallback(() => {
+    setAsTouched(name)
+  }, [name, setAsTouched])
+
+  return {
+    onChange,
+    onBlur,
+    name,
+    value: fieldValue,
+  }
+}

package/src/stores/form/useFieldValues.ts

@@ -0,0 +1,14 @@
+import { shallow } from 'zustand/shallow'
+import type { FormFieldArray, FormFieldNames } from './types.js'
+import { useFormStore } from './useFormStore.js'
+
+// We should return a strongly-typed array based on the specific field names we pass to the function.
+export const useFieldValues = <T extends FormFieldNames[]>(...names: T) => {
+  const values = useFormStore(
+    (store) =>
+      names.map((name) => store.userValues[name]?.value) as FormFieldArray<T>,
+    shallow
+  )
+
+  return values
+}

package/src/stores/form/useFormRef.ts

@@ -0,0 +1,73 @@
+import { useImperativeHandle } from 'react'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { formDefaultValues } from '../../stores/form/createFormStore.js'
+import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import type { FormRef } from '../../types/widget.js'
+import { HiddenUI } from '../../types/widget.js'
+import type { FormStoreStore, GenericFormValue } from './types.js'
+
+export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
+  const { setSendToWallet } = useSendToWalletActions()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { hiddenUI } = useWidgetConfig()
+
+  useImperativeHandle(
+    formRef,
+    () => {
+      const sanitizeValue: {
+        [key: string]: (value: any) => GenericFormValue
+      } = {
+        fromAmount: (value) =>
+          (typeof value === 'number' ? value?.toPrecision() : value) ||
+          formDefaultValues.fromAmount,
+        toAmount: (value) =>
+          (typeof value === 'number' ? value?.toPrecision() : value) ||
+          formDefaultValues.toAmount,
+        toAddress: (value) => {
+          if (hiddenUI?.includes(HiddenUI.ToAddress)) {
+            return formDefaultValues.toAddress
+          }
+
+          const isToAddressObj = typeof value !== 'string'
+
+          const address =
+            (isToAddressObj ? value?.address : value) ||
+            formDefaultValues.toAddress
+
+          // sets the send to wallet button state to be open
+          // if there is an address to display
+          if (address) {
+            setSendToWallet(address)
+          }
+
+          // we can assume that the toAddress has been passed as ToAddress object
+          // and display it accordingly - this ensures that if a name is included
+          // that it is displayed in the Send To Wallet form field correctly
+          if (isToAddressObj) {
+            setSelectedBookmark(value)
+          }
+
+          return address
+        },
+      }
+
+      return {
+        setFieldValue: (fieldName, value, options) => {
+          const sanitizedValue = (
+            sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value
+          ) as GenericFormValue
+
+          const fieldValueOptions = options?.setUrlSearchParam
+            ? { isTouched: options?.setUrlSearchParam }
+            : undefined
+
+          formStore
+            .getState()
+            .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
+        },
+      }
+    },
+    [formStore, hiddenUI, setSendToWallet, setSelectedBookmark]
+  )
+}

package/src/stores/form/useFormStore.ts

@@ -0,0 +1,17 @@
+import { useContext } from 'react'
+import { shallow } from 'zustand/shallow'
+import { FormStoreContext } from './FormStoreContext.js'
+import type { FormValuesState } from './types.js'
+
+export function useFormStore<T>(
+  selector: (state: FormValuesState) => T,
+  equalityFn = shallow
+): T {
+  const useStore = useContext(FormStoreContext)
+
+  if (!useStore) {
+    throw new Error('You forgot to wrap your component in <FormStoreProvider>.')
+  }
+
+  return useStore(selector, equalityFn)
+}

package/src/stores/form/useTouchedFields.ts

@@ -0,0 +1,8 @@
+import { shallow } from 'zustand/shallow'
+import { useFormStore } from './useFormStore.js'
+
+export const useTouchedFields = () => {
+  const touchedFields = useFormStore((store) => store.touchedFields, shallow)
+
+  return touchedFields
+}

package/src/stores/form/useValidation.ts

@@ -0,0 +1,15 @@
+import { shallow } from 'zustand/shallow'
+import type { ValidationProps } from './types.js'
+import { useFormStore } from './useFormStore.js'
+export const useValidation = (): Omit<ValidationProps, 'validation'> => {
+  const [isValid, isValidating, errors] = useFormStore(
+    (store) => [store.isValid, store.isValidating, store.errors],
+    shallow
+  )
+
+  return {
+    isValid,
+    isValidating,
+    errors,
+  }
+}

package/src/stores/form/useValidationActions.ts

@@ -0,0 +1,16 @@
+import { shallow } from 'zustand/shallow'
+import type { ValidationActions } from './types.js'
+import { useFormStore } from './useFormStore.js'
+
+export const useValidationActions = () => {
+  const actions = useFormStore<ValidationActions>(
+    (store) => ({
+      addFieldValidation: store.addFieldValidation,
+      triggerFieldValidation: store.triggerFieldValidation,
+      clearErrors: store.clearErrors,
+    }),
+    shallow
+  )
+
+  return actions
+}

package/src/stores/header/types.ts

@@ -0,0 +1,18 @@
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+
+export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>
+
+export interface HeaderStateBase {
+  element?: React.ReactNode | null
+  title?: string
+  headerHeight: number
+}
+
+export interface HeaderState extends HeaderStateBase {
+  setAction(element?: React.ReactNode | null): () => void
+  setTitle(title?: string): () => void
+  removeAction(): void
+  removeTitle(): void
+  setHeaderHeight(headerHeight: number): void
+}

package/src/stores/header/useHeaderStore.tsx

@@ -0,0 +1,99 @@
+import { createContext, useContext, useRef } from 'react'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { PersistStoreProps, PersistStoreProviderProps } from '../types.js'
+import type { HeaderState, HeaderStore } from './types.js'
+
+export const HeaderStoreContext = createContext<HeaderStore | null>(null)
+
+export function HeaderStoreProvider({ children }: PersistStoreProviderProps) {
+  const storeRef = useRef<HeaderStore>()
+  if (!storeRef.current) {
+    storeRef.current = createHeaderStore()
+  }
+  return (
+    <HeaderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </HeaderStoreContext.Provider>
+  )
+}
+
+export function useHeaderStoreContext() {
+  const useStore = useContext(HeaderStoreContext)
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${HeaderStoreProvider.name}>.`
+    )
+  }
+  return useStore
+}
+
+export function useHeaderStore<T>(
+  selector: (state: HeaderState) => T,
+  equalityCheck?: (objA: T, objB: T) => boolean
+): T {
+  const useStore = useHeaderStoreContext()
+  return useStore(selector, equalityCheck)
+}
+
+// We use fixed position on the header when Widget is in Full Height layout.
+// We do this to get it to work like the sticky header does in the other layout modes.
+// As the header is position fixed its not in the document flow anymore.
+// To prevent the remaining page content from appearing behind the header we need to
+// pass the headers height so that the position of the page content can be adjusted
+export function useHeaderHeight() {
+  const [headerHeight] = useHeaderStore(
+    (state) => [state.headerHeight],
+    shallow
+  )
+
+  return {
+    headerHeight,
+  }
+}
+
+export function useSetHeaderHeight() {
+  const [setHeaderHeight] = useHeaderStore(
+    (state) => [state.setHeaderHeight],
+    shallow
+  )
+
+  return {
+    setHeaderHeight,
+  }
+}
+
+export const createHeaderStore = () =>
+  createWithEqualityFn<HeaderState>(
+    (set, get) => ({
+      headerHeight: 108, // a basic default height
+      setAction: (element) => {
+        set(() => ({
+          element,
+        }))
+        return get().removeAction
+      },
+      setTitle: (title) => {
+        set(() => ({
+          title,
+        }))
+        return get().removeTitle
+      },
+      removeAction: () => {
+        set(() => ({
+          element: null,
+        }))
+      },
+      removeTitle: () => {
+        set(() => ({
+          title: undefined,
+        }))
+      },
+      setHeaderHeight: (headerHeight) => {
+        set(() => ({
+          headerHeight,
+        }))
+      },
+    }),
+    Object.is
+  )

package/src/stores/routes/RouteExecutionStore.tsx

@@ -0,0 +1,46 @@
+import { createContext, useContext, useRef } from 'react'
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createRouteExecutionStore } from './createRouteExecutionStore.js'
+import type { RouteExecutionState } from './types.js'
+
+export type RouteExecutionStore = UseBoundStoreWithEqualityFn<
+  StoreApi<RouteExecutionState>
+>
+
+export const RouteExecutionStoreContext =
+  createContext<RouteExecutionStore | null>(null)
+
+export function RouteExecutionStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const storeRef = useRef<RouteExecutionStore>()
+  if (!storeRef.current) {
+    storeRef.current = createRouteExecutionStore(props)
+  }
+  return (
+    <RouteExecutionStoreContext.Provider value={storeRef.current}>
+      {children}
+    </RouteExecutionStoreContext.Provider>
+  )
+}
+
+export function useRouteExecutionStoreContext() {
+  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,
+  equalityFn?: (left: T, right: T) => boolean
+): T {
+  const useStore = useRouteExecutionStoreContext()
+  return useStore(selector, equalityFn)
+}

package/src/stores/routes/createRouteExecutionStore.ts

@@ -0,0 +1,164 @@
+import type { Route, RouteExtended } from '@lifi/sdk'
+import type { StateCreator } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { createWithEqualityFn } from 'zustand/traditional'
+import { hasEnumFlag } from '../../utils/enum.js'
+import type { PersistStoreProps } from '../types.js'
+import type { RouteExecutionState } from './types.js'
+import { RouteExecutionStatus } from './types.js'
+import {
+  isRouteDone,
+  isRouteFailed,
+  isRoutePartiallyDone,
+  isRouteRefunded,
+} from './utils.js'
+
+export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<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 and done routes
+              Object.keys(routes)
+                .filter(
+                  (routeId) =>
+                    (!observableRouteIds?.includes(routeId) &&
+                      hasEnumFlag(
+                        routes[routeId]!.status,
+                        RouteExecutionStatus.Idle
+                      )) ||
+                    hasEnumFlag(
+                      routes[routeId]!.status,
+                      RouteExecutionStatus.Done
+                    )
+                )
+                .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
+            })
+          }
+        },
+        restartRoute: (routeId: string) => {
+          if (get().routes[routeId]) {
+            set((state: RouteExecutionState) => ({
+              routes: {
+                ...state.routes,
+                [routeId]: {
+                  ...state.routes[routeId]!,
+                  status: RouteExecutionStatus.Pending,
+                },
+              },
+            }))
+          }
+        },
+        deleteRoute: (routeId: string) => {
+          if (get().routes[routeId]) {
+            set((state: RouteExecutionState) => {
+              const routes = { ...state.routes }
+              delete routes[routeId]
+              return {
+                routes,
+              }
+            })
+          }
+        },
+        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: 2,
+        partialize: (state) => ({ routes: state.routes }),
+        merge: (persistedState: any, currentState: RouteExecutionState) => {
+          const state = {
+            ...currentState,
+            ...persistedState,
+          } as RouteExecutionState
+          try {
+            // Remove failed transactions from history after 1 day
+            const currentTime = new Date().getTime()
+            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
+              const outdated = startedAt > 0 && currentTime - startedAt > oneDay
+              if (routeExecution?.route && outdated) {
+                delete state.routes[routeExecution.route.id]
+              }
+            })
+          } catch (error) {
+            console.error(error)
+          }
+          return state
+        },
+      }
+    ) as StateCreator<RouteExecutionState, [], [], RouteExecutionState>,
+    Object.is
+  )

package/src/stores/routes/types.ts

@@ -0,0 +1,24 @@
+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
+  restartRoute: (routeId: string) => void
+  deleteRoute: (routeId: string) => void
+  deleteRoutes: (type: 'completed' | 'active') => 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/useExecutingRoutesIds.ts

@@ -0,0 +1,27 @@
+import { useAccount } from '@lifi/wallet-management'
+import { shallow } from 'zustand/shallow'
+import { useRouteExecutionStore } from './RouteExecutionStore.js'
+import type { RouteExecution } from './types.js'
+import { RouteExecutionStatus } from './types.js'
+
+export const useExecutingRoutesIds = () => {
+  const { accounts } = useAccount()
+  const accountAddresses = accounts.map((account) => account.address)
+  return useRouteExecutionStore(
+    (state) =>
+      (Object.values(state.routes) as RouteExecution[])
+        .filter(
+          (item) =>
+            accountAddresses.includes(item.route.fromAddress) &&
+            (item.status === RouteExecutionStatus.Pending ||
+              item.status === RouteExecutionStatus.Failed)
+        )
+        .sort(
+          (a, b) =>
+            (b?.route.steps[0].execution?.process[0].startedAt ?? 0) -
+            (a?.route.steps[0].execution?.process[0].startedAt ?? 0)
+        )
+        .map(({ route }) => route.id),
+    shallow
+  )
+}

package/src/stores/routes/useSetExecutableRoute.ts

@@ -0,0 +1,5 @@
+import { useRouteExecutionStore } from './RouteExecutionStore.js'
+
+export const useSetExecutableRoute = () => {
+  return useRouteExecutionStore((state) => state.setExecutableRoute)
+}

package/src/stores/routes/utils.ts

@@ -0,0 +1,61 @@
+import type { Process, RouteExtended } from '@lifi/sdk'
+import microdiff from 'microdiff'
+
+export const isRouteDone = (route: RouteExtended) => {
+  return route.steps.every((step) => step.execution?.status === 'DONE')
+}
+
+export const isRoutePartiallyDone = (route: RouteExtended) => {
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'PARTIAL')
+  )
+}
+
+export const isRouteRefunded = (route: RouteExtended) => {
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'REFUNDED')
+  )
+}
+
+export const isRouteFailed = (route: RouteExtended) => {
+  return route.steps.some((step) => step.execution?.status === 'FAILED')
+}
+
+export const isRouteActive = (route?: RouteExtended) => {
+  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 getUpdatedProcess = (
+  currentRoute: RouteExtended,
+  updatedRoute: RouteExtended
+): Process | undefined => {
+  const processDiff = microdiff(currentRoute, updatedRoute).find((diff) =>
+    diff.path.includes('process')
+  )
+  if (!processDiff) {
+    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.findIndex((path) => path === 'process') + 2
+  const processPathSlice = processDiff.path.slice(0, processDiffIndex)
+  // Reduce updated route using the diff path to get updated process
+  const process = processPathSlice.reduce(
+    (obj, path) => obj[path],
+    updatedRoute as any
+  ) as Process
+  return process
+}
+
+export const getSourceTxHash = (route?: RouteExtended) => {
+  return route?.steps[0].execution?.process
+    .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+    .find((process) => process.txHash)?.txHash
+}