Display validator message on page

.env.example

@@ -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

package.json

@@ -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",

src/pages/ConnectWallet.tsx

@@ -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";
 

src/pages/CreateValidator.tsx

@@ -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>
+
   )
 }