testnet-onboarding-app/src/pages/SignWithCosmos.tsx
2024-07-15 17:15:24 +05:30

116 lines
3.1 KiB
TypeScript

import React, { useMemo, useState } from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
import { SnackbarProvider, enqueueSnackbar } from "notistack";
import { Box, Typography } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
import {
MsgOnboardParticipantEncodeObject,
typeUrlMsgOnboardParticipant,
} from "@cerc-io/registry-sdk";
import { useWalletConnectContext } from "../context/WalletConnectContext";
const SignWithCosmos = () => {
const { session, signClient } = useWalletConnectContext();
const { cosmosAddress, ethSignature } = useParams();
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const location = useLocation();
const innerMessage = location.state;
const ethAddress = innerMessage.address;
const onboardParticipantMsg: MsgOnboardParticipantEncodeObject =
useMemo(() => {
return {
typeUrl: typeUrlMsgOnboardParticipant,
value: {
participant: cosmosAddress,
ethPayload: innerMessage,
ethSignature,
},
};
}, [cosmosAddress, innerMessage, ethSignature]);
const sendTransaction = async (
transactionMessage: MsgOnboardParticipantEncodeObject
) => {
if (!ethAddress) {
enqueueSnackbar("Set nitro address");
return;
}
try {
setIsLoading(true);
const params = { transactionMessage, signer: cosmosAddress };
const responseFromWallet = await signClient!.request<{
code: number;
}>({
topic: session!.topic,
chainId: `cosmos:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
request: {
method: "cosmos_sendTransaction",
params,
},
});
if (responseFromWallet.code !== 0) {
enqueueSnackbar("Transaction not sent", { variant: "error" });
} else {
navigate(`/onboarding-success/${cosmosAddress}`);
}
} catch (error) {
console.error(error);
enqueueSnackbar("Error in sending transaction", { variant: "error" });
} finally {
setIsLoading(false);
}
};
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
marginTop: "100px",
gap: "10px",
}}
>
<Typography variant="h5">Send transaction to chain</Typography>
<Typography variant="body1">Cosmos account: {cosmosAddress}</Typography>
<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>
<LoadingButton
variant="contained"
onClick={async () => {
await sendTransaction(onboardParticipantMsg);
}}
loading={isLoading}
>
Send transaction
</LoadingButton>
</Box>
<SnackbarProvider />
</Box>
);
};
export default SignWithCosmos;