Navigate to sign with cosmos page after KYC

src/App.tsx

@@ -19,13 +19,13 @@ function App() {
       <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<TermsAndConditions />} />
-          <Route
-            path="/user-verification"
-            element={<UserVerification />}
-          />
           <Route path="/connect-wallet" element={<ConnectWallet />} />
           <Route element={<SignPageLayout />}>
             <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
+            <Route
+              path="/user-verification"
+              element={<UserVerification />}
+            />
             <Route
               path="/sign-with-cosmos"
               element={<SignWithCosmos />}

src/pages/TermsAndConditions.tsx

@@ -26,7 +26,11 @@ const TermsAndConditions = () => {
             marginBottom: '1rem',
           }}
         >
-          <Typography variant="body1" gutterBottom>
+          <Typography
+            variant="body1"
+            gutterBottom
+            component="div"
+          >
             <div dangerouslySetInnerHTML={{__html: TNC_GENERIC_CONTENT}} />
           </Typography>
 

src/pages/UserVerification.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import SumsubWebSdk from '@sumsub/websdk-react';
 
 import { fetchToken } from '../utils/getToken';
@@ -16,7 +16,7 @@ const options = {
 };
 
 const UserVerification = () => {
-  const [kycId, setKycId] = useState<string>('');
+  const [kycId, setKycId] = useState<string>('unknown');
   const [applicationSubmitted, setApplicationSubmitted] = useState<boolean>(false);
   const [token, setToken] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(true);
@@ -25,11 +25,12 @@ const UserVerification = () => {
   const navigate = useNavigate();
 
   const {message, cosmosAddress, receivedEthSig} = location.state;
+  const userId = cosmosAddress;
 
   useEffect(() => {
-    const getToken = async (kycId: string) => {
-      console.log(kycId);
-      const newToken = await fetchToken(kycId);
+    const getToken = async (userId: string) => {
+      console.log(userId);
+      const newToken = await fetchToken(userId);
       if (newToken) {
         console.log('newToken: ', newToken);
         setToken(newToken);
@@ -39,22 +40,24 @@ const UserVerification = () => {
       setLoading(false);
     };
 
-    if (kycId) {
-      console.log(kycId);
-      getToken(kycId);
+    if (userId) {
+      console.log(userId);
+      getToken(userId);
     }
 
-  }, [kycId]);
+  }, [userId]);
 
   useEffect(() => {
     if (applicationSubmitted && kycId !== '') {
-      navigate("/connect-wallet", {
+      navigate("/sign-with-cosmos", {
         state: {
-          kycId
-        },
-      })
+          message,
+          cosmosAddress,
+          receivedEthSig,
+          kycId,
+        }})
     }
-  }, [applicationSubmitted, kycId, navigate]);
+  }, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]);
 
   const accessTokenExpirationHandler = async () => {
     alert("Please renew token");
@@ -91,15 +94,6 @@ const UserVerification = () => {
         <Typography variant="h5">User verification</Typography>
         <div id="sumsub-websdk-container"></div>
       </Box>
-      <Button onClick={()=>{
-        navigate("/sign-with-cosmos", {
-          state: {
-            message,
-            cosmosAddress,
-            receivedEthSig,
-            kycId: 'unknown-kyc-id',
-          }})
-      }}>Sign with cosmos key</Button>
       {!loading && token && (
         <SumsubWebSdk
           accessToken={token}