src/pages/LandingPage.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { Button, Box } from "@mui/material";
+import { Button, Box, Typography } from "@mui/material";
 
 import TermsAndConditionsBox from "../components/TermsAndConditionsBox";
 import { Container } from "../components/Container";
@@ -17,6 +17,38 @@ const LandingPage = () => {
 
   return (
     <Container>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        margin={10}
+        sx={{
+          border: 1,
+          borderColor: "grey.500",
+          borderRadius: 1,
+        }}
+        padding={5}
+      >
+        <Typography variant="h6">
+          Welcome to the LORO Testnet Onboarding App. The detailed instructions
+          for completing this first step are found in the{" "}
+          <a
+            href="https://github.com/hyphacoop/loro-testnet/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            LORO testnet repo
+          </a>
+          . Once your onboarding transaction has been submitted, await the
+          completion of stage0. The genesis.json file and peer nodes will then
+          be published in the aforementioned repository for validators to begin
+          stage1. Once enough validators are online and the Laconic chain is
+          running, those same validators can complete their service provider
+          setup. Once service providers are live, app publishers can start
+          deploying webapps to individual service providers.
+        </Typography>
+      </Box>
       <TermsAndConditionsBox
         height="43vh"
         onLoad={() => {

src/pages/OnboardingSuccess.tsx

@@ -7,36 +7,42 @@ import { Registry } from "@cerc-io/registry-sdk";
 import SumsubWebSdk from "@sumsub/websdk-react";
 import { MessageHandler } from "@sumsub/websdk";
 
-import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
+import {
+  config,
+  fetchAccessToken,
+  getAccessTokenExpirationHandler,
+  options,
+} from "../utils/sumsub";
 import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Participant } from "../types";
 
-const registry = new Registry(
-  process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!
-);
+const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
 
 const OnboardingSuccess = () => {
   const location = useLocation();
   const { cosmosAddress } = location.state as {
-    cosmosAddress?: string
+    cosmosAddress?: string;
   };
 
   const [participant, setParticipant] = useState<Participant>();
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(true);
 
   const messageHandler: MessageHandler = (event, payload) => {
-    console.log('sumsubEvent:', event, payload);
+    console.log("sumsubEvent:", event, payload);
   };
 
   useEffect(() => {
     const fetchParticipants = async () => {
       try {
         if (!cosmosAddress) {
-          enqueueSnackbar("Laconic address is not provided", { variant: "error" });
+          enqueueSnackbar("Laconic address is not provided", {
+            variant: "error",
+          });
           return;
         }
-        const participant: Participant = await registry.getParticipantByAddress(cosmosAddress);
+        const participant: Participant =
+          await registry.getParticipantByAddress(cosmosAddress);
         if (!participant) {
           enqueueSnackbar("Participant not found", { variant: "error" });
           return;
@@ -61,7 +67,7 @@ const OnboardingSuccess = () => {
     };
 
     if (cosmosAddress && ENABLE_KYC) {
-      getToken(cosmosAddress).catch(error => {
+      getToken(cosmosAddress).catch((error) => {
         console.error(error);
         alert("Failed to fetch token");
       });
@@ -90,7 +96,14 @@ const OnboardingSuccess = () => {
             marginBottom: 6,
           }}
         >
-          <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+          <pre
+            style={{
+              whiteSpace: "pre-wrap",
+              margin: 0,
+              backgroundColor: "#48474F",
+              color: "#FBFBFB",
+            }}
+          >
             {participant && (
               <div>
                 Laconic Address: {participant.cosmosAddress} <br />
@@ -108,15 +121,18 @@ const OnboardingSuccess = () => {
             {!loading && token && cosmosAddress && (
               <SumsubWebSdk
                 accessToken={token}
-                expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
+                expirationHandler={getAccessTokenExpirationHandler(
+                  cosmosAddress,
+                )}
                 config={config}
                 options={options}
                 onMessage={messageHandler}
               />
             )}
           </Box>
-        ) : ''
-        }
+        ) : (
+          ""
+        )}
       </Box>
       <Typography variant="h5">Next Steps</Typography>
       <Box
@@ -127,17 +143,34 @@ const OnboardingSuccess = () => {
         marginTop={3}
         sx={{
           border: 1,
-          borderColor: 'grey.500',
+          borderColor: "grey.500",
         }}
         padding={5}
       >
         <Typography variant="body1" gutterBottom sx={{ p: 2 }}>
-          For participants, await the start of the stage 1 chain, which will be announced in various social media channels. In the meantime, familiarize yourself with the{' '}
-          <a href="https://github.com/hyphacoop/loro-testnet/blob/main/docs/publishing-webapps.md" target="_blank" rel="noopener noreferrer">webapp publishing workflow</a>{' '}
-          as this is the main task you will be participating in.<br />
+          For participants, await the start of the stage 1 chain, which will be
+          announced in various social media channels. In the meantime,
+          familiarize yourself with the{" "}
+          <a
+            href="https://github.com/hyphacoop/loro-testnet/blob/main/docs/publishing-webapps.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            webapp publishing workflow
+          </a>{" "}
+          as this is the main task you will be participating in.
           <br />
-          For validators, ensure your service provider is running and ready to deploy webapps. Await publication of the laconicd version, genesis file, and peers to the LORO testnet repo, then follow{' '}
-          <a href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-a-validator-on-stage1" target="_blank" rel="noopener noreferrer">these instructions</a>{' '}
+          <br />
+          For validators, ensure your service provider is running and ready to
+          deploy webapps. Await publication of the laconicd version, genesis
+          file, and peers to the LORO testnet repo, then follow{" "}
+          <a
+            href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-a-validator-on-stage1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            these instructions
+          </a>{" "}
           for joining stage 1 as a validator.
         </Typography>
       </Box>