cerc-io/testnet-onboarding-app
17
0
Fork 2
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Skin onboarding app #33

Merged
zramsay merged 11 commits from style/vaidator into main 2024-08-11 21:05:05 +00:00
Conversation 0 Commits 11 Files Changed 17 +106 -81
1 changed files with 106 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bee7379e86 - Show all commits

187
src/pages/SignWithCosmos.tsx
View File

@ -2,7 +2,7 @@ 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, Divider, Typography } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
import {
MsgOnboardParticipantEncodeObject,
@ -11,22 +11,27 @@ import {
import { StargateClient } from "@cosmjs/stargate";
import { useWalletConnectContext } from "../context/WalletConnectContext";
import SelectRoleCard, {Role} from "../components/SelectRoleCard";
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 +56,7 @@ const SignWithCosmos = () => {
ethPayload: innerMessage,
ethSignature: ethSignature!,
kycId: subscriberIdHash!,
role
role,
},
};
}, [cosmosAddress, innerMessage, ethSignature, subscriberIdHash, role]);
@ -59,22 +64,27 @@ const SignWithCosmos = () => {
const handleTokenRequest = async () => {
try {
setIsRequesting(true);
const response = await fetch(`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
const response = await fetch(
`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
address: cosmosAddress,
}),
},
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 +100,7 @@ const SignWithCosmos = () => {
};
const sendTransaction = async (
transactionMessage: MsgOnboardParticipantEncodeObject
transactionMessage: MsgOnboardParticipantEncodeObject,
) => {
if (!ethAddress) {
enqueueSnackbar("Set nitro address");
@ -100,7 +110,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 +130,8 @@ const SignWithCosmos = () => {
} else {
navigate("/onboarding-success", {
state: {
cosmosAddress
}
cosmosAddress,
},
});
}
} catch (error) {
@ -132,11 +144,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,69 +163,77 @@ const SignWithCosmos = () => {
}, [getBalances]);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
marginTop: 6,
gap: 1,
}}
>
<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>
<Typography>Laconic 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={isTncAccepted ? isRequesting : !isTncAccepted}
loading={isRequesting}
>
Request tokens from Faucet
</LoadingButton>
</Grid>
</Grid>
</CardContent>
</Card>
<Typography variant="body1">
Onboarding message: <br />
</Typography>
<Box
sx={{
backgroundColor: "lightgray",
padding: 3,
wordWrap: "break-word",
}}
>
<pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
{JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
</pre>
</Box>
<Box
sx={{
paddingBottom: 2,
}}>
<>
{!isTncAccepted && (
<Layout
title="Please accept the terms and conditions to continue"
noBackButton
>
<SelectRoleCard
handleAccept={() => setIsTncAccepted(true)}
handleRoleChange={setRole}
/>
</Layout>
)}
<Layout title="Send transaction to chain" noBackButton>
<Typography>Laconic Account:</Typography>
<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>
</Box>
<LoadingButton
variant="contained"
onClick={async () => {
await sendTransaction(onboardParticipantMsg);
}}
loading={isLoading}
disabled={isTncAccepted ? (balance === '0') : !isTncAccepted}
onClick={handleTokenRequest}
disabled={isTncAccepted ? isRequesting : !isTncAccepted}
loading={isRequesting}
>
Send transaction
Request tokens from Faucet
</LoadingButton>
</Box>
</Box>
<Divider flexItem sx={{ my: 2 }} />
<Typography variant="body1">Onboarding message:</Typography>
<Box
sx={{
backgroundColor: "#48474F",
padding: 3,
wordWrap: "break-word",
mt: 1,
borderRadius: 1,
}}
>
<pre
style={{
whiteSpace: "pre-wrap",
margin: 0,
backgroundColor: "#48474F",
color: "#FBFBFB",
}}
>
{JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
</pre>
</Box>
<Box
sx={{
paddingBottom: 2,
mt: 2,
}}
>
<LoadingButton
variant="contained"
onClick={async () => {
await sendTransaction(onboardParticipantMsg);
}}
loading={isLoading}
disabled={isTncAccepted ? balance === "0" : !isTncAccepted}
>
Send transaction
</LoadingButton>
</Box>
</Layout>
</>
);
};