diff --git a/.env.example b/.env.example index 449ad5b..0cb062d 100644 --- a/.env.example +++ b/.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 diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx index 05d96a6..bb8f44b 100644 --- a/src/pages/SignWithCosmos.tsx +++ b/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 ( { }} > Send transaction to chain - Cosmos account: {cosmosAddress} + Cosmos Account: + + + + + Address: {cosmosAddress} + Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM} + + + + Request tokens from Faucet + + + + + Onboarding message:
@@ -103,6 +178,7 @@ const SignWithCosmos = () => { await sendTransaction(onboardParticipantMsg); }} loading={isLoading} + disabled={balance === '0'} > Send transaction