Skip to content

Commit d39460b

Browse files
DanielEmmanuel1DanielEmmanuel1
authored
Merge pull request #10 from devJaja/feat/OnboardingPage
features: implementing the third step of the Spherre account creation process,…
2 parents 6eb7358 + c11e0d7 commit d39460b

File tree

9 files changed

+231
-0
lines changed

9 files changed

+231
-0
lines changed

‎frontend/app/components/Header.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import Image from 'next/image'
3+
import Logo from '@/public/Images/spherrelogo.png'
4+
import Avatar from '@/public/Images/avatarr.png'
5+
6+
const Header = () => {
7+
return (
8+
<header className="bg-black text-white flex justify-between items-center p-4 fixed top-0 w-full z-10">
9+
<div className="w-[155.12px] h-[37px] flex items-center gap-[8.12px] text-white p-2">
10+
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center">
11+
<Image src={Logo} alt="" />
12+
</div>
13+
<h1 className="font-['Nunito_Sans'] font-bold text-[28.88px] leading-[49.63px] tracking-[2%] text-center">
14+
Spherre
15+
</h1>
16+
</div>
17+
18+
<nav className="hidden md:flex space-x-8 lg:ml-6">
19+
<a href="#" className="text-gray-400 text-white">
20+
Docs
21+
</a>
22+
<a href="#" className="text-gray-400 text-white">
23+
Telegram
24+
</a>
25+
<a href="#" className="text-gray-400 text-white">
26+
Twitter
27+
</a>
28+
</nav>
29+
30+
{/* User Profile */}
31+
<div className="flex items-center w-[188px] h-[50px] gap-[8px] rounded-[50px] border-[1.5px] p-[10px_20px] border border-white border-[1.5px]">
32+
<div className="w-8 h-8 bg-[#4A90E2] rounded-full flex items-center justify-center mr-2">
33+
<Image src={Avatar} alt=""></Image>
34+
</div>
35+
<span className="text-white text-sm">0x60...5542</span>
36+
</div>
37+
</header>
38+
)
39+
}
40+
41+
export default Header

‎frontend/app/components/MembersThreshold.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import Image from 'next/image'
3+
import Users from '@/public/Images/users-group.png'
4+
import Book from '@/public/Images/fluent-book.png'
5+
6+
const MembersThreshold = ({ members = 3, threshold = '1/2' }) => {
7+
return (
8+
<div className="w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl bg-[#1C1D1F] rounded-lg p-6">
9+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
10+
<div className="bg-[#272729] rounded-lg p-4 flex items-center justify-between">
11+
<div className="flex flex-col items-start gap-6">
12+
<Image src={Users} alt="" className="w-8 h-8" />
13+
<p className="text-sm text-gray-400">Members</p>
14+
</div>
15+
<p className="font-['Nunito_Sans'] font-bold text-3xl sm:text-4xl leading-tight text-right">
16+
{members}
17+
</p>
18+
</div>
19+
20+
<div className="bg-[#272729] rounded-lg p-4 flex items-center justify-between">
21+
<div className="flex flex-col items-start gap-6">
22+
<Image src={Book} alt="" className="w-8 h-8" />
23+
<p className="text-sm text-gray-400">Threshold</p>
24+
</div>
25+
<p className="font-['Nunito_Sans'] font-bold text-3xl sm:text-4xl leading-tight text-right">
26+
{threshold}
27+
</p>
28+
</div>
29+
</div>
30+
31+
<div className="flex flex-col sm:flex-row gap-3">
32+
<button className="w-full sm:w-1/2 py-2 bg-[#272729] text-white rounded-lg hover:bg-gray-600">
33+
Back
34+
</button>
35+
<button className="w-full sm:w-1/2 py-2 bg-white text-black rounded-lg hover:bg-gray-200">
36+
Confirm
37+
</button>
38+
</div>
39+
</div>
40+
)
41+
}
42+
43+
export default MembersThreshold

‎frontend/app/components/SphereAccountReview.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
'use client'
2+
import React, { useState } from 'react'
3+
import Image from 'next/image'
4+
import Fill from '@/public/Images/sphere-fill.png'
5+
6+
const SphereAccountReview = ({
7+
groupName = 'Backstage Boys',
8+
members = 'Deon, John and Joshua',
9+
deployFee = '~0.0530 SOL',
10+
}) => {
11+
const [showTooltip, setShowTooltip] = useState(false)
12+
13+
return (
14+
<div className="w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl bg-[#272729] rounded-lg overflow-hidden">
15+
{/* Header */}
16+
<h1 className="text-lg sm:text-xl font-semibold bg-[#272729] h-16 flex items-center px-6 text-white">
17+
Review your Sphere Account
18+
</h1>
19+
20+
{/* Content */}
21+
<div className="w-full bg-[#1C1D1F] p-6 rounded-b-lg">
22+
{/* Group Name */}
23+
<div className="flex items-center mb-4">
24+
<div className="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center mr-3">
25+
<Image src={Fill} alt="" className="w-6 h-6" />
26+
</div>
27+
<h2 className="font-['Nunito_Sans'] font-bold text-xl sm:text-2xl md:text-3xl leading-tight">
28+
{groupName}
29+
</h2>
30+
</div>
31+
32+
{/* Members */}
33+
<p className="text-sm text-gray-400">Members: {members}</p>
34+
35+
{/* Deploy Fee Section */}
36+
<div className="mb-4 relative">
37+
<div className="flex flex-wrap gap-6 py-3 items-center">
38+
<p className="text-sm text-white">
39+
Deploy Fee{' '}
40+
<span
41+
className="text-gray-400 cursor-pointer ml-2"
42+
onMouseEnter={() => setShowTooltip(true)}
43+
onMouseLeave={() => setShowTooltip(false)}
44+
>
45+
ⓘ
46+
</span>
47+
</p>
48+
<p className="font-['Nunito_Sans'] font-bold text-xl sm:text-2xl md:text-3xl text-white">
49+
{deployFee}
50+
</p>
51+
</div>
52+
53+
{/* Tooltip */}
54+
{showTooltip && (
55+
<div className="absolute left-0 top-12 bg-gray-800 text-white text-xs p-2 rounded-lg w-52">
56+
More info about the deploy fee will go here.
57+
</div>
58+
)}
59+
60+
{/* Info Text */}
61+
<p className="text-xs text-gray-500 mt-2">
62+
<span
63+
className="text-gray-400 mr-2 cursor-pointer"
64+
onMouseEnter={() => setShowTooltip(true)}
65+
onMouseLeave={() => setShowTooltip(false)}
66+
>
67+
ⓘ
68+
</span>
69+
This info section should explain why there is a {deployFee} deploy
70+
fee. Please the information should be quite detailed.
71+
</p>
72+
</div>
73+
</div>
74+
</div>
75+
)
76+
}
77+
78+
export default SphereAccountReview

‎frontend/app/components/Stepper.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
3+
const Stepper = () => {
4+
return (
5+
<div className="flex items-center justify-center space-x-4 mt-16 mb-8">
6+
{/* Step 1 */}
7+
<div className="flex flex-col items-center">
8+
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white">
9+
1
10+
</div>
11+
<span className="text-gray-400 text-sm mt-2">Account Details</span>
12+
</div>
13+
<div className="w-12 h-0.5 bg-gray-600"></div>
14+
15+
{/* Step 2 */}
16+
<div className="flex flex-col items-center">
17+
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white">
18+
2
19+
</div>
20+
<span className="text-gray-400 text-sm mt-2">Member & Threshold</span>
21+
</div>
22+
<div className="w-12 h-0.5 bg-gray-600"></div>
23+
24+
{/* Step 3 (Active) */}
25+
<div className="flex flex-col items-center">
26+
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white">
27+
3
28+
</div>
29+
<span className="text-white text-sm mt-2">Confirm & Setup</span>
30+
</div>
31+
</div>
32+
)
33+
}
34+
35+
export default Stepper

‎frontend/app/confirmSetup/page.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Header from '../components/Header'
2+
import Stepper from '../components/Stepper'
3+
import SphereAccountReview from '../components/SphereAccountReview'
4+
import MembersThreshold from '../components/MembersThreshold'
5+
6+
export default function Home() {
7+
return (
8+
<div className="min-h-screen bg-black text-white">
9+
<Header />
10+
11+
{/* Main Container */}
12+
<div className="flex flex-col items-center px-4 pt-16 sm:pt-20 md:pt-24 pb-6 sm:pb-8">
13+
<Stepper />
14+
15+
{/* Heading & Description */}
16+
<div className="w-full max-w-[456px] text-center">
17+
<h1 className="font-['Nunito_Sans'] font-bold text-2xl sm:text-3xl md:text-4xl leading-[1.2] tracking-[-0.8px] mb-3 sm:mb-4">
18+
Confirm and Secure Your Setup
19+
</h1>
20+
<p className="text-gray-400 text-sm sm:text-base mb-6 sm:mb-8 max-w-lg mx-auto">
21+
Review your vault configuration, approve key settings, and finalize
22+
your setup.
23+
</p>
24+
</div>
25+
26+
{/* Review & Threshold Sections */}
27+
<div className="w-full max-w-lg flex flex-col items-center space-y-4">
28+
<SphereAccountReview />
29+
<MembersThreshold />
30+
</div>
31+
</div>
32+
</div>
33+
)
34+
}

‎frontend/public/Images/avatarr.png‎

1.36 KB
Loading

‎frontend/public/Images/fluent-book.png‎

662 Bytes
Loading

‎frontend/public/Images/sphere-fill.png‎

695 Bytes
Loading

‎frontend/public/Images/users-group.png‎

1008 Bytes
Loading

0 commit comments

Comments
 (0)