fix(react): init aleph ws provider only on client

router-protocol · Aug 22, 2024 · 66dfa1b · 66dfa1b
1 parent 4c44f09
commit 66dfa1b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/packages/react/src/hooks/useIsClient.ts b/packages/react/src/hooks/useIsClient.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Check if the code is running on the client side
+ * @returns boolean
+ */
+export const useIsClient = () => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+};
diff --git a/packages/react/src/providers/AlephProvider.tsx b/packages/react/src/providers/AlephProvider.tsx
@@ -1,8 +1,8 @@
 import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-polkadot';
-import { ApiPromise } from '@polkadot/api';
 import { useMutation } from '@tanstack/react-query';
 import { createContext, useEffect, useRef } from 'react';
 import { useStore } from 'zustand';
+import { useIsClient } from '../hooks/useIsClient.js';
 import { AlephStore, createAlephStore } from '../store/Aleph.js';
 import { ChainData, ChainId } from '../types/index.js';
 
@@ -24,14 +24,16 @@ export const AlephContext = createContext<AlephContextValues>({
  * @returns The Aleph Zero provider context with the connect and disconnect functions.
  */
 export const AlephProvider = ({ children, chain }: { children: React.ReactNode; chain: ChainData<'alephZero'> }) => {
-  const alephStore = useRef(createAlephStore({ chain })).current;
+  const alephStore = useRef(createAlephStore()).current;
   const connectedAdapter = useStore(alephStore, (state) => state.connectedAdapter);
-  const wsProvider = useStore(alephStore, (state) => state.wsProvider);
   const setConnectedAdapter = useStore(alephStore, (state) => state.setConnectedAdapter);
   const setConnectors = useStore(alephStore, (state) => state.setConnectors);
   const setAddress = useStore(alephStore, (state) => state.setAddress);
+  const setWsProvider = useStore(alephStore, (state) => state.setWsProvider);
   const setApi = useStore(alephStore, (state) => state.setApi);
 
+  const isClient = useIsClient();
+
   // Build and set Nightly Adapter
   // Used build instead of buildLazy to fix nightlyAdapter loading issue while fetching supported nigthly wallet list(walletsFromRegistry)
   useEffect(() => {
@@ -56,14 +58,30 @@ export const AlephProvider = ({ children, chain }: { children: React.ReactNode;
   }, [setConnectedAdapter]);
 
   useEffect(() => {
-    ApiPromise.create({ provider: wsProvider })
-      .then((api) => {
-        setApi(api);
-      })
-      .catch((error) => {
-        console.error('Error creating AlephZero API:', error);
-      });
-  }, [wsProvider, setApi]);
+    if (!isClient) return;
+    if (!chain.rpcUrls.default.webSocket) {
+      console.error('AlephZero WebSocket URL not found');
+      return;
+    }
+    const wsUrl = chain.rpcUrls.default.webSocket[0];
+
+    const setProviders = async () => {
+      const { ApiPromise, WsProvider } = await import('@polkadot/api');
+
+      const wsProvider = new WsProvider(wsUrl);
+
+      setWsProvider(wsProvider);
+      ApiPromise.create({ provider: wsProvider })
+        .then((api) => {
+          setApi(api);
+        })
+        .catch((error) => {
+          console.error('Error creating AlephZero API:', error);
+        });
+    };
+
+    setProviders();
+  }, [chain, isClient, setApi, setWsProvider]);
 
   /////////////////
   /// Mutations ///

diff --git a/packages/react/src/store/Aleph.ts b/packages/react/src/store/Aleph.ts
@@ -1,8 +1,7 @@
 import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-polkadot';
-import { ApiPromise, WsProvider } from '@polkadot/api';
+import type { ApiPromise, WsProvider } from '@polkadot/api';
 import { createStore } from 'zustand';
 import { devtools } from 'zustand/middleware';
-import { ChainData } from '../types/index.js';
 
 export interface AlephState {
   connectors: {
@@ -11,33 +10,31 @@ export interface AlephState {
   connectedAdapter: NightlyConnectAdapter | undefined;
   address: string | null;
 
-  wsProvider: WsProvider;
+  wsProvider: WsProvider | undefined;
   api: ApiPromise | undefined;
 
   setAddress: (address: string) => void;
   setConnectors: (connector: NightlyConnectAdapter) => void;
   setConnectedAdapter: (adapter: NightlyConnectAdapter | undefined) => void;
+  setWsProvider: (wsProvider: WsProvider) => void;
   setApi: (api: ApiPromise) => void;
 }
 
 export type AlephStore = ReturnType<typeof createAlephStore>;
 
-type AlephProps = {
-  chain: ChainData<'alephZero'>;
-};
-
-export const createAlephStore = (props: AlephProps) => {
+export const createAlephStore = () => {
   const DEFAULT_ALEPH_STATE: AlephState = {
     connectors: {},
     connectedAdapter: undefined,
     address: null,
 
-    wsProvider: new WsProvider(props.chain.rpcUrls.default.webSocket?.[0]),
+    wsProvider: undefined,
     api: undefined,
 
     setAddress: () => {},
     setConnectors: () => {},
     setConnectedAdapter: () => {},
+    setWsProvider: () => {},
     setApi: () => {},
   };
 
@@ -60,6 +57,7 @@ export const createAlephStore = (props: AlephProps) => {
           selectedWallet.name.toLowerCase();
         set(() => ({ connectors: { [slug]: connector } }));
       },
+      setWsProvider: (wsProvider) => set(() => ({ wsProvider })),
       setApi: (api) => set(() => ({ api })),
     })),
   );