style: sign with cosmos
This commit is contained in:
parent
da1aaeebdb
commit
3a8ec67e2a
@ -2,7 +2,14 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
|
||||
import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Divider,
|
||||
Grid,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
|
||||
import {
|
||||
MsgOnboardParticipantEncodeObject,
|
||||
@ -13,20 +20,25 @@ import { StargateClient } from "@cosmjs/stargate";
|
||||
import { useWalletConnectContext } from "../context/WalletConnectContext";
|
||||
import SelectRoleCard, { Role } from "../components/SelectRoleCard";
|
||||
import { HASHED_SUBSCRIBER_ID_KEY } from "../constants";
|
||||
import { Layout } from "../layout/Layout";
|
||||
|
||||
const SignWithCosmos = () => {
|
||||
const { session, signClient } = useWalletConnectContext();
|
||||
|
||||
const location = useLocation();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [balance, setBalance] = useState('');
|
||||
const [balance, setBalance] = useState("");
|
||||
const [isRequesting, setIsRequesting] = useState(false);
|
||||
const [isTncAccepted, setIsTncAccepted] = useState(false);
|
||||
const [role, setRole] = useState(Role.Participant);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature} = location.state as {
|
||||
const {
|
||||
message: innerMessage,
|
||||
cosmosAddress,
|
||||
receivedEthSig: ethSignature,
|
||||
} = location.state as {
|
||||
message?: {
|
||||
msg: string;
|
||||
address: string;
|
||||
@ -51,7 +63,7 @@ const SignWithCosmos = () => {
|
||||
ethPayload: innerMessage,
|
||||
ethSignature: ethSignature!,
|
||||
kycId: subscriberIdHash!,
|
||||
role
|
||||
role,
|
||||
},
|
||||
};
|
||||
}, [cosmosAddress, innerMessage, ethSignature, subscriberIdHash, role]);
|
||||
@ -59,22 +71,27 @@ const SignWithCosmos = () => {
|
||||
const handleTokenRequest = async () => {
|
||||
try {
|
||||
setIsRequesting(true);
|
||||
const response = await fetch(`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`, {
|
||||
method: 'POST',
|
||||
const response = await fetch(
|
||||
`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
address: cosmosAddress,
|
||||
}),
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
enqueueSnackbar('Tokens sent successfully', { variant: "success" });
|
||||
enqueueSnackbar("Tokens sent successfully", { variant: "success" });
|
||||
} else {
|
||||
const errorResponse = await response.json();
|
||||
if (response.status === 429) {
|
||||
enqueueSnackbar(`${response.statusText} : ${errorResponse.error}`, { variant: "error" });
|
||||
enqueueSnackbar(`${response.statusText} : ${errorResponse.error}`, {
|
||||
variant: "error",
|
||||
});
|
||||
} else {
|
||||
throw new Error(errorResponse.error);
|
||||
}
|
||||
@ -90,7 +107,7 @@ const SignWithCosmos = () => {
|
||||
};
|
||||
|
||||
const sendTransaction = async (
|
||||
transactionMessage: MsgOnboardParticipantEncodeObject
|
||||
transactionMessage: MsgOnboardParticipantEncodeObject,
|
||||
) => {
|
||||
if (!ethAddress) {
|
||||
enqueueSnackbar("Set nitro address");
|
||||
@ -100,7 +117,9 @@ const SignWithCosmos = () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
enqueueSnackbar("View and sign the message from your Laconic Wallet", { variant: "info" });
|
||||
enqueueSnackbar("View and sign the message from your Laconic Wallet", {
|
||||
variant: "info",
|
||||
});
|
||||
|
||||
const params = { transactionMessage, signer: cosmosAddress };
|
||||
const responseFromWallet = await signClient!.request<{
|
||||
@ -118,8 +137,8 @@ const SignWithCosmos = () => {
|
||||
} else {
|
||||
navigate("/onboarding-success", {
|
||||
state: {
|
||||
cosmosAddress
|
||||
}
|
||||
cosmosAddress,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@ -132,11 +151,16 @@ 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!);
|
||||
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);
|
||||
console.error("Error fetching balance:", error);
|
||||
throw error;
|
||||
}
|
||||
}, [cosmosAddress, createCosmosClient]);
|
||||
@ -146,26 +170,26 @@ const SignWithCosmos = () => {
|
||||
}, [getBalances]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: 6,
|
||||
gap: 1,
|
||||
}}
|
||||
<>
|
||||
{!isTncAccepted && (
|
||||
<Layout
|
||||
title="Please accept the terms and conditions to continue"
|
||||
noBackButton
|
||||
>
|
||||
<Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography>
|
||||
<SelectRoleCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
|
||||
<Typography variant="h5">Send transaction to chain</Typography>
|
||||
<SelectRoleCard
|
||||
handleAccept={() => setIsTncAccepted(true)}
|
||||
handleRoleChange={setRole}
|
||||
/>
|
||||
</Layout>
|
||||
)}
|
||||
<Layout title="Send transaction to chain" noBackButton>
|
||||
<Typography>Cosmos Account:</Typography>
|
||||
<Card className='mt-1 mb-1'>
|
||||
<CardContent>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={9}>
|
||||
<Box sx={{ backgroundColor: "#29292E", p: 2, borderRadius: 1, mb: 2 }}>
|
||||
<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">
|
||||
<Typography variant="body1">
|
||||
Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}
|
||||
</Typography>
|
||||
</Box>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
onClick={handleTokenRequest}
|
||||
@ -174,21 +198,26 @@ const SignWithCosmos = () => {
|
||||
>
|
||||
Request tokens from Faucet
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Typography variant="body1">
|
||||
Onboarding message: <br />
|
||||
</Typography>
|
||||
<Divider flexItem sx={{ my: 2 }} />
|
||||
<Typography variant="body1">Onboarding message:</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "lightgray",
|
||||
backgroundColor: "#48474F",
|
||||
padding: 3,
|
||||
wordWrap: "break-word",
|
||||
mt: 1,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<pre
|
||||
style={{
|
||||
whiteSpace: "pre-wrap",
|
||||
margin: 0,
|
||||
backgroundColor: "#48474F",
|
||||
color: "#FBFBFB",
|
||||
}}
|
||||
>
|
||||
<pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
|
||||
{JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
|
||||
</pre>
|
||||
</Box>
|
||||
@ -196,19 +225,22 @@ const SignWithCosmos = () => {
|
||||
<Box
|
||||
sx={{
|
||||
paddingBottom: 2,
|
||||
}}>
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
onClick={async () => {
|
||||
await sendTransaction(onboardParticipantMsg);
|
||||
}}
|
||||
loading={isLoading}
|
||||
disabled={isTncAccepted ? (balance === '0') : !isTncAccepted}
|
||||
disabled={isTncAccepted ? balance === "0" : !isTncAccepted}
|
||||
>
|
||||
Send transaction
|
||||
</LoadingButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user