Redirect to previous page on connecting wallet

Part of [Sumsub KYC integration in onboarding app](https://www.notion.so/Sumsub-KYC-integration-in-onboarding-app-607b598c9c1d4d12adc71725e2ab5e7e)

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/testnet-onboarding-app#11

package.json

@@ -21,6 +21,7 @@
     "camelcase": "^6.2.1",
     "canonical-json": "^0.0.4",
     "crypto-browserify": "^3.12.0",
+    "ethers": "5.7.2",
     "https-browserify": "^1.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

src/App.tsx

@@ -11,6 +11,7 @@ import UserVerification from "./pages/UserVerification";
 import TermsAndConditions from "./pages/TermsAndConditions";
 import Header from "./components/Header";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
+import CreateValidator from "./pages/CreateValidator";
 
 function App() {
   return (
@@ -19,7 +20,7 @@ function App() {
       <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<TermsAndConditions />} />
-          <Route path="/connect-wallet" element={<ConnectWallet />} />
+          <Route path="/connect-wallet/:redirectTo?" element={<ConnectWallet />} />
           <Route element={<SignPageLayout />}>
             <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
             <Route
@@ -34,6 +35,10 @@ function App() {
               path="/onboarding-success"
               element={<OnboardingSuccess />}
             ></Route>
+            <Route
+              path="/validator"
+              element={<CreateValidator />}
+            ></Route>
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Routes>

src/constants.ts

@@ -27,3 +27,7 @@ export const TNC_PARTICIPANT_CONTENT = `Lorem ipsum dolor sit amet, consectetur
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+
+export const WALLET_DISCLAIMER_MSG = 'You are connecting to an experimental wallet! It is not secure. Do not use it elsewhere and/or for managing real assets.'
+
+export const ENABLE_KYC = false;

src/context/WalletConnectContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 import { useNavigate } from "react-router-dom";
 
 import SignClient from "@walletconnect/sign-client";
@@ -148,20 +148,17 @@ export const WalletConnectProvider = ({
   }, [signClient, createClient]);
 
   return (
-    <>
-      <walletConnectContext.Provider
-        value={{
-          connect,
-          session,
-          signClient,
-          checkPersistedState,
-          disconnect,
-        }}
-      >
-        {children}
-      </walletConnectContext.Provider>
-      <SnackbarProvider />
-    </>
+    <walletConnectContext.Provider
+      value={{
+        connect,
+        session,
+        signClient,
+        checkPersistedState,
+        disconnect,
+      }}
+    >
+      {children}
+    </walletConnectContext.Provider>
   );
 };
 

src/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Buffer } from "buffer";
+import { closeSnackbar, SnackbarProvider } from 'notistack';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -8,11 +13,24 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
+function SnackbarCloseButton({ key } : any) {
+  return (
+    <IconButton onClick={() => closeSnackbar(key)}>
+      <CloseIcon color='action'/>
+    </IconButton>
+  );
+}
+
 // Reference: https://github.com/vitejs/vite/discussions/2785#discussion-3298776
 globalThis.Buffer = Buffer;
 root.render(
   <React.StrictMode>
-    <App />
+    <SnackbarProvider
+      action={key => <SnackbarCloseButton key={key} />}
+    >
+      <App />
+    </SnackbarProvider>
   </React.StrictMode>
 );
 

src/layout/SignPageLayout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
 import {
   Toolbar,
@@ -14,10 +14,14 @@ import { useWalletConnectContext } from "../context/WalletConnectContext";
 const SignPageLayout = () => {
   const { disconnect, session } = useWalletConnectContext();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const disconnectHandler = async () => {
+    const { pathname } = location;
+    const redirectTo = pathname ? pathname.substring(1) : "";
+
     await disconnect();
-    navigate("/");
+    navigate(`/connect-wallet/${redirectTo}`);
   };
 
   return (

src/pages/ConnectWallet.tsx

@@ -1,22 +1,29 @@
 import React, { useEffect } from "react";
-import {useNavigate } from "react-router-dom";
+import {useLocation, useNavigate, useParams } from "react-router-dom";
 
-import { Button, Box, Container } from "@mui/material";
+import { Button, Box, Container, Typography, colors } from "@mui/material";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
+import { WALLET_DISCLAIMER_MSG } from "../constants";
 
 const ConnectWallet = () => {
   const { connect, session } = useWalletConnectContext();
 
   const navigate = useNavigate();
 
+  const {redirectTo} = useParams();
 
   useEffect(() => {
 
     if (session) {
-      navigate("/sign-with-nitro-key");
+      if (redirectTo){
+        navigate(`/${redirectTo}`);
+      }
+      else {
+        navigate("/sign-with-nitro-key");
+      }
     }
-  }, [session, navigate,]);
+  }, [session, navigate, redirectTo]);
 
   const handler = async () => {
     await connect();
@@ -28,14 +35,31 @@ const ConnectWallet = () => {
         display="flex"
         flexDirection="column"
         alignItems="center"
-        height="50vh"
         justifyContent="center"
+        marginTop={10}
+        sx={{
+          border: 1,
+          borderColor: 'grey.500',
+        }}
         padding={5}
+      >
+        <Typography variant="h5" component="h1" gutterBottom color={colors.red[400]}>
+          Disclaimer
+        </Typography>
+        <Typography variant="body1">
+          {WALLET_DISCLAIMER_MSG}
+        </Typography>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        padding={5}
+        justifyContent="center"
       >
         <Button
           variant="contained"
           onClick={handler}
-          style={{ marginTop: "20px" }}
         >
           Connect Wallet
         </Button>

src/pages/CreateValidator.tsx

@@ -0,0 +1,27 @@
+import { Box, MenuItem, Select, Typography } from '@mui/material'
+import React from 'react'
+import { useWalletConnectContext } from '../context/WalletConnectContext'
+import { useNavigate } from 'react-router-dom';
+
+const CreateValidator = () => {
+  const {session} = useWalletConnectContext();
+  const navigate = useNavigate();
+  if (!session){
+    navigate("/connect-wallet")
+  }
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        marginTop: 6,
+        gap: 1,
+      }}
+    >
+      <Typography variant="h5">Create a validator</Typography>
+      <Typography variant="body1">Select Laconic account:</Typography>
+    </Box>
+  )
+}
+
+export default CreateValidator

src/pages/OnboardingSuccess.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 import { useLocation } from "react-router-dom";
 
 import { Box, Typography } from "@mui/material";
@@ -8,6 +8,7 @@ import SumsubWebSdk from "@sumsub/websdk-react";
 import { MessageHandler } from "@sumsub/websdk";
 
 import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
+import { ENABLE_KYC } from "../constants";
 
 interface Participant {
   cosmosAddress: string;
@@ -63,7 +64,7 @@ const OnboardingSuccess = () => {
       setLoading(false);
     };
 
-    if (cosmosAddress) {
+    if (cosmosAddress && ENABLE_KYC) {
       getToken(cosmosAddress).catch(error => {
         console.error(error);
         alert("Failed to fetch token");
@@ -104,17 +105,21 @@ const OnboardingSuccess = () => {
           )}
         </pre>
       </Box>
-      <Typography variant="h5">KYC Status</Typography>
-      {!loading && token && cosmosAddress && (
-        <SumsubWebSdk
-          accessToken={token}
-          expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
-          config={config}
-          options={options}
-          onMessage={messageHandler}
-        />
-      )}
-      <SnackbarProvider />
+      {ENABLE_KYC ? (
+        <Box>
+          <Typography variant="h5">KYC Status</Typography>
+          {!loading && token && cosmosAddress && (
+            <SumsubWebSdk
+              accessToken={token}
+              expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
+              config={config}
+              options={options}
+              onMessage={messageHandler}
+            />
+          )}
+        </Box>
+      ) : ''
+      }
     </Box>
   );
 };

src/pages/SignWithCosmos.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 
 import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
@@ -25,14 +25,14 @@ const SignWithCosmos = () => {
 
   const navigate = useNavigate();
 
-  const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature, kycId} = location.state as {
+  const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature, kycIdHash} = location.state as {
     message?: {
       msg: string;
       address: string;
     };
     cosmosAddress?: string;
     receivedEthSig?: string;
-    kycId?: string;
+    kycIdHash?: string;
   };
 
   const ethAddress = innerMessage!.address;
@@ -49,11 +49,11 @@ const SignWithCosmos = () => {
           participant: cosmosAddress!,
           ethPayload: innerMessage,
           ethSignature: ethSignature!,
-          kycId: kycId!,
+          kycId: kycIdHash!,
           role
         },
       };
-    }, [cosmosAddress, innerMessage, ethSignature, kycId, role]);
+    }, [cosmosAddress, innerMessage, ethSignature, kycIdHash, role]);
 
   const handleTokenRequest = async () => {
     try {
@@ -205,7 +205,6 @@ const SignWithCosmos = () => {
           Send transaction
         </LoadingButton>
       </Box>
-      <SnackbarProvider />
     </Box>
   );
 };

src/pages/SignWithNitroKey.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
+import { ethers } from "ethers";
 
 import {
   Select,
@@ -13,6 +14,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { utf8ToHex } from "@walletconnect/encoding";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
+import { ENABLE_KYC } from "../constants";
 
 const SignWithNitroKey = () => {
 
@@ -56,13 +58,27 @@ const SignWithNitroKey = () => {
         });
         setIsLoading(false)
         setEthSignature(ethSignature);
-        navigate("/user-verification", {
-          state: {
-            message,
-            cosmosAddress,
-            receivedEthSig,
-          },
-        });
+
+        if (ENABLE_KYC) {
+          navigate("/user-verification", {
+            state: {
+              message,
+              cosmosAddress,
+              receivedEthSig,
+            },
+          });
+        } else {
+          const kycIdHash = ethers.utils.sha256(ethers.utils.toUtf8Bytes(cosmosAddress));
+
+          navigate("/sign-with-cosmos", {
+            state: {
+              message,
+              cosmosAddress,
+              receivedEthSig,
+              kycIdHash,
+            },
+          });
+        }
       } catch (error) {
         console.log("err in signing ", error);
         setIsLoading(false)
@@ -83,7 +99,7 @@ const SignWithNitroKey = () => {
           }}
         >
           <Typography variant="h5">Sign with Nitro key</Typography>
-          <Typography variant="body1">Select Cosmos account:</Typography>
+          <Typography variant="body1">Select Laconic account:</Typography>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
@@ -136,7 +152,6 @@ const SignWithNitroKey = () => {
               Sign using Nitro key
             </LoadingButton>
           </Box>
-          <SnackbarProvider />
         </Box>
       ) : (
         <>Loading...</>

src/pages/UserVerification.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { ethers } from "ethers";
 
 import { Box, Typography } from '@mui/material';
 import SumsubWebSdk from '@sumsub/websdk-react';
@@ -27,7 +28,6 @@ const UserVerification = () => {
 
   useEffect(() => {
     const getToken = async (userId: string) => {
-      console.log(userId);
       const newToken = await fetchAccessToken(userId);
 
       setToken(newToken);
@@ -44,12 +44,13 @@ const UserVerification = () => {
 
   useEffect(() => {
     if (applicationSubmitted && kycId !== '') {
+      const kycIdHash = ethers.utils.sha256(ethers.utils.toUtf8Bytes(kycId));
       navigate("/sign-with-cosmos", {
         state: {
           message,
           cosmosAddress,
           receivedEthSig,
-          kycId,
+          kycIdHash,
         }})
     }
   }, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]);
@@ -71,10 +72,6 @@ const UserVerification = () => {
       if (applicantStatus === 'pending' || applicantStatus === 'completed') {
         setApplicationSubmitted(true);
       }
-
-      if ((payload as any).reviewResult.reviewAnswer === 'GREEN') {
-        setApplicationSubmitted(true);
-      }
     }
   };
 

yarn.lock

@@ -6790,7 +6790,7 @@ ethereumjs-util@^6.0.0, ethereumjs-util@^6.2.1:
     ethjs-util "0.1.6"
     rlp "^2.2.3"
 
-ethers@^5.6.2:
+ethers@5.7.2, ethers@^5.6.2:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
   integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
@@ -11776,7 +11776,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11860,7 +11869,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13082,8 +13098,7 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13101,6 +13116,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"