Skip to content

Fix: update wallet status title color to match Figma design #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Stephan-Thomas wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: update wallet status title color to match Figma design #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Hero } from '@/components/hero'
import { Features } from '@/components/features'
import { HowItWorks } from '@/components/how-it-works'
import { Benefits } from '@/components/benefits'
import { Testimonials } from '@/components/testimonials'
import { CTA } from '@/components/cta'
import { Footer } from '@/components/footer'
import { Navbar } from '@/components/navbar'
import { Hero } from "@/components/hero";
import { Features } from "@/components/features";
import { HowItWorks } from "@/components/how-it-works";
import { Benefits } from "@/components/benefits";
import { Testimonials } from "@/components/testimonials";
import { CTA } from "@/components/cta";
import { Footer } from "@/components/footer";
import { Navbar } from "@/components/navbar";

export default function Home() {
return (
Expand All @@ -19,5 +19,5 @@ export default function Home() {
<CTA />
<Footer />
</main>
)
);
}
72 changes: 72 additions & 0 deletions components/WalletStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
"use client"
import React from "react";

interface WalletStatusProps {
isConnected: boolean;
walletAddress?: string;
network?: "Testnet" | "Mainnet";
onConnect?: () => void;
}

const truncateAddress = (address: string) => {
return `${address.slice(0, 6)}...${address.slice(-4)}`;
};

export const WalletStatus = ({
isConnected,
walletAddress,
network,
onConnect,
}: WalletStatusProps) => {
return (
<div className="w-80 p-6 rounded-xl shadow-md bg-white border border-gray-200">
{/* Status Row */}
<div className="flex items-center gap-2 mb-4">
<span
className={`w-2.5 h-2.5 rounded-full ${
isConnected ? "bg-green-500" : "bg-gray-400"
}`}
></span>

<span
className={`text-sm font-medium ${
isConnected ? "text-green-600" : "text-gray-500"
}`}
>
{isConnected ? "Connected" : "Disconnected"}
</span>
</div>

{/* Connected State */}
{isConnected && walletAddress && (
<>
<p className="text-gray-900 font-semibold text-sm mb-2">
{truncateAddress(walletAddress)}
</p>

{network && (
<span
className={`inline-block px-3 py-1 text-xs rounded-full ${
network === "Mainnet"
? "bg-blue-100 text-blue-700"
: "bg-purple-100 text-purple-700"
}`}
>
{network}
</span>
)}
</>
)}

{/* Disconnected State */}
{!isConnected && (
<button
onClick={onConnect}
className="mt-2 w-full px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors"
>
Connect Wallet
</button>
)}
</div>
);
};
100 changes: 84 additions & 16 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
'use client'
"use client";

import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Menu, X } from 'lucide-react'
import { useState } from 'react'
import Link from "next/link";
import { useState, useRef, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Menu, X } from "lucide-react";
import { WalletStatus } from "@/components/WalletStatus";

export function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

const [open, setOpen] = useState(false);
const popupRef = useRef<HTMLDivElement>(null);

// Close when clicking outside
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (
popupRef.current &&
!popupRef.current.contains(event.target as Node)
) {
setOpen(false);
}
}

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);

return (
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
Expand All @@ -18,16 +39,28 @@ export function Navbar() {
</div>

<div className="hidden md:flex items-center gap-8">
<Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#features"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Features
</Link>
<Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#how-it-works"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
How It Works
</Link>
<Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#benefits"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Benefits
</Link>
<Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#testimonials"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Testimonials
</Link>
</div>
Expand All @@ -39,30 +72,65 @@ export function Navbar() {
<Button asChild>
<Link href="/signup">Get Started</Link>
</Button>
<div className="hidden md:flex items-center gap-4">
<div className="relative">
<button
onClick={() => setOpen(!open)}
className="px-4 py-2 bg-indigo-600 text-white rounded-lg"
>
Wallet
</button>

{open && (
<div ref={popupRef} className="absolute right-0 mt-2 z-50">
<WalletStatus
isConnected={false}
onConnect={() => alert("Connect clicked")}
/>
</div>
)}
</div>
</div>
</div>

<button
className="md:hidden p-2 text-muted-foreground hover:text-foreground"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
{mobileMenuOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
</button>
</div>
</div>

{mobileMenuOpen && (
<div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
<div className="px-4 py-6 space-y-4">
<Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#features"
className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Features
</Link>
<Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#how-it-works"
className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>
How It Works
</Link>
<Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#benefits"
className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Benefits
</Link>
<Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
<Link
href="#testimonials"
className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Testimonials
</Link>
<div className="pt-4 space-y-2">
Expand All @@ -77,5 +145,5 @@ export function Navbar() {
</div>
)}
</nav>
)
);
}
14 changes: 12 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.