Use faucet to fund laconic accounts while sending a transaction (#2)

Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675)

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: cerc-io/testnet-onboarding-app#2
Co-authored-by: Prathamesh Musale <prathamesh@noreply.git.vdb.to>
Co-committed-by: Prathamesh Musale <prathamesh@noreply.git.vdb.to>
This commit is contained in:
Prathamesh Musale 2024-07-18 06:02:58 +00:00 committed by nabarun
parent 6e3f68c100
commit 63ba50b7a3
2 changed files with 82 additions and 3 deletions

View File

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

View File

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