From eb9896df87cde365480b5f301e7fcb235f0819ec Mon Sep 17 00:00:00 2001 From: Adw8 Date: Fri, 9 Aug 2024 11:33:11 +0530 Subject: [PATCH] Add page for successful validator creation --- src/App.tsx | 5 +++ src/components/TermsAndConditionsBox.tsx | 10 +++++- src/pages/ConnectWallet.tsx | 2 +- src/pages/LandingPage.tsx | 8 +++-- src/pages/SignWithNitroKey.tsx | 7 ++-- src/pages/Validator.tsx | 29 +++++++++++++--- src/pages/ValidatorSuccess.tsx | 42 ++++++++++++++++++++++++ 7 files changed, 92 insertions(+), 11 deletions(-) create mode 100644 src/pages/ValidatorSuccess.tsx diff --git a/src/App.tsx b/src/App.tsx index 6821a40..c31c658 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={} > + } + > } /> diff --git a/src/components/TermsAndConditionsBox.tsx b/src/components/TermsAndConditionsBox.tsx index 30685b9..18004b9 100644 --- a/src/components/TermsAndConditionsBox.tsx +++ b/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(); function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); + if (onLoad){ + onLoad(); + }; } return ( diff --git a/src/pages/ConnectWallet.tsx b/src/pages/ConnectWallet.tsx index 7d22870..fbe8115 100644 --- a/src/pages/ConnectWallet.tsx +++ b/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) { diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 57b2e8f..4ec78e6 100644 --- a/src/pages/LandingPage.tsx +++ b/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. - + {setIsDisabled(false);}} /> - diff --git a/src/pages/SignWithNitroKey.tsx b/src/pages/SignWithNitroKey.tsx index 73349c2..8d610e3 100644 --- a/src/pages/SignWithNitroKey.tsx +++ b/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) { 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 = () => { { error={!isMonikerValid && isError} helperText={!isMonikerValid && isError ? "Moniker is required" : ""} /> + + + + Fetch your validator public key using the following command (refer  + + this guide + + ) + + + + 
+                  {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
+
+ + + { + const location = useLocation(); + const { validatorAddress } = location.state as { + validatorAddress?: string + }; + + return ( + + Validator created successfully + + You can view your validator details using the following command (Refer  + + this guide + + ) + + + 
+          {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
+
+ + + ); +}; + +export default ValidatorSuccess;