@dodoex/wallet-web3-react 0.2.0 → 0.3.0

package/src/WalletConnect/ConnectAlchemy/index.tsx

@@ -1,246 +1,248 @@
-import { Button, Input, Box, ButtonBase } from '@dodoex/components';
-import WalletWeb3 from '@dodoex/wallet-web3';
-import React from 'react';
-import {
-  alchemyWallet,
-  useConnectAlchemy,
-  useConnectAlchemyQuery,
-  USERNAME_PREFIX,
-} from './useConnectAlchemy';
-import { t, Trans } from '@lingui/macro';
-import { ArrowRight } from '@dodoex/icons';
-import { validateEmail } from '../../utils/utils';
-import Dialog, { DialogTitle } from '../../components/Dialog';
-
-export default function ConnectAlchemy({
-  open,
-  walletWeb3,
-  setOpen,
-}: {
-  open: boolean;
-  walletWeb3: WalletWeb3;
-  setOpen: (open: boolean) => void;
-}) {
-  const [email, setEmail] = React.useState('');
-  const invalidEmail = !!email && !validateEmail(email);
-  const onClose = () => setOpen(false);
-
-  useConnectAlchemyQuery({
-    walletWeb3,
-    showAlchemyConnect: () => setOpen(true),
-  });
-  const connectMutation = useConnectAlchemy({
-    walletWeb3,
-  });
-
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle
-        sx={{
-          p: 20,
-          borderWidth: '0 0 1px',
-          borderStyle: 'solid',
-          borderColor: 'border.main',
-        }}
-      >
-        <Trans>Connect Alchemy</Trans>
-      </DialogTitle>
-      <Box
-        sx={{
-          p: 20,
-        }}
-      >
-        <Box
-          component="img"
-          src={alchemyWallet.logo}
-          sx={{
-            display: 'block',
-            mx: 'auto',
-            width: 40,
-            height: 40,
-          }}
-        />
-        {connectMutation.variables?.type === 'email' &&
-        (connectMutation.isSuccess || connectMutation.isPending) ? (
-          <>
-            <Box
-              sx={{
-                mt: 20,
-                textAlign: 'center',
-                typography: 'caption',
-              }}
-            >
-              <Trans>Log in with your email</Trans>
-            </Box>
-            <Box
-              sx={{
-                mt: 12,
-                mx: 'auto',
-                maxWidth: 300,
-                textAlign: 'center',
-                color: 'text.secondary',
-                typography: 'body2',
-              }}
-            >
-              <Trans>
-                Check your email and click the link to complete login
-              </Trans>
-            </Box>
-            <ButtonBase
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                mt: 20,
-                mx: 'auto',
-                typography: 'body2',
-                '&:hover': {
-                  color: 'text.secondary',
-                },
-              }}
-              onClick={() => {
-                connectMutation.reset();
-              }}
-            >
-              <Trans>Go Back</Trans>
-              <Box
-                component={ArrowRight}
-                sx={{
-                  width: 18,
-                  height: 18,
-                }}
-              />
-            </ButtonBase>
-          </>
-        ) : (
-          <>
-            <Box
-              sx={{
-                mt: 20,
-                mx: 'auto',
-                textAlign: 'center',
-                maxWidth: 300,
-                typography: 'caption',
-              }}
-            >
-              <Trans>Log in with your email or a passkey</Trans>
-            </Box>
-            <Input
-              placeholder={t`Enter email`}
-              fullWidth
-              height={48}
-              errorMsg={invalidEmail ? t`Invalid email` : undefined}
-              value={email}
-              onChange={(evt) => setEmail(evt.target.value)}
-              sx={{
-                mt: 20,
-              }}
-            />
-            <Button
-              fullWidth
-              disabled={!email || invalidEmail}
-              sx={{
-                mt: 12,
-              }}
-              isLoading={
-                connectMutation.variables?.type === 'email' &&
-                connectMutation.isPending
-              }
-              onClick={() => {
-                connectMutation.mutate({
-                  type: 'email',
-                  email,
-                });
-              }}
-            >
-              <Trans>Submit</Trans>
-            </Button>
-
-            <Box
-              sx={{
-                position: 'relative',
-                mt: 20,
-                textAlign: 'center',
-                '&::before': {
-                  content: '""',
-                  display: 'block',
-                  position: 'absolute',
-                  top: '50%',
-                  left: 0,
-                  right: 0,
-                  transform: 'translateY(-50%)',
-                  height: '1px',
-                  backgroundColor: 'border.main',
-                },
-              }}
-            >
-              <Box
-                component="span"
-                sx={{
-                  px: 8,
-                  backgroundColor: 'background.paper',
-                  color: 'text.secondary',
-                  position: 'relative',
-                  zIndex: 1,
-                }}
-              >
-                <Trans>or</Trans>
-              </Box>
-            </Box>
-            <Button
-              fullWidth
-              variant={Button.Variant.outlined}
-              sx={{
-                mt: 20,
-              }}
-              onClick={async () => {
-                await connectMutation.mutateAsync({
-                  type: 'passkey',
-                  createNew: true,
-                  username: `${USERNAME_PREFIX}_${Date.now()}`,
-                });
-                if (!connectMutation.isError) {
-                  onClose();
-                }
-              }}
-            >
-              <Trans>Create new passkey</Trans>
-            </Button>
-            <ButtonBase
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                mt: 12,
-                mx: 'auto',
-                py: 8,
-                typography: 'body2',
-                '&:hover': {
-                  color: 'text.secondary',
-                },
-              }}
-              onClick={async () => {
-                await connectMutation.mutateAsync({
-                  type: 'passkey',
-                  createNew: false,
-                });
-                if (!connectMutation.isError) {
-                  onClose();
-                }
-              }}
-            >
-              <Trans>Choose existing passkey</Trans>
-              <Box
-                component={ArrowRight}
-                sx={{
-                  width: 18,
-                  height: 18,
-                }}
-              />
-            </ButtonBase>
-          </>
-        )}
-      </Box>
-    </Dialog>
-  );
-}
+'use client';
+
+import { Button, Input, Box, ButtonBase } from '@dodoex/components';
+import WalletWeb3 from '@dodoex/wallet-web3';
+import React from 'react';
+import {
+  alchemyWallet,
+  useConnectAlchemy,
+  useConnectAlchemyQuery,
+  USERNAME_PREFIX,
+} from './useConnectAlchemy';
+import { t, Trans } from '@lingui/macro';
+import { ArrowRight } from '@dodoex/icons';
+import { validateEmail } from '../../utils/utils';
+import Dialog, { DialogTitle } from '../../components/Dialog';
+
+export default function ConnectAlchemy({
+  open,
+  walletWeb3,
+  setOpen,
+}: {
+  open: boolean;
+  walletWeb3: WalletWeb3;
+  setOpen: (open: boolean) => void;
+}) {
+  const [email, setEmail] = React.useState('');
+  const invalidEmail = !!email && !validateEmail(email);
+  const onClose = () => setOpen(false);
+
+  useConnectAlchemyQuery({
+    walletWeb3,
+    showAlchemyConnect: () => setOpen(true),
+  });
+  const connectMutation = useConnectAlchemy({
+    walletWeb3,
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle
+        sx={{
+          p: 20,
+          borderWidth: '0 0 1px',
+          borderStyle: 'solid',
+          borderColor: 'border.main',
+        }}
+      >
+        <Trans>Connect Alchemy</Trans>
+      </DialogTitle>
+      <Box
+        sx={{
+          p: 20,
+        }}
+      >
+        <Box
+          component="img"
+          src={alchemyWallet.logo}
+          sx={{
+            display: 'block',
+            mx: 'auto',
+            width: 40,
+            height: 40,
+          }}
+        />
+        {connectMutation.variables?.type === 'email' &&
+        (connectMutation.isSuccess || connectMutation.isPending) ? (
+          <>
+            <Box
+              sx={{
+                mt: 20,
+                textAlign: 'center',
+                typography: 'caption',
+              }}
+            >
+              <Trans>Log in with your email</Trans>
+            </Box>
+            <Box
+              sx={{
+                mt: 12,
+                mx: 'auto',
+                maxWidth: 300,
+                textAlign: 'center',
+                color: 'text.secondary',
+                typography: 'body2',
+              }}
+            >
+              <Trans>
+                Check your email and click the link to complete login
+              </Trans>
+            </Box>
+            <ButtonBase
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                mt: 20,
+                mx: 'auto',
+                typography: 'body2',
+                '&:hover': {
+                  color: 'text.secondary',
+                },
+              }}
+              onClick={() => {
+                connectMutation.reset();
+              }}
+            >
+              <Trans>Go Back</Trans>
+              <Box
+                component={ArrowRight}
+                sx={{
+                  width: 18,
+                  height: 18,
+                }}
+              />
+            </ButtonBase>
+          </>
+        ) : (
+          <>
+            <Box
+              sx={{
+                mt: 20,
+                mx: 'auto',
+                textAlign: 'center',
+                maxWidth: 300,
+                typography: 'caption',
+              }}
+            >
+              <Trans>Log in with your email or a passkey</Trans>
+            </Box>
+            <Input
+              placeholder={t`Enter email`}
+              fullWidth
+              height={48}
+              errorMsg={invalidEmail ? t`Invalid email` : undefined}
+              value={email}
+              onChange={(evt) => setEmail(evt.target.value)}
+              sx={{
+                mt: 20,
+              }}
+            />
+            <Button
+              fullWidth
+              disabled={!email || invalidEmail}
+              sx={{
+                mt: 12,
+              }}
+              isLoading={
+                connectMutation.variables?.type === 'email' &&
+                connectMutation.isPending
+              }
+              onClick={() => {
+                connectMutation.mutate({
+                  type: 'email',
+                  email,
+                });
+              }}
+            >
+              <Trans>Submit</Trans>
+            </Button>
+
+            <Box
+              sx={{
+                position: 'relative',
+                mt: 20,
+                textAlign: 'center',
+                '&::before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  top: '50%',
+                  left: 0,
+                  right: 0,
+                  transform: 'translateY(-50%)',
+                  height: '1px',
+                  backgroundColor: 'border.main',
+                },
+              }}
+            >
+              <Box
+                component="span"
+                sx={{
+                  px: 8,
+                  backgroundColor: 'background.paper',
+                  color: 'text.secondary',
+                  position: 'relative',
+                  zIndex: 1,
+                }}
+              >
+                <Trans>or</Trans>
+              </Box>
+            </Box>
+            <Button
+              fullWidth
+              variant={Button.Variant.outlined}
+              sx={{
+                mt: 20,
+              }}
+              onClick={async () => {
+                await connectMutation.mutateAsync({
+                  type: 'passkey',
+                  createNew: true,
+                  username: `${USERNAME_PREFIX}_${Date.now()}`,
+                });
+                if (!connectMutation.isError) {
+                  onClose();
+                }
+              }}
+            >
+              <Trans>Create new passkey</Trans>
+            </Button>
+            <ButtonBase
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                mt: 12,
+                mx: 'auto',
+                py: 8,
+                typography: 'body2',
+                '&:hover': {
+                  color: 'text.secondary',
+                },
+              }}
+              onClick={async () => {
+                await connectMutation.mutateAsync({
+                  type: 'passkey',
+                  createNew: false,
+                });
+                if (!connectMutation.isError) {
+                  onClose();
+                }
+              }}
+            >
+              <Trans>Choose existing passkey</Trans>
+              <Box
+                component={ArrowRight}
+                sx={{
+                  width: 18,
+                  height: 18,
+                }}
+              />
+            </ButtonBase>
+          </>
+        )}
+      </Box>
+    </Dialog>
+  );
+}