Skip to content

README.md

Latest commit

 

History

History
171 lines (131 loc) · 7.98 KB

README.md

File metadata and controls

171 lines (131 loc) · 7.98 KB
Raw

Gnars DAO Website

Action sports accelerator and community‑owned brand. Headless so you can shred more.

Next.js React Tailwind CSS TypeScript thirdweb wagmi Viem

What is this?

A modern, performant Next.js App Router site for the Gnars DAO on Base (chain ID 8453), built on the Nouns Builder architecture. It surfaces auctions, governance, treasury, members, Zora coins/droposals, a Farcaster‑powered TV feed, community rounds, and a USDC storefront — with a clean Shadcn UI, TanStack Query for data, and a split thirdweb/wagmi wallet layer for onchain interactions.

Features

  • DAO overview with key stats and recent activity
  • Current and historical auctions (grid + trends)
  • Treasury dashboard (ETH and token/NFT holdings)
  • Governance proposals list, rich detail view, and a creation wizard with voting‑power checks
  • Members and delegates views (holders, delegation)
  • Zora creator coins + droposals (create-coin, coin-proposal, droposals)
  • Propdates (EAS‑attested proposal updates)
  • Gnars TV — Farcaster‑aggregated video feed
  • Community bounties (POIDH), rounds (NFT‑weighted voting), map, and mural
  • USDC‑on‑Base storefront with KeepKey dropship fulfillment
  • Farcaster mini‑app support
  • Login + sponsored transactions via thirdweb account abstraction
  • i18n (EN + PT‑BR) via next-intl
  • Dark mode, responsive Shadcn UI, accessible components

Tech stack

  • Next.js 16 (App Router, RSC, Turbopack)
  • React 19 + TypeScript 5
  • Tailwind CSS v4 + Shadcn UI (New York)
  • TanStack Query (react‑query)
  • Wallet layer (split):
    • thirdweb v5 — login + writes + account abstraction (sponsorGas: true)
    • wagmi v2 + viem — reads‑only transport (connectors array is empty)
  • next-intl (EN + PT‑BR), MiniSearch (client‑side search workers)
  • Recharts, Three.js / react‑three‑fiber, Leaflet, framer‑motion
  • Postgres (pg) for the rounds subsystem, Nodemailer for order receipts

Wallet note: the user address always comes from useUserAddress(). Never call wagmi's useAccount() — connectors are empty, so it's intentionally disconnected from thirdweb state. See docs/architecture/thirdweb-wallet-layer.md.

Prerequisites

  • Node.js 20+ (LTS recommended)
  • pnpm 9+ (recommended) or npm/yarn

Quick start

  1. Install dependencies
pnpm install
  1. Configure environment

Create a .env.local in the repo root. See env.example for the full list; the minimum for login + reads:

NEXT_PUBLIC_THIRDWEB_CLIENT_ID=   # required (login + writes)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID= # required (WalletConnect)
NEXT_PUBLIC_BASE_RPC_URL=         # optional (defaults to a public Base RPC)
NEXT_PUBLIC_GOLDSKY_PROJECT_ID=   # optional (public default baked in)
ALCHEMY_API_KEY=                  # optional (powers /api/alchemy)
  1. Run the app
pnpm dev
# open http://localhost:3000

Scripts

  • pnpm dev – start dev server (Turbopack)
  • pnpm build – build for production
  • pnpm start – start production server
  • pnpm lint – run ESLint checks (run before opening a PR)
  • pnpm format / pnpm format:check – Prettier write / check
  • pnpm test / pnpm test:watch / pnpm test:coverage – vitest unit tests
  • pnpm exec playwright test – Playwright e2e tests

Routes

Routing is locale‑based under src/app/[locale]/ (EN is unprefixed, PT‑BR under /pt-br).

  • / – DAO overview (hero, proposals, charts, recent auctions)
  • /auctions – all auctions (includes no‑bid auctions)
  • /proposals, /proposals/[chain]/[id] – proposals grid + detail
  • /propose – create proposal (eligibility + wizard)
  • /treasury – treasury dashboard
  • /members, /members/[address] – members and delegate profiles
  • /feed – unified DAO activity feed
  • /propdates, /propdates/[txid] – EAS‑attested proposal updates
  • /droposals, /droposals/[id] – Zora drops from proposals
  • /create-coin, /coin-proposal – Zora creator coin flows
  • /tv, /tv/[coinAddress] – Gnars TV (Farcaster feed)
  • /rounds, /rounds/[slug] – community voting rounds
  • /community/bounties – POIDH bounties
  • /installations, /installations/[slug] – physical installations
  • /blogs, /blogs/[slug] – blog archive (IPFS)
  • /map, /mural, /swap, /store, /nogglesrails, /about

Also: /md/* (markdown content negotiation via src/proxy.ts), sitemap.xml, robots.ts, /dashboard.

Configuration

src/lib/config.ts is the single source of truth for addresses, chain, subgraphs, and allowlists.

  • Chain: Base Mainnet (id: 8453)
  • Core addresses:
    • token: 0x880fb3cf5c6cc2d7dfc13a993e839a9411200c17
    • auction: 0x494eaa55ecf6310658b8fc004b0888dcb698097f
    • governor: 0x3dd4e53a232b7b715c9ae455f4e732465ed71b4c
    • treasury: 0x72ad986ebac0246d2b3c565ab2a1ce3a14ce6f88
    • metadata: 0xdc9799d424ebfdcf5310f3bad3ddcce3931d4b58
    • Gnars creator coin (Zora): 0x0cf0c3b75d522290d7d12c74d7f1f0cc47ccb23b
  • Legacy Ethereum L1 addresses (GNARS_ADDRESSES_ETH) are retained for historical data — Gnars migrated from mainnet to Base.
  • Subgraph: Goldsky Nouns Builder (Base), URL built from NEXT_PUBLIC_GOLDSKY_PROJECT_ID with a safe public default.

Data flow

  • Server Components for initial load (SEO, perf); Client Components for interactive flows (bidding, voting, wizards).
  • src/services/* is the canonical data‑access layer (auctions, proposals, treasury, members, feed, droposals, rounds, store, …).
  • Subgraph access via @buildeross/* and src/lib/subgraph.ts.
  • Reads via wagmi hooks; writes via thirdweb sendTransaction dispatched through useWriteAccount().
  • Rounds is a Postgres‑backed subsystem (src/services/rounds.ts), gated behind ROUNDS_DATABASE_URL/DATABASE_URL.

Project structure

src/
  app/
    [locale]/                # locale-scoped routes (auctions, proposals, propose, …)
    api/                     # ~24 route groups (alchemy, coins, ens, og, pinata, treasury, …)
    md/                      # markdown content-negotiation target (see proxy.ts)
  components/                # ~28 feature dirs + ui/ (Shadcn)
  hooks/                     # ~39 hooks
  i18n/                      # next-intl config (routing, request, navigation)
  services/                  # data-layer modules
  lib/                       # config, thirdweb, wagmi, subgraph, zora-*, proposal-*, schemas
  workers/                   # client-side MiniSearch workers (blog, proposal)
  proxy.ts                   # Next.js 16 proxy (Accept: text/markdown → /md/*, else next-intl)

Development

  • Linting: pnpm lint (run before every PR)
  • Formatting: pnpm format
  • Type‑safety: strict TypeScript, isolated modules
  • i18n: new UI strings go through next-intl in both locales in the same change
  • See CLAUDE.md and docs/INDEX.md for full conventions and the documentation map

Deployment

  • Vercel recommended (Next.js 16, App Router)
  • Set the same env variables in your Vercel project
  • Ensure NEXT_PUBLIC_THIRDWEB_CLIENT_ID and NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID are set

Acknowledgements

  • Nouns Builder (Builder OSS) – contracts, subgraph and inspiration
  • thirdweb – login, account abstraction, sponsored transactions
  • Zora – creator coins and drops
  • Shadcn UI – headless components and design system

License

No license file is currently included. If you plan to use or distribute this code, please open an issue to clarify licensing or add a LICENSE file (MIT is commonly used).