style: add codeblock and style validator page

src/components/CodeBlock.tsx

@@ -0,0 +1,25 @@
+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,6 +15,7 @@ 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!);
 
@@ -88,22 +89,7 @@ const OnboardingSuccess = () => {
         <Typography variant="body1">
           Participant onboarded: <br />
         </Typography>
-        <Box
+        <CodeBlock>
-          sx={{
-            backgroundColor: "lightgray",
-            padding: 3,
-            wordWrap: "break-word",
-            marginBottom: 6,
-          }}
-        >
-          <pre
-            style={{
-              whiteSpace: "pre-wrap",
-              margin: 0,
-              backgroundColor: "#48474F",
-              color: "#FBFBFB",
-            }}
-          >
           {participant && (
             <div>
               Laconic Address: {participant.cosmosAddress} <br />
@@ -113,8 +99,7 @@ const OnboardingSuccess = () => {
               <br />
             </div>
           )}
-          </pre>
+        </CodeBlock>
-        </Box>
         {ENABLE_KYC ? (
           <Box>
             <Typography variant="h5">KYC Status</Typography>
@@ -148,8 +133,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 be
+          For app publishers, await the start of the stage 1 chain, which will
-          announced in various social media channels. In the meantime,
+          be 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,6 +14,7 @@ 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();
@@ -194,26 +195,7 @@ const SignWithCosmos = () => {
         <Divider flexItem sx={{ my: 2 }} />
         <Typography variant="body1">Onboarding message:</Typography>
 
-        <Box
+        <CodeBlock>{JSON.stringify(onboardParticipantMsg, null, 2)} </CodeBlock>
-          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,6 +10,7 @@ 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();
@@ -142,26 +143,7 @@ const SignWithNitroKey = () => {
           </Select>
 
           {Boolean(ethAddress) && Boolean(cosmosAddress) && (
-            <Box
+            <CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
-              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,25 +1,34 @@
-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 { Box, Link, MenuItem, Select, TextField, Typography } from '@mui/material';
+import {
-import { fromBech32, toBech32 } from '@cosmjs/encoding';
+  Box,
-import { LoadingButton } from '@mui/lab';
+  Link,
-import { EncodeObject, encodePubkey } from '@cosmjs/proto-signing';
+  MenuItem,
-import { Registry } from '@cerc-io/registry-sdk';
+  Select,
+  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);
 
@@ -40,10 +49,13 @@ const Validator = () => {
     }
 
     const fetchParticipant = async () => {
-      const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
+      const registry = new Registry(
+        process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!,
+      );
 
       try {
-        const fetchedParticipant = await registry.getParticipantByAddress(cosmosAddress);
+        const fetchedParticipant =
+          await registry.getParticipantByAddress(cosmosAddress);
         if (fetchedParticipant) {
           setParticipant(fetchedParticipant);
         } else {
@@ -65,7 +77,7 @@ const Validator = () => {
   const msgCreateValidator: MsgCreateValidator = useMemo(() => {
     const encodedPubKey = encodePubkey({
       type: "tendermint/PubKeyEd25519",
-      value: pubKey.length === 44 ? pubKey : '',
+      value: pubKey.length === 44 ? pubKey : "",
     });
 
     return {
@@ -82,8 +94,10 @@ const Validator = () => {
         rate: "100000000000000000", // 0.1
       },
       minSelfDelegation: "1",
-      delegatorAddress: '',
+      delegatorAddress: "",
-      validatorAddress: cosmosAddress && toBech32('laconicvaloper', fromBech32(cosmosAddress).data),
+      validatorAddress:
+        cosmosAddress &&
+        toBech32("laconicvaloper", fromBech32(cosmosAddress).data),
       pubkey: encodedPubKey,
       value: {
         amount: process.env.REACT_APP_STAKING_AMOUNT!,
@@ -93,7 +107,7 @@ const Validator = () => {
   }, [cosmosAddress, pubKey, moniker]);
 
   const msgCreateValidatorEncodeObject: EncodeObject = {
-    typeUrl: '/cosmos.staking.v1beta1.MsgCreateValidator',
+    typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator",
     value: MsgCreateValidator.toJSON(msgCreateValidator),
   };
 
@@ -108,10 +122,15 @@ const Validator = () => {
     }
 
     setIsLoading(true);
-    enqueueSnackbar("View and sign the message from your Laconic Wallet", { variant: "info" });
+    enqueueSnackbar("View and sign the message from your Laconic Wallet", {
+      variant: "info",
+    });
 
     try {
-      const params = { transactionMessage: msgCreateValidatorEncodeObject, signer: cosmosAddress };
+      const params = {
+        transactionMessage: msgCreateValidatorEncodeObject,
+        signer: cosmosAddress,
+      };
       const response = await signClient!.request<{ code: number }>({
         topic: session!.topic,
         chainId: `cosmos:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
@@ -124,7 +143,9 @@ const Validator = () => {
       if (response.code !== 0) {
         throw new Error("Transaction not sent");
       } else {
-        navigate("/validator-success", { state: { validatorAddress: msgCreateValidator.validatorAddress, } });
+        navigate("/validator-success", {
+          state: { validatorAddress: msgCreateValidator.validatorAddress },
+        });
       }
     } catch (error) {
       console.error("Error sending transaction", error);
@@ -134,16 +155,15 @@ 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 (
-    <Box sx={{ display: "flex", flexDirection: "column", marginTop: 6, gap: 1 }}>
+    <Layout title="Create a validator">
-      <Typography variant="h5">Create a validator</Typography>
       <Typography variant="body1">Select Laconic account:</Typography>
       <Select
         sx={{ marginBottom: 2 }}
@@ -167,23 +187,14 @@ const Validator = () => {
             <Typography>No participant found</Typography>
           )}
 
-          <Box
-            sx={{
-              backgroundColor: participant ? "lightgray" : "white",
-              padding: 3,
-              wordWrap: "break-word",
-              marginBottom: 3,
-            }}
-          >
           {participant && (
-              <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+            <CodeBlock>
               Laconic Address: {participant.cosmosAddress} <br />
               Nitro Address: {participant.nitroAddress} <br />
               Role: {participant.role} <br />
               KYC ID: {participant.kycId} <br />
-              </pre>
+            </CodeBlock>
           )}
-          </Box>
 
           {participant?.role === "validator" && (
             <>
@@ -200,12 +211,15 @@ const Validator = () => {
                     setMoniker(e.target.value);
                   }}
                   error={!isMonikerValid && isError}
-                  helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
+                  helperText={
+                    !isMonikerValid && isError ? "Moniker is required" : ""
+                  }
                 />
               </Box>
 
               <Typography sx={{ marginTop: 3 }}>
-                Fetch your validator public key using the following command (refer&nbsp;
+                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"
@@ -216,11 +230,9 @@ const Validator = () => {
                 )
               </Typography>
 
-              <Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
+              <CodeBlock>
-                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
                 {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
-                </pre>
+              </CodeBlock>
-              </Box>
 
               <Box sx={{ maxWidth: "600px" }}>
                 <TextField
@@ -235,15 +247,17 @@ const Validator = () => {
                     setPubKey(e.target.value);
                   }}
                   error={!isPubKeyValid && isError}
-                  helperText={!isPubKeyValid && isError ? "Public key must be 44 characters" : ""}
+                  helperText={
+                    !isPubKeyValid && isError
+                      ? "Public key must be 44 characters"
+                      : ""
+                  }
                 />
               </Box>
               <Typography>Send transaction to chain</Typography>
-              <Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
+              <CodeBlock>
-                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
                 {JSON.stringify(msgCreateValidator, replacer, 2)}
-                </pre>
+              </CodeBlock>
-              </Box>
               <Box marginTop={1} marginBottom={1}>
                 <LoadingButton
                   variant="contained"
@@ -258,7 +272,7 @@ const Validator = () => {
           )}
         </>
       )}
-    </Box>
+    </Layout>
   );
 };