Disable faucet button and display error message

src/pages/SignWithCosmos.tsx

@@ -19,6 +19,7 @@ const SignWithCosmos = () => {
 
   const [isLoading, setIsLoading] = useState(false);
   const [balance, setBalance] = useState('');
+  const [isRequesting, setIsRequesting] = useState(false);
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -43,6 +44,7 @@ const SignWithCosmos = () => {
 
   const handleTokenRequest = async () => {
     try {
+      setIsRequesting(true);
       const response = await fetch('http://localhost:3000/faucet', {
         method: 'POST',
         headers: {
@@ -54,12 +56,15 @@ const SignWithCosmos = () => {
       });
 
       if (response.status === 429) {
-        enqueueSnackbar(response.statusText, { variant: "error" });
+        const errorResponse = await response.json();
+        enqueueSnackbar(`${response.statusText} : ${errorResponse.error}`, { variant: "error" });
+        setIsRequesting(false);
         throw new Error('Failed to send request');
       }
 
       getBalances();
-      console.log('Request successful');
+      setIsRequesting(false);
+      enqueueSnackbar('Tokens sent successfully',  { variant: "success" });
     } catch (error) {
       console.error('Error:', error);
     }
@@ -107,6 +112,7 @@ const SignWithCosmos = () => {
       setBalance(balance.amount);
     } catch (error) {
       console.error('Error fetching balance:', error);
+      throw error;
     }
   }, [cosmosAddress, createCosmosClient]);
 
@@ -133,10 +139,14 @@ const SignWithCosmos = () => {
               <Typography variant="body1">Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}</Typography>
             </Grid>
             <Grid item xs={3} container justifyContent="flex-end">
-              <Button
+              <LoadingButton
                 variant="contained"
                 onClick={handleTokenRequest}
-              >Request tokens from Faucet</Button>
+                disabled={isRequesting}
+                loading={isRequesting}
+              >
+                Request tokens from Faucet
+              </LoadingButton>
             </Grid>
           </Grid>
         </CardContent>