Add functionality to request tokens from faucet

src/pages/SignWithCosmos.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
 
-import { Box, Card, CardContent, Typography } from "@mui/material";
+import { Box, Button, Card, CardContent, Grid, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
   MsgOnboardParticipantEncodeObject,
@@ -41,6 +41,29 @@ const SignWithCosmos = () => {
       };
     }, [cosmosAddress, innerMessage, ethSignature]);
 
+  const handleTokenRequest = async () => {
+    try {
+      const response = await fetch('http://localhost:3000/faucet', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          address: cosmosAddress,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send request');
+      }
+
+      getBalances();
+      console.log('Request successful');
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
   const sendTransaction = async (
     transactionMessage: MsgOnboardParticipantEncodeObject
   ) => {
@@ -103,8 +126,18 @@ const SignWithCosmos = () => {
       <Typography>Cosmos Account:</Typography>
       <Card className='mt-1 mb-1'>
         <CardContent>
-          <Typography variant="body1">Address: {cosmosAddress}</Typography>
-          <Typography variant="body1">Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}</Typography>
+          <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">
+              <Button
+                variant="contained"
+                onClick={handleTokenRequest}
+              >Request tokens from Faucet</Button>
+            </Grid>
+          </Grid>
         </CardContent>
       </Card>
       <Typography variant="body1">
@@ -129,6 +162,7 @@ const SignWithCosmos = () => {
             await sendTransaction(onboardParticipantMsg);
           }}
           loading={isLoading}
+          disabled={balance === '0'}
         >
           Send transaction
         </LoadingButton>