Display validator message on page

This commit is contained in:
Adw8 2024-08-07 17:22:34 +05:30
parent 000d4ff846
commit 8646544060
4 changed files with 137 additions and 5 deletions

View File

@ -3,7 +3,8 @@ REACT_APP_ETHEREUM_MAINNET_CHAIN_ID=1
REACT_APP_LACONICD_CHAIN_ID=laconic_9000-1
REACT_APP_REGISTRY_GQL_ENDPOINT=http://localhost:9473/api
REACT_APP_LACONICD_RPC_ENDPOINT=http://localhost:26657
REACT_APP_LACONICD_DENOM=alnt
REACT_APP_FAUCET_ENDPOINT=http://localhost:4000
REACT_APP_WALLET_META_URL=http://localhost:3000
REACT_APP_SUMSUB_API_ENDPOINT=
REACT_APP_STAKING_AMOUNT=1000000000000000
REACT_APP_LACONICD_DENOM=alnt

View File

@ -4,6 +4,8 @@
"private": true,
"dependencies": {
"@cerc-io/registry-sdk": "^0.2.5",
"@cosmjs/encoding": "^0.32.4",
"@cosmjs/proto-signing": "^0.32.4",
"@cosmjs/stargate": "^0.32.4",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",

View File

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

View File

@ -1,14 +1,98 @@
import { Box, MenuItem, Select, Typography } from '@mui/material'
import React from 'react'
import { useWalletConnectContext } from '../context/WalletConnectContext'
import React, { 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 { useWalletConnectContext } from '../context/WalletConnectContext'
import { encodePubkey } from '@cosmjs/proto-signing';
const CreateValidator = () => {
const {session} = useWalletConnectContext();
const {session, signClient} = useWalletConnectContext();
const navigate = useNavigate();
// TODO: Handle
const [cosmosAddress, setCosmosAddress] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [pubkey, setPubkey] = useState('');
if (!session){
navigate("/connect-wallet")
}
const changePrefix = (address: string, newPrefix: string): string => {
return toBech32(newPrefix, fromBech32(address).data);
}
const createValidatorMessage: MsgCreateValidatorEncodeObject =
useMemo(() => {
return {
typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator",
value: {
description: {
moniker: "dockerNode",
identity: "",
website: "",
securityContact: "",
details: "",
},
commission: {
maxChangeRate: "10000000000000000", // 0.01
maxRate: "200000000000000000", // 0.2
rate: "100000000000000000", // 0.1
},
minSelfDelegation: "1",
delegatorAddress: cosmosAddress,
validatorAddress: changePrefix(cosmosAddress, "laconicvaloper"),
pubkey: encodePubkey({
type: "tendermint/PubKeyEd25519",
value: pubkey,
}),
value: {
amount: process.env.REACT_APP_STAKING_AMOUNT!,
denom: process.env.REACT_APP_LACONICD_DENOM!,
},
},
};
}, [cosmosAddress, pubkey]);
const sendTransaction = async (
transactionMessage: MsgCreateValidatorEncodeObject
) => {
try {
setIsLoading(true);
const params = { transactionMessage, signer: cosmosAddress };
const responseFromWallet = await signClient!.request<{
code: number;
}>({
topic: session!.topic,
chainId: `cosmos:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
request: {
method: "cosmos_sendTransaction",
params,
},
});
if (responseFromWallet.code !== 0) {
enqueueSnackbar("Transaction not sent", { variant: "error" });
} else {
navigate("/onboarding-success", {
state: {
cosmosAddress
}
});
}
} catch (error) {
console.error(error);
enqueueSnackbar("Error in sending transaction", { variant: "error" });
} finally {
setIsLoading(false);
}
};
return (
<Box
sx={{
@ -20,7 +104,52 @@ const CreateValidator = () => {
>
<Typography variant="h5">Create a validator</Typography>
<Typography variant="body1">Select Laconic account:</Typography>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={cosmosAddress}
onChange={(e: any) => {
setCosmosAddress(e.target.value);
}}
style={{ maxWidth: "600px", display: "block" }}
>
{session?.namespaces.cosmos.accounts.map((address, index) => (
<MenuItem value={address.split(":")[2]} key={index}>
{address.split(":")[2]}
</MenuItem>
))}
</Select>
{Boolean(cosmosAddress) && (
<div>
<Box
sx={{
backgroundColor: "lightgray",
padding: 3,
wordWrap: "break-word",
}}
>
<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>
</Box>
</div>
)}
</Box>
)
}