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

package/src/hooks/useConnectWalet.ts

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

package/src/hooks/useFetchFiatPrice.ts

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

package/src/hooks/useFetchTokensBalance.ts

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,157 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { isEqualWith } from 'lodash';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import useFetchTokensBalance from './useFetchTokensBalance';
+import { useFetchFiatPrice } from './useFetchFiatPrice';
+import { getFetchERC20HelperIsERC20QueryOptions } from '@dodoex/dodo-contract-request';
+import { getTokenFiatPriceList } from '../constants/localstorage';
+import { TokenInfo } from '../components/TokenLogo';
+
+interface TokenResult extends TokenInfo {
+  balance: BigNumber;
+}
+export function useHasBalanceTokenList({
+  account,
+  chainId,
+  visible,
+}: {
+  account: string | undefined;
+  chainId: number;
+  visible: boolean;
+}) {
+  const queryClient = useQueryClient();
+  const [hasBalanceTokenList, setHasBalanceTokenList] = React.useState<
+    Array<TokenResult>
+  >([]);
+  const fiatPriceQuery = useFetchFiatPrice(hasBalanceTokenList);
+
+  const { tokenList } = useWalletConnectContext();
+  const fetchTokenQuery = useFetchTokensBalance({
+    account,
+    tokenList,
+    skip: !visible,
+  });
+  React.useEffect(() => {
+    let time: NodeJS.Timeout;
+    const commonKey = getFetchERC20HelperIsERC20QueryOptions(
+      chainId,
+      undefined,
+      account,
+      undefined,
+    ).queryKey.filter((item) => !!item);
+    const unSubscribe = queryClient.getQueryCache().subscribe((event) => {
+      try {
+        const isNotMatch = commonKey.some(
+          (key) => !event.query.queryKey.includes(key),
+        );
+        if (!isNotMatch) {
+          clearTimeout(time);
+          time = setTimeout(() => {
+            const tokenQueriesData = queryClient.getQueriesData<bigint>({
+              queryKey: commonKey,
+            });
+            let newHasBalanceTokenList = [] as TokenResult[];
+            const hasBalanceAddressSet = new Set<string>();
+            tokenQueriesData.forEach((value) => {
+              const balance = value[1];
+              const queryKey = value[0];
+              const token = tokenList.find(
+                (token) =>
+                  `${token.chainId}-${token.address}` ===
+                  `${queryKey[1]}-${queryKey[2]}`,
+              );
+              if (
+                token &&
+                balance &&
+                balance > 0 &&
+                !hasBalanceAddressSet.has(token.address) &&
+                token.decimals !== undefined
+              ) {
+                hasBalanceAddressSet.add(token.address);
+                newHasBalanceTokenList.push({
+                  ...token,
+                  balance: new BigNumber(balance.toString()).div(
+                    10 ** token.decimals,
+                  ),
+                });
+              }
+            });
+            newHasBalanceTokenList = newHasBalanceTokenList.sort((a, b) =>
+              a.balance.gt(b.balance) ? -1 : 1,
+            );
+            if (
+              !isEqualWith(
+                newHasBalanceTokenList,
+                hasBalanceTokenList,
+                (newValue, oldValue, key) => {
+                  if (key === 'balance' && BigNumber.isBigNumber(newValue)) {
+                    return newValue.isEqualTo(oldValue);
+                  }
+                  return undefined;
+                },
+              )
+            ) {
+              setHasBalanceTokenList(newHasBalanceTokenList);
+            }
+          }, 100);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (error) {}
+    });
+
+    return () => {
+      unSubscribe();
+      clearTimeout(time);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryClient, account, chainId]);
+
+  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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,4 @@
+export { default as WalletDialog } from './WalletConnect/WalletDialog';
+export { WalletConnectProvider } from './WalletConnectProvider';
+export { default as ClientProvider } from './ClientProvider';
+export { default as LangProvider } from './LangProvider';

package/src/utils/formatter.ts

@@ -0,0 +1,102 @@
+import BigNumber from 'bignumber.js';
+
+const kilo = 1000;
+const million = 1000000;
+// const billion = 1000000000;
+function getNegative(num: number) {
+  return new BigNumber(num).negated();
+}
+/**
+ * format to short number, like: -0.12 -> 0, 0.0000123->0.000012, 123.234 -> 123.23, 1234.12 -> 1.23K, 1000000.123->1.00M
+ * @param n
+ */
+export function formatShortNumber(n?: BigNumber, showDecimals = 4): string {
+  if (!n || n.isNaN()) {
+    return '-';
+  }
+  if (n.eq(0)) {
+    return '0';
+  }
+  if (n.lte(0.000001) && n.gte(-0.000001)) {
+    return n.toExponential(2);
+  }
+  if (n.lt(1) && n.gt(-1)) {
+    return formatReadableNumber({ input: n, showDecimals });
+  }
+  if (n.lt(kilo) && n.gt(getNegative(kilo))) {
+    return formatReadableNumber({ input: n, showDecimals });
+  }
+  if (n.lt(million) && n.gt(getNegative(million))) {
+    return `${formatReadableNumber({ input: n.div(kilo), showDecimals: 2 })}K`;
+  }
+  return `${formatReadableNumber({
+    input: n.div(million),
+    showDecimals: 2,
+  })}M`;
+}
+
+/**
+ * format to readable number, like: 0.00 -> 0, 1.00 -> 1, 1.235 -> 1.23, 1.230 -> 1.23
+ * @param input
+ */
+export function formatReadableNumber({
+  input,
+  showDecimals = 4,
+  showPrecisionDecimals = 2,
+  exponentialDecimalsAmount = 8,
+  showIntegerOnly = false,
+  showDecimalsOnly = false,
+  noGroupSeparator = false,
+  roundingMode = BigNumber.ROUND_DOWN,
+}: {
+  input: BigNumber | number | string;
+  showDecimals?: number;
+  showIntegerOnly?: boolean;
+  showDecimalsOnly?: boolean;
+  showPrecisionDecimals?: number;
+  exponentialDecimalsAmount?: number;
+  noGroupSeparator?: boolean;
+  roundingMode?: BigNumber.RoundingMode;
+}): string {
+  const source = new BigNumber(input);
+  if (source.isNaN()) {
+    return '-';
+  }
+  let amount = source.dp(showDecimals, roundingMode);
+  if (amount.eq(0) && (source.gt(0) || source.lt(0))) {
+    const significantDigits = showPrecisionDecimals ?? showDecimals;
+    amount = source.sd(significantDigits, BigNumber.ROUND_DOWN);
+    const amountDP = amount.dp();
+    if (
+      amountDP &&
+      amountDP > exponentialDecimalsAmount &&
+      !showDecimalsOnly &&
+      !showIntegerOnly
+    ) {
+      return amount.toExponential();
+    }
+
+    amount = source.sd(
+      showPrecisionDecimals ?? showDecimals,
+      BigNumber.ROUND_DOWN,
+    );
+  }
+  if (showIntegerOnly) {
+    amount = amount.integerValue(BigNumber.ROUND_DOWN);
+  }
+  if (showDecimalsOnly) {
+    amount = amount.minus(amount.integerValue(BigNumber.ROUND_DOWN));
+  }
+
+  if (noGroupSeparator) {
+    return amount.toFormat({
+      decimalSeparator: '.',
+      groupSeparator: '',
+      groupSize: 3,
+      secondaryGroupSize: 0,
+      fractionGroupSeparator: '',
+      fractionGroupSize: 0,
+    });
+  }
+  return amount.toFormat();
+}

package/src/utils/time.ts

@@ -0,0 +1,21 @@
+import dayjs from 'dayjs';
+
+export function formatReadableTimeAgo({ time }: { time: number }) {
+  if (!time) {
+    return '';
+  }
+  const start = dayjs(time);
+  const end = dayjs();
+  const diffHours = end.diff(start, 'h');
+  if (diffHours > 24) {
+    return start.format('YYYY/MM/DD HH:MM');
+  }
+  if (diffHours >= 1) {
+    return `${diffHours}h ago`;
+  }
+  const diffMinute = end.diff(start, 'm');
+  if (diffMinute >= 1) {
+    return `${diffMinute}min ago`;
+  }
+  return `${end.diff(start, 's')}s`;
+}

package/src/utils/utils.ts

@@ -0,0 +1,8 @@
+export const increaseArray = (len: number) => {
+  return Object.keys(new Array(len + 1).join(','));
+};
+
+export const validateEmail = (email: string) => {
+  const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g;
+  return re.test(email);
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "downlevelIteration": true,
+    "newLine": "CRLF",
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "jsx": "preserve",
+    "target": "es2016"
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+}