🎨 SatoshiArt — Bitcoin-Native Shared Pixel Canvas

Paint your mark on Bitcoin. Forever. On-chain.

SatoshiArt is a decentralized shared pixel canvas on Bitcoin Layer 1 via OP_NET.
Users pay satoshis to choose a color and paint one pixel on a global 64×64 canvas.
Every pixel, every painter, every block — stored permanently on-chain. No bridges. No EVM.

---

🖼️ What is it?

• 64×64 canvas = 4,096 pixels of permanent Bitcoin history
• Pay sats → get color → paint forever
• Color rarity system — Common / Rare / Legendary
• Live leaderboard of top painters
• Activity feed showing real-time canvas evolution
• Zero centralization — all state lives on Bitcoin L1

---

🎨 Color Tiers

Tier	Colors	Cost	Examples
Common	8	1,000 sats	Snow, Void, Crimson, Ocean...
Rare	5	5,000 sats	Bullion, Cyan Storm, Hot Pink...
Legendary	3	25,000 sats	Satoshi (orange), Neon Pulse, Diamond

---

🚀 Quick Start (Frontend)

cd SatoshiArt
npm install
npm run dev
# → http://localhost:3001

Frontend works in demo mode without a deployed contract.
Canvas state is stored in localStorage during demo.

---

📦 Project Structure

SatoshiArt/
├── src/
│   ├── App.jsx                  # Root layout (left/center/right panels)
│   ├── main.jsx                 # React entry point
│   ├── index.css                # Tailwind + custom utilities
│   ├── data/colors.js           # 16-color palette + tier definitions
│   ├── hooks/
│   │   ├── useWallet.js         # OP_NET wallet connection hook
│   │   └── useCanvas.js         # Canvas state, paint logic, leaderboard
│   ├── services/
│   │   └── contractService.js   # OP_NET SDK integration (ESM)
│   └── components/
│       ├── Header.jsx           # Logo, wallet button, stats badge
│       ├── Canvas.jsx           # HTML5 Canvas with zoom/pan
│       ├── ColorPicker.jsx      # Tiered color grid + paint button
│       ├── StatsBar.jsx         # Total paints, treasury, artists
│       ├── Leaderboard.jsx      # Top painters ranking
│       ├── ActivityFeed.jsx     # Real-time paint event feed
│       └── Toast.jsx            # Notification system
├── contracts/
│   ├── src/art/
│   │   ├── SatoshiArtContract.ts # AssemblyScript smart contract
│   │   └── index.ts              # Entry point + abort handler
│   ├── asconfig.json            # Build config (opnet-transform required)
│   ├── package.json             # Contract dependencies
│   ├── deploy.ts                # Deployment script (tsx)
│   └── .env.example             # Mnemonic + RPC config template
├── index.html                   # App entry + contract address config
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md

---

🔗 OP_NET Contract

Contract Methods

Write:

Method	Args	Cost	Description
paintPixel	pixelIndex: u16, colorId: u8	color fee in sats	Paint one pixel

View:

Method	Returns	Description
getPixelColor(index)	colorId: u256	Color at pixel (0 = unpainted)
getPixelPainter(index)	painter: u256	Last painter address
getPixelBlock(index)	blockNum: u256	Block when painted
getTotalPaints()	u256	Global paint count
getTreasury()	u256	Total fees collected (sats)
getPaintFeeCommon()	u256	1,000 sats
getPaintFeeRare()	u256	5,000 sats
getPaintFeeLegendary()	u256	25,000 sats

---

Contract Address

SatoshiArt Contract: window.SATOSHI_ART_CONTRACT

To use with a deployed contract, set the contract address in your environment:

window.SATOSHI_ART_CONTRACT = 'your-contract-address-here';

Current Status: Demo mode (no contract deployed)

---

Quick Start (Frontend)

cd SatoshiArt
npm install
npm run dev
# → http://localhost:3001

Frontend works in demo mode without a deployed contract.
Canvas state is stored in localStorage during demo.

---

Deploy Contract

1. Install dependencies

cd contracts
npm install

2. Configure .env

cp .env.example .env
# Edit .env → set MNEMONIC to your deployer wallet seed

3. Build WASM

npm run build
# → build/SatoshiArt.wasm

4. Deploy to OP_NET Testnet

npm run deploy:ts
# Outputs: Contract address: opt1xxxxx...

5. Activate frontend

In index.html, set:

window.SATOSHI_ART_CONTRACT = 'opt1your-contract-address-here';

---

🖱️ User Flow

Connect OP_NET Wallet
        ↓
Browse 16-color palette (Common / Rare / Legendary)
        ↓
Click pixel on 64×64 canvas
        ↓
Click "Paint Pixel · X sats"
        ↓
OP_NET transaction signed in wallet
        ↓
Pixel color stored forever on Bitcoin L1
        ↓
Canvas updates · Leaderboard updates · Activity feed logs

---

🏗️ Roadmap

Phase 1 ✅ (MVP)

• 64×64 canvas with color tiers
• OP_NET wallet + demo mode
• Smart contract (paintPixel + view methods)
• Leaderboard + activity feed
• Zoom & pan

Phase 2 — DeFi Layer

• Vault contract for collected fees
• Reward distribution to active painters
• Pixel = NFT-like asset (OP_20 token per coordinate)

Phase 3 — Social

• History replay / timeline
• Pixel ownership certificates
• Twitter card preview per pixel
• Mobile-optimized touch canvas

Phase 4 — Composability

• Integration with BlockForge modules
• Staking rewards for rare color holders
• DAO voting on canvas rules

---

🔐 Security

• Anti-spam: each paint costs real sats (on-chain payment verification)
• Anti-double-spend: OP_NET transaction model prevents replay
• No centralized DB: all pixel state lives in contract storage
• Failed TX: UI detects revert and shows error, canvas not updated

---

💡 Pitch

Bitcoin has ~21M coins. SatoshiArt has 4,096 pixels.
Each one is a permanent mark on the world's most secure ledger.
Paint your name in Bitcoin history.

---

📜 License

MIT — build on top of it, fork it, remix it.

---

Built on OP_NET · Bitcoin Layer 1 · No bridges · No EVM