Skip to content

Fixing login merge and navbar #73

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

Merged
rebeccafitzpatr merged 6 commits into from
May 24, 2026
Merged

Fixing login merge and navbar #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ca3ecb
fix: added the wallet button to navbar and made it more responsive (w…
VyomeshJ May 21, 2026
214509a
fix: made it so that when you disconnect your wallet from profile pag…
VyomeshJ May 21, 2026
d23a378
fix: made the profile change themes depending on dark or light
VyomeshJ May 21, 2026
985b2c0
feat: added the join-us button and added functionality to change addr…
VyomeshJ May 23, 2026
f093ced
fix: made it so that when you login you go to the profile page
VyomeshJ May 24, 2026
063a71b
Merge branch 'main' into fixing-login-merge-and-navbar
rebeccafitzpatr May 24, 2026
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
105 changes: 80 additions & 25 deletions src/app/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export default function ProfilePage() {
const [badges, setBadges] = useState<string[]>([]);
const [eventsAttended, setEventsAttended] = useState<string[]>([]);
const [profileLoading, setProfileLoading] = useState(true);
const [walletRegistered, setWalletRegistered] = useState(false);
const [walletChecking, setWalletChecking] = useState(true);
const [statusMessage, setStatusMessage] = useState<string | null>(null);

const copyAddress = () => {
Expand Down Expand Up @@ -75,19 +77,44 @@ export default function ProfilePage() {
};

useEffect(() => {
let cancelled = false;

const loadProfile = async () => {
if (!address) {
setWalletRegistered(false);
setWalletChecking(false);
setProfileLoading(false);
return;
}

setWalletChecking(true);
setProfileLoading(true);
setStatusMessage(null);

try {
const isRegistered = await RegistrationService.isWalletRegistered(
address,
);

if (cancelled) return;

if (!isRegistered) {
setWalletRegistered(false);
setDisplayName("Name");
setProfileImage(null);
setBadges([]);
setEventsAttended([]);
setStatusMessage("This wallet is not linked yet.");
return;
}

setWalletRegistered(true);

const registration =
await RegistrationService.getRegistrationByWallet(address);

if (cancelled) return;

if (registration) {
const displayNameFallback = registration.unique_name
? registration.unique_name.trim()
Expand All @@ -108,16 +135,30 @@ export default function ProfilePage() {
setStatusMessage("No profile data found for this wallet.");
}
} catch (error) {
if (cancelled) return;

console.error("Unable to load profile data", error);
setStatusMessage("Unable to load profile data.");
setWalletRegistered(false);
setStatusMessage("Unable to check wallet registration.");
} finally {
setProfileLoading(false);
if (!cancelled) {
setWalletChecking(false);
setProfileLoading(false);
}
}
};

if (mounted && isConnected) {
loadProfile();
} else {
setWalletRegistered(false);
setWalletChecking(false);
setProfileLoading(false);
}

return () => {
cancelled = true;
};
}, [address, isConnected, mounted]);

const handleNameSave = async () => {
Expand Down Expand Up @@ -159,11 +200,11 @@ export default function ProfilePage() {
);
}

if (!isConnected) {
if (!isConnected || !walletRegistered) {
return (
<div className="min-h-screen flex items-center justify-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)]">
<div className="min-h-screen flex items-center justify-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
<div className="text-center space-y-6 max-w-sm mx-auto px-4">
<div className="w-16 h-16 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto">
<div className="w-16 h-16 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto dark:border-white/20 dark:bg-white/10">
<img
src="/logo/web3uoa_logo.png"
alt="WEB3UOA"
Expand All @@ -174,8 +215,12 @@ export default function ProfilePage() {
<h1 className="text-2xl font-black tracking-tight mb-2">
Your Profile
</h1>
<p className="text-muted-foreground text-sm">
Connect your wallet to view your profile.
<p className="text-muted-foreground text-sm dark:text-white/75">
{walletChecking
? "Checking your wallet..."
: isConnected
? "This wallet is not linked yet. Connect with a registered email first."
: "Connect your wallet to view your profile."}
</p>
</div>
<WalletButton />
Expand All @@ -185,19 +230,21 @@ export default function ProfilePage() {
}

return (
<div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24">
<div className="min-h-screen w-screen flex flex-col gap-16 justify-center items-center bg-[linear-gradient(180deg,_#AFDCF1_0%,_#ADD8F2_27%,_#D3B7F3_100%)] px-4 md:px-0 pt-32 pb-24 text-foreground dark:bg-[linear-gradient(180deg,_#CAC1F7_0%,_#A8A1CA_21%,_#7B7890_59%,_#5C5A66_86%,_#6B6A7A_100%)] dark:text-white">
{/* Profile Card */}
<div className="relative bg-white/80 w-full max-w-[90vw] lg:w-[80vw] lg:max-w-[90vw] p-8 lg:p-15 rounded-2xl overflow-visible">
<div className="relative bg-white/80 w-full max-w-[90vw] lg:w-[80vw] lg:max-w-[90vw] p-8 lg:p-15 rounded-2xl overflow-visible shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
<div className="flex flex-col items-center lg:items-start text-center lg:text-left gap-6 lg:gap-8">
<div className="relative w-32 h-32 rounded-full bg-white flex items-center justify-center overflow-hidden lg:absolute lg:-left--16 lg:top-1/2 lg:-translate-y-1/2 lg:w-[280px] lg:h-[280px]">
<div className="relative w-32 h-32 rounded-full bg-white flex items-center justify-center overflow-hidden lg:absolute lg:-left--16 lg:top-1/2 lg:-translate-y-1/2 lg:w-[280px] lg:h-[280px] dark:bg-[#2f3136]">
{profileImage ? (
<img
src={profileImage}
alt="Profile"
className="w-full h-full object-cover"
/>
) : (
<div className="text-gray-400 text-sm">No Image</div>
<div className="text-gray-400 text-sm dark:text-white/55">
No Image
</div>
)}
<input
type="file"
Expand All @@ -215,7 +262,7 @@ export default function ProfilePage() {
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
className="w-full md:w-auto text-xl font-bold border rounded px-3 py-2"
className="w-full md:w-auto text-xl font-bold border rounded px-3 py-2 bg-white text-foreground dark:border-white/15 dark:bg-[#2f3136] dark:text-white"
onKeyDown={(e) => {
if (e.key === "Enter") {
handleNameSave();
Expand All @@ -234,7 +281,7 @@ export default function ProfilePage() {
<p className="text-2xl md:text-3xl font-bold">{displayName}</p>
<button
onClick={() => setIsEditingName(true)}
className="text-sm text-muted-foreground hover:text-primary flex items-center"
className="text-sm text-muted-foreground hover:text-primary flex items-center dark:text-white/65 dark:hover:text-[#A3DEF4]"
>
<PenTool className="w-4 h-4 ml-1" />
</button>
Expand All @@ -247,7 +294,7 @@ export default function ProfilePage() {
<div className="flex flex-wrap justify-center md:justify-start items-center gap-3">
<button
onClick={copyAddress}
className="text-muted-foreground hover:text-primary transition-colors shrink-0"
className="text-muted-foreground hover:text-primary transition-colors shrink-0 dark:text-white/65 dark:hover:text-[#A3DEF4]"
aria-label="Copy address"
>
{copied ? (
Expand All @@ -258,14 +305,14 @@ export default function ProfilePage() {
</button>
<button
onClick={() => disconnect()}
className="rounded-xl text-xs font-bold text-primary hover:underline"
className="rounded-xl text-xs font-bold text-primary hover:underline dark:text-[#A3DEF4]"
>
Disconnect Wallet
</button>
</div>
</div>
{statusMessage ? (
<div className="mt-4 text-sm text-muted-foreground">
<div className="mt-4 text-sm text-muted-foreground dark:text-white/70">
{statusMessage}
</div>
) : null}
Expand All @@ -275,51 +322,59 @@ export default function ProfilePage() {

<div className="flex flex-col gap-10 w-full max-w-[90vw] lg:flex-row lg:justify-center lg:items-end lg:gap-16">
{/* Badges*/}
<div className="bg-white/80 w-full lg:w-[42vw] p-8 rounded-2xl min-h-[44vh] lg:min-h-[34vh] lg:mt-10">
<div className="bg-white/80 w-full lg:w-[42vw] p-8 rounded-2xl min-h-[44vh] lg:min-h-[34vh] lg:mt-10 shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
<p className="text-2xl font-bold">Badges</p>

<div className="mt-8">
{profileLoading ? (
<p className="text-muted-foreground">Loading badges…</p>
<p className="text-muted-foreground dark:text-white/70">
Loading badges…
</p>
) : badges.length > 0 ? (
<div className="grid grid-cols-3 gap-4 sm:gap-6 justify-items-center">
{badges.map((badge, index) => (
<div
key={`${badge}-${index}`}
className="w-full min-h-[5rem] rounded-3xl border border-primary/20 bg-primary/5 p-3 flex items-center justify-center text-center"
className="w-full min-h-[5rem] rounded-3xl border border-primary/20 bg-primary/5 p-3 flex items-center justify-center text-center dark:border-[#A3DEF4]/25 dark:bg-white/10"
>
<span className="text-sm font-semibold text-primary">
<span className="text-sm font-semibold text-primary dark:text-[#A3DEF4]">
{badge}
</span>
</div>
))}
</div>
) : (
<p className="text-muted-foreground">No badges yet.</p>
<p className="text-muted-foreground dark:text-white/70">
No badges yet.
</p>
)}
</div>
</div>

{/* Event History*/}
<div className="bg-white/80 w-full lg:w-[34vw] p-8 rounded-2xl min-h-[52vh] lg:min-h-[34vh]">
<div className="bg-white/80 w-full lg:w-[34vw] p-8 rounded-2xl min-h-[52vh] lg:min-h-[34vh] shadow-lg dark:bg-[#404246]/85 dark:shadow-black/20">
<p className="text-2xl font-bold">Events Attended</p>

<div className="mt-8">
{profileLoading ? (
<p className="text-muted-foreground">Loading event history…</p>
<p className="text-muted-foreground dark:text-white/70">
Loading event history…
</p>
) : eventsAttended.length > 0 ? (
<div className="space-y-4">
{eventsAttended.map((eventName, index) => (
<div
key={`${eventName}-${index}`}
className="rounded-3xl bg-primary/10 px-4 py-4 sm:px-6 sm:py-5"
className="rounded-3xl bg-primary/10 px-4 py-4 sm:px-6 sm:py-5 dark:bg-white/10"
>
<p className="font-semibold text-lg">{eventName}</p>
</div>
))}
</div>
) : (
<p className="text-muted-foreground">No events attended yet.</p>
<p className="text-muted-foreground dark:text-white/70">
No events attended yet.
</p>
)}
</div>
</div>
Expand Down
Loading
Loading