testnet-onboarding-app/src/pages/OnboardingSuccess.tsx

import React, { useEffect, useState } from "react";
import { enqueueSnackbar } from "notistack";
import { useLocation } from "react-router-dom";

import { Box, Typography } from "@mui/material";
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 { ENABLE_KYC, SUBSCRIBER_ID_HASH_KEY } from "../constants";

interface Participant {
  cosmosAddress: string;
  nitroAddress: string;
  role: string;
  kycId: string;
}

const registry = new Registry(
  process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!
);

const OnboardingSuccess = () => {
  const location = useLocation();
  const { cosmosAddress } = location.state as {
    cosmosAddress?: string
  };

  const [participant, setParticipant] = useState<Participant>();
  const [token, setToken] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);

  const messageHandler: MessageHandler = (event, payload) => {
    console.log('sumsubEvent:', event, payload);
  };

  useEffect(() => {
    const fetchParticipants = async () => {
      try {
        if (!cosmosAddress) {
          enqueueSnackbar("Cosmos address is not provided", { variant: "error" });
          return;
        }
        const participant: Participant = await registry.getParticipantByAddress(cosmosAddress);
        if (!participant) {
          enqueueSnackbar("Participant not found", { variant: "error" });
          return;
        }

        localStorage.removeItem(SUBSCRIBER_ID_HASH_KEY);

        setParticipant(participant);
      } catch (error) {
        console.error("Error fetching participants", error);
      }
    };

    fetchParticipants();
  }, [cosmosAddress]);

  useEffect(() => {
    const getToken = async (userId: string) => {
      const newToken = await fetchAccessToken(userId);
      setToken(newToken);
      setLoading(false);
    };

    if (cosmosAddress && ENABLE_KYC) {
      getToken(cosmosAddress).catch(error => {
        console.error(error);
        alert("Failed to fetch token");
      });
    }
  }, [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",
            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 />
              </div>
            )}
          </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>
        ) : ''
        }
      </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>
    </>
  );
};

export default OnboardingSuccess;