cosmo-web (Apollo)

This project aims to build a web based version of MODHAUS' Cosmo: the Gate mobile application, replicate its core features as close as possible, and add new features on top.

While mostly an exercise in learning React, it makes extensive use of the latest Vercel & Next features like streaming, React Server Components, React Server Actions, image optimization, Vercel Data Cache, unstable_cache.

Supersedes the objekts.jinsoul.tv Svelte app.

Replicated Features

• Authentication
  • Sign in with Ramper
  • COSMO user/token fetching
  • Token refreshing
  • Sign out
  • Per-artist profile image display
  • Ramper wallet decryption
• Objekts/COMO
  • Fetching owned objekts
  • Sending objekts to another COSMO user
  • Displaying reason for untransferable objekts - e.g. used for grid vs. not transferrable (event, welcome) vs. pending mint
  • All available filters
  • Display COMO balances
  • Claiming event rewards
  • Scan QR codes for claiming objekts
• Grid
  • Displaying grid completion stats
  • Displaying available seasons and editions
  • Displaying grid per member with pre-selected objekts
  • Ability to select a different objekt to use for a grid slot
  • Submitting completed grids and claiming the reward
• Artist
  • Fetching artist information
  • Artist switching (homepage defaults to selected)
• News
  • Displaying homepage news feed
  • Displaying "today's atmosphere" and "COSMO exclusive" feeds
  • Inline playback of exclusive m3u8 streams (broken on iOS due to HLS)
• Gravity
  • Displaying list of gravity events
  • Render dynamic gravity event description
  • Display details about a specific gravity event (ranking, leaderboard etc)
  • Voting on gravity events
• Rekord
  • Displaying "today's rekord" on homepage
  • Displaying "top rekords", all rekords, my rekords and rekord archive
  • Liking & unliking of rekords
• Activity
  • Per-member objekt breakdown
  • Day countdown since joining (welcome panel)
  • Objekt, grid and gravity history
  • Badge display
  • Rankings

New Features

• "lock" an objekt to prevent it from being sent to another user (like the Superstar games)
• Fetching other user's collections
  • Includes user search box with recent history
  • Filter state is stored in the URL for sharing
  • COSMO ID or Polygon address can be used
  • Supports address -> COSMO ID resolution if the ID has been logged
• Indexing of all released objekts
• Wishlist builder
• COMO drop calendar
• Polygon gas price display
• Displaying trade history
  • Includes displaying COSMO ID if available
• Privacy options to hide collection/trades/COMO
• Per-member collection progress breakdown
  • Leaderboards displaying the top 25 users for the given member
• Toggle to display collections from the blockchain instead of COSMO
• Descriptions/source of all objekts
• Pinning objekts to the top of your collection

Out of Scope

• Social login (Google etc): Ramper has repeatedly blocked usage of its SDK.
• Account registration: There's too much that goes into the onboarding process, not worth the effort.
• Account settings: There's not enough in there to adjust right now.
• Purchasing objekts: Apple/Google services are used.

Notes

• There's no app version or user agent spoofing. It's entirely possible for MODHAUS to detect usage of this. Use at your own risk.
• Only the happy path is tested extensively. Any error handling is mostly just HTTP retries and React error boundaries with a page refresh button.
• Anything in /scripts are mostly just one-offs to migrate production data. They're not meant to be run again.

Requirements

• Node.js 18.17+
• Alchemy API key
• Neon instance
  • Or swap this out for another Postgres compatible database with minimal code changes
• Postgres instance with HTTP proxy
  • The accompanying blockchain indexer has containerized Postgres 15.5 and an HTTP proxy running under Bun.
  • Migration files can also be found there
• Alternatively, you can use Docker to run a local Postgres instance with two databases, a Neon serverless proxy and a Drizzle HTTP proxy.

Setup (Neon)

git clone [email protected]:teamreflex/cosmo-web.git
cd cosmo-web
pnpm install
cp .env.example .env.local
pnpm db:migrate
pnpm dev

Setup (Local Docker)

Download a copy of the indexer database from MEGA and place it into the root of the project. This contains:

• All objekt collections as of 240422
• Objekt transfers between 240422 and 240330~
• Objekt ownership between 240422 and 240330~

git clone [email protected]:teamreflex/cosmo-web.git
cd cosmo-web
pnpm install
cp .env.example .env.local
docker compose up -d
psql -U postgres -h db.localtest.me -d indexer -f indexer-trimmed.sql
pnpm db:migrate
pnpm dev

Tooling

• Next 15
  • Server Components
  • Server Actions
• shadcn/ui
• Tailwind
• Neon
• Drizzle ORM
• Alchemy

License

Licensed under the MIT license.

Contact

• Email: kyle at reflex.lol
• Discord: kairunz
• Cosmo ID: Kairu