Add leaderboard-frontend app with UI components #708

AryanGodara · 2025-04-30T09:12:56Z

Linked Issues

closes NOISSUE

Description

Added a new leaderboard frontend application that provides a user interface for the leaderboard system. The frontend includes:

User profile management (create/edit profiles)
Guild management (create guilds, add members)
Game management (create games, submit scores)
Wallet connection integration with the HappyWallet

The application is built with React and uses the HappyWallet provider for authentication. It communicates with the leaderboard backend API to manage user profiles, guilds, games, and scores.

To run:

From the project root

make setup
make leaderboard-frontend.dev (It also has corresponding .build and .prod targets)
This will spin up the iframe and the frontend react server
(Make sure to have the iframe .env set up properly, but nothing out of the ordinary)

(Don't forget to start the backend server as well make leaderboard-backend.dev)

Toggle Checklist

Checklist

Basics

B1. I have applied the proper label & proper branch name (e.g. norswap/build-system-caching).
B2. This PR is not so big that it should be split & addresses only one concern.
B3. The PR targets the lowest branch it can (ideally master).

Reminder: PR review guidelines

Correctness

C1. Builds and passes tests.
C2. The code is properly parameterized & compatible with different environments (e.g. local,
testnet, mainnet, standalone wallet, ...).
C3. I have manually tested my changes & connected features.

Chrome browser, local development environment with leaderboard backend running on port 4545

Tested scenarios:

Wallet connection
Profile creation and editing
Guild creation and member management
Game creation and score submission
C4. I have performed a thorough self-review of my code after submitting the PR,
and have updated the code & comments accordingly.

Architecture & Documentation

D1. I made it easy to reason locally about the code, by (1) using proper abstraction boundaries,
(2) commenting these boundaries correctly, (3) adding inline comments for context when needed.
D2. All public-facing APIs are documented in the docs.
Public APIS and meaningful (non-local) internal APIs are properly documented in code comments.
D3. If appropriate, the general architecture of the code is documented in a code comment or
in a Markdown document.
D4. An appropriate Changeset has been generated (and committed) with make changeset for
breaking and meaningful changes in packages (not required for cleanups & refactors).

AryanGodara · 2025-04-30T09:13:11Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

Add leaderboard-frontend app with UI components #708 👈 (View in Graphite)
Add swarm leaderboard backend with DB #669 : 1 other dependent PR (#753 )
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copilot

Pull Request Overview

This PR adds a new leaderboard frontend application with UI components for managing user profiles, guilds, games, and wallet connections.

Introduces React components for guild and game creation, display, and management.
Implements user profile handling with wallet connection integration.
Updates routing, API clients, and documentation to support the new application.

Reviewed Changes

Copilot reviewed 26 out of 30 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
apps/leaderboard-frontend/src/components/guild/GuildCreateBox.tsx	Component for creating a new guild
apps/leaderboard-frontend/src/components/guild/GuildCard.tsx	Renders guild details with manage button
apps/leaderboard-frontend/src/components/games/ScoreList.tsx	Displays a list of game scores
apps/leaderboard-frontend/src/components/games/ScoreForm.tsx	Form for submitting game scores
apps/leaderboard-frontend/src/components/games/GameDetails.tsx	Displays game details and score submission
apps/leaderboard-frontend/src/components/games/GameCreateBox.tsx	Component for creating a new game
apps/leaderboard-frontend/src/components/games/GameCard.tsx	Renders game details with manage button
apps/leaderboard-frontend/src/components/WalletConnect.tsx	Integrates wallet connection via HappyWallet
apps/leaderboard-frontend/src/components/ProfilePage.tsx	Manages user profile display and editing
apps/leaderboard-frontend/src/components/HomeLogoButton.tsx	Button linking to home via logo image
apps/leaderboard-frontend/src/components/GuildsPage.tsx	Main page for guild management and creation
apps/leaderboard-frontend/src/components/GamesPage.tsx	Main page for game management and creation
apps/leaderboard-frontend/src/clients.ts	Exports API clients via HappyTech core functions
apps/leaderboard-frontend/src/App.tsx	Application routing and layout
apps/leaderboard-frontend/index.html	HTML entry point for the app
apps/leaderboard-frontend/README.md	Documentation and quickstart instructions

Files not reviewed (4)

Makefile: Language not supported
apps/leaderboard-frontend/Makefile: Language not supported
apps/leaderboard-frontend/biome.jsonc: Language not supported
apps/leaderboard-frontend/package.json: Language not supported

Comments suppressed due to low confidence (1)

apps/leaderboard-frontend/src/components/GuildsPage.tsx:81

Similarly, converting profile.id to a number when creating a guild may lead to type inconsistencies with the expected string type. Verify the backend expectations and adjust the conversion or type definitions accordingly.

creator_id: Number(profile.id),

Copilot · 2025-04-30T09:27:26Z

apps/leaderboard-frontend/src/components/GuildsPage.tsx

+    useEffect(() => {
+        if (!profile?.id) return
+        setLoading(true)
+        fetch(`/api/guilds?creator_id=${Number(profile.id)}`)


The conversion of profile.id to a number might be inconsistent with its type (string) declared in UserProfile. Consider using profile.id directly or update the type definitions so that the API consumer and provider agree on the data type.

Suggested change

fetch(`/api/guilds?creator_id=${Number(profile.id)}`)

fetch(`/api/guilds?creator_id=${profile.id}`)

cloudflare-workers-and-pages · 2025-04-30T12:04:35Z

Deploying happychain with Cloudflare Pages

Latest commit:	`91dcf96`
Status:	✅ Deploy successful!
Preview URL:	https://005da51e.happychain.pages.dev
Branch Preview URL:	https://aryan-swarm-leaderboard-fron.happychain.pages.dev

View logs

Copilot

Pull Request Overview

This PR adds a new leaderboard frontend app with a set of React components for managing user profiles, games, guilds, scores, and leaderboards. Key changes include the creation of new UI components (e.g. ScoreList, ScoreForm, GameDetails), page containers (e.g. GamesPage, GuildsPage, ProfilePage), and integration with the HappyWallet provider for authentication.

Reviewed Changes

Copilot reviewed 29 out of 33 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
apps/leaderboard-frontend/src/components/games/ScoreList.tsx	New component for listing scores
apps/leaderboard-frontend/src/components/games/ScoreForm.tsx	New form for submitting scores
apps/leaderboard-frontend/src/components/games/MyScoresCard.tsx	New component displaying the user’s game scores
apps/leaderboard-frontend/src/components/games/GameDetails.tsx	Displays game details and incorporates score submission/listing
apps/leaderboard-frontend/src/components/games/GameCreateBox.tsx	Component for creating new games
apps/leaderboard-frontend/src/components/games/GameCard.tsx	New card component representing a game
apps/leaderboard-frontend/src/components/WalletConnect.tsx	Minimal wallet connect component
apps/leaderboard-frontend/src/components/ProfilePage.tsx	Profile management with create/edit functionality
apps/leaderboard-frontend/src/components/Leaderboards.tsx	Displays global and guild leaderboards
apps/leaderboard-frontend/src/components/HomeLogoButton.tsx	Logo button linking back to home
apps/leaderboard-frontend/src/components/GuildsPage.tsx	Guild management page
apps/leaderboard-frontend/src/components/GamesPage.tsx	Main games listing and management page
apps/leaderboard-frontend/src/clients.ts	API client creation
apps/leaderboard-frontend/src/App.tsx	Main router and layout for the app
apps/leaderboard-frontend/index.html	HTML entry point
apps/leaderboard-frontend/README.md	Documentation update for app setup

Files not reviewed (4)

Makefile: Language not supported
apps/leaderboard-frontend/Makefile: Language not supported
apps/leaderboard-frontend/biome.jsonc: Language not supported
apps/leaderboard-frontend/package.json: Language not supported

Copilot · 2025-04-30T12:42:58Z

apps/leaderboard-frontend/src/components/games/GameDetails.tsx

+    const [error, _setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        setLoading(true)
+        fetch(`/api/games/${game.id}/scores`)
+            .then((res) => (res.ok ? res.json() : null))


The error state is never updated because the setter is unused (_setError); consider renaming it to setError and using it to update the error message when a fetch failure occurs.

Suggested change

const [error, _setError] = useState<string | null>(null)

useEffect(() => {

setLoading(true)

fetch(`/api/games/${game.id}/scores`)

.then((res) => (res.ok ? res.json() : null))

const [error, setError] = useState<string | null>(null)

useEffect(() => {

setLoading(true)

fetch(`/api/games/${game.id}/scores`)

.then((res) => {

if (res.ok) {

return res.json()

} else {

throw new Error("Failed to fetch scores")

}

})

…es [skip ci]

not-reed

i forgot to submit my comments yesterday 😅 here you go

not-reed · 2025-05-21T18:53:06Z

apps/leaderboard-frontend/index.html

+  <link rel="icon" type="image/svg+xml" href="/happychain.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Leaderboard Frontend</title>
+  <!-- <link rel="stylesheet" href="/src/index.css"> -->


no styles! 👀

not-reed · 2025-05-21T18:56:02Z

apps/leaderboard-frontend/src/App.tsx

@@ -0,0 +1,52 @@
+import { Link, Route, BrowserRouter as Router, Routes } from "react-router-dom"


Error: The following dependencies are imported but could not be resolved:

react-router-dom

also why react-router-dom and not the main package react-router for a new project

(or tanstack router for that matter to line up with the iframe?)

not-reed · 2025-05-21T19:01:36Z

apps/leaderboard-frontend/public/happychain.png

should be new logo

not-reed · 2025-05-21T19:02:24Z

apps/leaderboard-frontend/public/francesco-ungaro-Wn8JoB8FP70-unsplash.jpg

lets get a new background already 😆

not-reed · 2025-05-21T19:02:56Z

apps/leaderboard-frontend/package.json

+    },
+    "devDependencies": {
+        "@happy.tech/configs": "workspace:0.1.0",
+        "@types/react": "^18.3.4",


you seem to be missing packages you are using 🧐

not-reed · 2025-05-21T19:39:19Z

apps/leaderboard-frontend/vite.config.ts

+            },
+        },
+    },
+    preview: { port: 6002, strictPort: true },


hey, this ports taken, pick a new port 😆 6004 maybe

not-reed · 2025-05-21T19:45:41Z

apps/leaderboard-frontend/src/components/leaderboards.css

@@ -0,0 +1,53 @@
+.leaderboards-container {


interestingly (to me anyways) none of these styles are scoped in any way, and applied globally.

I think it would be much clearer to have a 'styles' folder which contained

styles/index.css

styles/leaderboard.css

and your index.css can @import './leaderboard'

if you just open this up, and start at the App.tsx, theres currently not much for an indication these styles are pulled in and applied everywhere - could be confusing if you ever need to fix a styling bug

not-reed · 2025-05-21T19:46:10Z

apps/leaderboard-frontend/src/components/Leaderboards.tsx

@@ -0,0 +1,126 @@
+import type React from "react"
+import { useEffect, useState } from "react"
+import "../index.css"


this is already imported in App.tsx, no need to import it here

not-reed · 2025-05-21T19:47:26Z

apps/leaderboard-frontend/src/components/Leaderboards.tsx

+import type React from "react"
+import { useEffect, useState } from "react"
+import "../index.css"
+import "./leaderboards.css"


see me comment on this file below, but importing into this component feels to me like it should be scoped to this component and lazy loaded, however that doesn't seem to be the case. since its globally applied, just import it into index.css so its obvious where its coming from :)

not-reed · 2025-05-21T19:50:36Z

apps/leaderboard-frontend/src/App.tsx

+import Leaderboards from "./components/Leaderboards"
+import ProfilePage from "./components/ProfilePage"
+import WalletConnect from "./components/WalletConnect"
+import "./index.css"


probably since these are all global, this should be imported by main.tsx or just directly from the html (this is preferred)

if its imported like this, then they styles are imported as a a byproduct of the processed CSS, which means we need to load and parse the JS before the styles can be applied. If its in the index.html, it can load and be applied in parallel to the JS, which means it goes faster ;)

AryanGodara mentioned this pull request Apr 30, 2025

Add swarm leaderboard backend with DB #669

Open

11 tasks

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch from cf4829f to 8070a0f Compare April 30, 2025 09:14

AryanGodara changed the title ~~add only the leaderboard-frontend in this PR [skip ci]~~ Add leaderboard-frontend app with UI components Apr 30, 2025

AryanGodara self-assigned this Apr 30, 2025

AryanGodara added the draft Not ready for review label Apr 30, 2025 — with Graphite App

AryanGodara requested review from Copilot, norswap and not-reed April 30, 2025 09:26

Copilot AI reviewed Apr 30, 2025

View reviewed changes

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch 2 times, most recently from 8be4300 to d8b3ca3 Compare April 30, 2025 11:51

AryanGodara added reviewing-1 Ready for, or undergoing first-line review priority-post-testnet and removed draft Not ready for review labels Apr 30, 2025

AryanGodara requested a review from Copilot April 30, 2025 12:42

Copilot AI reviewed Apr 30, 2025

View reviewed changes

AryanGodara changed the base branch from aryan/swarm-leadership-page-mvp to graphite-base/708 April 30, 2025 12:48

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch from 7cd346e to 9c9faf6 Compare April 30, 2025 12:48

AryanGodara force-pushed the graphite-base/708 branch from 4043d3d to bedd278 Compare April 30, 2025 12:48

AryanGodara changed the base branch from graphite-base/708 to aryan/swarm-leadership-page-mvp April 30, 2025 12:48

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch from 9c9faf6 to a6dd414 Compare May 2, 2025 09:22

AryanGodara force-pushed the aryan/swarm-leadership-page-mvp branch from bedd278 to 0bd2a4b Compare May 2, 2025 09:22

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch 3 times, most recently from c3e12bd to fb5151e Compare May 6, 2025 09:49

AryanGodara force-pushed the aryan/swarm-leadership-page-mvp branch from d0c752c to d013d49 Compare May 6, 2025 09:49

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch 2 times, most recently from d5218f2 to 2942012 Compare May 6, 2025 11:37

AryanGodara changed the base branch from aryan/swarm-leadership-page-mvp to graphite-base/708 May 6, 2025 12:03

AryanGodara mentioned this pull request May 12, 2025

Add authentication to Leaderboard backend with wallet-based sessions #753

Open

11 tasks

AryanGodara added the no-merge For showcase, not to be merged label May 12, 2025

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch from 2942012 to 91dcf96 Compare May 13, 2025 09:38

AryanGodara force-pushed the graphite-base/708 branch from ca6f30b to a2c3cc7 Compare May 13, 2025 09:38

AryanGodara changed the base branch from graphite-base/708 to aryan/swarm-leadership-page-mvp May 13, 2025 12:54

AryanGodara changed the base branch from aryan/swarm-leadership-page-mvp to graphite-base/708 May 19, 2025 12:20

AryanGodara mentioned this pull request May 20, 2025

Use tx.from fallback to account in boopFromTransaction in iframe sendBoop func #790

Merged

11 tasks

AryanGodara force-pushed the graphite-base/708 branch from a2c3cc7 to b5445e1 Compare May 21, 2025 09:32

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch 2 times, most recently from 44888b4 to e1fc16a Compare May 21, 2025 10:17

AryanGodara force-pushed the graphite-base/708 branch from b5445e1 to 5e98b69 Compare May 21, 2025 10:17

AryanGodara changed the base branch from graphite-base/708 to aryan/swarm-leadership-page-mvp May 21, 2025 10:17

AryanGodara added 5 commits May 23, 2025 16:45

add only the leaderboard-frontend in this PR [skip ci]

1a67d5b

add leaderboard-frontend from bun.lock [skip ci]

00d3956

finish game score addition routes [skip ci]

8f4dd38

add leaderboards

5f4641d

feat: add leaderboard frontend build targets and include in TS packag…

28127a0

…es [skip ci]

AryanGodara force-pushed the aryan/swarm-leadership-page-mvp branch from 5e98b69 to 74cfd9a Compare May 23, 2025 11:15

AryanGodara force-pushed the aryan/swarm-leaderboard-frontend branch from e1fc16a to 28127a0 Compare May 23, 2025 11:16

not-reed reviewed May 23, 2025

View reviewed changes

norswap removed the priority-post-testnet label Jun 19, 2025

	fetch(`/api/guilds?creator_id=${Number(profile.id)}`)
	fetch(`/api/guilds?creator_id=${profile.id}`)

		@@ -0,0 +1,52 @@
		import { Link, Route, BrowserRouter as Router, Routes } from "react-router-dom"

Add leaderboard-frontend app with UI components #708

Are you sure you want to change the base?

Add leaderboard-frontend app with UI components #708

Uh oh!

Conversation

AryanGodara commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Linked Issues

Description

Checklist

Basics

Correctness

Architecture & Documentation

Uh oh!

AryanGodara commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Apr 30, 2025

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying happychain with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Apr 30, 2025

Choose a reason for hiding this comment

Uh oh!

not-reed left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

AryanGodara commented Apr 30, 2025 •

edited

Loading

AryanGodara commented Apr 30, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 30, 2025 •

edited

Loading