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

package/src/WalletConnect/ConnectLedger/SelectAddressDialog.tsx

@@ -0,0 +1,326 @@
+import {
+  Box,
+  Button,
+  LoadingSkeleton,
+  Radio,
+  useTheme,
+  alpha,
+} from '@dodoex/components';
+import { ArrowRight } from '@dodoex/icons';
+import { t, Trans } from '@lingui/macro';
+import BigNumber from 'bignumber.js';
+import { useEffect, useState } from 'react';
+import { AddressWithLink } from '../../components/AddressWithLinkAndCopy';
+import Dialog, { DialogTitle } from '../../components/Dialog';
+import { formatReadableNumber } from '../../utils/formatter';
+import { useWalletConnectContext } from '../../WalletConnectProvider';
+import { getAccountList } from './helper';
+
+function SwitchPageBtn({
+  left,
+  disabled,
+  onClick,
+}: {
+  left?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}) {
+  const theme = useTheme();
+  const backgroundColor = theme.palette.border.main;
+  const isLight = theme.palette.mode === 'light';
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor,
+        cursor: disabled ? 'disabled' : 'pointer',
+        color: disabled ? 'background.paperDarkContrast' : 'text.secondary',
+        '&:hover': {
+          backgroundColor: disabled
+            ? backgroundColor
+            : alpha(backgroundColor, isLight ? 0.3 : 0.5),
+        },
+      }}
+      onClick={() => {
+        if (disabled) return;
+        onClick();
+      }}
+    >
+      <Box
+        component={ArrowRight}
+        sx={
+          left
+            ? {
+                transform: 'rotate(180deg)',
+              }
+            : undefined
+        }
+      />
+    </Box>
+  );
+}
+
+export default function SelectAddressDialog({
+  on,
+  path,
+  chainId = 1,
+  onClose,
+  onNext,
+  onError,
+}: {
+  on: boolean;
+  path: string;
+  chainId: number;
+  onClose: () => void;
+  onNext: (path: string, address: string) => void;
+  onError: (error: any) => void;
+}) {
+  const { loadAccountListEthBalance, getChain } = useWalletConnectContext();
+  const theme = useTheme();
+  const [accountMap, setAccountMap] = useState<Map<number, string[]>>(
+    new Map(),
+  );
+  const [activeAddress, setActiveAddress] = useState('');
+  const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [pathMap, setPathMap] = useState<Map<string, string>>(new Map());
+  const [balanceMap, setBalanceMap] = useState<Map<string, number | null>>(
+    new Map(),
+  );
+  const pageSize = 5;
+
+  useEffect(() => {
+    if (on) {
+      if (!path) {
+        throw new Error('path is not valid.');
+      }
+      setAccountMap(new Map());
+      setBalanceMap(new Map());
+      setPage(1);
+    } else {
+      setPage(0);
+    }
+  }, [path, on, onError]);
+
+  useEffect(() => {
+    if (on && page) {
+      if (accountMap.get(page)) return;
+      setLoading(true);
+      if (!path) {
+        throw new Error('path is not valid.');
+      }
+      const computed = async () => {
+        let accountList = [] as Awaited<ReturnType<typeof getAccountList>>;
+        try {
+          accountList = await getAccountList(path, page, pageSize);
+          setLoading(false);
+        } catch (error) {
+          console.error(error);
+          onError(error);
+          setLoading(false);
+          return;
+        }
+        const newPathMap: Map<string, string> = new Map();
+        const accountArray = accountList.map(
+          ({ path: currentPath, account }) => {
+            newPathMap.set(account, currentPath);
+            return account;
+          },
+        );
+        setPathMap((prev) => new Map([...prev, ...newPathMap]));
+        setAccountMap((prev) => prev.set(page, accountArray));
+        if (loadAccountListEthBalance) {
+          const balanceMapRes = await loadAccountListEthBalance(
+            accountArray,
+            chainId,
+          );
+          setBalanceMap((prev) => new Map([...prev, ...balanceMapRes]));
+        }
+      };
+      computed();
+    }
+  }, [page]);
+
+  const etherSymbol = getChain(chainId)?.gasToken?.symbol ?? 'ETH';
+
+  const borderColor = theme.palette.border.main;
+  return (
+    <Dialog open={on} onClose={onClose} width={420}>
+      <DialogTitle onClose={onClose}>
+        <Trans>Before proceeding make sure</Trans>
+      </DialogTitle>
+      <Box>
+        <Box
+          component="table"
+          sx={{
+            mt: 38,
+            width: '100%',
+            borderRadius: 12,
+            borderCollapse: 'separate',
+            borderSpacing: 0,
+            border: `solid 1px ${borderColor}`,
+            '& td, & th': {
+              py: 12,
+              border: `solid 0px ${borderColor}`,
+              borderBottomWidth: 1,
+            },
+            '& th': {
+              typography: 'body1',
+              color: 'text.secondary',
+            },
+            '& tr:last-of-type td': {
+              borderColor: 'transparent',
+            },
+            '& td': {
+              '&:first-of-type': {
+                pl: 20,
+                pr: 8,
+              },
+              '&:last-of-type': {
+                pr: 20,
+              },
+            },
+          }}
+        >
+          <thead>
+            <tr>
+              <th style={{ width: 60 }}> </th>
+              <th style={{ width: 28 }}>
+                <Trans>ID</Trans>
+              </th>
+              <Box
+                component="th"
+                sx={{
+                  textAlign: 'center',
+                }}
+              >
+                <Trans>Address</Trans>
+              </Box>
+              {!!loadAccountListEthBalance && (
+                <th>
+                  <Trans>Balance</Trans>
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {(
+              accountMap.get(page) ??
+              Object.keys(new Array(pageSize + 1).join(','))
+            ).map((address, index) => (
+              <Box
+                component="tr"
+                key={address || index}
+                onClick={() => {
+                  if (address) {
+                    setActiveAddress(address);
+                  }
+                }}
+                sx={
+                  address
+                    ? {
+                        cursor: 'pointer',
+                        '&:hover': {
+                          backgroundColor: 'custom.background.listHover',
+                        },
+                      }
+                    : undefined
+                }
+              >
+                <td>
+                  <Radio
+                    checked={address === activeAddress}
+                    onChange={() => setActiveAddress(address as string)}
+                    // @ts-ignore
+                    disabled={!address}
+                  />
+                </td>
+                <td>{index + 1 + (page - 1) * pageSize}</td>
+                <LoadingSkeleton
+                  loading={loading}
+                  component="td"
+                  sx={{
+                    textAlign: 'center',
+                  }}
+                >
+                  {address ? (
+                    <AddressWithLink
+                      address={address}
+                      truncate
+                      iconSpace={6}
+                      customChainId={chainId}
+                      sx={{
+                        display: 'inline-flex',
+                      }}
+                    />
+                  ) : (
+                    ''
+                  )}
+                </LoadingSkeleton>
+                <LoadingSkeleton
+                  loading={loading || !balanceMap.get(address)}
+                  component="td"
+                  sx={{
+                    textAlign: 'right',
+                  }}
+                >
+                  {balanceMap.get(address)
+                    ? `${formatReadableNumber({
+                        input: balanceMap.get(address) || '',
+                      })} ${etherSymbol}`
+                    : ''}
+                </LoadingSkeleton>
+              </Box>
+            ))}
+          </tbody>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            mt: 20,
+          }}
+        >
+          <SwitchPageBtn
+            left
+            disabled={page === 1}
+            onClick={() => setPage((prev) => prev - 1)}
+          />
+          <Box
+            sx={{
+              mx: 8,
+            }}
+          >
+            {page}
+          </Box>
+          <SwitchPageBtn onClick={() => setPage((prev) => prev + 1)} />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          mt: 40,
+          px: 20,
+          py: 16,
+          backgroundColor: 'background.paperContrast',
+        }}
+      >
+        <Button
+          fullWidth
+          disabled={!activeAddress}
+          onClick={() => {
+            onNext(pathMap.get(activeAddress) as string, activeAddress);
+            onClose();
+          }}
+        >
+          <Trans>Continue</Trans>
+        </Button>
+      </Box>
+    </Dialog>
+  );
+}

package/src/WalletConnect/ConnectLedger/SelectPathDialog.tsx

@@ -0,0 +1,68 @@
+import { Button, alpha, Box, useTheme } from '@dodoex/components';
+import { HD_PATH_LIST } from '@dodoex/wallet-web3';
+import { Trans } from '@lingui/macro';
+import { useState } from 'react';
+import Dialog, { DialogTitle } from '../../components/Dialog';
+
+export default function SelectPathDialog({
+  on,
+  onClose,
+  onNext,
+}: {
+  on: boolean;
+  onClose: () => void;
+  onNext: (path: string) => void;
+}) {
+  const theme = useTheme();
+  const [activePath, setActivePath] = useState('');
+  const handleSelectPath = (path: string) => {
+    setActivePath(path);
+  };
+
+  return (
+    <Dialog open={on} onClose={onClose} width={420}>
+      <DialogTitle onClose={onClose}>
+        <Trans>Available Ledger Account</Trans>
+      </DialogTitle>
+      {HD_PATH_LIST.map(({ path, name }) => (
+        <Button
+          fullWidth
+          variant={Button.Variant.outlined}
+          sx={{
+            mt: 20,
+            ...(activePath !== path
+              ? {
+                  color: 'text.disabled',
+                  borderColor: theme.palette.background.paperDarkContrast,
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.text.primary, 0.1),
+                    color: 'text.primary',
+                  },
+                }
+              : {}),
+          }}
+          key={path}
+          onClick={() => handleSelectPath(path)}
+        >
+          {name}
+        </Button>
+      ))}
+      <Box
+        sx={{
+          mt: 40,
+          px: 20,
+          py: 16,
+          backgroundColor: 'background.paperContrast',
+        }}
+      >
+        <Button
+          fullWidth
+          disabled={!activePath}
+          onClick={() => onNext(activePath)}
+        >
+          <Trans>Continue</Trans>
+        </Button>
+      </Box>
+    </Dialog>
+  );
+}

package/src/WalletConnect/ConnectLedger/helper.ts

@@ -0,0 +1,14 @@
+import { getLedgerUSBPackage } from '@dodoex/wallet-web3';
+export async function getTransport() {
+  const ledger = await getLedgerUSBPackage();
+  return ledger.getTransport();
+}
+
+export async function getAccountList(
+  pathRule: string,
+  page?: number | undefined,
+  pageSize?: number,
+) {
+  const ledger = await getLedgerUSBPackage();
+  return ledger.getAccountList(pathRule, page, pageSize);
+}

package/src/WalletConnect/ConnectLedger/index.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getTransport } from './helper';
+import ProtocolDialog from './ProtocolDialog';
+import SelectAddressDialog from './SelectAddressDialog';
+import SelectPathDialog from './SelectPathDialog';
+import LoadingDialog from './LoadingDialog';
+import LockedDialog from './LockedDialog';
+import ErrorDialog from './ErrorDialog';
+
+enum Step {
+  init = 1,
+  readProtocol,
+  loadingConnect,
+  selectPath,
+  selectAddress,
+}
+
+export default function ConnectLedger({
+  on,
+  chainId = 1,
+  onClose,
+  onConnect,
+}: {
+  on: boolean;
+  chainId: number | undefined;
+  onClose: () => void;
+  onConnect: (path: string, account: string) => void;
+}) {
+  const [currentStep, setCurrentStep] = useState(Step.init);
+  const [path, setPath] = useState('');
+  const [error, setError] = useState<any | undefined>();
+
+  useEffect(() => {
+    if (!on) {
+      setCurrentStep(Step.init);
+    } else {
+      setCurrentStep(Step.readProtocol);
+    }
+  }, [on]);
+
+  const locked = useMemo(() => error?.statusCode === 27404, [error]);
+
+  return (
+    <>
+      <ProtocolDialog
+        on={currentStep === Step.readProtocol}
+        chainId={chainId}
+        onClose={onClose}
+        onNext={async () => {
+          setCurrentStep(Step.loadingConnect);
+          try {
+            const transport = await getTransport();
+            transport.close();
+            setCurrentStep(Step.selectPath);
+          } catch (e: any) {
+            // cancel
+            console.error(e);
+            onClose();
+          }
+        }}
+      />
+      <LoadingDialog on={currentStep === Step.loadingConnect} />
+      <SelectPathDialog
+        on={currentStep === Step.selectPath}
+        onClose={onClose}
+        onNext={(p) => {
+          setPath(p);
+          setCurrentStep(Step.selectAddress);
+        }}
+      />
+      <SelectAddressDialog
+        on={currentStep === Step.selectAddress}
+        path={path}
+        chainId={chainId}
+        onClose={onClose}
+        onNext={onConnect}
+        onError={(e: any) => {
+          setCurrentStep(Step.selectPath);
+          setError(e);
+        }}
+      />
+      <LockedDialog on={!!locked} onClose={() => setError(undefined)} />
+      <ErrorDialog
+        error={error && !locked ? error.message : undefined}
+        onClose={() => setError(undefined)}
+      />
+    </>
+  );
+}