From 565d1887e0df85455ec290e579d55cab02522395 Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Sun, 11 Aug 2024 12:32:35 -0400 Subject: [PATCH] style: add codeblock and style validator page --- src/components/CodeBlock.tsx | 25 ++++++ src/pages/OnboardingSuccess.tsx | 43 ++++------ src/pages/SignWithCosmos.tsx | 22 +----- src/pages/SignWithNitroKey.tsx | 22 +----- src/pages/Validator.tsx | 134 ++++++++++++++++++-------------- 5 files changed, 117 insertions(+), 129 deletions(-) create mode 100644 src/components/CodeBlock.tsx diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx new file mode 100644 index 0000000..6fb7f80 --- /dev/null +++ b/src/components/CodeBlock.tsx @@ -0,0 +1,25 @@ +import { Box } from "@mui/material"; +import React, { PropsWithChildren } from "react"; + +export const CodeBlock: React.FC = ({ children }) => ( + + 
+      {children}
+
+ +); diff --git a/src/pages/OnboardingSuccess.tsx b/src/pages/OnboardingSuccess.tsx index b347093..b7e307a 100644 --- a/src/pages/OnboardingSuccess.tsx +++ b/src/pages/OnboardingSuccess.tsx @@ -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,33 +89,17 @@ const OnboardingSuccess = () => { Participant onboarded:
- - 
-            {participant && (
-              

-                Laconic Address: {participant.cosmosAddress} 

-                Nitro Address: {participant.nitroAddress} 

-                Role: {participant.role} 

-                KYC ID: {participant.kycId} 

-                

-              

-            )}
-
- + + {participant && ( +
+ Laconic Address: {participant.cosmosAddress}
+ Nitro Address: {participant.nitroAddress}
+ Role: {participant.role}
+ KYC ID: {participant.kycId}
+
+
+ )} + {ENABLE_KYC ? ( KYC Status @@ -148,8 +133,8 @@ const OnboardingSuccess = () => { padding={5} > - 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{" "} { const { session, signClient } = useWalletConnectContext(); @@ -194,26 +195,7 @@ const SignWithCosmos = () => { Onboarding message: - - 
-            {JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
-
- + {JSON.stringify(onboardParticipantMsg, null, 2)} { const { session, signClient, isSessionLoading } = useWalletConnectContext(); @@ -142,26 +143,7 @@ const SignWithNitroKey = () => { {Boolean(ethAddress) && Boolean(cosmosAddress) && ( - - 
-                {canonicalStringify(message, null, 2)}{" "}
-
- + {canonicalStringify(message, null, 2)} )} { 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(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 ( - - Create a validator + Select Laconic account: