style: add codeblock and style validator page

2024-08-11 12:32:35 -04:00 · 2024-08-11 12:32:35 -04:00 · 565d1887e0
commit 565d1887e0
parent e6fa6aabd7
5 changed files with 117 additions and 129 deletions
--- a/src/components/CodeBlock.tsx
+++ b/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>
+);
--- a/src/pages/OnboardingSuccess.tsx
+++ b/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,33 +89,17 @@ const OnboardingSuccess = () => {
        <Typography variant="body1">
          Participant onboarded: <br />
        </Typography>
-        <Box
-          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 />
-                Nitro Address: {participant.nitroAddress} <br />
-                Role: {participant.role} <br />
-                KYC ID: {participant.kycId} <br />
-                <br />
-              </div>
-            )}
-          </pre>
-        </Box>
+        <CodeBlock>
+          {participant && (
+            <div>
+              Laconic Address: {participant.cosmosAddress} <br />
+              Nitro Address: {participant.nitroAddress} <br />
+              Role: {participant.role} <br />
+              KYC ID: {participant.kycId} <br />
+              <br />
+            </div>
+          )}
+        </CodeBlock>
        {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
-          announced in various social media channels. In the meantime,
+          For app publishers, await the start of the stage 1 chain, which will
+          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"
--- a/src/pages/SignWithCosmos.tsx
+++ b/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
-          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>
+        <CodeBlock>{JSON.stringify(onboardParticipantMsg, null, 2)} </CodeBlock>

        <Box
          sx={{
--- a/src/pages/SignWithNitroKey.tsx
+++ b/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
-              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>
+            <CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
          )}
          <Box>
            <LoadingButton
--- a/src/pages/Validator.tsx
+++ b/src/pages/Validator.tsx
@ -1,25 +1,34 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { enqueueSnackbar } from 'notistack';
-import { useNavigate } from 'react-router-dom';
-import { MsgCreateValidator } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
+import React, { useEffect, useMemo, useState } from "react";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router-dom";
+import { MsgCreateValidator } from "cosmjs-types/cosmos/staking/v1beta1/tx";

-import { Box, Link, MenuItem, 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 {
+  Box,
+  Link,
+  MenuItem,
+  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 { Participant } from '../types';
+import { useWalletConnectContext } from "../context/WalletConnectContext";
+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 [pubKey, setPubKey] = useState('');
+  const [moniker, setMoniker] = 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: '',
-      validatorAddress: cosmosAddress && toBech32('laconicvaloper', fromBech32(cosmosAddress).data),
+      delegatorAddress: "",
+      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 }}>
-      <Typography variant="h5">Create a validator</Typography>
+    <Layout title="Create a validator">
      <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 }}>
-                Laconic Address: {participant.cosmosAddress} <br />
-                Nitro Address: {participant.nitroAddress} <br />
-                Role: {participant.role} <br />
-                KYC ID: {participant.kycId} <br />
-              </pre>
-            )}
-          </Box>
+          {participant && (
+            <CodeBlock>
+              Laconic Address: {participant.cosmosAddress} <br />
+              Nitro Address: {participant.nitroAddress} <br />
+              Role: {participant.role} <br />
+              KYC ID: {participant.kycId} <br />
+            </CodeBlock>
+          )}

          {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;
+              <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"
@ -213,14 +227,12 @@ const Validator = () => {
                >
                  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>
+              <CodeBlock>
+                {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
+              </CodeBlock>

              <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" }}>
-                <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-                  {JSON.stringify(msgCreateValidator, replacer, 2)}
-                </pre>
-              </Box>
+              <CodeBlock>
+                {JSON.stringify(msgCreateValidator, replacer, 2)}
+              </CodeBlock>
              <Box marginTop={1} marginBottom={1}>
                <LoadingButton
                  variant="contained"
@ -258,7 +272,7 @@ const Validator = () => {
          )}
        </>
      )}
-    </Box>
+    </Layout>
  );
 };