Display tx according to role of onboarded participant

src/pages/CreateValidator.tsx

@@ -1,27 +1,30 @@
 import { Box, MenuItem, Select, Typography } from '@mui/material'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { enqueueSnackbar } from 'notistack';
 import { useNavigate } from 'react-router-dom';
 
 import { MsgCreateValidatorEncodeObject } from '@cosmjs/stargate';
 import { fromBech32, toBech32 } from '@cosmjs/encoding';
 import { LoadingButton } from '@mui/lab';
+import { encodePubkey } from '@cosmjs/proto-signing';
+import { Registry } from '@cerc-io/registry-sdk';
 
 import { useWalletConnectContext } from '../context/WalletConnectContext'
-import { encodePubkey } from '@cosmjs/proto-signing';
+import { Participant } from '../types';
 
 const CreateValidator = () => {
   const {session, signClient} = useWalletConnectContext();
   const navigate = useNavigate();
 
-  // TODO: Handle
   const [cosmosAddress, setCosmosAddress] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [pubkey, setPubkey] = useState('');
+  const [pubkey, setPubkey] = useState('d5aOEYaCIHaDn6kG0tAg699D7sLgAgkJI5reTMl0o5U=');
+  const [participant, setParticipant] = useState<Participant | null>(null);
 
   if (!session){
     navigate("/connect-wallet")
   }
+
   const changePrefix = (address: string, newPrefix: string): string => {
     return toBech32(newPrefix, fromBech32(address).data);
   }
@@ -45,7 +48,8 @@ const CreateValidator = () => {
           },
           minSelfDelegation: "1",
           delegatorAddress: cosmosAddress,
-          validatorAddress: changePrefix(cosmosAddress, "laconicvaloper"),
+          // validatorAddress: changePrefix(cosmosAddress, "laconicvaloper"),
+          validatorAddress: "laconicvaloper1ru0s5tu0cj3xmt8zdfrmz74p0c6lj73nqfpt2q",
           pubkey: encodePubkey({
             type: "tendermint/PubKeyEd25519",
             value: pubkey,
@@ -61,7 +65,6 @@ const CreateValidator = () => {
   const sendTransaction = async (
     transactionMessage: MsgCreateValidatorEncodeObject
   ) => {
-
     try {
       setIsLoading(true);
 
@@ -93,6 +96,34 @@ const CreateValidator = () => {
     }
   };
 
+  useEffect(() => {
+    const registry = new Registry(
+      process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!
+    );
+
+    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);
+      }
+    };
+
+    fetchParticipant();
+  }, [cosmosAddress]);
+
   return (
     <Box
       sx={{
@@ -105,6 +136,9 @@ const CreateValidator = () => {
       <Typography variant="h5">Create a validator</Typography>
       <Typography variant="body1">Select Laconic account:</Typography>
       <Select
+        sx={{
+          marginBottom: 2
+        }}
         labelId="demo-simple-select-label"
         id="demo-simple-select"
         value={cosmosAddress}
@@ -119,8 +153,38 @@ const CreateValidator = () => {
           </MenuItem>
         ))}
       </Select>
+
       {Boolean(cosmosAddress) && (
         <div>
+          {participant === null ? (
+            <Typography >No participant found</Typography>
+          ) : (
+            <Typography >Onboarded participant</Typography>
+          )}
+
+          <Box
+            sx={{
+              backgroundColor: participant === null? "white": "lightgray",
+              padding: 3,
+              wordWrap: "break-word",
+              marginBottom: 3,
+            }}
+          >
+            {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 && participant.role === "validator" && (
+            <>
+              <Typography >Send transaction to chain</Typography>
               <Box
                 sx={{
                   backgroundColor: "lightgray",
@@ -129,13 +193,10 @@ const CreateValidator = () => {
                 }}
               >
                 <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-              {/* TODO: Use replacer for Uint8 array */}
-              {JSON.stringify(createValidatorMessage, null, 2)}{" "}
+                  {JSON.stringify(createValidatorMessage, null, 2)}
                 </pre>
               </Box>
-          <Box
-            marginTop={1}
-          >
+              <Box marginTop={1}>
                 <LoadingButton
                   variant="contained"
                   onClick={async () => {
@@ -146,10 +207,11 @@ const CreateValidator = () => {
                   Send transaction
                 </LoadingButton>
               </Box>
+            </>
+          )}
         </div>
       )}
     </Box>
-
   )
 }
 

src/pages/OnboardingSuccess.tsx

@@ -9,13 +9,7 @@ import { MessageHandler } from "@sumsub/websdk";
 
 import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
 import { ENABLE_KYC } from "../constants";
-
-interface Participant {
-  cosmosAddress: string;
-  nitroAddress: string;
-  role: string;
-  kycId: string;
-}
+import { Participant } from "../types";
 
 const registry = new Registry(
   process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!

src/types.ts

@@ -0,0 +1,6 @@
+export interface Participant {
+    cosmosAddress: string;
+    nitroAddress: string;
+    role: string;
+    kycId: string;
+  }