src/components/CodeBlock.tsx

@@ -1,25 +0,0 @@
-import { Box } from "@mui/material";
-import React, { PropsWithChildren } from "react";
-
-export const CodeBlock: React.FC<PropsWithChildren> = ({ children }) => (
-  <Box
-    sx={{
-      backgroundColor: "#48474F",
-      padding: 3,
-      wordWrap: "break-word",
-      mt: 1,
-      borderRadius: 1,
-    }}
-  >
-    <pre
-      style={{
-        whiteSpace: "pre-wrap",
-        margin: 0,
-        backgroundColor: "#48474F",
-        color: "#FBFBFB",
-      }}
-    >
-      {children}
-    </pre>
-  </Box>
-);

src/pages/OnboardingSuccess.tsx

@@ -15,7 +15,6 @@ import {
 } from "../utils/sumsub";
 import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Participant } from "../types";
-import { CodeBlock } from "../components/CodeBlock";
 
 const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
 
@@ -89,17 +88,33 @@ const OnboardingSuccess = () => {
         <Typography variant="body1">
           Participant onboarded: <br />
         </Typography>
-        <CodeBlock>
+        <Box
-          {participant && (
+          sx={{
-            <div>
+            backgroundColor: "lightgray",
-              Laconic Address: {participant.cosmosAddress} <br />
+            padding: 3,
-              Nitro Address: {participant.nitroAddress} <br />
+            wordWrap: "break-word",
-              Role: {participant.role} <br />
+            marginBottom: 6,
-              KYC ID: {participant.kycId} <br />
+          }}
-              <br />
+        >
-            </div>
+          <pre
-          )}
+            style={{
-        </CodeBlock>
+              whiteSpace: "pre-wrap",
+              margin: 0,
+              backgroundColor: "#48474F",
+              color: "#FBFBFB",
+            }}
+          >
+            {participant && (
+              <div>
+                Laconic Address: {participant.cosmosAddress} <br />
+                Nitro Address: {participant.nitroAddress} <br />
+                Role: {participant.role} <br />
+                KYC ID: {participant.kycId} <br />
+                <br />
+              </div>
+            )}
+          </pre>
+        </Box>
         {ENABLE_KYC ? (
           <Box>
             <Typography variant="h5">KYC Status</Typography>
@@ -133,8 +148,8 @@ const OnboardingSuccess = () => {
         padding={5}
       >
         <Typography variant="body1" gutterBottom sx={{ p: 2 }}>
-          For app publishers, await the start of the stage 1 chain, which will
+          For app publishers, await the start of the stage 1 chain, which will be
-          be announced in various social media channels. In the meantime,
+          announced in various social media channels. In the meantime,
           familiarize yourself with the{" "}
           <a
             href="https://github.com/hyphacoop/loro-testnet/blob/main/docs/publishing-webapps.md"

src/pages/SignWithCosmos.tsx

@@ -14,7 +14,6 @@ import { useWalletConnectContext } from "../context/WalletConnectContext";
 import SelectRoleCard, { Role } from "../components/SelectRoleCard";
 import { HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Layout } from "../layout/Layout";
-import { CodeBlock } from "../components/CodeBlock";
 
 const SignWithCosmos = () => {
   const { session, signClient } = useWalletConnectContext();
@@ -195,7 +194,26 @@ const SignWithCosmos = () => {
         <Divider flexItem sx={{ my: 2 }} />
         <Typography variant="body1">Onboarding message:</Typography>
 
-        <CodeBlock>{JSON.stringify(onboardParticipantMsg, null, 2)} </CodeBlock>
+        <Box
+          sx={{
+            backgroundColor: "#48474F",
+            padding: 3,
+            wordWrap: "break-word",
+            mt: 1,
+            borderRadius: 1,
+          }}
+        >
+          <pre
+            style={{
+              whiteSpace: "pre-wrap",
+              margin: 0,
+              backgroundColor: "#48474F",
+              color: "#FBFBFB",
+            }}
+          >
+            {JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
+          </pre>
+        </Box>
 
         <Box
           sx={{

src/pages/SignWithNitroKey.tsx

@@ -10,7 +10,6 @@ import { utf8ToHex } from "@walletconnect/encoding";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Layout } from "../layout/Layout";
-import { CodeBlock } from "../components/CodeBlock";
 
 const SignWithNitroKey = () => {
   const { session, signClient, isSessionLoading } = useWalletConnectContext();
@@ -143,7 +142,26 @@ const SignWithNitroKey = () => {
           </Select>
 
           {Boolean(ethAddress) && Boolean(cosmosAddress) && (
-            <CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
+            <Box
+              sx={{
+                backgroundColor: "#48474F",
+                padding: 3,
+                wordWrap: "break-word",
+                mt: 1,
+                borderRadius: 1,
+              }}
+            >
+              <pre
+                style={{
+                  whiteSpace: "pre-wrap",
+                  margin: 0,
+                  backgroundColor: "#48474F",
+                  color: "#FBFBFB",
+                }}
+              >
+                {canonicalStringify(message, null, 2)}{" "}
+              </pre>
+            </Box>
           )}
           <Box>
             <LoadingButton

src/pages/Validator.tsx

@@ -1,34 +1,25 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from 'react';
-import { enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from 'notistack';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
-import { MsgCreateValidator } from "cosmjs-types/cosmos/staking/v1beta1/tx";
+import { MsgCreateValidator } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
 
-import {
+import { Box, Link, MenuItem, Select, TextField, Typography } from '@mui/material';
-  Box,
+import { fromBech32, toBech32 } from '@cosmjs/encoding';
-  Link,
+import { LoadingButton } from '@mui/lab';
-  MenuItem,
+import { EncodeObject, encodePubkey } from '@cosmjs/proto-signing';
-  Select,
+import { Registry } from '@cerc-io/registry-sdk';
-  TextField,
-  Typography,
-} from "@mui/material";
-import { fromBech32, toBech32 } from "@cosmjs/encoding";
-import { LoadingButton } from "@mui/lab";
-import { EncodeObject, encodePubkey } from "@cosmjs/proto-signing";
-import { Registry } from "@cerc-io/registry-sdk";
 
-import { useWalletConnectContext } from "../context/WalletConnectContext";
+import { useWalletConnectContext } from '../context/WalletConnectContext';
-import { Participant } from "../types";
+import { Participant } from '../types';
-import { Layout } from "../layout/Layout";
-import { CodeBlock } from "../components/CodeBlock";
 
 const Validator = () => {
   const { session, signClient, isSessionLoading } = useWalletConnectContext();
   const navigate = useNavigate();
 
-  const [cosmosAddress, setCosmosAddress] = useState("");
+  const [cosmosAddress, setCosmosAddress] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [moniker, setMoniker] = useState("");
+  const [moniker, setMoniker] = useState('');
-  const [pubKey, setPubKey] = useState("");
+  const [pubKey, setPubKey] = useState('');
   const [participant, setParticipant] = useState<Participant | null>(null);
   const [isError, setIsError] = useState(false);
 
@@ -49,13 +40,10 @@ const Validator = () => {
     }
 
     const fetchParticipant = async () => {
-      const registry = new Registry(
+      const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
-        process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!,
-      );
 
       try {
-        const fetchedParticipant =
+        const fetchedParticipant = await registry.getParticipantByAddress(cosmosAddress);
-          await registry.getParticipantByAddress(cosmosAddress);
         if (fetchedParticipant) {
           setParticipant(fetchedParticipant);
         } else {
@@ -77,7 +65,7 @@ const Validator = () => {
   const msgCreateValidator: MsgCreateValidator = useMemo(() => {
     const encodedPubKey = encodePubkey({
       type: "tendermint/PubKeyEd25519",
-      value: pubKey.length === 44 ? pubKey : "",
+      value: pubKey.length === 44 ? pubKey : '',
     });
 
     return {
@@ -94,10 +82,8 @@ const Validator = () => {
         rate: "100000000000000000", // 0.1
       },
       minSelfDelegation: "1",
-      delegatorAddress: "",
+      delegatorAddress: '',
-      validatorAddress:
+      validatorAddress: cosmosAddress && toBech32('laconicvaloper', fromBech32(cosmosAddress).data),
-        cosmosAddress &&
-        toBech32("laconicvaloper", fromBech32(cosmosAddress).data),
       pubkey: encodedPubKey,
       value: {
         amount: process.env.REACT_APP_STAKING_AMOUNT!,
@@ -107,7 +93,7 @@ const Validator = () => {
   }, [cosmosAddress, pubKey, moniker]);
 
   const msgCreateValidatorEncodeObject: EncodeObject = {
-    typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator",
+    typeUrl: '/cosmos.staking.v1beta1.MsgCreateValidator',
     value: MsgCreateValidator.toJSON(msgCreateValidator),
   };
 
@@ -122,15 +108,10 @@ const Validator = () => {
     }
 
     setIsLoading(true);
-    enqueueSnackbar("View and sign the message from your Laconic Wallet", {
+    enqueueSnackbar("View and sign the message from your Laconic Wallet", { variant: "info" });
-      variant: "info",
-    });
 
     try {
-      const params = {
+      const params = { transactionMessage: msgCreateValidatorEncodeObject, signer: cosmosAddress };
-        transactionMessage: msgCreateValidatorEncodeObject,
-        signer: cosmosAddress,
-      };
       const response = await signClient!.request<{ code: number }>({
         topic: session!.topic,
         chainId: `cosmos:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
@@ -143,9 +124,7 @@ const Validator = () => {
       if (response.code !== 0) {
         throw new Error("Transaction not sent");
       } else {
-        navigate("/validator-success", {
+        navigate("/validator-success", { state: { validatorAddress: msgCreateValidator.validatorAddress, } });
-          state: { validatorAddress: msgCreateValidator.validatorAddress },
-        });
       }
     } catch (error) {
       console.error("Error sending transaction", error);
@@ -155,15 +134,16 @@ const Validator = () => {
     }
   };
 
-  const replacer = (_key: string, value: any): any => {
+  const replacer = (key: string, value: any): any => {
     if (value instanceof Uint8Array) {
-      return Buffer.from(value).toString("hex");
+      return Buffer.from(value).toString('hex');
     }
     return value;
   };
 
   return (
-    <Layout title="Create a validator">
+    <Box sx={{ display: "flex", flexDirection: "column", marginTop: 6, gap: 1 }}>
+      <Typography variant="h5">Create a validator</Typography>
       <Typography variant="body1">Select Laconic account:</Typography>
       <Select
         sx={{ marginBottom: 2 }}
@@ -187,14 +167,23 @@ const Validator = () => {
             <Typography>No participant found</Typography>
           )}
 
-          {participant && (
+          <Box
-            <CodeBlock>
+            sx={{
-              Laconic Address: {participant.cosmosAddress} <br />
+              backgroundColor: participant ? "lightgray" : "white",
-              Nitro Address: {participant.nitroAddress} <br />
+              padding: 3,
-              Role: {participant.role} <br />
+              wordWrap: "break-word",
-              KYC ID: {participant.kycId} <br />
+              marginBottom: 3,
-            </CodeBlock>
+            }}
-          )}
+          >
+            {participant && (
+              <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+                Laconic Address: {participant.cosmosAddress} <br />
+                Nitro Address: {participant.nitroAddress} <br />
+                Role: {participant.role} <br />
+                KYC ID: {participant.kycId} <br />
+              </pre>
+            )}
+          </Box>
 
           {participant?.role === "validator" && (
             <>
@@ -211,15 +200,12 @@ const Validator = () => {
                     setMoniker(e.target.value);
                   }}
                   error={!isMonikerValid && isError}
-                  helperText={
+                  helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
-                    !isMonikerValid && isError ? "Moniker is required" : ""
-                  }
                 />
               </Box>
 
-              <Typography sx={{ marginTop: 3 }}>
+              <Typography sx={{ marginTop: 3}}>
-                Fetch your validator public key using the following command
+                Fetch your validator public key using the following command (refer&nbsp;
-                (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"
@@ -227,12 +213,14 @@ const Validator = () => {
                 >
                   this guide
                 </Link>
-                )
+                    )
               </Typography>
 
-              <CodeBlock>
+              <Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
-                {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
+                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-              </CodeBlock>
+                  {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
+                </pre>
+              </Box>
 
               <Box sx={{ maxWidth: "600px" }}>
                 <TextField
@@ -247,17 +235,15 @@ const Validator = () => {
                     setPubKey(e.target.value);
                   }}
                   error={!isPubKeyValid && isError}
-                  helperText={
+                  helperText={!isPubKeyValid && isError ? "Public key must be 44 characters" : ""}
-                    !isPubKeyValid && isError
-                      ? "Public key must be 44 characters"
-                      : ""
-                  }
                 />
               </Box>
               <Typography>Send transaction to chain</Typography>
-              <CodeBlock>
+              <Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
-                {JSON.stringify(msgCreateValidator, replacer, 2)}
+                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-              </CodeBlock>
+                  {JSON.stringify(msgCreateValidator, replacer, 2)}
+                </pre>
+              </Box>
               <Box marginTop={1} marginBottom={1}>
                 <LoadingButton
                   variant="contained"
@@ -272,7 +258,7 @@ const Validator = () => {
           )}
         </>
       )}
-    </Layout>
+    </Box>
   );
 };
 

src/pages/ValidatorSuccess.tsx

@@ -1,21 +1,26 @@
-import React from "react";
+import React from 'react';
-import { useLocation } from "react-router-dom";
+import { useLocation } from 'react-router-dom';
 
-import { Link, Typography } from "@mui/material";
+import { Box, Link, Typography } from '@mui/material';
-import { Layout } from "../layout/Layout";
-import { CodeBlock } from "../components/CodeBlock";
 
 const ValidatorSuccess = () => {
   const location = useLocation();
   const { validatorAddress } = location.state as {
-    validatorAddress?: string;
+    validatorAddress?: string
   };
 
   return (
-    <Layout title="Validator created successfully">
+    <Box
-      <Typography sx={{ marginTop: 3 }}>
+      sx={{
-        You can view your validator details using the following command
+        display: "flex",
-        (Refer&nbsp;
+        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"
@@ -23,12 +28,14 @@ const ValidatorSuccess = () => {
         >
           this guide
         </Link>
-        )
+            )
       </Typography>
-      <CodeBlock>
+      <Box sx={{ backgroundColor: "lightgray", padding: 2, wordWrap: "break-word", marginTop: 2, fontSize: 14}}>
-        {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
+        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-      </CodeBlock>
+          {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
-    </Layout>
+        </pre>
+      </Box>
+    </Box>
   );
 };