@lifi/widget 3.7.0 → 3.8.0-beta.1

package/src/providers/WalletProvider/UTXOProvider.tsx

@@ -0,0 +1,26 @@
+import { ChainType } from '@lifi/sdk'
+import { BigmiContext } from '@lifi/wallet-management'
+import { type FC, type PropsWithChildren, useContext } from 'react'
+import { isItemAllowed } from '../../utils/item.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { UTXOBaseProvider } from './UTXOBaseProvider.js'
+import { UTXOExternalContext } from './UTXOExternalContext.js'
+
+export function useInBigmiContext(): boolean {
+  const { chains } = useWidgetConfig()
+  const context = useContext(BigmiContext)
+
+  return Boolean(context) && isItemAllowed(ChainType.UTXO, chains?.types)
+}
+
+export const UTXOProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inBigmiContext = useInBigmiContext()
+
+  return inBigmiContext ? (
+    <UTXOExternalContext.Provider value={inBigmiContext}>
+      {children}
+    </UTXOExternalContext.Provider>
+  ) : (
+    <UTXOBaseProvider>{children}</UTXOBaseProvider>
+  )
+}

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -0,0 +1,36 @@
+import type { WalletManagementConfig } from '@lifi/wallet-management'
+import { WalletManagementProvider } from '@lifi/wallet-management'
+import { type FC, type PropsWithChildren, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { EVMProvider } from './EVMProvider.js'
+import { SDKProviders } from './SDKProviders.js'
+import { SVMProvider } from './SVMProvider.js'
+import { UTXOProvider } from './UTXOProvider.js'
+
+export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <EVMProvider>
+      <SVMProvider>
+        <UTXOProvider>
+          <SDKProviders />
+          <WalletMenuProvider>{children}</WalletMenuProvider>
+        </UTXOProvider>
+      </SVMProvider>
+    </EVMProvider>
+  )
+}
+
+export const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { walletConfig } = useWidgetConfig()
+  const { i18n } = useTranslation()
+
+  const config: WalletManagementConfig = useMemo(() => {
+    return { locale: i18n.resolvedLanguage as never, ...walletConfig }
+  }, [i18n.resolvedLanguage, walletConfig])
+  return (
+    <WalletManagementProvider config={config}>
+      {children}
+    </WalletManagementProvider>
+  )
+}

package/src/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -0,0 +1,36 @@
+import { ChainType } from '@lifi/sdk'
+import { useContext, useMemo } from 'react'
+import { EVMExternalContext } from './EVMExternalContext.js'
+import { SVMExternalContext } from './SVMExternalContext.js'
+import { UTXOExternalContext } from './UTXOExternalContext.js'
+
+interface ExternalWalletProvider {
+  hasExternalProvider: boolean
+  availableChainTypes: ChainType[]
+}
+
+export function useHasExternalWalletProvider(): ExternalWalletProvider {
+  const hasExternalEVMContext = useContext(EVMExternalContext)
+  const hasExternalSVMContext = useContext(SVMExternalContext)
+  const hasExternalUTXOContext = useContext(UTXOExternalContext)
+
+  const providers = useMemo(() => {
+    const providers: ChainType[] = []
+    if (hasExternalEVMContext) {
+      providers.push(ChainType.EVM)
+    }
+    if (hasExternalSVMContext) {
+      providers.push(ChainType.SVM)
+    }
+    if (hasExternalUTXOContext) {
+      providers.push(ChainType.UTXO)
+    }
+    return providers
+  }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext])
+
+  return {
+    hasExternalProvider:
+      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
+    availableChainTypes: providers,
+  }
+}

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,76 @@
+import { type SDKConfig, config, createConfig } from '@lifi/sdk'
+import { createContext, useContext, useId, useMemo } from 'react'
+import { version } from '../../config/version.js'
+import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js'
+import type { WidgetContextProps, WidgetProviderProps } from './types.js'
+
+const initialContext: WidgetContextProps = {
+  elementId: '',
+  integrator: '',
+}
+
+const WidgetContext = createContext<WidgetContextProps>(initialContext)
+
+export const useWidgetConfig = (): WidgetContextProps =>
+  useContext(WidgetContext)
+
+let sdkInitialized = false
+
+export const WidgetProvider: React.FC<
+  React.PropsWithChildren<WidgetProviderProps>
+> = ({ children, config: widgetConfig }) => {
+  const elementId = useId()
+
+  if (!widgetConfig?.integrator) {
+    throw new Error('Required property "integrator" is missing.')
+  }
+
+  const value = useMemo((): WidgetContextProps => {
+    try {
+      // Create widget configuration object
+      const value = {
+        ...widgetConfig,
+        elementId,
+      } as WidgetContextProps
+
+      // Set default settings for widget settings store
+      setDefaultSettings(value)
+
+      // Configure SDK
+      const _config: SDKConfig = {
+        ...widgetConfig.sdkConfig,
+        apiKey: widgetConfig.apiKey,
+        integrator: widgetConfig.integrator ?? window?.location.hostname,
+        routeOptions: {
+          fee: widgetConfig.feeConfig?.fee || widgetConfig.fee,
+          referrer: widgetConfig.referrer,
+          order: widgetConfig.routePriority,
+          slippage: widgetConfig.slippage,
+          ...widgetConfig.sdkConfig?.routeOptions,
+        },
+        disableVersionCheck: true,
+        widgetVersion: version,
+        // preloadChains: false,
+        // debug: true,
+      }
+      if (!sdkInitialized) {
+        createConfig(_config)
+        sdkInitialized = true
+      } else {
+        config.set(_config)
+      }
+
+      return value
+    } catch (e) {
+      console.warn(e)
+      return {
+        ...widgetConfig,
+        elementId,
+        integrator: widgetConfig.integrator,
+      }
+    }
+  }, [elementId, widgetConfig])
+  return (
+    <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
+  )
+}

package/src/providers/WidgetProvider/types.ts

@@ -0,0 +1,9 @@
+import type { WidgetConfig } from '../../types/widget.js'
+
+export type WidgetContextProps = WidgetConfig & {
+  elementId: string
+}
+
+export interface WidgetProviderProps {
+  config?: WidgetConfig
+}

package/src/providers/WidgetProvider/utils.ts

@@ -0,0 +1,26 @@
+import type { WidgetConfig } from '../../types/widget.js'
+import { getChainTypeFromAddress } from '../../utils/chainType.js'
+
+export const attemptToFindMatchingToAddressInConfig = (
+  address: string,
+  config: WidgetConfig
+) => {
+  if (config.toAddress && config.toAddress.address === address) {
+    return config.toAddress
+  }
+
+  if (config.toAddresses?.length) {
+    const matchingToAddress = config.toAddresses.find(
+      (toAddress) => toAddress.address === address
+    )
+
+    if (matchingToAddress) {
+      return matchingToAddress
+    }
+  }
+
+  return {
+    address: address,
+    chainType: getChainTypeFromAddress(address),
+  }
+}

package/src/stores/StoreProvider.tsx

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react'
+import type { WidgetConfigProps } from '../types/widget.js'
+import { BookmarkStoreProvider } from './bookmarks/BookmarkStore.js'
+import { ChainOrderStoreProvider } from './chains/ChainOrderStore.js'
+import { FormStoreProvider } from './form/FormStore.js'
+import { HeaderStoreProvider } from './header/useHeaderStore.js'
+import { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js'
+import { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore.js'
+
+export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+  formRef,
+}) => {
+  return (
+    <SplitSubvariantStoreProvider
+      state={
+        config.subvariant === 'split'
+          ? config.subvariantOptions?.split || 'swap'
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+          <FormStoreProvider formRef={formRef}>
+            <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+              <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                {children}
+              </RouteExecutionStoreProvider>
+            </ChainOrderStoreProvider>
+          </FormStoreProvider>
+        </BookmarkStoreProvider>
+      </HeaderStoreProvider>
+    </SplitSubvariantStoreProvider>
+  )
+}

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useRef } from 'react'
+import { shallow } from 'zustand/shallow'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createBookmarksStore } from './createBookmarkStore.js'
+import type { BookmarkState, BookmarkStore } from './types.js'
+
+export const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
+
+export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const { toAddress } = useWidgetConfig()
+  const storeRef = useRef<BookmarkStore>()
+
+  if (!storeRef.current) {
+    storeRef.current = createBookmarksStore({ ...props, toAddress })
+  }
+
+  return (
+    <BookmarkStoreContext.Provider value={storeRef.current}>
+      {children}
+    </BookmarkStoreContext.Provider>
+  )
+}
+
+export function useBookmarkStore<T>(
+  selector: (store: BookmarkState) => T,
+  equalityFunction = shallow
+) {
+  const useStore = useContext(BookmarkStoreContext)
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${BookmarkStoreProvider.name}>.`
+    )
+  }
+
+  return useStore(selector, equalityFunction)
+}

package/src/stores/bookmarks/createBookmarkStore.ts

@@ -0,0 +1,81 @@
+import type { StateCreator } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { ToAddress } from '../../types/widget.js'
+import type { PersistStoreProps } from '../types.js'
+import type { BookmarkState } from './types.js'
+
+const recentWalletsLimit = 10
+
+interface PersistBookmarkProps extends PersistStoreProps {
+  toAddress?: ToAddress
+}
+export const createBookmarksStore = ({
+  namePrefix,
+  toAddress,
+}: PersistBookmarkProps) =>
+  createWithEqualityFn<BookmarkState>(
+    persist(
+      (set, get) => ({
+        selectedBookmark: toAddress,
+        bookmarks: [],
+        recentWallets: [],
+        getBookmark: (address) =>
+          get().bookmarks.find((bookmark) => bookmark.address === address),
+        addBookmark: (bookmark) => {
+          set((state) => ({
+            bookmarks: [bookmark, ...state.bookmarks],
+          }))
+        },
+        removeBookmark: (address) => {
+          set((state) => ({
+            bookmarks: state.bookmarks.filter(
+              (storedBookmark) => storedBookmark.address !== address
+            ),
+          }))
+        },
+        getSelectedBookmark: () => get().selectedBookmark,
+        setSelectedBookmark: (bookmark) => {
+          set((_state) => ({
+            selectedBookmark: bookmark,
+          }))
+        },
+        addRecentWallet: (bookmark) => {
+          set((state) => ({
+            recentWallets: [
+              bookmark,
+              ...state.recentWallets.filter(
+                (recentWallet) => recentWallet.address !== bookmark.address
+              ),
+            ].slice(0, recentWalletsLimit),
+          }))
+        },
+        removeRecentWallet: (address) => {
+          set((state) => ({
+            recentWallets: state.recentWallets.filter(
+              (storedRecent) => storedRecent.address !== address
+            ),
+          }))
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-bookmarks`,
+        version: 0,
+        partialize: (state) => ({
+          bookmarks: state.bookmarks,
+          recentWallets: state.recentWallets,
+        }),
+        onRehydrateStorage: () => {
+          return (state) => {
+            if (state && toAddress && !toAddress.name) {
+              const existingBookmark = state.getBookmark(toAddress.address)
+              if (existingBookmark) {
+                state.setSelectedBookmark(existingBookmark)
+              }
+            }
+          }
+        },
+      }
+    ) as StateCreator<BookmarkState, [], [], BookmarkState>,
+    Object.is
+  )

package/src/stores/bookmarks/types.ts

@@ -0,0 +1,27 @@
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { ToAddress } from '../../types/widget.js'
+
+export interface Bookmark extends ToAddress {
+  isConnectedAccount?: boolean
+}
+
+export interface BookmarkProps {
+  selectedBookmark?: Bookmark
+  bookmarks: Bookmark[]
+  recentWallets: Bookmark[]
+}
+
+export interface BookmarkActions {
+  getBookmark: (address: string) => Bookmark | undefined
+  addBookmark: (bookmark: Bookmark) => void
+  removeBookmark: (address: string) => void
+  setSelectedBookmark: (bookmark?: Bookmark) => void
+  getSelectedBookmark: () => Bookmark | undefined
+  addRecentWallet: (bookmark: Bookmark) => void
+  removeRecentWallet: (address: string) => void
+}
+
+export type BookmarkState = BookmarkProps & BookmarkActions
+
+export type BookmarkStore = UseBoundStoreWithEqualityFn<StoreApi<BookmarkState>>

package/src/stores/bookmarks/useBookmarkActions.ts

@@ -0,0 +1,20 @@
+import { shallow } from 'zustand/shallow'
+import { useBookmarkStore } from './BookmarkStore.js'
+import type { BookmarkActions } from './types.js'
+
+export const useBookmarkActions = () => {
+  const actions = useBookmarkStore<BookmarkActions>(
+    (store) => ({
+      getBookmark: store.getBookmark,
+      addBookmark: store.addBookmark,
+      removeBookmark: store.removeBookmark,
+      setSelectedBookmark: store.setSelectedBookmark,
+      getSelectedBookmark: store.getSelectedBookmark,
+      addRecentWallet: store.addRecentWallet,
+      removeRecentWallet: store.removeRecentWallet,
+    }),
+    shallow
+  )
+
+  return actions
+}

package/src/stores/bookmarks/useBookmarks.ts

@@ -0,0 +1,16 @@
+import { shallow } from 'zustand/shallow'
+import { useBookmarkStore } from './BookmarkStore.js'
+import type { BookmarkProps } from './types.js'
+
+export const useBookmarks = (): BookmarkProps => {
+  const [bookmarks, selectedBookmark, recentWallets] = useBookmarkStore(
+    (store) => [store.bookmarks, store.selectedBookmark, store.recentWallets],
+    shallow
+  )
+
+  return {
+    bookmarks,
+    selectedBookmark,
+    recentWallets,
+  }
+}

package/src/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useEffect, useRef } from 'react'
+import type { StoreApi } from 'zustand'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import { useChains } from '../../hooks/useChains.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { isItemAllowed } from '../../utils/item.js'
+import type { FormType } from '../form/types.js'
+import { useFieldActions } from '../form/useFieldActions.js'
+import type { PersistStoreProviderProps } from '../types.js'
+import { createChainOrderStore } from './createChainOrderStore.js'
+import type { ChainOrderState } from './types.js'
+
+export type ChainOrderStore = UseBoundStoreWithEqualityFn<
+  StoreApi<ChainOrderState>
+>
+
+export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
+  null
+)
+
+export function ChainOrderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const { chains: configChains } = useWidgetConfig()
+  const storeRef = useRef<ChainOrderStore>()
+  const { chains } = useChains()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore(props)
+  }
+
+  useEffect(() => {
+    if (chains) {
+      ;(['from', 'to'] as FormType[]).forEach((key) => {
+        const filteredChains = configChains?.[key]
+          ? chains.filter((chain) => isItemAllowed(chain.id, configChains[key]))
+          : chains
+        const chainOrder = storeRef.current?.getState().initializeChains(
+          filteredChains.map((chain) => chain.id),
+          key
+        )
+        if (chainOrder) {
+          const [chainValue] = getFieldValues(`${key}Chain`)
+          if (!chainValue) {
+            setFieldValue(`${key}Chain`, chainOrder[0])
+          }
+        }
+      })
+    }
+  }, [chains, configChains, getFieldValues, setFieldValue])
+
+  return (
+    <ChainOrderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ChainOrderStoreContext.Provider>
+  )
+}
+
+export function useChainOrderStoreContext() {
+  const useStore = useContext(ChainOrderStoreContext)
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`
+    )
+  }
+  return useStore
+}
+
+export function useChainOrderStore<T>(
+  selector: (state: ChainOrderState) => T,
+  equalityFn?: (left: T, right: T) => boolean
+): T {
+  const useStore = useChainOrderStoreContext()
+  return useStore(selector, equalityFn)
+}

package/src/stores/chains/createChainOrderStore.ts

@@ -0,0 +1,87 @@
+import type { StateCreator } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { PersistStoreProps } from '../types.js'
+import type { ChainOrderState } from './types.js'
+
+export const maxChainsToOrder = 9
+export const maxChainsToShow = 10
+const defaultChainState = {
+  from: [],
+  to: [],
+}
+
+export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<ChainOrderState>(
+    persist(
+      (set, get) => ({
+        chainOrder: defaultChainState,
+        availableChains: defaultChainState,
+        initializeChains: (chainIds, type) => {
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder[type].filter((chainId) =>
+              chainIds.includes(chainId)
+            )
+            const chainsToAdd = chainIds.filter(
+              (chainId) => !chainOrder.includes(chainId)
+            )
+            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {
+              return {
+                availableChains: {
+                  ...state.availableChains,
+                  [type]: chainIds,
+                },
+                chainOrder: {
+                  ...state.chainOrder,
+                  [type]: chainOrder,
+                },
+              }
+            }
+            const chainsToAddLength = maxChainsToOrder - chainOrder.length
+            for (let index = 0; index < chainsToAddLength; index++) {
+              chainOrder.push(chainsToAdd[index])
+            }
+            return {
+              availableChains: {
+                ...state.availableChains,
+                [type]: chainIds,
+              },
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
+            }
+          })
+          return get().chainOrder[type]
+        },
+        setChain: (chainId, type) => {
+          const state = get()
+          if (
+            state.chainOrder[type].includes(chainId) ||
+            !state.availableChains[type].includes(chainId)
+          ) {
+            return
+          }
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder[type].slice()
+            chainOrder.unshift(chainId)
+            if (chainOrder.length > maxChainsToOrder) {
+              chainOrder.pop()
+            }
+            return {
+              chainOrder: {
+                ...state.chainOrder,
+                [type]: chainOrder,
+              },
+            }
+          })
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+        version: 2,
+        partialize: (state) => ({ chainOrder: state.chainOrder }),
+      }
+    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
+    Object.is
+  )

package/src/stores/chains/types.ts

@@ -0,0 +1,17 @@
+import type { FormType } from '../form/types.js'
+
+export interface ChainOrderProps {
+  chainOrder: {
+    from: number[]
+    to: number[]
+  }
+  availableChains: {
+    from: number[]
+    to: number[]
+  }
+}
+
+export interface ChainOrderState extends ChainOrderProps {
+  initializeChains(chainIds: number[], type: FormType): number[]
+  setChain(chainId: number, type: FormType): void
+}

package/src/stores/chains/useChainOrder.ts

@@ -0,0 +1,12 @@
+import { shallow } from 'zustand/shallow'
+import type { FormType } from '../form/types.js'
+import { useChainOrderStore } from './ChainOrderStore.js'
+
+export const useChainOrder = (
+  type: FormType
+): [number[], (chainId: number, type: FormType) => void] => {
+  return useChainOrderStore(
+    (state) => [state.chainOrder[type], state.setChain],
+    shallow
+  )
+}