Pass kycId in cosmos message

src/App.tsx

@@ -25,13 +25,13 @@ function App() {
           />
           <Route path="/connect-wallet" element={<ConnectWallet />} />
           <Route element={<SignPageLayout />}>
-            <Route path="/sign-with-nitro-key/:userId" element={<SignWithNitroKey />} />
+            <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
             <Route
-              path="/sign-with-cosmos/:cosmosAddress/:ethSignature"
+              path="/sign-with-cosmos"
               element={<SignWithCosmos />}
             />
             <Route
-              path="/onboarding-success/:cosmosAddress"
+              path="/onboarding-success"
               element={<OnboardingSuccess />}
             ></Route>
           </Route>

src/pages/OnboardingSuccess.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
-import { useParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 import { Box, Typography } from "@mui/material";
 import { Registry } from "@cerc-io/registry-sdk";
@@ -15,7 +15,9 @@ const registry = new Registry(
 );
 
 const OnboardingSuccess = () => {
-  const { cosmosAddress } = useParams();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const cosmosAddress = queryParams.get('cosmosAddress');
 
   const [participant, setParticipant] = useState<Participant>();
 

src/pages/SignWithCosmos.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useParams, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
 
 import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
@@ -15,14 +15,17 @@ import { useWalletConnectContext } from "../context/WalletConnectContext";
 const SignWithCosmos = () => {
   const { session, signClient } = useWalletConnectContext();
 
-  const { cosmosAddress, ethSignature } = useParams();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const cosmosAddress = queryParams.get('cosmosAddress');
+  const ethSignature = queryParams.get('ethSignature');
+  const kycId = queryParams.get('kycId');
 
   const [isLoading, setIsLoading] = useState(false);
   const [balance, setBalance] = useState('');
   const [isRequesting, setIsRequesting] = useState(false);
 
   const navigate = useNavigate();
-  const location = useLocation();
   const innerMessage = location.state;
   const ethAddress = innerMessage.address;
 
@@ -35,12 +38,13 @@ const SignWithCosmos = () => {
       return {
         typeUrl: typeUrlMsgOnboardParticipant,
         value: {
-          participant: cosmosAddress,
+          participant: cosmosAddress!,
           ethPayload: innerMessage,
-          ethSignature,
+          ethSignature: ethSignature!,
+          kycId: kycId
         },
       };
-    }, [cosmosAddress, innerMessage, ethSignature]);
+    }, [cosmosAddress, innerMessage, ethSignature, kycId]);
 
   const handleTokenRequest = async () => {
     try {
@@ -100,7 +104,7 @@ const SignWithCosmos = () => {
       if (responseFromWallet.code !== 0) {
         enqueueSnackbar("Transaction not sent", { variant: "error" });
       } else {
-        navigate(`/onboarding-success/${cosmosAddress}`);
+        navigate(`/onboarding-success?cosmosAddress=${cosmosAddress}`);
       }
     } catch (error) {
       console.error(error);

src/pages/SignWithNitroKey.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
 
@@ -15,6 +15,10 @@ import { utf8ToHex } from "@walletconnect/encoding";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 
 const SignWithNitroKey = () => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const kycId = queryParams.get('kycId');
+
   const { session, signClient, checkPersistedState } =
     useWalletConnectContext();
 
@@ -55,7 +59,7 @@ const SignWithNitroKey = () => {
         });
         setIsLoading(false)
         setEthSignature(ethSignature);
-        navigate(`/sign-with-cosmos/${cosmosAddress}/${receivedEthSig}`, {
+        navigate(`/sign-with-cosmos?cosmosAddress=${cosmosAddress}&ethSignature=${receivedEthSig}&kycId=${kycId}`, {
           state: message,
         });
       } catch (error) {

src/pages/UserVerification.tsx

@@ -15,16 +15,16 @@ const options = {
 }
 
 const UserVerification = () => {
-  const [userId, setUserId] = useState<String>('');
+  const [kycId, setKycId] = useState<String>('');
   const [applicationSubmitted, setApplicationSubmitted] = useState<boolean>(false);
 
   const navigate = useNavigate();
 
   useEffect(()=>{
-    if (applicationSubmitted && userId !== '') {
-      navigate(`/sign-with-nitro-key/${userId}`)
+    if (applicationSubmitted && kycId !== '') {
+      navigate(`/sign-with-nitro-key?kycId=${kycId}`)
     }
-  }, [applicationSubmitted, userId, navigate]);
+  }, [applicationSubmitted, kycId, navigate]);
 
   // TODO: Implement
   const accessTokenExpirationHandler = async () => {
@@ -41,7 +41,7 @@ const UserVerification = () => {
 
   const messageHandler = (event: any, payload: any ) => {
     if (event === 'idCheck.onApplicantLoaded') {
-      setUserId(payload.applicantId);
+      setKycId(payload.applicantId);
     }
 
     if (event === 'idCheck.onApplicantSubmitted'){