Handle redirects

src/App.tsx

@@ -14,7 +14,7 @@ import { WalletConnectProvider } from "./context/WalletConnectContext";
 import VerifyEmail from "./pages/VerifyEmail";
 import Email from "./pages/Email";
 import Thanks from "./pages/Thanks";
-import CreateValidator from "./pages/CreateValidator";
+import Validator from "./pages/Validator";
 
 function App() {
   return (
@@ -25,7 +25,7 @@ function App() {
           <Route path="/" element={<TermsAndConditions />} />
           <Route path="/verify-email" element={<VerifyEmail />} />
           <Route path="/email" element={<Email/>} />
-          <Route path="/connect-wallet/:redirectTo?" element={<ConnectWallet />} />
+          <Route path="/connect-wallet" element={<ConnectWallet />} />
           <Route path="/thanks" element={<Thanks />} />
           <Route element={<SignPageLayout />}>
             <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
@@ -43,7 +43,7 @@ function App() {
             ></Route>
             <Route
               path="/validator"
-              element={<CreateValidator />}
+              element={<Validator />}
             ></Route>
           </Route>
           <Route path="*" element={<PageNotFound />} />

src/layout/SignPageLayout.tsx

@@ -21,7 +21,7 @@ const SignPageLayout = () => {
     const redirectTo = pathname ? pathname.substring(1) : "";
 
     await disconnect();
-    navigate(`/connect-wallet/${redirectTo}`);
+    navigate(`/connect-wallet?redirectTo=${redirectTo}`);
   };
 
   return (

src/pages/ConnectWallet.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import {useNavigate, useParams } from "react-router-dom";
+import {useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { Button, Box, Container, Typography, colors } from "@mui/material";
 
@@ -7,14 +7,21 @@ import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { WALLET_DISCLAIMER_MSG } from "../constants";
 
 const ConnectWallet = () => {
-  const { connect, session } = useWalletConnectContext();
+  const { connect, session, signClient, checkPersistedState } = useWalletConnectContext();
 
   const navigate = useNavigate();
   const location = useLocation();
-  const {redirectTo} = useParams();
+  const [searchParams] = useSearchParams();
+
+  const redirectTo = searchParams.get("redirectTo")
+
+  useEffect(()=>{
+    if (signClient && !session) {
+      checkPersistedState(signClient);
+    }
+  }, [checkPersistedState, signClient, session]);
 
   useEffect(() => {
-
     if (session) {
       if (redirectTo){
         navigate(`/${redirectTo}`, {

src/pages/SignWithNitroKey.tsx

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

src/pages/Thanks.tsx

@@ -41,7 +41,7 @@ const Thanks: React.FC = () => {
       const subscriberIdBytes = ethers.utils.toUtf8Bytes(decoded.subscriber_id)
       const subscriberIdHash = ethers.utils.sha256(subscriberIdBytes);
 
-      navigate('/connect-wallet', {
+      navigate('/sign-with-nitro-key', {
         state:{
           subscriberIdHash
         }

src/pages/Validator.tsx

@@ -12,24 +12,24 @@ import { Registry } from '@cerc-io/registry-sdk';
 import { useWalletConnectContext } from '../context/WalletConnectContext'
 import { Participant } from '../types';
 
-const CreateValidator = () => {
+const Validator = () => {
   const {session, signClient} = useWalletConnectContext();
   const navigate = useNavigate();
 
   const [cosmosAddress, setCosmosAddress] = useState('laconic1z4l4556v8jnk7k456ujme720nk8mzjwhka7qvw');
   const [isLoading, setIsLoading] = useState(false);
-  const [pubkey, setPubkey] = useState('d5aOEYaCIHaDn6kG0tAg699D7sLgAgkJI5reTMl0o5U=');
+  const [pubkey, setPubkey] = useState('qiQEvyqIf9/e912ZEIZD5CfdqR3iOlpI+NVtRnpHuYc=');
   const [participant, setParticipant] = useState<Participant | null>(null);
 
   if (!session){
-    navigate("/connect-wallet")
+    navigate("/connect-wallet?redirectTo=create-validator");
   }
 
   const msgCreateValidator: MsgCreateValidator =
     useMemo(() => {
       return {
         description: {
-          moniker: "dockerNode",
+          moniker: "dockerNode2",
           identity: "",
           website: "",
           securityContact: "",
@@ -41,7 +41,7 @@ const CreateValidator = () => {
           rate: "100000000000000000", // 0.1
         },
         minSelfDelegation: "1",
-        delegatorAddress: cosmosAddress,
+        delegatorAddress: '',
         validatorAddress: toBech32('laconicvaloper', fromBech32(cosmosAddress).data),
         pubkey: encodePubkey({
           type: "tendermint/PubKeyEd25519",
@@ -183,38 +183,38 @@ const CreateValidator = () => {
             )}
           </Box>
 
-          {participant && participant.role === "validator" && (
+          {/* {participant && participant.role === "validator" && ( */}
-            <>
+          <>
-              <Typography >Send transaction to chain</Typography>
+            <Typography >Send transaction to chain</Typography>
-              <Box
+            <Box
-                sx={{
+              sx={{
-                  backgroundColor: "lightgray",
+                backgroundColor: "lightgray",
-                  padding: 3,
+                padding: 3,
-                  wordWrap: "break-word",
+                wordWrap: "break-word",
+              }}
+            >
+              <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+                {JSON.stringify(msgCreateValidator, null, 2)}
+              </pre>
+            </Box>
+            <Box marginTop={1}>
+              <LoadingButton
+                variant="contained"
+                onClick={async () => {
+                  console.log(msgCreateValidatorEncodeObject);
+                  await sendTransaction(msgCreateValidatorEncodeObject);
                 }}
+                loading={isLoading}
               >
-                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+                Send transaction
-                  {JSON.stringify(msgCreateValidator, null, 2)}
+              </LoadingButton>
-                </pre>
+            </Box>
-              </Box>
+          </>
-              <Box marginTop={1}>
+          {/* )} */}
-                <LoadingButton
-                  variant="contained"
-                  onClick={async () => {
-                    console.log(msgCreateValidatorEncodeObject);
-                    await sendTransaction(msgCreateValidatorEncodeObject);
-                  }}
-                  loading={isLoading}
-                >
-                  Send transaction
-                </LoadingButton>
-              </Box>
-            </>
-          )}
         </div>
       )}
     </Box>
   )
 }
 
-export default CreateValidator
+export default Validator