#Nokia nostalgia

.env

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_MONAD_RPC_URL=https://rpc.ankr.com/monad_testnet
+NEXT_PUBLIC_MONAD_CHAIN_ID=10143
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=b20e4205fc02f4f0e178c2446d73838a
+NEXT_PUBLIC_ZEROEX_API_KEY=45a48105-7e8f-4910-8b14-49fa6f8a2002
+NEXT_PUBLIC_ZEROEX_CHAIN_ID=10143
+VITE_USDC_ADDRESS=0xf817257fed379853cDe0fa4F97AB987181B1E5Ea

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1 +1,100 @@
-# athena-hacker-house
+# Nokia Swap - Snake Game with Auto-Swap
+
+A Nokia phone-themed React app featuring a Snake game that automatically triggers a token swap when the player reaches 6 points. Built with React, Vite, Wagmi, and 0x API integration.
+
+## Features
+
+- 🐍 **Snake Game**: Classic Nokia-style snake game
+- 🔄 **Auto-Swap**: Automatically swaps MON to USDC when reaching 6 points
+- 📱 **Nokia UI**: Retro Nokia phone interface
+- 🔗 **Wallet Integration**: Connect with MetaMask, WalletConnect, and other wallets
+- ⛽ **Gasless Options**: Supports gasless swaps via 0x API
+
+## Setup
+
+### 1. Install Dependencies
+
+```bash
+npm install
+```
+
+### 2. Environment Configuration
+
+Copy the example environment file and configure your variables:
+
+```bash
+cp env.example .env
+```
+
+Required environment variables:
+
+```env
+# 0x API Configuration (required for swaps)
+VITE_ZEROEX_API_KEY=your_0x_api_key_here
+VITE_ZEROEX_CHAIN_ID=10143
+
+# Monad Chain Configuration
+VITE_MONAD_CHAIN_ID=10143
+VITE_MONAD_RPC_URL=https://rpc.monad.xyz
+
+# Token Configuration
+VITE_USDC_ADDRESS=0xyour_usdc_contract_address_here
+
+# WalletConnect (optional)
+VITE_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here
+```
+
+### 3. Get API Keys
+
+- **0x API Key**: Visit [dashboard.0x.org](https://dashboard.0x.org) to get your API key
+- **WalletConnect Project ID**: Visit [cloud.walletconnect.com](https://cloud.walletconnect.com) (optional)
+
+### 4. Run Development Server
+
+```bash
+npm run dev
+```
+
+## How It Works
+
+1. **Connect Wallet**: Click the wallet icon to connect your wallet
+2. **Play Snake**: Use arrow keys or click/tap to control the snake
+3. **Auto-Swap**: When you reach 6 points, the app automatically triggers a swap from MON to USDC
+4. **Transaction**: Confirm the swap transaction in your wallet
+
+## Swap Configuration
+
+The swap is configured to trade:
+- **From**: 0.01 MON (native Monad token)
+- **To**: USDC (configured via `VITE_USDC_ADDRESS`)
+- **Trigger**: Automatically when score reaches 6 points
+
+## Supported Chains
+
+- Ethereum Mainnet
+- Monad (configured via environment variables)
+- Sepolia Testnet
+
+## Built With
+
+- React 19
+- Vite
+- Wagmi (Web3 React)
+- 0x API
+- Viem
+
+## Development
+
+```bash
+# Start dev server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+
+# Lint code
+npm run lint
+```

env.example

@@ -0,0 +1,18 @@
+# 0x API Configuration for Monad testnet swaps
+# Get your API key from: https://0x.org/docs/api#introduction
+VITE_ZEROEX_API_KEY=your_0x_api_key_here
+VITE_ZEROEX_CHAIN_ID=10143 # Monad testnet chain id
+
+# Monad Chain Configuration (testnet)
+VITE_MONAD_CHAIN_ID=10143
+VITE_MONAD_RPC_URL=https://rpc.testnet.monad.xyz
+
+# Token Configuration (USDC on Monad testnet)
+# Replace with actual USDC contract address on Monad testnet
+VITE_USDC_ADDRESS=0xyour_testnet_usdc_contract_address_here
+
+# WalletConnect Configuration (optional; not used when MetaMask-only)
+# VITE_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here
+
+# Note: If VITE_ZEROEX_API_KEY is not set, the app will fall back to simulated swaps
+# If VITE_USDC_ADDRESS is not set or is '0x', the app will use a placeholder address

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>