From 83fcfb5b862f0e567ecd4d843714de3087528cae Mon Sep 17 00:00:00 2001
From: Adw8 <adwaitgharpure@gmail.com>
Date: Fri, 9 Aug 2024 11:33:11 +0530
Subject: [PATCH] Add page for successful validator creation

---
 src/App.tsx                    |  5 ++++
 src/pages/Validator.tsx        | 29 +++++++++++++++++++----
 src/pages/ValidatorSuccess.tsx | 42 ++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/ValidatorSuccess.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e82836c..d34fe3a 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/pages/Validator.tsx b/src/pages/Validator.tsx
index f25d4e6..0b887c7 100644
--- a/src/pages/Validator.tsx
+++ b/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"
diff --git a/src/pages/ValidatorSuccess.tsx b/src/pages/ValidatorSuccess.tsx
new file mode 100644
index 0000000..02f0ffa
--- /dev/null
+++ b/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