@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/providers/SDKClientProvider.tsx

@@ -0,0 +1,41 @@
+import { createClient, type SDKClient } from '@lifi/sdk'
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useMemo,
+} from 'react'
+import { version } from '../config/version.js'
+import { useWidgetConfig } from './WidgetProvider/WidgetProvider.js'
+
+const SDKClientContext = createContext<SDKClient>({} as SDKClient)
+
+export const useSDKClient = () => useContext(SDKClientContext)
+
+export const SDKClientProvider = ({ children }: PropsWithChildren) => {
+  const widgetConfig = useWidgetConfig()
+
+  const client: SDKClient = useMemo(() => {
+    return createClient({
+      ...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,
+      // debug: true,
+    })
+  }, [widgetConfig])
+
+  return (
+    <SDKClientContext.Provider value={client}>
+      {children}
+    </SDKClientContext.Provider>
+  )
+}

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -1,27 +1,61 @@
 import type { WalletManagementConfig } from '@lifi/wallet-management'
 import { WalletManagementProvider } from '@lifi/wallet-management'
-import { type FC, type PropsWithChildren, useMemo } from 'react'
+import type { WidgetProviderProps } from '@lifi/widget-provider'
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+  useRef,
+} 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 { EVMProvider } from './EVMProvider.js'
-import { SDKProviders } from './SDKProviders.js'
-import { SuiProvider } from './SuiProvider.js'
-import { SVMProvider } from './SVMProvider.js'
-import { UTXOProvider } from './UTXOProvider.js'
 import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 
-export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
-  return (
-    <EVMProvider>
-      <SVMProvider>
-        <UTXOProvider>
-          <SuiProvider>
-            <SDKProviders />
-            <WalletMenuProvider>{children}</WalletMenuProvider>
-          </SuiProvider>
-        </UTXOProvider>
-      </SVMProvider>
-    </EVMProvider>
+interface WalletProviderProps extends PropsWithChildren {
+  providers: ((props: PropsWithChildren<WidgetProviderProps>) => ReactNode)[]
+}
+
+export const WalletProvider = ({
+  children,
+  providers,
+}: PropsWithChildren<WalletProviderProps>) => {
+  const { walletConfig } = useWidgetConfig()
+  const { chains } = useAvailableChains()
+
+  const prevProvidersRef = useRef(providers)
+
+  // Memoize providers to maintain referential stability and prevent remounts
+  const memoizedProviders = useMemo(() => {
+    if (
+      prevProvidersRef.current.length === providers.length &&
+      prevProvidersRef.current.every(
+        (provider, index) => provider === providers[index]
+      )
+    ) {
+      return prevProvidersRef.current
+    }
+    prevProvidersRef.current = providers
+    return providers
+  }, [providers])
+
+  const baseContent = <WalletMenuProvider>{children}</WalletMenuProvider>
+
+  return memoizedProviders.reduceRight(
+    (acc, ProviderComponent) => (
+      <ProviderComponent
+        key={ProviderComponent.name}
+        forceInternalWalletManagement={
+          walletConfig?.forceInternalWalletManagement
+        }
+        chains={chains ?? []}
+      >
+        {acc}
+      </ProviderComponent>
+    ),
+    baseContent
   )
 }
 
@@ -30,13 +64,20 @@ const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
   const { i18n } = useTranslation()
   const { internalChainTypes } = useExternalWalletProvider()
 
+  // Initialize SDK client with providers wrapping the wallet menu provider
+  useInitializeSDKProviders()
+
   const config: WalletManagementConfig = useMemo(() => {
     return {
       locale: i18n.resolvedLanguage as never,
       enabledChainTypes: internalChainTypes,
-      ...walletConfig,
+      walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,
     }
-  }, [i18n.resolvedLanguage, internalChainTypes, walletConfig])
+  }, [
+    i18n.resolvedLanguage,
+    internalChainTypes,
+    walletConfig?.walletEcosystemsOrder,
+  ])
 
   return (
     <WalletManagementProvider config={config}>

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -1,10 +1,12 @@
 import { ChainType } from '@lifi/sdk'
-import { useContext, useMemo } from 'react'
+import {
+  useBitcoinContext,
+  useEthereumContext,
+  useSolanaContext,
+  useSuiContext,
+} from '@lifi/widget-provider'
+import { useMemo } from 'react'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
-import { EVMExternalContext } from './EVMExternalContext.js'
-import { SuiExternalContext } from './SuiExternalContext.js'
-import { SVMExternalContext } from './SVMExternalContext.js'
-import { UTXOExternalContext } from './UTXOExternalContext.js'
 
 interface ExternalWalletProvider {
   useExternalWalletProvidersOnly: boolean
@@ -21,28 +23,28 @@ const internalChainTypes = [
 
 export function useExternalWalletProvider(): ExternalWalletProvider {
   const { walletConfig } = useWidgetConfig()
-  const hasExternalEVMContext = useContext(EVMExternalContext)
-  const hasExternalSVMContext = useContext(SVMExternalContext)
-  const hasExternalUTXOContext = useContext(UTXOExternalContext)
-  const hasExternalSuiContext = useContext(SuiExternalContext)
+  const { isExternalContext: hasExternalEthereumContext } = useEthereumContext()
+  const { isExternalContext: hasExternalSolanaContext } = useSolanaContext()
+  const { isExternalContext: hasExternalBitcoinContext } = useBitcoinContext()
+  const { isExternalContext: hasExternalSuiContext } = useSuiContext()
   const data = useMemo(() => {
     const providers: ChainType[] = []
-    if (hasExternalEVMContext) {
+    if (hasExternalEthereumContext) {
       providers.push(ChainType.EVM)
     }
-    if (hasExternalSVMContext) {
+    if (hasExternalSolanaContext) {
       providers.push(ChainType.SVM)
     }
-    if (hasExternalUTXOContext) {
+    if (hasExternalBitcoinContext) {
       providers.push(ChainType.UTXO)
     }
     if (hasExternalSuiContext) {
       providers.push(ChainType.MVM)
     }
     const hasExternalProvider =
-      hasExternalEVMContext ||
-      hasExternalSVMContext ||
-      hasExternalUTXOContext ||
+      hasExternalEthereumContext ||
+      hasExternalSolanaContext ||
+      hasExternalBitcoinContext ||
       hasExternalSuiContext
 
     const useExternalWalletProvidersOnly =
@@ -57,9 +59,9 @@ export function useExternalWalletProvider(): ExternalWalletProvider {
       ),
     }
   }, [
-    hasExternalEVMContext,
-    hasExternalSVMContext,
-    hasExternalUTXOContext,
+    hasExternalEthereumContext,
+    hasExternalSolanaContext,
+    hasExternalBitcoinContext,
     hasExternalSuiContext,
     walletConfig?.usePartialWalletManagement,
     walletConfig?.forceInternalWalletManagement,

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,7 +1,4 @@
-import type { SDKConfig } from '@lifi/sdk'
-import { config, createConfig } from '@lifi/sdk'
 import { createContext, useContext, useId, useMemo } from 'react'
-import { version } from '../../config/version.js'
 import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
 import type { WidgetContextProps, WidgetProviderProps } from './types.js'
 
@@ -15,8 +12,6 @@ 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 }) => {
@@ -38,30 +33,6 @@ export const WidgetProvider: React.FC<
       // 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)

package/src/stores/StoreProvider.tsx

@@ -5,6 +5,7 @@ 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 { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore.js'
 
@@ -23,13 +24,15 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     >
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
         <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
-          <FormStoreProvider formRef={formRef}>
-            <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
-              <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
-                {children}
-              </RouteExecutionStoreProvider>
-            </ChainOrderStoreProvider>
-          </FormStoreProvider>
+          <PinnedTokensStoreProvider namePrefix={config?.keyPrefix}>
+            <FormStoreProvider formRef={formRef}>
+              <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+                <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                  {children}
+                </RouteExecutionStoreProvider>
+              </ChainOrderStoreProvider>
+            </FormStoreProvider>
+          </PinnedTokensStoreProvider>
         </BookmarkStoreProvider>
       </HeaderStoreProvider>
     </SplitSubvariantStoreProvider>

package/src/stores/bookmarks/types.ts

@@ -1,5 +1,4 @@
-import type { StoreApi } from 'zustand'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import type { ToAddress } from '../../types/widget.js'
 
 export interface Bookmark extends ToAddress {
@@ -24,4 +23,4 @@ export interface BookmarkActions {
 
 export type BookmarkState = BookmarkProps & BookmarkActions
 
-export type BookmarkStore = UseBoundStoreWithEqualityFn<StoreApi<BookmarkState>>
+export type BookmarkStore = UseBoundStore<StoreApi<BookmarkState>>

package/src/stores/chains/ChainOrderStore.tsx

@@ -1,20 +1,20 @@
 import { createContext, useContext, useEffect, useRef } from 'react'
-import type { StoreApi } from 'zustand'
+import type { StoreApi, UseBoundStore } from 'zustand'
 import { useShallow } from 'zustand/shallow'
-import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 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 { HiddenUI } from '../../types/widget.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 = UseBoundStoreWithEqualityFn<StoreApi<ChainOrderState>>
+type ChainOrderStore = UseBoundStore<StoreApi<ChainOrderState>>
 
 const ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)
 
@@ -22,7 +22,13 @@ export function ChainOrderStoreProvider({
   children,
   ...props
 }: PersistStoreProviderProps) {
-  const { chains: chainsConfig, hiddenUI } = useWidgetConfig()
+  const {
+    chains: chainsConfig,
+    hiddenUI,
+    fromChain: fromChainConfig,
+    toChain: toChainConfig,
+    buildUrl,
+  } = useWidgetConfig()
   const storeRef = useRef<ChainOrderStore>(null)
   const { chains } = useChains()
   const { setFieldValue, getFieldValues } = useFieldActions()
@@ -32,7 +38,9 @@ export function ChainOrderStoreProvider({
     useExternalWalletProvider()
 
   if (!storeRef.current) {
-    storeRef.current = createChainOrderStore(props)
+    storeRef.current = createChainOrderStore({
+      ...props,
+    })
   }
 
   useEffect(() => {
@@ -72,9 +80,17 @@ export function ChainOrderStoreProvider({
           filteredChains.length > 1 &&
           !hiddenUI?.includes(HiddenUI.AllNetworks) &&
           !isSwapTo
-        if (!showAllNetworks) {
-          storeRef.current?.getState().setIsAllNetworks(false, key)
-        }
+
+        // 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
@@ -88,12 +104,6 @@ export function ChainOrderStoreProvider({
           return
         }
 
-        // If no chain is selected (e.g., removed from URL params) and
-        // showAllNetworks is enabled, reset isAllNetworks to true
-        if (showAllNetworks) {
-          storeRef.current?.getState().setIsAllNetworks(true, key)
-        }
-
         const firstAllowedPinnedChain = storeRef.current
           ?.getState()
           .pinnedChains?.find((chainId) =>
@@ -101,7 +111,7 @@ export function ChainOrderStoreProvider({
           )
         if (
           variant === 'wide' &&
-          subvariantOptions?.wide?.enableChainSidebar &&
+          !subvariantOptions?.wide?.disableChainSidebar &&
           firstAllowedPinnedChain
         ) {
           setFieldValue(`${key}Chain`, firstAllowedPinnedChain)
@@ -118,9 +128,12 @@ export function ChainOrderStoreProvider({
     setFieldValue,
     useExternalWalletProvidersOnly,
     variant,
-    subvariantOptions?.wide?.enableChainSidebar,
+    subvariantOptions?.wide?.disableChainSidebar,
     hiddenUI,
     swapOnly,
+    fromChainConfig,
+    toChainConfig,
+    buildUrl,
   ])
 
   return (

package/src/stores/chains/createChainOrderStore.ts

@@ -115,13 +115,9 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
-        version: 2,
+        version: 4,
         partialize: (state) => ({
           chainOrder: state.chainOrder,
-          fromIsAllNetworks: state.fromIsAllNetworks,
-          toIsAllNetworks: state.toIsAllNetworks,
-          fromShowAllNetworks: state.fromShowAllNetworks,
-          toShowAllNetworks: state.toShowAllNetworks,
           pinnedChains: state.pinnedChains,
         }),
       }

package/src/stores/form/FormStore.tsx

@@ -1,30 +1,28 @@
 import type { PropsWithChildren } from 'react'
 import { useMemo, useRef } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import type { FormRef, ToAddress } from '../../types/widget.js'
+import type { FormRef } from '../../types/widget.js'
 import { createFormStore, formDefaultValues } from './createFormStore.js'
 import { FormStoreContext } from './FormStoreContext.js'
 import { FormUpdater } from './FormUpdater.js'
+import { getDefaultValuesFromQueryString } from './getDefaultValuesFromQueryString.js'
 import type { DefaultValues, FormStoreStore } from './types.js'
 import { useFormRef } from './useFormRef.js'
 
 // decorates and initialise the form date for use in the form store
-const initialiseDefaultValues = (
-  defaultValues: Partial<DefaultValues>,
-  fromAmount?: number | string,
-  toAmount?: number | string,
-  toAddress?: ToAddress
-) => ({
+const initialiseDefaultValues = (defaultValues: Partial<DefaultValues>) => ({
   ...formDefaultValues,
   ...defaultValues,
   fromAmount:
-    (typeof fromAmount === 'number' ? fromAmount?.toPrecision() : fromAmount) ||
-    formDefaultValues.fromAmount,
+    (typeof defaultValues.fromAmount === 'number'
+      ? (defaultValues.fromAmount as number)?.toPrecision?.()
+      : defaultValues.fromAmount) || formDefaultValues.fromAmount,
   toAmount:
-    (typeof toAmount === 'number' ? toAmount?.toPrecision() : toAmount) ||
-    formDefaultValues.toAmount,
+    (typeof defaultValues.toAmount === 'number'
+      ? (defaultValues.toAmount as number)?.toPrecision?.()
+      : defaultValues.toAmount) || formDefaultValues.toAmount,
   // Prevent setting address when the field is hidden
-  toAddress: toAddress?.address || formDefaultValues.toAddress,
+  toAddress: defaultValues.toAddress || formDefaultValues.toAddress,
 })
 
 interface FormStoreProviderProps extends PropsWithChildren {
@@ -46,6 +44,7 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
     toAmount,
     toAddress,
     formUpdateKey,
+    buildUrl,
   } = widgetConfig
 
   const storeRef = useRef<FormStoreStore>(null)
@@ -111,13 +110,15 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
   )
 
   if (!storeRef.current) {
+    const queryDefaults = getDefaultValuesFromQueryString({
+      buildUrl,
+      includeToAddress: false,
+    })
     storeRef.current = createFormStore(
-      initialiseDefaultValues(
-        reactiveFormValues,
-        fromAmount,
-        toAmount,
-        toAddress
-      )
+      initialiseDefaultValues({
+        ...reactiveFormValues,
+        ...queryDefaults,
+      })
     )
   }
 

package/src/stores/form/FormUpdater.tsx

@@ -1,91 +1,24 @@
 import { useAccount } from '@lifi/wallet-management'
 import { useEffect } from 'react'
-import { useChains } from '../../hooks/useChains.js'
 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 { isItemAllowed } from '../../utils/item.js'
 import type { DefaultValues } from './types.js'
 import { useFieldActions } from './useFieldActions.js'
 
 export const FormUpdater: React.FC<{
   reactiveFormValues: Partial<DefaultValues>
 }> = ({ reactiveFormValues }) => {
-  const {
-    fromChain,
-    toChain,
-    toAddress,
-    chains: configChains,
-  } = useWidgetConfig()
+  const { toAddress } = useWidgetConfig()
   const { account } = useAccount()
-  const { chains } = useChains()
   const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { isTouched, resetField, setFieldValue, setUserAndDefaultValues } =
-    useFieldActions()
-
-  // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-  useEffect(() => {
-    const fromChainAllowed =
-      account.chainId &&
-      chains?.some(
-        (chain) =>
-          chain.id === account.chainId &&
-          isItemAllowed(chain.id, configChains?.from)
-      )
-    const toChainAllowed =
-      account.chainId &&
-      chains?.some(
-        (chain) =>
-          chain.id === account.chainId &&
-          isItemAllowed(chain.id, configChains?.to)
-      )
-
-    if (
-      !account.isConnected ||
-      !account.chainId ||
-      (!fromChainAllowed && !toChainAllowed)
-    ) {
-      return
-    }
-
-    if (
-      !fromChain &&
-      !isTouched('fromChain') &&
-      !isTouched('fromToken') &&
-      fromChainAllowed
-    ) {
-      resetField('fromChain', { defaultValue: account.chainId })
-      setFieldValue('fromToken', '')
-      if (isTouched('fromAmount')) {
-        setFieldValue('fromAmount', '')
-      }
-    }
-    if (
-      !toChain &&
-      !isTouched('toChain') &&
-      !isTouched('toToken') &&
-      toChainAllowed
-    ) {
-      resetField('toChain', { defaultValue: account.chainId })
-      setFieldValue('toToken', '')
-    }
-  }, [
-    account.chainId,
-    account.isConnected,
-    chains,
-    fromChain,
-    toChain,
-    isTouched,
-    resetField,
-    setFieldValue,
-    configChains?.from,
-    configChains?.to,
-  ])
+  const { setUserAndDefaultValues } = useFieldActions()
 
-  // Makes widget config options reactive to changes
-  // should update userValues when defaultValues updates and includes additional logic for chains
+  // React to changes in widget config options (reactiveFormValues), updating userValues accordingly.
+  // Includes special logic for chain fields, where account.chainId is only a fallback and not a direct reactivity source.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: account.chainId is used as a fallback only and does not need to be a dependency for reactivity.
   useEffect(() => {
     if (reactiveFormValues.toAddress) {
       setSendToWallet(true)
@@ -98,7 +31,6 @@ export const FormUpdater: React.FC<{
       accountForChainId(reactiveFormValues, account.chainId)
     )
   }, [
-    account.chainId,
     toAddress,
     reactiveFormValues,
     setUserAndDefaultValues,