Display validator message on page
This commit is contained in:
parent
000d4ff846
commit
8646544060
@ -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
|
||||
|
@ -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",
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user