@dodoex/wallet-web3-react 0.2.1 → 0.3.0

package/src/WalletConnect/SendTokenPage.tsx

@@ -1,249 +1,251 @@
-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>
-    </>
-  );
-}
+'use client';
+
+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>
+    </>
+  );
+}