Display tx according to role of onboarded participant

This commit is contained in:
Adw8 2024-08-07 18:59:45 +05:30
parent 8646544060
commit 50b0d345a9
3 changed files with 95 additions and 33 deletions

View File

@ -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,38 +153,66 @@ const CreateValidator = () => {
</MenuItem>
))}
</Select>
{Boolean(cosmosAddress) && (
<div>
{participant === null ? (
<Typography >No participant found</Typography>
) : (
<Typography >Onboarded participant</Typography>
)}
<Box
sx={{
backgroundColor: "lightgray",
backgroundColor: participant === null? "white": "lightgray",
padding: 3,
wordWrap: "break-word",
marginBottom: 3,
}}
>
<pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
{/* TODO: Use replacer for Uint8 array */}
{JSON.stringify(createValidatorMessage, null, 2)}{" "}
</pre>
</Box>
<Box
marginTop={1}
>
<LoadingButton
variant="contained"
onClick={async () => {
await sendTransaction(createValidatorMessage);
}}
loading={isLoading}
>
Send transaction
</LoadingButton>
{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",
padding: 3,
wordWrap: "break-word",
}}
>
<pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
{JSON.stringify(createValidatorMessage, null, 2)}
</pre>
</Box>
<Box marginTop={1}>
<LoadingButton
variant="contained"
onClick={async () => {
await sendTransaction(createValidatorMessage);
}}
loading={isLoading}
>
Send transaction
</LoadingButton>
</Box>
</>
)}
</div>
)}
</Box>
)
}
export default CreateValidator
export default CreateValidator

View File

@ -9,13 +9,7 @@ import { MessageHandler } from "@sumsub/websdk";
import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
import { ENABLE_KYC, SUBSCRIBER_ID_HASH_KEY } 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!

6
src/types.ts Normal file
View File

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