@dodoex/wallet-web3-react 0.2.1 → 0.3.0

package/src/hooks/useFetchFiatPrice.ts

@@ -1,51 +1,53 @@
-import { ChainId, platformIdMap, RestApiRequests } from '@dodoex/api';
-import { useQuery } from '@tanstack/react-query';
-import { TokenInfo } from '../components/TokenLogo';
-import { setTokenFiatPriceList } from '../constants/localstorage';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-
-export function getFiatPriceQueryKeys(tokens?: TokenInfo[]) {
-  return ['fetch', 'fetchFiatPrice', tokens];
-}
-
-export function useFetchFiatPrice(tokens: TokenInfo[]) {
-  const { encryptFiatPriceToken, restApiRequests: restApiRequestsProps } =
-    useWalletConnectContext();
-  return useQuery({
-    enabled: !!tokens.length,
-    queryKey: getFiatPriceQueryKeys(tokens),
-    queryFn: async () => {
-      const token = encryptFiatPriceToken?.() || '';
-      const restApiRequests = restApiRequestsProps ?? new RestApiRequests();
-      const path = `/frontend-v2-price-api/current/batch`;
-      const { result } = await restApiRequests.postJson(
-        path,
-        {
-          networks: tokens.map(
-            (token) => platformIdMap[token.chainId as ChainId],
-          ),
-          addresses: tokens.map((token) => token.address),
-          symbols: tokens.map((token) => token.symbol),
-          isCache: true,
-        },
-        undefined,
-        {
-          headers: {
-            'pass-key': token,
-          },
-        },
-      );
-      const resultMap = new Map<string, number>();
-      if (result.data) {
-        result.data.forEach((item: { price: string; address: string }) => {
-          const tokenUSD = Number(item.price);
-          if (!Number.isNaN(tokenUSD) && tokenUSD > 0) {
-            resultMap.set(item.address, tokenUSD);
-          }
-        });
-        setTokenFiatPriceList(Object.fromEntries(resultMap.entries()));
-      }
-      return resultMap;
-    },
-  });
-}
+import { ChainId, platformIdMap, RestApiRequests } from '@dodoex/api';
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { TokenInfo } from '../components/TokenLogo';
+import { setTokenFiatPriceList } from '../constants/localstorage';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+
+export function getFiatPriceQueryKeys(tokens?: TokenInfo[]) {
+  return ['fetch', 'fetchFiatPrice', tokens];
+}
+
+export function useFetchFiatPrice(tokens: TokenInfo[]) {
+  const { encryptFiatPriceToken, restApiRequests: restApiRequestsProps } =
+    useWalletConnectContext();
+  return useQuery({
+    enabled: !!tokens.length,
+    queryKey: getFiatPriceQueryKeys(tokens),
+    queryFn: async () => {
+      const token = encryptFiatPriceToken?.() || '';
+      const restApiRequests = restApiRequestsProps ?? new RestApiRequests();
+      const path = `/frontend-v2-price-api/current/batch`;
+      const { result } = await restApiRequests.postJson(
+        path,
+        {
+          networks: tokens.map(
+            (token) => platformIdMap[token.chainId as ChainId],
+          ),
+          addresses: tokens.map((token) => token.address),
+          symbols: tokens.map((token) => token.symbol),
+          isCache: true,
+        },
+        undefined,
+        {
+          headers: {
+            'pass-key': token,
+          },
+        },
+      );
+      const resultMap = new Map<string, number>();
+      if (result.data) {
+        result.data.forEach((item: { price: string; address: string }) => {
+          const tokenUSD = Number(item.price);
+          if (!Number.isNaN(tokenUSD) && tokenUSD > 0) {
+            resultMap.set(item.address, tokenUSD);
+          }
+        });
+        setTokenFiatPriceList(Object.fromEntries(resultMap.entries()));
+      }
+      return resultMap;
+    },
+  });
+}

package/src/hooks/useFetchTokensBalance.ts

@@ -1,51 +1,53 @@
-import { getFetchERC20BalanceOfQueryOptions } from '@dodoex/dodo-contract-request';
-import { useQueries } from '@tanstack/react-query';
-import { TokenInfo } from '../components/TokenLogo';
-
-type TokenInfoMap = Map<string, bigint>;
-
-export default function useFetchTokensBalance({
-  account,
-  tokenList,
-  blockNumber,
-  skip,
-}: {
-  account: string | undefined;
-  tokenList?: TokenInfo[];
-  blockNumber?: number;
-  skip?: boolean;
-}) {
-  const tokensQueries = useQueries({
-    queries: (tokenList ?? []).map((token) => {
-      const query = getFetchERC20BalanceOfQueryOptions(
-        skip ? undefined : token.chainId,
-        token?.address,
-        account,
-      );
-
-      return {
-        queryKey: blockNumber
-          ? [...query.queryKey, blockNumber]
-          : query.queryKey,
-        enabled: query.enabled && !skip,
-        queryFn: query.queryFn,
-      };
-    }),
-    combine: (results) => {
-      const tokenInfoMap = new Map() as TokenInfoMap;
-      results.forEach((result, i) => {
-        const token = tokenList?.[i];
-        if (result.data && token) {
-          tokenInfoMap.set(`${token.chainId}-${token.address}`, result.data);
-        }
-      });
-      return {
-        tokenInfoMap,
-        data: results.map((result) => result.data),
-        isPending: results.some((result) => result.isPending),
-        isLoading: results.some((result) => result.isLoading),
-      };
-    },
-  });
-  return tokensQueries;
-}
+'use client';
+
+import { getFetchERC20BalanceOfQueryOptions } from '@dodoex/dodo-contract-request';
+import { useQueries } from '@tanstack/react-query';
+import { TokenInfo } from '../components/TokenLogo';
+
+type TokenInfoMap = Map<string, bigint>;
+
+export default function useFetchTokensBalance({
+  account,
+  tokenList,
+  blockNumber,
+  skip,
+}: {
+  account: string | undefined;
+  tokenList?: TokenInfo[];
+  blockNumber?: number;
+  skip?: boolean;
+}) {
+  const tokensQueries = useQueries({
+    queries: (tokenList ?? []).map((token) => {
+      const query = getFetchERC20BalanceOfQueryOptions(
+        skip ? undefined : token.chainId,
+        token?.address,
+        account,
+      );
+
+      return {
+        queryKey: blockNumber
+          ? [...query.queryKey, blockNumber]
+          : query.queryKey,
+        enabled: query.enabled && !skip,
+        queryFn: query.queryFn,
+      };
+    }),
+    combine: (results) => {
+      const tokenInfoMap = new Map() as TokenInfoMap;
+      results.forEach((result, i) => {
+        const token = tokenList?.[i];
+        if (result.data && token) {
+          tokenInfoMap.set(`${token.chainId}-${token.address}`, result.data);
+        }
+      });
+      return {
+        tokenInfoMap,
+        data: results.map((result) => result.data),
+        isPending: results.some((result) => result.isPending),
+        isLoading: results.some((result) => result.isLoading),
+      };
+    },
+  });
+  return tokensQueries;
+}

package/src/hooks/useHasBalanceTokenList.ts

@@ -1,93 +1,95 @@
-import BigNumber from 'bignumber.js';
-import React from 'react';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-import useFetchTokensBalance from './useFetchTokensBalance';
-import { useFetchFiatPrice } from './useFetchFiatPrice';
-import { getTokenFiatPriceList } from '../constants/localstorage';
-import { TokenInfo } from '../components/TokenLogo';
-
-interface TokenResult extends TokenInfo {
-  balance: BigNumber;
-}
-export function useHasBalanceTokenList({
-  account,
-  visible,
-}: {
-  account: string | undefined;
-  visible: boolean;
-}) {
-  const { tokenList } = useWalletConnectContext();
-  const fetchTokenQuery = useFetchTokensBalance({
-    account,
-    tokenList,
-    skip: !visible,
-  });
-  const hasBalanceTokenList = React.useMemo(() => {
-    let newHasBalanceTokenList = [] as TokenResult[];
-    fetchTokenQuery.tokenInfoMap.forEach((value, key) => {
-      if (value > 0) {
-        const token = tokenList.find(
-          (token) => `${token.chainId}-${token.address}` === key,
-        );
-        if (token?.decimals !== undefined) {
-          newHasBalanceTokenList.push({
-            ...token,
-            balance: new BigNumber(value.toString()).div(10 ** token.decimals),
-          });
-        }
-      }
-    });
-    newHasBalanceTokenList = newHasBalanceTokenList.sort((a, b) =>
-      a.balance.gt(b.balance) ? -1 : 1,
-    );
-    return newHasBalanceTokenList;
-  }, [fetchTokenQuery.tokenInfoMap]);
-  const fiatPriceQuery = useFetchFiatPrice(hasBalanceTokenList);
-
-  const tokenLoading = fetchTokenQuery.isLoading || fetchTokenQuery.isPending;
-
-  const hasBalanceList = React.useMemo(() => {
-    return hasBalanceTokenList
-      .map((token) => {
-        const fiatPriceBalance = fiatPriceQuery.data?.get(token.address)
-          ? token.balance.times(fiatPriceQuery.data?.get(token.address) ?? 0)
-          : undefined;
-        return {
-          ...token,
-          fiatPriceBalance,
-        };
-      })
-      .sort((a, b) => {
-        if (a.fiatPriceBalance && b.fiatPriceBalance) {
-          return a.fiatPriceBalance.gt(b.fiatPriceBalance) ? -1 : 1;
-        }
-        const cacheFiatPriceObject = getTokenFiatPriceList();
-        const aFiatPrice = cacheFiatPriceObject[a.address];
-        const bFiatPrice = cacheFiatPriceObject[b.address];
-        if (!aFiatPrice || !bFiatPrice) return a.balance.gt(b.balance) ? -1 : 1;
-        return a.balance.times(aFiatPrice).gt(b.balance.times(bFiatPrice))
-          ? -1
-          : 1;
-      });
-  }, [hasBalanceTokenList, fiatPriceQuery.data]);
-
-  const allFiatPriceBalance = React.useMemo(() => {
-    let result = new BigNumber(0);
-    hasBalanceList.forEach((token) => {
-      if (token.fiatPriceBalance) {
-        result = result.plus(token.fiatPriceBalance);
-      }
-    });
-    return result;
-  }, [hasBalanceList]);
-
-  return {
-    tokenLoading: !!tokenLoading && !hasBalanceList.length,
-    hasBalanceList,
-    fiatPriceQuery,
-    allFiatPriceBalance,
-    allFiatPriceBalanceLoading:
-      (fiatPriceQuery.isLoading && !!hasBalanceTokenList.length) ||
-      tokenLoading,
-  };
-}
+'use client';
+
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import useFetchTokensBalance from './useFetchTokensBalance';
+import { useFetchFiatPrice } from './useFetchFiatPrice';
+import { getTokenFiatPriceList } from '../constants/localstorage';
+import { TokenInfo } from '../components/TokenLogo';
+
+interface TokenResult extends TokenInfo {
+  balance: BigNumber;
+}
+export function useHasBalanceTokenList({
+  account,
+  visible,
+}: {
+  account: string | undefined;
+  visible: boolean;
+}) {
+  const { tokenList } = useWalletConnectContext();
+  const fetchTokenQuery = useFetchTokensBalance({
+    account,
+    tokenList,
+    skip: !visible,
+  });
+  const hasBalanceTokenList = React.useMemo(() => {
+    let newHasBalanceTokenList = [] as TokenResult[];
+    fetchTokenQuery.tokenInfoMap.forEach((value, key) => {
+      if (value > 0) {
+        const token = tokenList.find(
+          (token) => `${token.chainId}-${token.address}` === key,
+        );
+        if (token?.decimals !== undefined) {
+          newHasBalanceTokenList.push({
+            ...token,
+            balance: new BigNumber(value.toString()).div(10 ** token.decimals),
+          });
+        }
+      }
+    });
+    newHasBalanceTokenList = newHasBalanceTokenList.sort((a, b) =>
+      a.balance.gt(b.balance) ? -1 : 1,
+    );
+    return newHasBalanceTokenList;
+  }, [fetchTokenQuery.tokenInfoMap]);
+  const fiatPriceQuery = useFetchFiatPrice(hasBalanceTokenList);
+
+  const tokenLoading = fetchTokenQuery.isLoading || fetchTokenQuery.isPending;
+
+  const hasBalanceList = React.useMemo(() => {
+    return hasBalanceTokenList
+      .map((token) => {
+        const fiatPriceBalance = fiatPriceQuery.data?.get(token.address)
+          ? token.balance.times(fiatPriceQuery.data?.get(token.address) ?? 0)
+          : undefined;
+        return {
+          ...token,
+          fiatPriceBalance,
+        };
+      })
+      .sort((a, b) => {
+        if (a.fiatPriceBalance && b.fiatPriceBalance) {
+          return a.fiatPriceBalance.gt(b.fiatPriceBalance) ? -1 : 1;
+        }
+        const cacheFiatPriceObject = getTokenFiatPriceList();
+        const aFiatPrice = cacheFiatPriceObject[a.address];
+        const bFiatPrice = cacheFiatPriceObject[b.address];
+        if (!aFiatPrice || !bFiatPrice) return a.balance.gt(b.balance) ? -1 : 1;
+        return a.balance.times(aFiatPrice).gt(b.balance.times(bFiatPrice))
+          ? -1
+          : 1;
+      });
+  }, [hasBalanceTokenList, fiatPriceQuery.data]);
+
+  const allFiatPriceBalance = React.useMemo(() => {
+    let result = new BigNumber(0);
+    hasBalanceList.forEach((token) => {
+      if (token.fiatPriceBalance) {
+        result = result.plus(token.fiatPriceBalance);
+      }
+    });
+    return result;
+  }, [hasBalanceList]);
+
+  return {
+    tokenLoading: !!tokenLoading && !hasBalanceList.length,
+    hasBalanceList,
+    fiatPriceQuery,
+    allFiatPriceBalance,
+    allFiatPriceBalanceLoading:
+      (fiatPriceQuery.isLoading && !!hasBalanceTokenList.length) ||
+      tokenLoading,
+  };
+}

package/src/hooks/useTransactionList.ts

@@ -1,87 +1,89 @@
-import { GraphQLRequests, SystemApi } from '@dodoex/api';
-import { useInfiniteQuery } from '@tanstack/react-query';
-import React from 'react';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-
-export enum StateText {
-  Running = 'pending',
-  Success = 'success',
-  Failed = 'failed',
-  Warning = 'reset',
-}
-
-export type NoticeTransactionList = NonNullable<
-  NonNullable<
-    ReturnType<
-      NonNullable<
-        typeof SystemApi.graphql.fetchNoticeCenterTransactionList['__apiType']
-      >
-    >['notice_center_transactionList']
-  >['list']
->;
-
-export function useTransactionList({
-  account,
-  chainId,
-}: {
-  account: string | undefined;
-  chainId?: number;
-}) {
-  const { graphQLRequests } = useWalletConnectContext();
-  const infiniteQueryOptions = (
-    graphQLRequests as GraphQLRequests
-  )?.getInfiniteQuery(
-    SystemApi.graphql.fetchNoticeCenterTransactionList,
-    'page',
-    {
-      where: {
-        limit: 10,
-        user: account,
-        chainId,
-        refreshNow: true,
-      },
-    },
-  ) ?? {
-    queryKey: [1],
-    queryFn: () => {
-      // empty
-    },
-  };
-  const fetchQuery = useInfiniteQuery({
-    ...infiniteQueryOptions,
-    enabled: !!account && !!graphQLRequests,
-    initialPageParam: 1,
-    getNextPageParam: (item) => {
-      const { page, limit, count } = item.notice_center_transactionList ?? {};
-      if (!page || !limit || !count) return null;
-      let totalPage = Math.floor(count / limit);
-      if (count % limit) {
-        totalPage += 1;
-      }
-      if (page >= totalPage) return null;
-      return page + 1;
-    },
-  });
-
-  const [list, pendingList] = React.useMemo(() => {
-    const list = [] as NoticeTransactionList;
-
-    fetchQuery.data?.pages?.forEach((page) => {
-      page.notice_center_transactionList?.list?.forEach((item) => {
-        if (!item?.extend?.safeTxHash) {
-          list.push(item);
-        }
-      });
-    });
-    const pendingList =
-      list.filter((item) => item?.extend.status === StateText.Running) ?? [];
-
-    return [list, pendingList];
-  }, [fetchQuery.data]);
-
-  return {
-    ...fetchQuery,
-    list,
-    pendingList,
-  };
-}
+'use client';
+
+import { GraphQLRequests, SystemApi } from '@dodoex/api';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import React from 'react';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+
+export enum StateText {
+  Running = 'pending',
+  Success = 'success',
+  Failed = 'failed',
+  Warning = 'reset',
+}
+
+export type NoticeTransactionList = NonNullable<
+  NonNullable<
+    ReturnType<
+      NonNullable<
+        typeof SystemApi.graphql.fetchNoticeCenterTransactionList['__apiType']
+      >
+    >['notice_center_transactionList']
+  >['list']
+>;
+
+export function useTransactionList({
+  account,
+  chainId,
+}: {
+  account: string | undefined;
+  chainId?: number;
+}) {
+  const { graphQLRequests } = useWalletConnectContext();
+  const infiniteQueryOptions = (
+    graphQLRequests as GraphQLRequests
+  )?.getInfiniteQuery(
+    SystemApi.graphql.fetchNoticeCenterTransactionList,
+    'page',
+    {
+      where: {
+        limit: 10,
+        user: account,
+        chainId,
+        refreshNow: true,
+      },
+    },
+  ) ?? {
+    queryKey: [1],
+    queryFn: () => {
+      // empty
+    },
+  };
+  const fetchQuery = useInfiniteQuery({
+    ...infiniteQueryOptions,
+    enabled: !!account && !!graphQLRequests,
+    initialPageParam: 1,
+    getNextPageParam: (item) => {
+      const { page, limit, count } = item.notice_center_transactionList ?? {};
+      if (!page || !limit || !count) return null;
+      let totalPage = Math.floor(count / limit);
+      if (count % limit) {
+        totalPage += 1;
+      }
+      if (page >= totalPage) return null;
+      return page + 1;
+    },
+  });
+
+  const [list, pendingList] = React.useMemo(() => {
+    const list = [] as NoticeTransactionList;
+
+    fetchQuery.data?.pages?.forEach((page) => {
+      page.notice_center_transactionList?.list?.forEach((item) => {
+        if (!item?.extend?.safeTxHash) {
+          list.push(item);
+        }
+      });
+    });
+    const pendingList =
+      list.filter((item) => item?.extend.status === StateText.Running) ?? [];
+
+    return [list, pendingList];
+  }, [fetchQuery.data]);
+
+  return {
+    ...fetchQuery,
+    list,
+    pendingList,
+  };
+}

package/src/index.tsx

@@ -1,7 +1,7 @@
-export { default as WalletDialog } from './WalletConnect/WalletDialog';
-export { WalletConnectProvider } from './WalletConnectProvider';
-export { default as ClientProvider } from './ClientProvider';
-export { default as LangProvider } from './LangProvider';
-export { useWalletListByNetwork } from './hooks/useConnectWallet';
-export { default as ConnectDialog } from './WalletConnect/ConnectDialog';
-export { default as ConnectPage } from './WalletConnect/ConnectPage';
+export { default as WalletDialog } from './WalletConnect/WalletDialog';
+export { WalletConnectProvider } from './WalletConnectProvider';
+export { default as ClientProvider } from './ClientProvider';
+export { default as LangProvider } from './LangProvider';
+export { useWalletListByNetwork } from './hooks/useConnectWallet';
+export { default as ConnectDialog } from './WalletConnect/ConnectDialog';
+export { default as ConnectPage } from './WalletConnect/ConnectPage';