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

package/src/WalletConnect/ConnectPage.tsx

@@ -0,0 +1,459 @@
+import React from 'react';
+import WalletWeb3, { useWalletStore, WalletType } from '@dodoex/wallet-web3';
+import { useConnectWallet, WalletItem } from '../hooks/useConnectWalet';
+import { alpha, Box, ButtonBase, Checkbox, useTheme } from '@dodoex/components';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import WalletTag 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,
+};
+
+function WalletGroupItem({
+  chainId,
+  wallet,
+  loggedIn,
+  matchChain,
+  selectedChainId,
+  disabled,
+  activeWalletType,
+  installed,
+  disabledClick,
+  onShowLedgerConnect,
+  onShowAlchemyConnect,
+}: {
+  chainId?: number;
+  wallet: WalletItem;
+  loggedIn: boolean;
+  matchChain: boolean;
+  selectedChainId: number | undefined;
+  disabled?: boolean;
+  activeWalletType?: WalletType;
+  installed?: boolean;
+  disabledClick: () => void;
+  onShowLedgerConnect: () => void;
+  onShowAlchemyConnect: () => void;
+}) {
+  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',
+        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 (
+                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>
+      <WalletTag
+        loading={loading}
+        wallet={wallet}
+        isChecked={isChecked}
+        installed={!!installed}
+      />
+    </Box>
+  );
+}
+
+function ConnectPage({
+  chainId,
+  account,
+  walletWeb3,
+  showOtherInjectWallet,
+  onClose,
+}: {
+  chainId: number;
+  account?: string;
+  walletWeb3?: WalletWeb3;
+  showOtherInjectWallet?: boolean;
+  onClose: () => void;
+}) {
+  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)}
+                />
+              );
+            })}
+          </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;

package/src/WalletConnect/HasBalanceTokenList.tsx

@@ -0,0 +1,201 @@
+import {
+  Box,
+  EmptyDataIcon,
+  LoadingSkeleton,
+  Skeleton,
+  TooltipToast,
+  useTheme,
+} from '@dodoex/components';
+import { Trans } from '@lingui/macro';
+import { ArrowTopRightBorder, Copy } from '@dodoex/icons';
+import copy from 'copy-to-clipboard';
+import { increaseArray } from '../utils/utils';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import TokenLogo from '../components/TokenLogo';
+import { formatReadableNumber, formatShortNumber } from '../utils/formatter';
+import { useHasBalanceTokenList } from '../hooks/useHasBalanceTokenList';
+
+export default function HasBalanceTokenList({
+  balanceListData,
+}: {
+  balanceListData: ReturnType<typeof useHasBalanceTokenList>;
+}) {
+  const theme = useTheme();
+  const { onClickToken, getChain } = useWalletConnectContext();
+  return (
+    <div>
+      {balanceListData.tokenLoading &&
+        increaseArray(3).map((_, i) => (
+          <Skeleton
+            key={i}
+            width="100%"
+            height={40}
+            sx={{
+              mx: 20,
+              my: 16,
+            }}
+          />
+        ))}
+      {!balanceListData.tokenLoading && !balanceListData.hasBalanceList.length && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: 12,
+            mt: 56,
+            color: 'text.secondary',
+          }}
+        >
+          <EmptyDataIcon />
+          <Trans>No tokens</Trans>
+        </Box>
+      )}
+      {balanceListData.hasBalanceList.map((token) => {
+        return (
+          <Box
+            key={token.address}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 12,
+              px: 20,
+              py: 16,
+              overflow: 'hidden',
+              ...(onClickToken
+                ? {
+                    cursor: 'pointer',
+                    '&:hover': {
+                      backgroundColor: 'hover.default',
+                      '& .token-operate': {
+                        display: 'flex',
+                      },
+                    },
+                  }
+                : {}),
+            }}
+            onClick={() => {
+              if (onClickToken) {
+                onClickToken(token);
+              }
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <TokenLogo
+                address={token.address}
+                chainId={token.chainId}
+                logoURI={token.logoURI}
+                width={40}
+                height={40}
+              />
+              <div>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                  }}
+                >
+                  {token.name}
+                  <Box
+                    className="token-operate"
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 4,
+                      [theme.breakpoints.up('tablet')]: {
+                        display: 'none',
+                      },
+                    }}
+                  >
+                    <TooltipToast arrow={false} title={<Trans>Copied</Trans>}>
+                      <Box
+                        component={Copy}
+                        sx={{
+                          width: 14,
+                          height: 14,
+                          cursor: 'pointer',
+                          color: 'text.secondary',
+                          '&:hover': {
+                            color: 'text.primary',
+                          },
+                        }}
+                        onClick={() => {
+                          copy(token.address);
+                        }}
+                      />
+                    </TooltipToast>
+                    <Box
+                      component="a"
+                      href={`https://${getChain(token.chainId)?.scanUrl}${
+                        token.address ? `/address/${token.address}` : ''
+                      }`}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      sx={{
+                        display: 'flex',
+                        width: 14,
+                        height: 14,
+                        color: 'text.secondary',
+                        '&:hover': {
+                          color: 'text.primary',
+                        },
+                      }}
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                      }}
+                    >
+                      <Box
+                        component={ArrowTopRightBorder}
+                        sx={{
+                          width: 14,
+                          height: 14,
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                </Box>
+                <div className="text-sm text-secondary">
+                  {`${formatReadableNumber({ input: token.balance })} ${
+                    token.symbol
+                  }`}
+                </div>
+              </div>
+            </Box>
+            <LoadingSkeleton
+              loading={balanceListData.fiatPriceQuery.isLoading}
+              loadingProps={{
+                width: 100,
+              }}
+              title={
+                token.fiatPriceBalance
+                  ? `$${formatReadableNumber({
+                      input: token.fiatPriceBalance,
+                    })}`
+                  : undefined
+              }
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                typography: 'h5',
+              }}
+            >
+              $
+              {token.fiatPriceBalance
+                ? formatShortNumber(token.fiatPriceBalance)
+                : '-'}
+            </LoadingSkeleton>
+          </Box>
+        );
+      })}
+    </div>
+  );
+}