Skip to content

Commit 6eb7358

Browse files
DanielEmmanuel1DanielEmmanuel1
authored
Merge pull request #9 from Signor1/main
Created (STEP 1) of Spherre Dapp Onboarding Page
2 parents 9238f3f + 8d1e2f7 commit 6eb7358

File tree

12 files changed

+274
-14
lines changed

12 files changed

+274
-14
lines changed

‎frontend/app/onboarding/step1/page.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Nav from '@/components/onboarding/Nav'
2+
import StepOne from '@/components/onboarding/StepOne'
3+
4+
export default function UserOnBoarding() {
5+
return (
6+
<main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden">
7+
<Nav />
8+
<StepOne />
9+
</main>
10+
)
11+
}

‎frontend/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Welcome from './components/welcome'
1+
import Welcome from '../components/welcome'
22

33
export default function Home() {
44
return (
5-
<div className="">
5+
<div className="w-full">
66
<Welcome />
77
</div>
88
)

‎frontend/app/step4/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ConfirmationFooter from '../components/ConfirmationFooter'
1+
import ConfirmationFooter from '../../components/ConfirmationFooter'
22
import ReviewAccount from './ReviewAccount'
33

44
export default function Page() {

frontend/app/components/ConfirmationFooter.tsx renamed to frontend/components/ConfirmationFooter.tsx

File renamed without changes.

‎frontend/components/onboarding/Nav.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
'use client'
2+
import React, { useEffect, useState } from 'react'
3+
import Logo from '../shared/Logo'
4+
import spherreLogo from '../../public/Images/spherrelogo.png'
5+
import Link from 'next/link'
6+
import WalletConnected from '../shared/WalletConnected'
7+
import { IoMdMenu } from 'react-icons/io'
8+
import { IoClose } from 'react-icons/io5'
9+
10+
const Nav = () => {
11+
12+
const [openMenu, setOpenMenu] = useState(false);
13+
14+
const handleToggle = () => {
15+
setOpenMenu(!openMenu);
16+
}
17+
18+
// to avoid body scroll on menu open
19+
useEffect(() => {
20+
if (openMenu) {
21+
document.body.style.overflow = "hidden";
22+
} else {
23+
document.body.style.overflow = "unset";
24+
}
25+
})
26+
27+
// Navigation links
28+
const navlinks: { name: string, href: string }[] = [
29+
{ name: "Docs", href: "/" },
30+
{ name: "Telegram", href: "/" },
31+
{ name: "Twitter", href: "/" }
32+
]
33+
return (
34+
<header className="w-full flex justify-between items-center">
35+
{/* Logo */}
36+
<Logo href={'/'} className='md:w-[50px] w-[40px]' image={spherreLogo} />
37+
38+
{/* Links */}
39+
<ul className="md:flex hidden items-center gap-6">
40+
{
41+
navlinks.map((link, index) => (
42+
<li key={index} className="text-base font-medium text-white">
43+
<Link href={link.href}>{link.name}</Link>
44+
</li>
45+
))
46+
}
47+
</ul>
48+
49+
{/* Connect button & Hamburger Menu Button */}
50+
<div className="flex items-center gap-4">
51+
{/* Connected wallet */}
52+
<WalletConnected address='0x5B8ecaB7096F8aBED873D246629ef9f05f467605' />
53+
54+
{/* Hamburger Menu */}
55+
<button type="button" className='md:hidden block text-3xl text-white' onClick={handleToggle}>
56+
<IoMdMenu />
57+
</button>
58+
</div>
59+
60+
<div className={`fixed top-0 z-[99] w-full h-screen bg-[#101213]/60 transition-all duration-[500ms] ease-[cubic-bezier(0.86,0,0.07,1)] lg:hidden flex justify-end ${openMenu ? "left-0" : "left-[100%]"}`}>
61+
<div className={`w-[80%] h-full bg-[#101213] border-l border-gray-900 flex flex-col gap-10 transition-all duration-[500ms] ease-[cubic-bezier(0.86,0,0.07,1)] px-6 py-8 delay-300 ${openMenu ? "translate-x-0" : "translate-x-full"}`}>
62+
<header className="flex justify-between items-center w-full">
63+
{/* Logo */}
64+
<Logo href={'/'} className='md:w-[50px] w-[40px]' image={spherreLogo} />
65+
{/* Close Menu Button*/}
66+
<button type="button" className='text-3xl text-white' onClick={handleToggle}>
67+
<IoClose />
68+
</button>
69+
</header>
70+
71+
72+
<ul className="flex flex-col mt-6 items-start gap-6">
73+
{
74+
navlinks.map((link, index) => (
75+
<li key={index} className="text-lg font-medium text-white">
76+
<Link href={link.href}>{link.name}</Link>
77+
</li>
78+
))
79+
}
80+
</ul>
81+
</div>
82+
</div>
83+
</header>
84+
)
85+
}
86+
87+
export default Nav

‎frontend/components/onboarding/StepOne.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
'use client'
2+
import { useRouter } from 'next/navigation'
3+
import React, { useState } from 'react'
4+
5+
const StepOne = () => {
6+
const [accountName, setAccountName] = useState("")
7+
const [desc, setDesc] = useState("")
8+
9+
const router = useRouter()
10+
11+
/**
12+
* Handles form submission for Step 1 of the onboarding process.
13+
* Checks if both the account name and description inputs are not empty.
14+
* If not, it throws an error.
15+
* If valid, logs the inputs to console and navigates to Step 2.
16+
* If an error occurs during navigation, it's logged to console.
17+
*/
18+
const handleSubmitStepOne = async () => {
19+
if (!accountName && !desc) {
20+
throw Error("Inputs are required");
21+
}
22+
23+
try {
24+
console.log({ accountName, description: desc });
25+
// Necessay submit logic
26+
router.push("/onboarding/step2");
27+
} catch (error) {
28+
console.error(error)
29+
}
30+
}
31+
32+
return (
33+
<section className="max-w-2xl mx-auto md:mt-28 mt-20">
34+
<main className='w-full flex flex-col items-center gap-6'>
35+
{/* Step Indicators */}
36+
<div className="w-full flex justify-between items-center md:px-8 relative">
37+
{/* Horizontal Lines */}
38+
<div className="absolute top-[22.5px] md:left-[18%] left-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE]"></div>
39+
<div className="absolute top-[22.5px] md:right-[18%] right-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE]"></div>
40+
41+
{/* Step 1 */}
42+
<div className="flex flex-col items-center gap-8 relative">
43+
<div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#6F2FCE] text-white font-[700] text-lg z-10">
44+
1
45+
</div>
46+
<h4 className="text-white text-sm text-center font-[400]">Account Details</h4>
47+
</div>
48+
49+
{/* Step 2 */}
50+
<div className="flex flex-col items-center gap-8 relative">
51+
<div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10">
52+
2
53+
</div>
54+
<h4 className="text-[#8E9BAE] text-sm text-center font-[400]">Members & Threshold</h4>
55+
</div>
56+
57+
{/* Step 3 */}
58+
<div className="flex flex-col items-center gap-8 relative">
59+
<div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10">
60+
3
61+
</div>
62+
<h4 className="text-[#8E9BAE] text-sm text-center font-[400]">Confirm & Setup</h4>
63+
</div>
64+
</div>
65+
66+
{/* Writeup */}
67+
<div className='max-w-sm my-12'>
68+
<h1 className='text-center text-white font-[700] text-[40px] leading-[47.42px]'>Secure Your Digital Assets Seamlessly</h1>
69+
<p className='font-[400] text-[16px] leading-[25px] text-center text-[#8E9BAE] lg:px-8 mt-3'>Name your Spherre account, Spherre ensures seamless integration, giving you full control over your digital assets.</p>
70+
</div>
71+
72+
73+
{/* form */}
74+
<div className='rounded-[10px] bg-[#1C1D1F] w-full overflow-hidden'>
75+
<div className='bg-[#272729] py-[18px] md:px-[26px] px-4 w-full h-[62px]'>
76+
<h4 className="text-white font-[700] text-xl">Create Account</h4>
77+
</div>
78+
79+
{/* Inputs */}
80+
<form onSubmit={handleSubmitStepOne} className='w-full flex flex-col gap-6 py-4 md:px-[26px] px-4'>
81+
{/* Account name */}
82+
<div className='w-full'>
83+
<label htmlFor="accountName" className='font-[400] text-[14px]leading-[24px] text-white mb-1 block'>Spherre Account Name</label>
84+
<input
85+
type='text'
86+
name='accountName'
87+
id='accountName'
88+
value={accountName}
89+
onChange={(e) => setAccountName(e.target.value)}
90+
className='w-full border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none'
91+
placeholder='Enter a team name'
92+
required />
93+
</div>
94+
95+
{/* Description */}
96+
<div className='w-full'>
97+
<label htmlFor="description" className='font-[400] text-[14px]leading-[24px] text-white mb-1 block'>Spherre Description</label>
98+
<textarea
99+
name='description'
100+
id="description"
101+
value={desc}
102+
onChange={(e) => setDesc(e.target.value)}
103+
className='w-full h-[100px] border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none resize-y shadow-[0px_1.08px_2.16px_0px_#1018280A]'
104+
placeholder='Write here...'
105+
required></textarea>
106+
</div>
107+
108+
{/* Button */}
109+
<button type='submit' className='w-full h-[50px] flex justify-center items-center bg-white shadow-[0px_1.08px_2.16px_0px_#1018280A] text-[#101213] font-[500] text-base rounded-[7px]'>Continue</button>
110+
</form>
111+
</div>
112+
</main>
113+
</section>
114+
)
115+
}
116+
117+
export default StepOne

‎frontend/components/shared/Logo.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Image, { StaticImageData } from 'next/image'
2+
import Link from 'next/link'
3+
import React from "react"
4+
5+
6+
const Logo = ({ className, image, href }: { className: string, image: StaticImageData, href: string }) => {
7+
return (
8+
// A reuseable component for rendering Logo
9+
<Link href={href} className="flex items-center gap-2">
10+
<Image src={image} alt="Logo" className={className} width={148} height={148} priority quality={100} />
11+
<span className='text-xl font-semibold'>Spherre</span>
12+
</Link>
13+
)
14+
}
15+
16+
export default Logo

‎frontend/components/shared/WalletConnected.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Image from 'next/image'
2+
import React from 'react'
3+
import avatar from "../../public/Images/avatar.png"
4+
5+
const WalletConnected = ({ address }: { address: string }) => {
6+
return (
7+
<button type='button' className='flex justify-center items-center gap-2 md:w-[188px] md:h-[50px] rounded-[50px] border-[1px] border-white bg-[#101213] font-[600] text-base text-white py-1.5 px-2.5 md:px-0 md:py-0'>
8+
<Image src={avatar} alt='avatar' width={36} height={36} quality={100} priority />
9+
<span className='text-sm md:text-base'>{address.slice(0, 6)}...{address.slice(-4)}</span>
10+
</button>
11+
)
12+
}
13+
14+
export default WalletConnected

frontend/app/components/welcome.tsx renamed to frontend/components/welcome.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
'use client'
12
import Image from 'next/image'
2-
import logo from '../../public/Images/spherrelogo.png'
3-
import wall from '../../public/Images/wall.png'
4-
import add from '../../public/Images/Add.png'
3+
import logo from '../public/Images/spherrelogo.png'
4+
import wall from '../public/Images/wall.png'
5+
import add from '../public/Images/Add.png'
6+
import Logo from './shared/Logo'
7+
import { useRouter } from 'next/navigation'
58

69
const Welcome = () => {
10+
// for navigation
11+
const router = useRouter()
12+
713
return (
814
<div className="flex flex-col lg:flex-row">
915
{/* Left Section with Image */}
@@ -18,10 +24,8 @@ const Welcome = () => {
1824
{/* Right Section */}
1925
<div className="flex-1 flex flex-col justify-between p-4 lg:p-14">
2026
{/* Logo and Title */}
21-
<div className="flex items-center gap-2">
22-
<Image src={logo} height={50} width={50} alt={''} />
23-
<p className="text-xl font-semibold">Spherre</p>
24-
</div>
27+
<Logo className='w-[50px]' href='/' image={logo} />
28+
2529

2630
{/* Centered Content */}
2731
<div className="flex flex-col justify-center items-center flex-1 gap-4">
@@ -33,14 +37,14 @@ const Welcome = () => {
3337
</p>
3438

3539
{/* Responsive Button */}
36-
<button className="bg-white w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3">
40+
<button onClick={() => router.push("/onboarding/step1")} className="bg-white w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3">
3741
<Image src={add} height={30} width={24} alt={'add'} />
3842
<p className="text-black">Create Spherre</p>
3943
</button>
4044
</div>
4145
</div>
4246
</div>
43-
</div>
47+
</div >
4448
)
4549
}
4650

‎frontend/package-lock.json‎

Lines changed: 11 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)