TouchGrass UI

A social photo challenge game where users complete daily challenges by submitting verified selfies to earn rewards on the Mina blockchain. Players can chain submissions together for bonus rewards, creating a social competition with cryptographic proof of authenticity.

Features

• Progressive Web App (PWA) - installable on mobile devices
• Native camera capture interface optimized for mobile
• Real-time photo preview and submission
• Zero-knowledge proof generation for photo authenticity
• Signature-based verification using Mina keypairs
• Non-blocking operations using Web Workers
• Real-time proof generation status

Prerequisites

• Node.js 18.14.0+
• npm or yarn
• Modern browser with Web Worker support

Installation

1. Clone the repository:

git clone https://github.com/o1-labs-XT/TouchGrass-UI.git
cd touchgrass/ui

2. Install dependencies:

npm install

3. Configure environment:

cp .env.example .env.local
# Edit .env.local with your configuration

Environment variables:

NEXT_PUBLIC_BACKEND_URL=https://api.your-backend.com
NEXT_PUBLIC_MINA_NETWORK=devnet

Development

Mock Mode (Default)

Run development server with mock data:

npm run dev

Open http://localhost:3000

With Local Backend

If you have the backend running locally on port 4000:

1. Update .env.local:

NEXT_PUBLIC_USE_MOCK_API=false
NEXT_PUBLIC_BACKEND_URL=http://localhost:4000/api

2. Start frontend:

npm run dev

3. Verify backend connection at http://localhost:3000

Note: Ensure NEXT_PUBLIC_ZKAPP_ADDRESS matches the backend's ZKAPP_ADDRESS

Build

Build for production:

npm run build

Production

Start production server:

npm start

Deployment

Deploy to Vercel

vercel --prod

Or connect GitHub repository for automatic deployments.

Testing

Run tests:

npm test

Run tests in watch mode:

npm test -- --watch

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

License

Apache-2.0