fix: blockchain context

src/components/ServerList/ServerList.tsx

@@ -1,4 +1,4 @@
-  import React, {useMemo} from 'react';
+import React, {useMemo} from 'react';
 
 import CountUp from 'react-countup';
 import dynamic from 'next/dynamic';

src/components/common/Blockchain/Blockchain.provider.tsx

@@ -2,20 +2,23 @@ import React, {useEffect, useState} from 'react';
 import {IProvider, PolkadotJs} from 'src/lib/services/polkadot-js';
 
 import BlockchainContext from './Blockchain.context';
+import {useIsMountedRef} from './useIsMountedRef';
 
 type BlockchainProviderProps = {
   children: React.ReactNode;
 };
 
-export const BlockchainProvider: React.ComponentType<BlockchainProviderProps> = ({children}) => {
+const BlockchainProvider: React.ComponentType<BlockchainProviderProps> = ({children}) => {
   const [provider, setProvider] = useState<IProvider | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
 
+  const isMountedRef = useIsMountedRef();
+
   useEffect(() => {
-    if (error) return;
+    if (!isMountedRef.current) return;
     connect();
-  }, [provider, error]);
+  }, [isMountedRef]);
 
   const connect = async () => {
     try {
@@ -34,3 +37,5 @@ export const BlockchainProvider: React.ComponentType<BlockchainProviderProps> =
     </BlockchainContext.Provider>
   );
 };
+
+export default BlockchainProvider;

src/components/common/Blockchain/useIsMountedRef.ts

@@ -0,0 +1,13 @@
+import {useEffect, useRef} from 'react';
+
+export const useIsMountedRef = () => {
+  const isMountedRef = useRef<null | boolean>(null);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  return isMountedRef;
+};

src/hooks/use-instances.hooks.ts

@@ -130,25 +130,30 @@ export const useInstances = (instanceType: InstanceType, accountId?: string) =>
     try {
       if (!provider || !accountId) return;
 
-      await provider.updateApiURL(accountId, server.id, newApiURL, async (newServer, signerOpened) => {
-        if (signerOpened) setLoading(true);
-        if (newServer) {
-          fetch(`${newServer.apiUrl}/server`)
-            .then(res => res.json())
-            .then(data => {
-              newServer.detail = data;
-            })
-            .catch(console.log)
-            .finally(() => {
-              const newServerList = serverList.map(e => {
-                if (e.id === server.id) return newServer;
-                return e;
+      await provider.updateApiURL(
+        accountId,
+        server.id,
+        newApiURL,
+        async (newServer, signerOpened) => {
+          if (signerOpened) setLoading(true);
+          if (newServer) {
+            fetch(`${newServer.apiUrl}/server`)
+              .then(res => res.json())
+              .then(data => {
+                newServer.detail = data;
               })
-
-              setServerList([...newServerList])
-            });
-        }
-      });
+              .catch(console.log)
+              .finally(() => {
+                const newServerList = serverList.map(e => {
+                  if (e.id === server.id) return newServer;
+                  return e;
+                });
+
+                setServerList([...newServerList]);
+              });
+          }
+        },
+      );
     } catch (err) {
       console.log(err);
     } finally {

src/pages/_app.tsx

@@ -1,15 +1,20 @@
+import dynamic from 'next/dynamic';
+import themeV2 from '../themes/light-theme';
+
 import type {AppProps} from 'next/app';
 import {ThemeProvider} from '@material-ui/core/styles';
-import themeV2 from '../themes/light-theme';
 import {NextPage} from 'next';
 import {ReactElement, ReactNode} from 'react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
-import {BlockchainProvider} from 'src/components/common/Blockchain/Blockchain.provider';
-
 import '../../styles/globals.css';
 
+const BlockchainProvider = dynamic(
+  () => import('src/components/common/Blockchain/Blockchain.provider'),
+  {ssr: false},
+);
+
 export type NextPageWithLayout = NextPage & {
   getLayout?: (page: ReactElement) => ReactNode;
 };