Use replacer to display public key

src/pages/ConnectWallet.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import {useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import {useLocation, useNavigate, useSearchParams } from "react-router-dom";
 
 import { Button, Box, Container, Typography, colors } from "@mui/material";
 

src/pages/Validator.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
 import { useNavigate } from 'react-router-dom';
+
+import { Box, 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';
 import { EncodeObject, encodePubkey } from '@cosmjs/proto-signing';
 import { Registry } from '@cerc-io/registry-sdk';
+
 import { useWalletConnectContext } from '../context/WalletConnectContext';
 import { Participant } from '../types';
 
@@ -21,27 +23,45 @@ const Validator = () => {
   const [participant, setParticipant] = useState<Participant | null>(null);
   const [isError, setIsError] = useState(false);
 
+  useEffect(() => {
     if (!session) {
-    navigate("/connect-wallet?redirectTo=create-validator");
+      navigate("/connect-wallet?redirectTo=validator");
+    }
+  }, [session, navigate]);
+
+  useEffect(() => {
+    if (!cosmosAddress) {
+      setParticipant(null);
+      return;
     }
 
-  const isMonikerValid = useMemo(()=>{
+    const fetchParticipant = async () => {
-    return moniker.trim().length > 0;
+      const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
-  }, [moniker]);
 
-  const isPubKeyValid = useMemo(()=>{
+      try {
-    return pubKey.length === 44
+        const fetchedParticipant = await registry.getParticipantByAddress(cosmosAddress);
-  }, [pubKey]);
+        if (fetchedParticipant) {
-
+          setParticipant(fetchedParticipant);
-  const msgCreateValidator: MsgCreateValidator = useMemo(() => {
+        } else {
-    let value = '';
+          enqueueSnackbar("Participant not found", { variant: "error" });
-    if (pubKey.length === 44) {
+          setParticipant(null);
-      value = pubKey;
+        }
+      } catch (error) {
+        console.error("Error fetching participant", error);
+        setParticipant(null);
+      }
     };
 
+    fetchParticipant();
+  }, [cosmosAddress]);
+
+  const isMonikerValid = useMemo(() => moniker.trim().length > 0, [moniker]);
+  const isPubKeyValid = useMemo(() => pubKey.length === 44, [pubKey]);
+
+  const msgCreateValidator: MsgCreateValidator = useMemo(() => {
     const encodedPubKey = encodePubkey({
       type: "tendermint/PubKeyEd25519",
-      value,
+      value: pubKey.length === 44 ? pubKey : '',
     });
 
     return {
@@ -70,15 +90,25 @@ const Validator = () => {
 
   const msgCreateValidatorEncodeObject: EncodeObject = {
     typeUrl: '/cosmos.staking.v1beta1.MsgCreateValidator',
-    value: MsgCreateValidator.toJSON(msgCreateValidator)
+    value: MsgCreateValidator.toJSON(msgCreateValidator),
   };
 
-  const sendTransaction = async (transactionMessage: EncodeObject) => {
+  const sendTransaction = async () => {
-    try {
+    if (
-      setIsLoading(true);
+      !isMonikerValid ||
+      !isPubKeyValid ||
+      !msgCreateValidator.validatorAddress
+    ) {
+      setIsError(true);
+      return;
+    }
 
-      const params = { transactionMessage, signer: cosmosAddress };
+    setIsLoading(true);
-      const responseFromWallet = await signClient!.request<{ code: number }>({
+    enqueueSnackbar("View and sign the message from your Laconic Wallet", { variant: "info" });
+
+    try {
+      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}`,
         request: {
@@ -86,61 +116,34 @@ const Validator = () => {
           params,
         },
       });
-      if (responseFromWallet.code !== 0) {
+
+      if (response.code !== 0) {
         enqueueSnackbar("Transaction not sent", { variant: "error" });
       } else {
-        navigate("/onboarding-success", {
+        navigate("/onboarding-success", { state: { cosmosAddress } });
-          state: { cosmosAddress },
-        });
       }
     } catch (error) {
-      console.error(error);
+      console.error("Error sending transaction", error);
       enqueueSnackbar("Error in sending transaction", { variant: "error" });
     } finally {
       setIsLoading(false);
     }
   };
 
-  useEffect(() => {
+  const replacer = (key: string, value: any): any => {
-    const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
+    if (value instanceof Uint8Array) {
-
+      return Buffer.from(value).toString('hex');
-    const fetchParticipant = async () => {
-      try {
-        if (!cosmosAddress) {
-          setParticipant(null);
-          return;
-        }
-        const fetchedParticipant: Participant = await registry.getParticipantByAddress(cosmosAddress);
-        if (!fetchedParticipant) {
-          enqueueSnackbar("Participant not found", { variant: "error" });
-          setParticipant(null);
-          return;
-        }
-        setParticipant(fetchedParticipant);
-      } catch (error) {
-        console.error("Error fetching participant", error);
-        setParticipant(null);
     }
+    return value;
   };
 
-    fetchParticipant();
-  }, [cosmosAddress]);
-
   return (
-    <Box
+    <Box sx={{ display: "flex", flexDirection: "column", marginTop: 6, gap: 1 }}>
-      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 }}
-        labelId="demo-simple-select-label"
+        id="cosmos-address-select"
-        id="demo-simple-select"
         value={cosmosAddress}
         onChange={(e) => setCosmosAddress(e.target.value)}
         style={{ maxWidth: "600px", display: "block" }}
@@ -153,16 +156,16 @@ const Validator = () => {
       </Select>
 
       {Boolean(cosmosAddress) && (
-        <div>
+        <>
-          {participant === null ? (
+          {participant ? (
-            <Typography>No participant found</Typography>
-          ) : (
             <Typography>Onboarded participant</Typography>
+          ) : (
+            <Typography>No participant found</Typography>
           )}
 
           <Box
             sx={{
-              backgroundColor: participant === null ? "white" : "lightgray",
+              backgroundColor: participant ? "lightgray" : "white",
               padding: 3,
               wordWrap: "break-word",
               marginBottom: 3,
@@ -170,16 +173,16 @@ const Validator = () => {
           >
             {participant && (
               <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-                <div>
                 Cosmos Address: {participant.cosmosAddress} <br />
                 Nitro Address: {participant.nitroAddress} <br />
                 Role: {participant.role} <br />
                 KYC ID: {participant.kycId} <br />
-                </div>
               </pre>
             )}
           </Box>
 
+          {participant?.role === "validator" && (
+            <>
               <Box style={{ maxWidth: "600px" }}>
                 <TextField
                   id="moniker"
@@ -190,9 +193,9 @@ const Validator = () => {
                   value={moniker}
                   onChange={(e) => {
                     setIsError(false);
-                setMoniker(e.target.value)
+                    setMoniker(e.target.value);
                   }}
-              error={!isMonikerValid && isError }
+                  error={!isMonikerValid && isError}
                   helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
                 />
                 <TextField
@@ -204,41 +207,22 @@ const Validator = () => {
                   value={pubKey}
                   onChange={(e) => {
                     setIsError(false);
-                setPubKey(e.target.value)
+                    setPubKey(e.target.value);
                   }}
                   error={!isPubKeyValid && isError}
-              helperText={!isPubKeyValid ? "Public key must be 44 characters" : ""}
+                  helperText={!isPubKeyValid && isError ? "Public key must be 44 characters" : ""}
                 />
               </Box>
-
-          <>
               <Typography>Send transaction to chain</Typography>
-            <Box
+              <Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
-              sx={{
-                backgroundColor: "lightgray",
-                padding: 3,
-                wordWrap: "break-word",
-              }}
-            >
                 <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-                {JSON.stringify(msgCreateValidator, null, 2)}
+                  {JSON.stringify(msgCreateValidator, replacer, 2)}
                 </pre>
               </Box>
               <Box marginTop={1} marginBottom={1}>
                 <LoadingButton
                   variant="contained"
-                onClick={async () => {
+                  onClick={sendTransaction}
-                  console.log(msgCreateValidatorEncodeObject);
-                  if (
-                    msgCreateValidator.pubkey?.value?.length !== 34 ||
-                    msgCreateValidator.description.moniker.length === 0 ||
-                    msgCreateValidator.validatorAddress.length === 0
-                  ) {
-                    setIsError(true);
-                    return;
-                  }
-                  await sendTransaction(msgCreateValidatorEncodeObject);
-                }}
                   loading={isLoading}
                   disabled={isError}
                 >
@@ -246,7 +230,8 @@ const Validator = () => {
                 </LoadingButton>
               </Box>
             </>
-        </div>
+          )}
+        </>
       )}
     </Box>
   );