From 79f0ff8b6c988250c9fcdf6b2f90fd1ca98494cf Mon Sep 17 00:00:00 2001 From: Adw8 Date: Fri, 9 Aug 2024 09:57:50 +0530 Subject: [PATCH] Use replacer to display public key --- src/pages/ConnectWallet.tsx | 2 +- src/pages/Validator.tsx | 261 +++++++++++++++++------------------- 2 files changed, 124 insertions(+), 139 deletions(-) diff --git a/src/pages/ConnectWallet.tsx b/src/pages/ConnectWallet.tsx index 7492805..7d22870 100644 --- a/src/pages/ConnectWallet.tsx +++ b/src/pages/ConnectWallet.tsx @@ -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"; diff --git a/src/pages/Validator.tsx b/src/pages/Validator.tsx index e36199c..f25d4e6 100644 --- a/src/pages/Validator.tsx +++ b/src/pages/Validator.tsx @@ -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(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 ( - + Create a validator Select Laconic account: {Boolean(cosmosAddress) && ( -
- {participant === null ? ( - No participant found - ) : ( + <> + {participant ? ( Onboarded participant + ) : ( + No participant found )} { > {participant && ( 
-                

-                  Cosmos Address: {participant.cosmosAddress} 

-                  Nitro Address: {participant.nitroAddress} 

-                  Role: {participant.role} 

-                  KYC ID: {participant.kycId} 

-                

+                Cosmos Address: {participant.cosmosAddress} 

+                Nitro Address: {participant.nitroAddress} 

+                Role: {participant.role} 

+                KYC ID: {participant.kycId}
)} - - { - setIsError(false); - setMoniker(e.target.value) - }} - error={!isMonikerValid && isError } - helperText={!isMonikerValid && isError ? "Moniker is required" : ""} - /> - { - setIsError(false); - setPubKey(e.target.value) - }} - error={!isPubKeyValid && isError} - helperText={!isPubKeyValid ? "Public key must be 44 characters" : ""} - /> - - - <> - Send transaction to chain - - 
-                {JSON.stringify(msgCreateValidator, null, 2)}
-
- - - { - 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 - - - -
+ {participant?.role === "validator" && ( + <> + + { + setIsError(false); + setMoniker(e.target.value); + }} + error={!isMonikerValid && isError} + helperText={!isMonikerValid && isError ? "Moniker is required" : ""} + /> + { + setIsError(false); + setPubKey(e.target.value); + }} + error={!isPubKeyValid && isError} + helperText={!isPubKeyValid && isError ? "Public key must be 44 characters" : ""} + /> + + Send transaction to chain + + 
+                  {JSON.stringify(msgCreateValidator, replacer, 2)}
+
+ + + + Send transaction + + + + )} + )} );