style: sign with cosmos

src/pages/SignWithCosmos.tsx

@@ -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,
@@ -11,22 +18,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 +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',
-        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 +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,69 +170,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>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={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>Cosmos 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>
+    </>
   );
 };