Display cosmos balance

.env.example

@@ -2,3 +2,5 @@ REACT_APP_WALLET_CONNECT_ID=
 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://127.0.0.1:26657/
+REACT_APP_LACONICD_DENOM=photon

src/pages/SignWithCosmos.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
 
@@ -8,6 +8,7 @@ import {
   MsgOnboardParticipantEncodeObject,
   typeUrlMsgOnboardParticipant,
 } from "@cerc-io/registry-sdk";
+import { StargateClient } from "@cosmjs/stargate";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 
@@ -17,12 +18,17 @@ const SignWithCosmos = () => {
   const { cosmosAddress, ethSignature } = useParams();
 
   const [isLoading, setIsLoading] = useState(false);
+  const [balance, setBalance] = useState('');
 
   const navigate = useNavigate();
   const location = useLocation();
   const innerMessage = location.state;
   const ethAddress = innerMessage.address;
 
+  const createCosmosClient = useCallback(async (endpoint: string) => {
+    return await StargateClient.connect(endpoint);
+  }, []);
+
   const onboardParticipantMsg: MsgOnboardParticipantEncodeObject =
     useMemo(() => {
       return {
@@ -70,6 +76,20 @@ const SignWithCosmos = () => {
     }
   };
 
+  const getBalances = useCallback(async () => {
+    try {
+      const cosmosClient = await createCosmosClient(process.env.REACT_APP_LACONICD_RPC_ENDPOINT!);
+      const balance = await cosmosClient.getBalance(cosmosAddress!, process.env.REACT_APP_LACONICD_DENOM!);
+      setBalance(balance.amount);
+    } catch (error) {
+      console.error('Error fetching balance:', error);
+    }
+  }, [cosmosAddress, createCosmosClient]);
+
+  useEffect(() => {
+    getBalances();
+  }, [getBalances]);
+
   return (
     <Box
       sx={{
@@ -80,7 +100,8 @@ const SignWithCosmos = () => {
       }}
     >
       <Typography variant="h5">Send transaction to chain</Typography>
-      <Typography variant="body1">Cosmos account: {cosmosAddress}</Typography>
+      <Typography variant="body1">Cosmos address: {cosmosAddress}</Typography>
+      <Typography variant="body1">Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}</Typography>
       <Typography variant="body1">
         Onboarding message: <br />
       </Typography>