@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,107 @@
+import type { ContractCall } from '@lifi/sdk'
+import type { StoreApi, UseBoundStore } from 'zustand'
+
+export interface DefaultFieldValues {
+  fromChain?: number
+  fromToken?: string
+  toChain?: number
+  toToken?: string
+  toAddress?: string
+  fromAmount: string
+  toAmount: string
+}
+
+export interface DefaultValues extends DefaultFieldValues {
+  contractCalls?: ContractCall[]
+  tokenSearchFilter: string
+}
+
+export type GenericFormValue = string | number | ContractCall[] | undefined
+export interface FormValueControl<T> {
+  isTouched: boolean
+  isDirty: boolean
+  value: T
+}
+
+export type FormValues = {
+  [Property in keyof DefaultValues]: FormValueControl<DefaultValues[Property]>
+}
+
+export type FormFieldNames = keyof FormValues
+export type ExtractValueType<T> =
+  T extends FormValueControl<infer U> ? U : never
+export type FormFieldArray<T extends FormFieldNames[]> = {
+  [K in keyof T]: ExtractValueType<FormValues[T[K]]>
+}
+
+export type TouchedFields = { [K in FormFieldNames]?: boolean }
+
+type ValidationFn = (value: any) => Promise<boolean | string>
+export interface ValidationProps {
+  isValid: boolean
+  isValidating: boolean
+  errors: {
+    [K in FormFieldNames]?: string
+  }
+  validation: {
+    [K in FormFieldNames]?: ValidationFn
+  }
+}
+
+export interface ValidationActions {
+  addFieldValidation: (name: FormFieldNames, validationFn: ValidationFn) => void
+  triggerFieldValidation: (name: FormFieldNames) => Promise<boolean>
+  clearErrors: (name: FormFieldNames) => void
+}
+
+export interface FormProps {
+  defaultValues: FormValues
+  userValues: FormValues
+  touchedFields: { [K in FormFieldNames]?: boolean }
+}
+
+export interface ResetOptions {
+  defaultValue?: GenericFormValue
+}
+
+export interface FormActions {
+  setDefaultValues: (formValues: DefaultValues) => void
+  setUserAndDefaultValues: (formValues: Partial<DefaultValues>) => void
+  isTouched: (fieldName: FormFieldNames) => boolean
+  isDirty: (fieldName: FormFieldNames) => boolean
+  setAsTouched: (fieldName: FormFieldNames) => void
+  resetField: (fieldName: FormFieldNames, resetOptions?: ResetOptions) => void
+  setFieldValue: (
+    fieldName: FormFieldNames,
+    value: GenericFormValue,
+    options?: SetOptions
+  ) => void
+  getFieldValues: <T extends FormFieldNames[]>(...names: T) => FormFieldArray<T>
+}
+
+export type FormValuesState = FormProps &
+  FormActions &
+  ValidationProps &
+  ValidationActions
+
+export type FormStoreStore = UseBoundStore<StoreApi<FormValuesState>>
+
+export interface SetOptions {
+  isDirty?: boolean
+  isTouched?: boolean
+}
+
+export type FormType = 'from' | 'to'
+
+export interface FormTypeProps {
+  formType: FormType
+}
+
+export const FormKeyHelper = {
+  getChainKey: (formType: FormType): 'fromChain' | 'toChain' =>
+    `${formType}Chain`,
+  getTokenKey: (formType: FormType): 'fromToken' | 'toToken' =>
+    `${formType}Token`,
+  getAmountKey: (formType: FormType): 'fromAmount' | 'toAmount' =>
+    `${formType}Amount`,
+}

package/src/stores/form/useClearAmountFields.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react'
+import { useFieldActions } from './useFieldActions.js'
+
+export const useClearAmountFields = (): (() => void) => {
+  const { setFieldValue } = useFieldActions()
+  return useCallback(() => {
+    setFieldValue('fromAmount', '')
+    setFieldValue('toAmount', '')
+  }, [setFieldValue])
+}

package/src/stores/form/useFieldActions.ts

@@ -0,0 +1,93 @@
+import { useCallback } from 'react'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import type { FormFieldChanged } from '../../types/events.js'
+import { WidgetEvent } from '../../types/events.js'
+import type {
+  DefaultValues,
+  FormActions,
+  FormFieldNames,
+  GenericFormValue,
+  SetOptions,
+} from './types.js'
+import { useFormStore } from './useFormStore.js'
+
+export const useFieldActions = (): FormActions => {
+  const emitter = useWidgetEvents()
+  const actions = useFormStore<FormActions>((store) => ({
+    getFieldValues: store.getFieldValues,
+    isTouched: store.isTouched,
+    isDirty: store.isDirty,
+    resetField: store.resetField,
+    setAsTouched: store.setAsTouched,
+    setDefaultValues: store.setDefaultValues,
+    setFieldValue: store.setFieldValue,
+    setUserAndDefaultValues: store.setUserAndDefaultValues,
+  }))
+
+  const setFieldValueWithEmittedEvents = useCallback(
+    (
+      fieldName: FormFieldNames,
+      newValue: GenericFormValue,
+      options?: SetOptions
+    ) => {
+      const oldValue = actions.getFieldValues(fieldName)[0]
+
+      actions.setFieldValue(fieldName, newValue, options)
+
+      if (newValue !== oldValue) {
+        emitter.emit(WidgetEvent.FormFieldChanged, {
+          fieldName,
+          newValue,
+          oldValue,
+        } as FormFieldChanged)
+      }
+    },
+    [actions, emitter]
+  )
+
+  const setUserAndDefaultValuesWithEmittedEvents = useCallback(
+    (formValues: Partial<DefaultValues>) => {
+      const formValuesKeys = Object.keys(formValues) as FormFieldNames[]
+
+      const changedValues = formValuesKeys.reduce(
+        (accum, fieldName) => {
+          const oldValue = actions.getFieldValues(fieldName)[0]
+          const newValue = formValues[fieldName]
+
+          if (newValue !== oldValue) {
+            accum.push({ fieldName, newValue, oldValue })
+          }
+
+          return accum
+        },
+        [] as {
+          fieldName: FormFieldNames
+          newValue: GenericFormValue
+          oldValue: GenericFormValue
+        }[]
+      )
+
+      actions.setUserAndDefaultValues(formValues)
+
+      changedValues.forEach(({ fieldName, newValue, oldValue }) => {
+        emitter.emit(WidgetEvent.FormFieldChanged, {
+          fieldName,
+          newValue,
+          oldValue,
+        } as FormFieldChanged)
+      })
+    },
+    [actions, emitter]
+  )
+
+  return {
+    getFieldValues: actions.getFieldValues,
+    isTouched: actions.isTouched,
+    isDirty: actions.isDirty,
+    resetField: actions.resetField,
+    setAsTouched: actions.setAsTouched,
+    setDefaultValues: actions.setDefaultValues,
+    setFieldValue: setFieldValueWithEmittedEvents,
+    setUserAndDefaultValues: setUserAndDefaultValuesWithEmittedEvents,
+  }
+}

package/src/stores/form/useFieldValues.ts

@@ -0,0 +1,14 @@
+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
+): FormFieldArray<T> => {
+  const values = useFormStore(
+    (store) =>
+      names.map((name) => store.userValues[name]?.value) as FormFieldArray<T>
+  )
+
+  return values
+}

package/src/stores/form/useFormRef.ts

@@ -0,0 +1,76 @@
+import { useImperativeHandle } from 'react'
+import { widgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { formDefaultValues } from '../../stores/form/createFormStore.js'
+import type { FormFieldChanged } from '../../types/events.js'
+import { WidgetEvent } from '../../types/events.js'
+import type { FormRef } from '../../types/widget.js'
+import type {
+  FormFieldNames,
+  FormStoreStore,
+  GenericFormValue,
+} from './types.js'
+
+export const useFormRef = (
+  formStore: FormStoreStore,
+  formRef?: FormRef
+): void => {
+  const { setSelectedBookmark } = useBookmarkActions()
+
+  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) => {
+        const isToAddressObj = typeof value !== 'string'
+
+        const address =
+          (isToAddressObj ? value?.address : value) ||
+          formDefaultValues.toAddress
+
+        // 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
+
+        const oldValue = formStore
+          .getState()
+          .getFieldValues(fieldName as FormFieldNames)[0]
+
+        formStore
+          .getState()
+          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
+
+        if (sanitizedValue !== oldValue) {
+          widgetEvents.emit(WidgetEvent.FormFieldChanged, {
+            fieldName,
+            newValue: sanitizedValue,
+            oldValue,
+          } as FormFieldChanged)
+        }
+      },
+    }
+  }, [formStore, setSelectedBookmark])
+}

package/src/stores/form/useFormStore.ts

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

package/src/stores/form/useTouchedFields.ts

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

package/src/stores/header/types.ts

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

package/src/stores/header/useHeaderStore.tsx

@@ -0,0 +1,103 @@
+import { createContext, useContext, useRef } from 'react'
+import { create } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+import type { PersistStoreProviderProps } from '../types.js'
+import type { HeaderState, HeaderStore } from './types.js'
+
+const HeaderStoreContext = createContext<HeaderStore | null>(null)
+
+export function HeaderStoreProvider({
+  children,
+}: PersistStoreProviderProps): any {
+  const storeRef = useRef<HeaderStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createHeaderStore()
+  }
+  return (
+    <HeaderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </HeaderStoreContext.Provider>
+  )
+}
+
+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): T {
+  const useStore = useHeaderStoreContext()
+  return useStore(useShallow(selector))
+}
+
+// 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(): any {
+  const headerHeight = useHeaderStore((state) => state.headerHeight)
+
+  return {
+    headerHeight,
+  }
+}
+
+export function useSetHeaderHeight(): any {
+  const setHeaderHeight = useHeaderStore((state) => state.setHeaderHeight)
+
+  return {
+    setHeaderHeight,
+  }
+}
+
+const createHeaderStore = () =>
+  create<HeaderState>((set, get) => ({
+    headerHeight: 108, // default header 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,
+      }))
+    },
+    setBackAction: (action) => {
+      set(() => ({
+        backAction: action,
+      }))
+    },
+    executeBackAction: () => {
+      const { backAction } = get()
+      if (backAction) {
+        backAction()
+        set(() => ({
+          backAction: undefined,
+        }))
+      }
+    },
+  }))

package/src/stores/inputMode/useInputModeStore.ts

@@ -0,0 +1,31 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { create } from 'zustand'
+import type { FormTypeProps } from '../form/types.js'
+
+type InputMode = 'amount' | 'price'
+
+interface InputModeState {
+  inputMode: Record<'from' | 'to', InputMode>
+  setInputMode: (formType: FormTypeProps['formType'], mode: InputMode) => void
+  toggleInputMode: (formType: FormTypeProps['formType']) => void
+}
+
+export const useInputModeStore: UseBoundStore<StoreApi<InputModeState>> =
+  create<InputModeState>((set, get) => ({
+    inputMode: {
+      from: 'amount',
+      to: 'amount',
+    },
+    setInputMode: (formType, mode) =>
+      set((state) => ({
+        inputMode: {
+          ...state.inputMode,
+          [formType]: mode,
+        },
+      })),
+    toggleInputMode: (formType) => {
+      const currentMode = get().inputMode[formType]
+      const newMode = currentMode === 'amount' ? 'price' : 'amount'
+      get().setInputMode(formType, newMode)
+    },
+  }))

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
+): 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,74 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+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): UseBoundStore<StoreApi<PinnedTokensState>> =>
+  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>
+>