cerc-io/testnet-onboarding-app
16
0
Fork 2
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

onboarding

Browse Source
This commit is contained in:
Vivian Phung 2024-08-09 01:54:48 +01:00
parent 214dfaba8a
commit 2657a4e146
No known key found for this signature in database
4 changed files with 140 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/App.tsx
View File

@ -1,5 +1,10 @@
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from "react-router-dom";
import ConnectWallet from "./pages/ConnectWallet";
import SignWithNitroKey from "./pages/SignWithNitroKey";
@ -9,7 +14,7 @@ import OnboardingSuccess from "./pages/OnboardingSuccess";
import SignPageLayout from "./layout/SignPageLayout";
import UserVerification from "./pages/UserVerification";
import TermsAndConditions from "./pages/TermsAndConditions";
import Header from "./components/Header";
import HeaderPageLayout from "./layout/HeaderPageLayout";
import { WalletConnectProvider } from "./context/WalletConnectContext";
import VerifyEmail from "./pages/VerifyEmail";
import Email from "./pages/Email";
@ -20,23 +25,36 @@ import "./App.css";
function App() {
return (
<Router>
<Header />
<WalletConnectProvider>
<Routes>
<Route path="/" element={<TermsAndConditions />} />
<Route path="/" element={<Navigate to="/verify-email" replace />} />
<Route
path="/terms-and-conditions"
element={<TermsAndConditions />}
/>
<Route path="/verify-email" element={<VerifyEmail />} />
<Route path="/email" element={<Email />} />
<Route path="/connect-wallet" element={<ConnectWallet />} />
<Route path="/thanks" element={<Thanks />} />
<Route element={<SignPageLayout />}>
<Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
<Route path="/user-verification" element={<UserVerification />} />
<Route path="/sign-with-cosmos" element={<SignWithCosmos />} />
<Route
path="/onboarding-success"
element={<OnboardingSuccess />}
></Route>
{/* Routes with Header */}
<Route element={<HeaderPageLayout />}>
<Route path="/connect-wallet" element={<ConnectWallet />} />
<Route path="/thanks" element={<Thanks />} />
{/* SignPageLayout nested inside HeaderPageLayout */}
<Route element={<SignPageLayout />}>
<Route
path="/sign-with-nitro-key"
element={<SignWithNitroKey />}
/>
<Route path="/user-verification" element={<UserVerification />} />
<Route path="/sign-with-cosmos" element={<SignWithCosmos />} />
<Route
path="/onboarding-success"
element={<OnboardingSuccess />}
/>
</Route>
</Route>
<Route path="*" element={<PageNotFound />} />
</Routes>
</WalletConnectProvider>

15
src/layout/HeaderPageLayout.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
import { Outlet } from "react-router-dom";
import Header from "../components/Header";
const HeaderPageLayout: React.FC = () => {
return (
<>
<Header />
<Outlet />
</>
);
};
export default HeaderPageLayout;

28
src/pages/TermsAndConditions.tsx
View File

@ -1,26 +1,30 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import React from "react";
import { useNavigate } from "react-router-dom";
import { Container, Button, Box, Paper } from '@mui/material';
import { Container, Button, Box, Paper } from "@mui/material";
import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
import TermsAndConditionsBox from "../components/TermsAndConditionsBox";
const TermsAndConditions = () => {
const navigate = useNavigate();
const handleAccept = () => {
navigate('/verify-email');
navigate("/verify-email");
};
return (
<Container maxWidth="lg">
<Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '83vh', display: 'flex', flexDirection: 'column' }}>
<TermsAndConditionsBox height='80vh' />
<Box mt={2} display="flex" justifyContent="center">
<Button variant="contained" color="primary" onClick={handleAccept}>
Accept
</Button>
</Box>
<Paper
elevation={3}
style={{
padding: "2rem",
marginTop: "2rem",
height: "83vh",
display: "flex",
flexDirection: "column",
}}
>
<TermsAndConditionsBox height="80vh" />
</Paper>
</Container>
);

98
src/pages/VerifyEmail.tsx
View File

@ -1,24 +1,80 @@
import React from 'react'
import React from "react";
import { LaconicWithTextIcon } from "../components/CustomIcon";
const VerifyEmail = () => {
const VerifyEmail: React.FC = () => {
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>
)
}
<div className="w-full min-h-screen bg-gradient-to-b from-[#0000f4] to-[#0f0f0f] flex justify-center items-center px-8 pt-8 pb-16">
<div className="w-full max-w-5xl px-8 pt-8 pb-16 bg-[#181719] rounded-lg flex flex-col md:flex-row gap-20">
<div className="md:w-1/2 flex-col justify-start items-start gap-12 inline-flex">
<div className="w-28 h-5 relative">
<LaconicWithTextIcon color="white" />
</div>
<div className="flex-col justify-start items-start gap-6 flex">
<h1 className="text-[#fbfbfb] text-4xl font-normal font-['Arthemys Display'] leading-10">
LORO Testnet
</h1>
<p className="text-[#bdbcc3] text-lg font-normal font-['TT Hoves'] leading-relaxed">
Register to join the Loro Testnet
</p>
</div>
<a
href="#"
className="text-[#fbfbfb] text-sm font-normal font-['TT Hoves'] underline leading-tight"
>
Read the Docs
</a>
</div>
export default VerifyEmail
<div className="md:w-1/2 pt-16 flex-col justify-between items-end inline-flex">
<form className="w-full space-y-6">
<div className="flex-col justify-start items-start gap-2 flex">
<label
htmlFor="email"
className="text-[#fbfbfb] text-base font-normal font-['TT Hoves'] leading-normal"
>
Email Address
</label>
<input
id="email"
name="email"
type="email"
required
className="w-full h-12 px-3 bg-[#29292d] rounded border border-[#47464f] text-[#fbfbfb] text-sm font-normal font-['TT Hoves'] leading-tight focus:outline-none focus:ring-2 focus:ring-[#0000f4]"
placeholder="Enter Email"
/>
</div>
<div className="flex items-center gap-2">
<input
id="terms"
name="terms"
type="checkbox"
className="w-4 h-4 bg-[#29292d] rounded border border-[#47464f]"
/>
<label
htmlFor="terms"
className="text-[#fbfbfb] text-sm font-normal font-['TT Hoves'] leading-tight"
>
I agree to the{" "}
<a href="/terms-and-conditions" target="_blank" rel="noopener">
<span className="underline">Terms & Conditions</span>
</a>
</label>
</div>
<div className="flex justify-end pt-28">
<button
type="submit"
className="w-60 h-12 px-6 py-4 bg-[#0000f4] rounded justify-center items-center inline-flex"
>
<span className="text-center text-[#fbfbfb] text-lg font-normal font-['DM Mono'] uppercase leading-none tracking-tight">
Register
</span>
</button>
</div>
</form>
</div>
</div>
</div>
);
};
export default VerifyEmail;