Skip to content

Feature/preview other profile #69

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

Closed
TheSKBroook wants to merge 2 commits into from
Closed

Feature/preview other profile #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
51b2c6e
refactor: move the profile content use in the profile page in compone…
TheSKBroook May 20, 2026
78fe8d5
feat: add profile public view
TheSKBroook May 20, 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
15 changes: 15 additions & 0 deletions src/app/profile/[wallet]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { PublicProfilePage } from "@/components/profile/public-profile-page";

type PublicProfileRouteProps = {
params: Promise<{
wallet: string;
}>;
};

export default async function PublicProfileRoute({
params,
}: PublicProfileRouteProps) {
const { wallet } = await params;

return <PublicProfilePage walletAddress={decodeURIComponent(wallet)} />;
}
177 changes: 25 additions & 152 deletions src/app/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
"use client";

import React, { useEffect, useState } from "react";
import { useWallet } from "@/hooks/use-wallet";
import { ProfileContent } from "@/components/profile/profile-content";
import { WalletButton } from "@/components/wallet-button";
import { Copy, CheckCheck, PenTool } from "lucide-react";
import { useWallet } from "@/hooks/use-wallet";
import { getProfileViewData } from "@/lib/profile";
import { RegistrationService } from "@/services/registrations/registrations-service";

const getErrorMessage = (error: unknown) => {
Expand Down Expand Up @@ -89,17 +90,12 @@ export default function ProfilePage() {
await RegistrationService.getRegistrationByWallet(address);

if (registration) {
const displayNameFallback = registration.unique_name
? registration.unique_name.trim()
: [registration.first_name, registration.last_name]
.filter(Boolean)
.join(" ")
.trim();
const profile = getProfileViewData(registration);

setDisplayName(displayNameFallback || "Name");
setProfileImage(registration.profile_picture_url || null);
setBadges(registration.badges || []);
setEventsAttended(registration.events_attended || []);
setDisplayName(profile.displayName);
setProfileImage(profile.profileImage);
setBadges(profile.badges);
setEventsAttended(profile.eventsAttended);
} else {
setDisplayName("Name");
setProfileImage(null);
Expand Down Expand Up @@ -185,145 +181,22 @@ 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">
{/* 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="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]">
{profileImage ? (
<img
src={profileImage}
alt="Profile"
className="w-full h-full object-cover"
/>
) : (
<div className="text-gray-400 text-sm">No Image</div>
)}
<input
type="file"
accept="image/*"
onChange={handleImageUpload}
className="absolute inset-0 opacity-0 cursor-pointer"
title="Click to upload profile image"
/>
</div>

<div className="w-full lg:w-auto lg:pl-[340px]">
{isEditingName ? (
<div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-2">
<input
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"
onKeyDown={(e) => {
if (e.key === "Enter") {
handleNameSave();
}
}}
/>
<button
onClick={handleNameSave}
className="text-sm text-primary hover:underline"
>
Save
</button>
</div>
) : (
<div className="flex flex-col items-center md:items-start gap-2 md:flex-row md:gap-2">
<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"
>
<PenTool className="w-4 h-4 ml-1" />
</button>
</div>
)}
<div className="mt-6 flex flex-col items-center md:items-start gap-4">
<span className="font-mono text-sm break-all max-w-[100%]">
{address}
</span>
<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"
aria-label="Copy address"
>
{copied ? (
<CheckCheck className="w-4 h-4 text-green-500" />
) : (
<Copy className="w-4 h-4" />
)}
</button>
<button
onClick={() => disconnect()}
className="rounded-xl text-xs font-bold text-primary hover:underline"
>
Disconnect Wallet
</button>
</div>
</div>
{statusMessage ? (
<div className="mt-4 text-sm text-muted-foreground">
{statusMessage}
</div>
) : null}
</div>
</div>
</div>

<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">
<p className="text-2xl font-bold">Badges</p>

<div className="mt-8">
{profileLoading ? (
<p className="text-muted-foreground">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"
>
<span className="text-sm font-semibold text-primary">
{badge}
</span>
</div>
))}
</div>
) : (
<p className="text-muted-foreground">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]">
<p className="text-2xl font-bold">Events Attended</p>

<div className="mt-8">
{profileLoading ? (
<p className="text-muted-foreground">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"
>
<p className="font-semibold text-lg">{eventName}</p>
</div>
))}
</div>
) : (
<p className="text-muted-foreground">No events attended yet.</p>
)}
</div>
</div>
</div>
</div>
<ProfileContent
address={address ?? ""}
badges={badges}
copied={copied}
displayName={displayName}
eventsAttended={eventsAttended}
isEditingName={isEditingName}
profileImage={profileImage}
profileLoading={profileLoading}
statusMessage={statusMessage}
onCopyAddress={copyAddress}
onDisconnect={() => disconnect()}
onImageUpload={handleImageUpload}
onNameChange={setDisplayName}
onNameEdit={() => setIsEditingName(true)}
onNameSave={handleNameSave}
/>
);
}
Loading
Loading