DOTPixel

A collaborative pixel art game built on Polkadot Hub. Players buy, color, and trade pixels on a shared canvas while competing for rewards.

Architecture

dotpixel-io/
  contract/    # Solidity smart contracts (Foundry + Hardhat)
  backend/     # The Graph subgraph + BFF service
  dapp/        # Next.js frontend (App Router + wagmi + viem)

Overview

• Canvas: Shared pixel grid where players buy and color pixels
• Pricing: Dynamic pricing with premium on repurchase
• Rewards: FOMO reward pool for last buyer + contributor reward pool distributed by points
• Rounds: Multi-round gameplay with configurable parameters
• Leaderboard: Rankings by points, pixel count, and total spent
• Referral: On-chain referral system with bonus rewards

Tech Stack

Layer	Stack
Chain	Polkadot Hub (Asset Hub EVM)
Contract	Solidity, Foundry, Hardhat
Indexer	The Graph (subgraph)
Frontend	Next.js 16, React 19, wagmi v2, viem v2, zustand v5
Styling	Tailwind CSS

Getting Started

Prerequisites

• Node.js >= 18
• pnpm
• Docker (for backend)

Contract

cd contract
cp .env.example .env
pnpm install
forge build
forge test

Backend (Subgraph)

cd backend
npm install

# Start infrastructure
docker-compose up -d

# Deploy subgraph
npx graph codegen
npx graph build
npx graph create --node http://localhost:8020/ dot-pixel
npx graph deploy --node http://localhost:8020/ \
  --ipfs http://localhost:5001 \
  --version-label v0.1.0 dot-pixel

Frontend

cd dapp
cp .env.example .env.local
# Fill in your environment variables
pnpm install
pnpm dev

Open http://localhost:3000 to view the app.

GraphQL API

The subgraph exposes a GraphQL API for querying canvas pixels, transaction history, leaderboard, and more. See backend/README.md for full query examples.

License

MIT