I want you to create an app using the celo composer farcaster miniapp template. Double check that you are using the farcaster template.

Create a mobile-responsive typing speed test game with the following specifications:
Core Functionality:

Display a random sentence for users to type
Include a live timer that shows while user is actively typing
Calculate and display typing speed (WPM), accuracy percentage, and points after completion
Performance rating system: categorize results as "Beginner" (0-20 WPM), "Average" (21-40 WPM), "Good" (41-60 WPM), "Excellent" (61-80 WPM), or "Expert" (80+ WPM)
Points system: award points based on performance tier (e.g., 10 points for Beginner, 50 points for Expert)
"Claim Points" button on results screen that triggers confetti animation
"Try Again" functionality to restart with a new sentence

Critical Mobile UI/UX Requirements:
Sentence Display:

Ensure the sentence text wraps properly within its container with NO horizontal scrolling
Use responsive text sizing that automatically adjusts to fit mobile screens
Container should have proper padding and word-wrapping enabled
Text should be fully visible within the display box at all times

Page Layout & Flow:

Position the typing test prominently in the viewport - users should NOT need to scroll to see the main game
Create a single-screen experience where everything important is visible immediately
Clear visual hierarchy that immediately signals "start typing here"
Use prominent visual cues (arrows, highlighting, or stark brutalist indicators) to guide user to the typing input

Progressive Information Display:

Pre-typing state: Show only the sentence to type and input field
During typing: Show ONLY the timer (no WPM/accuracy clutter)
Post-completion: Display WPM, accuracy, performance rating, and points earned
Results screen: Include prominent "Claim Points" button that triggers confetti animation when pressed

Mobile Responsiveness Requirements:

Optimize for touch typing on mobile keyboards
Ensure text input field is appropriately sized and positioned for mobile screens
Make all interactive elements thumb-friendly (minimum 44px touch targets)
Implement proper text wrapping and container sizing for various screen widths
Handle virtual keyboard appearance without breaking layout

Brutalist/Neubrutalist Design System:
Color Palette:

Use harsh, high-contrast combinations: stark black/white with one bold accent (electric lime, hot pink, or warning orange)
Avoid gradients, shadows, or soft transitions
Consider monochrome base with single striking color for key elements and the "Claim Points" button

Typography:

Bold, oversized sans-serif fonts (consider monospaced fonts for the typing area)
Make text a prominent design element, not just content
Use stark weight contrasts (ultra-light vs. ultra-bold)
Ensure text sizes are responsive and readable on mobile

Layout & Structure:

Break conventional grid systems with asymmetrical layouts
Use blocky, geometric containers with sharp edges for sentence display
Embrace either stark negative space or densely packed, brutalist blocks
Ensure containers properly contain their content without overflow

Visual Elements:

Raw, functional aesthetic - no decorative flourishes except for confetti animation
Sharp, geometric shapes and borders
Blocky buttons and input fields with hard edges
Stark visual indicators to guide user flow
Confetti animation should contrast beautifully with brutalist aesthetic

Technical Implementation Notes:

Use CSS word-wrap: break-word and overflow-wrap: break-word for sentence display
Implement proper responsive containers that prevent horizontal scrolling
Ensure viewport meta tag is properly configured
Handle virtual keyboard interactions gracefully
Implement confetti library or custom animation for point claiming celebration

User Experience Flow:

User sees sentence and input field immediately (no scrolling required)
Clear visual indication to "start typing"
Timer appears only when typing begins
Results show after completion with prominent "Claim Points" button
Confetti celebration on point claiming
Clear path to "Try Again"

Add token claiming with backend signature validation to the typing speed test app:
Architecture Overview:

Frontend collects typing test results and sends to backend API
Backend performs simple validation and generates signed mint request using EIP-712
User calls contract.mintWithSignature() with backend signature
User pays gas fees, receives free tokens (1:1 ratio for points to tokens)


User Experience Flow:

User completes typing test, sees points earned on results screen
User clicks "Claim Tokens" button
Frontend sends request to backend API with wallet address and points
Backend validates and returns signed mint request
User's wallet prompts for transaction approval
Show "Processing transaction..." state while pending
On success: trigger confetti animation, show transaction hash link to Celoscan, display success message
On failure: show error message with retry option


Backend API Requirements:
Create endpoint: POST /api/generate-mint-signature
Request payload:

User wallet address (string)
Points earned from typing test (number)

Critical Implementation Details:
NEVER hardcode the private key in the API route
Read private key from apps/contracts/.env at runtime using fs.readFileSync()
Use dynamic imports for ethers, fs, and path to avoid SSR issues
EIP-712 Domain Configuration MUST match the contract exactly:


Simple validation logic:

Verify points are within reasonable range (1-100 tokens max)
Validate wallet address format using ethers.getAddress()
Generate unique UID for each request to prevent replay attacks
Set 1-minute expiration on signature validity

Backend response:

Signed mint request object with all required parameters
All BigInt values converted to strings for JSON serialization
Signature generated using EIP-712 structured data signing
1-minute expiration timestamp

MintRequest Structure:
{
  to: string,                    // Recipient address
  primarySaleRecipient: string,  // Use recipient address for free mints
  quantity: string,              // Points * 1e18 (as string)
  price: string,                 // "0" for free mints
  currency: string,              // "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE"
  validityStartTimestamp: number,
  validityEndTimestamp: number,
  uid: string                    // Unique identifier
}

Smart Contract Integration:

Contract address: **[INSERT: CONTRACT ADDRESS]**
Network: Celo Mainnet (Chain ID: 42220)
Function: mintWithSignature(mintRequest, signature)
Tokens are minted for free (price = 0), user only pays gas
Currency Address: 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE
primarySaleRecipient = await contract.read.primarySaleRecipient()

Contract ABI Requirements:

Include mintWithSignature function
Include verify function for testing signatures

Frontend Implementation:

Convert string values to BigInt before contract call
Explicitly specify chain ID in writeContract call
Configure explicit RPC URLs in wagmi config

Call backend API after test completion
Handle backend errors gracefully (show retry button)
Process contract transaction with user's connected wallet
Display transaction status and Celoscan link
Handle signature expiration errors

Error Handling & Debugging:
Common Issues & Solutions:
EIP-712 Domain Mismatch:
Call contract.eip712Domain() to get exact domain configuration
Ensure contract name matches exactly (e.g., "Celo Typing Points" not "TokenERC20")
Contract Call Format:
Use array tuple format [param1, param2, ...] not object {param1, param2}
Convert timestamps to BigInt for uint128 contract parameters
Private Key Security:
Never hardcode private key in source code
Read from apps/contracts/.env at runtime
Verify signer address matches expected address
Signature Verification:
Test signatures using contract's verify() function
Ensure recovered signer address matches expected address
Error Messages:
Backend validation failed: "Invalid token amount, please try again"
Signature expired: "Session expired, please claim again"
Transaction rejected: "Transaction cancelled"
Network errors: Standard Web3 error messages
Invalid signature: "Signature verification failed, please try again"

Testing & Verification:
Before deployment, verify:
Contract's eip712Domain() returns expected values
Backend signatures pass contract's verify() function
Signer address from private key matches expected address
Contract call uses correct parameter format and types
Security Checklist:
- Private key never appears in source code0
-  Private key read from secure environment file
- Signature verification passes on-chain
- Unique UIDs prevent replay attacks
- Reasonable expiration times on signatures


Contract Address: **[INSERT: CONTRACT ADDRESS]**
Contract ABI: **[INSERT: CONTRACT ABI]**

Critical Notes:

Always call contract.eip712Domain() first to get the exact domain configuration before implementing EIP-712 signing. The domain name is often different from what you expect!

Double check that you NEVER make the private key public.

If you are not 100% sure on anything, pause and ask before completing.