@lifi/widget 3.6.0-alpha.5 → 3.6.0

package/components/Step/StepProcess.tsx

@@ -30,11 +30,21 @@ export const StepProcess: React.FC<{
         >
           {title}
         </Typography>
-        {process.txHash ? (
+        {process.txHash || process.txLink ? (
           <CardIconButton
             size="small"
             LinkComponent={Link}
-            href={getTransactionLink(process.txHash, step.action.fromChainId)}
+            href={
+              process.txHash
+                ? getTransactionLink({
+                    txHash: process.txHash,
+                    chain: process.chainId,
+                  })
+                : getTransactionLink({
+                    txLink: process.txLink!,
+                    chain: process.chainId,
+                  })
+            }
             target="_blank"
             rel="nofollow noreferrer"
           >

package/components/TokenList/TokenListItem.tsx

@@ -1,4 +1,3 @@
-import { ChainType } from '@lifi/sdk';
 import { OpenInNewRounded } from '@mui/icons-material';
 import {
   Avatar,
@@ -27,7 +26,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
   start,
   token,
   chain,
-  accountAddress,
+  showBalance,
   isBalanceLoading,
   startAdornment,
   endAdornment,
@@ -47,7 +46,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
       <TokenListItemButton
         token={token}
         chain={chain}
-        accountAddress={accountAddress}
+        showBalance={showBalance}
         isBalanceLoading={isBalanceLoading}
         onClick={handleClick}
       />
@@ -60,7 +59,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   onClick,
   token,
   chain,
-  accountAddress,
+  showBalance,
   isBalanceLoading,
 }) => {
   const { t } = useTranslation();
@@ -76,15 +75,8 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   const timeoutId = useRef<ReturnType<typeof setTimeout>>();
   const [showAddress, setShowAddress] = useState(false);
 
-  const tokenAddress =
-    chain?.chainType === ChainType.UTXO ? accountAddress : token.address;
-
   const onMouseEnter = () => {
-    timeoutId.current = setTimeout(() => {
-      if (tokenAddress) {
-        setShowAddress(true);
-      }
-    }, 350);
+    timeoutId.current = setTimeout(() => setShowAddress(true), 350);
   };
 
   const onMouseLeave = () => {
@@ -136,12 +128,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
             >
               <Box display="flex">
                 <Box display="flex" alignItems="center" pt={0.125}>
-                  {shortenAddress(tokenAddress)}
+                  {shortenAddress(token.address)}
                 </Box>
                 <IconButton
                   size="small"
                   LinkComponent={Link}
-                  href={getAddressLink(tokenAddress!, chain)}
+                  href={getAddressLink(token.address, chain)}
                   target="_blank"
                   rel="nofollow noreferrer"
                   onClick={(e) => e.stopPropagation()}
@@ -153,7 +145,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
           </Box>
         }
       />
-      {accountAddress ? (
+      {showBalance ? (
         isBalanceLoading ? (
           <TokenAmountSkeleton />
         ) : (

package/components/TokenList/VirtualizedTokenList.tsx

@@ -127,7 +127,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             token={currentToken}
             chain={chain}
             isBalanceLoading={isBalanceLoading}
-            accountAddress={account.address}
+            showBalance={account.isConnected}
             startAdornment={
               startAdornmentLabel ? (
                 <Typography

package/components/TokenList/types.ts

@@ -30,7 +30,7 @@ export interface TokenListItemBaseProps {
 }
 
 export interface TokenListItemProps extends TokenListItemBaseProps {
-  accountAddress?: string;
+  showBalance?: boolean;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;
@@ -40,7 +40,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 
 export interface TokenListItemButtonProps {
   onClick?: MouseEventHandler<HTMLDivElement>;
-  accountAddress?: string;
+  showBalance?: boolean;
   token: TokenAmount;
   chain?: ExtendedChain;
   isBalanceLoading?: boolean;

package/components/TokenRate/TokenRate.tsx

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

package/components/TransactionDetails.tsx

@@ -75,6 +75,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       parseFloat(feeCollectionStep.action.fromToken.priceUSD);
   }
 
+  const showIntegratorFeeCollectionDetails =
+    feeAmountUSD || Number.isFinite(feeConfig?.fee);
+
   return (
     <Card selectionColor="secondary" {...props}>
       <Box display="flex" alignItems="center" px={2} py={1.75}>
@@ -138,7 +141,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               </FeeBreakdownTooltip>
             </Box>
           ) : null}
-          {feeAmountUSD ? (
+          {showIntegratorFeeCollectionDetails ? (
             <Box display="flex" justifyContent="space-between" mb={0.5}>
               <Typography variant="body2">
                 {feeConfig?.name

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.6.0-alpha.5';
+export const version = '3.6.0';

package/hooks/useAccount.ts

@@ -1,21 +1,17 @@
 import { ChainId, ChainType } from '@lifi/sdk';
-import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
-import { useConfig as useBigmiConfig } from '@lifi/wallet-management';
 import type { WalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useMemo } from 'react';
 import type { Chain } from 'viem';
 import type { Connector } from 'wagmi';
-import { useAccount as useAccountInternal } from 'wagmi';
-import { create } from 'zustand';
+import { useAccount as useWagmiAccount } from 'wagmi';
 
-export interface AccountBase<CT extends ChainType, ConnectorType = undefined> {
+export interface AccountBase {
   address?: string;
   addresses?: readonly string[];
   chain?: Chain;
   chainId?: number;
-  chainType: CT;
-  connector?: ConnectorType;
+  chainType?: ChainType;
   isConnected: boolean;
   isConnecting: boolean;
   isDisconnected: boolean;
@@ -23,12 +19,21 @@ export interface AccountBase<CT extends ChainType, ConnectorType = undefined> {
   status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected';
 }
 
-export type EVMAccount = AccountBase<ChainType.EVM, Connector>;
-export type SVMAccount = AccountBase<ChainType.SVM, WalletAdapter>;
-export type UTXOAccount = AccountBase<ChainType.UTXO, Connector>;
-export type DefaultAccount = AccountBase<ChainType>;
+export interface EVMAccount extends AccountBase {
+  chainType: ChainType.EVM;
+  connector?: Connector;
+}
 
-export type Account = EVMAccount | SVMAccount | UTXOAccount | DefaultAccount;
+export interface SVMAccount extends AccountBase {
+  chainType: ChainType.SVM;
+  connector?: WalletAdapter;
+}
+
+export interface DefaultAccount extends AccountBase {
+  connector?: never;
+}
+
+export type Account = EVMAccount | SVMAccount | DefaultAccount;
 
 export interface AccountResult {
   account: Account;
@@ -42,8 +47,7 @@ interface UseAccountArgs {
   chainType?: ChainType;
 }
 
-const defaultAccount: AccountBase<ChainType> = {
-  chainType: ChainType.EVM,
+const defaultAccount: AccountBase = {
   isConnected: false,
   isConnecting: false,
   isReconnecting: false,
@@ -51,35 +55,18 @@ const defaultAccount: AccountBase<ChainType> = {
   status: 'disconnected',
 };
 
-export type LastConnectedAccount =
-  | WalletAdapter
-  | Connector
-  | CreateConnectorFnExtended
-  | null;
-
-interface LastConnectedAccountStore {
-  lastConnectedAccount: LastConnectedAccount;
-  setLastConnectedAccount: (account: LastConnectedAccount) => void;
-}
-
-export const useLastConnectedAccount = create<LastConnectedAccountStore>(
-  (set) => ({
-    lastConnectedAccount: null,
-    setLastConnectedAccount: (account) =>
-      set({ lastConnectedAccount: account }),
-  }),
-);
-
 /**
+ *
  * @param args When we provide args we want to return either account with corresponding chainType or default disconnected one
  * @returns - Account result
  */
 export const useAccount = (args?: UseAccountArgs): AccountResult => {
-  const bigmiConfig = useBigmiConfig();
-  const bigmiAccount = useAccountInternal({ config: bigmiConfig });
-  const wagmiAccount = useAccountInternal();
+  const account = useWagmiAccount();
   const { wallet } = useWallet();
-  const { lastConnectedAccount } = useLastConnectedAccount();
+
+  // We create a simple variable from the args object
+  // to avoid re-render useMemo on every object reference change.
+  const hasChainTypeArgs = Boolean(args);
 
   return useMemo(() => {
     const svm: Account = wallet?.adapter.publicKey
@@ -102,55 +89,21 @@ export const useAccount = (args?: UseAccountArgs): AccountResult => {
           isDisconnected: true,
           status: 'disconnected',
         };
-    const evm: Account = { ...wagmiAccount, chainType: ChainType.EVM };
-    const utxo: Account = { ...bigmiAccount, chainType: ChainType.UTXO };
-    const accounts = [evm, svm, utxo];
-    const connectedAccounts = accounts.filter(
+    const evm: Account = { ...account, chainType: ChainType.EVM };
+    const accounts = [evm, svm];
+    const connectedAccounts = [evm, svm].filter(
       (account) => account.isConnected && account.address,
     );
-
-    // If a chainType argument is provided, attempt to find a connected account with the matching chainType.
-    // If no matching account is found, fallback to the default account.
-    // If no chainType argument, selectedAccount should be used.
-    const selectedChainTypeAccount = args?.chainType
-      ? connectedAccounts.find(
-          (account) => account.chainType === args?.chainType,
-        ) || defaultAccount
-      : undefined;
-
-    // If lastConnectedAccount exists, attempt to find a connected account with a matching connector ID or name.
-    // If no matching account is found, fallback to the first connected account.
-    // If lastConnectedAccount is not present, simply select the first connected account.
-    const selectedAccount = lastConnectedAccount
-      ? connectedAccounts.find((account) => {
-          const connectorIdMatch =
-            (lastConnectedAccount as Connector)?.id ===
-            (account.connector as Connector)?.id;
-          const connectorNameMatch =
-            !(lastConnectedAccount as Connector)?.id &&
-            (lastConnectedAccount as WalletAdapter)?.name ===
-              account.connector?.name;
-          return connectorIdMatch || connectorNameMatch;
-        }) || connectedAccounts[0]
-      : connectedAccounts[0];
-
     return {
-      account: selectedChainTypeAccount || selectedAccount || defaultAccount,
+      account:
+        accounts.find(
+          (account) =>
+            (!hasChainTypeArgs || account.chainType === args?.chainType) &&
+            account.isConnected &&
+            account.address,
+        ) ?? defaultAccount,
       // We need to return only connected account list
       accounts: connectedAccounts,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    wallet,
-    wagmiAccount.connector?.uid,
-    wagmiAccount.connector?.id,
-    wagmiAccount.status,
-    wagmiAccount.address,
-    bigmiAccount.connector?.uid,
-    bigmiAccount.connector?.id,
-    bigmiAccount.status,
-    bigmiAccount.address,
-    args?.chainType,
-    lastConnectedAccount,
-  ]);
+  }, [account, args?.chainType, hasChainTypeArgs, wallet]);
 };

package/hooks/useAvailableChains.ts

@@ -2,31 +2,32 @@ 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, ChainType.UTXO];
+const supportedChainTypes = [ChainType.EVM, ChainType.SVM];
 
-export const useAvailableChains = (chainTypes?: ChainType[]) => {
+export const useAvailableChains = () => {
   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: [, chainTypesConfig] }) => {
-      const chainTypesRequest = supportedChainTypes
-        // providers.length > 0 ? providers : supportedChainTypes
-        .filter((chainType) => isItemAllowed(chainType, chainTypesConfig));
+    queryFn: async ({ queryKey: [, providers, chainTypes] }) => {
+      const chainTypesRequest = (
+        providers.length > 0 ? providers : supportedChainTypes
+      ).filter((chainType) => isItemAllowed(chainType, chainTypes));
 
       const availableChains = await getChains({
-        chainTypes: chainTypes || chainTypesRequest,
+        chainTypes: chainTypesRequest,
       });
       config.setChains(availableChains);
       return availableChains;

package/hooks/useChains.ts

@@ -1,11 +1,10 @@
-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, chainTypes?: ChainType[]) => {
+export const useChains = (type?: FormType) => {
   const { chains } = useWidgetConfig();
   const {
     chains: availableChains,
@@ -18,13 +17,11 @@ export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
       ? availableChains?.filter(
           (chain) =>
             isItemAllowed(chain.id, chains) &&
-            isItemAllowed(chain.id, chains?.[type]) &&
-            // Check against chain types if they are provided
-            (chainTypes?.includes(chain.chainType) ?? true),
+            isItemAllowed(chain.id, chains?.[type]),
         )
       : availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
     return filteredChains;
-  }, [availableChains, chainTypes, chains, type]);
+  }, [availableChains, chains, type]);
 
   return {
     chains: filteredChains,

package/hooks/useExplorer.ts

@@ -5,6 +5,17 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '');
 
+export type TransactionLinkProps = { chain?: Chain | number } & (
+  | {
+      txHash: string;
+      txLink?: never;
+    }
+  | {
+      txHash?: never;
+      txLink: string;
+    }
+);
+
 export const useExplorer = () => {
   const { explorerUrls } = useWidgetConfig();
   const { getChainById } = useAvailableChains();
@@ -20,14 +31,20 @@ export const useExplorer = () => {
   const resolveChain = (chain: Chain | number) =>
     Number.isFinite(chain) ? getChainById(chain as number) : (chain as Chain);
 
-  const getTransactionLink = (txHash: string, chain?: Chain | number) => {
+  const getTransactionLink = ({
+    txHash,
+    txLink,
+    chain,
+  }: TransactionLinkProps) => {
+    if (!txHash && txLink) {
+      return txLink;
+    }
     if (!chain) {
       const baseUrl = explorerUrls?.internal?.[0]
         ? sanitiseBaseUrl(explorerUrls?.internal[0])
         : lifiExplorerUrl;
       return `${baseUrl}/tx/${txHash}`;
     }
-
     const resolvedChain = resolveChain(chain);
     return `${resolvedChain ? getBaseUrl(resolvedChain) : lifiExplorerUrl}/tx/${txHash}`;
   };

package/hooks/useGasSufficiency.ts

@@ -44,8 +44,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
-                (amount, gasCost) =>
-                  amount + BigInt(Number(gasCost.amount).toFixed(0)),
+                (amount, gasCost) => amount + BigInt(gasCost.amount),
                 0n,
               );
               groupedGasCosts[token.chainId] = {
@@ -62,8 +61,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             if (nonIncludedFeeCosts?.length) {
               const { token } = nonIncludedFeeCosts[0];
               const feeCostAmount = nonIncludedFeeCosts.reduce(
-                (amount, feeCost) =>
-                  amount + BigInt(Number(feeCost.amount).toFixed(0)),
+                (amount, feeCost) => amount + BigInt(feeCost.amount),
                 0n,
               );
               groupedGasCosts[token.chainId] = {

package/hooks/useHeaderHeight.ts

@@ -1,16 +1,23 @@
+import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 
 export const minHeaderHeight = 64;
 export const maxHeaderHeight = 108;
 export const maxHeaderHeightSubvariantSplit = 136;
 
+// We use fixed position on the header when Widget is in Full Height layout.
+// We do this to get it to work like the sticky header does in the other layout modes.
+// As the header is position fixed its not in the document flow anymore.
+// To prevent the remaining page content from appearing behind the header we need to
+// pass the headers height so that the position of the page content can be adjusted
 export const useHeaderHeight = () => {
   const { hiddenUI, subvariant } = useWidgetConfig();
+  const { hasExternalProvider } = useHasExternalWalletProvider();
 
   const headerHeight =
     subvariant === 'split'
       ? maxHeaderHeightSubvariantSplit
-      : hiddenUI?.includes('walletMenu')
+      : hiddenUI?.includes('walletMenu') || hasExternalProvider
         ? minHeaderHeight
         : maxHeaderHeight;
 

package/hooks/useTokens.ts

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

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