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

package/src/WalletConnect/ConnectAlchemy/index.tsx

@@ -0,0 +1,246 @@
+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>
+  );
+}

package/src/WalletConnect/ConnectAlchemy/useConnectAlchemy.ts

@@ -0,0 +1,101 @@
+import WalletWeb3, {
+  allWalletObject,
+  ConnectorParams,
+  useWalletStore,
+  WalletType,
+} from '@dodoex/wallet-web3';
+import { useMutation } from '@tanstack/react-query';
+import React from 'react';
+import { connectToWallet } from '../../hooks/useConnectWalet';
+
+export type AlchemyParams = Exclude<
+  Partial<ConnectorParams['alchemyParams']>,
+  undefined
+>;
+
+export const USERNAME_PREFIX = 'DODO';
+
+export const alchemyWallet = allWalletObject.Alchemy;
+
+export async function checkAlchemyCache(chainId: number) {
+  const alchemy = await alchemyWallet.getPackage?.();
+  if (alchemy) {
+    const signer = await alchemy.getAlchemySigner(chainId);
+    const user = await signer.getAuthDetails().catch(() => null);
+    if (user) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function useConnectAlchemyQuery({
+  walletWeb3,
+  showAlchemyConnect,
+}: {
+  walletWeb3: WalletWeb3;
+  showAlchemyConnect: () => void;
+}) {
+  const connectMutation = useConnectAlchemy({
+    walletWeb3,
+  });
+  const { chainId } = useWalletStore();
+  const search = typeof window !== 'undefined' ? window.location.search : '';
+
+  React.useEffect(() => {
+    const searchParams = new URLSearchParams(search);
+    const bundle = searchParams.get('bundle');
+    if (bundle) {
+      const orgId = searchParams.get('orgId');
+      connectMutation.mutate({
+        type: 'email',
+        orgId: orgId as string | undefined,
+        bundle: bundle as string,
+      });
+    } else {
+      // auto connect
+      const autoConnect = async () => {
+        const cacheType = walletWeb3.connectController.getAutoCacheType();
+        if (cacheType === WalletType.Alchemy) {
+          const alchemy = await alchemyWallet.getPackage?.();
+          const signer = await alchemy.getAlchemySigner(chainId);
+          const user = await signer.getAuthDetails().catch(() => null);
+          if (user) {
+            await connectToWallet(walletWeb3, alchemy, {
+              chainId,
+            });
+          } else {
+            showAlchemyConnect();
+          }
+        }
+      };
+      autoConnect();
+    }
+  }, [search]);
+}
+
+export function useConnectAlchemy({ walletWeb3 }: { walletWeb3: WalletWeb3 }) {
+  const { chainId } = useWalletStore();
+  return useMutation({
+    mutationFn: async (authParams: AlchemyParams['authParams']) => {
+      const alchemy = await alchemyWallet.getPackage?.();
+      const signer = await alchemy.getAlchemySigner(chainId);
+      // Register by email, no need to go down. The user will open a new page from the mailbox and connect in useConnectAlchemyQuery
+      if (authParams?.type === 'email' && 'email' in authParams) {
+        const search = new URLSearchParams();
+        await signer.authenticate({
+          ...authParams,
+          redirectParams: search,
+        });
+        return;
+      }
+      await signer.authenticate(authParams);
+      await connectToWallet(walletWeb3, alchemy, {
+        chainId,
+        alchemyParams: {
+          authParams,
+        },
+      });
+    },
+  });
+}

package/src/WalletConnect/ConnectLedger/ErrorDialog.tsx

@@ -0,0 +1,61 @@
+import { Box, Button } from '@dodoex/components';
+import { Error } from '@dodoex/icons';
+import { Trans } from '@lingui/macro';
+import Dialog from '../../components/Dialog';
+
+export default function ErrorDialog({
+  error,
+  onClose,
+}: {
+  error?: string;
+  onClose: () => void;
+}) {
+  return (
+    <Dialog open={!!error} width={340} onClose={onClose}>
+      <Box
+        sx={{
+          textAlign: 'center',
+          p: 20,
+        }}
+      >
+        <Box
+          component={Error}
+          sx={{
+            width: 40,
+            height: 40,
+            color: 'error.main',
+          }}
+        />
+        <Box
+          sx={{
+            typography: 'caption',
+            mt: 20,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          <Trans>Unknown Error</Trans>
+        </Box>
+        <Box
+          sx={{
+            typography: 'h6',
+            mt: 12,
+            whiteSpace: 'pre-wrap',
+            color: 'text.secondary',
+          }}
+        >
+          {error}
+        </Box>
+        <Button
+          onClick={onClose}
+          fullWidth
+          variant={Button.Variant.outlined}
+          sx={{
+            mt: 24,
+          }}
+        >
+          <Trans>OK</Trans>
+        </Button>
+      </Box>
+    </Dialog>
+  );
+}

package/src/WalletConnect/ConnectLedger/LoadingDialog.tsx

@@ -0,0 +1,106 @@
+import { Box } from '@dodoex/components';
+import { Trans } from '@lingui/macro';
+import Dialog from '../../components/Dialog';
+
+const strokeWidth = 4;
+
+function LoadingRotate() {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: 64,
+        height: 64,
+        mt: 20,
+        borderRadius: '50%',
+        borderStyle: 'solid',
+        borderWidth: strokeWidth,
+        borderColor: 'background.input',
+        animation: 'rotation 2s infinite linear',
+        '@keyframes rotation': {
+          '0%': {
+            transform: 'rotate(0deg)',
+          },
+          '100%': {
+            transform: 'rotate(360deg)',
+          },
+        },
+        '& > svg': {
+          position: 'absolute',
+          top: `-${strokeWidth}px`,
+          right: `-${strokeWidth}px`,
+          color: 'primary.main',
+        },
+      }}
+    >
+      <svg
+        width="33px"
+        height="33px"
+        viewBox="0 0 33 33"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <g
+            transform="translate(-186.000000, -375.000000)"
+            stroke="currentColor"
+            strokeWidth="4"
+          >
+            <g transform="translate(18.000000, 291.000000)">
+              <g transform="translate(40.000000, 83.000000)">
+                <path d="M159,32 C159,15.9837423 146.016258,3 130,3"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </Box>
+  );
+}
+
+export default function LoadingDialog({ on }: { on: boolean }) {
+  return (
+    <Dialog open={on} width={340}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          p: 20,
+        }}
+      >
+        <Box
+          sx={{
+            color: 'text.secondary',
+          }}
+        >
+          <Trans>Account</Trans>
+        </Box>
+        <LoadingRotate />
+        <Box
+          sx={{
+            mt: 20,
+          }}
+        >
+          <Trans>Available Ledger Account</Trans>
+        </Box>
+        <Box
+          sx={{
+            mt: 8,
+            color: 'text.secondary',
+            typography: 'body2',
+          }}
+        >
+          <Trans>Loading...</Trans>
+        </Box>
+      </Box>
+    </Dialog>
+  );
+}

package/src/WalletConnect/ConnectLedger/LockedDialog.tsx

@@ -0,0 +1,54 @@
+import { Button, Box } from '@dodoex/components';
+import { Lock } from '@dodoex/icons';
+import { Trans } from '@lingui/macro';
+import Dialog from '../../components/Dialog';
+
+export default function LockedDialog({
+  on,
+  onClose,
+}: {
+  on: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <Dialog open={on} width={340} onClose={onClose}>
+      <Box
+        sx={{
+          textAlign: 'center',
+          py: 20,
+        }}
+      >
+        <Box
+          component={Lock}
+          sx={{
+            mt: 20,
+            width: 64,
+            height: 64,
+            color: 'primary.main',
+          }}
+        />
+        <Box
+          sx={{
+            mt: 20,
+            whiteSpace: 'pre-wrap',
+            fontWeight: 600,
+          }}
+        >
+          <Trans>
+            The Ledger Device is locked\nPlease unlock from the device
+          </Trans>
+        </Box>
+        <Button
+          onClick={onClose}
+          fullWidth
+          variant={Button.Variant.outlined}
+          sx={{
+            mt: 24,
+          }}
+        >
+          <Trans>OK</Trans>
+        </Button>
+      </Box>
+    </Dialog>
+  );
+}

package/src/WalletConnect/ConnectLedger/ProtocolDialog.tsx

@@ -0,0 +1,61 @@
+import { Box, Button } from '@dodoex/components';
+import { Trans, t } from '@lingui/macro';
+import Dialog from '../../components/Dialog';
+import { useWalletConnectContext } from '../../WalletConnectProvider';
+
+export default function ProtocolDialog({
+  on,
+  chainId,
+  onClose,
+  onNext,
+}: {
+  on: boolean;
+  chainId: number;
+  onClose: () => void;
+  onNext: () => void;
+}) {
+  const { getChain } = useWalletConnectContext();
+  const { name: ledgerAppName } = getChain(chainId) || { name: 'Unknown' };
+  const BR = '\n';
+  return (
+    <Dialog
+      open={on}
+      onClose={onClose}
+      width={340}
+      bodySx={{
+        px: 20,
+      }}
+    >
+      <Box
+        sx={{
+          typography: 'caption',
+          mt: 28,
+          textAlign: 'center',
+        }}
+      >
+        <Trans>Before proceeding make sure</Trans>
+      </Box>
+      <Box
+        sx={{
+          mt: 12,
+          whiteSpace: 'pre-wrap',
+          color: 'text.secondary',
+          typography: 'body2',
+        }}
+      >
+        {t`1、Ledger Live APP is closed${BR}2、The device plugged in via USB，NOT Bluetooth${BR}3、The device is unlocked and in the ${ledgerAppName} app${BR}4、”Blind Signing” is enabled in ${ledgerAppName} app`}
+      </Box>
+      <Button
+        onClick={onNext}
+        fullWidth
+        variant={Button.Variant.outlined}
+        sx={{
+          mt: 24,
+          mb: 20,
+        }}
+      >
+        <Trans>Continue</Trans>
+      </Button>
+    </Dialog>
+  );
+}