@@ -245,6 +262,30 @@ const CommentCard: React.FC = ({ + {isOwnComment && ( + <> + { + setIsEditing((v) => !v) + setEditText(comment.content) + setEditError(null) + }} + className="text-[10px] font-black uppercase text-white/70 hover:text-brand-cyan transition-colors" + > + {isEditing ? "Close" : "Edit"} + + void handleDelete()} + className="text-[10px] font-black uppercase text-white/70 hover:text-red-400 transition-colors" + > + Delete + + + )} {canPin && !comment.is_pinned && ( = ({ - - - + {isEditing ? ( + + { + setEditText(e.target.value) + if (editError) setEditError(null) + }} + data-testid="comment-edit-field" + className="w-full h-32 bg-black/40 border border-white/10 rounded-2xl p-4 text-sm text-white focus:outline-none focus:border-brand-cyan/40" + /> + {editError && ( + <p className="mt-2 text-sm text-red-400" role="alert"> + {editError} + </p> + )} + <div className="flex justify-end gap-3 mt-4"> + <button + type="button" + onClick={() => { + setIsEditing(false) + setEditText(comment.content) + setEditError(null) + }} + className="px-5 py-2 text-[10px] font-black uppercase text-white/70 border border-white/10 rounded-full hover:bg-white/5 transition-colors" + > + Cancel + </button> + <button + type="button" + data-testid="comment-save-edit" + onClick={() => void handleSaveEdit()} + disabled={!editText.trim()} + className="px-5 py-2 bg-brand-cyan text-black text-[10px] font-black uppercase tracking-widest rounded-full hover:scale-105 transition-all disabled:opacity-50" + > + Save + </button> + </div> + </div> + ) : ( + <div className="prose prose-invert prose-sm max-w-none text-white/80 leading-relaxed font-medium mb-8"> + <SafeMarkdown content={comment.content} /> + </div> + )} <footer className="flex items-center gap-6"> <div className="flex items-center bg-white/5 rounded-full p-1 border border-white/5"> diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index 028aced4..3bc56697 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -38,7 +38,10 @@ export default class ErrorBoundary extends Component<Props, State> { public render() { if (this.state.hasError) { return ( - <div className="flex flex-col items-center justify-center p-8 m-4 border border-red-200/20 bg-red-500/10 rounded-xl h-full min-h-[50vh]"> + <div + className="flex flex-col items-center justify-center p-8 m-4 border border-red-200/20 bg-red-500/10 rounded-xl h-full min-h-[50vh]" + data-testid="error-boundary" + > <svg className="w-12 h-12 text-red-500 mb-4" fill="none" @@ -59,21 +62,38 @@ export default class ErrorBoundary extends Component<Props, State> { We apologize for the inconvenience. The application encountered an unexpected error. </p> - {import.meta.env.DEV && this.state.error?.stack && ( - <pre className="mt-2 mb-6 text-left text-xs text-red-400/70 bg-black/20 rounded-lg p-4 max-w-lg w-full overflow-auto max-h-48 whitespace-pre-wrap break-all"> - {this.state.error.stack} - </pre> + {requestId && ( + <p className="text-xs text-gray-500 font-mono mb-6"> + Ref: {requestId} + </p> )} - <div className="flex gap-4"> + <div className="flex flex-wrap gap-4 justify-center"> <button + type="button" onClick={this.handleRetry} className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors cursor-pointer" + data-testid="error-boundary-try-again" > Try Again </button> <button - onClick={this.handleReport} - className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg font-medium border border-slate-700 transition-colors cursor-pointer" + type="button" + onClick={() => window.history.back()} + className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition-colors cursor-pointer" + data-testid="error-boundary-go-back" + > + Go back + </button> + <a + href="/" + className="px-4 py-2 bg-emerald-700 hover:bg-emerald-600 text-white rounded-lg font-medium transition-colors" + data-testid="error-boundary-go-home" + > + Go Home + </a> + <a + href={mailtoLink} + className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg font-medium border border-slate-700 transition-colors" > Report Issue </button> diff --git a/src/components/GlobalSearch.tsx b/src/components/GlobalSearch.tsx index 89701127..f1cd8e5d 100644 --- a/src/components/GlobalSearch.tsx +++ b/src/components/GlobalSearch.tsx @@ -1,15 +1,17 @@ import { Icon } from "@stellar/design-system" import React, { useState, useEffect, useRef } from "react" -import { Link, useNavigate } from "react-router-dom" -import { EmptyState as StateEmpty } from "./states/emptyState" +import { useNavigate } from "react-router-dom" import { useCourses } from "../hooks/useCourses" import { useWikiPages } from "../hooks/useWiki" const GlobalSearch: React.FC = () => { const [query, setQuery] = useState("") const [isOpen, setIsOpen] = useState(false) + const [activeIndex, setActiveIndex] = useState(-1) const navigate = useNavigate() const containerRef = useRef<HTMLDivElement>(null) + const inputRef = useRef<HTMLInputElement>(null) + const listboxId = "global-search-listbox" const { courses = [] } = useCourses() const { data: wikiPages = [] } = useWikiPages() @@ -44,6 +46,11 @@ const GlobalSearch: React.FC = () => { ].slice(0, 8) : [] + // Reset active index whenever results change + useEffect(() => { + setActiveIndex(-1) + }, [results.length, query]) + useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( @@ -51,6 +58,7 @@ const GlobalSearch: React.FC = () => { !containerRef.current.contains(event.target as Node) ) { setIsOpen(false) + setActiveIndex(-1) } } document.addEventListener("mousedown", handleClickOutside) @@ -60,9 +68,44 @@ const GlobalSearch: React.FC = () => { const handleSelect = (link: string) => { setQuery("") setIsOpen(false) + setActiveIndex(-1) void navigate(link) } + const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { + if (!isOpen || results.length === 0) { + if (e.key === "Escape") { + setIsOpen(false) + setActiveIndex(-1) + } + return + } + + switch (e.key) { + case "ArrowDown": + e.preventDefault() + setActiveIndex((prev) => (prev < results.length - 1 ? prev + 1 : 0)) + break + case "ArrowUp": + e.preventDefault() + setActiveIndex((prev) => (prev > 0 ? prev - 1 : results.length - 1)) + break + case "Enter": + e.preventDefault() + if (activeIndex >= 0 && activeIndex < results.length) { + handleSelect(results[activeIndex].link) + } + break + case "Escape": + e.preventDefault() + setIsOpen(false) + setActiveIndex(-1) + break + } + } + + const showDropdown = isOpen && query.length >= 2 + return ( <div className="relative" ref={containerRef}> <div className="relative group"> @@ -71,7 +114,15 @@ const GlobalSearch: React.FC = () => { size="sm" /> <input + ref={inputRef} type="text" + role="combobox" + aria-expanded={showDropdown} + aria-autocomplete="list" + aria-controls={showDropdown ? listboxId : undefined} + aria-activedescendant={ + activeIndex >= 0 ? `search-option-${activeIndex}` : undefined + } 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" @@ -81,18 +132,30 @@ const GlobalSearch: React.FC = () => { setIsOpen(true) }} onFocus={() => setIsOpen(true)} + onKeyDown={handleKeyDown} /> </div> - {isOpen && query.length >= 2 && ( - <div className="absolute top-full mt-2 left-0 right-0 glass-card border border-white/10 rounded-2xl overflow-hidden shadow-2xl min-w-[300px] animate-in fade-in slide-in-from-top-2 duration-200"> + {showDropdown && ( + <div + id={listboxId} + role="listbox" + aria-label="Search results" + className="absolute top-full mt-2 left-0 right-0 glass-card border border-white/10 rounded-2xl overflow-hidden shadow-2xl min-w-[300px] animate-in fade-in slide-in-from-top-2 duration-200" + > {results.length > 0 ? ( <div className="flex flex-col"> - {results.map((result) => ( + {results.map((result, index) => ( <button key={result.id} + id={`search-option-${index}`} + role="option" + aria-selected={index === activeIndex} onClick={() => handleSelect(result.link)} - className="flex items-center justify-between px-4 py-3 hover:bg-white/5 text-left border-b border-white/5 last:border-none transition-colors group" + onMouseEnter={() => setActiveIndex(index)} + className={`flex items-center justify-between px-4 py-3 text-left border-b border-white/5 last:border-none transition-colors group ${ + index === activeIndex ? "bg-white/10" : "hover:bg-white/5" + }`} > <div className="flex flex-col"> <span className="text-xs font-black uppercase tracking-widest text-white/30 group-hover:text-brand-cyan/50 transition-colors"> diff --git a/src/components/LessonContent.tsx b/src/components/LessonContent.tsx index aeb43484..81cd71e1 100644 --- a/src/components/LessonContent.tsx +++ b/src/components/LessonContent.tsx @@ -1,5 +1,5 @@ import { Button } from "@stellar/design-system" -import React from "react" +import React, { useEffect, useRef } from "react" import ReactMarkdown from "react-markdown" import { Link } from "react-router-dom" import { type CourseLesson as Lesson } from "../types/courses" @@ -29,6 +29,7 @@ interface LessonContentProps { isCompleting: boolean timeSpentLabel?: string | null onMarkComplete: () => void + onScrolledToBottom?: () => void prevLessonId: number | null nextLessonId: number | null isNextLocked: boolean @@ -41,10 +42,38 @@ const LessonContent: React.FC<LessonContentProps> = ({ isCompleting, timeSpentLabel, onMarkComplete, + onScrolledToBottom, prevLessonId, nextLessonId, isNextLocked, }) => { + const sentinelRef = useRef<HTMLDivElement>(null) + const firedRef = useRef(false) + + // Reset the fired flag whenever the lesson changes + useEffect(() => { + firedRef.current = false + }, [lesson.id]) + + // Fire onScrolledToBottom once when the bottom sentinel comes into view + useEffect(() => { + if (!onScrolledToBottom || isLoading) return + const el = sentinelRef.current + if (!el) return + + const observer = new IntersectionObserver( + (entries) => { + if (entries[0]?.isIntersecting && !firedRef.current) { + firedRef.current = true + onScrolledToBottom() + } + }, + { threshold: 0.1 }, + ) + observer.observe(el) + return () => observer.disconnect() + }, [onScrolledToBottom, isLoading, lesson.id]) + if (isLoading) { return ( <section className="glass-card p-8 md:p-12 rounded-[2.5rem] border border-white/10"> @@ -69,6 +98,9 @@ const LessonContent: React.FC<LessonContentProps> = ({ <ReactMarkdown>{lesson.content}</ReactMarkdown> </div> + {/* Sentinel: when visible, lesson has been scrolled to the bottom */} + <div ref={sentinelRef} aria-hidden="true" /> + <div className="mt-16 pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-6"> <div className="flex gap-4"> {prevLessonId ? ( diff --git a/src/components/LessonSidebar.tsx b/src/components/LessonSidebar.tsx index 212a9e9a..18f96415 100644 --- a/src/components/LessonSidebar.tsx +++ b/src/components/LessonSidebar.tsx @@ -6,6 +6,7 @@ interface LessonSidebarProps { courseId: string lessons: Lesson[] completedMilestones: number[] + readLessonIds?: number[] currentLessonId: number } @@ -13,6 +14,7 @@ const LessonSidebar: React.FC<LessonSidebarProps> = ({ courseId, lessons, completedMilestones, + readLessonIds = [], currentLessonId, }) => { const totalLessons = lessons.length @@ -20,6 +22,15 @@ const LessonSidebar: React.FC<LessonSidebarProps> = ({ const progressPercent = totalLessons > 0 ? (completedCount / totalLessons) * 100 : 0 + // Locally read but not yet server-confirmed + const localReadOnly = readLessonIds.filter( + (id) => !completedMilestones.includes(id), + ) + const readPercent = + totalLessons > 0 + ? ((completedCount + localReadOnly.length) / totalLessons) * 100 + : 0 + return ( <aside className="glass-card flex flex-col h-full rounded-[2.5rem] border border-white/10 p-6"> <h3 className="text-xl font-bold mb-6 text-white tracking-tight"> @@ -33,9 +44,20 @@ const LessonSidebar: React.FC<LessonSidebarProps> = ({ {completedCount} of {totalLessons} </span> </div> - <div className="h-2 w-full bg-white/10 rounded-full overflow-hidden"> + {/* Two-layer bar: local-read (soft cyan) behind server-complete (solid cyan) */} + <div + className="relative h-2 w-full bg-white/10 rounded-full overflow-hidden" + role="progressbar" + aria-valuenow={Math.round(progressPercent)} + aria-valuemin={0} + aria-valuemax={100} + > + <div + className="absolute inset-y-0 left-0 bg-brand-cyan/30 rounded-full transition-all duration-500 ease-out" + style={{ width: `${readPercent}%` }} + /> <div - className="h-full bg-brand-cyan transition-all duration-500 ease-out" + className="absolute inset-y-0 left-0 bg-brand-cyan rounded-full transition-all duration-500 ease-out" style={{ width: `${progressPercent}%` }} /> </div> @@ -44,6 +66,7 @@ const LessonSidebar: React.FC<LessonSidebarProps> = ({ <ul className="space-y-3 flex-1 overflow-y-auto pr-2 custom-scrollbar"> {lessons.map((l, index) => { const isCompleted = completedMilestones.includes(l.id) + const isLocalRead = !isCompleted && readLessonIds.includes(l.id) const isCurrent = l.id === currentLessonId const previousCompleted = index === 0 || @@ -87,12 +110,20 @@ const LessonSidebar: React.FC<LessonSidebarProps> = ({ className={`mt-1 w-6 h-6 flex shrink-0 items-center justify-center rounded-full border ${ isCompleted ? "bg-brand-emerald/20 border-brand-emerald text-brand-emerald" - : isCurrent - ? "border-brand-cyan text-brand-cyan" - : "border-white/20 text-white/40" + : isLocalRead + ? "bg-brand-cyan/10 border-brand-cyan/40 text-brand-cyan/60" + : isCurrent + ? "border-brand-cyan text-brand-cyan" + : "border-white/20 text-white/40" }`} + title={ + isLocalRead + ? "Lesson read (not yet completed on-chain)" + : undefined + } > {isCompleted ? ( + // Hard checkmark — server-confirmed completion <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" @@ -105,6 +136,22 @@ const LessonSidebar: React.FC<LessonSidebarProps> = ({ clipRule="evenodd" /> </svg> + ) : isLocalRead ? ( + // Soft checkmark — locally read but not on-chain yet + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 20 20" + fill="none" + stroke="currentColor" + strokeWidth={2} + className="w-3.5 h-3.5" + > + <path + strokeLinecap="round" + strokeLinejoin="round" + d="M16.704 4.153l-8 10.5-4.5-4.5" + /> + </svg> ) : ( <span className="text-[10px] font-bold">{index + 1}</span> )} diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index f9005d3e..b0f29d67 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -24,7 +24,6 @@ export default function NavBar() { const [menuOpen, setMenuOpen] = useState(false) const mobileMenuId = useId() const { t } = useTranslation() - useEffect(() => { if (typeof document === "undefined") return const previousOverflow = document.body.style.overflow diff --git a/src/components/ProposalCard.tsx b/src/components/ProposalCard.tsx index 2441ec65..dd446807 100644 --- a/src/components/ProposalCard.tsx +++ b/src/components/ProposalCard.tsx @@ -12,7 +12,7 @@ export interface ProposalCardProps { noVotes: number deadlineLedger: number currentLedger: number - status: "active" | "passed" | "rejected" | "executed" + status: "active" | "queued" | "passed" | "rejected" | "executed" hasVoted?: boolean onVoteYes?: () => void onVoteNo?: () => void @@ -45,6 +45,8 @@ export const ProposalCard: React.FC<ProposalCardProps> = ({ switch (status) { case "active": return "success" + case "queued": + return "warning" case "passed": return "success" case "rejected": diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx index 6bc5fef4..e62e4b04 100644 --- a/src/components/SkeletonLoader.tsx +++ b/src/components/SkeletonLoader.tsx @@ -213,3 +213,40 @@ export const NoCredentialsEmptyState: React.FC = () => ( ctaHref="/learn" /> ) +// ─── Stat Card Skeleton ─────────────────────────────────────────────────────── +// Issue #732 — Matching shape of StatCard on Treasury / Dashboard pages + +export const StatCardSkeleton: React.FC = () => ( + <div className={`${skeletonBase} p-8 rounded-4xl border border-white/5`}> + <Shimmer /> + <div className="w-8 h-8 bg-white/5 rounded-full mb-4 animate-pulse" /> + <div className="h-3 bg-white/5 rounded-full w-2/3 mb-2 animate-pulse" /> + <div className="h-6 bg-white/5 rounded-full w-1/2 animate-pulse" /> + </div> +) + +// ─── Activity Feed Item Skeleton ────────────────────────────────────────────── +// Issue #732 — Matching shape of ActivityFeed rows on Treasury + +export const ActivityFeedSkeleton: React.FC<{ rows?: number }> = ({ + rows = 3, +}) => ( + <div className="flex flex-col gap-4"> + {Array.from({ length: rows }).map((_, i) => ( + <div + key={i} + className={`${skeletonBase} flex items-center justify-between p-5 rounded-2xl border border-white/5`} + > + <Shimmer /> + <div className="flex items-center gap-4"> + <div className="w-2 h-2 rounded-full bg-white/5 animate-pulse" /> + <div> + <div className="h-3 bg-white/5 rounded-full w-24 mb-2 animate-pulse" /> + <div className="h-2 bg-white/5 rounded-full w-16 animate-pulse" /> + </div> + </div> + <div className="h-4 bg-white/5 rounded-full w-16 animate-pulse" /> + </div> + ))} + </div> +) diff --git a/src/components/donor/ActiveVotes.tsx b/src/components/donor/ActiveVotes.tsx index 7fdb9c26..2225c85d 100644 --- a/src/components/donor/ActiveVotes.tsx +++ b/src/components/donor/ActiveVotes.tsx @@ -10,6 +10,8 @@ export const ActiveVotes: React.FC<ActiveVotesProps> = ({ votes }) => { switch (status) { case "active": return "text-brand-cyan" + case "queued": + return "text-brand-amber" case "passed": return "text-brand-emerald" case "rejected": @@ -23,6 +25,8 @@ export const ActiveVotes: React.FC<ActiveVotesProps> = ({ votes }) => { switch (status) { case "active": return "bg-brand-cyan/10 border-brand-cyan/30" + case "queued": + return "bg-brand-amber/10 border-brand-amber/30" case "passed": return "bg-brand-emerald/10 border-brand-emerald/30" case "rejected": diff --git a/src/components/forum/ThreadList.tsx b/src/components/forum/ThreadList.tsx index 67352231..534d5191 100644 --- a/src/components/forum/ThreadList.tsx +++ b/src/components/forum/ThreadList.tsx @@ -1,218 +1,212 @@ -import React, { useState } from "react" -import { EmptyState as StateEmpty } from "../states/emptyState" import { Button } from "@stellar/design-system" import { useQueryClient } from "@tanstack/react-query" +import React, { useState } from "react" import ReactMarkdown from "react-markdown" import { - createThread, - deleteThread, - useForumThreads, + createThread, + deleteThread, + useForumThreads, } from "../../hooks/useForum" import { WalletAddressPill } from "../WalletAddressPill" interface ThreadListProps { - courseId: string - onSelectThread: (id: number) => void - currentAddress: string | null - isAdmin: boolean + courseId: string + onSelectThread: (id: number) => void + currentAddress: string | null + isAdmin: boolean } export const ThreadList: React.FC<ThreadListProps> = ({ - courseId, - onSelectThread, - currentAddress, - isAdmin, + courseId, + onSelectThread, + currentAddress, + isAdmin, }) => { - const { data: threads, isLoading, error } = useForumThreads(courseId) - const [isComposing, setIsComposing] = useState(false) - const queryClient = useQueryClient() - - const [title, setTitle] = useState("") - const [content, setContent] = useState("") - const [isSubmitting, setIsSubmitting] = useState(false) - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault() - if (!title.trim() || !content.trim()) return - - try { - setIsSubmitting(true) - await createThread(courseId, title, content) - await queryClient.invalidateQueries({ - queryKey: ["forum", "threads", courseId], - }) - setTitle("") - setContent("") - setIsComposing(false) - } catch (err) { - console.error("Failed to create thread", err) - } finally { - setIsSubmitting(false) - } - } - - const handleDelete = async (e: React.MouseEvent, threadId: number) => { - e.stopPropagation() - if (!confirm("Are you sure you want to delete this thread?")) return - - try { - await deleteThread(courseId, threadId) - await queryClient.invalidateQueries({ - queryKey: ["forum", "threads", courseId], - }) - } catch (err) { - console.error("Failed to delete thread", err) - } - } - - if (isLoading) { - return ( - <div className="text-white/60 animate-pulse"> - Loading discussion threads... - </div> - ) - } - - if (error) { - return ( - <div className="text-red-400 bg-red-400/10 p-4 rounded-xl border border-red-400/20"> - Failed to load discussions. Please try again later. - </div> - ) - } - - return ( - <div className="space-y-6"> - <div className="flex items-center justify-between"> - <h3 className="text-2xl font-bold">Discussion Forum</h3> - - {!isComposing && currentAddress && ( - <Button - variant="primary" - size="sm" - onClick={() => setIsComposing(true)} - > - Start a Discussion - </Button> - )} - </div> - - {isComposing && ( - <div className="glass-card p-6 rounded-2xl border border-brand-cyan/30 animate-in slide-in-from-top-4"> - <h4 className="text-lg font-bold mb-4">New Thread</h4> - - <form onSubmit={handleSubmit} className="space-y-4"> - <input - type="text" - placeholder="Thread Title..." - value={title} - onChange={(e) => setTitle(e.target.value)} - className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/30 focus:outline-hidden focus:border-brand-cyan transition-colors" - /> - - <textarea - placeholder="Write your thoughts (Markdown supported)..." - value={content} - onChange={(e) => setContent(e.target.value)} - rows={6} - className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/30 focus:outline-hidden focus:border-brand-cyan transition-colors font-mono text-sm" - /> - - <div className="flex gap-3 justify-end pt-2"> - <Button - variant="secondary" - size="sm" - onClick={() => setIsComposing(false)} - disabled={isSubmitting} - > - Cancel - </Button> - - <Button - variant="primary" - size="sm" - onClick={handleSubmit} - disabled={isSubmitting || !title.trim() || !content.trim()} - > - {isSubmitting ? "Posting..." : "Post Thread"} - </Button> - </div> - </form> - </div> - )} - - {!threads?.length && !isComposing && ( - <StateEmpty - icon="💭" - title="No discussions yet" - description="Be the first to start a conversation about this course!" - ctaLabel="Start a discussion" - onCtaClick={() => setIsComposing(true)} - /> - )} - - <div className="space-y-4"> - {threads?.map((thread) => ( - <button - key={thread.id} - type="button" - onClick={() => onSelectThread(thread.id)} - className="w-full text-left glass-card p-5 rounded-2xl border border-white/10 hover:border-brand-cyan/50 transition-all flex flex-col gap-3 group" - > - <div className="flex justify-between items-start gap-4"> - <h4 className="text-lg font-bold group-hover:text-brand-cyan transition-colors line-clamp-1"> - {thread.title} - </h4> - - <div className="flex items-center gap-3 shrink-0"> - <span className="text-xs text-white/40"> - {new Date(thread.created_at).toLocaleDateString()} - </span> - - {(isAdmin || currentAddress === thread.author_address) && ( - <span - role="button" - tabIndex={0} - className="text-white/30 hover:text-red-400 transition-colors px-2 py-1" - onClick={(e) => { - e.stopPropagation() - void handleDelete( - e as unknown as React.MouseEvent, - thread.id - ) - }} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - e.preventDefault() - e.stopPropagation() - void handleDelete( - e as unknown as React.MouseEvent, - thread.id - ) - } - }} - aria-label="Delete thread" - > - × - </span> - )} - </div> - </div> - - <div className="text-sm text-white/60 line-clamp-2 prose prose-invert max-w-none"> - <ReactMarkdown>{thread.content}</ReactMarkdown> - </div> - - <div className="flex items-center justify-between mt-2 pt-3 border-t border-white/5"> - <WalletAddressPill address={thread.author_address} /> - <div className="text-xs font-semibold px-3 py-1 bg-white/5 rounded-full text-brand-cyan"> - {thread.reply_count}{" "} - {thread.reply_count === 1 ? "reply" : "replies"} - </div> - </div> - </button> - ))} - </div> - </div> - ) -} \ No newline at end of file + const { data: threads, isLoading, error } = useForumThreads(courseId) + const [isComposing, setIsComposing] = useState(false) + const queryClient = useQueryClient() + + const [title, setTitle] = useState("") + const [content, setContent] = useState("") + const [isSubmitting, setIsSubmitting] = useState(false) + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (!title.trim() || !content.trim()) return + + try { + setIsSubmitting(true) + await createThread(courseId, title, content) + await queryClient.invalidateQueries({ + queryKey: ["forum", "threads", courseId], + }) + setTitle("") + setContent("") + setIsComposing(false) + } catch (err) { + console.error("Failed to create thread", err) + } finally { + setIsSubmitting(false) + } + } + + const handleDelete = async (e: React.MouseEvent, threadId: number) => { + e.stopPropagation() + if (!confirm("Are you sure you want to delete this thread?")) return + + try { + await deleteThread(courseId, threadId) + await queryClient.invalidateQueries({ + queryKey: ["forum", "threads", courseId], + }) + } catch (err) { + console.error("Failed to delete thread", err) + } + } + + if (isLoading) { + return ( + <div className="text-white/60 animate-pulse"> + Loading discussion threads... + </div> + ) + } + + if (error) { + return ( + <div className="text-red-400 bg-red-400/10 p-4 rounded-xl border border-red-400/20"> + Failed to load discussions. Please try again later. + </div> + ) + } + + return ( + <div className="space-y-6"> + <div className="flex items-center justify-between"> + <h3 className="text-2xl font-bold">Discussion Forum</h3> + {!isComposing && currentAddress && ( + <Button + variant="primary" + size="sm" + onClick={() => setIsComposing(true)} + > + Start a Discussion + </Button> + )} + </div> + + {isComposing && ( + <div className="glass-card p-6 rounded-2xl border border-brand-cyan/30 animate-in slide-in-from-top-4"> + <h4 className="text-lg font-bold mb-4">New Thread</h4> + <form onSubmit={handleSubmit} className="space-y-4"> + <div> + <input + type="text" + placeholder="Thread Title..." + value={title} + onChange={(e) => setTitle(e.target.value)} + className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/30 focus:outline-hidden focus:border-brand-cyan transition-colors" + /> + </div> + <div> + <textarea + placeholder="Write your thoughts (Markdown supported)..." + value={content} + onChange={(e) => setContent(e.target.value)} + rows={6} + className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/30 focus:outline-hidden focus:border-brand-cyan transition-colors font-mono text-sm" + /> + </div> + <div className="flex gap-3 justify-end pt-2"> + <Button + variant="secondary" + size="sm" + onClick={() => setIsComposing(false)} + disabled={isSubmitting} + > + Cancel + </Button> + <Button + variant="primary" + size="sm" + onClick={handleSubmit} + disabled={isSubmitting || !title.trim() || !content.trim()} + > + {isSubmitting ? "Posting..." : "Post Thread"} + </Button> + </div> + </form> + </div> + )} + + {!threads?.length && !isComposing && ( + <div className="text-center py-12 text-white/50 border border-white/5 border-dashed rounded-2xl p-8"> + <p className="text-4xl mb-4">💭</p> + <p> + No discussions yet. Be the first to start a conversation about this + course! + </p> + </div> + )} + + <div className="space-y-4"> + {threads?.map((thread) => ( + <button + key={thread.id} + type="button" + onClick={() => onSelectThread(thread.id)} + className="w-full text-left glass-card p-5 rounded-2xl border border-white/10 hover:border-brand-cyan/50 transition-all flex flex-col gap-3 group" + > + <div className="flex justify-between items-start gap-4"> + <h4 className="text-lg font-bold group-hover:text-brand-cyan transition-colors line-clamp-1"> + {thread.title} + </h4> + <div className="flex items-center gap-3 shrink-0"> + <span className="text-xs text-white/40"> + {new Date(thread.created_at).toLocaleDateString()} + </span> + {(isAdmin || currentAddress === thread.author_address) && ( + <span + role="button" + tabIndex={0} + className="text-white/30 hover:text-red-400 transition-colors px-2 py-1" + onClick={(e) => { + e.stopPropagation() + void handleDelete( + e as unknown as React.MouseEvent, + thread.id, + ) + }} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault() + e.stopPropagation() + void handleDelete( + e as unknown as React.MouseEvent, + thread.id, + ) + } + }} + aria-label="Delete thread" + > + × + </span> + )} + </div> + </div> + <div className="text-sm text-white/60 line-clamp-2 prose prose-invert max-w-none"> + <ReactMarkdown>{thread.content}</ReactMarkdown> + </div> + <div className="flex items-center justify-between mt-2 pt-3 border-t border-white/5"> + <WalletAddressPill address={thread.author_address} /> + <div className="text-xs font-semibold px-3 py-1 bg-white/5 rounded-full text-brand-cyan"> + {thread.reply_count}{" "} + {thread.reply_count === 1 ? "reply" : "replies"} + </div> + </div> + </button> + ))} + </div> + </div> + ) +} diff --git a/src/hooks/useAdmin.ts b/src/hooks/useAdmin.ts index e4e2653f..9ab9f152 100644 --- a/src/hooks/useAdmin.ts +++ b/src/hooks/useAdmin.ts @@ -11,6 +11,20 @@ export interface AdminStats { treasuryBalanceUsdc: string } +export interface ValidatorAnalytics { + validatorAddress: string + milestonesReviewed: number + averageReviewTimeSeconds: number + approvalRate: number + appealReversalRate: number +} + +export interface ValidatorReviewQueue { + pendingReviews: number + threshold: number + exceeded: boolean +} + export interface MilestoneSubmission { id: string learnerAddress: string @@ -18,6 +32,9 @@ export interface MilestoneSubmission { evidenceLink: string submittedAt: string status: "pending" | "approved" | "rejected" + /** Non-binding peer review counts (inform admin decisions). */ + peerApprovalCount: number + peerRejectionCount: number } export interface PaginatedMilestones { @@ -55,6 +72,23 @@ type AdminStatsResponse = { treasury_balance_usdc: string } +type ValidatorAnalyticsApi = { + validator_address: string + milestones_reviewed: number + average_review_time_seconds: number + approval_rate: number + appeal_reversal_rate: number +} + +type ValidatorAnalyticsResponse = { + validators: ValidatorAnalyticsApi[] + review_queue: { + pending_reviews: number + threshold: number + exceeded: boolean + } +} + type MilestoneSubmissionApi = { id: number scholar_address: string @@ -64,6 +98,8 @@ type MilestoneSubmissionApi = { evidence_description?: string | null submitted_at: string status: "pending" | "approved" | "rejected" + peer_approval_count?: number + peer_rejection_count?: number } type PaginatedMilestonesApi = { @@ -107,6 +143,8 @@ const mapMilestoneSubmission = ( "", submittedAt: milestone.submitted_at, status: milestone.status, + peerApprovalCount: milestone.peer_approval_count ?? 0, + peerRejectionCount: milestone.peer_rejection_count ?? 0, }) const mapBatchMilestoneResult = ( @@ -151,6 +189,58 @@ export function useAdminStats() { return { stats, loading, error, fetchStats } } +export function useValidatorAnalytics() { + const [analytics, setAnalytics] = useState<ValidatorAnalytics[]>([]) + const [reviewQueue, setReviewQueue] = useState<ValidatorReviewQueue | null>( + null, + ) + const [loading, setLoading] = useState(false) + const [error, setError] = useState<string | null>(null) + + const fetchAnalytics = useCallback(async () => { + setLoading(true) + setError(null) + try { + const data = await apiFetchJson<ValidatorAnalyticsResponse>( + "/api/admin/validators/analytics", + { + auth: true, + }, + ) + + setAnalytics( + (data.validators ?? []).map((item) => ({ + validatorAddress: item.validator_address, + milestonesReviewed: Number(item.milestones_reviewed ?? 0), + averageReviewTimeSeconds: Number( + item.average_review_time_seconds ?? 0, + ), + approvalRate: Number(item.approval_rate ?? 0), + appealReversalRate: Number(item.appeal_reversal_rate ?? 0), + })), + ) + + setReviewQueue({ + pendingReviews: Number(data.review_queue?.pending_reviews ?? 0), + threshold: Number(data.review_queue?.threshold ?? 0), + exceeded: Boolean(data.review_queue?.exceeded), + }) + } catch (err: unknown) { + setError(err instanceof Error ? err.message : "Unknown error") + } finally { + setLoading(false) + } + }, []) + + return { + analytics, + reviewQueue, + loading, + error, + fetchAnalytics, + } +} + export function useAdminMilestones() { const [milestones, setMilestones] = useState<MilestoneSubmission[]>([]) const [total, setTotal] = useState(0) diff --git a/src/hooks/useGovernance.ts b/src/hooks/useGovernance.ts index b64b85b3..ce907492 100644 --- a/src/hooks/useGovernance.ts +++ b/src/hooks/useGovernance.ts @@ -77,8 +77,10 @@ export function useGovernance() { const toProposalStatus = useCallback( (status: unknown): Proposal["status"] => { const normalized = String(status ?? "pending").toLowerCase() + if (normalized === "queued") return "Queued" if (normalized === "approved" || normalized === "passed") return "Passed" if (normalized === "rejected") return "Rejected" + if (normalized === "executed") return "Executed" return "Active" }, [], @@ -338,6 +340,11 @@ export function useGovernance() { ["get_active_proposals", "getActiveProposals"], [[]], ) + const queued = await readContractArray( + client, + ["get_proposals_by_status", "getProposalsByStatus"], + [["Queued"], [{ status: "Queued" }], [{ tag: "Queued" }]], + ) const approved = await readContractArray( client, ["get_proposals_by_status", "getProposalsByStatus"], @@ -353,6 +360,9 @@ export function useGovernance() { ...pending.map((proposal: unknown) => mapProposal(proposal as RawContractProposal, "Active"), ), + ...queued.map((proposal: unknown) => + mapProposal(proposal as RawContractProposal, "Queued"), + ), ...approved.map((proposal: unknown) => mapProposal(proposal as RawContractProposal, "Passed"), ), diff --git a/src/hooks/useProposals.ts b/src/hooks/useProposals.ts index 0b2901c0..cb4bb512 100644 --- a/src/hooks/useProposals.ts +++ b/src/hooks/useProposals.ts @@ -3,7 +3,11 @@ import { useWallet } from "./useWallet" const API_BASE = import.meta.env.VITE_SERVER_URL ?? "http://localhost:4000" -export type BackendProposalStatus = "pending" | "approved" | "rejected" +export type BackendProposalStatus = + | "pending" + | "approved" + | "queued" + | "rejected" export interface ProposalRecord { id: number @@ -15,10 +19,17 @@ export interface ProposalRecord { votesAgainst: bigint status: BackendProposalStatus deadline: string | null + queuedAt: string | null + executionReadyAt: string | null createdAt: string | null userVoteSupport: boolean | null isVotingOpen: boolean - displayStatus: "Voting Open" | "Voting Closed" | "Passed" | "Rejected" + displayStatus: + | "Voting Open" + | "Voting Closed" + | "Queued" + | "Passed" + | "Rejected" } export interface ProposalVoteRecord { @@ -51,6 +62,8 @@ interface ProposalApiRow { votes_against: number | string status: BackendProposalStatus deadline: string | null + queued_at: string | null + execution_ready_at: string | null created_at: string | null user_vote_support: boolean | null } @@ -76,6 +89,7 @@ export const getProposalDisplayStatus = (proposal: { status: BackendProposalStatus deadline: string | null }) => { + if (proposal.status === "queued") return "Queued" as const if (proposal.status === "approved") return "Passed" as const if (proposal.status === "rejected") return "Rejected" as const return isVotingOpen(proposal.status, proposal.deadline) @@ -98,6 +112,8 @@ export const mapProposal = (row: ProposalApiRow): ProposalRecord => { votesAgainst: parseBigInt(row.votes_against), status: row.status, deadline, + queuedAt: row.queued_at ?? null, + executionReadyAt: row.execution_ready_at ?? null, createdAt: row.created_at ?? null, userVoteSupport: typeof row.user_vote_support === "boolean" ? row.user_vote_support : null, diff --git a/src/index.css b/src/index.css index 368afe69..2e49bcc4 100644 --- a/src/index.css +++ b/src/index.css @@ -167,6 +167,38 @@ body { } } +/* ── Skip-to-content link ─────────────────────────────────────────────────── */ +.skip-to-content { + position: absolute; + top: -100%; + left: 1rem; + z-index: 9999; + padding: 0.5rem 1rem; + background: #00d2ff; + color: #000; + font-weight: 700; + font-size: 0.875rem; + border-radius: 0 0 0.5rem 0.5rem; + text-decoration: none; + transition: top 0.15s ease; +} + +.skip-to-content:focus { + top: 0; +} + +/* ── Global focus-visible styles ──────────────────────────────────────────── */ +:focus-visible { + outline: 2px solid #00d2ff; + outline-offset: 2px; + border-radius: 4px; +} + +/* Remove outline for mouse/touch interactions; keep only for keyboard */ +:focus:not(:focus-visible) { + outline: none; +} + /* ── Light mode body background ───────────────────────────────────────────── */ .sds-theme-light body, .light body { diff --git a/src/main.tsx b/src/main.tsx index eb1f3fc9..da323311 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -14,6 +14,28 @@ import { NotificationProvider } from "./providers/NotificationProvider.tsx" import { WalletProvider } from "./providers/WalletProvider.tsx" import "./i18n" import { parseError } from "./util/error" +import { initSentry } from "./lib/sentry" + +// Initialize Sentry for error monitoring +initSentry({ + dsn: import.meta.env.VITE_SENTRY_DSN, + environment: import.meta.env.VITE_SENTRY_ENVIRONMENT || "development", + release: + import.meta.env.VITE_SENTRY_RELEASE || + import.meta.env.VITE_GIT_COMMIT_HASH, + tracesSampleRate: + import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE + ? parseFloat(import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE) + : 0.1, + replaysSessionSampleRate: + import.meta.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE + ? parseFloat(import.meta.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE) + : 0.1, + replaysOnErrorSampleRate: + import.meta.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE + ? parseFloat(import.meta.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE) + : 1.0, +}) // Issue #61 — FOUC prevention: apply theme before first render ;(function () { diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx index a0ea37e4..736620eb 100644 --- a/src/pages/Admin.tsx +++ b/src/pages/Admin.tsx @@ -2,6 +2,14 @@ import { useQuery } from "@tanstack/react-query" import React, { useEffect, useMemo, useState } from "react" import ReactMarkdown from "react-markdown" import { useNavigate } from "react-router-dom" +import { + RadialBarChart, + RadialBar, + Legend, + ResponsiveContainer, + Tooltip, +} from "recharts" +import AddressDisplay from "../components/AddressDisplay" import TxHashLink from "../components/TxHashLink" import { useAdminStats, @@ -26,12 +34,15 @@ import { apiFetchJson } from "../lib/api" import { getAuthToken } from "../util/auth" import { shortenContractId } from "../util/contract" +const API_BASE = import.meta.env.VITE_SERVER_URL || "http://localhost:4000" + type AdminSection = | "courses" | "milestones" | "users" | "wiki" | "treasury" + | "scholarships" | "contracts" | "moderation" type CourseStatus = "draft" | "published" @@ -76,11 +87,31 @@ const sectionDescriptions: Record<AdminSection, string> = { milestones: "Review milestone reports and approvals.", users: "Lookup learner profiles by wallet address.", wiki: "Create and edit platform documentation and guides.", - treasury: "Monitor and manage live treasury controls.", - contracts: "Inspect deployed contract addresses and on-chain state.", - moderation: "Review and moderate flagged comments and content.", + treasury: "Monitor and manage treasury controls.", + scholarships: "View scholarship program health metrics.", + contracts: "Inspect deployed on-chain contract records.", } +const initialCourses: AdminCourse[] = [ + { id: 1, title: "Soroban Basics", status: "published", students: 84 }, + { id: 2, title: "Stellar Security", status: "draft", students: 0 }, +] + +const contractRecords: ContractRecord[] = [ + { + name: "Scholarship Treasury", + tag: "prod", + address: "CXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", + updated: "2026-03-20", + }, + { + name: "Governance Token", + tag: "prod", + address: "CYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY", + updated: "2026-03-20", + }, +] + const STATUSES = ["pending", "approved", "rejected"] as const const formatDate = (value: string | undefined): string => { @@ -99,6 +130,18 @@ const formatDate = (value: string | undefined): string => { const formatCount = (value: number): string => value.toLocaleString(i18n.resolvedLanguage, { maximumFractionDigits: 0 }) +const formatPercent = (value: number): string => { + if (!Number.isFinite(value)) return "0.0%" + return `${value.toFixed(1)}%` +} + +const formatReviewTime = (seconds: number): string => { + if (!Number.isFinite(seconds) || seconds < 0) return "-" + if (seconds < 60) return `${Math.round(seconds)}s` + if (seconds < 3600) return `${(seconds / 60).toFixed(1)}m` + return `${(seconds / 3600).toFixed(1)}h` +} + const renderAddress = (value: string | undefined) => value ? shortenContractId(value, 6, 6) : "Not available" @@ -148,7 +191,10 @@ const ConfirmDialog: React.FC<{ <p className="text-sm text-white/60 mb-1"> Learner:{" "} <span className="font-mono text-white/90"> - {milestone.learnerAddress} + <AddressDisplay + address={milestone.learnerAddress} + showExplorerLink={false} + /> </span> </p> <p className="text-sm text-white/60 mb-4"> @@ -285,6 +331,7 @@ const Admin: React.FC = () => { "users", "wiki", "treasury", + "scholarships", "contracts", "moderation", ] as const @@ -314,6 +361,8 @@ const Admin: React.FC = () => { {activeSection === "users" && <UserLookup />} {activeSection === "wiki" && <WikiManagement />} {activeSection === "treasury" && <TreasuryControls />} + {activeSection === "wiki" && <WikiManagement />} + {activeSection === "scholarships" && <ScholarshipMetrics />} {activeSection === "contracts" && <ContractInfo />} {activeSection === "moderation" && <ModerationQueue />} </main> @@ -419,6 +468,13 @@ const CourseManagement: React.FC = () => { const MilestoneQueue: React.FC = () => { const { data: courseOptionsData = [], error: courseOptionsError } = useAdminCoursesList() + const { + analytics, + reviewQueue, + loading: analyticsLoading, + error: analyticsError, + fetchAnalytics, + } = useValidatorAnalytics() const { milestones, total, @@ -463,6 +519,10 @@ const MilestoneQueue: React.FC = () => { }) }, [courseFilter, statusFilter, fetchMilestones]) + useEffect(() => { + void fetchAnalytics() + }, [fetchAnalytics]) + const handlePageChange = (newPage: number) => { void fetchMilestones(newPage, { course: courseFilter !== "All" ? courseFilter : undefined, @@ -479,6 +539,7 @@ const MilestoneQueue: React.FC = () => { } else { await rejectMilestone(milestone.id) } + await fetchAnalytics() } const pendingMilestones = milestones.filter( @@ -571,8 +632,7 @@ const MilestoneQueue: React.FC = () => { Validator review queue is above threshold </p> <p className="mt-1 text-xs text-yellow-100/80"> - Pending: {formatCount(reviewQueue.pendingReviews)} | Threshold:{" "} - {formatCount(reviewQueue.threshold)} + Pending: {formatCount(reviewQueue.pendingReviews)} | Threshold: {formatCount(reviewQueue.threshold)} </p> </div> )} @@ -612,10 +672,7 @@ const MilestoneQueue: React.FC = () => { {!analyticsLoading && analytics.length === 0 && ( <tr> - <td - colSpan={5} - className="py-8 text-center text-sm text-white/40" - > + <td colSpan={5} className="py-8 text-center text-sm text-white/40"> No validator analytics available. </td> </tr> @@ -647,6 +704,7 @@ const MilestoneQueue: React.FC = () => { </tbody> </table> </div> + <div className="flex flex-wrap gap-3 mb-4 items-center"> <div className="flex items-center gap-2"> <label @@ -712,6 +770,7 @@ const MilestoneQueue: React.FC = () => { <th className="py-3 px-4 font-medium">Course</th> <th className="py-3 px-4 font-medium">Submitted</th> <th className="py-3 px-4 font-medium">Evidence</th> + <th className="py-3 px-4 font-medium">Peer signals</th> <th className="py-3 px-4 font-medium">Status</th> <th className="py-3 px-4 font-medium">Actions</th> </tr> @@ -720,7 +779,7 @@ const MilestoneQueue: React.FC = () => { {loading && ( <tr> <td - colSpan={6} + colSpan={7} className="py-12 text-center text-sm text-white/40 animate-pulse" > Loading milestones… @@ -730,7 +789,7 @@ const MilestoneQueue: React.FC = () => { {!loading && milestones.length === 0 && ( <tr> - <td colSpan={6} className="py-12 text-center"> + <td colSpan={7} className="py-12 text-center"> <p className="text-white/40 text-sm"> No milestone submissions found. </p> @@ -760,9 +819,13 @@ const MilestoneQueue: React.FC = () => { className="border-b border-white/5 hover:bg-white/3 transition-colors" > <td className="py-3 px-4"> - <span className="font-mono text-xs text-white/50"> - {shortenContractId(milestone.learnerAddress, 8, 4)} - </span> + <AddressDisplay + address={milestone.learnerAddress} + prefixLength={8} + suffixLength={4} + showExplorerLink={false} + addressClassName="text-xs text-white/50" + /> </td> <td className="py-3 px-4 text-sm text-white/80"> {milestone.course} @@ -773,6 +836,10 @@ const MilestoneQueue: React.FC = () => { <td className="py-3 px-4"> <EvidenceLink value={milestone.evidenceLink} /> </td> + <td className="py-3 px-4 text-xs font-mono text-white/55 whitespace-nowrap"> + +{milestone.peerApprovalCount} / − + {milestone.peerRejectionCount} + </td> <td className="py-3 px-4"> <span className={`text-xs px-2 py-0.5 rounded-full border ${statusStyles[milestone.status]}`} @@ -857,6 +924,8 @@ const MilestoneQueue: React.FC = () => { ) } +export default Admin + const UserLookup: React.FC = () => { const [search, setSearch] = useState("") const [submittedAddress, setSubmittedAddress] = useState<string | null>(null) @@ -1510,422 +1579,124 @@ const WikiManagement: React.FC = () => { ) } -interface FlaggedContent { - id: number - content_type: "comment" | "proposal" - content_id: number - reporter_address: string - reason: string - flag_count: number - status: "pending" | "reviewed" | "dismissed" - admin_action?: "deleted" | "dismissed" | "warned" - admin_address?: string - admin_notes?: string - is_hidden: boolean - created_at: string - reviewed_at?: string -} - -interface FlagDetails { - flag: FlaggedContent - content: { - id: number - content: string - author_address: string - created_at: string - } | null - auditLog: Array<{ - id: number - action: string - actor_address: string - notes: string - created_at: string - }> +interface ScholarshipMetricsData { + active_scholarships: number + total_scholars: number + completion_rate: number + avg_milestones_per_scholar: number + dropout_rate: number + total_usdc_disbursed: number } -const ModerationQueue: React.FC = () => { - const [statusFilter, setStatusFilter] = useState<"pending" | "reviewed">("pending") - const [flags, setFlags] = useState<FlaggedContent[]>([]) - const [loading, setLoading] = useState(false) +const ScholarshipMetrics: React.FC = () => { + const [metrics, setMetrics] = useState<ScholarshipMetricsData | null>(null) + const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) - const [selectedFlagId, setSelectedFlagId] = useState<number | null>(null) - const [selectedDetails, setSelectedDetails] = useState<FlagDetails | null>(null) - const [detailsLoading, setDetailsLoading] = useState(false) - const [adminNotes, setAdminNotes] = useState("") - const [actionInProgress, setActionInProgress] = useState(false) - - const loadFlags = async () => { - try { - setLoading(true) - setError(null) - const res = await apiFetchJson<{ data: FlaggedContent[] }>( - `/api/admin/moderation?status=${statusFilter}`, - { auth: true }, - ) - setFlags(res.data || []) - } catch (err) { - setError(err instanceof Error ? err.message : "Failed to load flags") - } finally { - setLoading(false) - } - } - useEffect(() => { - void loadFlags() - setSelectedFlagId(null) - setSelectedDetails(null) - }, [statusFilter]) - - const handleSelectFlag = async (flagId: number) => { - try { - setSelectedFlagId(flagId) - setDetailsLoading(true) - const res = await apiFetchJson<{ data: FlagDetails }>( - `/api/admin/moderation/${flagId}`, - { auth: true }, - ) - setSelectedDetails(res.data) - setAdminNotes("") - } catch (err) { - console.error("Failed to load flag details", err) - } finally { - setDetailsLoading(false) + const fetchMetrics = async () => { + try { + const res = await fetch(`${API_BASE}/api/scholarships/metrics`) + if (!res.ok) throw new Error(`HTTP ${res.status}`) + const data = await res.json() + setMetrics(data) + } catch (err) { + setError("Failed to load metrics") + } finally { + setLoading(false) + } } - } + void fetchMetrics() + }, []) - const handleTakeAction = async (action: "delete" | "dismiss" | "warn") => { - if (!selectedFlagId) return - try { - setActionInProgress(true) - await apiFetchJson(`/api/admin/moderation/${selectedFlagId}/action`, { - method: "POST", - auth: true, - headers: { - "Content-Type": "application/json", + const chartData = metrics + ? [ + { + name: "Completion Rate", + value: metrics.completion_rate, + fill: "#00d2ff", }, - body: JSON.stringify({ action, adminNotes }), - }) - await loadFlags() - setSelectedFlagId(null) - setSelectedDetails(null) - } catch (err) { - console.error("Action failed", err) - } finally { - setActionInProgress(false) - } - } + { + name: "Dropout Rate", + value: metrics.dropout_rate, + fill: "#ff4d4d", + }, + ] + : [] return ( - <section className="space-y-6"> - <div> - <h1 className="text-3xl font-black text-white tracking-tight"> - Content Moderation Queue - </h1> - <p className="text-sm text-white/50 mt-1"> - Review flags submitted by users and take corrective action. - </p> - </div> - - <div className="flex gap-2 p-1 bg-white/5 border border-white/5 rounded-2xl w-fit"> - <button - type="button" - onClick={() => setStatusFilter("pending")} - className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${ - statusFilter === "pending" - ? "bg-yellow-500/20 text-yellow-400 shadow-[0_0_20px_rgba(234,179,8,0.1)] border border-yellow-500/30" - : "text-white/60 hover:text-white" - }`} - > - Pending Review - </button> - <button - type="button" - onClick={() => setStatusFilter("reviewed")} - className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${ - statusFilter === "reviewed" - ? "bg-emerald-500/20 text-emerald-400 shadow-[0_0_20px_rgba(16,185,129,0.1)] border border-emerald-500/30" - : "text-white/60 hover:text-white" - }`} - > - Reviewed & Acted On - </button> - </div> + <section aria-busy={loading}> + <h2 className="text-2xl font-black mb-6">Scholarship Program Health</h2> - {error && ( - <p className="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-xl px-4 py-3"> - Error: {error} - </p> + {loading && ( + <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8"> + {Array.from({ length: 6 }).map((_, i) => ( + <div + key={i} + className="h-24 rounded-2xl bg-white/5 animate-pulse" + /> + ))} + </div> )} - <div className="grid grid-cols-1 lg:grid-cols-12 gap-8"> - <div className="lg:col-span-7 space-y-4"> - <div className="overflow-hidden rounded-3xl border border-white/5 glass"> - <table className="w-full text-left border-collapse"> - <thead> - <tr className="border-b border-white/5 text-xs uppercase tracking-widest text-white/40 bg-white/3"> - <th className="py-4 px-6 font-black">Content</th> - <th className="py-4 px-6 font-black text-center">Flags</th> - <th className="py-4 px-6 font-black">Reporter</th> - <th className="py-4 px-6 font-black">Reason</th> - </tr> - </thead> - <tbody> - {loading && ( - <tr> - <td - colSpan={4} - className="py-12 text-center text-sm text-white/40 animate-pulse" - > - Loading flagged items… - </td> - </tr> - )} - - {!loading && flags.length === 0 && ( - <tr> - <td colSpan={4} className="py-12 text-center text-white/30"> - <p className="text-sm font-bold uppercase tracking-wider"> - All Clean! - </p> - <p className="text-xs text-white/20 mt-1"> - No content in this queue requires moderation. - </p> - </td> - </tr> - )} - - {!loading && - flags.map((flag) => ( - <tr - key={flag.id} - onClick={() => void handleSelectFlag(flag.id)} - className={`border-b border-white/5 hover:bg-white/5 transition-all cursor-pointer ${ - selectedFlagId === flag.id ? "bg-white/10" : "" - }`} - > - <td className="py-4 px-6 text-sm text-white font-bold capitalize"> - {flag.content_type} #{flag.content_id} - </td> - <td className="py-4 px-6 text-sm text-center"> - <span className="px-2.5 py-1 rounded-full text-xs font-black bg-red-500/10 text-red-400 border border-red-500/20"> - {flag.flag_count} - </span> - </td> - <td className="py-4 px-6 font-mono text-xs text-white/60"> - {flag.reporter_address.slice(0, 6)}... - {flag.reporter_address.slice(-4)} - </td> - <td className="py-4 px-6 text-xs text-white/70 max-w-[200px] truncate"> - {flag.reason} - </td> - </tr> - ))} - </tbody> - </table> + {error && <p className="text-red-400 mb-6">{error}</p>} + + {metrics && ( + <> + <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8"> + {[ + { + label: "Active Scholarships", + value: metrics.active_scholarships, + }, + { label: "Total Scholars", value: metrics.total_scholars }, + { + label: "Completion Rate", + value: `${metrics.completion_rate}%`, + }, + { + label: "Avg Milestones / Scholar", + value: metrics.avg_milestones_per_scholar, + }, + { label: "Dropout Rate", value: `${metrics.dropout_rate}%` }, + { + label: "Total USDC Disbursed", + value: `$${(metrics.total_usdc_disbursed / 1e7).toLocaleString(undefined, { maximumFractionDigits: 2 })}`, + }, + ].map(({ label, value }) => ( + <div + key={label} + className="glass-card p-5 rounded-2xl border border-white/5" + > + <p className="text-xs uppercase tracking-widest text-white/40 mb-1"> + {label} + </p> + <p className="text-2xl font-black text-brand-cyan">{value}</p> + </div> + ))} </div> - </div> - - <div className="lg:col-span-5"> - {selectedFlagId === null ? ( - <div className="glass border border-white/5 rounded-[2rem] p-8 text-center text-white/30 flex flex-col items-center justify-center min-h-[300px]"> - <span className="text-4xl mb-4" aria-hidden="true"> - 🔎 - </span> - <p className="text-sm font-bold uppercase tracking-wider"> - Select an Item - </p> - <p className="text-xs text-white/20 mt-1 max-w-[240px]"> - Click any item in the moderation queue to view details and take - actions. - </p> - </div> - ) : detailsLoading ? ( - <div className="glass border border-white/5 rounded-[2rem] p-8 text-center text-white/30 animate-pulse flex flex-col items-center justify-center min-h-[300px]"> - Loading details… - </div> - ) : selectedDetails ? ( - <div className="glass-card border border-white/10 rounded-[2.5rem] p-8 space-y-6 shadow-2xl animate-in zoom-in-95 duration-300"> - <header className="flex justify-between items-start"> - <div> - <h2 className="text-xl font-black text-white"> - Moderation Details - </h2> - <p className="text-xs text-white/40 uppercase tracking-widest mt-1"> - {selectedDetails.flag.content_type} #{selectedDetails.flag.content_id} - </p> - </div> - {selectedDetails.flag.is_hidden && ( - <span className="px-2.5 py-1 text-[10px] font-black uppercase tracking-wider rounded-full bg-red-500/20 text-red-400 border border-red-500/30"> - Auto-Hidden - </span> - )} - </header> - - <div className="space-y-4"> - <div> - <label className="block text-[10px] font-black uppercase tracking-wider text-white/40 mb-2"> - Flagged Content - </label> - {selectedDetails.content ? ( - <div className="bg-black/40 border border-white/5 rounded-2xl p-5 text-sm text-white/80 leading-relaxed font-medium"> - <p className="text-white/60 mb-3 text-xs italic"> - Comment by:{" "} - <span className="font-mono not-italic text-white"> - {selectedDetails.content.author_address.slice(0, 6)}... - {selectedDetails.content.author_address.slice(-4)} - </span> - </p> - <p>{selectedDetails.content.content}</p> - </div> - ) : ( - <p className="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-xl px-4 py-2.5 font-bold"> - Content has been soft-deleted or does not exist. - </p> - )} - </div> - - <div className="bg-white/3 border border-white/5 rounded-2xl p-5 space-y-3"> - <div> - <span className="text-[10px] font-black uppercase tracking-wider text-white/40 block"> - Reporter - </span> - <span className="font-mono text-xs text-white/80"> - {selectedDetails.flag.reporter_address} - </span> - </div> - <div> - <span className="text-[10px] font-black uppercase tracking-wider text-white/40 block"> - Reason Given - </span> - <p className="text-xs text-white/80 mt-1 leading-relaxed font-medium"> - {selectedDetails.flag.reason} - </p> - </div> - </div> - {statusFilter === "pending" && selectedDetails.content && ( - <div className="space-y-4 pt-4 border-t border-white/5"> - <div className="space-y-2"> - <label - htmlFor="admin-notes" - className="block text-[10px] font-black uppercase tracking-wider text-white/40" - > - Admin Notes / Warn Message - </label> - <textarea - id="admin-notes" - rows={3} - value={adminNotes} - onChange={(e) => setAdminNotes(e.target.value)} - placeholder="Add audit justification or explanation for warning..." - className="w-full bg-black/40 border border-white/10 rounded-2xl p-4 text-xs text-white focus:outline-none focus:border-brand-cyan/40 resize-none placeholder-white/20" - /> - </div> - - <div className="grid grid-cols-3 gap-2"> - <button - type="button" - disabled={actionInProgress} - onClick={() => void handleTakeAction("dismiss")} - className="px-3 py-3 text-[10px] font-black uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 rounded-xl hover:bg-emerald-500/20 hover:scale-105 active:scale-95 transition-all disabled:opacity-50" - > - Dismiss Flag - </button> - <button - type="button" - disabled={actionInProgress || !adminNotes.trim()} - onClick={() => void handleTakeAction("warn")} - className="px-3 py-3 text-[10px] font-black uppercase tracking-wider bg-yellow-500/10 text-yellow-400 border border-yellow-500/30 rounded-xl hover:bg-yellow-500/20 hover:scale-105 active:scale-95 transition-all disabled:opacity-50" - > - Warn User - </button> - <button - type="button" - disabled={actionInProgress} - onClick={() => void handleTakeAction("delete")} - className="px-3 py-3 text-[10px] font-black uppercase tracking-wider bg-red-500/10 text-red-400 border border-red-500/30 rounded-xl hover:bg-red-500/20 hover:scale-105 active:scale-95 transition-all disabled:opacity-50" - > - Delete Content - </button> - </div> - </div> - )} - - {statusFilter === "reviewed" && ( - <div className="space-y-4 pt-4 border-t border-white/5"> - <div className="bg-white/3 border border-white/5 rounded-2xl p-5 space-y-3"> - <h3 className="text-xs font-black uppercase tracking-widest text-white/50 border-b border-white/5 pb-2"> - Moderation Outcome - </h3> - <div className="grid grid-cols-2 gap-2 text-xs"> - <div> - <span className="text-[10px] font-black uppercase tracking-wider text-white/40 block"> - Action Taken - </span> - <span className="text-white capitalize font-black"> - {selectedDetails.flag.admin_action || "Reviewed"} - </span> - </div> - <div> - <span className="text-[10px] font-black uppercase tracking-wider text-white/40 block"> - Moderator - </span> - <span className="font-mono text-white/80"> - {selectedDetails.flag.admin_address - ? `${selectedDetails.flag.admin_address.slice(0, 6)}...${selectedDetails.flag.admin_address.slice(-4)}` - : "System"} - </span> - </div> - </div> - {selectedDetails.flag.admin_notes && ( - <div> - <span className="text-[10px] font-black uppercase tracking-wider text-white/40 block"> - Audit Notes - </span> - <p className="text-xs text-white/80 leading-relaxed font-medium mt-1"> - {selectedDetails.flag.admin_notes} - </p> - </div> - )} - </div> - - {selectedDetails.auditLog.length > 0 && ( - <div className="space-y-3"> - <label className="block text-[10px] font-black uppercase tracking-wider text-white/40"> - Audit Log - </label> - <div className="space-y-2"> - {selectedDetails.auditLog.map((log) => ( - <div - key={log.id} - className="bg-black/25 border border-white/5 rounded-xl p-3 text-xs leading-relaxed" - > - <div className="flex justify-between items-center mb-1 text-[10px] text-white/40"> - <span className="font-black uppercase text-brand-cyan/80"> - {log.action} - </span> - <span> - {new Date(log.created_at).toLocaleDateString()} - </span> - </div> - <p className="text-white/80 font-medium"> - {log.notes || "No notes provided."} - </p> - </div> - ))} - </div> - </div> - )} - </div> - )} - </div> - </div> - ) : null} - </div> - </div> + <div className="glass-card p-6 rounded-2xl border border-white/5"> + <h3 className="text-lg font-bold mb-4">Completion vs Dropout</h3> + <ResponsiveContainer width="100%" height={260}> + <RadialBarChart + cx="50%" + cy="50%" + innerRadius="30%" + outerRadius="80%" + data={chartData} + > + <RadialBar + dataKey="value" + label={{ position: "insideStart", fill: "#fff" }} + /> + <Legend /> + <Tooltip formatter={(value: number) => `${value}%`} /> + </RadialBarChart> + </ResponsiveContainer> + </div> + </> + )} </section> ) } - -export default Admin diff --git a/src/pages/DaoProposals.tsx b/src/pages/DaoProposals.tsx index 9d5f70fd..47eb6277 100644 --- a/src/pages/DaoProposals.tsx +++ b/src/pages/DaoProposals.tsx @@ -23,6 +23,7 @@ import { type FilterType = | "Voting Open" | "Voting Closed" + | "Queued" | "Passed" | "Rejected" | "All" @@ -36,20 +37,25 @@ const shortenAddress = (address: string) => { return `${address.slice(0, 6)}...${address.slice(-4)}` } -const formatCountdown = (deadline: string | null, now: number) => { +const formatCountdown = ( + deadline: string | null, + now: number, + { queued = false }: { queued?: boolean } = {}, +) => { if (!deadline) return "No deadline set" const diff = new Date(deadline).getTime() - now - if (diff <= 0) return "Voting closed" + if (diff <= 0) return queued ? "Ready for execution" : "Voting closed" const minutes = Math.floor(diff / (1000 * 60)) const days = Math.floor(minutes / (60 * 24)) const hours = Math.floor((minutes % (60 * 24)) / 60) const mins = minutes % 60 - if (days > 0) return `${days}d ${hours}h remaining` - if (hours > 0) return `${hours}h ${mins}m remaining` - return `${Math.max(mins, 1)}m remaining` + const prefix = queued ? "Execution in " : "" + if (days > 0) return `${prefix}${days}d ${hours}h remaining` + if (hours > 0) return `${prefix}${hours}h ${mins}m remaining` + return `${prefix}${Math.max(mins, 1)}m remaining` } const formatTokenAmount = (value: bigint) => value.toString() @@ -57,6 +63,7 @@ const formatTokenAmount = (value: bigint) => value.toString() const getFilterValue = (proposal: ProposalRecord): FilterType => { if (proposal.displayStatus === "Voting Open") return "Voting Open" if (proposal.displayStatus === "Voting Closed") return "Voting Closed" + if (proposal.displayStatus === "Queued") return "Queued" if (proposal.displayStatus === "Passed") return "Passed" return "Rejected" } @@ -351,6 +358,7 @@ const DaoProposals: React.FC = () => { [ "Voting Open", "Voting Closed", + "Queued", "Passed", "Rejected", "All", @@ -370,30 +378,6 @@ const DaoProposals: React.FC = () => { ))} </div> - {showCancelConfirm && selectedProposal && ( - <ConfirmDialog - title="Cancel Proposal" - description="Are you sure you want to cancel this proposal? This will permanently remove it from the DAO and any votes cast will be lost. This action cannot be undone." - confirmLabel="Cancel Proposal" - cancelLabel="Keep Proposal" - onConfirm={() => void handleCancelProposal()} - onCancel={() => setShowCancelConfirm(false)} - isDestructive - /> - )} - - {showDeleteDraftConfirm && ( - <ConfirmDialog - title="Delete Draft" - description="Are you sure you want to delete your proposal draft? All your progress will be permanently lost. This action cannot be undone." - confirmLabel="Delete Draft" - cancelLabel="Keep Draft" - onConfirm={handleDeleteDraft} - onCancel={() => setShowDeleteDraftConfirm(false)} - isDestructive - /> - )} - {selectedProposal && ( <section className="glass-card p-10 rounded-[2.5rem] border border-white/5 mb-10"> <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-8"> @@ -412,7 +396,12 @@ const DaoProposals: React.FC = () => { <span className="text-white/70">ID #{selectedProposal.id}</span> <span className="w-1.5 h-1.5 bg-white/20 rounded-full" /> <span className="text-white/50"> - {formatCountdown(selectedProposal.deadline, now)} + {formatCountdown( + selectedProposal.executionReadyAt ?? + selectedProposal.deadline, + now, + { queued: selectedProposal.status === "queued" }, + )} </span> </div> </div> @@ -496,7 +485,14 @@ const DaoProposals: React.FC = () => { <p> Total voting power cast: {formatTokenAmount(totalVotes)} GOV </p> - <p>{formatCountdown(selectedProposal.deadline, now)}</p> + <p> + {formatCountdown( + selectedProposal.executionReadyAt ?? + selectedProposal.deadline, + now, + { queued: selectedProposal.status === "queued" }, + )} + </p> </div> <div className="mb-8 rounded-2xl border border-white/10 bg-white/5 p-4"> <div className="flex items-center justify-between gap-3 mb-4"> @@ -651,7 +647,13 @@ const DaoProposals: React.FC = () => { <div className="flex flex-wrap items-center gap-6 text-[10px] font-black uppercase tracking-widest text-white/40"> <span>Yes: {formatTokenAmount(proposal.votesFor)}</span> <span>No: {formatTokenAmount(proposal.votesAgainst)}</span> - <span>{formatCountdown(proposal.deadline, now)}</span> + <span> + {formatCountdown( + proposal.executionReadyAt ?? proposal.deadline, + now, + { queued: proposal.status === "queued" }, + )} + </span> <span className="ml-auto text-brand-cyan">View details</span> </div> </button> diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 015ca31f..0784d6d8 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -5,7 +5,7 @@ import ActivityFeed from "../components/ActivityFeed" import AddressDisplay from "../components/AddressDisplay" import CourseCard from "../components/CourseCard" import LRNBalanceWidget from "../components/LRNBalanceWidget" -import MyBookmarks from "../components/MyBookmarks" +import { DashboardStatsSkeleton } from "../components/SkeletonLoader" import { useCourse } from "../hooks/useCourse" import { useLearnerProfile } from "../hooks/useLearnerProfile" import { useLearnToken } from "../hooks/useLearnToken" @@ -61,10 +61,7 @@ const Dashboard: React.FC = () => { if (isInitializing && !address) { return ( - <div - aria-busy="true" - className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto" - > + <div aria-busy="true" className="min-h-screen p-6 md:p-12 max-w-7xl mx-auto"> <DashboardStatsSkeleton /> </div> ) diff --git a/src/pages/Leaderboard.tsx b/src/pages/Leaderboard.tsx index 19594c30..58490deb 100644 --- a/src/pages/Leaderboard.tsx +++ b/src/pages/Leaderboard.tsx @@ -2,6 +2,7 @@ import { ChevronLeft, ChevronRight, Trophy } from "lucide-react" import React, { useMemo, useState } from "react" import { useTranslation } from "react-i18next" import AddressDisplay from "../components/AddressDisplay" +import { LeaderboardRowSkeleton } from "../components/SkeletonLoader" import { EmptyState } from "../components/states/emptyState" import { ErrorState } from "../components/states/errorState" import { useLeaderboard } from "../hooks/useLeaderboard" @@ -74,7 +75,7 @@ const Leaderboard: React.FC = () => { } return ( - <div className="p-6 md:p-12 max-w-6xl mx-auto text-white animate-in fade-in slide-in-from-bottom-8 duration-1000"> + <div aria-busy={isLoading} className="p-6 md:p-12 max-w-6xl mx-auto text-white animate-in fade-in slide-in-from-bottom-8 duration-1000"> <header className="mb-12 text-center"> <h1 className="text-5xl md:text-6xl font-black mb-4 tracking-tighter text-gradient"> {t("pages.leaderboard.title")} @@ -85,14 +86,7 @@ const Leaderboard: React.FC = () => { </header> {isLoading ? ( - <div className="space-y-4"> - {[...Array(3)].map((_, i) => ( - <div - key={i} - className="h-24 rounded-[2.5rem] bg-white/5 animate-pulse" - /> - ))} - </div> + <LeaderboardRowSkeleton /> ) : error ? ( <ErrorState message={error instanceof Error ? error.message : String(error)} diff --git a/src/pages/LessonView.tsx b/src/pages/LessonView.tsx index 8be14c2f..e15bdbef 100644 --- a/src/pages/LessonView.tsx +++ b/src/pages/LessonView.tsx @@ -6,7 +6,7 @@ import LessonContent from "../components/LessonContent" import CourseReviewsPanel from "../components/CourseReviewsPanel" import LessonSidebar from "../components/LessonSidebar" import MilestoneSubmitPanel from "../components/MilestoneSubmitPanel" -import SponsorLogosForTrack from "../components/SponsorLogosForTrack" + import { LessonListSkeleton } from "../components/skeletons/LessonListSkeleton" import { useCourse } from "../hooks/useCourse" import { useCourseDetail } from "../hooks/useCourses" @@ -264,64 +264,17 @@ const LessonView: React.FC = () => { </span> <span className="text-white/40 text-sm">{course.title}</span> </div> - {course.hasUpdatedContent && ( - <div className="mb-4 rounded-2xl border border-amber-300/30 bg-amber-300/10 px-4 py-3 text-sm text-amber-100"> - Updated content is available. You are currently on version{" "} - <strong>{course.enrollmentContentVersion ?? 1}</strong>, while the - latest is <strong>{course.latestContentVersion ?? 1}</strong>. - </div> - )} + <h1 className="text-4xl md:text-5xl font-bold text-white tracking-tight"> + {lesson.title} + </h1> + </header> + <div className="flex flex-col md:flex-row md:items-end justify-between gap-4"> <h1 className="text-4xl md:text-5xl font-bold text-white tracking-tight"> {currentTab === "forum" ? "Community Forum" : lesson.title} </h1> </div> - <SponsorLogosForTrack track={course.track} /> </header> - {hasPrerequisiteData ? ( - <section className="mb-6 rounded-2xl border border-white/10 bg-white/5 p-4"> - <div className="flex flex-wrap items-center justify-between gap-3 mb-3"> - <h2 className="text-sm font-black uppercase tracking-widest text-white/70"> - Prerequisites - </h2> - <button - type="button" - onClick={() => void enroll(course.slug)} - disabled={hasUnmetPrerequisites || isEnrolledInCourse} - title={ - hasUnmetPrerequisites - ? "Complete all prerequisite courses first." - : isEnrolledInCourse - ? "Already enrolled" - : "Enroll in this course" - } - className="px-4 py-2 rounded-full border border-brand-cyan/30 text-brand-cyan disabled:opacity-40 text-xs font-black uppercase tracking-widest" - > - {isEnrolledInCourse ? "Enrolled" : "Enroll"} - </button> - </div> - <ul className="space-y-2"> - {prerequisiteStatuses.map(({ prereq, completed }) => ( - <li key={prereq.slug} className="flex items-center justify-between gap-2"> - <div className="text-sm text-white/80 flex items-center gap-2"> - <span className={completed ? "text-emerald-300" : "text-white/40"}> - {completed ? "✓" : "○"} - </span> - <span>{prereq.title}</span> - </div> - <Link - to={`/courses/${prereq.slug}/lessons/1`} - title={prereq.title} - className="text-xs text-brand-cyan/90 underline decoration-dotted" - > - Open - </Link> - </li> - ))} - </ul> - </section> - ) : null} - {/* Course progress bar */} {allLessons.length > 0 && (() => { @@ -457,24 +410,36 @@ const LessonView: React.FC = () => { </div> <div> + <LessonContent + lesson={lesson ?? loadingLesson} + isLoading={isLoadingCourse || isLoadingContent} + isCompleted={isCompleted} + isCompleting={isCompletingMilestone} + timeSpentLabel={timeSpentLabel} + onMarkComplete={handleMarkComplete} + prevLessonId={prevLessonId} + nextLessonId={nextLessonId} + isNextLocked={isNextLocked} + /> + {currentTab === "forum" ? ( <div className="animate-in fade-in"> <CourseForum courseId={course.slug} /> </div> ) : ( - <LessonContent - lesson={lesson ?? loadingLesson} - isLoading={isLoadingCourse || isLoadingContent} - isCompleted={isCompleted} - isCompleting={isCompletingMilestone} - timeSpentLabel={timeSpentLabel} - onMarkComplete={handleMarkComplete} - onScrolledToBottom={() => markLessonRead(lessonId)} - prevLessonId={prevLessonId} - nextLessonId={nextLessonId} - isNextLocked={isNextLocked} - /> - )} + <> + <LessonContent + lesson={lesson ?? loadingLesson} + isLoading={isLoadingCourse || isLoadingContent} + isCompleted={isCompleted} + isCompleting={isCompletingMilestone} + timeSpentLabel={timeSpentLabel} + onMarkComplete={handleMarkComplete} + onScrolledToBottom={() => markLessonRead(lessonId)} + prevLessonId={prevLessonId} + nextLessonId={nextLessonId} + isNextLocked={isNextLocked} + /> {lesson?.isMilestone && !isLoadingCourse && !isLoadingContent && ( <div className="mt-12 animate-in fade-in slide-in-from-top-4 duration-1000"> diff --git a/src/pages/NotFound.module.css b/src/pages/NotFound.module.css index 817f4c5f..878964b0 100644 --- a/src/pages/NotFound.module.css +++ b/src/pages/NotFound.module.css @@ -57,9 +57,17 @@ font-weight: 500; } +.actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + align-items: center; + margin-top: 0.5rem; +} + .buttonLink { text-decoration: none; - margin-top: 0.5rem; } @keyframes fadeInUp { diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx index 13033492..287f461c 100644 --- a/src/pages/NotFound.tsx +++ b/src/pages/NotFound.tsx @@ -4,7 +4,7 @@ import styles from "./NotFound.module.css" const NotFound: React.FC = () => { return ( - <div className={styles.container}> + <div className={styles.container} data-testid="not-found-page"> <div className={styles.content}> <div className={styles.iconWrapper}> <Icon.SearchLg size="xl" /> @@ -13,11 +13,26 @@ const NotFound: React.FC = () => { <p className={styles.message}> This page doesn't exist — but your learning journey does. </p> - <Link to="/" className={styles.buttonLink}> - <Button size="md" variant="primary"> - Go Home + <div className={styles.actions}> + <Button + type="button" + size="md" + variant="secondary" + onClick={() => window.history.back()} + data-testid="not-found-go-back" + > + Go back </Button> - </Link> + <Link + to="/" + className={styles.buttonLink} + data-testid="not-found-go-home" + > + <Button size="md" variant="primary"> + Go Home + </Button> + </Link> + </div> </div> </div> ) diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 0436a745..bdef6e1f 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next" import { Link, useParams } from "react-router-dom" import { ActivityFeed } from "../components/ActivityFeed" import AddressDisplay from "../components/AddressDisplay" -import { FollowButton } from "../components/FollowButton" + import IdenticonAvatar from "../components/IdenticonAvatar" import LRNHistoryChart from "../components/LRNHistoryChart" import ProfileEditForm, { @@ -169,6 +169,38 @@ const Profile: React.FC = () => { void fetchProfileData() }, [fetchProfileData]) + // Determine which address to view (from URL param or connected wallet) + useEffect(() => { + const pathMatch = window.location.pathname.match(/\/profile\/(.+)/) + if (pathMatch?.[1]) { + setViewAddress(pathMatch[1]) + } else if (walletAddress) { + setViewAddress(walletAddress) + } + }, [walletAddress]) + + // Fetch rich profile data + const fetchProfileData = useCallback(async () => { + if (!viewAddress) return + + try { + const response = await fetch(`/api/profile/${viewAddress}`) + if (!response.ok) { + const errorData = await response.json().catch(() => ({})) + throw new Error(errorData.error || "Failed to load profile") + } + const data = await response.json() + setUserProfile(data.profile) + setStats(data.stats) + } catch (err) { + console.error("[profile] Error loading profile data:", err) + } + }, [viewAddress]) + + useEffect(() => { + void fetchProfileData() + }, [fetchProfileData]) + useEffect(() => { void fetchCredentials() }, [fetchCredentials]) @@ -201,14 +233,12 @@ const Profile: React.FC = () => { }) if (!response.ok) { - const errorData = (await response.json().catch(() => ({}))) as { - error?: string - } + const errorData = await response.json().catch(() => ({})) throw new Error(errorData.error || "Failed to save profile") } - const data = (await response.json()) as { profile?: UserProfile } - setUserProfile(data.profile ?? null) + const data = await response.json() + setUserProfile(data.profile) setIsEditing(false) } catch (err) { console.error("[profile] Error saving profile:", err) @@ -230,10 +260,7 @@ const Profile: React.FC = () => { Object.values(userProfile.socialLinks).some(Boolean) const siteUrl = "https://learnvault.app" - const lrnBalance = - stats?.lrnBalance?.toLocaleString() || - profile?.lrn_balance?.toLocaleString() || - "0" + const lrnBalance = stats?.lrnBalance.toLocaleString() ?? "0" const coursesCompleted = stats?.coursesCompleted ?? nfts.length const title = `${displayName} — ${lrnBalance} LRN · ${coursesCompleted} Course${ coursesCompleted !== 1 ? "s" : "" @@ -303,36 +330,25 @@ const Profile: React.FC = () => { {bio} </p> )} - <div className="flex flex-wrap items-center justify-center md:justify-start gap-4 mb-4"> - {displayAddress ? ( - <div className="flex items-center gap-6"> - <AddressDisplay - address={displayAddress} - addressClassName="text-white/30 text-sm tracking-widest" - buttonClassName="h-6 w-6" - /> - {!isOwnProfile && ( - <FollowButton - targetAddress={displayAddress} - isFollowingInitial={profile?.is_following} - /> - )} - </div> + <div className="mb-6"> + {viewAddress ? ( + <AddressDisplay + address={viewAddress} + addressClassName="text-white/30 text-sm tracking-widest" + buttonClassName="h-6 w-6" + /> ) : ( <code className="text-white/30 text-sm block font-mono tracking-widest"> {t("wallet.connect")} </code> )} </div> - <div className="flex flex-wrap justify-center md:justify-start gap-6 mb-6"> - <div className="flex gap-4"> - <div className="text-center md:text-left"> - <div className="text-xl font-black text-white"> - {profile?.follower_count || 0} - </div> - <div className="text-[10px] uppercase font-black tracking-widest text-white/30"> - Followers - </div> + <div className="flex flex-wrap justify-center md:justify-start gap-4"> + {viewAddress ? ( + <ReputationBadge size="md" showBalance /> + ) : ( + <div className="px-5 py-2 glass rounded-full border border-white/10 text-xs font-black uppercase tracking-widest text-white/40"> + {t("wallet.connect")} </div> <div className="text-center md:text-left"> <div className="text-xl font-black text-white"> @@ -366,6 +382,16 @@ const Profile: React.FC = () => { </div> )} </div> + {stats?.reputationRank && ( + <div className="px-5 py-2 glass rounded-full border border-white/10 text-xs font-black uppercase tracking-widest text-brand-purple"> + Rank #{stats.reputationRank} + </div> + )} + {stats?.percentile && ( + <div className="px-5 py-2 glass rounded-full border border-white/10 text-xs font-black uppercase tracking-widest text-brand-emerald"> + Top {stats.percentile}% + </div> + )} </div> {/* Social Links */} @@ -466,6 +492,8 @@ const Profile: React.FC = () => { </section> )} + <ProfileLinkedWallets /> + <section> <div className="flex items-center gap-4 mb-12"> <h2 className="text-2xl font-black tracking-tight"> diff --git a/src/pages/Treasury.tsx b/src/pages/Treasury.tsx index 52a71591..1b052fcf 100644 --- a/src/pages/Treasury.tsx +++ b/src/pages/Treasury.tsx @@ -13,6 +13,7 @@ import TreasuryHealthChart, { type TreasuryPoint, } from "../components/treasury/TreasuryHealthChart" import TxHashLink from "../components/TxHashLink" +import { ActivityFeedSkeleton } from "../components/SkeletonLoader" import { useContractIds } from "../hooks/useContractIds" import { useTreasury } from "../hooks/useTreasury" import { useUSDC } from "../hooks/useUSDC" @@ -258,10 +259,7 @@ const Treasury: React.FC = () => { const description = `LearnVault's decentralized scholarship treasury holds ${displayStats.totalTreasury} and has funded ${displayStats.scholarsFunded} scholars. View real-time inflows and disbursements.` return ( - <div - aria-busy={isLoading} - className="p-12 max-w-7xl mx-auto min-h-screen text-white animate-in fade-in duration-1000" - > + <div aria-busy={isLoading} className="p-12 max-w-7xl mx-auto min-h-screen text-white animate-in fade-in duration-1000"> <Helmet> <title>{title}</title> <meta property="og:title" content={title} /> @@ -411,6 +409,33 @@ const Treasury: React.FC = () => { <span className="relative z-10">Donate to Treasury</span> </button> </div> + + {/* Scholarship Program Metrics */} + <section aria-busy={isLoading} className="mt-20"> + <h2 className="text-4xl font-black mb-2 tracking-tighter"> + Scholarship Program + </h2> + <p className="text-white/40 text-sm mb-10"> + Real-time health metrics for the active scholarship cohort. + </p> + + {isLoading && ( + <div className="grid grid-cols-2 lg:grid-cols-3 gap-6"> + {Array.from({ length: 6 }).map((_, i) => ( + <div + key={i} + className="h-28 rounded-3xl bg-white/5 animate-pulse" + /> + ))} + </div> + )} + + {!isLoading && ( + <p className="text-white/40 text-center py-10"> + Scholarship metrics unavailable + </p> + )} + </section> </div> ) } @@ -575,44 +600,36 @@ const ActivityFeed: React.FC<{ loadingMore = false, onLoadMore, }) => ( - <div className="glass p-8 rounded-[2.5rem] border border-white/5"> - <h3 className="text-xl font-black mb-8 border-l-4 border-brand-cyan pl-4"> - {title} - </h3> - <div className="flex flex-col gap-4"> - {loading ? ( - <div className="space-y-4 py-2"> - {Array.from({ length: 3 }).map((_, index) => ( - <div - key={index} - className="rounded-2xl border border-white/5 bg-white/5 p-5 animate-pulse" - > - <div className="h-4 w-24 rounded-full bg-white/10" /> - <div className="mt-3 h-3 w-16 rounded-full bg-white/5" /> - <div className="mt-4 h-4 w-28 rounded-full bg-white/10" /> - </div> - ))} - </div> - ) : error ? ( - <div className="text-center text-white/40 py-8">{error}</div> - ) : items.length === 0 ? ( - <StateEmpty - icon="📜" - title={emptyMessage} - description="There aren't any transactions yet. Once activity appears, it'll show up here." - ctaLabel="View treasury overview" - ctaHref="/treasury" - /> - ) : ( - <> - {items.map((item, i) => ( - <div - key={`${item.txHash}-${i}`} - className="flex items-center justify-between p-5 rounded-2xl bg-white/5 border border-white/5 hover:bg-white/[0.08] transition-colors group" - > - <div className="flex items-center gap-4"> - <div - className={`w-2 h-2 rounded-full ${item.type === "deposit" ? "bg-brand-emerald animate-pulse" : "bg-brand-purple"}`} + <div className="glass p-8 rounded-[2.5rem] border border-white/5"> + <h3 className="text-xl font-black mb-8 border-l-4 border-brand-cyan pl-4"> + {title} + </h3> + <div className="flex flex-col gap-4"> + {loading ? ( + <ActivityFeedSkeleton rows={2} /> + ) : error ? ( + <div className="text-center text-white/40 py-8">{error}</div> + ) : items.length === 0 ? ( + <div className="text-center text-white/40 py-8">{emptyMessage}</div> + ) : ( + <> + {items.map((item, i) => ( + <div + key={`${item.txHash}-${i}`} + className="flex items-center justify-between p-5 rounded-2xl bg-white/5 border border-white/5 hover:bg-white/[0.08] transition-colors group" + > + <div className="flex items-center gap-4"> + <div + className={`w-2 h-2 rounded-full ${item.type === "deposit" ? "bg-brand-emerald animate-pulse" : "bg-brand-purple"}`} + /> + <div> + <p className="font-bold text-sm">{item.user}</p> + <p className="text-[10px] text-white/30 uppercase font-black tracking-widest"> + {item.time} + </p> + <TxHashLink + hash={item.txHash} + className="mt-2 inline-flex text-[10px] font-black uppercase tracking-widest text-brand-cyan hover:underline" /> <div> <p className="font-bold text-sm">{item.user}</p> diff --git a/src/types/contracts.ts b/src/types/contracts.ts index 80de2273..e62e6b14 100644 --- a/src/types/contracts.ts +++ b/src/types/contracts.ts @@ -57,7 +57,7 @@ export interface Vote { proposalTitle: string voteChoice: "for" | "against" votePower: number - status: "active" | "passed" | "rejected" + status: "active" | "queued" | "passed" | "rejected" } export interface Scholar { diff --git a/src/types/governance.ts b/src/types/governance.ts index 49c60989..8fe39829 100644 --- a/src/types/governance.ts +++ b/src/types/governance.ts @@ -15,7 +15,7 @@ export interface Proposal { title: string description: string author: string - status: "Active" | "Passed" | "Rejected" + status: "Active" | "Queued" | "Passed" | "Rejected" | "Executed" votesFor: bigint votesAgainst: bigint endDate: number // ledger sequence or unix timestamp diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo index 302ae58a..1917a5da 100644 --- a/tsconfig.app.tsbuildinfo +++ b/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/App.tsx","./src/i18n.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/ActivityFeed.tsx","./src/components/AddressDisplay.tsx","./src/components/ComingSoon.tsx","./src/components/CommentCard.tsx","./src/components/CommentSection.tsx","./src/components/ConnectAccount.tsx","./src/components/ConnectWalletGuard.tsx","./src/components/CourseCard.tsx","./src/components/CourseFilter.tsx","./src/components/CourseProgressBar.tsx","./src/components/DeferredSection.tsx","./src/components/ErrorBoundary.tsx","./src/components/Footer.tsx","./src/components/FundAccountButton.tsx","./src/components/GetTestUSDCButton.tsx","./src/components/GuessTheNumber.tsx","./src/components/IpfsUpload.tsx","./src/components/LRNBalanceWidget.tsx","./src/components/LanguageSelector.tsx","./src/components/LessonContent.tsx","./src/components/LessonSidebar.tsx","./src/components/MilestoneCelebration.tsx","./src/components/MilestoneReportForm.tsx","./src/components/MilestoneSubmitPanel.tsx","./src/components/MilestoneTracker.tsx","./src/components/NavBar.tsx","./src/components/NetworkBanner.tsx","./src/components/NetworkPill.tsx","./src/components/NetworkPreconnect.tsx","./src/components/OnboardingWizard.tsx","./src/components/Pagination.tsx","./src/components/ProposalCard.tsx","./src/components/ProposalCountdown.test.ts","./src/components/ProposalCountdown.tsx","./src/components/QuizEngine.tsx","./src/components/ReputationBadge.tsx","./src/components/SkeletonLoader.tsx","./src/components/ThemeToggle.tsx","./src/components/TreasuryStatsBar.tsx","./src/components/TxHashLink.tsx","./src/components/WalletAddressPill.tsx","./src/components/WalletButton.tsx","./src/components/WalletToastWatcher.tsx","./src/components/Toast/ToastProvider.tsx","./src/components/debug/ContractExplorerPanel.tsx","./src/components/donor/ActiveVotes.tsx","./src/components/donor/DepositMore.tsx","./src/components/donor/EmptyState.tsx","./src/components/donor/GovernancePower.tsx","./src/components/donor/MyContributions.tsx","./src/components/donor/ScholarsFunded.tsx","./src/components/skeletons/CourseCardSkeleton.tsx","./src/components/skeletons/LessonListSkeleton.tsx","./src/components/treasury/TreasuryHealthChart.tsx","./src/contracts/governance_token.ts","./src/contracts/guess_the_number.ts","./src/contracts/scholarship_treasury.ts","./src/contracts/util.ts","./src/data/courses.ts","./src/data/lessons.ts","./src/hooks/useActivityFeed.ts","./src/hooks/useContractIds.ts","./src/hooks/useCourse.ts","./src/hooks/useDonor.test.tsx","./src/hooks/useDonor.ts","./src/hooks/useGovernance.test.tsx","./src/hooks/useGovernance.ts","./src/hooks/useLearnToken.test.tsx","./src/hooks/useLearnToken.ts","./src/hooks/useNotification.ts","./src/hooks/useScholarshipApplication.ts","./src/hooks/useSubscription.ts","./src/hooks/useWallet.test.tsx","./src/hooks/useWallet.ts","./src/lib/ipfs.ts","./src/pages/Admin.tsx","./src/pages/Courses.tsx","./src/pages/Credential.tsx","./src/pages/Dao.tsx","./src/pages/DaoProposals.tsx","./src/pages/DaoPropose.tsx","./src/pages/Dashboard.tsx","./src/pages/Debug.tsx","./src/pages/Donor.tsx","./src/pages/Home.tsx","./src/pages/Leaderboard.tsx","./src/pages/Learn.tsx","./src/pages/LessonView.tsx","./src/pages/NotFound.tsx","./src/pages/Profile.tsx","./src/pages/ScholarMilestones.tsx","./src/pages/ScholarshipApply.tsx","./src/pages/Treasury.tsx","./src/providers/NotificationProvider.tsx","./src/providers/WalletProvider.tsx","./src/test/setup.ts","./src/test/mocks/contracts.ts","./src/test/mocks/wallet.ts","./src/tests/setup.ts","./src/types/errors.ts","./src/types/governance.ts","./src/types/milestone.ts","./src/util/contract.test.ts","./src/util/contract.ts","./src/util/error.ts","./src/util/friendbot.test.ts","./src/util/friendbot.ts","./src/util/mockLeaderboardData.ts","./src/util/profileData.test.ts","./src/util/profileData.ts","./src/util/reputationRank.test.ts","./src/util/reputationRank.ts","./src/util/scholarshipApplications.ts","./src/util/scholarshipTreasury.ts","./src/util/storage.test.ts","./src/util/storage.ts","./src/util/theme.test.ts","./src/util/theme.ts","./src/util/tokenFormat.test.ts","./src/util/tokenFormat.ts","./src/util/usdc.ts","./src/util/wallet.test.ts","./src/util/wallet.ts","./src/utils/errors.ts","./e2e/critical-flows.spec.ts","./e2e/fixtures/mock-horizon.ts","./e2e/fixtures/mock-wallet.ts","./playwright.config.ts","./reset.d.ts"],"errors":true,"version":"5.9.3"} \ No newline at end of file +{"root":["./src/App.test.tsx","./src/App.tsx","./src/i18n.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/ActivityFeed.tsx","./src/components/AddressDisplay.tsx","./src/components/ComingSoon.tsx","./src/components/CommentCard.tsx","./src/components/CommentSection.tsx","./src/components/ConnectAccount.tsx","./src/components/ConnectWalletGuard.tsx","./src/components/CourseCard.tsx","./src/components/CourseFilter.tsx","./src/components/CourseProgressBar.tsx","./src/components/DeferredSection.tsx","./src/components/ErrorBoundary.tsx","./src/components/Footer.tsx","./src/components/FundAccountButton.tsx","./src/components/GetTestUSDCButton.tsx","./src/components/GlobalSearch.tsx","./src/components/GuessTheNumber.tsx","./src/components/IdenticonAvatar.tsx","./src/components/IpfsUpload.tsx","./src/components/LRNBalanceWidget.tsx","./src/components/LRNHistoryChart.tsx","./src/components/LanguageSelector.tsx","./src/components/LessonContent.tsx","./src/components/LessonSidebar.tsx","./src/components/MilestoneCelebration.tsx","./src/components/MilestoneReportForm.tsx","./src/components/MilestoneSubmitPanel.tsx","./src/components/MilestoneTracker.tsx","./src/components/NavBar.tsx","./src/components/NetworkBanner.tsx","./src/components/NetworkPill.tsx","./src/components/NetworkPreconnect.tsx","./src/components/NotificationBell.tsx","./src/components/OnboardingWizard.tsx","./src/components/Pagination.tsx","./src/components/ProfileEditForm.tsx","./src/components/ProfileLinkedWallets.tsx","./src/components/ProposalCard.test.tsx","./src/components/ProposalCard.tsx","./src/components/ProposalCountdown.test.ts","./src/components/ProposalCountdown.tsx","./src/components/QuizEngine.tsx","./src/components/ReputationBadge.tsx","./src/components/SkeletonLoader.tsx","./src/components/ThemeToggle.tsx","./src/components/TreasuryStatsBar.tsx","./src/components/TxHashLink.tsx","./src/components/WalletAddressPill.tsx","./src/components/WalletButton.tsx","./src/components/WalletInfoModal.tsx","./src/components/WalletToastWatcher.tsx","./src/components/Toast/ToastProvider.tsx","./src/components/debug/ContractExplorerPanel.tsx","./src/components/donor/ActiveVotes.tsx","./src/components/donor/DepositMore.tsx","./src/components/donor/EmptyState.tsx","./src/components/donor/GovernancePower.tsx","./src/components/donor/MyContributions.tsx","./src/components/donor/ScholarsFunded.tsx","./src/components/forum/CourseForum.tsx","./src/components/forum/ThreadDetail.tsx","./src/components/forum/ThreadList.tsx","./src/components/skeletons/CourseCardSkeleton.tsx","./src/components/skeletons/LessonListSkeleton.tsx","./src/components/states/emptyState.tsx","./src/components/states/errorState.tsx","./src/components/treasury/TreasuryHealthChart.tsx","./src/constants/contracts.ts","./src/constants/network.ts","./src/constants/reputation.test.ts","./src/constants/reputation.ts","./src/contracts/governance_token.ts","./src/contracts/guess_the_number.ts","./src/contracts/scholarship_treasury.ts","./src/contracts/util.ts","./src/data/courses.ts","./src/data/lessons.ts","./src/hooks/useActivityFeed.ts","./src/hooks/useAdmin.test.tsx","./src/hooks/useAdmin.ts","./src/hooks/useAdminContracts.test.tsx","./src/hooks/useAdminContracts.ts","./src/hooks/useContractIds.ts","./src/hooks/useCourse.ts","./src/hooks/useCourses.ts","./src/hooks/useDelegation.ts","./src/hooks/useDonor.test.tsx","./src/hooks/useDonor.ts","./src/hooks/useForum.ts","./src/hooks/useGovernance.test.tsx","./src/hooks/useGovernance.ts","./src/hooks/useLeaderboard.ts","./src/hooks/useLearnToken.test.tsx","./src/hooks/useLearnToken.ts","./src/hooks/useLearnerProfile.ts","./src/hooks/useNotification.ts","./src/hooks/useNotifications.ts","./src/hooks/useProposals.test.tsx","./src/hooks/useProposals.ts","./src/hooks/useScholarCredentials.ts","./src/hooks/useScholarMilestones.ts","./src/hooks/useScholarNft.ts","./src/hooks/useScholarshipApplication.ts","./src/hooks/useSubscription.ts","./src/hooks/useTheme.ts","./src/hooks/useTreasury.ts","./src/hooks/useUSDC.ts","./src/hooks/useWallet.test.tsx","./src/hooks/useWallet.ts","./src/hooks/useWiki.ts","./src/lib/api.ts","./src/lib/ipfs.ts","./src/pages/Admin.tsx","./src/pages/Community.tsx","./src/pages/Courses.tsx","./src/pages/Credential.tsx","./src/pages/Dao.tsx","./src/pages/DaoProposals.tsx","./src/pages/DaoPropose.test.tsx","./src/pages/DaoPropose.tsx","./src/pages/Dashboard.tsx","./src/pages/Debug.tsx","./src/pages/Donor.tsx","./src/pages/History.tsx","./src/pages/Home.tsx","./src/pages/Leaderboard.tsx","./src/pages/Learn.tsx","./src/pages/LessonView.tsx","./src/pages/NotFound.tsx","./src/pages/Profile.tsx","./src/pages/ScholarMilestones.tsx","./src/pages/ScholarshipApply.tsx","./src/pages/Treasury.tsx","./src/pages/Wiki.tsx","./src/pages/WikiPage.tsx","./src/providers/NotificationProvider.tsx","./src/providers/WalletProvider.tsx","./src/test/setup.ts","./src/test/mocks/contracts.ts","./src/test/mocks/wallet.ts","./src/tests/setup.ts","./src/types/contracts.ts","./src/types/courses.ts","./src/types/errors.ts","./src/types/forum.ts","./src/types/governance.ts","./src/types/milestone.ts","./src/util/auth.ts","./src/util/contract.test.ts","./src/util/contract.ts","./src/util/error.ts","./src/util/friendbot.test.ts","./src/util/friendbot.ts","./src/util/learningTime.ts","./src/util/mockLeaderboardData.ts","./src/util/profileData.test.ts","./src/util/profileData.ts","./src/util/reputationRank.test.ts","./src/util/reputationRank.ts","./src/util/scholarshipApplications.ts","./src/util/scholarshipTreasury.ts","./src/util/sorobanAdmin.ts","./src/util/storage.test.ts","./src/util/storage.ts","./src/util/theme.test.ts","./src/util/theme.ts","./src/util/tokenFormat.test.ts","./src/util/tokenFormat.ts","./src/util/usdc.test.ts","./src/util/usdc.ts","./src/util/wallet.test.ts","./src/util/wallet.ts","./src/utils/errors.ts","./src/utils/logger.ts","./e2e/a11y.spec.ts","./e2e/critical-flows.spec.ts","./e2e/wallet-auth.spec.ts","./e2e/fixtures/mock-horizon.ts","./e2e/fixtures/mock-wallet.ts","./playwright.config.ts","./reset.d.ts"],"errors":true,"version":"5.9.3"}