diff --git a/.env.example b/.env.example index abe16ab..449ad5b 100644 --- a/.env.example +++ b/.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 diff --git a/src/App.tsx b/src/App.tsx index 1a58acc..1e5cc2a 100644 --- a/src/App.tsx +++ b/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={} /> + } + > } /> diff --git a/src/pages/OnboardingSuccess.tsx b/src/pages/OnboardingSuccess.tsx new file mode 100644 index 0000000..83280e6 --- /dev/null +++ b/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(); + + 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 ( + + Transaction Successful + + Participant onboarded:
+
+ +
+          {participant && (
+            
+ Cosmos Address: {participant.cosmos_address}
+ Ethereum Address: {participant.ethereum_address}
+
+
+ )} +
+
+ +
+ ); +}; + +export default OnboardingSuccess; diff --git a/src/pages/SignWithCosmos.tsx b/src/pages/SignWithCosmos.tsx index e81a551..20ac42c 100644 --- a/src/pages/SignWithCosmos.tsx +++ b/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);