.env.example

@@ -2,3 +2,6 @@ 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://localhost:26657
+REACT_APP_LACONICD_DENOM=photon
+REACT_APP_FAUCET_ENDPOINT=http://localhost:4000

src/pages/SignWithCosmos.tsx

@@ -1,13 +1,14 @@
-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";
 
-import { Box, Typography } from "@mui/material";
+import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
   MsgOnboardParticipantEncodeObject,
   typeUrlMsgOnboardParticipant,
 } from "@cerc-io/registry-sdk";
+import { StargateClient } from "@cosmjs/stargate";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 
@@ -17,12 +18,18 @@ const SignWithCosmos = () => {
   const { cosmosAddress, ethSignature } = useParams();
 
   const [isLoading, setIsLoading] = useState(false);
+  const [balance, setBalance] = useState('');
+  const [isRequesting, setIsRequesting] = useState(false);
 
   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 {
@@ -35,6 +42,39 @@ const SignWithCosmos = () => {
       };
     }, [cosmosAddress, innerMessage, ethSignature]);
 
+  const handleTokenRequest = async () => {
+    try {
+      setIsRequesting(true);
+      const response = await fetch(`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          address: cosmosAddress,
+        }),
+      });
+
+      if (response.ok) {
+        enqueueSnackbar('Tokens sent successfully',  { variant: "success" });
+      } else {
+        const errorResponse = await response.json();
+        if (response.status === 429) {
+          enqueueSnackbar(`${response.statusText} : ${errorResponse.error}`, { variant: "error" });
+        } else {
+          throw new Error(errorResponse.error);
+        }
+      }
+
+      getBalances();
+    } catch (error) {
+      console.error(error);
+      enqueueSnackbar("Error getting tokens from faucet", { variant: "error" });
+    } finally {
+      setIsRequesting(false);
+    }
+  };
+
   const sendTransaction = async (
     transactionMessage: MsgOnboardParticipantEncodeObject
   ) => {
@@ -70,6 +110,21 @@ 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);
+      throw error;
+    }
+  }, [cosmosAddress, createCosmosClient]);
+
+  useEffect(() => {
+    getBalances();
+  }, [getBalances]);
+
   return (
     <Box
       sx={{
@@ -80,7 +135,27 @@ const SignWithCosmos = () => {
       }}
     >
       <Typography variant="h5">Send transaction to chain</Typography>
-      <Typography variant="body1">Cosmos account: {cosmosAddress}</Typography>
+      <Typography>Cosmos Account:</Typography>
+      <Card className='mt-1 mb-1'>
+        <CardContent>
+          <Grid container spacing={2}>
+            <Grid item xs={9}>
+              <Typography variant="body1">Address: {cosmosAddress}</Typography>
+              <Typography variant="body1">Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}</Typography>
+            </Grid>
+            <Grid item xs={3} container justifyContent="flex-end">
+              <LoadingButton
+                variant="contained"
+                onClick={handleTokenRequest}
+                disabled={isRequesting}
+                loading={isRequesting}
+              >
+                Request tokens from Faucet
+              </LoadingButton>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
       <Typography variant="body1">
         Onboarding message: <br />
       </Typography>
@@ -103,6 +178,7 @@ const SignWithCosmos = () => {
             await sendTransaction(onboardParticipantMsg);
           }}
           loading={isLoading}
+          disabled={balance === '0'}
         >
           Send transaction
         </LoadingButton>