feat: add useChainNetId

src/index.js

@@ -12,6 +12,7 @@ export { default as useConfluxJSDefined } from "./useConfluxJSDefined"
 export { default as useStatus } from "./useStatus"
 export { default as useConfirmationRiskByHash } from "./useConfirmationRiskByHash"
 export { default as useClientVersion } from "./useClientVersion"
+export { default as useChainNetId } from './useChainNetId.js'
 
 export { default as Big } from "big.js"
 

src/useBalance.js

@@ -1,43 +1,40 @@
 import SINGLE_CALL_BALANCES_ABI from "./contracts/cfx-single-call-balance-checker-abi.json";
 import { useEffect } from "react";
 import { useConfluxJSDefined, useEpochNumberSWR } from "./";
+import { useChainNetId } from './';
 import initContract from "./initContract";
 
 export const UPDATE_USER_BALANCE_SWR_ID = "UPDATE_USER_BALANCE_SWR_ID";
 
-let CONTRACT_INITIATED_WITH_CFX_INSTANCE = Boolean(window?.confluxJS)
-
 let c = initContract({
   abi: SINGLE_CALL_BALANCES_ABI,
   address: "0x8f35930629fce5b5cf4cd762e71006045bfeb24d",
 }, window?.confluxJS);
 
 function getTokensBalance(userAddr, tokenAddrs) {
   return c
-    ?.balances(
-      [userAddr],
-      ["0x0000000000000000000000000000000000000000", ...tokenAddrs]
-    )
-    ?.call();
+  ?.balances(
+    [userAddr],
+    ["0x0000000000000000000000000000000000000000", ...tokenAddrs]
+  )
+  ?.call();
 }
 
 export default function useBalance(userAddr, tokenAddrs) {
   const confluxJSDefined = useConfluxJSDefined();
+  const {chainId} = useChainNetId()
+
   useEffect(() => {
-    if (!confluxJSDefined) return
+    if (!confluxJSDefined || !chainId) return
     if (c) {
-      if (!CONTRACT_INITIATED_WITH_CFX_INSTANCE) {
-        c._feedAddressNetId(SINGLE_CALL_BALANCES_ABI, window.confluxJS)
-        CONTRACT_INITIATED_WITH_CFX_INSTANCE = true
-      }
+      c._feedAddressNetId(SINGLE_CALL_BALANCES_ABI, window.confluxJS)
     } else {
       c = initContract({
         abi: SINGLE_CALL_BALANCES_ABI,
         address: "0x8f35930629fce5b5cf4cd762e71006045bfeb24d",
       }, window.confluxJS);
-      CONTRACT_INITIATED_WITH_CFX_INSTANCE = true
     }
-  }, [confluxJSDefined]);
+  }, [confluxJSDefined, Boolean(chainId)]);
 
   const {
     data: [balance, ...tokenBalances],

src/useChainNetId.js

@@ -0,0 +1,30 @@
+import { useConfluxJSDefined } from "./";
+import { useEffectOnce } from "react-use";
+import { useState } from "react";
+
+export const UPDATE_CHAINID_SWR_ID = "UPDATE_CHAINID_SWR_ID";
+export const UPDATE_NETWORKID_SWR_ID = "UPDATE_NETWORKID_SWR_ID";
+
+export default function useChainNetId() {
+  useConfluxJSDefined();
+
+  const [chainId, setChainId] = useState(window?.conflux?.chainId);
+  const [networkId, setNetworkId] = useState(parseInt(window?.conflux?.networkVersion ,10) || null);
+
+  useEffectOnce(() => {
+    const chainListener = (chainId) => {
+      setChainId(chainId);
+    };
+    const networkListener = (networkId) => {
+      setNetworkId(parseInt(networkId, 10) || null);
+    };
+    window?.conflux?.on("chainIdChanged", chainListener);
+    window?.conflux?.on("networkChanged", networkListener);
+    return () => {
+      window?.conflux?.off("chainIdChanged", chainListener);
+      window?.conflux?.off("networkChanged", networkListener);
+    };
+ })
+
+  return {chainId, networkId}
+}

src/useConfluxPortal.js

@@ -2,8 +2,7 @@ import { useState } from "react";
 import { useEffectOnce } from "react-use";
 import { useConfluxJSDefined, useSWR } from "./";
 import { useBalance } from "./";
-
-export const UPDATE_CHAINID_SWR_ID = "UPDATE_CHAINID_SWR_ID";
+import { useChainNetId } from './';
 
 function openHomePage() {
   window.open("https://portal.confluxnetwork.org");
@@ -35,7 +34,8 @@ export default function useConfluxPortal(tokenAddrs = []) {
           undefined
       : null
   );
-  const [chainId, setChainId] = useState(window?.conflux?.chainId);
+
+  const {chainId, networkId} = useChainNetId()
   const [error,setError]=useState(null)
 
   useEffectOnce(() => {
@@ -53,12 +53,6 @@ export default function useConfluxPortal(tokenAddrs = []) {
     });
   });
 
-  const { data: swrChainId } = useSWR(UPDATE_CHAINID_SWR_ID, async () =>
-    window?.conflux?.chainId === "loading" ? null : window?.conflux?.chainId
-  );
-
-  if (swrChainId !== chainId) setChainId(swrChainId);
-
   const login = (fallbackFn) => {
     if (!address) {
       if (window?.conflux)
@@ -95,21 +89,17 @@ export default function useConfluxPortal(tokenAddrs = []) {
         window.localStorage.removeItem("CFXJS_REACT_HOOK_PORTAL_ADDRESS_CACHE");
       }
     };
-    const networkListener = (chainId) => {
-      setChainId(chainId);
-    };
     window?.conflux?.on("accountsChanged", accountListener);
-    window?.conflux?.on("networkChanged", networkListener);
     return () => {
       window?.conflux?.off("accountsChanged", accountListener);
-      window?.conflux?.off("networkChanged", networkListener);
     };
   });
 
   return {
     portalInstalled: Boolean(isPortalInstalled()),
     address,
     balances: [balance, tokenBalances],
+    networkId,
     chainId,
     error,
     login,

stories/general.stories.js

@@ -4,6 +4,7 @@ import {
   useEpochNumber,
   useConfluxPortal,
   useBalance,
+  useChainNetId,
   useConfirmationRiskByHash,
   useClientVersion,
   Big,
@@ -21,6 +22,7 @@ const UseConfluxPortalTemplate = () => {
     balances: [cfxBalance, tokenBalances],
     login,
     useEnsurePortalLogin,
+    chainId, networkId,
   } = useConfluxPortal([
     "CFX:TYPE.CONTRACT:ACHC8NXJ7R451C223M18W2DWJNMHKD6RXAWRVKVSY2", // fc contract address
     "CFX:TYPE.CONTRACT:ACDRF821T59Y12B4GUYZCKYUW2XF1GFPJ2BA0X4SJ6", // ceth contract address
@@ -35,6 +37,8 @@ const UseConfluxPortalTemplate = () => {
   return (
     <>
       <p>portalInstalled: {portalInstalled.toString()}</p>
+      <p>chainId: {chainId}</p>
+      <p>networkId: {networkId}</p>
       <p>address: {address}</p>
       <p>CFX balance: {(Big(cfxBalance) / 1e18).toString()} CFX</p>
       <div>
@@ -56,6 +60,22 @@ const UseConfluxPortalTemplate = () => {
 
 export const UseConfluxPortal = UseConfluxPortalTemplate.bind({})
 
+const UseChainNetIdTemplate = () => {
+  const {
+    chainId, networkId,
+  } = useChainNetId()
+
+  return (
+    <>
+      <p>chainId: {chainId}</p>
+      <p>networkId: {networkId}</p>
+      <ConfluxJSDefinedUI />
+    </>
+  )
+}
+
+export const UseChainNetId = UseChainNetIdTemplate.bind({})
+
 const UseEpochNumberTemplate = () => {
   const epochNumber = useEpochNumber()