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

package/src/WalletConnect/ReceiveTokenPage.tsx

@@ -0,0 +1,143 @@
+import { useWalletStore } from '@dodoex/wallet-web3';
+import { ArrowBack, Copy } from '@dodoex/icons';
+import { Trans } from '@lingui/macro';
+import React from 'react';
+import copy from 'copy-to-clipboard';
+import { QRCodeSVG } from 'qrcode.react';
+import { DialogTitle } from '../components/Dialog';
+import { Box, ButtonBase, Tooltip } from '@dodoex/components';
+
+export default function ReceiveTokenPage({
+  onClose,
+  onBack,
+}: {
+  onClose: () => void;
+  onBack: () => void;
+}) {
+  const { account } = useWalletStore();
+  const [showCopyTooltip, setShowCopyTooltip] = React.useState(false);
+  const autoCloseShowCopyTooltip = React.useCallback(() => {
+    const time = setTimeout(() => {
+      setShowCopyTooltip(false);
+    }, 1500);
+
+    return () => {
+      clearTimeout(time);
+    };
+  }, []);
+
+  if (!account) return null;
+
+  return (
+    <>
+      <DialogTitle onClose={onClose}>
+        <ButtonBase
+          onClick={onBack}
+          sx={{
+            display: 'flex',
+            gap: 8,
+            alignItems: 'center',
+            typography: 'caption',
+          }}
+        >
+          <Box
+            component={ArrowBack}
+            sx={{
+              width: 16,
+              height: 16,
+            }}
+          />
+          <Trans>Receive</Trans>
+        </ButtonBase>
+      </DialogTitle>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          overflowY: 'auto',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flex: 1,
+            pt: 28,
+            pb: 20,
+            width: 326,
+            mx: 'auto',
+          }}
+        >
+          <Box>
+            <Box
+              sx={{
+                p: 36,
+                borderRadius: 12,
+                border: 'solid 1px',
+                borderColor: 'border.main',
+              }}
+            >
+              <QRCodeSVG id="qrcode" size={252} value={account} level="M" />
+            </Box>
+            <Box
+              sx={{
+                mt: 12,
+                color: 'text.secondary',
+                wordBreak: 'break-all',
+                textAlign: 'center',
+              }}
+            >
+              {account}
+            </Box>
+          </Box>
+          <Tooltip
+            onlyClick
+            arrow={false}
+            title={<Trans>Copied</Trans>}
+            open={showCopyTooltip}
+            onOpen={() => {
+              setShowCopyTooltip(true);
+              autoCloseShowCopyTooltip();
+            }}
+            onClose={() => setShowCopyTooltip(false)}
+          >
+            <ButtonBase
+              onClick={() => {
+                copy(account);
+              }}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 4,
+                mt: 12,
+                px: 16,
+                py: 6,
+                width: '100%',
+                height: 48,
+                fontWeight: 600,
+                backgroundColor: 'background.paperDarkContrast',
+                borderRadius: 8,
+                '&:hover': {
+                  opacity: 0.7,
+                },
+              }}
+            >
+              <Box
+                component={Copy}
+                sx={{
+                  width: 18,
+                  height: 18,
+                }}
+              />
+              <Trans>Copy wallet address</Trans>
+            </ButtonBase>
+          </Tooltip>
+        </Box>
+      </Box>
+    </>
+  );
+}

package/src/WalletConnect/SendTokenPage.tsx

@@ -0,0 +1,249 @@
+import { useWalletStore } from '@dodoex/wallet-web3';
+import { isAddress } from '@ethersproject/address';
+import { ArrowBack, Loading } from '@dodoex/icons';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import React from 'react';
+import { TokenInfo } from '../components/TokenLogo';
+import { useMutation } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
+import { Trans } from '@lingui/macro';
+import { DialogTitle } from '../components/Dialog';
+import { Box, Button, ButtonBase, useTheme } from '@dodoex/components';
+import { truncatePoolAddress } from '../components/AddressWithLinkAndCopy';
+
+export default function SendTokenPage({
+  open,
+  onClose,
+  onBack,
+}: {
+  open?: boolean;
+  onClose: () => void;
+  onBack: () => void;
+}) {
+  const theme = useTheme();
+  const { getChain } = useWalletConnectContext();
+  const { chainId } = useWalletStore();
+  const chain = getChain(chainId);
+  const defaultToken = chain
+    ? ({
+        ...chain?.gasToken,
+        chainId,
+      } as TokenInfo)
+    : null;
+  const [token, setToken] = React.useState<TokenInfo | null>(defaultToken);
+  const [amount, setAmount] = React.useState('');
+  const [receiverAddress, setReceiverAddress] = React.useState('');
+  const [receiverAddressFormat, setReceiverAddressFormat] = React.useState('');
+  const [invalidReceiver, setInvalidReceiver] = React.useState(false);
+
+  const disabled =
+    !amount ||
+    !receiverAddress ||
+    invalidReceiver ||
+    !isAddress(receiverAddress);
+
+  const sendTokenMutation = useMutation({
+    mutationFn: async () => {
+      if (disabled || !token || token.decimals === undefined) return;
+      const amountWei = new BigNumber(amount).times(10 ** token.decimals);
+      const amountWeiStr = `0x${amountWei.toString(16)}`;
+      let data = '';
+      let paramsValue = '';
+      let to = token.address;
+      // if (
+      //   token.address.toLowerCase() === defaultToken?.address?.toLowerCase()
+      // ) {
+      //   paramsValue = amountWeiStr;
+      //   data = '0x';
+      //   to = receiverAddress;
+      // } else {
+      //   paramsValue = '0x0';
+      //   data = await TokenApi.encode.transferEncodeABI(
+      //     receiverAddress,
+      //     amountWeiStr,
+      //   );
+      // }
+      // const result = await execute({
+      //   brief: 'wallet.account.card.operate.send',
+      //   spec: {
+      //     opcode: OpCode.TX,
+      //     value: paramsValue,
+      //     to,
+      //     data,
+      //   },
+      //   successBack: () => {
+      //     // queryClient.invalidateQueries({
+      //     //   queryKey: ['graphql', 'FetchCrossChainDODOOrderList'],
+      //     // });
+      //   },
+      //   metadata: {
+      //     [MetadataFlag.sendToken]: true,
+      //   },
+      // });
+      // if (result === ExecutionResult.Success) {
+      //   setAmount('');
+      // }
+    },
+  });
+
+  React.useEffect(() => {
+    if (open) {
+      setToken(defaultToken);
+      setAmount('');
+      sendTokenMutation.reset();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <>
+      <DialogTitle onClose={onClose}>
+        <ButtonBase
+          onClick={onBack}
+          sx={{
+            display: 'flex',
+            gap: 8,
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            component={ArrowBack}
+            sx={{
+              width: 16,
+              height: 16,
+            }}
+          />
+          <Trans>Send</Trans>
+        </ButtonBase>
+      </DialogTitle>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          flex: 1,
+          px: 20,
+          pb: 20,
+          overflowY: 'auto',
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              p: 20,
+              backgroundColor: 'background.input',
+              borderRadius: 16,
+            }}
+          >
+            <Box
+              sx={{
+                color: 'text.secondary',
+                typography: 'h5',
+              }}
+            >
+              <Trans>Receiver address</Trans>
+            </Box>
+            <Box
+              component="input"
+              sx={{
+                mt: 12,
+                width: '100%',
+                fontSize: '36px',
+                lineHeight: '40px',
+                fontWeight: 600,
+                backgroundColor: 'transparent',
+                '&::placeholder': {
+                  color: 'text.disabled',
+                },
+              }}
+              placeholder="0x..."
+              value={receiverAddressFormat || receiverAddress}
+              onChange={(evt) => {
+                setReceiverAddress(evt.target.value);
+                setInvalidReceiver(false);
+              }}
+              onFocus={() => {
+                setReceiverAddressFormat('');
+              }}
+              onBlur={(evt) => {
+                const value = evt.target.value;
+                if (!value) return;
+                if (!isAddress(value)) {
+                  setInvalidReceiver(true);
+                } else {
+                  setReceiverAddressFormat(truncatePoolAddress(value));
+                }
+              }}
+            />
+            {!!invalidReceiver && (
+              <Box
+                sx={{
+                  mt: 4,
+                  color: 'error.main',
+                  typography: 'h6',
+                }}
+              >
+                <Trans>Invalid wallet address</Trans>
+              </Box>
+            )}
+          </Box>
+          {/* <Widget>
+            <TokenCard
+              amt={amount}
+              onInputChange={(v) => setAmount(v)}
+              token={token}
+              onTokenChange={(token) => setToken(token)}
+              showPercentage
+              sx={{
+                mt: 12,
+                pb: 20,
+                '&&& input': {
+                  typography: 'h1',
+                  '&::placeholder': {
+                    typography: 'h1',
+                  },
+                },
+              }}
+            />
+          </Widget> */}
+        </Box>
+        <Button
+          disabled={disabled}
+          fullWidth
+          onClick={() => {
+            if (sendTokenMutation.isPending) return;
+            sendTokenMutation.mutate();
+          }}
+          sx={{
+            gap: 4,
+            mt: 12,
+            width: '100%',
+            fontWeight: 600,
+          }}
+        >
+          {sendTokenMutation.isPending && (
+            <Box
+              component={Loading}
+              sx={{
+                width: 20,
+                '& path': {
+                  fill: theme.palette.primary.contrastText,
+                },
+                animation: 'loadingRotate 1.1s infinite linear',
+                '@keyframes loadingRotate': {
+                  '0%': {
+                    transform: 'rotate(0deg)',
+                  },
+                  '100%': {
+                    transform: 'rotate(359deg)',
+                  },
+                },
+              }}
+            />
+          )}
+          <Trans>Send</Trans>
+        </Button>
+      </Box>
+    </>
+  );
+}

package/src/WalletConnect/WalletDialog.tsx

@@ -0,0 +1,72 @@
+import WalletWeb3, { useWalletStore } from '@dodoex/wallet-web3';
+import AccountPage from './AccountPage';
+import React from 'react';
+import Dialog from '../components/Dialog';
+import ConnectPage from './ConnectPage';
+import ReceiveTokenPage from './ReceiveTokenPage';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+
+export default function WalletDialog({
+  open,
+  onClose,
+  walletWeb3,
+}: {
+  open: boolean;
+  onClose: () => void;
+  walletWeb3: WalletWeb3;
+}) {
+  const { SendTokenPage } = useWalletConnectContext();
+  const { account, chainId } = useWalletStore();
+  const [showSendTokenPage, setShowSendTokenPage] = React.useState(false);
+  const [showReceiveTokenPage, setShowReceiveTokenPage] = React.useState(false);
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      width={420}
+      bodySx={{
+        height: account ? '80vh' : undefined,
+      }}
+    >
+      {account ? (
+        <>
+          {showSendTokenPage ? (
+            <>
+              {!!SendTokenPage && (
+                <SendTokenPage
+                  open={showSendTokenPage}
+                  onClose={onClose}
+                  onBack={() => setShowSendTokenPage(false)}
+                />
+              )}
+            </>
+          ) : showReceiveTokenPage ? (
+            <ReceiveTokenPage
+              onClose={onClose}
+              onBack={() => setShowReceiveTokenPage(false)}
+            />
+          ) : (
+            <>
+              <AccountPage
+                chainId={chainId}
+                account={account}
+                walletWeb3={walletWeb3}
+                onClose={onClose}
+                setShowSendTokenPage={setShowSendTokenPage}
+                setShowReceiveTokenPage={setShowReceiveTokenPage}
+              />
+            </>
+          )}
+        </>
+      ) : (
+        <ConnectPage
+          chainId={chainId}
+          account={account}
+          walletWeb3={walletWeb3}
+          showOtherInjectWallet
+          onClose={onClose}
+        />
+      )}
+    </Dialog>
+  );
+}

package/src/WalletConnectProvider.tsx

@@ -0,0 +1,54 @@
+import { GraphQLRequests, RestApiRequests } from '@dodoex/api';
+import React from 'react';
+import { TokenInfo } from './components/TokenLogo';
+import { WalletItem } from './hooks/useConnectWalet';
+
+const WalletConnectContext = React.createContext<{
+  chainId?: number;
+  termsOfServiceLink?: React.ReactNode;
+  connectTimeout?: number;
+  graphQLRequests?: GraphQLRequests;
+  tokenList: Array<TokenInfo>;
+  restApiRequests?: RestApiRequests;
+  SendTokenPage?: (params: {
+    open?: boolean;
+    onClose: () => void;
+    onBack: () => void;
+  }) => JSX.Element;
+  encryptFiatPriceToken?: () => string;
+  loadAccountListEthBalance?: (
+    accountList: string[],
+    chainId?: number,
+  ) => Promise<Map<string, number | null>>;
+  getChain: (chainId: number) => null | {
+    name: string;
+    scanUrl: string;
+    gasToken: {
+      symbol: string;
+      decimals: number;
+    };
+    logo: React.ReactNode;
+  };
+  getTokenLogoUrl?: (op: {
+    chainId?: number | null;
+    address?: string | null;
+    width?: number;
+    height?: number;
+  }) => string | null;
+  onConnectTimeout?: () => void;
+  switchNetwork?: (chainId: number) => void;
+  onConnected?: (chainId: number, wallet: WalletItem) => void;
+  onClickToken?: (token: TokenInfo) => void;
+}>({
+  connectTimeout: 15000,
+  tokenList: [],
+  getChain: () => {
+    throw new Error('getChain is undefined');
+  },
+});
+
+export const WalletConnectProvider = WalletConnectContext.Provider;
+
+export const useWalletConnectContext = () => {
+  return React.useContext(WalletConnectContext);
+};