@dodoex/wallet-web3-react 0.0.1-beta.0

package/src/WalletConnect/AccountPage.tsx

@@ -0,0 +1,535 @@
+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 CardIcon({ sx, ...other }: BoxProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 52,
+        height: 52,
+        borderRadius: '50%',
+        backgroundColor: alpha('#1a1a1b', 0.1),
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: '#FFE804',
+        },
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+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?.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,
+              '&: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,
+              '&: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,
+    chainId,
+    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={() => {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              // const provider = (useWalletStore.getState().provider as any)
+              //   ?.provider;
+              // if (provider._handleDisconnect) {
+              //   provider._handleDisconnect();
+              // }
+              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={(_, v) => setListTab(v as ListTab)}
+          placeholder=""
+          onPointerEnterCapture={() => {}}
+          onPointerLeaveCapture={() => {}}
+        >
+          <TabsGroup tabs={tabs} />
+          <TabPanel
+            value={ListTab.tokens}
+            placeholder=""
+            onPointerEnterCapture={() => {}}
+            onPointerLeaveCapture={() => {}}
+          >
+            <HasBalanceTokenList balanceListData={balanceListData} />
+          </TabPanel>
+          <TabPanel
+            value={ListTab.activity}
+            className="pt-2"
+            placeholder=""
+            onPointerEnterCapture={() => {}}
+            onPointerLeaveCapture={() => {}}
+          >
+            <ActivityList
+              fetchTransactionQuery={fetchTransactionQuery}
+              getScrollParent={getScrollParent}
+            />
+          </TabPanel>
+        </Tabs>
+      </Box>
+    </>
+  );
+}
+
+export default AccountPage;