src/App.tsx

@@ -11,6 +11,8 @@ import UserVerification from "./pages/UserVerification";
 import TermsAndConditions from "./pages/TermsAndConditions";
 import Header from "./components/Header";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
+import VerifyEmail from "./pages/VerifyEmail";
+import RedirectEmail from "./pages/RedirectEmail";
 
 function App() {
   return (
@@ -19,6 +21,8 @@ function App() {
       <WalletConnectProvider>
         <Routes>
           <Route path="/" element={<TermsAndConditions />} />
+          <Route path="/verify-email" element={<VerifyEmail />} />
+          <Route path="/email" element={<RedirectEmail/>} />
           <Route path="/connect-wallet" element={<ConnectWallet />} />
           <Route element={<SignPageLayout />}>
             <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />

src/constants.ts

@@ -30,4 +30,6 @@ export const TNC_PARTICIPANT_CONTENT = `Lorem ipsum dolor sit amet, consectetur
 
 export const WALLET_DISCLAIMER_MSG = 'You are connecting to an experimental wallet! It is not secure. Do not use it elsewhere and/or for managing real assets.'
 
+export const REDIRECT_EMAIL_MSG = 'Please check your inbox and click the link to verify your email address.'
+
 export const ENABLE_KYC = false;

src/pages/RedirectEmail.tsx

@@ -0,0 +1,31 @@
+import { Box, Typography } from '@mui/material'
+import React from 'react'
+import { REDIRECT_EMAIL_MSG } from '../constants'
+
+const RedirectEmail = () => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      marginY={20}
+      marginX={50}
+      sx={{
+        border: 1,
+        borderColor: 'grey.500',
+      }}
+      padding={5}
+
+    >
+      <Typography variant="h4" component="h1" gutterBottom>
+      Thank you for registering!
+      </Typography>
+      <Typography variant="body1">
+        {REDIRECT_EMAIL_MSG}
+      </Typography>
+    </Box>
+  )
+}
+
+export default RedirectEmail

src/pages/TermsAndConditions.tsx

@@ -9,7 +9,7 @@ const TermsAndConditions = () => {
   const navigate = useNavigate();
 
   const handleAccept = () => {
-    navigate('/connect-wallet');
+    navigate('/verify-email');
   };
 
   return (

src/pages/VerifyEmail.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const VerifyEmail = () => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', margin: '20vh' }}>
+      <iframe
+        title="verify-email"
+        src="https://embeds.beehiiv.com/18aaa245-3652-4b0a-94a9-a87054df4914"
+        data-test-id="beehiiv-embed"
+        width="480"
+        height="320"
+        frameBorder="0"
+        scrolling="no"
+        style={{
+          borderRadius: '4px',
+          border: '2px solid #e5e7eb',
+          backgroundColor: 'transparent',
+        }}
+      ></iframe>
+    </div>
+  )
+}
+
+export default VerifyEmail