Add page for successful validator creation

src/App.tsx

@@ -15,6 +15,7 @@ import VerifyEmail from "./pages/VerifyEmail";
 import Email from "./pages/Email";
 import Thanks from "./pages/Thanks";
 import Validator from "./pages/Validator";
+import ValidatorSuccess from "./pages/ValidatorSuccess";
 
 function App() {
   return (
@@ -45,6 +46,10 @@ function App() {
               path="/validator"
               element={<Validator />}
             ></Route>
+            <Route
+              path="/validator-success"
+              element={<ValidatorSuccess />}
+            ></Route>
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Routes>

src/components/TermsAndConditionsBox.tsx

@@ -6,11 +6,19 @@ import { Typography } from '@mui/material';
 // https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#copy-worker-to-public-directory
 pdfjs.GlobalWorkerOptions.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.min.mjs';
 
-const TermsAndConditionsBox = ({height}: {height: string}) => {
+interface TermsAndConditionsBoxProps {
+  height: string;
+  onLoad?: () => void;
+}
+
+const TermsAndConditionsBox = ({ height, onLoad }: TermsAndConditionsBoxProps ) => {
   const [numPages, setNumPages] = useState<number>();
 
   function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
     setNumPages(numPages);
+    if (onLoad){
+      onLoad();
+    };
   }
 
   return (

src/pages/ConnectWallet.tsx

@@ -13,7 +13,7 @@ const ConnectWallet = () => {
   const location = useLocation();
   const [searchParams] = useSearchParams();
 
-  const redirectTo = searchParams.get("redirectTo")
+  const redirectTo = searchParams.get("redirectTo");
 
   useEffect(()=>{
     if (signClient && !session) {

src/pages/LandingPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button, Box, Typography } from '@mui/material';
@@ -8,6 +8,8 @@ import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
 const LandingPage = () => {
   const navigate = useNavigate();
 
+  const [isDisabled, setIsDisabled] = useState(true);
+
   const handleAccept = () => {
     navigate('/verify-email');
   };
@@ -34,9 +36,9 @@ const LandingPage = () => {
           those same validators can complete their service provider setup. Once service providers are live, app publishers can start deploying webapps to individual service providers.
         </Typography>
       </Box>
-      <TermsAndConditionsBox height="43vh" />
+      <TermsAndConditionsBox height="43vh" onLoad={()=>{setIsDisabled(false);}} />
       <Box mt={2} display="flex" justifyContent="center">
-        <Button variant="contained" color="primary" onClick={handleAccept}>
+        <Button variant="contained" color="primary" onClick={handleAccept} disabled={isDisabled}>
           Accept
         </Button>
       </Box>

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 { enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
 
@@ -37,7 +37,10 @@ const SignWithNitroKey = () => {
   const [cosmosAddress, setCosmosAddress] = useState("");
 
   const [isLoading, setIsLoading] = useState(false);
-  const subscriberIdHash = localStorage.getItem(SUBSCRIBER_ID_HASH_KEY);
+
+  const subscriberIdHash = useMemo(()=>{
+    return localStorage.getItem(SUBSCRIBER_ID_HASH_KEY);
+  }, []);
 
   useEffect(() => {
     if (!subscriberIdHash) {

src/pages/Validator.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { enqueueSnackbar } from 'notistack';
 import { useNavigate } from 'react-router-dom';
 
-import { Box, MenuItem, Select, TextField, Typography } from '@mui/material';
+import { Box, Link, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { MsgCreateValidator } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
 import { fromBech32, toBech32 } from '@cosmjs/encoding';
 import { LoadingButton } from '@mui/lab';
@@ -120,7 +120,7 @@ const Validator = () => {
       if (response.code !== 0) {
         enqueueSnackbar("Transaction not sent", { variant: "error" });
       } else {
-        navigate("/onboarding-success", { state: { cosmosAddress } });
+        navigate("/validator-success", { state: { validatorAddress: msgCreateValidator.validatorAddress, } });
       }
     } catch (error) {
       console.error("Error sending transaction", error);
@@ -186,7 +186,7 @@ const Validator = () => {
               <Box style={{ maxWidth: "600px" }}>
                 <TextField
                   id="moniker"
-                  label="Enter your node moniker"
+                  label="Enter your node moniker (example: AliceNode)"
                   variant="outlined"
                   fullWidth
                   margin="normal"
@@ -198,9 +198,30 @@ const Validator = () => {
                   error={!isMonikerValid && isError}
                   helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
                 />
+              </Box>
+
+              <Typography sx={{ marginTop: 3}}>
+                Fetch your validator public key using the following command (refer&nbsp;
+                <Link
+                  href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  this guide
+                </Link>
+                    )
+              </Typography>
+
+              <Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
+                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+                  {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
+                </pre>
+              </Box>
+
+              <Box sx={{ maxWidth: "600px" }}>
                 <TextField
                   id="pub-key"
-                  label="Enter your public key"
+                  label="Enter your validator public key"
                   variant="outlined"
                   fullWidth
                   margin="normal"

src/pages/ValidatorSuccess.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Box, Link, Typography } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+
+const ValidatorSuccess = () => {
+  const location = useLocation();
+  const { validatorAddress } = location.state as {
+    validatorAddress?: string
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        marginTop: 6,
+        gap: 1,
+      }}
+    >
+      <Typography variant="h5">Validator created successfully</Typography>
+      <Typography sx={{ marginTop: 3}}>
+        You can view your validator details using the following command (Refer&nbsp;
+        <Link
+          href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          this guide
+        </Link>
+            )
+      </Typography>
+      <Box sx={{ backgroundColor: "lightgray", padding: 2, wordWrap: "break-word", marginTop: 2, fontSize: 14}}>
+        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+          {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
+        </pre>
+      </Box>
+    </Box>
+  );
+};
+
+export default ValidatorSuccess;