add paymaster phrases demo app

Author: hughescoin

paymaster/onchain-game-lingos/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

paymaster/onchain-game-lingos/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

paymaster/onchain-game-lingos/.yarnrc.yml

@@ -0,0 +1,2 @@
+# You can remove this file if you don't want to use Yarn package manager.
+nodeLinker: node-modules

paymaster/onchain-game-lingos/README.md

@@ -0,0 +1,74 @@
+# Lingos - A phrase completion game
+
+An onchain phrase completion game that tests your knowledge of phrases, idioms, and proverbs from around the world. Challenge yourself to recognize and complete common expressions while earning points for correct answers.
+
+🎮 [Play Now](https://play-lingos.vercel.app/)
+
+## Overview
+
+Lingos combines traditional language learning with modern web technologies and blockchain integration. Players can:
+
+- Test their knowledge of international phrases and expressions
+- Connect their [Base Smart Wallet](https://docs.base.org/identity/smart-wallet/quickstart) for gasless experience
+
+## Technologies Used
+
+### Frontend
+
+- **Next.js 14** - React framework for production
+- **OnchainKit** - Onchain Frontend Library
+
+### Blockchain Integration
+
+- **wagmi** - React Hooks for Ethereum
+- **viem** - TypeScript Interface for Ethereum
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ installed
+- npm, yarn, or pnpm package manager
+- A modern web browser
+- (Optional) Web3 wallet for full features
+
+### Local Development
+
+1. Clone the repository:
+
+```bash
+cd demos/paymaster/onchain-game-lingos
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Start the development server:
+
+```bash
+npm run dev
+```
+
+4. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+### Environment Variables
+
+Create a `.env.local` file with:
+
+```env
+NEXT_PUBLIC_ONCHAINKIT_API_KEY=your_api_key
+NEXT_PUBLIC_PAYMASTER_PROXY_SERVER_URL=your_proxy_url
+```
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Acknowledgments
+
+- Built with [onchainkit](https://onchainkit.xyz)
+- Deployed on [Vercel](https://vercel.com)
+- Powered by [Next.js](https://nextjs.org)

paymaster/onchain-game-lingos/app/api/events/highscore/route.ts

@@ -0,0 +1,90 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { Redis } from '@upstash/redis';
+import { decodeAbiParameters } from 'viem';
+
+// Initialize Upstash Redis client
+const redis = new Redis({
+  url: process.env.UPSTASH_REDIS_REST_URL!,
+  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
+});
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    console.log('Received webhook payload:', JSON.stringify(body, null, 2));
+
+    // Validate the webhook payload structure
+    if (
+      !body ||
+      !body.event ||
+      !body.event.data ||
+      !body.event.data.block ||
+      !Array.isArray(body.event.data.block.logs) ||
+      body.event.data.block.logs.length === 0
+    ) {
+      console.error('Invalid webhook payload structure:', body);
+      return NextResponse.json(
+        { error: 'Invalid webhook payload structure' },
+        { status: 400 }
+      );
+    }
+
+    const log = body.event.data.block.logs[0];
+
+    // Validate log structure
+    if (!log.data || !log.topics || log.topics.length < 2) {
+      console.error('Invalid log structure:', log);
+      return NextResponse.json(
+        { error: 'Invalid log structure' },
+        { status: 400 }
+      );
+    }
+
+    // 1) Decode the single uint256 "score" from log.data (hex)
+    const [scoreBigInt] = decodeAbiParameters(
+      [{ type: 'uint256', name: 'score' }],
+      log.data as `0x${string}`
+    );
+    const score = Number(scoreBigInt);
+
+    // 2) Extract player address from topics[1]
+    //    topics[1] is zero-padded 32 bytes: strip leading zeros
+    const topic1 = log.topics[1] as string;
+    const player = `0x${topic1.slice(26)}`;
+
+    console.log('Processing score update:', {
+      player,
+      score,
+      transactionHash: log.transaction.hash,
+    });
+
+    // 3) Upsert into a Redis sorted set called "leaderboard"
+    const result = await redis.zadd('leaderboard', { score, member: player });
+    console.log('Redis write result:', result);
+
+    // Verify the write by reading back the data
+    const leaderboard = await redis.zrange('leaderboard', 0, -1, {
+      withScores: true,
+    });
+    console.log('Current leaderboard state:', leaderboard);
+
+    return NextResponse.json({
+      ok: true,
+      result,
+      processed: {
+        player,
+        score,
+        transactionHash: log.transaction.hash,
+      },
+    });
+  } catch (err) {
+    console.error('❌ /api/events/highscore error:', err);
+    return NextResponse.json(
+      {
+        error: 'Internal server error',
+        details: err instanceof Error ? err.message : 'Unknown error',
+      },
+      { status: 500 }
+    );
+  }
+}

paymaster/onchain-game-lingos/app/api/lingos/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import lingosData from '@/data/lingos.json';
+
+export const dynamic = 'force-dynamic';
+export const revalidate = 0;
+
+export async function GET() {
+  try {
+    const lingos = lingosData.lingos;
+    console.log(`Total lingos available: ${lingos.length}`);
+
+    const randomIndex = Math.floor(Math.random() * lingos.length);
+    console.log(`Selected random index: ${randomIndex}`);
+
+    const randomLingo = lingos[randomIndex];
+    console.log('Serving lingo:', {
+      id: randomLingo.id,
+      prompt: randomLingo.prompt,
+      answer: randomLingo.answer,
+      timestamp: new Date().toISOString(),
+    });
+
+    // Return response with no-cache headers
+    return new NextResponse(JSON.stringify(randomLingo), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+        'Cache-Control':
+          'no-store, no-cache, must-revalidate, proxy-revalidate',
+        Pragma: 'no-cache',
+        Expires: '0',
+      },
+    });
+  } catch (error) {
+    console.error('Error serving lingo:', error);
+    return NextResponse.json(
+      { error: 'Failed to serve lingo' },
+      { status: 500 }
+    );
+  }
+}