Use replacer to display public key
This commit is contained in:
Adw8
parent
30300b6cca
commit
79f0ff8b6c
@ -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";
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
if (!session) {
|
||||
navigate("/connect-wallet?redirectTo=create-validator");
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!session) {
|
||||
navigate("/connect-wallet?redirectTo=validator");
|
||||
}
|
||||
}, [session, navigate]);
|
||||
|
||||
const isMonikerValid = useMemo(()=>{
|
||||
return moniker.trim().length > 0;
|
||||
}, [moniker]);
|
||||
useEffect(() => {
|
||||
if (!cosmosAddress) {
|
||||
setParticipant(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const isPubKeyValid = useMemo(()=>{
|
||||
return pubKey.length === 44
|
||||
}, [pubKey]);
|
||||
const fetchParticipant = async () => {
|
||||
const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
|
||||
|
||||
const msgCreateValidator: MsgCreateValidator = useMemo(() => {
|
||||
let value = '';
|
||||
if (pubKey.length === 44) {
|
||||
value = pubKey;
|
||||
try {
|
||||
const fetchedParticipant = await registry.getParticipantByAddress(cosmosAddress);
|
||||
if (fetchedParticipant) {
|
||||
setParticipant(fetchedParticipant);
|
||||
} else {
|
||||
enqueueSnackbar("Participant not found", { variant: "error" });
|
||||
setParticipant(null);
|
||||
}
|
||||
} 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) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const sendTransaction = async () => {
|
||||
if (
|
||||
!isMonikerValid ||
|
||||
!isPubKeyValid ||
|
||||
!msgCreateValidator.validatorAddress
|
||||
) {
|
||||
setIsError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const params = { transactionMessage, signer: cosmosAddress };
|
||||
const responseFromWallet = await signClient!.request<{ code: number }>({
|
||||
setIsLoading(true);
|
||||
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", {
|
||||
state: { cosmosAddress },
|
||||
});
|
||||
navigate("/onboarding-success", { 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 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]);
|
||||
const replacer = (key: string, value: any): any => {
|
||||
if (value instanceof Uint8Array) {
|
||||
return Buffer.from(value).toString('hex');
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: 6,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box 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="demo-simple-select"
|
||||
id="cosmos-address-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 ? (
|
||||
<Typography>No participant found</Typography>
|
||||
) : (
|
||||
<>
|
||||
{participant ? (
|
||||
<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,83 +173,65 @@ 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>
|
||||
Cosmos Address: {participant.cosmosAddress} <br />
|
||||
Nitro Address: {participant.nitroAddress} <br />
|
||||
Role: {participant.role} <br />
|
||||
KYC ID: {participant.kycId} <br />
|
||||
</pre>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box style={{ maxWidth: "600px" }}>
|
||||
<TextField
|
||||
id="moniker"
|
||||
label="Enter your node moniker"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={moniker}
|
||||
onChange={(e) => {
|
||||
setIsError(false);
|
||||
setMoniker(e.target.value)
|
||||
}}
|
||||
error={!isMonikerValid && isError }
|
||||
helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
|
||||
/>
|
||||
<TextField
|
||||
id="pub-key"
|
||||
label="Enter your public key"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={pubKey}
|
||||
onChange={(e) => {
|
||||
setIsError(false);
|
||||
setPubKey(e.target.value)
|
||||
}}
|
||||
error={!isPubKeyValid && isError}
|
||||
helperText={!isPubKeyValid ? "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, null, 2)}
|
||||
</pre>
|
||||
</Box>
|
||||
<Box marginTop={1} marginBottom={1}>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
onClick={async () => {
|
||||
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}
|
||||
>
|
||||
Send transaction
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</>
|
||||
</div>
|
||||
{participant?.role === "validator" && (
|
||||
<>
|
||||
<Box style={{ maxWidth: "600px" }}>
|
||||
<TextField
|
||||
id="moniker"
|
||||
label="Enter your node moniker"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={moniker}
|
||||
onChange={(e) => {
|
||||
setIsError(false);
|
||||
setMoniker(e.target.value);
|
||||
}}
|
||||
error={!isMonikerValid && isError}
|
||||
helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
|
||||
/>
|
||||
<TextField
|
||||
id="pub-key"
|
||||
label="Enter your public key"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={pubKey}
|
||||
onChange={(e) => {
|
||||
setIsError(false);
|
||||
setPubKey(e.target.value);
|
||||
}}
|
||||
error={!isPubKeyValid && isError}
|
||||
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>
|
||||
<Box marginTop={1} marginBottom={1}>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
onClick={sendTransaction}
|
||||
loading={isLoading}
|
||||
disabled={isError}
|
||||
>
|
||||
Send transaction
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user