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

package/components/ChainSelect/ChainSelect.tsx

@@ -4,7 +4,7 @@ import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import type { FormTypeProps } from '../../stores';
-import { maxChainToOrder, useFieldValues, FormKeyHelper } from '../../stores';
+import { FormKeyHelper, maxChainToOrder, useFieldValues } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ChainCard, ChainContainer } from './ChainSelect.style';
 import { useChainSelect } from './useChainSelect';
@@ -23,12 +23,14 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
   const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
 
   useEffect(() => {
-    const hasChainInOrderedList = chainOrder.includes(chainId);
-    // If we don't have a chain in the ordered chain list we should add it.
-    if (!hasChainInOrderedList) {
-      setChainOrder(chainId);
+    if (chainId) {
+      const hasChainInOrderedList = chainOrder.includes(chainId);
+      // If we don't have a chain in the ordered chain list we should add it.
+      if (!hasChainInOrderedList) {
+        setChainOrder(chainId, formType);
+      }
     }
-  }, [chainId, chainOrder, setChainOrder]);
+  }, [chainId, chainOrder, formType, setChainOrder]);
 
   const showAllChains = () => {
     navigate(navigationRoutes[`${formType}Chain`]);

package/components/ChainSelect/useChainSelect.ts

@@ -1,12 +1,12 @@
 import type { EVMChain } from '@lifi/sdk';
 import { useChains, useSwapOnly } from '../../hooks';
-import type { FormType } from '../../stores';
 import { useWidgetConfig } from '../../providers';
+import type { FormType } from '../../stores';
 import {
+  FormKeyHelper,
   useChainOrder,
   useFieldActions,
   useFieldController,
-  FormKeyHelper,
 } from '../../stores';
 import { RequiredUI } from '../../types';
 
@@ -16,8 +16,8 @@ export const useChainSelect = (formType: FormType) => {
   const { onChange, onBlur } = useFieldController({ name: chainKey });
 
   const { setFieldValue, getFieldValues } = useFieldActions();
-  const { chains, isLoading, getChainById } = useChains();
-  const [chainOrder, setChainOrder] = useChainOrder();
+  const { chains, isLoading, getChainById } = useChains(formType);
+  const [chainOrder, setChainOrder] = useChainOrder(formType);
   const swapOnly = useSwapOnly();
 
   const getChains = () => {
@@ -63,7 +63,7 @@ export const useChainSelect = (formType: FormType) => {
     if (!requiredToAddress) {
       setFieldValue('toAddress', '');
     }
-    setChainOrder(chainId);
+    setChainOrder(chainId, formType);
   };
 
   return {

package/components/Header/CloseDrawerButton.tsx

@@ -0,0 +1,18 @@
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import { Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useDrawer } from '../../AppDrawerContext';
+
+export const CloseDrawerButton = () => {
+  const { t } = useTranslation();
+  const { closeDrawer } = useDrawer();
+
+  return (
+    <Tooltip title={t('button.close')} enterDelay={400} arrow>
+      <IconButton size="medium" onClick={closeDrawer}>
+        <CloseIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/components/Header/EVMDisconnectIconButton.tsx

@@ -0,0 +1,24 @@
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { IconButton } from '@mui/material';
+import type { Connector } from 'wagmi';
+import { useDisconnect } from 'wagmi';
+
+export const EVMDisconnectIconButton = ({
+  connector,
+}: {
+  connector?: Connector;
+}) => {
+  const { disconnect } = useDisconnect();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect({ connector });
+      }}
+    >
+      <PowerSettingsNewIcon />
+    </IconButton>
+  );
+};

package/components/Header/Header.style.ts

@@ -55,19 +55,25 @@ export const WalletButton = styled(Button)(({ theme }) => ({
   },
 }));
 
-export const DrawerWalletContainer = styled(Box)(() => ({
+export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
   width: '100%',
   display: 'flex',
-  justifyItems: 'start',
+  justifyContent: 'space-between',
 
-  '& > button': {
-    marginLeft: '-0.5rem',
+  '& button:first-of-type': {
+    marginLeft: theme.spacing(-1),
+  },
+  '& button:last-of-type': {
+    marginRight: theme.spacing(-1.25),
   },
 }));
 
 export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(0.5),
+  '& button:last-of-type': {
+    marginRight: theme.spacing(-1.25),
+  },
 }));
 
 export const SplitTabs = styled(Tabs)(({ theme }) => ({

package/components/Header/Header.tsx

@@ -1,8 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { HiddenUI } from '../../types';
 import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
@@ -22,14 +20,9 @@ export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
 };
 
 export const Header: FC = () => {
-  const { walletManagement, subvariant, hiddenUI } = useWidgetConfig();
   return (
     <HeaderContainer>
-      {!walletManagement &&
-      subvariant !== 'split' &&
-      !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
-        <WalletHeader />
-      ) : null}
+      <WalletHeader />
       <NavigationHeader />
     </HeaderContainer>
   );

package/components/Header/NavigationHeader.tsx

@@ -1,6 +1,5 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-import { Box, Tooltip, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
@@ -13,32 +12,18 @@ import {
   navigationRoutes,
   navigationRoutesValues,
 } from '../../utils';
+import { CloseDrawerButton } from './CloseDrawerButton';
 import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { SettingsButton } from './SettingsButton';
-import { WalletMenuButton } from './WalletHeader';
+import { TransactionHistoryButton } from './TransactionHistoryButton';
+import { SplitWalletMenuButton } from './WalletHeader';
 
-export const TransactionHistoryButton = () => {
-  const { t } = useTranslation();
-  const { navigate } = useNavigateBack();
-
-  return (
-    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
-      <IconButton
-        size="medium"
-        edge="start"
-        onClick={() => navigate(navigationRoutes.transactionHistory)}
-      >
-        <ReceiptLongIcon />
-      </IconButton>
-    </Tooltip>
-  );
-};
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
   const { subvariant, hiddenUI, variant } = useWidgetConfig();
   const { navigateBack } = useNavigateBack();
-  const { account } = useAccount();
+  const { isConnected } = useAccount();
   const { element, title } = useHeaderStore((state) => state);
   const { pathname } = useLocation();
 
@@ -115,9 +100,7 @@ export const NavigationHeader: React.FC = () => {
         ) : null}
         {splitSubvariant ? (
           <Box flex={1}>
-            {!hiddenUI?.includes(HiddenUI.WalletMenu) ? (
-              <WalletMenuButton />
-            ) : null}
+            <SplitWalletMenuButton />
           </Box>
         ) : (
           <Typography
@@ -134,16 +117,16 @@ export const NavigationHeader: React.FC = () => {
           <Route
             path={navigationRoutes.home}
             element={
-              <HeaderControlsContainer
-                paddingRight={
-                  variant === 'drawer' && subvariant === 'split' ? 5 : 0
-                }
-              >
-                {account.isConnected &&
-                !hiddenUI?.includes(HiddenUI.History) ? (
+              <HeaderControlsContainer>
+                {isConnected && !hiddenUI?.includes(HiddenUI.History) ? (
                   <TransactionHistoryButton />
                 ) : null}
                 <SettingsButton />
+                {variant === 'drawer' &&
+                subvariant === 'split' &&
+                !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+                  <CloseDrawerButton />
+                ) : null}
               </HeaderControlsContainer>
             }
           />

package/components/Header/SVMDisconnectIconButton.tsx

@@ -0,0 +1,19 @@
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { IconButton } from '@mui/material';
+import { useWallet } from '@solana/wallet-adapter-react';
+
+export const SVMDisconnectIconButton = () => {
+  const { disconnect } = useWallet();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect();
+      }}
+    >
+      <PowerSettingsNewIcon />
+    </IconButton>
+  );
+};

package/components/Header/SettingsButton.style.tsx

@@ -23,26 +23,22 @@ interface SettingsIconButtonProps {
 export const SettingsIconButton = styled(IconButton, {
   shouldForwardProp: (props) => props !== 'variant',
 })<SettingsIconButtonProps>(({ theme, variant }) => {
-  const variantStyles = {
-    info: {
-      backgroundColor: getInfoBackgroundColor(theme),
-      '&:hover': {
-        backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
-      },
-    },
-    warning: {
-      backgroundColor: getWarningBackgroundColor(theme),
-      '&:hover': {
-        backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
-      },
-    },
-    default: {
-      marginRight: theme.spacing(-1.25),
-    },
-  };
-
-  return {
-    borderRadius: 20,
-    ...variantStyles[variant ?? 'default'],
-  };
+  switch (variant) {
+    case 'info':
+      return {
+        backgroundColor: getInfoBackgroundColor(theme),
+        '&:hover': {
+          backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
+        },
+      };
+    case 'warning':
+      return {
+        backgroundColor: getWarningBackgroundColor(theme),
+        '&:hover': {
+          backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
+        },
+      };
+    default:
+      break;
+  }
 });

package/components/Header/TransactionHistoryButton.tsx

@@ -0,0 +1,23 @@
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
+import { Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useNavigateBack } from '../../hooks';
+import { navigationRoutes } from '../../utils';
+
+export const TransactionHistoryButton = () => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigateBack();
+
+  return (
+    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
+      <IconButton
+        size="medium"
+        edge="start"
+        onClick={() => navigate(navigationRoutes.transactionHistory)}
+      >
+        <ReceiptLongIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/components/Header/WalletHeader.tsx

@@ -1,14 +1,19 @@
+import { getWalletIcon } from '@lifi/wallet-management';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import WalletIcon from '@mui/icons-material/Wallet';
 import { Avatar, Badge } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
+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,
@@ -18,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 (
@@ -37,6 +54,10 @@ export const WalletMenuButton: React.FC = () => {
         ) : (
           <ConnectButton />
         )}
+        {subvariant !== 'split' &&
+        !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+          <CloseDrawerButton />
+        ) : null}
       </DrawerWalletContainer>
     );
   }
@@ -50,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);
@@ -100,7 +121,10 @@ const ConnectedButton = ({ account }: { account: Account }) => {
 
   const avatar = (
     <Avatar
-      src={account.connector?.icon}
+      src={
+        account.connector?.icon ||
+        getWalletIcon((account.connector as Connector)?.id)
+      }
       alt={account.connector?.name}
       sx={{ width: 24, height: 24 }}
     >
@@ -118,7 +142,11 @@ const ConnectedButton = ({ account }: { account: Account }) => {
               overlap="circular"
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
               badgeContent={
-                <SmallAvatar src={chain?.logoURI} alt={chain?.name}>
+                <SmallAvatar
+                  src={chain?.logoURI}
+                  alt={chain?.name}
+                  sx={{ width: 16, height: 16 }}
+                >
                   {chain?.name[0]}
                 </SmallAvatar>
               }

package/components/Header/WalletMenu.tsx

@@ -1,4 +1,5 @@
 import { ChainType } from '@lifi/sdk';
+import { getWalletIcon } from '@lifi/wallet-management';
 import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
 import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
@@ -10,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();
@@ -33,71 +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}
-                alt={account.connector?.name}
-                sx={{
-                  width: 32,
-                  height: 32,
-                  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
@@ -108,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>
@@ -116,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>
-  );
-};