node-real · devinxl · Dec 14, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 8, 2023
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Cache Rush
         uses: actions/cache@v3
         with:

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Run rush check
         run: node common/scripts/install-run-rush.js check
   validate-shrinkwrap-file:
@@ -22,6 +22,6 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Run rush install --check-only
         run: node common/scripts/install-run-rush.js install --check-only
@@ -1,4 +1,4 @@
-FROM node:16.20.1-buster-slim
+FROM node:20.10.0-buster-slim
 
 WORKDIR /opt/deploy
 

@@ -26,38 +26,40 @@
     "@next/bundle-analyzer": "^13.1.6",
     "@totejs/icons": "^2.17.0",
     "@totejs/uikit": "~2.54.2",
-    "@totejs/walletkit": "0.2.6-alpha.1",
+    "@totejs/walletkit": "~1.0.7-alpha.5",
     "axios": "^1.3.2",
     "axios-retry": "^3.4.0",
     "bignumber.js": "^9.1.1",
     "comlink": "^4.4.1",
     "dayjs": "^1.11.7",
-    "eslint-config-next": "13.3.4",
+    "eslint-config-next": "~14.0.4",
     "ethers": "^5.7.2",
     "lodash-es": "^4.17.21",
     "long": "^5.2.1",
-    "next": "13.3.4",
+    "next": "~14.0.4",
     "query-string": "^8.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
     "react-hook-form": "^7.43.1",
     "react-use": "^17.4.0",
     "typescript": "5.0.4",
-    "wagmi": "^0.12.19",
-    "@sentry/nextjs": "~7.52.1",
+    "wagmi": "~1.4.10",
+    "@sentry/nextjs": "~7.86.0",
     "@reduxjs/toolkit": "^1.9.5",
     "react-redux": "^8.1.1",
     "next-redux-wrapper": "^8.1.0",
     "redux-persist": "^6.0.0",
-    "@wagmi/core": "^0.10.13",
     "fast-xml-parser": "~4.2.7",
     "swiper": "~10.3.1",
     "echarts": "~5.4.3",
     "echarts-for-react": "~3.0.2",
     "next-transpile-modules": "~10.0.1",
     "redux": "~4.2.1",
     "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1"
+    "react-dnd-html5-backend": "16.0.1",
+    "viem": "~1.19.11",
+    "@wagmi/core": "~1.4.10",
+    "set-interval-async": "~3.0.3"
   },
   "devDependencies": {
     "@babel/plugin-syntax-flow": "^7.14.5",
@@ -73,7 +75,7 @@
     "@types/node": "18.16.0",
     "@types/react": "18.0.38",
     "@types/react-dom": "18.0.11",
-    "eslint": "8.39.0",
+    "eslint": "~8.55.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.1",
     "prettier": "^2.8.4",
@@ -95,6 +97,7 @@
       "next/core-web-vitals"
     ],
     "rules": {
+      "no-console": 1,
       "react/display-name": "off",
       "react/react-in-jsx-scope": [
         "off"

@@ -41,7 +41,6 @@ export const SelectNetwork = ({ buttonStyles = {} }: SelectNetworkProps) => {
     if (runtimeEnv === net.value) {
       return;
     }
-    console.log('router', router);
     const rootPath = GO_ROOT_PATHS[router.pathname];
     window.location.href = rootPath ? `${net.domain}${rootPath}` : `${net.domain}${router.asPath}`;
   };

@@ -1,4 +1,5 @@
 import { GREENFIELD_CHAIN_ID } from '@/base/env';
+import { useBalance } from '@/hooks/useBalance';
 import { useAppDispatch, useAppSelector } from '@/store';
 import {
   setBankBalance,
@@ -9,7 +10,6 @@ import {
 import { setupBnbPrice } from '@/store/slices/global';
 import { useAsyncEffect, useThrottleEffect } from 'ahooks';
 import { useRouter } from 'next/router';
-import { useBalance } from 'wagmi';
 
 export const PaymentAccounts = () => {
   const dispatch = useAppDispatch();
@@ -29,8 +29,6 @@ export const PaymentAccounts = () => {
   const { data: gnfdBalance, refetch } = useBalance({
     address: loginAccount as any,
     chainId: GREENFIELD_CHAIN_ID,
-    watch: true,
-    cacheTime: 1000,
   });
   const metamaskValue = gnfdBalance?.formatted ?? '0';
   useAsyncEffect(async () => {

@@ -1,5 +1,5 @@
 import { Chain, configureChains } from 'wagmi';
-import { publicProvider } from 'wagmi/providers/public';
+import { publicProvider } from "wagmi/providers/public";
 
 import {
   BSC_CHAIN_ID,

@@ -1,5 +1,5 @@
 import '@totejs/walletkit/styles.css';
-import { createClient, WagmiConfig } from 'wagmi';
+import { createConfig, WagmiConfig } from 'wagmi';
 import { bscChain, greenFieldChain } from '@/context/WalletConnectContext/chains';
 import { getDefaultConfig, WalletKitOptions, WalletKitProvider } from '@totejs/walletkit';
 import { Text } from '@totejs/uikit';
@@ -12,7 +12,7 @@ import { ReactNode } from 'react';
 import { customTheme } from '@/base/theme/wallet';
 import { DCLink } from '@/components/common/DCLink';
 
-const client = createClient(
+const config = createConfig(
   getDefaultConfig({
     chains: [bscChain, greenFieldChain],
     appName: 'Connect a Wallet',
@@ -22,7 +22,6 @@ const client = createClient(
     connectors: [trustWallet(), metaMask()],
   }),
 );
-
 const options: WalletKitOptions = {
   initialChainId: GREENFIELD_CHAIN_ID,
   closeModalAfterConnected: false,
@@ -64,7 +63,7 @@ export function WalletConnectProvider(props: WalletConnectProviderProps) {
   const { children } = props;
 
   return (
-    <WagmiConfig client={client}>
+    <WagmiConfig config={config}>
       <WalletKitProvider
         options={options}
         mode={'light'}

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react'
+import { FetchBalanceResult, fetchBalance } from '@wagmi/core';
+import { GREENFIELD_CHAIN_ID } from '@/base/env';
+import { setIntervalAsync, clearIntervalAsync, SetIntervalAsyncTimer } from 'set-interval-async';
+
+type Timer = { [key: string]: SetIntervalAsyncTimer<[]> | null }
+export const useBalance = ({
+  address,
+  chainId = GREENFIELD_CHAIN_ID,
+  intervalMs = 2000,
+}: {
+  address: `0x${string}`,
+  chainId: number,
+  intervalMs?: number,
+}) => {
+  const [balance, setBalance] = useState({} as FetchBalanceResult);
+  const [timers, setTimers] = useState<Timer>({})
+
+  const refetch = useCallback(() => {
+    if (!address || !chainId) return Promise.resolve({} as FetchBalanceResult);
+    return fetchBalance({
+      address: address,
+      chainId: chainId,
+    })
+  }, [address, chainId]);
+
+  useEffect(() => {
+    if (!address || !chainId) return;
+    const key = `${address}_${chainId}`;
+    const timer = timers[key];
+    if (timer) return;
+    Object.values(timers).forEach((timer) => timer && clearIntervalAsync(timer));
+    const newTimer = setIntervalAsync(async () => {
+      const data = await refetch();
+      setBalance(data);
+    }, intervalMs);
+    timers[key] = newTimer;
+    setTimers(timers);
+
+    return () => {
+      Object.values(timers).forEach((timer) => timer && clearIntervalAsync(timer));
+    }
+  }, [address, chainId]);
+
+  return {
+    data: balance,
+    refetch,
+  };
+}
@@ -1,6 +1,6 @@
 import { Box, Divider, Flex, useDisclosure } from '@totejs/uikit';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useNetwork, useProvider, useSigner } from 'wagmi';
+import { useNetwork } from 'wagmi';
 import { useForm } from 'react-hook-form';
 import { ethers } from 'ethers';
 import { isEmpty } from 'lodash-es';
@@ -27,6 +27,7 @@ import { removeTrailingSlash } from '@/utils/string';
 import { broadcastFault } from '@/facade/error';
 import { Faucet } from '../components/Faucet';
 import { LargeAmountTip } from '../components/LargeAmountTip';
+import { useEthersProvider, useEthersSigner } from '../hooks';
 
 interface TransferInProps {}
 
@@ -42,7 +43,8 @@ export const TransferIn = memo<TransferInProps>(function TransferIn() {
   const router = useRouter();
   const [viewTxUrl, setViewTxUrl] = useState('');
   const { loginAccount: address } = useAppSelector((root) => root.persist);
-  const { data: signer } = useSigner();
+  const provider = useEthersProvider({ chainId: BSC_CHAIN_ID });
+  const signer = useEthersSigner({chainId: BSC_CHAIN_ID})
   const [feeData, setFeeData] = useState<TFeeData>(INIT_FEE_DATA);
   const [isGasLoading, setIsGasLoading] = useState(false);
   const { all } = useChainsBalance();
@@ -58,7 +60,6 @@ export const TransferIn = memo<TransferInProps>(function TransferIn() {
     mode: 'all',
   });
   const { chain } = useNetwork();
-  const provider = useProvider();
   const curInfo = WalletOperationInfos[transType];
   const isRight = useMemo(() => {
     return isRightChain(chain?.id, curInfo?.chainId);

@@ -1,6 +1,6 @@
 import { ethers } from 'ethers';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNetwork } from 'wagmi';
+import { useNetwork, usePublicClient, useWalletClient } from 'wagmi';
 import BigNumber from 'bignumber.js';
 
 import { INIT_FEE_DATA, MIN_AMOUNT, WalletOperationInfos } from './constants';
@@ -11,6 +11,7 @@ import { genSendTx } from './utils/genSendTx';
 import { genTransferOutTx } from './utils/genTransferOutTx';
 import { useAppSelector } from '@/store';
 import { getClient } from '@/facade';
+import { publicClientToProvider, walletClientToSigner } from './utils/ethers';
 
 export const useGetFeeBasic = () => {
   const { transType } = useAppSelector((root) => root.wallet);
@@ -134,3 +135,13 @@ export const useSendFee = () => {
     error,
   };
 };
+
+export function useEthersProvider({ chainId }: { chainId?: number } = {}) {
+  const publicClient = usePublicClient({ chainId });
+  return useMemo(() => publicClientToProvider(publicClient), [publicClient]);
+}
+
+export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
+  const { data: walletClient } = useWalletClient({ chainId });
+  return useMemo(() => (walletClient ? walletClientToSigner(walletClient) : undefined), [walletClient]);
+}
@@ -0,0 +1,31 @@
+import { PublicClient, WalletClient } from 'wagmi';
+import { providers } from "ethers";
+import { type HttpTransport } from "viem";
+
+export function publicClientToProvider(publicClient: PublicClient) {
+  const { chain, transport } = publicClient;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
+  if (transport.type === "fallback")
+    return new providers.FallbackProvider(
+      (transport.transports as ReturnType<HttpTransport>[]).map(
+        ({ value }) => new providers.JsonRpcProvider(value?.url, network),
+      ),
+    );
+  return new providers.JsonRpcProvider(transport.url, network);
+}
+
+export function walletClientToSigner(walletClient: WalletClient) {
+  const { account, chain, transport } = walletClient;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
+  const provider = new providers.Web3Provider(transport, network);
+  const signer = provider.getSigner(account.address);
+  return signer;
+}
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@commitlint/config-conventional": "^16.2.4",
-    "@microsoft/rush-lib": "^5.97.1",
+    "@microsoft/rush-lib": "^5.112.1",
     "commitlint": "^16.3.0",
     "execa": "^5.1.1"
   }