@dodoex/wallet-web3-react 0.4.0 → 0.4.2

package/src/WalletConnect/AccountPage.tsx

@@ -1,498 +1,498 @@
-'use client';
-
-import {
-  LoadingSkeleton,
-  Tabs,
-  alpha,
-  Box,
-  BoxProps,
-  ThemeProvider,
-  useTheme,
-  createTheme,
-  Tooltip,
-  RotatingIcon,
-  TabsGroup,
-  TabPanel,
-  ButtonBase,
-} from '@dodoex/components';
-import {
-  ArrowBack,
-  ArrowTopRightBorder,
-  Copy,
-  Disconnect,
-} from '@dodoex/icons';
-import copy from 'copy-to-clipboard';
-import WalletWeb3, { useWalletStore } from '@dodoex/wallet-web3';
-import { Trans } from '@lingui/macro';
-import { BigNumber } from 'bignumber.js';
-import React from 'react';
-import { truncatePoolAddress } from '../components/AddressWithLinkAndCopy';
-import { DialogTitle } from '../components/Dialog';
-import { useHasBalanceTokenList } from '../hooks/useHasBalanceTokenList';
-import { useTransactionList } from '../hooks/useTransactionList';
-import { formatReadableNumber, formatShortNumber } from '../utils/formatter';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-import ActivityList from './ActivityList';
-import HasBalanceTokenList from './HasBalanceTokenList';
-
-function AccountCardInfoBg({
-  children,
-  chainLogo,
-}: React.PropsWithChildren<{
-  chainLogo: React.ReactNode;
-}>) {
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-        padding: 20,
-        borderRadius: 12,
-        border: 'solid 1px',
-        borderColor: 'border.main',
-        color: 'text.primary',
-        zIndex: 0,
-      }}
-    >
-      <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          zIndex: -1,
-          overflow: 'hidden',
-          borderRadius: 12,
-        }}
-      >
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundColor: '#F6F6F6',
-          }}
-        />
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            '& > img, & > svg': {
-              height: 'auto',
-              width: 'calc(100% + 2px)',
-              position: 'absolute',
-              '&:first-child': {
-                top: '50%',
-                transform: 'translateY(-50%)',
-                opacity: 0.5,
-                filter: 'blur(99.99999237060547px)',
-              },
-              '&:last-child': {
-                left: 60,
-                bottom: 40,
-                opacity: 0.2,
-                filter: 'blur(7.499999523162842px)',
-              },
-            },
-          }}
-        >
-          {chainLogo}
-          {chainLogo}
-        </Box>
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            background:
-              'linear-gradient(108deg, rgba(255, 255, 255, 0.90) 9.8%, rgba(255, 255, 255, 0.00) 49.94%)',
-          }}
-        />
-      </Box>
-      {children}
-    </Box>
-  );
-}
-
-function AccountCardInfo({
-  chainId,
-  setShowSendTokenPage,
-  setShowReceiveTokenPage,
-  allFiatPriceBalance,
-  allFiatPriceBalanceLoading,
-}: {
-  chainId: number;
-  setShowSendTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
-  setShowReceiveTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
-  allFiatPriceBalance: BigNumber;
-  allFiatPriceBalanceLoading: boolean;
-}) {
-  const { getChain } = useWalletConnectContext();
-  const chain = getChain(chainId);
-  const theme = createTheme({
-    mode: 'light',
-  });
-
-  return (
-    <ThemeProvider theme={theme}>
-      <AccountCardInfoBg chainLogo={chain?.logoBg ?? chain?.logo}>
-        <Box
-          sx={{
-            typography: 'body2',
-            color: 'text.secondary',
-          }}
-        >
-          <Trans>Balance</Trans>
-        </Box>
-        <LoadingSkeleton
-          component="div"
-          loading={allFiatPriceBalanceLoading}
-          loadingSx={{
-            width: 120,
-          }}
-          sx={{
-            mt: 4,
-            typography: 'h1',
-          }}
-          title={formatReadableNumber({ input: allFiatPriceBalance })}
-        >
-          ${formatShortNumber(allFiatPriceBalance)}
-        </LoadingSkeleton>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            gap: 20,
-            mt: 28,
-          }}
-        >
-          {/* send */}
-          <ButtonBase
-            sx={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 12,
-              px: 20,
-              py: 12,
-              typography: 'body2',
-              backgroundColor: 'background.paperDarkContrast',
-              borderRadius: 12,
-              textAlign: 'left',
-              '&:hover': {
-                backgroundColor: 'primary.main',
-                color: 'primary.contrastText',
-              },
-            }}
-            onClick={() => {
-              setShowSendTokenPage(true);
-            }}
-          >
-            <Box
-              component={ArrowBack}
-              sx={{
-                transform: 'rotate(90deg)',
-              }}
-            />
-            <Trans>Send</Trans>
-          </ButtonBase>
-          {/* receive */}
-          <ButtonBase
-            sx={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 12,
-              px: 20,
-              py: 12,
-              typography: 'body2',
-              backgroundColor: 'background.paperDarkContrast',
-              borderRadius: 12,
-              textAlign: 'left',
-              '&:hover': {
-                backgroundColor: 'primary.main',
-                color: 'primary.contrastText',
-              },
-            }}
-            onClick={() => {
-              setShowReceiveTokenPage(true);
-            }}
-          >
-            <Box
-              component={ArrowBack}
-              sx={{
-                transform: 'rotate(-90deg)',
-              }}
-            />
-            <Trans>Receive</Trans>
-          </ButtonBase>
-        </Box>
-      </AccountCardInfoBg>
-    </ThemeProvider>
-  );
-}
-
-enum ListTab {
-  tokens = 'tokens',
-  activity = 'activity',
-}
-function AccountPage({
-  chainId,
-  account,
-  walletWeb3,
-  onClose,
-  setShowSendTokenPage,
-  setShowReceiveTokenPage,
-}: {
-  chainId: number;
-  account?: string;
-  walletWeb3?: WalletWeb3;
-  onClose: () => void;
-  setShowSendTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
-  setShowReceiveTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-  const { getChain } = useWalletConnectContext();
-  const { connected } = useWalletStore();
-  const connectedWallet = connected?.wallet;
-  const [listTab, setListTab] = React.useState(ListTab.tokens);
-  const scrollableNodeRef = React.useRef<HTMLDivElement>(null);
-  const getScrollParent = React.useCallback(() => {
-    if (scrollableNodeRef) return scrollableNodeRef.current;
-    return null;
-  }, [scrollableNodeRef]);
-
-  const balanceListData = useHasBalanceTokenList({
-    account,
-    visible: listTab === ListTab.tokens,
-  });
-
-  const fetchTransactionQuery = useTransactionList({
-    account,
-    chainId,
-  });
-  const tabs = [
-    { key: ListTab.tokens, value: <Trans>Token</Trans> },
-    {
-      key: ListTab.activity,
-      value: (
-        <Tooltip title={<Trans>On-chain transaction records</Trans>}>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-            }}
-          >
-            <Trans>Activity</Trans>
-            {!!fetchTransactionQuery.pendingList.length && <RotatingIcon />}
-          </Box>
-        </Tooltip>
-      ),
-    },
-  ];
-
-  const [showCopyTooltip, setShowCopyTooltip] = React.useState(false);
-  const autoCloseShowCopyTooltip = React.useCallback(() => {
-    const time = setTimeout(() => {
-      setShowCopyTooltip(false);
-    }, 1500);
-
-    return () => {
-      clearTimeout(time);
-    };
-  }, []);
-
-  const chain = getChain(chainId);
-  if (!account || !connectedWallet) return null;
-  return (
-    <>
-      <DialogTitle onClose={onClose}>
-        <Box
-          sx={{
-            display: 'flex',
-            gap: 8,
-            alignItems: 'center',
-            height: 34,
-            borderRadius: 8,
-            backgroundColor: 'background.paperContrast',
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 4,
-              pl: 8,
-            }}
-          >
-            <Box
-              sx={{
-                position: 'relative',
-                pr: 6,
-                width: 28,
-                height: 22,
-              }}
-            >
-              {!!connectedWallet.logo && (
-                <img
-                  src={connectedWallet.logo}
-                  alt={connectedWallet.showName}
-                  width={22}
-                  height={22}
-                />
-              )}
-              {!!chain?.logo && (
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    bottom: 0,
-                    right: 0,
-                    width: 12,
-                    height: 12,
-                    '& > img, & > svg': {
-                      position: 'absolute',
-                      inset: 0,
-                      width: '100%',
-                      height: '100%',
-                      borderRadius: '50%',
-                      border: 'solid 1px',
-                      borderColor: 'border.main',
-                    },
-                  }}
-                >
-                  {chain?.logo}
-                </Box>
-              )}
-            </Box>
-            {truncatePoolAddress(account)}
-          </Box>
-          <Tooltip
-            onlyClick
-            arrow={false}
-            title={<Trans>Copied</Trans>}
-            open={showCopyTooltip}
-            onOpen={() => {
-              setShowCopyTooltip(true);
-              autoCloseShowCopyTooltip();
-            }}
-            onClose={() => setShowCopyTooltip(false)}
-          >
-            <Box
-              component={Copy}
-              onClick={() => {
-                copy(account);
-              }}
-              sx={{
-                width: 18,
-                height: 18,
-                cursor: 'pointer',
-                color: 'text.secondary',
-                '&:hover': {
-                  color: 'text.primary',
-                },
-              }}
-            />
-          </Tooltip>
-          <Box
-            component="a"
-            rel="noopener noreferrer"
-            target="_blank"
-            href={chain?.scanUrl + '/address/' + account}
-            sx={{
-              display: 'flex',
-              lineHeight: 1,
-              color: 'text.secondary',
-              '&:hover': {
-                color: 'text.primary',
-              },
-            }}
-          >
-            <Box
-              component={ArrowTopRightBorder}
-              sx={{
-                width: 18,
-                height: 18,
-              }}
-            />
-          </Box>
-          <ButtonBase
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: '100%',
-              px: 8,
-              border: 'solid 0',
-              borderLeftWidth: 1,
-              borderColor: 'border.main',
-              color: 'error.main',
-              '&:hover': {
-                backgroundColor: 'background.tag',
-              },
-            }}
-            onClick={() => {
-              walletWeb3?.disconnectWallet();
-              onClose();
-            }}
-          >
-            <Box
-              component={Disconnect}
-              sx={{
-                width: 18,
-                height: 18,
-              }}
-            />
-          </ButtonBase>
-        </Box>
-      </DialogTitle>
-      <Box
-        sx={{
-          display: 'flex',
-
-          flexDirection: 'column',
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          px: 20,
-        }}
-        ref={scrollableNodeRef}
-      >
-        <AccountCardInfo
-          chainId={chainId}
-          setShowSendTokenPage={setShowSendTokenPage}
-          setShowReceiveTokenPage={setShowReceiveTokenPage}
-          allFiatPriceBalanceLoading={
-            balanceListData.allFiatPriceBalanceLoading
-          }
-          allFiatPriceBalance={balanceListData.allFiatPriceBalance}
-        />
-        <Tabs
-          value={listTab}
-          onChange={(_: any, v: string | number | null) => {
-            if (v !== null) setListTab(v as ListTab);
-          }}
-        >
-          <TabsGroup tabs={tabs} />
-          <TabPanel value={ListTab.tokens}>
-            <HasBalanceTokenList balanceListData={balanceListData} />
-          </TabPanel>
-          <TabPanel value={ListTab.activity} className="pt-2">
-            <ActivityList
-              fetchTransactionQuery={fetchTransactionQuery}
-              getScrollParent={getScrollParent}
-            />
-          </TabPanel>
-        </Tabs>
-      </Box>
-    </>
-  );
-}
-
-export default AccountPage;
+'use client';
+
+import {
+  LoadingSkeleton,
+  Tabs,
+  alpha,
+  Box,
+  BoxProps,
+  ThemeProvider,
+  useTheme,
+  createTheme,
+  Tooltip,
+  RotatingIcon,
+  TabsGroup,
+  TabPanel,
+  ButtonBase,
+} from '@dodoex/components';
+import {
+  ArrowBack,
+  ArrowTopRightBorder,
+  Copy,
+  Disconnect,
+} from '@dodoex/icons';
+import copy from 'copy-to-clipboard';
+import WalletWeb3, { useWalletStore } from '@dodoex/wallet-web3';
+import { Trans } from '@lingui/macro';
+import { BigNumber } from 'bignumber.js';
+import React from 'react';
+import { truncatePoolAddress } from '../components/AddressWithLinkAndCopy';
+import { DialogTitle } from '../components/Dialog';
+import { useHasBalanceTokenList } from '../hooks/useHasBalanceTokenList';
+import { useTransactionList } from '../hooks/useTransactionList';
+import { formatReadableNumber, formatShortNumber } from '../utils/formatter';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import ActivityList from './ActivityList';
+import HasBalanceTokenList from './HasBalanceTokenList';
+
+function AccountCardInfoBg({
+  children,
+  chainLogo,
+}: React.PropsWithChildren<{
+  chainLogo: React.ReactNode;
+}>) {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        padding: 20,
+        borderRadius: 12,
+        border: 'solid 1px',
+        borderColor: 'border.main',
+        color: 'text.primary',
+        zIndex: 0,
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: -1,
+          overflow: 'hidden',
+          borderRadius: 12,
+        }}
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: '#F6F6F6',
+          }}
+        />
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            '& > img, & > svg': {
+              height: 'auto',
+              width: 'calc(100% + 2px)',
+              position: 'absolute',
+              '&:first-child': {
+                top: '50%',
+                transform: 'translateY(-50%)',
+                opacity: 0.5,
+                filter: 'blur(99.99999237060547px)',
+              },
+              '&:last-child': {
+                left: 60,
+                bottom: 40,
+                opacity: 0.2,
+                filter: 'blur(7.499999523162842px)',
+              },
+            },
+          }}
+        >
+          {chainLogo}
+          {chainLogo}
+        </Box>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            background:
+              'linear-gradient(108deg, rgba(255, 255, 255, 0.90) 9.8%, rgba(255, 255, 255, 0.00) 49.94%)',
+          }}
+        />
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+function AccountCardInfo({
+  chainId,
+  setShowSendTokenPage,
+  setShowReceiveTokenPage,
+  allFiatPriceBalance,
+  allFiatPriceBalanceLoading,
+}: {
+  chainId: number;
+  setShowSendTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowReceiveTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
+  allFiatPriceBalance: BigNumber;
+  allFiatPriceBalanceLoading: boolean;
+}) {
+  const { getChain } = useWalletConnectContext();
+  const chain = getChain(chainId);
+  const theme = createTheme({
+    mode: 'light',
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <AccountCardInfoBg chainLogo={chain?.logoBg ?? chain?.logo}>
+        <Box
+          sx={{
+            typography: 'body2',
+            color: 'text.secondary',
+          }}
+        >
+          <Trans>Balance</Trans>
+        </Box>
+        <LoadingSkeleton
+          component="div"
+          loading={allFiatPriceBalanceLoading}
+          loadingSx={{
+            width: 120,
+          }}
+          sx={{
+            mt: 4,
+            typography: 'h1',
+          }}
+          title={formatReadableNumber({ input: allFiatPriceBalance })}
+        >
+          ${formatShortNumber(allFiatPriceBalance)}
+        </LoadingSkeleton>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: 20,
+            mt: 28,
+          }}
+        >
+          {/* send */}
+          <ButtonBase
+            sx={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+              px: 20,
+              py: 12,
+              typography: 'body2',
+              backgroundColor: 'background.paperDarkContrast',
+              borderRadius: 12,
+              textAlign: 'left',
+              '&:hover': {
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText',
+              },
+            }}
+            onClick={() => {
+              setShowSendTokenPage(true);
+            }}
+          >
+            <Box
+              component={ArrowBack}
+              sx={{
+                transform: 'rotate(90deg)',
+              }}
+            />
+            <Trans>Send</Trans>
+          </ButtonBase>
+          {/* receive */}
+          <ButtonBase
+            sx={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+              px: 20,
+              py: 12,
+              typography: 'body2',
+              backgroundColor: 'background.paperDarkContrast',
+              borderRadius: 12,
+              textAlign: 'left',
+              '&:hover': {
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText',
+              },
+            }}
+            onClick={() => {
+              setShowReceiveTokenPage(true);
+            }}
+          >
+            <Box
+              component={ArrowBack}
+              sx={{
+                transform: 'rotate(-90deg)',
+              }}
+            />
+            <Trans>Receive</Trans>
+          </ButtonBase>
+        </Box>
+      </AccountCardInfoBg>
+    </ThemeProvider>
+  );
+}
+
+enum ListTab {
+  tokens = 'tokens',
+  activity = 'activity',
+}
+function AccountPage({
+  chainId,
+  account,
+  walletWeb3,
+  onClose,
+  setShowSendTokenPage,
+  setShowReceiveTokenPage,
+}: {
+  chainId: number;
+  account?: string;
+  walletWeb3?: WalletWeb3;
+  onClose: () => void;
+  setShowSendTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowReceiveTokenPage: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const { getChain } = useWalletConnectContext();
+  const { connected } = useWalletStore();
+  const connectedWallet = connected?.wallet;
+  const [listTab, setListTab] = React.useState(ListTab.tokens);
+  const scrollableNodeRef = React.useRef<HTMLDivElement>(null);
+  const getScrollParent = React.useCallback(() => {
+    if (scrollableNodeRef) return scrollableNodeRef.current;
+    return null;
+  }, [scrollableNodeRef]);
+
+  const balanceListData = useHasBalanceTokenList({
+    account,
+    visible: listTab === ListTab.tokens,
+  });
+
+  const fetchTransactionQuery = useTransactionList({
+    account,
+    chainId,
+  });
+  const tabs = [
+    { key: ListTab.tokens, value: <Trans>Token</Trans> },
+    {
+      key: ListTab.activity,
+      value: (
+        <Tooltip title={<Trans>On-chain transaction records</Trans>}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <Trans>Activity</Trans>
+            {!!fetchTransactionQuery.pendingList.length && <RotatingIcon />}
+          </Box>
+        </Tooltip>
+      ),
+    },
+  ];
+
+  const [showCopyTooltip, setShowCopyTooltip] = React.useState(false);
+  const autoCloseShowCopyTooltip = React.useCallback(() => {
+    const time = setTimeout(() => {
+      setShowCopyTooltip(false);
+    }, 1500);
+
+    return () => {
+      clearTimeout(time);
+    };
+  }, []);
+
+  const chain = getChain(chainId);
+  if (!account || !connectedWallet) return null;
+  return (
+    <>
+      <DialogTitle onClose={onClose}>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 8,
+            alignItems: 'center',
+            height: 34,
+            borderRadius: 8,
+            backgroundColor: 'background.paperContrast',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              pl: 8,
+            }}
+          >
+            <Box
+              sx={{
+                position: 'relative',
+                pr: 6,
+                width: 28,
+                height: 22,
+              }}
+            >
+              {!!connectedWallet.logo && (
+                <img
+                  src={connectedWallet.logo}
+                  alt={connectedWallet.showName}
+                  width={22}
+                  height={22}
+                />
+              )}
+              {!!chain?.logo && (
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    bottom: 0,
+                    right: 0,
+                    width: 12,
+                    height: 12,
+                    '& > img, & > svg': {
+                      position: 'absolute',
+                      inset: 0,
+                      width: '100%',
+                      height: '100%',
+                      borderRadius: '50%',
+                      border: 'solid 1px',
+                      borderColor: 'border.main',
+                    },
+                  }}
+                >
+                  {chain?.logo}
+                </Box>
+              )}
+            </Box>
+            {truncatePoolAddress(account)}
+          </Box>
+          <Tooltip
+            onlyClick
+            arrow={false}
+            title={<Trans>Copied</Trans>}
+            open={showCopyTooltip}
+            onOpen={() => {
+              setShowCopyTooltip(true);
+              autoCloseShowCopyTooltip();
+            }}
+            onClose={() => setShowCopyTooltip(false)}
+          >
+            <Box
+              component={Copy}
+              onClick={() => {
+                copy(account);
+              }}
+              sx={{
+                width: 18,
+                height: 18,
+                cursor: 'pointer',
+                color: 'text.secondary',
+                '&:hover': {
+                  color: 'text.primary',
+                },
+              }}
+            />
+          </Tooltip>
+          <Box
+            component="a"
+            rel="noopener noreferrer"
+            target="_blank"
+            href={chain?.scanUrl + '/address/' + account}
+            sx={{
+              display: 'flex',
+              lineHeight: 1,
+              color: 'text.secondary',
+              '&:hover': {
+                color: 'text.primary',
+              },
+            }}
+          >
+            <Box
+              component={ArrowTopRightBorder}
+              sx={{
+                width: 18,
+                height: 18,
+              }}
+            />
+          </Box>
+          <ButtonBase
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100%',
+              px: 8,
+              border: 'solid 0',
+              borderLeftWidth: 1,
+              borderColor: 'border.main',
+              color: 'error.main',
+              '&:hover': {
+                backgroundColor: 'background.tag',
+              },
+            }}
+            onClick={() => {
+              walletWeb3?.disconnectWallet();
+              onClose();
+            }}
+          >
+            <Box
+              component={Disconnect}
+              sx={{
+                width: 18,
+                height: 18,
+              }}
+            />
+          </ButtonBase>
+        </Box>
+      </DialogTitle>
+      <Box
+        sx={{
+          display: 'flex',
+
+          flexDirection: 'column',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          px: 20,
+        }}
+        ref={scrollableNodeRef}
+      >
+        <AccountCardInfo
+          chainId={chainId}
+          setShowSendTokenPage={setShowSendTokenPage}
+          setShowReceiveTokenPage={setShowReceiveTokenPage}
+          allFiatPriceBalanceLoading={
+            balanceListData.allFiatPriceBalanceLoading
+          }
+          allFiatPriceBalance={balanceListData.allFiatPriceBalance}
+        />
+        <Tabs
+          value={listTab}
+          onChange={(_: any, v: string | number | null) => {
+            if (v !== null) setListTab(v as ListTab);
+          }}
+        >
+          <TabsGroup tabs={tabs} />
+          <TabPanel value={ListTab.tokens}>
+            <HasBalanceTokenList balanceListData={balanceListData} />
+          </TabPanel>
+          <TabPanel value={ListTab.activity} className="pt-2">
+            <ActivityList
+              fetchTransactionQuery={fetchTransactionQuery}
+              getScrollParent={getScrollParent}
+            />
+          </TabPanel>
+        </Tabs>
+      </Box>
+    </>
+  );
+}
+
+export default AccountPage;