Skip to content

Commit 18c8cac

Browse files
SudiptaPaul-31SudiptaPaul-31
authored
Merge pull request #63 from mitchellecm7/feat-2-wallet-component
feat: add wallet connect/disconnect component with Freighter integration
2 parents ae5a91e + 96b086e commit 18c8cac

3 files changed

Lines changed: 654 additions & 73 deletions

File tree

‎app/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function Home() {
1212
<main className="min-h-screen">
1313
<Navbar />
1414
<Hero />
15+
1516
<Features />
1617
<HowItWorks />
1718
<Benefits />

‎components/navbar.tsx‎

Lines changed: 251 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,306 @@
1-
'use client'
1+
// // 'use client'
22

3-
import Link from 'next/link'
4-
import { Button } from '@/components/ui/button'
5-
import { Menu, X, Wallet } from 'lucide-react'
6-
import { useState, useEffect } from 'react'
7-
import Image from 'next/image'
8-
import { ThemeToggle } from './ui/ThemeToggle'
3+
// // import Link from 'next/link'
4+
// // import { Button } from '@/components/ui/button'
5+
// // import { Menu, X, Wallet } from 'lucide-react'
6+
// // import { useState, useEffect } from 'react'
7+
// // import Image from 'next/image'
8+
// // import { ThemeToggle } from './ui/ThemeToggle'
9+
10+
// // export function Navbar() {
11+
// // const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
12+
// // const [address, setAddress] = useState<string | null>(null)
13+
14+
// // useEffect(() => {
15+
// // const savedAddress = localStorage.getItem('stellar_wallet_address')
16+
// // if (savedAddress && savedAddress !== address) {
17+
// // // eslint-disable-next-line react-hooks/set-state-in-effect
18+
// // setAddress(savedAddress)
19+
// // }
20+
// // }, [address])
21+
22+
// // const formatAddress = (addr: string) => {
23+
// // if (!addr || addr.length <= 10) return addr;
24+
// // return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
25+
// // }
26+
27+
// // return (
28+
// // <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
29+
// // <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
30+
// // <div className="flex h-16 items-center justify-between">
31+
// // <div className="flex items-center gap-2">
32+
// // <Image
33+
// // src='/assets/logo2.png'
34+
// // alt="Logo"
35+
// // width={20}
36+
// // height={20}
37+
// // className="h-10 w-10 object-cover"
38+
// // />
39+
// // <span className="text-xl font-bold text-foreground">TaskChain</span>
40+
// // </div>
41+
42+
// // <div className="hidden md:flex items-center gap-8">
43+
// // <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
44+
// // Features
45+
// // </Link>
46+
// // <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
47+
// // How It Works
48+
// // </Link>
49+
// // <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
50+
// // Benefits
51+
// // </Link>
52+
// // <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
53+
// // Testimonials
54+
// // </Link>
55+
// // </div>
56+
57+
// // <div className="hidden md:flex items-center gap-4">
58+
// // {address ? (
59+
// // <Button variant="outline" asChild>
60+
// // <Link href="/login">
61+
// // <Wallet className="w-4 h-4 mr-2" />
62+
// // {formatAddress(address)}
63+
// // </Link>
64+
// // </Button>
65+
// // ) : (
66+
// // <>
67+
// // <Button variant="ghost" asChild>
68+
// // <Link href="/login">Login</Link>
69+
// // </Button>
70+
// // <Button asChild>
71+
// // <Link href="/signup">Get Started</Link>
72+
// // </Button>
73+
// // <ThemeToggle />
74+
// // </>
75+
// // )}
76+
77+
78+
// // </div>
79+
80+
// // <button
81+
// // className="md:hidden p-2 text-muted-foreground hover:text-foreground"
82+
// // onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
83+
// // >
84+
// // {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
85+
// // </button>
86+
// // </div>
87+
// // </div>
88+
89+
// // {mobileMenuOpen && (
90+
// // <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
91+
// // <div className="px-4 py-6 space-y-4">
92+
// // <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
93+
// // Features
94+
// // </Link>
95+
// // <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
96+
// // How It Works
97+
// // </Link>
98+
// // <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
99+
// // Benefits
100+
// // </Link>
101+
// // <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
102+
// // Testimonials
103+
// // </Link>
104+
// // <div className="pt-4 space-y-2">
105+
// // {address ? (
106+
// // <Button variant="outline" className="w-full" asChild>
107+
// // <Link href="/login">
108+
// // <Wallet className="w-4 h-4 mr-2" />
109+
// // {formatAddress(address)}
110+
// // </Link>
111+
// // </Button>
112+
// // ) : (
113+
// // <>
114+
// // <Button variant="ghost" className="w-full" asChild>
115+
// // <Link href="/login">Login</Link>
116+
// // </Button>
117+
// // <Button className="w-full" asChild>
118+
// // <Link href="/signup">Get Started</Link>
119+
// // </Button>
120+
// // </>
121+
// // )}
122+
// // </div>
123+
// // </div>
124+
// // </div>
125+
// // )}
126+
// // </nav>
127+
// // )
128+
// // }
129+
130+
// 'use client'
131+
132+
// import Link from 'next/link'
133+
// import { Button } from '@/components/ui/button'
134+
// import { Menu, X } from 'lucide-react'
135+
// import { useState } from 'react'
136+
// import Image from 'next/image'
137+
// import { ThemeToggle } from './ui/ThemeToggle'
138+
// import { WalletConnect } from '@/components/wallet-connect'
139+
140+
// export function Navbar() {
141+
// const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
142+
143+
// return (
144+
// <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
145+
// <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
146+
// <div className="flex h-16 items-center justify-between">
147+
// <div className="flex items-center gap-2">
148+
// <Image
149+
// src='/assets/logo2.png'
150+
// alt="Logo"
151+
// width={20}
152+
// height={20}
153+
// className="h-10 w-10 object-cover"
154+
// />
155+
// <span className="text-xl font-bold text-foreground">TaskChain</span>
156+
// </div>
157+
158+
// <div className="hidden md:flex items-center gap-8">
159+
// <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
160+
// Features
161+
// </Link>
162+
// <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
163+
// How It Works
164+
// </Link>
165+
// <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
166+
// Benefits
167+
// </Link>
168+
// <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
169+
// Testimonials
170+
// </Link>
171+
// </div>
172+
173+
// <div className="hidden md:flex items-center gap-4">
174+
// <WalletConnect />
175+
// <ThemeToggle />
176+
// </div>
177+
178+
// <button
179+
// className="md:hidden p-2 text-muted-foreground hover:text-foreground"
180+
// onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
181+
// >
182+
// {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
183+
// </button>
184+
// </div>
185+
// </div>
186+
187+
// {mobileMenuOpen && (
188+
// <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
189+
// <div className="px-4 py-6 space-y-4">
190+
// <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
191+
// Features
192+
// </Link>
193+
// <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
194+
// How It Works
195+
// </Link>
196+
// <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
197+
// Benefits
198+
// </Link>
199+
// <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
200+
// Testimonials
201+
// </Link>
202+
// <div className="pt-4 flex flex-col gap-2">
203+
// <WalletConnect />
204+
// <ThemeToggle />
205+
// </div>
206+
// </div>
207+
// </div>
208+
// )}
209+
// </nav>
210+
// )
211+
// }
212+
213+
"use client";
214+
215+
import Link from "next/link";
216+
import { Button } from "@/components/ui/button";
217+
import { Menu, X } from "lucide-react";
218+
import { useState } from "react";
219+
import Image from "next/image";
220+
import { ThemeToggle } from "./ui/ThemeToggle";
221+
import { WalletConnect } from "@/components/wallet-connect";
9222

10223
export function Navbar() {
11-
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
12-
const [address, setAddress] = useState<string | null>(null)
13-
14-
useEffect(() => {
15-
const savedAddress = localStorage.getItem('stellar_wallet_address')
16-
if (savedAddress && savedAddress !== address) {
17-
// eslint-disable-next-line react-hooks/set-state-in-effect
18-
setAddress(savedAddress)
19-
}
20-
}, [address])
21-
22-
const formatAddress = (addr: string) => {
23-
if (!addr || addr.length <= 10) return addr;
24-
return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
25-
}
224+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
26225

27226
return (
28227
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
29228
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
30229
<div className="flex h-16 items-center justify-between">
230+
{/* Logo */}
31231
<div className="flex items-center gap-2">
32232
<Image
33-
src='/assets/logo2.png'
233+
src="/assets/logo2.png"
34234
alt="Logo"
35235
width={20}
36236
height={20}
37237
className="h-10 w-10 object-cover"
38238
/>
39-
<span className="text-xl font-bold text-foreground">TaskChain</span>
239+
<span className="text-xl font-bold text-foreground">
240+
TaskChain
241+
</span>
40242
</div>
41243

244+
{/* Desktop Links */}
42245
<div className="hidden md:flex items-center gap-8">
43-
<Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
246+
<Link href="#features" className="text-sm text-muted-foreground hover:text-foreground">
44247
Features
45248
</Link>
46-
<Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
249+
<Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground">
47250
How It Works
48251
</Link>
49-
<Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
252+
<Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground">
50253
Benefits
51254
</Link>
52-
<Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
255+
<Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground">
53256
Testimonials
54257
</Link>
55258
</div>
56259

260+
{/* Desktop Actions */}
57261
<div className="hidden md:flex items-center gap-4">
58-
{address ? (
59-
<Button variant="outline" asChild>
60-
<Link href="/login">
61-
<Wallet className="w-4 h-4 mr-2" />
62-
{formatAddress(address)}
63-
</Link>
64-
</Button>
65-
) : (
66-
<>
67-
<Button variant="ghost" asChild>
68-
<Link href="/login">Login</Link>
69-
</Button>
70-
<Button asChild>
71-
<Link href="/signup">Get Started</Link>
72-
</Button>
73-
<ThemeToggle />
74-
</>
75-
)}
76-
77-
262+
<WalletConnect />
263+
<ThemeToggle />
78264
</div>
79265

266+
{/* Mobile Menu Button */}
80267
<button
81268
className="md:hidden p-2 text-muted-foreground hover:text-foreground"
82269
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
83270
>
84-
{mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
271+
{mobileMenuOpen ? (
272+
<X className="h-6 w-6" />
273+
) : (
274+
<Menu className="h-6 w-6" />
275+
)}
85276
</button>
86277
</div>
87278
</div>
88279

280+
{/* Mobile Menu */}
89281
{mobileMenuOpen && (
90282
<div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
91283
<div className="px-4 py-6 space-y-4">
92-
<Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
284+
<Link href="#features" onClick={() => setMobileMenuOpen(false)}>
93285
Features
94286
</Link>
95-
<Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
287+
<Link href="#how-it-works" onClick={() => setMobileMenuOpen(false)}>
96288
How It Works
97289
</Link>
98-
<Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
290+
<Link href="#benefits" onClick={() => setMobileMenuOpen(false)}>
99291
Benefits
100292
</Link>
101-
<Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
293+
<Link href="#testimonials" onClick={() => setMobileMenuOpen(false)}>
102294
Testimonials
103295
</Link>
104-
<div className="pt-4 space-y-2">
105-
{address ? (
106-
<Button variant="outline" className="w-full" asChild>
107-
<Link href="/login">
108-
<Wallet className="w-4 h-4 mr-2" />
109-
{formatAddress(address)}
110-
</Link>
111-
</Button>
112-
) : (
113-
<>
114-
<Button variant="ghost" className="w-full" asChild>
115-
<Link href="/login">Login</Link>
116-
</Button>
117-
<Button className="w-full" asChild>
118-
<Link href="/signup">Get Started</Link>
119-
</Button>
120-
</>
121-
)}
296+
297+
<div className="pt-4 flex flex-col gap-2">
298+
<WalletConnect />
299+
<ThemeToggle />
122300
</div>
123301
</div>
124302
</div>
125303
)}
126304
</nav>
127-
)
128-
}
305+
);
306+
}

0 commit comments

Comments
 (0)