feat: Support specifying and displaying team names end-to-end (#122) #132

marcdhi · 2025-10-16T13:09:24Z

Summary

This PR adds first-class support for team names across the smart contracts, backend attestations, and frontend UI. Users can now create teams with a name (required, max 20 chars), see the team name throughout the app (Hunt details and leaderboard), and include the team name in attestations for consistent display. The UI presents a minimal header showing the team name and an “Invite more” button when the team is not full and the viewer is the team owner.

Motivation

With team play enabled and a leaderboard (feat: Hunt Leaderboard using Sign Protocol attestations #120), team names are more user-friendly than numeric IDs or raw addresses.
Adding team names to attestations ensures consistent display regardless of where data is sourced from (on-chain vs off-chain attestations).

Changes

Contract (Solidity)
- Added name to Team and TeamInfo structs in contracts/src/Khoj.sol.
- Updated createTeam signature to createTeam(uint256 _huntId, string _teamName).
- Updated getTeam to return name via TeamInfo.
- Kept all invariants: checks for teams enabled, uniqueness per hunt, team size, membership mapping/array.
- Added event parsing in contracts/scripts/deploy.js to reliably retrieve huntId/teamId in ethers v6.
- Added Base Sepolia network to contracts/hardhat.config.js (uses BASE_SEPOLIA_RPC_URL, PRIVATE_KEY).
Contract Tests
- Updated contracts/test/Khoj.test.js to use new createTeam(_huntId, _teamName) signature.
- Added assertions confirming the team name is set/read correctly via getTeam.
- All tests passing locally.
Backend
- backend/src/services/sign-protocol.js
  - Extended the schema to include teamName: string.
  - Updated attestClueSolved to accept and include teamName (fallback to wallet address for solo users).
- backend/src/server.js
  - /attest-clue now accepts teamName and forwards to the service.
- backend/src/services/leaderboard.js
  - Carries through teamName in leaderboard entries for display.
Frontend
- ABI
  - Updated frontend/src/assets/hunt_abi.ts to reflect new createTeam signature and TeamInfo order: huntId, teamId, owner, name, maxMembers, memberCount, members.
- Types
  - Updated frontend/src/types/hunt.ts Team to include optional name.
- Components
  - HuntDetails.tsx:
    - Added required team name input (max 20 characters).
    - Contract call updated to createTeam(huntId, teamName).
    - Minimal header shows “Team {name}”.
    - Removed team ID display.
    - Replaced copy action with a minimal “Invite more” button (shown only if viewer is owner and team isn’t full). Re-uses existing invite generation flow.
    - Character counter and label to improve input UX.
  - Leaderboard.tsx:
    - Displays teamName (with truncation) if present; falls back to previous logic (solo address or Team #ID).
  - Clue.tsx:
    - Sends teamName to /attest-clue. Solo fallback to wallet address retained.

Breaking changes

Contract ABI: createTeam now requires a second parameter (_teamName). Frontend and any scripts must pass this.
TeamInfo tuple order updated to include name. Any consumer reading team info must use the new ABI.

Deployment and configuration

Contracts
- Deploy the updated Khoj contract to your target network (e.g., Base Sepolia).
- Example (with env configured): npx hardhat run contracts/scripts/deploy.js --network baseSepolia
Frontend
- Set VITE_PUBLIC_BASE_CONTRACT_ADDRESS to the new contract address.
- Restart the frontend dev server to pick up env changes.
Backend (Sign Protocol)
- The schema now includes teamName. If using a static schema ID, create a new schema and update SIGN_SCHEMA_ID in env, or re-run the schema creation step and update the ID.

Testing

Contracts: npx hardhat test — all tests pass.
Manual QA
- Create a hunt with teams enabled.
- From Hunt Details:
  - Enter a team name (<=20 chars).
  - Click “Create Team & Generate Invite.”
  - Confirm the team header shows “Team {name}”.
  - If not full and owner, “Invite more” visible and generates a QR/invite.
- Solve a clue:
  - Attestation body includes teamName.
  - Leaderboard displays the team name (truncated for long names).
- Solo user flow:
  - Attestation includes the user’s address in teamName fallback, so leaderboard still displays a meaningful identifier.

Related issues

Closes: feat: Support specifying team names #122
Enhances: feat: Hunt Leaderboard using Sign Protocol attestations #120 (Leaderboard usability)

mittal-parth

Thanks for the PR!

Left some comments.

Another point is that the name of the team looks bigger than the Team Management heading. Reduce the size as its breaking the visual hierarchy
Resolve conflicts

mittal-parth · 2025-10-16T19:18:07Z

backend/src/services/leaderboard.js

      teamData.set(teamIdentifier, {
        teamIdentifier,
        teamLeaderAddress: data.teamLeaderAddress,
+        teamName: data.teamName || undefined,


Suggested change

teamName: data.teamName || undefined,

teamName: data.teamName || teamIdentifier,

mittal-parth · 2025-10-19T17:24:28Z

backend/src/services/sign-protocol.js


    const attestationData = {
      teamIdentifier: teamIdentifier.toString(),
+      teamName: (teamName || (teamIdentifier?.startsWith?.('0x') ? teamIdentifier : '')).toString(),


Suggested change

teamName: (teamName || (teamIdentifier?.startsWith?.('0x') ? teamIdentifier : '')).toString(),

teamName: (teamName || (teamIdentifier).toString(),

mittal-parth · 2025-10-19T17:25:47Z

contracts/src/Khoj.sol

        Team storage newTeam = teams[teamId];
        newTeam.owner = msg.sender;
        newTeam.huntId = _huntId;
+        newTeam.name = _teamName;


Need a validation for teamName length to be not more than 20 chars

mittal-parth · 2025-10-19T17:27:54Z

frontend/src/components/Clue.tsx

    try {
      const attestationData = {
        teamIdentifier: teamData?.teamId?.toString() || userWallet.toString(), // team id for teams, user wallet for solo users
+        teamName: teamData?.name || (teamData?.teamId ? undefined : userWallet.toString()),


Suggested change

teamName: teamData?.name || (teamData?.teamId ? undefined : userWallet.toString()),

teamName: teamData?.name || userWallet.toString(),

mittal-parth · 2025-10-19T17:30:07Z

frontend/src/components/HuntDetails.tsx

+                        {Number(teamData?.memberCount || 0) < Number(teamData?.maxMembers || 0) && teamData?.owner === userWallet && (
+                          <Button 
+                            size="sm"
+                            onClick={async () => {
+                              try {
+                                const teamIdStr = teamData?.teamId?.toString?.();
+                                if (teamIdStr) {
+                                  await generateInviteAfterTeamCreation(teamIdStr);
+                                }
+                              } catch (e) {
+                                toast.error('Failed to generate invite');
+                              }
+                            }}
+                          >
+                            Invite more
+                          </Button>
+                        )}


Remove this.

Not having an Invite More button is meant to be.

We explicitly ask the user to save the screenshot of the QR as invites expire after a certain interval.

marcdhi added 2 commits October 16, 2025 17:35

feat: Add team name support across backend and frontend components

08076b8

misc: enhance deployment scripts and update UI to show team name

3497167

mittal-parth assigned marcdhi Oct 16, 2025

mittal-parth requested changes Oct 19, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Support specifying and displaying team names end-to-end (#122) #132

feat: Support specifying and displaying team names end-to-end (#122) #132

Uh oh!

marcdhi commented Oct 16, 2025 •

edited by mittal-parth

Loading

Uh oh!

mittal-parth left a comment •

edited

Loading

Uh oh!

mittal-parth Oct 16, 2025

Uh oh!

mittal-parth Oct 19, 2025

Uh oh!

mittal-parth Oct 19, 2025

Uh oh!

mittal-parth Oct 19, 2025

Uh oh!

mittal-parth Oct 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	teamName: data.teamName \|\| undefined,
	teamName: data.teamName \|\| teamIdentifier,

	teamName: (teamName \|\| (teamIdentifier?.startsWith?.('0x') ? teamIdentifier : '')).toString(),
	teamName: (teamName \|\| (teamIdentifier).toString(),

	teamName: teamData?.name \|\| (teamData?.teamId ? undefined : userWallet.toString()),
	teamName: teamData?.name \|\| userWallet.toString(),

feat: Support specifying and displaying team names end-to-end (#122) #132

Are you sure you want to change the base?

feat: Support specifying and displaying team names end-to-end (#122) #132

Uh oh!

Conversation

marcdhi commented Oct 16, 2025 • edited by mittal-parth Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Motivation

Changes

Breaking changes

Deployment and configuration

Testing

Related issues

Uh oh!

mittal-parth left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mittal-parth Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

mittal-parth Oct 19, 2025

Choose a reason for hiding this comment

Uh oh!

mittal-parth Oct 19, 2025

Choose a reason for hiding this comment

Uh oh!

mittal-parth Oct 19, 2025

Choose a reason for hiding this comment

Uh oh!

mittal-parth Oct 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

marcdhi commented Oct 16, 2025 •

edited by mittal-parth

Loading

mittal-parth left a comment •

edited

Loading