Display next steps on success page

src/pages/OnboardingSuccess.tsx

@@ -73,54 +73,79 @@ const OnboardingSuccess = () => {
   }, [cosmosAddress]);
 
   return (
-    <Box
+    <>
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        marginTop: 6,
-        gap: 1,
-      }}
-    >
-      <Typography variant="h5">Transaction Successful</Typography>
-      <Typography variant="body1">
-        Participant onboarded: <br />
-      </Typography>
       <Box
         sx={{
-          backgroundColor: "lightgray",
+          display: "flex",
-          padding: 3,
+          flexDirection: "column",
-          wordWrap: "break-word",
+          marginTop: 6,
-          marginBottom: 6,
+          gap: 1,
         }}
       >
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+        <Typography variant="h5">Transaction Successful</Typography>
-          {participant && (
+        <Typography variant="body1">
-            <div>
+          Participant onboarded: <br />
+        </Typography>
+        <Box
+          sx={{
+            backgroundColor: "lightgray",
+            padding: 3,
+            wordWrap: "break-word",
+            marginBottom: 6,
+          }}
+        >
+          <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+            {participant && (
+              <div>
               Cosmos Address: {participant.cosmosAddress} <br />
               Nitro Address: {participant.nitroAddress} <br />
               Role: {participant.role} <br />
               KYC ID: {participant.kycId} <br />
-              <br />
+                <br />
-            </div>
+              </div>
-          )}
+            )}
-        </pre>
+          </pre>
-      </Box>
-      {ENABLE_KYC ? (
-        <Box>
-          <Typography variant="h5">KYC Status</Typography>
-          {!loading && token && cosmosAddress && (
-            <SumsubWebSdk
-              accessToken={token}
-              expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
-              config={config}
-              options={options}
-              onMessage={messageHandler}
-            />
-          )}
         </Box>
-      ) : ''
+        {ENABLE_KYC ? (
-      }
+          <Box>
-    </Box>
+            <Typography variant="h5">KYC Status</Typography>
+            {!loading && token && cosmosAddress && (
+              <SumsubWebSdk
+                accessToken={token}
+                expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
+                config={config}
+                options={options}
+                onMessage={messageHandler}
+              />
+            )}
+          </Box>
+        ) : ''
+        }
+      </Box>
+      <Typography variant="h5">Next Steps</Typography>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        marginTop={3}
+        sx={{
+          border: 1,
+          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 />
+          <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>
+    </>
   );
 };