@dodoex/wallet-web3-react 0.4.0 → 0.4.2

package/src/WalletConnect/ReceiveTokenPage.tsx

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