@lifi/widget 3.0.0-alpha.12 → 3.0.0-alpha.13

package/components/Header/WalletHeader.tsx

@@ -9,8 +9,11 @@ import type { Connector } from 'wagmi';
 import type { Account } from '../../hooks';
 import { useAccount, useChain } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider';
+import { HiddenUI } from '../../types';
 import { navigationRoutes, shortenAddress } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
+import { CloseDrawerButton } from './CloseDrawerButton';
 import {
   DrawerWalletContainer,
   HeaderAppBar,
@@ -20,16 +23,28 @@ import { WalletMenu } from './WalletMenu';
 import { WalletMenuContainer } from './WalletMenu.style';
 
 export const WalletHeader: React.FC = () => {
-  return (
+  const { subvariant, hiddenUI } = useWidgetConfig();
+  const { hasExternalProvider } = useHasExternalWalletProvider();
+  return !hasExternalProvider &&
+    subvariant !== 'split' &&
+    !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
     <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
       <WalletMenuButton />
     </HeaderAppBar>
-  );
+  ) : null;
+};
+
+export const SplitWalletMenuButton: React.FC = () => {
+  const { hiddenUI } = useWidgetConfig();
+  const { hasExternalProvider } = useHasExternalWalletProvider();
+  return !hasExternalProvider && !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
+    <WalletMenuButton />
+  ) : null;
 };
 
 export const WalletMenuButton: React.FC = () => {
   const { account } = useAccount();
-  const { variant } = useWidgetConfig();
+  const { variant, subvariant, hiddenUI } = useWidgetConfig();
 
   if (variant === 'drawer') {
     return (
@@ -39,6 +54,10 @@ export const WalletMenuButton: React.FC = () => {
         ) : (
           <ConnectButton />
         )}
+        {subvariant !== 'split' &&
+        !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+          <CloseDrawerButton />
+        ) : null}
       </DrawerWalletContainer>
     );
   }
@@ -52,11 +71,11 @@ export const WalletMenuButton: React.FC = () => {
 const ConnectButton = () => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
-  const { walletManagement, subvariant, variant } = useWidgetConfig();
+  const { walletConfig, subvariant, variant } = useWidgetConfig();
   const navigate = useNavigate();
   const connect = async () => {
-    if (walletManagement) {
-      await walletManagement.connect();
+    if (walletConfig?.onConnect) {
+      walletConfig.onConnect();
       return;
     }
     navigate(navigationRoutes.selectWallet);

package/components/Header/WalletMenu.tsx

@@ -11,14 +11,14 @@ import {
   IconButton,
   MenuItem,
 } from '@mui/material';
-import { useWallet } from '@solana/wallet-adapter-react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import type { Connector } from 'wagmi';
-import { useDisconnect } from 'wagmi';
 import { useAccount, useAvailableChains } from '../../hooks';
 import { navigationRoutes, shortenAddress } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
+import { EVMDisconnectIconButton } from './EVMDisconnectIconButton.js';
+import { SVMDisconnectIconButton } from './SVMDisconnectIconButton.js';
 
 export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
@@ -34,72 +34,70 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
   return (
     <Box>
       <Box display="flex" flexDirection="column">
-        {accounts
-          .filter((account) => account.isConnected)
-          .map((account) => {
-            const chain = getChainById(account.chainId);
-            const walletAddress = shortenAddress(account.address);
-            const handleCopyAddress = async () => {
-              await navigator.clipboard.writeText(account.address ?? '');
-              onClose();
-            };
-            const avatar = (
-              <Avatar
-                src={
-                  account.connector?.icon ||
-                  getWalletIcon((account.connector as Connector)?.id)
-                }
-                alt={account.connector?.name}
-                sx={{
-                  marginRight: chain?.logoURI ? 0 : 1.5,
-                }}
-              >
-                {account.connector?.name[0]}
-              </Avatar>
-            );
-            return (
-              <MenuItem key={account.address}>
-                <Box flex={1} display="flex" alignItems="center">
-                  {chain?.logoURI ? (
-                    <Badge
-                      overlap="circular"
-                      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-                      badgeContent={
-                        <SmallAvatar src={chain?.logoURI} alt={chain?.name}>
-                          {chain?.name[0]}
-                        </SmallAvatar>
-                      }
-                      sx={{ marginRight: 1.5 }}
-                    >
-                      {avatar}
-                    </Badge>
-                  ) : (
-                    avatar
-                  )}
-                  {walletAddress}
-                </Box>
-                <Box ml={1}>
-                  <IconButton size="medium" onClick={handleCopyAddress}>
-                    <ContentCopyIcon />
-                  </IconButton>
-                  <IconButton
-                    size="medium"
-                    component="a"
-                    onClick={onClose}
-                    href={`${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`}
-                    target="_blank"
+        {accounts.map((account) => {
+          const chain = getChainById(account.chainId);
+          const walletAddress = shortenAddress(account.address);
+          const handleCopyAddress = async () => {
+            await navigator.clipboard.writeText(account.address ?? '');
+            onClose();
+          };
+          const avatar = (
+            <Avatar
+              src={
+                account.connector?.icon ||
+                getWalletIcon((account.connector as Connector)?.id)
+              }
+              alt={account.connector?.name}
+              sx={{
+                marginRight: chain?.logoURI ? 0 : 1.5,
+              }}
+            >
+              {account.connector?.name[0]}
+            </Avatar>
+          );
+          return (
+            <MenuItem key={account.address}>
+              <Box flex={1} display="flex" alignItems="center">
+                {chain?.logoURI ? (
+                  <Badge
+                    overlap="circular"
+                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                    badgeContent={
+                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>
+                        {chain?.name[0]}
+                      </SmallAvatar>
+                    }
+                    sx={{ marginRight: 1.5 }}
                   >
-                    <OpenInNewIcon />
-                  </IconButton>
-                  {account.chainType === ChainType.EVM ? (
-                    <EVMDisconnectIconButton connector={account.connector} />
-                  ) : account.chainType === ChainType.SVM ? (
-                    <SVMDisconnectIconButton />
-                  ) : null}
-                </Box>
-              </MenuItem>
-            );
-          })}
+                    {avatar}
+                  </Badge>
+                ) : (
+                  avatar
+                )}
+                {walletAddress}
+              </Box>
+              <Box ml={1}>
+                <IconButton size="medium" onClick={handleCopyAddress}>
+                  <ContentCopyIcon />
+                </IconButton>
+                <IconButton
+                  size="medium"
+                  component="a"
+                  onClick={onClose}
+                  href={`${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`}
+                  target="_blank"
+                >
+                  <OpenInNewIcon />
+                </IconButton>
+                {account.chainType === ChainType.EVM ? (
+                  <EVMDisconnectIconButton connector={account.connector} />
+                ) : account.chainType === ChainType.SVM ? (
+                  <SVMDisconnectIconButton />
+                ) : null}
+              </Box>
+            </MenuItem>
+          );
+        })}
       </Box>
       {!pathname.includes(navigationRoutes.selectWallet) ? (
         <Button
@@ -110,7 +108,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
             marginTop: 1,
           }}
         >
-          {accounts.filter((account) => account.isConnected).length > 1
+          {accounts.length > 1
             ? t(`button.changeWallet`)
             : t(`button.connectWallet`)}
         </Button>
@@ -118,35 +116,3 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
     </Box>
   );
 };
-
-const EVMDisconnectIconButton = ({ connector }: { connector?: Connector }) => {
-  const { disconnect } = useDisconnect();
-
-  return (
-    <IconButton
-      size="medium"
-      onClick={(e) => {
-        e.stopPropagation();
-        disconnect({ connector });
-      }}
-    >
-      <PowerSettingsNewIcon />
-    </IconButton>
-  );
-};
-
-const SVMDisconnectIconButton = () => {
-  const { disconnect } = useWallet();
-
-  return (
-    <IconButton
-      size="medium"
-      onClick={(e) => {
-        e.stopPropagation();
-        disconnect();
-      }}
-    >
-      <PowerSettingsNewIcon />
-    </IconButton>
-  );
-};

package/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -15,19 +15,19 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 92 : 256,
+      width: compact ? 88 : 256,
       fontSize: compact && !selected ? 16 : 18,
       [theme.breakpoints.down(392)]: {
-        width: compact ? 92 : 224,
+        width: compact ? 88 : 224,
       },
     },
     [`.${cardHeaderClasses.subheader}`]: {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 92 : 256,
+      width: compact ? 88 : 256,
       [theme.breakpoints.down(392)]: {
-        width: compact ? 92 : 224,
+        width: compact ? 88 : 224,
       },
     },
   }),

package/components/SelectTokenButton/SelectTokenButton.tsx

@@ -73,8 +73,16 @@ export const SelectTokenButton: React.FC<
             )
           }
           title={isSelected ? token.symbol : defaultPlaceholder}
-          subheader={
-            isSelected ? t(`main.onChain`, { chainName: chain.name }) : null
+          titleTypographyProps={{
+            title: isSelected ? token.symbol : defaultPlaceholder,
+          }}
+          subheader={isSelected ? chain.name : null}
+          subheaderTypographyProps={
+            isSelected
+              ? {
+                  title: chain.name,
+                }
+              : undefined
           }
           selected={isSelected}
           compact={compact}

package/components/StepActions/StepFeeBreakdown.tsx

@@ -25,7 +25,7 @@ export const StepFeeBreakdown: React.FC<{
       : 0;
     fees += amountUSD;
     feeComponents.push(
-      <Box mt={0.5} ml={7} key="network">
+      <Box ml={7} key="network">
         <Typography
           fontSize={12}
           lineHeight={2}
@@ -59,7 +59,7 @@ export const StepFeeBreakdown: React.FC<{
         : 0;
       fees += amountUSD;
       feeComponents.push(
-        <Box mt={0.5} ml={7} key="bridge">
+        <Box mt={feeComponents.length ? 0.5 : 0} ml={7} key="bridge">
           <Typography
             fontSize={12}
             lineHeight={2}

package/components/TokenList/TokenList.tsx

@@ -2,18 +2,17 @@ import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useRef } from 'react';
 import {
-  useAccount,
   useChain,
   useDebouncedWatch,
   useTokenBalances,
   useTokenSearch,
 } from '../../hooks';
+import { FormKeyHelper, useFieldValues } from '../../stores';
 import type { TokenAmount } from '../../types';
 import { TokenNotFound } from './TokenNotFound';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 import type { TokenListProps } from './types';
 import { useTokenSelect } from './useTokenSelect';
-import { useFieldValues, FormKeyHelper } from '../../stores';
 
 export const TokenList: FC<TokenListProps> = ({
   formType,
@@ -21,11 +20,10 @@ export const TokenList: FC<TokenListProps> = ({
   onClick,
 }) => {
   const parentRef = useRef<HTMLUListElement | null>(null);
-  const { account } = useAccount();
   const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
   const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    ['tokenSearchFilter'],
     320,
+    'tokenSearchFilter',
   );
 
   const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
@@ -86,7 +84,6 @@ export const TokenList: FC<TokenListProps> = ({
         chain={chain}
         isLoading={isLoading}
         isBalanceLoading={isBalanceLoading}
-        showBalance={account.isConnected}
         showFeatured={!tokenSearchFilter}
         onClick={handleTokenClick}
       />

package/components/TokenList/VirtualizedTokenList.tsx

@@ -3,6 +3,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAccount } from '../../hooks';
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
 import type { VirtualizedTokenListProps } from './types';
 
@@ -14,10 +15,10 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   chain,
   isLoading,
   isBalanceLoading,
-  showBalance,
   showFeatured,
   onClick,
 }) => {
+  const { isConnected } = useAccount();
   const { t } = useTranslation();
 
   const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
@@ -83,7 +84,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             token={token}
             chain={chain}
             isBalanceLoading={isBalanceLoading}
-            showBalance={showBalance}
+            showBalance={isConnected}
             startAdornment={
               hasFeaturedTokens && token.featured && item.index === 0 ? (
                 <Typography

package/components/TokenList/types.ts

@@ -15,9 +15,8 @@ export interface VirtualizedTokenListProps {
   scrollElementRef: MutableRefObject<HTMLElement | null>;
   isLoading: boolean;
   isBalanceLoading: boolean;
-  chainId: number;
+  chainId?: number;
   chain?: ExtendedChain;
-  showBalance?: boolean;
   showFeatured?: boolean;
   onClick(tokenAddress: string): void;
 }

package/components/TokenList/useTokenSelect.ts

@@ -1,11 +1,11 @@
 import { WidgetEvent, useWidgetEvents } from '@lifi/widget';
 import { useCallback } from 'react';
-import type { FormType } from '../../stores';
 import { useWidgetConfig } from '../../providers';
+import type { FormType } from '../../stores';
 import {
+  FormKeyHelper,
   useFieldActions,
   useFieldController,
-  FormKeyHelper,
 } from '../../stores';
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
@@ -48,10 +48,12 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
           ? WidgetEvent.SourceChainTokenSelected
           : WidgetEvent.DestinationChainTokenSelected;
 
-      emitter.emit(eventToEmit, {
-        chainId: selectedChainId,
-        tokenAddress,
-      });
+      if (selectedChainId) {
+        emitter.emit(eventToEmit, {
+          chainId: selectedChainId,
+          tokenAddress,
+        });
+      }
 
       onClick?.();
     },

package/config/queryClient.ts

@@ -4,7 +4,6 @@ export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       enabled: true,
-      staleTime: 3_600_000,
       refetchInterval: false,
       refetchIntervalInBackground: false,
       refetchOnWindowFocus: true,

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.12';
+export const version = '3.0.0-alpha.13';

package/config/walletConnect.ts

@@ -0,0 +1 @@
+export const defaultWalletConnectProjectId = '5432e3507d41270bee46b7b85bbc2ef8';

package/hooks/useAccount.ts

@@ -4,7 +4,7 @@ import { useWallet } from '@solana/wallet-adapter-react';
 import { useMemo } from 'react';
 import type { Chain } from 'viem';
 import type { Connector } from 'wagmi';
-import { useDisconnect, useAccount as useWagmiAccount } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
 
 export interface AccountBase {
   address?: string;
@@ -33,7 +33,11 @@ export type Account = EVMAccount | SVMAccount;
 
 export interface AccountResult {
   account: Account;
+  /**
+   * Connected accounts
+   */
   accounts: Account[];
+  isConnected: boolean;
 }
 
 export const useAccount = (): AccountResult => {
@@ -63,24 +67,12 @@ export const useAccount = (): AccountResult => {
         };
     const evm: Account = { ...account, chainType: ChainType.EVM };
 
+    const accounts = [evm, svm].filter((account) => account.isConnected);
     return {
       account: account.isConnected ? evm : svm,
-      accounts: [evm, svm],
+      // We need to return only connected account list
+      accounts,
+      isConnected: accounts.length > 0,
     };
   }, [account, wallet]);
 };
-
-export const useAccountDisconnect = () => {
-  const account = useWagmiAccount();
-  const { disconnect: wagmiDisconnect } = useDisconnect();
-  const { wallet, disconnect } = useWallet();
-
-  return () => {
-    if (account.isConnected) {
-      wagmiDisconnect();
-    }
-    if (wallet) {
-      disconnect();
-    }
-  };
-};

package/hooks/useAvailableChains.ts

@@ -2,16 +2,23 @@ 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, useWidgetConfig } from '../providers';
+import { isItemAllowed } from '../utils';
 
 export const useAvailableChains = () => {
+  const { chains } = useWidgetConfig();
+  const { providers } = useHasExternalWalletProvider();
   const { data, isLoading } = useQuery({
-    queryKey: ['chains'],
-    queryFn: async () => {
-      const chains = await getChains({
-        chainTypes: [ChainType.EVM, ChainType.SVM],
+    queryKey: ['chains', providers, chains?.types] as const,
+    queryFn: async ({ queryKey: [, providers, chainTypes] }) => {
+      const availableChains = await getChains({
+        chainTypes: (providers.length > 0
+          ? providers
+          : Object.values(ChainType)
+        ).filter((chainType) => isItemAllowed(chainType, chainTypes)),
       });
-      config.setChains(chains);
-      return chains;
+      config.setChains(availableChains);
+      return availableChains;
     },
     refetchInterval: 300000,
     staleTime: 300000,

package/hooks/useChains.ts

@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
-import { isItemAllowed, useWidgetConfig } from '../providers';
+import { useWidgetConfig } from '../providers';
+import type { FormType } from '../stores';
+import { isItemAllowed } from '../utils';
 import { useAvailableChains } from './useAvailableChains';
 
-export const useChains = () => {
+export const useChains = (type?: FormType) => {
   const { chains } = useWidgetConfig();
   const {
     chains: availableChains,
@@ -11,11 +13,15 @@ export const useChains = () => {
   } = useAvailableChains();
 
   const filteredChains = useMemo(() => {
-    const filteredChains = availableChains?.filter((chain) =>
-      isItemAllowed(chain.id, chains),
-    );
+    const filteredChains = type
+      ? availableChains?.filter(
+          (chain) =>
+            isItemAllowed(chain.id, chains) &&
+            isItemAllowed(chain.id, chains?.[type]),
+        )
+      : availableChains?.filter((chain) => isItemAllowed(chain.id, chains));
     return filteredChains;
-  }, [availableChains, chains]);
+  }, [availableChains, chains, type]);
 
   return {
     chains: filteredChains,

package/hooks/useDebouncedWatch.ts

@@ -2,17 +2,18 @@ import { useEffect, useRef, useState } from 'react';
 import type { FormFieldNames } from '../stores';
 import { useFieldValues } from '../stores';
 
-export const useDebouncedWatch = (name: FormFieldNames[], delay: number) => {
+export const useDebouncedWatch = <T extends FormFieldNames[]>(
+  delay: number,
+  ...name: T
+) => {
   const watchedValue = useFieldValues(...name);
   const [debouncedValue, setDebouncedValue] = useState(watchedValue);
-  const debouncedValueRef = useRef<any>();
+  const debouncedValueRef = useRef<typeof watchedValue>();
   const isMounted = useRef(false);
 
   useEffect(() => {
     if (isMounted.current) {
-      const hasWatchedValue = watchedValue.some(
-        (value: FormFieldNames) => value,
-      );
+      const hasWatchedValue = watchedValue.some((value) => value);
       if (hasWatchedValue) {
         const handler = setTimeout(() => {
           setDebouncedValue(watchedValue);

package/hooks/useFromTokenSufficiency.ts

@@ -9,7 +9,7 @@ import { getTokenBalancesWithRetry } from './useTokenBalance';
 const refetchInterval = 30_000;
 
 export const useFromTokenSufficiency = (route?: RouteExtended) => {
-  const { account } = useAccount();
+  const { accounts } = useAccount();
   const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
     'fromChain',
     'fromToken',
@@ -23,19 +23,26 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
     tokenAddress = route.fromToken.address;
   }
 
-  const { token, isLoading: isTokenAddressBalanceLoading } =
-    useTokenAddressBalance(chainId, tokenAddress);
+  const {
+    token,
+    chain,
+    isLoading: isTokenAddressBalanceLoading,
+  } = useTokenAddressBalance(chainId, tokenAddress);
+
+  const account = accounts.find(
+    (account) => account.chainType === chain?.chainType,
+  );
 
   const { data: insufficientFromToken, isLoading } = useQuery({
     queryKey: [
       'from-token-sufficiency-check',
-      account.address,
+      account?.address,
       chainId,
       tokenAddress,
       route?.id ?? fromAmount,
-    ],
-    queryFn: async () => {
-      if (!account.address || !token) {
+    ] as const,
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      if (!accountAddress || !token) {
         return;
       }
       const parsedFromAmount = parseUnits(fromAmount, token.decimals);
@@ -60,7 +67,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
         return insufficientFunds;
       }
 
-      const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+      const tokenBalances = await getTokenBalancesWithRetry(accountAddress, [
         currentAction.fromToken,
       ]);
 
@@ -70,7 +77,9 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
       return insufficientFunds;
     },
 
-    enabled: Boolean(account.address && token && !isTokenAddressBalanceLoading),
+    enabled: Boolean(
+      account?.address && token && !isTokenAddressBalanceLoading,
+    ),
     refetchInterval,
     staleTime: refetchInterval,
     placeholderData: keepPreviousData,

package/hooks/useGasRecommendation.ts

@@ -5,7 +5,7 @@ import { useAvailableChains } from './useAvailableChains';
 const refetchInterval = 60_000;
 
 export const useGasRecommendation = (
-  toChainId: ChainId,
+  toChainId?: ChainId,
   fromChain?: ChainId,
   fromToken?: string,
 ) => {