Wait for session to load before redirecting (#29)

Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675)

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: cerc-io/testnet-onboarding-app#29

src/context/WalletConnectContext.tsx

@@ -22,6 +22,7 @@ assert(PROJECT_ID, "Wallet connect project id not provided");
 interface ContextValue {
   connect: () => Promise<void>;
   session: SessionTypes.Struct | null;
+  isSessionLoading: boolean;
   signClient: SignClient | undefined;
   checkPersistedState: (client: SignClient) => Promise<void>;
   disconnect: () => Promise<void>;
@@ -30,6 +31,7 @@ interface ContextValue {
 const walletConnectContext = createContext<ContextValue>({
   connect: () => Promise.resolve(),
   session: null,
+  isSessionLoading: true,
   signClient: undefined,
   checkPersistedState: () => Promise.resolve(),
   disconnect: () => Promise.resolve(),
@@ -47,6 +49,7 @@ export const WalletConnectProvider = ({
 }) => {
   const [signClient, setSignClient] = useState<SignClient>();
   const [session, setSession] = useState<SessionTypes.Struct | null>(null);
+  const [isSessionLoading, setIsSessionLoading] = useState(true);
   const isSignClientInitializing = useRef<boolean>(false);
   const navigate = useNavigate();
 
@@ -59,6 +62,7 @@ export const WalletConnectProvider = ({
     }
 
     setSession(null);
+    setIsSessionLoading(false);
   }, [signClient, session]);
 
   const checkPersistedState = useCallback(async (client: SignClient) => {
@@ -67,6 +71,8 @@ export const WalletConnectProvider = ({
       const session = client.session.get(client.session.keys[lastKeyIndex]);
       setSession(session);
     }
+
+    setIsSessionLoading(false);
   }, []);
 
   const subscribeToEvents = useCallback(
@@ -76,10 +82,12 @@ export const WalletConnectProvider = ({
         const currentSession = client.session.get(topic);
         const updatedSession = { ...currentSession, namespaces };
         setSession(updatedSession);
+        setIsSessionLoading(false);
       });
 
       client.on("session_delete", () => {
         setSession(null);
+        setIsSessionLoading(false);
         navigate("/");
       });
     },
@@ -133,12 +141,14 @@ export const WalletConnectProvider = ({
       try {
         const session = await approval();
         setSession(session);
+        setIsSessionLoading(false);
       } catch (error) {
         enqueueSnackbar("User rejected pairing request", { variant: "error" });
         console.log(error);
       }
       web3Modal.closeModal();
     }
+
   };
 
   useEffect(() => {
@@ -152,6 +162,7 @@ export const WalletConnectProvider = ({
       value={{
         connect,
         session,
+        isSessionLoading,
         signClient,
         checkPersistedState,
         disconnect,
@@ -163,12 +174,13 @@ export const WalletConnectProvider = ({
 };
 
 export const useWalletConnectContext = () => {
-  const { connect, session, signClient, checkPersistedState, disconnect } =
+  const { connect, session, signClient, isSessionLoading, checkPersistedState, disconnect } =
     useContext(walletConnectContext);
 
   return {
     connect,
     session,
+    isSessionLoading,
     signClient,
     checkPersistedState,
     disconnect,

src/pages/LandingPage.tsx

@@ -37,7 +37,7 @@ const LandingPage = () => {
         </Typography>
       </Box>
       <TermsAndConditionsBox height="43vh" onLoad={()=>{setIsDisabled(false);}} />
-      <Box mt={2} display="flex" justifyContent="center">
+      <Box m={2} display="flex" justifyContent="center">
         <Button variant="contained" color="primary" onClick={handleAccept} disabled={isDisabled}>
           Accept
         </Button>

src/pages/SignWithNitroKey.tsx

@@ -17,19 +17,23 @@ import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 
 const SignWithNitroKey = () => {
 
-  const { session, signClient } =
+  const { session, signClient, isSessionLoading } =
     useWalletConnectContext();
 
   const navigate = useNavigate();
   const location = useLocation();
 
   useEffect(() => {
+    if (isSessionLoading) {
+      return;
+    }
+
     if (!session) {
       navigate("/connect-wallet?redirectTo=sign-with-nitro-key", {
         state: location.state,
       });
     }
-  }, [session, navigate, location.state]);
+  }, [session, isSessionLoading, navigate, location.state]);
 
   const [ethAddress, setEthAddress] = useState("");
   const [ethSignature, setEthSignature] = useState("");

src/pages/Validator.tsx

@@ -13,7 +13,7 @@ import { useWalletConnectContext } from '../context/WalletConnectContext';
 import { Participant } from '../types';
 
 const Validator = () => {
-  const { session, signClient } = useWalletConnectContext();
+  const { session, signClient, isSessionLoading } = useWalletConnectContext();
   const navigate = useNavigate();
 
   const [cosmosAddress, setCosmosAddress] = useState('');
@@ -24,10 +24,14 @@ const Validator = () => {
   const [isError, setIsError] = useState(false);
 
   useEffect(() => {
+    if (isSessionLoading) {
+      return;
+    }
+
     if (!session) {
       navigate("/connect-wallet?redirectTo=validator");
     }
-  }, [session, navigate]);
+  }, [session, navigate, isSessionLoading]);
 
   useEffect(() => {
     if (!cosmosAddress) {