Merge pull request #87 from Cerebellum-Network/fix/CBI-2046-multiple-…

…connections Fix multiples connections to Cere,Ethereum,Polygon
Cerebellum-Network · Jun 24, 2022 · 46989cf · 46989cf
2 parents 5e90548 + 202bafb
commit 46989cf
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 59 deletions.
diff --git a/src/Components/Pages/TransferPage.tsx b/src/Components/Pages/TransferPage.tsx
@@ -588,12 +588,12 @@ const TransferPage = () => {
                   className={classes.changeButton}
                   variant="body1"
                   onClick={async () => {
+                    handleSetHomeChain(undefined);
+                    setDestinationChain(undefined);
                     await Promise.all([
                       destinationBridge.disconnect(),
                       disconnect(),
                     ]);
-                    handleSetHomeChain(undefined);
-                    setDestinationChain(undefined);
                     setWalletType("unset");
                   }}
                 >

diff --git a/src/Contexts/Adaptors/EVMAdaptors/EVMDestinationAdaptorProvider.tsx b/src/Contexts/Adaptors/EVMAdaptors/EVMDestinationAdaptorProvider.tsx
@@ -31,12 +31,9 @@ export const EVMDestinationAdaptorProvider = ({
     setFallback,
     address,
     analytics,
+    destinationBridge,
+    setDestinationBridge,
   } = useNetworkManager();
-
-  const [destinationBridge, setDestinationBridge] = useState<
-    Bridge | undefined
-  >(undefined);
-
   useEffect(() => {
     if (destinationBridge) return;
     const provider = getProvider(destinationChainConfig);
@@ -48,7 +45,7 @@ export const EVMDestinationAdaptorProvider = ({
       );
       setDestinationBridge(bridge);
     }
-  }, [destinationChainConfig, destinationBridge, transactionStatus]);
+  }, [destinationChainConfig]);
 
   useEffect(() => {
     if (

diff --git a/src/Contexts/Adaptors/EVMAdaptors/EVMHomeAdaptorProvider.tsx b/src/Contexts/Adaptors/EVMAdaptors/EVMHomeAdaptorProvider.tsx
@@ -18,7 +18,7 @@ import { HomeBridgeContext } from "../../HomeBridgeContext";
 import { parseUnits } from "ethers/lib/utils";
 import { decodeAddress } from "@polkadot/util-crypto";
 import { getPriceCompatibility } from "./helpers";
-import { createApi, hasTokenSupplies } from "../SubstrateApis/ChainBridgeAPI";
+import { hasTokenSupplies } from "../SubstrateApis/ChainBridgeAPI";
 import { ApiPromise } from "@polkadot/api";
 
 export const EVMHomeAdaptorProvider = ({
@@ -88,6 +88,7 @@ export const EVMHomeAdaptorProvider = ({
     fallback,
     analytics,
     setAddress,
+    api,
   } = useNetworkManager();
 
   const [homeBridge, setHomeBridge] = useState<Bridge | undefined>(undefined);
@@ -103,25 +104,9 @@ export const EVMHomeAdaptorProvider = ({
   const [wrapTokenConfig, setWrapperConfig] = useState<TokenConfig | undefined>(
     undefined
   );
-  const [api, setApi] = useState<ApiPromise | undefined>();
   const [initialising, setInitialising] = useState(false);
   const [walletSelected, setWalletSelected] = useState(false);
 
-  useEffect(() => {
-    if (destinationChainConfig?.type !== "Substrate" || initialising || api)
-      return;
-    setInitialising(true);
-    createApi(
-      destinationChainConfig.rpcUrl,
-      destinationChainConfig.rpcFallbackUrls
-    )
-      .then((api) => {
-        setApi(api);
-        setInitialising(false);
-      })
-      .catch(console.error);
-  }, [destinationChainConfig, initialising]);
-
   useEffect(() => {
     if (network) {
       const chain = homeChains.find((chain) => chain.networkId === network);

diff --git a/src/Contexts/Adaptors/EVMAdaptors/helpers.ts b/src/Contexts/Adaptors/EVMAdaptors/helpers.ts
@@ -19,9 +19,9 @@ const getRpcProviderFromHttpUrl = (url: string) => {
       user: urlInstance.username,
       password: urlInstance.password,
     };
-    return new ethers.providers.JsonRpcProvider(urlInfo);
+    return new ethers.providers.StaticJsonRpcProvider(urlInfo);
   }
-  return new ethers.providers.JsonRpcProvider(url);
+  return new ethers.providers.StaticJsonRpcProvider(url);
 };
 
 export function getProvider(destinationChainConfig?: any) {

diff --git a/src/Contexts/Adaptors/SubstrateDestinationAdaptor.tsx b/src/Contexts/Adaptors/SubstrateDestinationAdaptor.tsx
@@ -9,7 +9,6 @@ import {
 import { IDestinationBridgeProviderProps } from "./interfaces";
 
 import { ApiPromise } from "@polkadot/api";
-import { UnsubscribePromise } from "@polkadot/api/types";
 import {
   SubstrateBridgeConfig,
   getСhainTransferFallbackConfig,
@@ -34,31 +33,29 @@ export const SubstrateDestinationAdaptorProvider = ({
     fallback,
     address,
     analytics,
+    api,
+    setApi,
+    listenerActive,
+    setListenerActive,
   } = useNetworkManager();
 
-  const [api, setApi] = useState<ApiPromise | undefined>();
-
-  const [initiaising, setInitialising] = useState(false);
+  const [initialising, setInitialising] = useState(false);
   useEffect(() => {
     // Once the chain ID has been set in the network context, the destination configuration will be automatically
     // set thus triggering this
-    if (!destinationChainConfig || initiaising || api) return;
+    if (!destinationChainConfig || initialising || api) return;
     setInitialising(true);
     createApi(
       destinationChainConfig.rpcUrl,
       destinationChainConfig.rpcFallbackUrls
     )
-      .then((api) => {
+      .then(async (api) => {
+        await api.isReady;
         setApi(api);
         setInitialising(false);
       })
       .catch(console.error);
-  }, [destinationChainConfig, api, initiaising, transactionStatus]);
-
-  const [listenerActive, setListenerActive] = useState<
-    UnsubscribePromise | undefined
-  >(undefined);
-
+  }, [destinationChainConfig, initialising]);
   useEffect(() => {
     if (api && !listenerActive && depositNonce) {
       // Wire up event listeners
@@ -121,19 +118,15 @@ export const SubstrateDestinationAdaptorProvider = ({
           }
         });
       });
-      setListenerActive(unsubscribe);
+      setListenerActive(true);
     } else if (listenerActive && !depositNonce) {
-      const unsubscribeCall = async () => {
-        setListenerActive(undefined);
-      };
-      unsubscribeCall();
+      setListenerActive(false);
     }
   }, [
     api,
     depositNonce,
     depositVotes,
     destinationChainConfig,
-    listenerActive,
     setDepositVotes,
     setTransactionStatus,
     tokensDispatch,
@@ -219,7 +212,8 @@ export const SubstrateDestinationAdaptorProvider = ({
     <DestinationBridgeContext.Provider
       value={{
         disconnect: async () => {
-          await api?.disconnect();
+          if (api?.isConnected) await api?.disconnect();
+          setApi(undefined);
         },
       }}
     >

diff --git a/src/Contexts/Adaptors/SubstrateHomeAdaptor.tsx b/src/Contexts/Adaptors/SubstrateHomeAdaptor.tsx
@@ -22,8 +22,6 @@ import { hasTokenSupplies } from "./EVMAdaptors/helpers";
 export const SubstrateHomeAdaptorProvider = ({
   children,
 }: IHomeBridgeProviderProps) => {
-  const registry = new TypeRegistry();
-  const [api, setApi] = useState<ApiPromise | undefined>();
   const [isReady, setIsReady] = useState(false);
   const [accounts, setAccounts] = useState<InjectedAccountType[]>([]);
 
@@ -41,6 +39,8 @@ export const SubstrateHomeAdaptorProvider = ({
     address,
     setAddress,
     analytics,
+    api,
+    setApi,
   } = useNetworkManager();
 
   const [relayerThreshold, setRelayerThreshold] = useState<number | undefined>(
@@ -57,18 +57,20 @@ export const SubstrateHomeAdaptorProvider = ({
     handleConnect();
   });
 
-  const [initiaising, setInitialising] = useState(false);
+  const [initialising, setInitialising] = useState(false);
   useEffect(() => {
     // Once the chain ID has been set in the network context, the homechain configuration will be automatically set thus triggering this
-    if (!homeChainConfig || initiaising || api) return;
+    if (!homeChainConfig || initialising || api) return;
     setInitialising(true);
     createApi(homeChainConfig.rpcUrl, homeChainConfig.rpcFallbackUrls)
-      .then((api) => {
+      .then(async (api) => {
+        await api.isReady;
         setApi(api);
+        setIsReady(true);
         setInitialising(false);
       })
       .catch(console.error);
-  }, [homeChainConfig, registry, api, initiaising]);
+  }, [homeChainConfig, initialising]);
 
   const getRelayerThreshold = useCallback(async () => {
     if (api) {
@@ -208,12 +210,6 @@ export const SubstrateHomeAdaptorProvider = ({
     }
   }, [isReady, handleSetHomeChain, homeChains]);
 
-  useEffect(() => {
-    // This is a simple check
-    // The reason for having a isReady is that the UI can lazy load data from this point
-    api?.isReady.then(() => setIsReady(true));
-  }, [api, setIsReady]);
-
   const selectAccount = useCallback(
     (index: number) => {
       setAddress(accounts[index].address);
@@ -344,7 +340,9 @@ export const SubstrateHomeAdaptorProvider = ({
       value={{
         connect: handleConnect,
         disconnect: async () => {
-          await api?.disconnect();
+          if (api?.isConnected) await api?.disconnect();
+          setApi(undefined);
+          setIsReady(false);
         },
         getNetworkName: () => homeChainConfig?.name || "undefined",
         bridgeFee,

diff --git a/src/Contexts/NetworkManagerContext.tsx b/src/Contexts/NetworkManagerContext.tsx
@@ -28,6 +28,8 @@ import {
 import { blockchainChainIds } from "../Constants/constants";
 import { Fallback } from "../Utils/Fallback";
 import AnalyticsService from "../Services/Analytics";
+import { Bridge } from "@chainsafe/chainbridge-contracts";
+import { ApiPromise } from "@polkadot/api";
 
 interface INetworkManagerProviderProps {
   children: React.ReactNode | React.ReactNode[];
@@ -103,6 +105,15 @@ interface NetworkManagerContext {
   address: string | undefined;
 
   analytics: AnalyticsService;
+
+  setDestinationBridge: (input: Bridge | undefined) => void;
+  destinationBridge: Bridge | undefined;
+
+  setApi: (input: ApiPromise | undefined) => void;
+  api: ApiPromise | undefined;
+
+  setListenerActive: (input: boolean) => void;
+  listenerActive: boolean;
 }
 
 const NetworkManagerContext = React.createContext<
@@ -158,6 +169,14 @@ const NetworkManagerProvider = ({ children }: INetworkManagerProviderProps) => {
     })
   );
 
+  const [destinationBridge, setDestinationBridge] = useState<
+    Bridge | undefined
+  >(undefined);
+
+  const [api, setApi] = useState<ApiPromise | undefined>();
+
+  const [listenerActive, setListenerActive] = useState(false);
+
   const handleSetHomeChain = useCallback(
     (chainId: number | undefined) => {
       if (!chainId && chainId !== 0) {
@@ -294,6 +313,12 @@ const NetworkManagerProvider = ({ children }: INetworkManagerProviderProps) => {
         address,
         setAddress,
         analytics,
+        destinationBridge,
+        setDestinationBridge,
+        api,
+        setApi,
+        listenerActive,
+        setListenerActive,
       }}
     >
       {walletType === "Ethereum" ? (