style: add back t&c text and style pre block

This commit is contained in:
Cody Bender 2024-08-10 16:13:22 -04:00 committed by Nabarun
parent 31e3b75dfa
commit 3fe0576f34
2 changed files with 90 additions and 25 deletions

View File

@ -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={() => {

View File

@ -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>