@lifi/widget 3.6.1 → 3.7.0-beta.0

package/components/TokenList/types.ts

@@ -1,6 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk';
+import type { Account } from '@lifi/wallet-management';
 import type { MouseEventHandler, MutableRefObject } from 'react';
-import type { Account } from '../../hooks/useAccount.js';
 import type { FormType } from '../../stores/form/types.js';
 import type { TokenAmount } from '../../types/token.js';
 
@@ -30,7 +30,7 @@ export interface TokenListItemBaseProps {
 }
 
 export interface TokenListItemProps extends TokenListItemBaseProps {
-  showBalance?: boolean;
+  accountAddress?: string;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;
@@ -40,7 +40,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 
 export interface TokenListItemButtonProps {
   onClick?: MouseEventHandler<HTMLDivElement>;
-  showBalance?: boolean;
+  accountAddress?: string;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;

package/components/TokenRate/TokenRate.tsx

@@ -18,13 +18,13 @@ interface TokenRateState {
   toggleIsForward(): void;
 }
 
-const useTokenRateStore = create<TokenRateState>((set) => ({
+const useTokenRate = create<TokenRateState>((set) => ({
   isForward: true,
   toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
 }));
 
 export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
-  const { isForward, toggleIsForward } = useTokenRateStore();
+  const { isForward, toggleIsForward } = useTokenRate();
 
   const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
     e.stopPropagation();

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.6.1';
+export const version = '3.7.0-beta.0';

package/hooks/useAvailableChains.ts

@@ -2,32 +2,31 @@ import type { ExtendedChain } from '@lifi/sdk';
 import { ChainType, config, getChains } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import { isItemAllowed } from '../utils/item.js';
 
-const supportedChainTypes = [ChainType.EVM, ChainType.SVM];
+const supportedChainTypes = [ChainType.EVM, ChainType.SVM, ChainType.UTXO];
 
-export const useAvailableChains = () => {
+export const useAvailableChains = (chainTypes?: ChainType[]) => {
   const { chains } = useWidgetConfig();
-  const { providers } = useHasExternalWalletProvider();
+  // const { providers } = useHasExternalWalletProvider();
   const { data, isLoading } = useQuery({
     queryKey: [
       'chains',
-      providers,
+      // providers,
       chains?.types,
       chains?.allow,
       chains?.deny,
       chains?.from,
       chains?.to,
     ] as const,
-    queryFn: async ({ queryKey: [, providers, chainTypes] }) => {
-      const chainTypesRequest = (
-        providers.length > 0 ? providers : supportedChainTypes
-      ).filter((chainType) => isItemAllowed(chainType, chainTypes));
+    queryFn: async ({ queryKey: [, chainTypesConfig] }) => {
+      const chainTypesRequest = supportedChainTypes
+        // providers.length > 0 ? providers : supportedChainTypes
+        .filter((chainType) => isItemAllowed(chainType, chainTypesConfig));
 
       const availableChains = await getChains({
-        chainTypes: chainTypesRequest,
+        chainTypes: chainTypes || chainTypesRequest,
       });
       config.setChains(availableChains);
       return availableChains;

package/hooks/useChains.ts

@@ -1,10 +1,11 @@
+import type { ChainType } from '@lifi/sdk';
 import { useMemo } from 'react';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { FormType } from '../stores/form/types.js';
 import { isItemAllowed } from '../utils/item.js';
 import { useAvailableChains } from './useAvailableChains.js';
 
-export const useChains = (type?: FormType) => {
+export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
   const { chains } = useWidgetConfig();
   const {
     chains: availableChains,
@@ -17,11 +18,13 @@ export const useChains = (type?: FormType) => {
       ? availableChains?.filter(
           (chain) =>
             isItemAllowed(chain.id, chains) &&
-            isItemAllowed(chain.id, chains?.[type]),
+            isItemAllowed(chain.id, chains?.[type]) &&
+            // Check against chain types if they are provided
+            (chainTypes?.includes(chain.chainType) ?? true),
         )
       : availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
     return filteredChains;
-  }, [availableChains, chains, type]);
+  }, [availableChains, chainTypes, chains, type]);
 
   return {
     chains: filteredChains,

package/hooks/useFromTokenSufficiency.ts

@@ -1,9 +1,9 @@
 import type { RouteExtended } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { parseUnits } from 'viem';
 import { useFieldValues } from '../stores/form/useFieldValues.js';
 import { isRouteDone } from '../stores/routes/utils.js';
-import { useAccount } from './useAccount.js';
 import { useTokenAddressBalance } from './useTokenAddressBalance.js';
 import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 

package/hooks/useGasSufficiency.ts

@@ -1,7 +1,7 @@
 import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery } from '@tanstack/react-query';
 import type { Connector } from 'wagmi';
-import { useAccount } from './useAccount.js';
 import { useAvailableChains } from './useAvailableChains.js';
 import { getTokenBalancesWithRetry } from './useTokenBalance.js';
 
@@ -44,7 +44,8 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
-                (amount, gasCost) => amount + BigInt(gasCost.amount),
+                (amount, gasCost) =>
+                  amount + BigInt(Number(gasCost.amount).toFixed(0)),
                 0n,
               );
               groupedGasCosts[token.chainId] = {
@@ -61,7 +62,8 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             if (nonIncludedFeeCosts?.length) {
               const { token } = nonIncludedFeeCosts[0];
               const feeCostAmount = nonIncludedFeeCosts.reduce(
-                (amount, feeCost) => amount + BigInt(feeCost.amount),
+                (amount, feeCost) =>
+                  amount + BigInt(Number(feeCost.amount).toFixed(0)),
                 0n,
               );
               groupedGasCosts[token.chainId] = {

package/hooks/useProcessMessage.ts

@@ -193,6 +193,10 @@ export function getProcessMessage(
         title = t(`error.title.transactionCanceled`);
         message = getDefaultErrorMessage('error.message.transactionCanceled');
         break;
+      case LiFiErrorCode.TransactionConflict:
+        title = t(`error.title.transactionConflict`);
+        message = getDefaultErrorMessage('error.message.transactionConflict');
+        break;
       case LiFiErrorCode.ExchangeRateUpdateCanceled:
         title = t(`error.title.exchangeRateUpdateCanceled`);
         message = getDefaultErrorMessage();

package/hooks/useRouteExecution.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
 import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
@@ -15,7 +16,6 @@ import {
   isRouteFailed,
 } from '../stores/routes/utils.js';
 import { WidgetEvent } from '../types/events.js';
-import { useAccount } from './useAccount.js';
 import { useWidgetEvents } from './useWidgetEvents.js';
 
 interface RouteExecutionProps {

package/hooks/useRoutes.ts

@@ -1,5 +1,6 @@
 import type { Route, RoutesResponse, Token } from '@lifi/sdk';
 import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { parseUnits } from 'viem';
@@ -10,7 +11,6 @@ import { useSettings } from '../stores/settings/useSettings.js';
 import { defaultSlippage } from '../stores/settings/useSettingsStore.js';
 import { WidgetEvent } from '../types/events.js';
 import { getChainTypeFromAddress } from '../utils/chainType.js';
-import { useAccount } from './useAccount.js';
 import { useChain } from './useChain.js';
 import { useDebouncedWatch } from './useDebouncedWatch.js';
 import { useGasRefuel } from './useGasRefuel.js';

package/hooks/useTokenBalance.ts

@@ -1,8 +1,8 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
-import { useAccount } from './useAccount.js';
 
 const defaultRefetchInterval = 30_000;
 

package/hooks/useTokenBalances.ts

@@ -1,8 +1,8 @@
 import { getTokenBalances } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import { useQuery } from '@tanstack/react-query';
 import { formatUnits } from 'viem';
 import type { TokenAmount } from '../types/token.js';
-import { useAccount } from './useAccount.js';
 import { useTokens } from './useTokens.js';
 
 const defaultRefetchInterval = 32_000;

package/hooks/useTokens.ts

@@ -9,7 +9,8 @@ export const useTokens = (selectedChainId?: number) => {
   const { tokens: configTokens } = useWidgetConfig();
   const { data, isLoading } = useQuery({
     queryKey: ['tokens'],
-    queryFn: () => getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM] }),
+    queryFn: () =>
+      getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM, ChainType.UTXO] }),
     refetchInterval: 3_600_000,
     staleTime: 3_600_000,
   });

package/hooks/useTransactionDetails.ts

@@ -1,11 +1,11 @@
 import type { FullStatusData } from '@lifi/sdk';
 import { getStatus, type StatusResponse } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import {
   keepPreviousData,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useAccount } from './useAccount.js';
 
 export const useTransactionDetails = (transactionHash?: string) => {
   const { account, accounts } = useAccount();

package/hooks/useTransactionHistory.ts

@@ -1,8 +1,8 @@
 import type { FullStatusData, StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import type { QueryFunction } from '@tanstack/react-query';
 import { useQueries } from '@tanstack/react-query';
-import { useAccount } from './useAccount.js';
 
 export const useTransactionHistory = () => {
   const { accounts } = useAccount();

package/i18n/en.json

@@ -16,10 +16,10 @@
     "bridgeReview": "Review bridge",
     "buy": "Buy",
     "cancel": "Cancel",
-    "changeWallet": "Change wallet",
     "checkoutReview": "Review purchase",
     "close": "Close",
     "confirm": "Confirm",
+    "connectAnotherWallet": "Connect another wallet",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -139,6 +139,7 @@
       "signatureRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
       "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new quote.",
       "transactionCanceled": "Transaction was canceled.",
+      "transactionConflict": "Transaction couldn't be processed because it's conflicting with another pending transaction using the same funds. Please wait for the pending transaction to be confirmed or check your transaction history before trying again.",
       "transactionExpired": "The block height has exceeded the maximum allowed limit or blockhash is no longer recent enough.",
       "transactionFailed": "Please check the block explorer for more information.",
       "transactionNotSent": "Transaction was not sent.",
@@ -158,6 +159,7 @@
       "signatureRejected": "Signature required",
       "slippageNotMet": "Slippage conditions not met",
       "transactionCanceled": "Transaction canceled",
+      "transactionConflict": "Transaction conflict",
       "transactionExpired": "Transaction expired",
       "transactionFailed": "Transaction failed",
       "transactionSimulationFailed": "Transaction simulation failed",
@@ -303,8 +305,5 @@
     "noBookmarkedWallets": "No bookmarked wallets",
     "noConnectedWallets": "No connected wallets",
     "noRecentWallets": "No recent wallets"
-  },
-  "wallet": {
-    "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
   }
 }

package/index.ts

@@ -8,9 +8,7 @@ export * from './components/ContractComponent/NFT/types.js';
 export * from './components/Skeleton/WidgetSkeleton.js';
 export { defaultMaxHeight } from './config/constants.js';
 export * from './config/version.js';
-export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';
-export { useWallets, walletComparator } from './hooks/useWallets.js';
 export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
 export * from './stores/form/types.js';
 export { useFieldActions } from './stores/form/useFieldActions.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.6.1",
+  "version": "3.7.0-beta.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.2.3",
-    "@lifi/wallet-management": "^3.1.6",
+    "@lifi/sdk": "^3.3.0-beta.0",
+    "@lifi/wallet-management": "^3.3.0-beta.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
@@ -53,8 +53,8 @@
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
     "uuid": "^10.0.0",
-    "viem": "^2.21.9",
-    "wagmi": "^2.12.12",
+    "viem": "^2.21.14",
+    "wagmi": "^2.12.14",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

package/pages/RoutesPage/RoutesPage.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
+import { useAccount } from '@lifi/wallet-management';
 import type { BoxProps } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,7 +8,6 @@ import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
 import { RouteCard } from '../../components/RouteCard/RouteCard.js';
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
 import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRoutes } from '../../hooks/useRoutes.js';

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,3 +1,5 @@
+import type { Account } from '@lifi/wallet-management';
+import { useAccount } from '@lifi/wallet-management';
 import {
   ContentCopyRounded,
   MoreHoriz,
@@ -12,8 +14,6 @@ import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
-import type { Account } from '../../hooks/useAccount.js';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,3 +1,4 @@
+import { useAccount } from '@lifi/wallet-management';
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
 import { Box, Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
@@ -7,7 +8,6 @@ import { useNavigate } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ButtonTertiary } from '../../components/ButtonTertiary.js';
 import { CardButton } from '../../components/Card/CardButton.js';
-import { useAccount } from '../../hooks/useAccount.js';
 import {
   AddressType,
   useAddressValidation,

package/providers/I18nProvider/types.ts

@@ -12,14 +12,14 @@ export type LanguageResource = typeof languages.en;
 
 export type LanguageResources =
   | {
-      [language in LanguageKey]?: PartialResource<LanguageResource>;
+      [K in LanguageKey]?: PartialResource<LanguageResource>;
     }
   | {
       [language: string]: PartialResource<LanguageResource>;
     };
 
 export type LanguageTranslationResource = {
-  [namespace in 'translation']: PartialResource<LanguageResource>;
+  [N in 'translation']: PartialResource<LanguageResource>;
 };
 
 export type LanguageTranslationResources = {

package/providers/WalletProvider/SDKProviders.tsx

@@ -1,16 +1,24 @@
 import type { SDKProvider } from '@lifi/sdk';
-import { ChainType, EVM, Solana, config } from '@lifi/sdk';
+import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk';
+import {
+  getConnectorClient as getBigmiConnectorClient,
+  useConfig as useBigmiConfig,
+} from '@lifi/wallet-management';
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
-import { getWalletClient, switchChain } from '@wagmi/core';
+import {
+  getConnectorClient as getWagmiConnectorClient,
+  switchChain,
+} from '@wagmi/core';
 import { useEffect } from 'react';
-import { useConfig } from 'wagmi';
+import { useConfig as useWagmiConfig } from 'wagmi';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig();
   const { wallet } = useWallet();
-  const wagmiConfig = useConfig();
+  const wagmiConfig = useWagmiConfig();
+  const bigmiConfig = useBigmiConfig();
 
   useEffect(() => {
     // Configure SDK Providers
@@ -21,13 +29,16 @@ export const SDKProviders = () => {
     const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
       (provider) => provider.type === ChainType.SVM,
     );
+    const hasConfiguredUTXOProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.UTXO,
+    );
     if (!hasConfiguredEVMProvider) {
       providers.push(
         EVM({
-          getWalletClient: () => getWalletClient(wagmiConfig),
+          getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
           switchChain: async (chainId: number) => {
             const chain = await switchChain(wagmiConfig, { chainId });
-            return getWalletClient(wagmiConfig, { chainId: chain.id });
+            return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id });
           },
         }),
       );
@@ -41,11 +52,18 @@ export const SDKProviders = () => {
         }),
       );
     }
+    if (!hasConfiguredUTXOProvider) {
+      providers.push(
+        UTXO({
+          getWalletClient: () => getBigmiConnectorClient(bigmiConfig),
+        }),
+      );
+    }
     if (sdkConfig?.providers?.length) {
       providers.push(...sdkConfig?.providers);
     }
     config.setProviders(providers);
-  }, [sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
+  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
 
   return null;
 };

package/providers/WalletProvider/UTXOBaseProvider.tsx

@@ -0,0 +1,28 @@
+import type { DefaultWagmiConfigResult } from '@lifi/wallet-management';
+import {
+  BigmiProvider,
+  createDefaultBigmiConfig,
+  useReconnect,
+} from '@lifi/wallet-management';
+import { useRef, type FC, type PropsWithChildren } from 'react';
+
+export const UTXOBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const bigmi = useRef<DefaultWagmiConfigResult>();
+
+  if (!bigmi.current) {
+    bigmi.current = createDefaultBigmiConfig({
+      bigmiConfig: {
+        ssr: true,
+        multiInjectedProviderDiscovery: false,
+      },
+    });
+  }
+
+  useReconnect(bigmi.current.config);
+
+  return (
+    <BigmiProvider config={bigmi.current.config} reconnectOnMount={false}>
+      {children}
+    </BigmiProvider>
+  );
+};

package/providers/WalletProvider/UTXOExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const UTXOExternalContext = createContext<boolean>(false);

package/providers/WalletProvider/UTXOProvider.tsx

@@ -0,0 +1,26 @@
+import { ChainType } from '@lifi/sdk';
+import { BigmiContext } from '@lifi/wallet-management';
+import { useContext, type FC, type PropsWithChildren } 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/providers/WalletProvider/WalletProvider.tsx

@@ -1,15 +1,36 @@
-import { type FC, type PropsWithChildren } from 'react';
+import type { WalletManagementConfig } from '@lifi/wallet-management';
+import { WalletManagementProvider } from '@lifi/wallet-management';
+import { useMemo, type FC, type PropsWithChildren } 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>
-        <SDKProviders />
-        {children}
+        <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/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -2,29 +2,35 @@ 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;
-  providers: ChainType[];
+  availableChainTypes: ChainType[];
 }
 
 export function useHasExternalWalletProvider(): ExternalWalletProvider {
   const hasExternalEVMContext = useContext(EVMExternalContext);
   const hasExternalSVMContext = useContext(SVMExternalContext);
+  const hasExternalUTXOContext = useContext(UTXOExternalContext);
 
   const providers = useMemo(() => {
-    const providers = [];
+    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]);
+  }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext]);
 
   return {
-    hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext,
-    providers,
+    hasExternalProvider:
+      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
+    availableChainTypes: providers,
   };
 }

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -50,7 +50,8 @@ export const WidgetProvider: React.FC<
         },
         disableVersionCheck: true,
         widgetVersion: version,
-        preloadChains: false,
+        // preloadChains: false,
+        // debug: true,
       };
       if (!sdkInitialized) {
         createConfig(_config);

package/providers/WidgetProvider/types.ts

@@ -1,8 +1,6 @@
 import type { WidgetConfig } from '../../types/widget.js';
 
 export type WidgetContextProps = WidgetConfig & {
-  fromChain?: number;
-  toChain?: number;
   elementId: string;
 };
 

package/stores/form/FormUpdater.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useAccount } from '@lifi/wallet-management';
 import { useEffect } from 'react';
-import { useAccount } from '../../hooks/useAccount.js';
 import { useChains } from '../../hooks/useChains.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';