@dodoex/wallet-web3-react 0.2.0 → 0.3.0

package/src/components/WalletTag.tsx

@@ -1,115 +1,117 @@
-import { alpha, Box, RotatingIcon, useTheme } from '@dodoex/components';
-import { WalletType } from '@dodoex/wallet-web3';
-import { Trans } from '@lingui/macro';
-import { WalletItem } from '../hooks/useConnectWallet';
-
-export interface WalletTagProps {
-  loading: boolean;
-  wallet: WalletItem;
-  isChecked: boolean;
-  installed: boolean;
-};
-
-export default function WalletTag({
-  loading,
-  wallet,
-  isChecked,
-  installed,
-}: WalletTagProps) {
-  const theme = useTheme();
-  const greenColor = theme.palette.success.main;
-  const connectedColor = theme.palette.mode === 'light' ? '#EB8D27' : '#FFE804';
-  const connectedColorBg = alpha('#FFE804', 0.1);
-  if (loading) {
-    return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 4,
-          p: theme.spacing(4, 8),
-          borderRadius: 6,
-          typography: 'body2',
-          backgroundColor: alpha(theme.palette.text.primary, 0.1),
-          color: 'text.secondary',
-        }}
-      >
-        <RotatingIcon
-          sx={{
-            width: 18,
-            height: 18,
-            color: 'text.secondary',
-          }}
-        />
-        <Trans>Connecting</Trans>··
-      </Box>
-    );
-  }
-
-  if (isChecked) {
-    return (
-      <Box
-        sx={{
-          p: theme.spacing(4, 8),
-          borderRadius: 6,
-          typography: 'body2',
-          backgroundColor: connectedColorBg,
-          color: connectedColor,
-        }}
-      >
-        <Trans>Connected</Trans>
-      </Box>
-    );
-  }
-
-  if (wallet.isLastConnection) {
-    return (
-      <Box
-        sx={{
-          p: theme.spacing(4, 8),
-          borderRadius: 6,
-          typography: 'body2',
-          backgroundColor: alpha(theme.palette.text.primary, 0.1),
-          color: 'text.secondary',
-        }}
-      >
-        <Trans>Last connection</Trans>
-      </Box>
-    );
-  }
-
-  if (wallet.currentType === WalletType.SocialLogin) {
-    return (
-      <Box
-        sx={{
-          mt: 4,
-          padding: theme.spacing(4, 8),
-          borderRadius: 6,
-          typography: 'body2',
-          backgroundColor: alpha(greenColor, 0.1),
-          color: greenColor,
-        }}
-      >
-        New
-      </Box>
-    );
-  }
-
-  if (installed) {
-    return (
-      <Box
-        sx={{
-          p: theme.spacing(4, 8),
-          borderRadius: 6,
-          typography: 'body2',
-          backgroundColor: alpha(theme.palette.text.primary, 0.1),
-          color: 'text.secondary',
-        }}
-      >
-        <Trans>Installed Wallet</Trans>
-      </Box>
-    );
-  }
-
-  return null;
-}
+'use client';
+
+import { alpha, Box, RotatingIcon, useTheme } from '@dodoex/components';
+import { WalletType } from '@dodoex/wallet-web3';
+import { Trans } from '@lingui/macro';
+import { WalletItem } from '../hooks/useConnectWallet';
+
+export interface WalletTagProps {
+  loading: boolean;
+  wallet: WalletItem;
+  isChecked: boolean;
+  installed: boolean;
+};
+
+export default function WalletTag({
+  loading,
+  wallet,
+  isChecked,
+  installed,
+}: WalletTagProps) {
+  const theme = useTheme();
+  const greenColor = theme.palette.success.main;
+  const connectedColor = theme.palette.mode === 'light' ? '#EB8D27' : '#FFE804';
+  const connectedColorBg = alpha('#FFE804', 0.1);
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          color: 'text.secondary',
+        }}
+      >
+        <RotatingIcon
+          sx={{
+            width: 18,
+            height: 18,
+            color: 'text.secondary',
+          }}
+        />
+        <Trans>Connecting</Trans>··
+      </Box>
+    );
+  }
+
+  if (isChecked) {
+    return (
+      <Box
+        sx={{
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: connectedColorBg,
+          color: connectedColor,
+        }}
+      >
+        <Trans>Connected</Trans>
+      </Box>
+    );
+  }
+
+  if (wallet.isLastConnection) {
+    return (
+      <Box
+        sx={{
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          color: 'text.secondary',
+        }}
+      >
+        <Trans>Last connection</Trans>
+      </Box>
+    );
+  }
+
+  if (wallet.currentType === WalletType.SocialLogin) {
+    return (
+      <Box
+        sx={{
+          mt: 4,
+          padding: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(greenColor, 0.1),
+          color: greenColor,
+        }}
+      >
+        New
+      </Box>
+    );
+  }
+
+  if (installed) {
+    return (
+      <Box
+        sx={{
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          color: 'text.secondary',
+        }}
+      >
+        <Trans>Installed Wallet</Trans>
+      </Box>
+    );
+  }
+
+  return null;
+}

package/src/constants/localstorage.ts

@@ -1,22 +1,24 @@
-const TOKEN_FIAT_PRICE_LIST = 'DODO_WIDGET_TOKEN_FIAT_PRICE_LIST';
-interface FiatPriceCacheList {
-  [k: string]: number;
-}
-export function setTokenFiatPriceList(value: FiatPriceCacheList) {
-  const oldList = getTokenFiatPriceList();
-  const newList = {
-    ...oldList,
-    ...value,
-  };
-  localStorage.setItem(TOKEN_FIAT_PRICE_LIST, JSON.stringify(newList));
-}
-export function getTokenFiatPriceList(): FiatPriceCacheList {
-  const storage = localStorage.getItem(TOKEN_FIAT_PRICE_LIST);
-  try {
-    if (!storage) return {};
-    return JSON.parse(storage);
-  } catch (e) {
-    console.error(e);
-    return {};
-  }
-}
+'use client';
+
+const TOKEN_FIAT_PRICE_LIST = 'DODO_WIDGET_TOKEN_FIAT_PRICE_LIST';
+interface FiatPriceCacheList {
+  [k: string]: number;
+}
+export function setTokenFiatPriceList(value: FiatPriceCacheList) {
+  const oldList = getTokenFiatPriceList();
+  const newList = {
+    ...oldList,
+    ...value,
+  };
+  localStorage.setItem(TOKEN_FIAT_PRICE_LIST, JSON.stringify(newList));
+}
+export function getTokenFiatPriceList(): FiatPriceCacheList {
+  const storage = localStorage.getItem(TOKEN_FIAT_PRICE_LIST);
+  try {
+    if (!storage) return {};
+    return JSON.parse(storage);
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+}

package/src/hooks/useConnectWallet.ts

@@ -1,146 +1,150 @@
-import WalletWeb3, { useWalletStore, Wallet } from '@dodoex/wallet-web3';
-import React from 'react';
-
-const SETTINGS_ACCOUNT_RISK_CONFIRM = '0.settings:account:risk-confirm';
-
-export interface WalletItem {
-  title: string;
-  icon: string;
-  currentType: string;
-  onClick: (
-    providerPackageOptions?: Partial<WalletWeb3['providerConfig']>,
-  ) => void;
-  disabled?: boolean;
-  isLastConnection: boolean;
-  isInstalled?: boolean;
-  source: Wallet;
-}
-
-export const useConnectWallet = ({
-  walletWeb3,
-  matchTestChain,
-  showOtherInjectWallet,
-  selectedChainId,
-  hasTermsOfServiceLink,
-}: {
-  walletWeb3?: WalletWeb3;
-  /** Match the test chain and display the first bit of showName and chainIds as the matching test chain. If it is false or not transmitted, the main network information will still be displayed. */
-  matchTestChain?: boolean;
-  /**
-   * No need to display when switching wallets
-   */
-  showOtherInjectWallet?: boolean;
-  selectedChainId?: number;
-  hasTermsOfServiceLink?: boolean;
-}) => {
-  const activeWalletType = useWalletStore((state) => state.walletType);
-
-  const { walletList } = useWalletListByNetwork(
-    selectedChainId,
-    walletWeb3,
-    showOtherInjectWallet,
-  );
-  const [userReadAndChecked, setUserReadAndChecked] = React.useState<boolean>(
-    hasTermsOfServiceLink
-      ? localStorage.getItem(SETTINGS_ACCOUNT_RISK_CONFIRM) === '1' || true
-      : true,
-  );
-
-  const handleChangeUserReadAndChecked = (val: boolean) => {
-    localStorage.setItem(SETTINGS_ACCOUNT_RISK_CONFIRM, val ? '1' : '0');
-    setUserReadAndChecked(val);
-  };
-
-  return {
-    walletList,
-    userReadAndChecked,
-    handleChangeUserReadAndChecked,
-    activeWalletType,
-  };
-};
-
-export const connectToWallet = async (
-  walletWeb3: WalletWeb3 | undefined,
-  wallet: Wallet,
-  config?: Partial<WalletWeb3['providerConfig']>,
-) => {
-  if (!walletWeb3 || !walletWeb3.connectWalletBefore(wallet)) return;
-  const providerConfig = {
-    ...config,
-  };
-
-  return walletWeb3.connectToWallet(wallet, providerConfig);
-};
-
-export function useWalletListByNetwork(
-  chainId?: number,
-  walletWeb3?: WalletWeb3,
-  showOtherInjectWallet?: boolean,
-  closeSingleWalletConnectModal?: () => void,
-) {
-  const [walletList, setWalletList] = React.useState<WalletItem[]>([]);
-  const disabledWalletKeyList = useWalletStore(
-    (state) => state.disabledWalletKeyList,
-  );
-  const eip6963WalletList = useWalletStore((state) => state.eip6963WalletList);
-
-  React.useEffect(() => {
-    const computed = async () => {
-      if (walletWeb3 && chainId !== undefined) {
-        const walletListOrigin = walletWeb3.getWalletList(chainId, {
-          eip6963WalletList,
-        });
-        const list = [] as WalletItem[];
-        let len = walletListOrigin.length;
-        for (let i = 0; i < len; i++) {
-          const item = walletListOrigin[i];
-          let isInstalled = false;
-          if (item.injected) {
-            isInstalled = item.injected();
-          }
-          if (!isInstalled && item.isInstalled) {
-            isInstalled = await item.isInstalled?.();
-          }
-          list.push({
-            title: item.showName,
-            icon: item.logo,
-            currentType: item.type,
-            source: item,
-            onClick: (providerPackageOptions) => {
-              try {
-                return connectToWallet(
-                  walletWeb3,
-                  item,
-                  providerPackageOptions,
-                );
-              } catch (error) {
-                if (closeSingleWalletConnectModal) {
-                  closeSingleWalletConnectModal();
-                }
-                throw error;
-              }
-            },
-            disabled: disabledWalletKeyList.includes(
-              `${item.type}-${item.showName}`,
-            ),
-            isLastConnection:
-              item.type === walletWeb3.connectController.getLastConnectType(),
-            isInstalled,
-          });
-        }
-        setWalletList(list);
-      }
-    };
-    computed();
-  }, [
-    walletWeb3,
-    chainId,
-    showOtherInjectWallet,
-    disabledWalletKeyList,
-    eip6963WalletList,
-  ]);
-
-  return {
-    walletList,
-  };
-}
+'use client';
+
+import WalletWeb3, { useWalletStore, Wallet } from '@dodoex/wallet-web3';
+import React from 'react';
+
+const SETTINGS_ACCOUNT_RISK_CONFIRM = '0.settings:account:risk-confirm';
+
+export interface WalletItem {
+  title: string;
+  icon: string;
+  currentType: string;
+  onClick: (
+    providerPackageOptions?: Partial<WalletWeb3['providerConfig']>,
+  ) => void;
+  disabled?: boolean;
+  isLastConnection: boolean;
+  isInstalled?: boolean;
+  source: Wallet;
+}
+
+export const useConnectWallet = ({
+  walletWeb3,
+  matchTestChain,
+  showOtherInjectWallet,
+  selectedChainId,
+  hasTermsOfServiceLink,
+}: {
+  walletWeb3?: WalletWeb3;
+  /** Match the test chain and display the first bit of showName and chainIds as the matching test chain. If it is false or not transmitted, the main network information will still be displayed. */
+  matchTestChain?: boolean;
+  /**
+   * No need to display when switching wallets
+   */
+  showOtherInjectWallet?: boolean;
+  selectedChainId?: number;
+  hasTermsOfServiceLink?: boolean;
+}) => {
+  const activeWalletType = useWalletStore((state) => state.walletType);
+
+  const { walletList } = useWalletListByNetwork(
+    selectedChainId,
+    walletWeb3,
+    showOtherInjectWallet,
+  );
+  const [userReadAndChecked, setUserReadAndChecked] = React.useState<boolean>(
+    hasTermsOfServiceLink
+      ? localStorage.getItem(SETTINGS_ACCOUNT_RISK_CONFIRM) === '1' || true
+      : true,
+  );
+
+  const handleChangeUserReadAndChecked = (val: boolean) => {
+    localStorage.setItem(SETTINGS_ACCOUNT_RISK_CONFIRM, val ? '1' : '0');
+    setUserReadAndChecked(val);
+  };
+
+  return {
+    walletList,
+    userReadAndChecked,
+    handleChangeUserReadAndChecked,
+    activeWalletType,
+  };
+};
+
+export const connectToWallet = async (
+  walletWeb3: WalletWeb3 | undefined,
+  wallet: Wallet,
+  config?: Partial<WalletWeb3['providerConfig']>,
+) => {
+  if (!walletWeb3 || !walletWeb3.connectWalletBefore(wallet)) return;
+  const providerConfig = {
+    ...config,
+  };
+
+  return walletWeb3.connectToWallet(wallet, providerConfig);
+};
+
+export function useWalletListByNetwork(
+  chainId?: number,
+  walletWeb3?: WalletWeb3,
+  showOtherInjectWallet?: boolean,
+  closeSingleWalletConnectModal?: () => void,
+) {
+  const [walletList, setWalletList] = React.useState<WalletItem[]>([]);
+  const disabledWalletKeyList = useWalletStore(
+    (state) => state.disabledWalletKeyList,
+  );
+  const eip6963WalletList = useWalletStore((state) => state.eip6963WalletList);
+
+  React.useEffect(() => {
+    const computed = async () => {
+      if (walletWeb3 && chainId !== undefined) {
+        // Reset disabled state before getting wallet list
+        await walletWeb3.setDisabledState();
+        const walletListOrigin = walletWeb3.getWalletList(chainId, {
+          eip6963WalletList,
+        });
+        const list = [] as WalletItem[];
+        let len = walletListOrigin.length;
+        for (let i = 0; i < len; i++) {
+          const item = walletListOrigin[i];
+          let isInstalled = false;
+          if (item.injected) {
+            isInstalled = item.injected();
+          }
+          if (!isInstalled && item.isInstalled) {
+            isInstalled = await item.isInstalled?.();
+          }
+          list.push({
+            title: item.showName,
+            icon: item.logo,
+            currentType: item.type,
+            source: item,
+            onClick: (providerPackageOptions) => {
+              try {
+                return connectToWallet(
+                  walletWeb3,
+                  item,
+                  providerPackageOptions,
+                );
+              } catch (error) {
+                if (closeSingleWalletConnectModal) {
+                  closeSingleWalletConnectModal();
+                }
+                throw error;
+              }
+            },
+            disabled: disabledWalletKeyList.includes(
+              `${item.type}-${item.showName}`,
+            ),
+            isLastConnection:
+              item.type === walletWeb3.connectController.getLastConnectType(),
+            isInstalled,
+          });
+        }
+        setWalletList(list);
+      }
+    };
+    computed();
+  }, [
+    walletWeb3,
+    chainId,
+    showOtherInjectWallet,
+    disabledWalletKeyList,
+    eip6963WalletList,
+  ]);
+
+  return {
+    walletList,
+  };
+}