deep-stack/testnet-onboarding-app
3
0
Fork 0
forked from cerc-io/testnet-onboarding-app
Code Pull Requests Activity

style: add codeblock and style validator page

Browse Source
This commit is contained in:
Cody Bender 2024-08-11 12:32:35 -04:00
parent e6fa6aabd7
commit 565d1887e0
5 changed files with 117 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/CodeBlock.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Box } from "@mui/material";
import React, { PropsWithChildren } from "react";
export const CodeBlock: React.FC<PropsWithChildren> = ({ children }) => (
<Box
sx={{
backgroundColor: "#48474F",
padding: 3,
wordWrap: "break-word",
mt: 1,
borderRadius: 1,
}}
>
<pre
style={{
whiteSpace: "pre-wrap",
margin: 0,
backgroundColor: "#48474F",
color: "#FBFBFB",
}}
>
{children}
</pre>
</Box>
);

25
src/pages/OnboardingSuccess.tsx
View File

@ -15,6 +15,7 @@ import {
} from "../utils/sumsub";
import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
import { Participant } from "../types";
import { CodeBlock } from "../components/CodeBlock";
const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
@ -88,22 +89,7 @@ const OnboardingSuccess = () => {
<Typography variant="body1">
Participant onboarded: <br />
</Typography>
<Box
sx={{
backgroundColor: "lightgray",
padding: 3,
wordWrap: "break-word",
marginBottom: 6,
}}
>
<pre
style={{
whiteSpace: "pre-wrap",
margin: 0,
backgroundColor: "#48474F",
color: "#FBFBFB",
}}
>
<CodeBlock>
{participant && (
<div>
Laconic Address: {participant.cosmosAddress} <br />
@ -113,8 +99,7 @@ const OnboardingSuccess = () => {
<br />
</div>
)}
</pre>
</Box>
</CodeBlock>
{ENABLE_KYC ? (
<Box>
<Typography variant="h5">KYC Status</Typography>
@ -148,8 +133,8 @@ const OnboardingSuccess = () => {
padding={5}
>
<Typography variant="body1" gutterBottom sx={{ p: 2 }}>
For app publishers, await the start of the stage 1 chain, which will be
announced in various social media channels. In the meantime,
For app publishers, await the start of the stage 1 chain, which will
be announced in various social media channels. In the meantime,
familiarize yourself with the{" "}
<a
href="https://github.com/hyphacoop/loro-testnet/blob/main/docs/publishing-webapps.md"

22
src/pages/SignWithCosmos.tsx
View File

@ -14,6 +14,7 @@ import { useWalletConnectContext } from "../context/WalletConnectContext";
import SelectRoleCard, { Role } from "../components/SelectRoleCard";
import { HASHED_SUBSCRIBER_ID_KEY } from "../constants";
import { Layout } from "../layout/Layout";
import { CodeBlock } from "../components/CodeBlock";
const SignWithCosmos = () => {
const { session, signClient } = useWalletConnectContext();
@ -194,26 +195,7 @@ const SignWithCosmos = () => {
<Divider flexItem sx={{ my: 2 }} />
<Typography variant="body1">Onboarding message:</Typography>
<Box
sx={{
backgroundColor: "#48474F",
padding: 3,
wordWrap: "break-word",
mt: 1,
borderRadius: 1,
}}
>
<pre
style={{
whiteSpace: "pre-wrap",
margin: 0,
backgroundColor: "#48474F",
color: "#FBFBFB",
}}
>
{JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
</pre>
</Box>
<CodeBlock>{JSON.stringify(onboardParticipantMsg, null, 2)} </CodeBlock>
<Box
sx={{

22
src/pages/SignWithNitroKey.tsx
View File

@ -10,6 +10,7 @@ import { utf8ToHex } from "@walletconnect/encoding";
import { useWalletConnectContext } from "../context/WalletConnectContext";
import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
import { Layout } from "../layout/Layout";
import { CodeBlock } from "../components/CodeBlock";
const SignWithNitroKey = () => {
const { session, signClient, isSessionLoading } = useWalletConnectContext();
@ -142,26 +143,7 @@ const SignWithNitroKey = () => {
</Select>
{Boolean(ethAddress) && Boolean(cosmosAddress) && (
<Box
sx={{
backgroundColor: "#48474F",
padding: 3,
wordWrap: "break-word",
mt: 1,
borderRadius: 1,
}}
>
<pre
style={{
whiteSpace: "pre-wrap",
margin: 0,
backgroundColor: "#48474F",
color: "#FBFBFB",
}}
>
{canonicalStringify(message, null, 2)}{" "}
</pre>
</Box>
<CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
)}
<Box>
<LoadingButton

116
src/pages/Validator.tsx
View File

@ -1,25 +1,34 @@
import React, { useEffect, useMemo, useState } from 'react';
import { enqueueSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { MsgCreateValidator } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
import React, { useEffect, useMemo, useState } from "react";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router-dom";
import { MsgCreateValidator } from "cosmjs-types/cosmos/staking/v1beta1/tx";
import { Box, Link, MenuItem, Select, TextField, Typography } from '@mui/material';
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 {
Box,
Link,
MenuItem,
Select,
TextField,
Typography,
} from "@mui/material";
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';
import { useWalletConnectContext } from "../context/WalletConnectContext";
import { Participant } from "../types";
import { Layout } from "../layout/Layout";
import { CodeBlock } from "../components/CodeBlock";
const Validator = () => {
const { session, signClient, isSessionLoading } = useWalletConnectContext();
const navigate = useNavigate();
const [cosmosAddress, setCosmosAddress] = useState('');
const [cosmosAddress, setCosmosAddress] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [moniker, setMoniker] = useState('');
const [pubKey, setPubKey] = useState('');
const [moniker, setMoniker] = useState("");
const [pubKey, setPubKey] = useState("");
const [participant, setParticipant] = useState<Participant | null>(null);
const [isError, setIsError] = useState(false);
@ -40,10 +49,13 @@ const Validator = () => {
}
const fetchParticipant = async () => {
const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
const registry = new Registry(
process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!,
);
try {
const fetchedParticipant = await registry.getParticipantByAddress(cosmosAddress);
const fetchedParticipant =
await registry.getParticipantByAddress(cosmosAddress);
if (fetchedParticipant) {
setParticipant(fetchedParticipant);
} else {
@ -65,7 +77,7 @@ const Validator = () => {
const msgCreateValidator: MsgCreateValidator = useMemo(() => {
const encodedPubKey = encodePubkey({
type: "tendermint/PubKeyEd25519",
value: pubKey.length === 44 ? pubKey : '',
value: pubKey.length === 44 ? pubKey : "",
});
return {
@ -82,8 +94,10 @@ const Validator = () => {
rate: "100000000000000000", // 0.1
},
minSelfDelegation: "1",
delegatorAddress: '',
validatorAddress: cosmosAddress && toBech32('laconicvaloper', fromBech32(cosmosAddress).data),
delegatorAddress: "",
validatorAddress:
cosmosAddress &&
toBech32("laconicvaloper", fromBech32(cosmosAddress).data),
pubkey: encodedPubKey,
value: {
amount: process.env.REACT_APP_STAKING_AMOUNT!,
@ -93,7 +107,7 @@ const Validator = () => {
}, [cosmosAddress, pubKey, moniker]);
const msgCreateValidatorEncodeObject: EncodeObject = {
typeUrl: '/cosmos.staking.v1beta1.MsgCreateValidator',
typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator",
value: MsgCreateValidator.toJSON(msgCreateValidator),
};
@ -108,10 +122,15 @@ const Validator = () => {
}
setIsLoading(true);
enqueueSnackbar("View and sign the message from your Laconic Wallet", { variant: "info" });
enqueueSnackbar("View and sign the message from your Laconic Wallet", {
variant: "info",
});
try {
const params = { transactionMessage: msgCreateValidatorEncodeObject, signer: cosmosAddress };
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}`,
@ -124,7 +143,9 @@ const Validator = () => {
if (response.code !== 0) {
throw new Error("Transaction not sent");
} else {
navigate("/validator-success", { state: { validatorAddress: msgCreateValidator.validatorAddress, } });
navigate("/validator-success", {
state: { validatorAddress: msgCreateValidator.validatorAddress },
});
}
} catch (error) {
console.error("Error sending transaction", error);
@ -134,16 +155,15 @@ const Validator = () => {
}
};
const replacer = (key: string, value: any): any => {
const replacer = (_key: string, value: any): any => {
if (value instanceof Uint8Array) {
return Buffer.from(value).toString('hex');
return Buffer.from(value).toString("hex");
}
return value;
};
return (
<Box sx={{ display: "flex", flexDirection: "column", marginTop: 6, gap: 1 }}>
<Typography variant="h5">Create a validator</Typography>
<Layout title="Create a validator">
<Typography variant="body1">Select Laconic account:</Typography>
<Select
sx={{ marginBottom: 2 }}
@ -167,23 +187,14 @@ const Validator = () => {
<Typography>No participant found</Typography>
)}
<Box
sx={{
backgroundColor: participant ? "lightgray" : "white",
padding: 3,
wordWrap: "break-word",
marginBottom: 3,
}}
>
{participant && (
<pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
<CodeBlock>
Laconic Address: {participant.cosmosAddress} <br />
Nitro Address: {participant.nitroAddress} <br />
Role: {participant.role} <br />
KYC ID: {participant.kycId} <br />
</pre>
</CodeBlock>
)}
</Box>
{participant?.role === "validator" && (
<>
@ -200,12 +211,15 @@ const Validator = () => {
setMoniker(e.target.value);
}}
error={!isMonikerValid && isError}
helperText={!isMonikerValid && isError ? "Moniker is required" : ""}
helperText={
!isMonikerValid && isError ? "Moniker is required" : ""
}
/>
</Box>
<Typography sx={{ marginTop: 3}}>
Fetch your validator public key using the following command (refer&nbsp;
<Typography sx={{ marginTop: 3 }}>
Fetch your validator public key using the following command
(refer&nbsp;
<Link
href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
target="_blank"
@ -216,11 +230,9 @@ const Validator = () => {
)
</Typography>
<Box sx={{ backgroundColor: "lightgray", padding: 3, wordWrap: "break-word" }}>
<pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
<CodeBlock>
{`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
</pre>
</Box>
</CodeBlock>
<Box sx={{ maxWidth: "600px" }}>
<TextField
@ -235,15 +247,17 @@ const Validator = () => {
setPubKey(e.target.value);
}}
error={!isPubKeyValid && isError}
helperText={!isPubKeyValid && isError ? "Public key must be 44 characters" : ""}
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 }}>
<CodeBlock>
{JSON.stringify(msgCreateValidator, replacer, 2)}
</pre>
</Box>
</CodeBlock>
<Box marginTop={1} marginBottom={1}>
<LoadingButton
variant="contained"
@ -258,7 +272,7 @@ const Validator = () => {
)}
</>
)}
</Box>
</Layout>
);
};