@lifi/widget 3.6.0-alpha.5 → 3.6.1

package/hooks/useWallets.ts

@@ -6,7 +6,6 @@ import {
   createWalletConnectConnector,
   getWalletPriority,
   isWalletInstalled,
-  useConfig as useBigmiConfig,
 } from '@lifi/wallet-management';
 import type { Theme } from '@mui/material';
 import { useMediaQuery } from '@mui/material';
@@ -15,7 +14,7 @@ import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useMemo } from 'react';
 import type { Connector } from 'wagmi';
-import { useAccount, useConnect } from 'wagmi';
+import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
 import { defaultCoinbaseConfig } from '../config/coinbase.js';
 import { defaultMetaMaskConfig } from '../config/metaMask.js';
 import { defaultWalletConnectConfig } from '../config/walletConnect.js';
@@ -26,11 +25,8 @@ export const useWallets = (
   walletConfig?: WidgetWalletConfig,
   chains?: WidgetChains,
 ) => {
-  const bigmiConfig = useBigmiConfig();
-  const wagmiAccount = useAccount();
-  const bigmiAccount = useAccount({ config: bigmiConfig });
-  const { connectors: wagmiConnectors } = useConnect();
-  const { connectors: bigmiConnectors } = useConnect({ config: bigmiConfig });
+  const account = useWagmiAccount();
+  const { connectors } = useConnect();
   const { wallets: solanaWallets } = useWallet();
 
   const isDesktopView = useMediaQuery((theme: Theme) =>
@@ -39,9 +35,9 @@ export const useWallets = (
 
   const wallets = useMemo(() => {
     const evmConnectors: (CreateConnectorFnExtended | Connector)[] =
-      Array.from(wagmiConnectors);
+      Array.from(connectors);
     if (
-      !wagmiConnectors.some((connector) =>
+      !connectors.some((connector) =>
         connector.id.toLowerCase().includes('walletconnect'),
       )
     ) {
@@ -52,7 +48,7 @@ export const useWallets = (
       );
     }
     if (
-      !wagmiConnectors.some((connector) =>
+      !connectors.some((connector) =>
         connector.id.toLowerCase().includes('coinbase'),
       ) &&
       !isWalletInstalled('coinbase')
@@ -64,7 +60,7 @@ export const useWallets = (
       );
     }
     if (
-      !wagmiConnectors.some((connector) =>
+      !connectors.some((connector) =>
         connector.id.toLowerCase().includes('metamask'),
       ) &&
       !isWalletInstalled('metaMask')
@@ -78,24 +74,13 @@ export const useWallets = (
     const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
       ? evmConnectors.filter(
           (connector) =>
-            isWalletInstalled(connector.id) &&
+            isWalletInstalled(connector.id!) &&
             // We should not show already connected connectors
-            wagmiAccount.connector?.id !== connector.id,
+            account.connector?.id !== connector.id,
         )
       : [];
     const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
-      ? evmConnectors.filter((connector) => !isWalletInstalled(connector.id))
-      : [];
-    const utxoInstalled = isItemAllowed(ChainType.UTXO, chains?.types)
-      ? bigmiConnectors.filter(
-          (connector) =>
-            isWalletInstalled(connector.id) &&
-            // We should not show already connected connectors
-            bigmiAccount.connector?.id !== connector.id,
-        )
-      : [];
-    const utxoNotDetected = isItemAllowed(ChainType.UTXO, chains?.types)
-      ? bigmiConnectors.filter((connector) => !isWalletInstalled(connector.id!))
+      ? evmConnectors.filter((connector) => !isWalletInstalled(connector.id!))
       : [];
     const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
       ? solanaWallets?.filter(
@@ -112,33 +97,27 @@ export const useWallets = (
         )
       : [];
 
-    const installedWallets = [
-      ...evmInstalled,
-      ...svmInstalled,
-      ...utxoInstalled,
-    ].sort(walletComparator);
+    const installedWallets = [...evmInstalled, ...svmInstalled].sort(
+      walletComparator,
+    );
 
     if (isDesktopView) {
-      const notDetectedWallets = [
-        ...evmNotDetected,
-        ...svmNotDetected,
-        ...utxoNotDetected,
-      ].sort(walletComparator);
+      const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(
+        walletComparator,
+      );
       installedWallets.push(...notDetectedWallets);
     }
 
     return installedWallets;
   }, [
-    wagmiConnectors,
+    account.connector?.id,
     chains?.types,
-    bigmiConnectors,
-    solanaWallets,
+    connectors,
     isDesktopView,
-    walletConfig?.walletConnect,
+    solanaWallets,
     walletConfig?.coinbase,
     walletConfig?.metaMask,
-    bigmiAccount.connector?.id,
-    wagmiAccount.connector?.id,
+    walletConfig?.walletConnect,
   ]);
 
   return wallets;

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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.6.0-alpha.5",
+  "version": "3.6.1",
   "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,27 +34,27 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.3.0-alpha.3",
-    "@lifi/wallet-management": "^3.2.0-alpha.5",
+    "@lifi/sdk": "^3.2.3",
+    "@lifi/wallet-management": "^3.1.6",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.3",
-    "@tanstack/react-query": "^5.56.0",
-    "@tanstack/react-virtual": "^3.10.7",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-virtual": "^3.10.8",
     "i18next": "^23.15.1",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^15.0.2",
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
     "uuid": "^10.0.0",
-    "viem": "^2.21.6",
-    "wagmi": "^2.12.11",
+    "viem": "^2.21.9",
+    "wagmi": "^2.12.12",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -6,28 +6,28 @@ import {
 } from '@lifi/wallet-management';
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Connector } from 'wagmi';
-import { useConfig } from 'wagmi';
-import { connect, disconnect, getAccount } from 'wagmi/actions';
+import { useConnect, useDisconnect } from 'wagmi';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
-import { useLastConnectedAccount } from '../../hooks/useAccount.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { WidgetEvent } from '../../types/events.js';
 
 interface EVMListItemButtonProps {
+  connectedConnector?: Connector;
   connector: CreateConnectorFnExtended | Connector;
   onNotInstalled(connector: Connector): void;
 }
 
 export const EVMListItemButton = ({
+  connectedConnector,
   connector,
   onNotInstalled,
 }: EVMListItemButtonProps) => {
   const { navigateBack } = useNavigateBack();
   const emitter = useWidgetEvents();
-  const config = useConfig();
-  const { setLastConnectedAccount } = useLastConnectedAccount();
+  const { connectAsync } = useConnect();
+  const { disconnectAsync } = useDisconnect();
 
   const handleEVMConnect = async () => {
     const identityCheckPassed = await isWalletInstalledAsync(
@@ -37,17 +37,21 @@ export const EVMListItemButton = ({
       onNotInstalled(connector as Connector);
       return;
     }
-    const connectedAccount = getAccount(config);
-    if (connectedAccount.connector) {
-      await disconnect(config, { connector: connectedAccount.connector });
+    if (connectedConnector) {
+      await disconnectAsync({ connector: connectedConnector });
     }
-    const data = await connect(config, { connector });
-    setLastConnectedAccount(connector);
-    emitter.emit(WidgetEvent.WalletConnected, {
-      address: data.accounts[0],
-      chainId: data.chainId,
-      chainType: ChainType.EVM,
-    });
+    await connectAsync(
+      { connector },
+      {
+        onSuccess(data) {
+          emitter.emit(WidgetEvent.WalletConnected, {
+            address: data.accounts[0],
+            chainId: data.chainId,
+            chainType: ChainType.EVM,
+          });
+        },
+      },
+    );
     navigateBack();
   };
 

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -4,7 +4,6 @@ import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
-import { useLastConnectedAccount } from '../../hooks/useAccount.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { WidgetEvent } from '../../types/events.js';
@@ -17,7 +16,6 @@ export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
   const { navigateBack } = useNavigateBack();
   const emitter = useWidgetEvents();
   const { select, disconnect, connected } = useWallet();
-  const { setLastConnectedAccount } = useLastConnectedAccount();
 
   const connect = async () => {
     if (connected) {
@@ -27,7 +25,6 @@ export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
     // We use autoConnect on wallet selection
     // await solanaConnect();
     wallet.adapter.once('connect', (publicKey) => {
-      setLastConnectedAccount(wallet.adapter);
       emitter.emit(WidgetEvent.WalletConnected, {
         address: publicKey?.toString(),
         chainId: ChainId.SOL,

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,4 +1,3 @@
-import { ChainType } from '@lifi/sdk';
 import {
   Button,
   DialogActions,
@@ -10,6 +9,7 @@ import type { Wallet } from '@solana/wallet-adapter-react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Connector } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { useHeader } from '../../hooks/useHeader.js';
@@ -17,11 +17,11 @@ import { useWallets } from '../../hooks/useWallets.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { EVMListItemButton } from './EVMListItemButton.js';
 import { SVMListItemButton } from './SVMListItemButton.js';
-import { UTXOListItemButton } from './UTXOListItemButton.js';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
   const { chains, walletConfig } = useWidgetConfig();
+  const account = useWagmiAccount();
   const [walletIdentity, setWalletIdentity] = useState<{
     show: boolean;
     connector?: Connector;
@@ -56,16 +56,11 @@ export const SelectWalletPage = () => {
         }}
       >
         {wallets?.map((connector) =>
-          (connector as Connector).type === ChainType.UTXO ? (
-            <UTXOListItemButton
-              key={(connector as Connector).id}
-              connector={connector as Connector}
-              onNotInstalled={handleNotInstalled}
-            />
-          ) : (connector as Connector).id ? (
+          (connector as Connector).id ? (
             <EVMListItemButton
               key={(connector as Connector).id}
               connector={connector as Connector}
+              connectedConnector={account.connector}
               onNotInstalled={handleNotInstalled}
             />
           ) : (

package/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -25,7 +25,7 @@ export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
 
   const openTransferIdInExplorer = () => {
     const txHash = getTxHash(transferId);
-    window.open(getTransactionLink(txHash), '_blank');
+    window.open(getTransactionLink({ txHash }), '_blank');
   };
 
   return (

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -85,6 +85,7 @@ export const StatusBottomSheetContent: React.FC<
     subvariantOptions,
     contractSecondaryComponent,
     contractCompactComponent,
+    feeConfig,
   } = useWidgetConfig();
   const { getChainById } = useAvailableChains();
 
@@ -251,6 +252,9 @@ export const StatusBottomSheetContent: React.FC<
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
     (contractCompactComponent || contractSecondaryComponent);
 
+  const VcComponent =
+    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined;
+
   return (
     <Box p={3} ref={ref}>
       {!showContractComponent ? (
@@ -296,6 +300,7 @@ export const StatusBottomSheetContent: React.FC<
       {secondaryMessage ? (
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
+      {VcComponent ? <VcComponent route={route} /> : null}
       <Box mt={2}>
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}

package/providers/I18nProvider/types.ts

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

package/providers/WalletProvider/SDKProviders.tsx

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

package/providers/WalletProvider/WalletProvider.tsx

@@ -2,16 +2,13 @@ import { type FC, type PropsWithChildren } from 'react';
 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 />
-          {children}
-        </UTXOProvider>
+        <SDKProviders />
+        {children}
       </SVMProvider>
     </EVMProvider>
   );

package/providers/WalletProvider/useHasExternalWalletProvider.ts

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

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -2,9 +2,7 @@ import { config, createConfig, type SDKConfig } from '@lifi/sdk';
 import { createContext, useContext, useId, useMemo } from 'react';
 import { version } from '../../config/version.js';
 import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js';
-import { formatInputAmount } from '../../utils/format.js';
 import type { WidgetContextProps, WidgetProviderProps } from './types.js';
-import { attemptToFindMatchingToAddressInConfig } from './utils.js';
 
 const initialContext: WidgetContextProps = {
   elementId: '',
@@ -29,45 +27,9 @@ export const WidgetProvider: React.FC<
 
   const value = useMemo((): WidgetContextProps => {
     try {
-      // Get search params from URL
-      const searchParams = Object.fromEntries(
-        new URLSearchParams(window?.location.search),
-      );
-      // Prevent using fromToken/toToken params if chain is not selected
-      ['from', 'to'].forEach((key) => {
-        if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
-          delete searchParams[`${key}Token`];
-        }
-      });
       // Create widget configuration object
       const value = {
         ...widgetConfig,
-        fromChain:
-          (searchParams.fromChain &&
-            !isNaN(parseInt(searchParams.fromChain, 10))) ||
-          typeof widgetConfig.fromChain === 'number'
-            ? parseInt(searchParams.fromChain, 10) || widgetConfig.fromChain
-            : undefined,
-        toChain:
-          (searchParams.toChain &&
-            !isNaN(parseInt(searchParams.toChain, 10))) ||
-          typeof widgetConfig.toChain === 'number'
-            ? parseInt(searchParams.toChain, 10) || widgetConfig.toChain
-            : undefined,
-        fromToken: searchParams.fromToken || widgetConfig.fromToken,
-        toToken: searchParams.toToken || widgetConfig.toToken,
-        fromAmount:
-          typeof searchParams.fromAmount === 'string' &&
-          !isNaN(parseFloat(searchParams.fromAmount))
-            ? formatInputAmount(searchParams.fromAmount)
-            : widgetConfig.fromAmount,
-        toAddress: searchParams.toAddress
-          ? attemptToFindMatchingToAddressInConfig(
-              searchParams.toAddress,
-              widgetConfig,
-            )
-          : widgetConfig.toAddress,
-        integrator: widgetConfig.integrator,
         elementId,
       } as WidgetContextProps;
 
@@ -88,7 +50,7 @@ export const WidgetProvider: React.FC<
         },
         disableVersionCheck: true,
         widgetVersion: version,
-        // preloadChains: false,
+        preloadChains: false,
       };
       if (!sdkInitialized) {
         createConfig(_config);

package/stores/StoreProvider.tsx

@@ -10,6 +10,7 @@ import { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore
 export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   children,
   config,
+  formRef,
 }) => {
   return (
     <SplitSubvariantStoreProvider
@@ -20,15 +21,15 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
       }
     >
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
-        <FormStoreProvider>
-          <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+        <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+          <FormStoreProvider formRef={formRef}>
             <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
               <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
                 {children}
               </RouteExecutionStoreProvider>
             </ChainOrderStoreProvider>
-          </BookmarkStoreProvider>
-        </FormStoreProvider>
+          </FormStoreProvider>
+        </BookmarkStoreProvider>
       </HeaderStoreProvider>
     </SplitSubvariantStoreProvider>
   );