@dodoex/wallet-web3-react 0.2.0 → 0.3.0

package/src/WalletConnect/ConnectAlchemy/useConnectAlchemy.ts

@@ -1,105 +1,105 @@
-import WalletWeb3, {
-  allWalletObject,
-  ConnectorParams,
-  useWalletStore,
-  WalletType,
-} from '@dodoex/wallet-web3';
-import { useMutation } from '@tanstack/react-query';
-import React from 'react';
-import { connectToWallet } from '../../hooks/useConnectWallet';
-
-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,
-            walletWeb3.providerConfig.alchemyParams?.apiKeyObject!,
-          );
-          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,
-          apiKeyObject: walletWeb3.providerConfig.alchemyParams?.apiKeyObject!,
-        },
-      });
-    },
-  });
-}
+import WalletWeb3, {
+  allWalletObject,
+  ConnectorParams,
+  useWalletStore,
+  WalletType,
+} from '@dodoex/wallet-web3';
+import { useMutation } from '@tanstack/react-query';
+import React from 'react';
+import { connectToWallet } from '../../hooks/useConnectWallet';
+
+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,
+            walletWeb3.providerConfig.alchemyParams?.apiKeyObject!,
+          );
+          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,
+          apiKeyObject: walletWeb3.providerConfig.alchemyParams?.apiKeyObject!,
+        },
+      });
+    },
+  });
+}

package/src/WalletConnect/ConnectDialog.tsx

@@ -1,33 +1,35 @@
-import WalletWeb3, { useWalletStore } from '@dodoex/wallet-web3';
-import React from 'react';
-import Dialog from '../components/Dialog';
-import ConnectPage, { ConnectPageProps } from './ConnectPage';
-
-export default function ConnectDialog({
-  open,
-  onClose,
-  walletWeb3,
-  onConnectWallet,
-  WalletTag,
-}: {
-  open: boolean;
-  onClose: () => void;
-  walletWeb3: WalletWeb3;
-  onConnectWallet?: ConnectPageProps['onConnectWallet'];
-  WalletTag?: ConnectPageProps['WalletTag'];
-}) {
-  const { account, chainId: connectChainId } = useWalletStore();
-  return (
-    <Dialog open={open} onClose={onClose} width={420}>
-      <ConnectPage
-        chainId={connectChainId}
-        account={account}
-        walletWeb3={walletWeb3}
-        showOtherInjectWallet
-        onClose={onClose}
-        onConnectWallet={onConnectWallet}
-        WalletTag={WalletTag}
-      />
-    </Dialog>
-  );
-}
+'use client';
+
+import WalletWeb3, { useWalletStore } from '@dodoex/wallet-web3';
+import React from 'react';
+import Dialog from '../components/Dialog';
+import ConnectPage, { ConnectPageProps } from './ConnectPage';
+
+export default function ConnectDialog({
+  open,
+  onClose,
+  walletWeb3,
+  onConnectWallet,
+  WalletTag,
+}: {
+  open: boolean;
+  onClose: () => void;
+  walletWeb3: WalletWeb3;
+  onConnectWallet?: ConnectPageProps['onConnectWallet'];
+  WalletTag?: ConnectPageProps['WalletTag'];
+}) {
+  const { account, chainId: connectChainId } = useWalletStore();
+  return (
+    <Dialog open={open} onClose={onClose} width={420}>
+      <ConnectPage
+        chainId={connectChainId}
+        account={account}
+        walletWeb3={walletWeb3}
+        showOtherInjectWallet
+        onClose={onClose}
+        onConnectWallet={onConnectWallet}
+        WalletTag={WalletTag}
+      />
+    </Dialog>
+  );
+}

package/src/WalletConnect/ConnectLedger/ErrorDialog.tsx

@@ -1,61 +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>
-  );
-}
+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/LockedDialog.tsx

@@ -1,54 +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>
-  );
-}
+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/helper.ts

@@ -1,14 +1,14 @@
-import { getLedgerUSBPackage } from '@dodoex/wallet-web3';
-export async function getTransport() {
-  const ledger = await getLedgerUSBPackage();
-  return ledger.getTransport();
-}
-
-export async function getAccountList(
-  pathRule: string,
-  page?: number | undefined,
-  pageSize?: number,
-) {
-  const ledger = await getLedgerUSBPackage();
-  return ledger.getAccountList(pathRule, page, pageSize);
-}
+import { getLedgerUSBPackage } from '@dodoex/wallet-web3';
+export async function getTransport() {
+  const ledger = await getLedgerUSBPackage();
+  return ledger.getTransport();
+}
+
+export async function getAccountList(
+  pathRule: string,
+  page?: number | undefined,
+  pageSize?: number,
+) {
+  const ledger = await getLedgerUSBPackage();
+  return ledger.getAccountList(pathRule, page, pageSize);
+}

package/src/WalletConnect/ConnectLedger/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useMemo, useState } from 'react';
 import { getTransport } from './helper';
 import ProtocolDialog from './ProtocolDialog';