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

View File

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