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:
parent
6e3f68c100
commit
63ba50b7a3
@ -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
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user