@lifi/widget 0.0.0-preview-6cc63bac

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -0,0 +1,70 @@
+import { WalletManagementProviders } from '@lifi/wallet-management'
+import type { WidgetProviderProps } from '@lifi/widget-provider'
+import {
+  type FC,
+  type JSX,
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { useExternalWalletProvider } from './useExternalWalletProvider.js'
+
+interface WalletProviderProps extends PropsWithChildren {
+  providers: ((props: PropsWithChildren<WidgetProviderProps>) => ReactNode)[]
+}
+
+export const WalletProvider = ({
+  children,
+  providers,
+}: PropsWithChildren<WalletProviderProps>): JSX.Element => {
+  const { walletConfig } = useWidgetConfig()
+  const { chains } = useAvailableChains()
+  const { i18n } = useTranslation()
+  const { useExternalWalletProvidersOnly, internalChainTypes } =
+    useExternalWalletProvider()
+
+  if (
+    !providers.length &&
+    !useExternalWalletProvidersOnly &&
+    process.env.NODE_ENV === 'development'
+  ) {
+    console.warn('No widget providers specified')
+  }
+
+  const effectiveProviders = useExternalWalletProvidersOnly ? [] : providers
+
+  const walletManagementConfig = useMemo(
+    () => ({
+      locale: i18n.resolvedLanguage as never,
+      enabledChainTypes: internalChainTypes,
+      walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,
+    }),
+    [
+      i18n.resolvedLanguage,
+      internalChainTypes,
+      walletConfig?.walletEcosystemsOrder,
+    ]
+  )
+
+  return (
+    <WalletManagementProviders
+      config={walletManagementConfig}
+      providers={effectiveProviders}
+      chains={chains}
+      forceInternalWalletManagement={
+        walletConfig?.forceInternalWalletManagement
+      }
+    >
+      <SDKProviderInitializer>{children}</SDKProviderInitializer>
+    </WalletManagementProviders>
+  )
+}
+
+const SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {
+  useInitializeSDKProviders()
+  return children
+}

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -0,0 +1,79 @@
+import { ChainType } from '@lifi/sdk'
+import {
+  useBitcoinContext,
+  useEthereumContext,
+  useSolanaContext,
+  useSuiContext,
+  useTronContext,
+} from '@lifi/widget-provider'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+
+interface ExternalWalletProvider {
+  useExternalWalletProvidersOnly: boolean
+  externalChainTypes: ChainType[]
+  internalChainTypes: ChainType[]
+}
+
+const internalChainTypes = [
+  ChainType.EVM,
+  ChainType.SVM,
+  ChainType.UTXO,
+  ChainType.MVM,
+  ChainType.TVM,
+]
+
+export function useExternalWalletProvider(): ExternalWalletProvider {
+  const { walletConfig } = useWidgetConfig()
+  const { isExternalContext: hasExternalEthereumContext } = useEthereumContext()
+  const { isExternalContext: hasExternalSolanaContext } = useSolanaContext()
+  const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()
+  const { isExternalContext: hasExternalSuiContext } = useSuiContext()
+  const { isExternalContext: hasExternalTronContext } = useTronContext()
+  const data = useMemo(() => {
+    const providers: ChainType[] = []
+    if (hasExternalEthereumContext) {
+      providers.push(ChainType.EVM)
+    }
+    if (hasExternalSolanaContext) {
+      providers.push(ChainType.SVM)
+    }
+    if (hasExternalBitcoinContext) {
+      providers.push(ChainType.UTXO)
+    }
+    if (hasExternalSuiContext) {
+      providers.push(ChainType.MVM)
+    }
+    if (hasExternalTronContext) {
+      providers.push(ChainType.TVM)
+    }
+    const hasExternalProvider =
+      hasExternalEthereumContext ||
+      hasExternalSolanaContext ||
+      hasExternalBitcoinContext ||
+      hasExternalSuiContext ||
+      hasExternalTronContext
+
+    const useExternalWalletProvidersOnly =
+      hasExternalProvider &&
+      !walletConfig?.usePartialWalletManagement &&
+      !walletConfig?.forceInternalWalletManagement
+    return {
+      useExternalWalletProvidersOnly,
+      externalChainTypes: providers,
+      internalChainTypes: internalChainTypes.filter(
+        (chainType) => !providers.includes(chainType)
+      ),
+    }
+  }, [
+    hasExternalEthereumContext,
+    hasExternalSolanaContext,
+    hasExternalBitcoinContext,
+    hasExternalSuiContext,
+    hasExternalTronContext,
+    walletConfig?.usePartialWalletManagement,
+    walletConfig?.forceInternalWalletManagement,
+  ])
+
+  return data
+}

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useId, useMemo } from 'react'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import type { WidgetContextProps, WidgetProviderProps } from './types.js'
+
+const initialContext: WidgetContextProps = {
+  elementId: '',
+  integrator: '',
+}
+
+const WidgetContext = createContext<WidgetContextProps>(initialContext)
+
+export const useWidgetConfig = (): WidgetContextProps =>
+  useContext(WidgetContext)
+
+export const WidgetProvider: React.FC<
+  React.PropsWithChildren<WidgetProviderProps>
+> = ({ children, config: widgetConfig }) => {
+  const elementId = useId()
+  const { setDefaultSettings } = useSettingsActions()
+
+  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)
+
+      return value
+    } catch (e) {
+      console.warn(e)
+      return {
+        ...widgetConfig,
+        elementId,
+        integrator: widgetConfig.integrator,
+      }
+    }
+  }, [elementId, widgetConfig, setDefaultSettings])
+  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/stores/StoreProvider.tsx

@@ -0,0 +1,40 @@
+import type { PropsWithChildren } from 'react'
+import type { WidgetConfigProps } from '../types/widget.js'
+import { getSplitMode } from '../utils/variant.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 { PinnedTokensStoreProvider } from './pinnedTokens/PinnedTokensStore.js'
+import { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js'
+import { SplitModeStoreProvider } from './settings/useSplitModeStore.js'
+
+export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+  formRef,
+}) => {
+  return (
+    <SplitModeStoreProvider
+      state={
+        config.mode === 'split'
+          ? getSplitMode(config.modeOptions?.split)
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+          <PinnedTokensStoreProvider namePrefix={config?.keyPrefix}>
+            <FormStoreProvider formRef={formRef}>
+              <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+                <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                  {children}
+                </RouteExecutionStoreProvider>
+              </ChainOrderStoreProvider>
+            </FormStoreProvider>
+          </PinnedTokensStoreProvider>
+        </BookmarkStoreProvider>
+      </HeaderStoreProvider>
+    </SplitModeStoreProvider>
+  )
+}

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, useRef } from 'react'
+import { useShallow } 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'
+
+const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
+
+export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const { toAddress } = useWidgetConfig()
+  const storeRef = useRef<BookmarkStore>(null)
+
+  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): T {
+  const useStore = useContext(BookmarkStoreContext)
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${BookmarkStoreProvider.name}>.`
+    )
+  }
+
+  return useStore(useShallow(selector))
+}

package/src/stores/bookmarks/createBookmarkStore.ts

@@ -0,0 +1,80 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+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): UseBoundStore<StoreApi<BookmarkState>> =>
+  create<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)
+              }
+            }
+          }
+        },
+      }
+    )
+  )

package/src/stores/bookmarks/types.ts

@@ -0,0 +1,26 @@
+import type { StoreApi, UseBoundStore } from 'zustand'
+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 = UseBoundStore<StoreApi<BookmarkState>>

package/src/stores/bookmarks/useBookmarkActions.ts

@@ -0,0 +1,16 @@
+import { useBookmarkStore } from './BookmarkStore.js'
+import type { BookmarkActions } from './types.js'
+
+export const useBookmarkActions = (): BookmarkActions => {
+  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,
+  }))
+
+  return actions
+}

package/src/stores/bookmarks/useBookmarks.ts

@@ -0,0 +1,14 @@
+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]
+  )
+
+  return {
+    bookmarks,
+    selectedBookmark,
+    recentWallets,
+  }
+}

package/src/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,165 @@
+import { createContext, type JSX, useContext, useEffect, useRef } from 'react'
+import type { StoreApi, UseBoundStore } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+import { useChains } from '../../hooks/useChains.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
+import { getDefaultValuesFromQueryString } from '../form/getDefaultValuesFromQueryString.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'
+
+type ChainOrderStore = UseBoundStore<StoreApi<ChainOrderState>>
+
+const ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)
+
+export function ChainOrderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps): JSX.Element {
+  const {
+    chains: chainsConfig,
+    hiddenUI,
+    fromChain: fromChainConfig,
+    toChain: toChainConfig,
+    buildUrl,
+  } = useWidgetConfig()
+  const storeRef = useRef<ChainOrderStore>(null)
+  const { chains } = useChains()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const swapOnly = useSwapOnly()
+  const { variant } = useWidgetConfig()
+  const { externalChainTypes, useExternalWalletProvidersOnly } =
+    useExternalWalletProvider()
+
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore({
+      ...props,
+    })
+  }
+
+  useEffect(() => {
+    if (chains) {
+      ;(['from', 'to'] as FormType[]).forEach((key) => {
+        const configChainIds = chainsConfig?.[key]
+        const isFromKey = key === 'from'
+
+        // Convert configChainIds to Sets for O(1) lookup
+        const configChainIdsSet = getConfigItemSets(
+          configChainIds,
+          (chainIds) => new Set(chainIds)
+        )
+        const filteredChains = chains.filter((chain) => {
+          const passesChainsConfigFilter = configChainIdsSet
+            ? isItemAllowedForSets(chain.id, configChainIdsSet)
+            : true
+          // If the integrator uses external wallet management and has not opted in for partial wallet management,
+          // restrict the displayed chains to those compatible with external wallet management.
+          // This ensures users only see chains for which they can sign transactions.
+          const passesWalletConfigFilter = isFromKey
+            ? !useExternalWalletProvidersOnly ||
+              externalChainTypes.includes(chain.chainType)
+            : true
+          return passesChainsConfigFilter && passesWalletConfigFilter
+        })
+
+        const chainOrder = storeRef.current?.getState().initializeChains(
+          filteredChains.map((chain) => chain.id),
+          key
+        )
+
+        const isSwapTo = swapOnly && key === 'to'
+
+        // Show "All networks" button if there are multiple networks
+        const showAllNetworks =
+          filteredChains.length > 1 && !hiddenUI?.allNetworks && !isSwapTo
+
+        // Initialize the isAllNetworks with true if the tab is shown,
+        // there is no config chain value and no url chain value
+        const urlValues = getDefaultValuesFromQueryString({ buildUrl })
+        const urlChainValue =
+          key === 'from' ? urlValues.fromChain : urlValues.toChain
+        const configChainValue =
+          key === 'from' ? fromChainConfig : toChainConfig
+        const initialIsAllNetworks =
+          showAllNetworks && !configChainValue && !urlChainValue
+        storeRef.current?.getState().setIsAllNetworks(initialIsAllNetworks, key)
+        storeRef.current?.getState().setShowAllNetworks(showAllNetworks, key)
+
+        // If swap only, set the to chain to the from chain
+        if (isSwapTo) {
+          const [fromChainValue] = getFieldValues('fromChain')
+          setFieldValue('toChain', fromChainValue)
+        }
+
+        // When "All Networks" is active, don't auto-select a chain from the
+        // persisted chain order. This prevents stale cross-ecosystem selections
+        // (e.g. EVM from + Solana to) from triggering the "destination wallet
+        // address required" message after a page refresh.
+        if (initialIsAllNetworks) {
+          return
+        }
+
+        const [chainValue] = getFieldValues(`${key}Chain`)
+        if (chainValue) {
+          return
+        }
+
+        const firstAllowedPinnedChain = storeRef.current
+          ?.getState()
+          .pinnedChains?.find((chainId) =>
+            filteredChains.some((chain) => chain.id === chainId)
+          )
+        if (
+          variant === 'wide' &&
+          !hiddenUI?.chainSidebar &&
+          firstAllowedPinnedChain
+        ) {
+          setFieldValue(`${key}Chain`, firstAllowedPinnedChain)
+        } else if (chainOrder?.length) {
+          setFieldValue(`${key}Chain`, chainOrder[0])
+        }
+      })
+    }
+  }, [
+    chains,
+    chainsConfig,
+    externalChainTypes,
+    getFieldValues,
+    setFieldValue,
+    useExternalWalletProvidersOnly,
+    variant,
+    hiddenUI,
+    swapOnly,
+    fromChainConfig,
+    toChainConfig,
+    buildUrl,
+  ])
+
+  return (
+    <ChainOrderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ChainOrderStoreContext.Provider>
+  )
+}
+
+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
+): T {
+  const useStore = useChainOrderStoreContext()
+  return useStore(useShallow(selector))
+}