Display onboarded participant if transaction is successful (#16)

* Add new page for onboarding success

* Display onboarded participant

* Initialise registry outside useEffect

* Fetch single participant object instead of array

.env.example

@@ -1,3 +1,4 @@
 REACT_APP_WALLET_CONNECT_ID=
 REACT_APP_ETHEREUM_MAINNET_CHAIN_ID=1
 REACT_APP_LACONICD_CHAIN_ID=laconic_9000-1
+REACT_APP_REGISTRY_GQL_ENDPOINT=http://localhost:9473/api

src/App.tsx

@@ -5,6 +5,7 @@ import ConnectWallet from "./pages/ConnectWallet";
 import SignWithEthereum from "./pages/SignWithEthereum";
 import SignWithCosmos from "./pages/SignWithCosmos";
 import PageNotFound from "./pages/PageNotFound";
+import OnboardingSuccess from "./pages/OnboardingSuccess";
 import SignPageLayout from "./layout/SignPageLayout";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
 
@@ -20,6 +21,10 @@ function App() {
               path="/sign-with-cosmos/:cosmosAddress/:ethSignature"
               element={<SignWithCosmos />}
             />
+            <Route
+              path="/onboarding-success/:cosmosAddress"
+              element={<OnboardingSuccess />}
+            ></Route>
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Routes>

src/pages/OnboardingSuccess.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { useParams } from "react-router-dom";
+
+import { Box, Typography } from "@mui/material";
+import { Registry } from "@cerc-io/registry-sdk";
+
+interface Participant {
+  cosmos_address: string;
+  ethereum_address: string;
+}
+
+const registry = new Registry(
+  process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!
+);
+
+const OnboardingSuccess = () => {
+  const { cosmosAddress } = useParams();
+
+  const [participant, setParticipant] = useState<Participant>();
+
+  useEffect(() => {
+    const fetchParticipants = async () => {
+      try {
+        const allParticipants: Participant[] = await registry.getParticipants();
+        const participant = allParticipants.find(
+          (participant) => participant.cosmos_address === cosmosAddress
+        );
+
+        if (!participant) {
+          enqueueSnackbar("Participant not found", { variant: "error" });
+          return;
+        }
+
+        setParticipant(participant);
+      } catch (error) {
+        console.error("Error fetching participants", error);
+      }
+    };
+
+    fetchParticipants();
+  }, [cosmosAddress]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        marginTop: "100px",
+        gap: "10px",
+      }}
+    >
+      <Typography variant="h5">Transaction Successful</Typography>
+      <Typography variant="body1">
+        Participant onboarded: <br />
+      </Typography>
+      <Box
+        sx={{
+          backgroundColor: "lightgray",
+          padding: 3,
+          wordWrap: "break-word",
+        }}
+      >
+        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+          {participant && (
+            <div>
+              Cosmos Address: {participant.cosmos_address} <br />
+              Ethereum Address: {participant.ethereum_address} <br />
+              <br />
+            </div>
+          )}
+        </pre>
+      </Box>
+      <SnackbarProvider />
+    </Box>
+  );
+};
+
+export default OnboardingSuccess;

src/pages/SignWithCosmos.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { useParams, useLocation } from "react-router-dom";
+import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { SnackbarProvider, enqueueSnackbar } from "notistack";
 
 import { Box, Typography } from "@mui/material";
@@ -18,6 +18,7 @@ const SignWithCosmos = () => {
 
   const [isLoading, setIsLoading] = useState(false);
 
+  const navigate = useNavigate();
   const location = useLocation();
   const innerMessage = location.state;
   const ethAddress = innerMessage.address;
@@ -59,7 +60,7 @@ const SignWithCosmos = () => {
       if (responseFromWallet.code !== 0) {
         enqueueSnackbar("Transaction not sent", { variant: "error" });
       } else {
-        enqueueSnackbar("Transaction successful", { variant: "success" });
+        navigate(`/onboarding-success/${cosmosAddress}`);
       }
     } catch (error) {
       console.error(error);