@dodoex/wallet-web3-react 0.2.1 → 0.3.0

package/src/WalletConnect/ConnectPage.tsx

@@ -1,506 +1,508 @@
-import React from 'react';
-import WalletWeb3, { useWalletStore, WalletType } from '@dodoex/wallet-web3';
-import { useConnectWallet, WalletItem } from '../hooks/useConnectWallet';
-import { alpha, Box, ButtonBase, Checkbox, useTheme } from '@dodoex/components';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-import WalletTag, { WalletTagProps } from '../components/WalletTag';
-import { ArrowRight, More } from '@dodoex/icons';
-import { Trans } from '@lingui/macro';
-import ConnectLedger from './ConnectLedger';
-import { checkAlchemyCache } from './ConnectAlchemy/useConnectAlchemy';
-import ConnectAlchemy from './ConnectAlchemy';
-import { DialogTitle } from '../components/Dialog';
-
-const walletGroupStyle = {
-  display: 'grid',
-  gap: 12,
-  gridTemplateColumns: 'repeat(1, 1fr)',
-  alignItems: 'start',
-  px: 8,
-  py: 6,
-};
-
-export type ConnectDialogWalletTag = React.FC<
-  WalletTagProps & {
-    children?: React.ReactNode;
-  }
->;
-
-function WalletGroupItem({
-  chainId,
-  wallet,
-  loggedIn,
-  matchChain,
-  selectedChainId,
-  disabled,
-  activeWalletType,
-  installed,
-  disabledClick,
-  onShowLedgerConnect,
-  onShowAlchemyConnect,
-  onConnectWallet,
-  WalletTag: WalletTagProps,
-}: {
-  chainId?: number;
-  wallet: WalletItem;
-  loggedIn: boolean;
-  matchChain: boolean;
-  selectedChainId: number | undefined;
-  disabled?: boolean;
-  activeWalletType?: WalletType;
-  installed?: boolean;
-  disabledClick: () => void;
-  onShowLedgerConnect: () => void;
-  onShowAlchemyConnect: () => void;
-  onConnectWallet?: (wallet: WalletItem) => void | Promise<void>;
-  WalletTag?: ConnectDialogWalletTag;
-}) {
-  const theme = useTheme();
-  const isChecked =
-    loggedIn &&
-    activeWalletType === wallet.currentType &&
-    (matchChain || activeWalletType.toLocaleLowerCase() === 'walletconnect');
-
-  const [loading, setLoading] = React.useState(false);
-  const { connectTimeout, onConnectTimeout, switchNetwork, onConnected } =
-    useWalletConnectContext();
-  return (
-    <Box
-      component={ButtonBase}
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        p: theme.spacing(10, 12),
-        width: '100%',
-        color: 'text.primary',
-        borderRadius: 8,
-        opacity: disabled ? 0.3 : 1,
-        '&:hover': {
-          backgroundColor: theme.palette.background.tag,
-        },
-      }}
-      onClick={async () => {
-        if (disabled) {
-          disabledClick();
-          return;
-        }
-        if (isChecked) {
-          return;
-        }
-        if (wallet.currentType === WalletType.LedgerUSB) {
-          if (wallet.disabled) return;
-          onShowLedgerConnect();
-          return;
-        }
-        if (wallet.currentType === WalletType.Alchemy) {
-          if (wallet.disabled) return;
-          const hasCache = await checkAlchemyCache(chainId ?? 1);
-          if (!hasCache) {
-            onShowAlchemyConnect();
-            return;
-          }
-        }
-        setLoading(true);
-        let timeout: NodeJS.Timeout | undefined = undefined;
-        try {
-          await Promise.race([
-            (async () => {
-              if (onConnectWallet) {
-                try {
-                  await onConnectWallet(wallet);
-                  const connectedChainId = useWalletStore.getState().chainId;
-                  if (onConnected) {
-                    onConnected(connectedChainId, wallet);
-                  }
-                } finally {
-                  setLoading(false);
-                }
-                return;
-              }
-
-              if (
-                switchNetwork &&
-                wallet.currentType === activeWalletType &&
-                (!matchChain || !loggedIn) &&
-                selectedChainId
-              ) {
-                const res = await switchNetwork(selectedChainId);
-                if (res !== undefined) {
-                  setLoading(false);
-                  return;
-                }
-              }
-              if (wallet.onClick) {
-                try {
-                  await wallet.onClick();
-                  const connectedChainId = useWalletStore.getState().chainId;
-                  if (onConnected) {
-                    onConnected(connectedChainId, wallet);
-                  }
-                } finally {
-                  setLoading(false);
-                }
-              }
-            })(),
-            onConnectTimeout
-              ? new Promise(
-                  (_, reject) =>
-                    (timeout = setTimeout(() => {
-                      onConnectTimeout();
-                      reject();
-                    }, connectTimeout ?? 15000)),
-                )
-              : undefined,
-          ]);
-        } catch (error) {
-          setLoading(false);
-          throw error;
-        }
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-      }}
-    >
-      <Box
-        sx={{
-          position: 'relative',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 12,
-          justifyContent: 'center',
-          typography: 'body1',
-          fontWeight: 600,
-        }}
-      >
-        <Box
-          component="img"
-          src={wallet.icon}
-          sx={{
-            width: 40,
-            height: 40,
-            borderRadius: 12,
-            border: 'solid 1px',
-            borderColor: 'border.main',
-          }}
-        />
-        {wallet.title}
-      </Box>
-      {WalletTagProps ? (
-        <WalletTagProps
-          loading={loading}
-          wallet={wallet}
-          isChecked={isChecked}
-          installed={!!installed}
-        >
-          <WalletTag
-            loading={loading}
-            wallet={wallet}
-            isChecked={isChecked}
-            installed={!!installed}
-          />
-        </WalletTagProps>
-      ) : (
-        <WalletTag
-          loading={loading}
-          wallet={wallet}
-          isChecked={isChecked}
-          installed={!!installed}
-        />
-      )}
-    </Box>
-  );
-}
-
-export interface ConnectPageProps {
-  chainId: number;
-  account?: string;
-  walletWeb3?: WalletWeb3;
-  showOtherInjectWallet?: boolean;
-  onClose: () => void;
-  onConnectWallet?: (wallet: WalletItem) => void | Promise<void>;
-  WalletTag?: ConnectDialogWalletTag;
-}
-function ConnectPage({
-  chainId,
-  account,
-  walletWeb3,
-  showOtherInjectWallet,
-  onClose,
-  onConnectWallet,
-  WalletTag,
-}: ConnectPageProps) {
-  const theme = useTheme();
-  const highlightBackgroundColor =
-    theme.palette.mode === 'dark' ? alpha('#F1F902', 0.1) : '#F1F902';
-  const { termsOfServiceLink, chainId: needConnectChainId } =
-    useWalletConnectContext();
-
-  const selectedChainId = needConnectChainId ?? chainId;
-
-  const [isDisabledClick, setIsDisabledClick] = React.useState(false);
-  const [showLedgerConnect, setShowLedgerConnect] = React.useState(false);
-  const [showAlchemyConnect, setShowAlchemyConnect] = React.useState(false);
-  const disabledClick = React.useCallback(() => {
-    setIsDisabledClick(true);
-    const time = setTimeout(() => {
-      setIsDisabledClick(false);
-    }, 1800);
-
-    return () => {
-      clearTimeout(time);
-    };
-  }, []);
-
-  const {
-    walletList,
-    userReadAndChecked,
-    handleChangeUserReadAndChecked,
-    activeWalletType,
-  } = useConnectWallet({
-    walletWeb3,
-    matchTestChain: true,
-    showOtherInjectWallet,
-    selectedChainId,
-    hasTermsOfServiceLink: !!termsOfServiceLink,
-  });
-  const [showAllWallet, setShowAllWallet] = React.useState(false);
-  const showWalletList = React.useMemo(() => {
-    if (showAllWallet) return walletList;
-    return walletList.slice(0, 6);
-  }, [walletList, showAllWallet]);
-  const morePriorityWalletList = React.useMemo(() => {
-    return walletList.slice(6, 9);
-  }, [walletList]);
-
-  return (
-    <>
-      <DialogTitle onClose={onClose}>
-        <Trans>Connect Wallet</Trans>
-      </DialogTitle>
-      <Box
-        sx={{
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          pb: termsOfServiceLink ? 0 : 20,
-        }}
-      >
-        <Box
-          sx={{
-            overflowY: 'auto',
-          }}
-        >
-          <Box
-            sx={{
-              ...walletGroupStyle,
-            }}
-          >
-            {showWalletList.map((wallet) => {
-              return (
-                <WalletGroupItem
-                  key={wallet.title}
-                  wallet={wallet}
-                  disabled={!userReadAndChecked}
-                  loggedIn={!!account}
-                  selectedChainId={selectedChainId}
-                  matchChain={selectedChainId === chainId}
-                  activeWalletType={activeWalletType}
-                  installed={wallet.isInstalled}
-                  disabledClick={disabledClick}
-                  onShowLedgerConnect={() => setShowLedgerConnect(true)}
-                  onShowAlchemyConnect={() => setShowAlchemyConnect(true)}
-                  onConnectWallet={onConnectWallet}
-                  WalletTag={WalletTag}
-                />
-              );
-            })}
-          </Box>
-          {morePriorityWalletList.length ? (
-            <Box
-              sx={{
-                mx: 20,
-                display: 'flex',
-                justifyContent: 'center',
-                position: 'relative',
-                opacity: userReadAndChecked ? 1 : 0.5,
-              }}
-            >
-              <Box
-                sx={{
-                  position: 'absolute',
-                  top: '50%',
-                  right: 0,
-                  left: 0,
-                  height: '1px',
-                  backgroundColor: 'border.main',
-                  transform: 'translateY(-50%)',
-                }}
-              />
-              {showAllWallet ? (
-                <Box
-                  component={ButtonBase}
-                  disabled={!userReadAndChecked}
-                  sx={{
-                    position: 'relative',
-                    padding: theme.spacing(0, 12),
-                    height: 34,
-                    borderRadius: 20,
-                    backgroundColor: 'background.paper',
-                    border: 'solid 1px',
-                    borderColor: 'border.main',
-                    '&:hover': {
-                      backgroundColor: 'background.paperContrast',
-                    },
-                  }}
-                  onClick={() => setShowAllWallet(false)}
-                >
-                  <Box
-                    component={ArrowRight}
-                    sx={{
-                      color: 'text.secondary',
-                      transform: 'rotate(-90deg)',
-                    }}
-                  />
-                </Box>
-              ) : (
-                <Box
-                  component={ButtonBase}
-                  disabled={!userReadAndChecked}
-                  sx={{
-                    position: 'relative',
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: theme.spacing(0, 12),
-                    height: 34,
-                    borderRadius: 20,
-                    border: 'solid 1px',
-                    borderColor: 'border.main',
-                    backgroundColor: 'background.paper',
-                    typography: 'h6',
-                    color: 'text.secondary',
-                    '&:hover': {
-                      backgroundColor: 'background.paperContrast',
-                    },
-                  }}
-                  onClick={() => setShowAllWallet(true)}
-                >
-                  <Trans>More Wallets</Trans>
-                  {morePriorityWalletList.map((item, index) => {
-                    return (
-                      <Box
-                        key={item.title}
-                        component="img"
-                        src={item.icon}
-                        alt="icon"
-                        sx={{
-                          width: 18,
-                          height: 18,
-                          ...(index !== 0
-                            ? {
-                                position: 'relative',
-                                left: -2,
-                              }
-                            : {
-                                ml: 12,
-                              }),
-                        }}
-                      />
-                    );
-                  })}
-                  <Box
-                    sx={{
-                      width: 18,
-                      height: 18,
-                      display: 'flex',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                      backgroundColor: 'background.paperContrast',
-                      borderRadius: '50%',
-                    }}
-                  >
-                    <Box
-                      component={More}
-                      sx={{
-                        width: 18,
-                        height: 18,
-                      }}
-                    />
-                  </Box>
-                  <Box
-                    component={ArrowRight}
-                    sx={{
-                      transform: 'rotate(90deg)',
-                    }}
-                  />
-                </Box>
-              )}
-            </Box>
-          ) : (
-            ''
-          )}
-          <ConnectLedger
-            on={showLedgerConnect}
-            chainId={selectedChainId}
-            onClose={() => setShowLedgerConnect(false)}
-            onConnect={(path, account) => {
-              walletList
-                .find((wallet) => wallet.currentType === WalletType.LedgerUSB)
-                ?.onClick({
-                  ledgerParams: {
-                    path,
-                    account,
-                  },
-                });
-            }}
-          />
-          {!!walletWeb3 && (
-            <ConnectAlchemy
-              open={showAlchemyConnect}
-              setOpen={setShowAlchemyConnect}
-              walletWeb3={walletWeb3}
-            />
-          )}
-        </Box>
-        {!!termsOfServiceLink && (
-          <Checkbox
-            checked={userReadAndChecked}
-            onChange={(evt: any) =>
-              handleChangeUserReadAndChecked(evt.target.checked)
-            }
-            label={
-              <Box
-                sx={{
-                  typography: 'body2',
-                  '& a': {
-                    fontWeight: 600,
-                    color: 'primary.main',
-                    // textDecoration: 'underline',
-                  },
-                }}
-              >
-                {termsOfServiceLink}
-              </Box>
-            }
-            sx={{
-              m: 0,
-              p: 20,
-              alignItems: 'flex-start',
-              display: 'flex',
-              backgroundColor: isDisabledClick
-                ? highlightBackgroundColor
-                : 'transparent',
-              '& > span': {
-                p: 0,
-                mr: 8,
-              },
-            }}
-          />
-        )}
-      </Box>
-    </>
-  );
-}
-
-export default ConnectPage;
+'use client';
+
+import React from 'react';
+import WalletWeb3, { useWalletStore, WalletType } from '@dodoex/wallet-web3';
+import { useConnectWallet, WalletItem } from '../hooks/useConnectWallet';
+import { alpha, Box, ButtonBase, Checkbox, useTheme } from '@dodoex/components';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import WalletTag, { WalletTagProps } from '../components/WalletTag';
+import { ArrowRight, More } from '@dodoex/icons';
+import { Trans } from '@lingui/macro';
+import ConnectLedger from './ConnectLedger';
+import { checkAlchemyCache } from './ConnectAlchemy/useConnectAlchemy';
+import ConnectAlchemy from './ConnectAlchemy';
+import { DialogTitle } from '../components/Dialog';
+
+const walletGroupStyle = {
+  display: 'grid',
+  gap: 12,
+  gridTemplateColumns: 'repeat(1, 1fr)',
+  alignItems: 'start',
+  px: 8,
+  py: 6,
+};
+
+export type ConnectDialogWalletTag = React.FC<
+  WalletTagProps & {
+    children?: React.ReactNode;
+  }
+>;
+
+function WalletGroupItem({
+  chainId,
+  wallet,
+  loggedIn,
+  matchChain,
+  selectedChainId,
+  disabled,
+  activeWalletType,
+  installed,
+  disabledClick,
+  onShowLedgerConnect,
+  onShowAlchemyConnect,
+  onConnectWallet,
+  WalletTag: WalletTagProps,
+}: {
+  chainId?: number;
+  wallet: WalletItem;
+  loggedIn: boolean;
+  matchChain: boolean;
+  selectedChainId: number | undefined;
+  disabled?: boolean;
+  activeWalletType?: WalletType;
+  installed?: boolean;
+  disabledClick: () => void;
+  onShowLedgerConnect: () => void;
+  onShowAlchemyConnect: () => void;
+  onConnectWallet?: (wallet: WalletItem) => void | Promise<void>;
+  WalletTag?: ConnectDialogWalletTag;
+}) {
+  const theme = useTheme();
+  const isChecked =
+    loggedIn &&
+    activeWalletType === wallet.currentType &&
+    (matchChain || activeWalletType.toLocaleLowerCase() === 'walletconnect');
+
+  const [loading, setLoading] = React.useState(false);
+  const { connectTimeout, onConnectTimeout, switchNetwork, onConnected } =
+    useWalletConnectContext();
+  return (
+    <Box
+      component={ButtonBase}
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        p: theme.spacing(10, 12),
+        width: '100%',
+        color: 'text.primary',
+        borderRadius: 8,
+        opacity: disabled ? 0.3 : 1,
+        '&:hover': {
+          backgroundColor: theme.palette.background.tag,
+        },
+      }}
+      onClick={async () => {
+        if (disabled) {
+          disabledClick();
+          return;
+        }
+        if (isChecked) {
+          return;
+        }
+        if (wallet.currentType === WalletType.LedgerUSB) {
+          if (wallet.disabled) return;
+          onShowLedgerConnect();
+          return;
+        }
+        if (wallet.currentType === WalletType.Alchemy) {
+          if (wallet.disabled) return;
+          const hasCache = await checkAlchemyCache(chainId ?? 1);
+          if (!hasCache) {
+            onShowAlchemyConnect();
+            return;
+          }
+        }
+        setLoading(true);
+        let timeout: NodeJS.Timeout | undefined = undefined;
+        try {
+          await Promise.race([
+            (async () => {
+              if (onConnectWallet) {
+                try {
+                  await onConnectWallet(wallet);
+                  const connectedChainId = useWalletStore.getState().chainId;
+                  if (onConnected) {
+                    onConnected(connectedChainId, wallet);
+                  }
+                } finally {
+                  setLoading(false);
+                }
+                return;
+              }
+
+              if (
+                switchNetwork &&
+                wallet.currentType === activeWalletType &&
+                (!matchChain || !loggedIn) &&
+                selectedChainId
+              ) {
+                const res = await switchNetwork(selectedChainId);
+                if (res !== undefined) {
+                  setLoading(false);
+                  return;
+                }
+              }
+              if (wallet.onClick) {
+                try {
+                  await wallet.onClick();
+                  const connectedChainId = useWalletStore.getState().chainId;
+                  if (onConnected) {
+                    onConnected(connectedChainId, wallet);
+                  }
+                } finally {
+                  setLoading(false);
+                }
+              }
+            })(),
+            onConnectTimeout
+              ? new Promise(
+                  (_, reject) =>
+                    (timeout = setTimeout(() => {
+                      onConnectTimeout();
+                      reject();
+                    }, connectTimeout ?? 15000)),
+                )
+              : undefined,
+          ]);
+        } catch (error) {
+          setLoading(false);
+          throw error;
+        }
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+      }}
+    >
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          justifyContent: 'center',
+          typography: 'body1',
+          fontWeight: 600,
+        }}
+      >
+        <Box
+          component="img"
+          src={wallet.icon}
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: 12,
+            border: 'solid 1px',
+            borderColor: 'border.main',
+          }}
+        />
+        {wallet.title}
+      </Box>
+      {WalletTagProps ? (
+        <WalletTagProps
+          loading={loading}
+          wallet={wallet}
+          isChecked={isChecked}
+          installed={!!installed}
+        >
+          <WalletTag
+            loading={loading}
+            wallet={wallet}
+            isChecked={isChecked}
+            installed={!!installed}
+          />
+        </WalletTagProps>
+      ) : (
+        <WalletTag
+          loading={loading}
+          wallet={wallet}
+          isChecked={isChecked}
+          installed={!!installed}
+        />
+      )}
+    </Box>
+  );
+}
+
+export interface ConnectPageProps {
+  chainId: number;
+  account?: string;
+  walletWeb3?: WalletWeb3;
+  showOtherInjectWallet?: boolean;
+  onClose: () => void;
+  onConnectWallet?: (wallet: WalletItem) => void | Promise<void>;
+  WalletTag?: ConnectDialogWalletTag;
+}
+function ConnectPage({
+  chainId,
+  account,
+  walletWeb3,
+  showOtherInjectWallet,
+  onClose,
+  onConnectWallet,
+  WalletTag,
+}: ConnectPageProps) {
+  const theme = useTheme();
+  const highlightBackgroundColor =
+    theme.palette.mode === 'dark' ? alpha('#F1F902', 0.1) : '#F1F902';
+  const { termsOfServiceLink, chainId: needConnectChainId } =
+    useWalletConnectContext();
+
+  const selectedChainId = needConnectChainId ?? chainId;
+
+  const [isDisabledClick, setIsDisabledClick] = React.useState(false);
+  const [showLedgerConnect, setShowLedgerConnect] = React.useState(false);
+  const [showAlchemyConnect, setShowAlchemyConnect] = React.useState(false);
+  const disabledClick = React.useCallback(() => {
+    setIsDisabledClick(true);
+    const time = setTimeout(() => {
+      setIsDisabledClick(false);
+    }, 1800);
+
+    return () => {
+      clearTimeout(time);
+    };
+  }, []);
+
+  const {
+    walletList,
+    userReadAndChecked,
+    handleChangeUserReadAndChecked,
+    activeWalletType,
+  } = useConnectWallet({
+    walletWeb3,
+    matchTestChain: true,
+    showOtherInjectWallet,
+    selectedChainId,
+    hasTermsOfServiceLink: !!termsOfServiceLink,
+  });
+  const [showAllWallet, setShowAllWallet] = React.useState(false);
+  const showWalletList = React.useMemo(() => {
+    if (showAllWallet) return walletList;
+    return walletList.slice(0, 6);
+  }, [walletList, showAllWallet]);
+  const morePriorityWalletList = React.useMemo(() => {
+    return walletList.slice(6, 9);
+  }, [walletList]);
+
+  return (
+    <>
+      <DialogTitle onClose={onClose}>
+        <Trans>Connect Wallet</Trans>
+      </DialogTitle>
+      <Box
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          pb: termsOfServiceLink ? 0 : 20,
+        }}
+      >
+        <Box
+          sx={{
+            overflowY: 'auto',
+          }}
+        >
+          <Box
+            sx={{
+              ...walletGroupStyle,
+            }}
+          >
+            {showWalletList.map((wallet) => {
+              return (
+                <WalletGroupItem
+                  key={wallet.title}
+                  wallet={wallet}
+                  disabled={!userReadAndChecked}
+                  loggedIn={!!account}
+                  selectedChainId={selectedChainId}
+                  matchChain={selectedChainId === chainId}
+                  activeWalletType={activeWalletType}
+                  installed={wallet.isInstalled}
+                  disabledClick={disabledClick}
+                  onShowLedgerConnect={() => setShowLedgerConnect(true)}
+                  onShowAlchemyConnect={() => setShowAlchemyConnect(true)}
+                  onConnectWallet={onConnectWallet}
+                  WalletTag={WalletTag}
+                />
+              );
+            })}
+          </Box>
+          {morePriorityWalletList.length ? (
+            <Box
+              sx={{
+                mx: 20,
+                display: 'flex',
+                justifyContent: 'center',
+                position: 'relative',
+                opacity: userReadAndChecked ? 1 : 0.5,
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: '50%',
+                  right: 0,
+                  left: 0,
+                  height: '1px',
+                  backgroundColor: 'border.main',
+                  transform: 'translateY(-50%)',
+                }}
+              />
+              {showAllWallet ? (
+                <Box
+                  component={ButtonBase}
+                  disabled={!userReadAndChecked}
+                  sx={{
+                    position: 'relative',
+                    padding: theme.spacing(0, 12),
+                    height: 34,
+                    borderRadius: 20,
+                    backgroundColor: 'background.paper',
+                    border: 'solid 1px',
+                    borderColor: 'border.main',
+                    '&:hover': {
+                      backgroundColor: 'background.paperContrast',
+                    },
+                  }}
+                  onClick={() => setShowAllWallet(false)}
+                >
+                  <Box
+                    component={ArrowRight}
+                    sx={{
+                      color: 'text.secondary',
+                      transform: 'rotate(-90deg)',
+                    }}
+                  />
+                </Box>
+              ) : (
+                <Box
+                  component={ButtonBase}
+                  disabled={!userReadAndChecked}
+                  sx={{
+                    position: 'relative',
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: theme.spacing(0, 12),
+                    height: 34,
+                    borderRadius: 20,
+                    border: 'solid 1px',
+                    borderColor: 'border.main',
+                    backgroundColor: 'background.paper',
+                    typography: 'h6',
+                    color: 'text.secondary',
+                    '&:hover': {
+                      backgroundColor: 'background.paperContrast',
+                    },
+                  }}
+                  onClick={() => setShowAllWallet(true)}
+                >
+                  <Trans>More Wallets</Trans>
+                  {morePriorityWalletList.map((item, index) => {
+                    return (
+                      <Box
+                        key={item.title}
+                        component="img"
+                        src={item.icon}
+                        alt="icon"
+                        sx={{
+                          width: 18,
+                          height: 18,
+                          ...(index !== 0
+                            ? {
+                                position: 'relative',
+                                left: -2,
+                              }
+                            : {
+                                ml: 12,
+                              }),
+                        }}
+                      />
+                    );
+                  })}
+                  <Box
+                    sx={{
+                      width: 18,
+                      height: 18,
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      backgroundColor: 'background.paperContrast',
+                      borderRadius: '50%',
+                    }}
+                  >
+                    <Box
+                      component={More}
+                      sx={{
+                        width: 18,
+                        height: 18,
+                      }}
+                    />
+                  </Box>
+                  <Box
+                    component={ArrowRight}
+                    sx={{
+                      transform: 'rotate(90deg)',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          ) : (
+            ''
+          )}
+          <ConnectLedger
+            on={showLedgerConnect}
+            chainId={selectedChainId}
+            onClose={() => setShowLedgerConnect(false)}
+            onConnect={(path, account) => {
+              walletList
+                .find((wallet) => wallet.currentType === WalletType.LedgerUSB)
+                ?.onClick({
+                  ledgerParams: {
+                    path,
+                    account,
+                  },
+                });
+            }}
+          />
+          {!!walletWeb3 && (
+            <ConnectAlchemy
+              open={showAlchemyConnect}
+              setOpen={setShowAlchemyConnect}
+              walletWeb3={walletWeb3}
+            />
+          )}
+        </Box>
+        {!!termsOfServiceLink && (
+          <Checkbox
+            checked={userReadAndChecked}
+            onChange={(evt: any) =>
+              handleChangeUserReadAndChecked(evt.target.checked)
+            }
+            label={
+              <Box
+                sx={{
+                  typography: 'body2',
+                  '& a': {
+                    fontWeight: 600,
+                    color: 'primary.main',
+                    // textDecoration: 'underline',
+                  },
+                }}
+              >
+                {termsOfServiceLink}
+              </Box>
+            }
+            sx={{
+              m: 0,
+              p: 20,
+              alignItems: 'flex-start',
+              display: 'flex',
+              backgroundColor: isDisabledClick
+                ? highlightBackgroundColor
+                : 'transparent',
+              '& > span': {
+                p: 0,
+                mr: 8,
+              },
+            }}
+          />
+        )}
+      </Box>
+    </>
+  );
+}
+
+export default ConnectPage;