Summary
Create a mock implementation of the leaderboard interface that stores data in localStorage instead of on-chain. This allows developing and testing the leaderboard UI and game-over hooks without a deployed contract.
Requirements
- Implement the same TypeScript interface as
src/shared/circles/leaderboard.ts:
submitSoloResult(gameId, won, cardsRemaining)
submitVsAiResult(gameId, won)
fetchMyStats(gameId)
fetchTopLeaderboard(gameId)
- Store player stats in localStorage, keyed by game ID
- Generate mock player data for leaderboard testing (seed with fake entries)
- Auto-detect environment: use mock when outside miniapp context (no wallet), use real contract when in miniapp
- Maintain the same sorted top-100 semantics as the contract (solo: cumulative cards remaining ascending, vs-AI: net wins descending)
Design
The simplest approach: a leaderboardBackend.ts module that exports the same functions and switches implementation based on isInMiniapp(). The mock reads/writes localStorage; the real implementation calls the contract via viem.
Depends on
- Nothing — can start immediately
Blocks
- Game-over hooks
- Leaderboard UI
Summary
Create a mock implementation of the leaderboard interface that stores data in localStorage instead of on-chain. This allows developing and testing the leaderboard UI and game-over hooks without a deployed contract.
Requirements
src/shared/circles/leaderboard.ts:submitSoloResult(gameId, won, cardsRemaining)submitVsAiResult(gameId, won)fetchMyStats(gameId)fetchTopLeaderboard(gameId)Design
The simplest approach: a
leaderboardBackend.tsmodule that exports the same functions and switches implementation based onisInMiniapp(). The mock reads/writes localStorage; the real implementation calls the contract via viem.Depends on
Blocks