From 770a2465379d56db7475f108b6c7cef5f8894bb0 Mon Sep 17 00:00:00 2001
From: AugistineCreates <project.kosiso@gmail.com>
Date: Fri, 24 Apr 2026 18:07:40 +0100
Subject: [PATCH 1/3] feat: add ARIA labels to icon-only buttons and
 interactive elements for improved accessibility

---
 src/components/ActivityFeed.tsx       | 1 +
 src/components/AddressDisplay.tsx     | 1 +
 src/components/GlobalSearch.tsx       | 1 +
 src/components/Pagination.tsx         | 3 +++
 src/components/forum/ThreadDetail.tsx | 1 +
 src/components/forum/ThreadList.tsx   | 1 +
 6 files changed, 8 insertions(+)

diff --git a/src/components/ActivityFeed.tsx b/src/components/ActivityFeed.tsx
index a24bf5c1..04309252 100644
--- a/src/components/ActivityFeed.tsx
+++ b/src/components/ActivityFeed.tsx
@@ -102,6 +102,7 @@ function ActivityEventRow({ event }: { event: ActivityEvent }) {
 					rel="noopener noreferrer"
 					className="flex-shrink-0 text-[10px] font-bold uppercase tracking-widest text-brand-cyan/60 hover:text-brand-cyan transition-colors self-center"
 					title="View on Stellar Explorer"
+					aria-label={`View transaction ${event.txHash} on Stellar Explorer`}
 				>
 					View Tx &rarr;
 				</a>
diff --git a/src/components/AddressDisplay.tsx b/src/components/AddressDisplay.tsx
index fc5411b3..256ae008 100644
--- a/src/components/AddressDisplay.tsx
+++ b/src/components/AddressDisplay.tsx
@@ -150,6 +150,7 @@ export const AddressDisplay: React.FC<AddressDisplayProps> = ({
 					rel="noopener noreferrer"
 					className="p-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-white/50 hover:text-brand-cyan"
 					title="View on Stellar Expert"
+					aria-label="View on Stellar Expert"
 				>
 					<svg
 						viewBox="0 0 24 24"
diff --git a/src/components/GlobalSearch.tsx b/src/components/GlobalSearch.tsx
index 3b56f13f..92cd8142 100644
--- a/src/components/GlobalSearch.tsx
+++ b/src/components/GlobalSearch.tsx
@@ -72,6 +72,7 @@ const GlobalSearch: React.FC = () => {
 				<input
 					type="text"
 					placeholder="Search..."
+					aria-label="Search"
 					className="glass border border-white/10 rounded-xl pl-10 pr-4 py-2 text-sm w-[180px] focus:w-[240px] focus:border-brand-cyan/40 focus:outline-none transition-all"
 					value={query}
 					onChange={(e) => {
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 0d6066f4..724b9905 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -45,6 +45,7 @@ const Pagination: React.FC<PaginationProps> = ({
 				<button
 					onClick={handlePrev}
 					disabled={page === 1}
+					aria-label="Previous page"
 					className="px-5 py-2 glass rounded-xl border border-white/10 text-xs font-black uppercase tracking-widest 
                      text-white/50 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-[0.97]"
 				>
@@ -60,6 +61,7 @@ const Pagination: React.FC<PaginationProps> = ({
 							) : (
 								<button
 									onClick={() => onPageChange(item as number)}
+									aria-label={`Page ${item}`}
 									className={`min-w-[44px] h-10 rounded-xl border text-xs font-black uppercase tracking-widest transition-all active:scale-[0.97]
                     ${
 											item === page
@@ -77,6 +79,7 @@ const Pagination: React.FC<PaginationProps> = ({
 				<button
 					onClick={handleNext}
 					disabled={page === totalPages}
+					aria-label="Next page"
 					className="px-5 py-2 glass rounded-xl border border-white/10 text-xs font-black uppercase tracking-widest 
                      text-white/50 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-[0.97]"
 				>
diff --git a/src/components/forum/ThreadDetail.tsx b/src/components/forum/ThreadDetail.tsx
index 0319cdf2..e8bd9cfe 100644
--- a/src/components/forum/ThreadDetail.tsx
+++ b/src/components/forum/ThreadDetail.tsx
@@ -122,6 +122,7 @@ export const ThreadDetail: React.FC<ThreadDetailProps> = ({ courseId, threadId,
                                             className="text-white/30 hover:text-red-400 transition-colors px-2 py-1"
                                             onClick={() => handleDeleteReply(reply.id)}
                                             title="Delete reply"
+                                            aria-label="Delete reply"
                                         >
                                             ×
                                         </button>
diff --git a/src/components/forum/ThreadList.tsx b/src/components/forum/ThreadList.tsx
index 5c026eef..f176b322 100644
--- a/src/components/forum/ThreadList.tsx
+++ b/src/components/forum/ThreadList.tsx
@@ -128,6 +128,7 @@ export const ThreadList: React.FC<ThreadListProps> = ({ courseId, onSelectThread
                                         className="text-white/30 hover:text-red-400 transition-colors px-2 py-1"
                                         onClick={(e) => handleDelete(e, thread.id)}
                                         title="Delete thread"
+                                        aria-label="Delete thread"
                                     >
                                         ×
                                     </button>

From 95570e3da23ecb2183a699c6574b1b9438d228b3 Mon Sep 17 00:00:00 2001
From: AugistineCreates <project.kosiso@gmail.com>
Date: Fri, 24 Apr 2026 18:16:04 +0100
Subject: [PATCH 2/3] feat: add ARIA labels to pagination buttons in Admin
 panel

---
 src/pages/Admin.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index 8208ce8f..e42b9ca5 100644
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -733,6 +733,7 @@ const MilestoneQueue: React.FC = () => {
 							type="button"
 							disabled={page <= 1}
 							onClick={() => handlePageChange(page - 1)}
+							aria-label="Previous page"
 							className="px-3 py-1 rounded-xl border border-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
 						>
 							← Prev
@@ -741,6 +742,7 @@ const MilestoneQueue: React.FC = () => {
 							type="button"
 							disabled={page >= totalPages}
 							onClick={() => handlePageChange(page + 1)}
+							aria-label="Next page"
 							className="px-3 py-1 rounded-xl border border-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
 						>
 							Next →

From 7d470fcdc557278af16a706c3290a6a1100d4f7f Mon Sep 17 00:00:00 2001
From: AugistineCreates <project.kosiso@gmail.com>
Date: Wed, 27 May 2026 01:46:07 +0100
Subject: [PATCH 3/3] feat: display earned Scholar NFTs on learner profile page
 directly from contract

---
 src/hooks/useScholarNft.ts |  67 +++++++++++++++++++++++
 src/index.css              |  19 +++++++
 src/pages/Profile.tsx      | 106 ++++++++++++++++++-------------------
 3 files changed, 139 insertions(+), 53 deletions(-)

diff --git a/src/hooks/useScholarNft.ts b/src/hooks/useScholarNft.ts
index 0f9fd18d..0e1f99ce 100644
--- a/src/hooks/useScholarNft.ts
+++ b/src/hooks/useScholarNft.ts
@@ -179,6 +179,18 @@ async function queryGetMetadata(
 	}
 }
 
+async function queryAllScholars(contractId: string): Promise<string[]> {
+	try {
+		const { scValToNative } = await import("@stellar/stellar-sdk")
+		const retval = await simulateCall(contractId, "get_all_scholars")
+		if (!retval) return []
+		return scValToNative(retval) as string[]
+	} catch (e) {
+		console.error("Error simulating get_all_scholars call:", e)
+		return []
+	}
+}
+
 // ---------------------------------------------------------------------------
 // IPFS metadata fetch
 // ---------------------------------------------------------------------------
@@ -373,3 +385,58 @@ export function useScholarNft(
 
 	return { credential: data!, status: "success", error: null }
 }
+
+export interface UseUserScholarNftsResult {
+	credentials: CredentialData[]
+	isLoading: boolean
+	error: string | null
+	refetch: () => void
+}
+
+export function useUserScholarNfts(
+	walletAddress: string | undefined,
+): UseUserScholarNftsResult {
+	const contractId = CONTRACT_IDS.scholarNft
+	const { data, isLoading, error, refetch } = useQuery({
+		queryKey: ["user-scholar-nfts", walletAddress],
+		queryFn: async () => {
+			if (!walletAddress || !contractId) return []
+
+			// 1. Query all scholar addresses from contract
+			const scholars = await queryAllScholars(contractId)
+
+			// 2. Filter to find the 1-based token IDs belonging to this wallet
+			const tokenIds: number[] = []
+			scholars.forEach((addr, index) => {
+				if (addr === walletAddress) {
+					tokenIds.push(index + 1)
+				}
+			})
+
+			if (tokenIds.length === 0) return []
+
+			// 3. Fetch metadata/IPFS details in parallel for each owned token ID
+			const fetchPromises = tokenIds.map(async (id) => {
+				try {
+					return await fetchCredentialData(id.toString())
+				} catch (err) {
+					console.error(`Failed to fetch credential data for token ID ${id}`, err)
+					return null
+				}
+			})
+
+			const results = await Promise.all(fetchPromises)
+			return results.filter((item): item is CredentialData => item !== null)
+		},
+		enabled: Boolean(walletAddress && contractId),
+		staleTime: 60_000,
+		retry: false,
+	})
+
+	return {
+		credentials: data ?? [],
+		isLoading,
+		error: error ? (error as Error).message || "Failed to fetch user Scholar NFTs" : null,
+		refetch,
+	}
+}
diff --git a/src/index.css b/src/index.css
index e4471532..1c3d47d9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -330,3 +330,22 @@ body {
 .light ::-webkit-scrollbar-thumb:hover {
 	background: rgba(0, 150, 210, 0.4);
 }
+
+/* ── Newly Earned NFT Glow Animation ─────────────────────────────────────── */
+@keyframes newNftGlow {
+	0%,
+	100% {
+		box-shadow: 0 0 15px rgba(0, 210, 255, 0.35), inset 0 0 10px rgba(0, 210, 255, 0.15);
+		border-color: rgba(0, 210, 255, 0.6);
+	}
+	50% {
+		box-shadow: 0 0 30px rgba(142, 45, 226, 0.75), inset 0 0 15px rgba(142, 45, 226, 0.3);
+		border-color: rgba(142, 45, 226, 0.9);
+	}
+}
+
+.new-nft-card {
+	animation: newNftGlow 3s infinite alternate ease-in-out;
+	border: 2px solid transparent !important;
+}
+
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 6c76104e..d80e1c38 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from "react"
+import React, { useContext, useEffect, useState } from "react"
 import { Helmet } from "react-helmet"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
@@ -11,10 +11,11 @@ import {
 	ProfileSkeleton,
 } from "../components/SkeletonLoader"
 import { ErrorState } from "../components/states/errorState"
-import { useScholarCredentials } from "../hooks/useScholarCredentials"
+import { useUserScholarNfts } from "../hooks/useScholarNft"
 import { WalletContext } from "../providers/WalletProvider"
 import { formatDuration, getLearningTimeSummary } from "../util/learningTime"
 import { shortenAddress } from "../util/scholarshipApplications"
+import confetti from "canvas-confetti"
 
 type UserNft = {
 	id: string
@@ -22,67 +23,63 @@ type UserNft = {
 	program: string
 	date: string
 	artwork?: string
+	isNew?: boolean
 }
 
 const Profile: React.FC = () => {
 	const { t } = useTranslation()
 	const { address: walletAddress } = useContext(WalletContext)
-	const [isLoading, setIsLoading] = useState(true)
-	const [error, setError] = useState<string | null>(null)
+	const { credentials, isLoading, error, refetch } = useUserScholarNfts(walletAddress)
 	const [nfts, setNfts] = useState<UserNft[]>([])
 	const [learningTimeLabel, setLearningTimeLabel] = useState("0m")
 
-	const fetchCredentials = useCallback(async () => {
-		if (!walletAddress) {
-			setNfts([])
-			setIsLoading(false)
-			return
-		}
-
-		try {
-			setIsLoading(true)
-			setError(null)
+	useEffect(() => {
+		if (credentials.length > 0) {
+			const now = Math.floor(Date.now() / 1000)
+			const seenNftsStr = localStorage.getItem("learnvault_seen_nfts")
+			let seenIds: string[] = []
+			if (seenNftsStr) {
+				try {
+					seenIds = JSON.parse(seenNftsStr) as string[]
+				} catch {}
+			}
 
-			const response = await fetch(`/api/credentials/${walletAddress}`, {
-				method: "GET",
+			let hasNewNft = false
+			const mapped = credentials.map((cred) => {
+				const isMintedRecently = cred.issuedAt ? (now - cred.issuedAt < 600) : false
+				const isUnseen = seenIds.length > 0 && !seenIds.includes(cred.id)
+				const isNew = isMintedRecently || isUnseen
+
+				if (isNew) {
+					hasNewNft = true
+				}
+
+				return {
+					id: cred.id,
+					program: cred.programName,
+					date: cred.completionDate,
+					artwork: cred.artworkUrl || undefined,
+					isNew,
+				}
 			})
 
-			if (!response.ok) {
-				const payload = await response.json().catch(() => ({}))
-				throw new Error(
-					payload.message || payload.error || "Unable to load credentials",
-				)
+			setNfts(mapped)
+
+			if (hasNewNft) {
+				confetti({
+					particleCount: 150,
+					spread: 80,
+					origin: { y: 0.6 },
+					colors: ["#00d2ff", "#8e2de2", "#00ff80", "#3a7bd5"],
+				})
 			}
 
-			const data = await response.json()
-			setNfts(
-				Array.isArray(data.data)
-					? data.data.map((item: any) => ({
-							id: String(item.token_id ?? item.course_id ?? Math.random()),
-							course_id: item.course_id,
-							program: item.course_id ?? "Unknown course",
-							date: item.minted_at
-								? new Date(item.minted_at).toLocaleDateString()
-								: "Unknown",
-							artwork: item.metadata_uri
-								? `https://gateway.pinata.cloud/ipfs/${item.metadata_uri.replace("ipfs://", "")}`
-								: undefined,
-						}))
-					: [],
-			)
-		} catch (err) {
-			console.error("[profile] error loading credentials", err)
-			setError(
-				err instanceof Error ? err.message : "Failed to load credentials",
-			)
-		} finally {
-			setIsLoading(false)
+			const allIds = credentials.map((c) => c.id)
+			localStorage.setItem("learnvault_seen_nfts", JSON.stringify(allIds))
+		} else {
+			setNfts([])
 		}
-	}, [walletAddress])
-
-	useEffect(() => {
-		void fetchCredentials()
-	}, [fetchCredentials])
+	}, [credentials])
 
 	useEffect(() => {
 		const summary = getLearningTimeSummary()
@@ -111,7 +108,7 @@ const Profile: React.FC = () => {
 	if (error) {
 		return (
 			<div className="p-12 max-w-6xl mx-auto text-white animate-in fade-in slide-in-from-bottom-8 duration-1000">
-				<ErrorState message={error} onRetry={fetchCredentials} />
+				<ErrorState message={error} onRetry={refetch} />
 			</div>
 		)
 	}
@@ -182,9 +179,12 @@ const Profile: React.FC = () => {
 				) : (
 					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
 						{nfts.map((nft, index) => (
-							<div
+							<Link
 								key={nft.id}
-								className="glass-card rounded-[2.5rem] overflow-hidden hover:border-brand-cyan/40 hover:-translate-y-3 transition-all duration-700 group animate-in fade-in zoom-in"
+								to={`/credentials/${nft.id}`}
+								className={`glass-card rounded-[2.5rem] overflow-hidden hover:border-brand-cyan/40 hover:-translate-y-3 transition-all duration-700 group animate-in fade-in zoom-in block ${
+									nft.isNew ? "new-nft-card" : ""
+								}`}
 								style={{ animationDelay: `${index * 150}ms` }}
 							>
 								<div className="relative aspect-square overflow-hidden mb-2">
@@ -225,7 +225,7 @@ const Profile: React.FC = () => {
 										</span>
 									</div>
 								</div>
-							</div>
+							</Link>
 						))}
 					</div>
 				)}