feat: migrate image tools to Next.js

app/image-tools/.env.local.example

@@ -1,22 +1,20 @@
-# Frontend (Vite) – only VITE_* vars are exposed to the browser
-VITE_GITHUB_CLIENT_ID=your_github_oauth_app_client_id
-VITE_API_BASE_URL=http://localhost:5174
-VITE_RPC_URI_FOR_1=https://your_rpc_provider_for_chain_1
-VITE_RPC_URI_FOR_10=https://your_rpc_provider_for_chain_10
-VITE_RPC_URI_FOR_100=https://your_rpc_provider_for_chain_100
-VITE_RPC_URI_FOR_137=https://your_rpc_provider_for_chain_137
-VITE_RPC_URI_FOR_250=https://your_rpc_provider_for_chain_250
-VITE_RPC_URI_FOR_8453=https://your_rpc_provider_for_chain_8453
-VITE_RPC_URI_FOR_146=https://your_rpc_provider_for_chain_146
-VITE_RPC_URI_FOR_42161=https://your_rpc_provider_for_chain_42161
-VITE_RPC_URI_FOR_747474=https://your_rpc_provider_for_chain_747474
+# Optional browser-visible override. Defaults to the production OAuth broker.
+NEXT_PUBLIC_GITHUB_OAUTH_BROKER_ORIGIN=https://token-assets.yearn.fi
 
-# Server (Express)
+# Server-only GitHub OAuth and upload configuration.
 GITHUB_CLIENT_ID=your_github_oauth_app_client_id
 GITHUB_CLIENT_SECRET=your_github_oauth_app_client_secret
-APP_BASE_URL=http://localhost:5173
-API_BASE_URL=http://localhost:5174
-REPO_OWNER=your-github-username-or-org
+OAUTH_RETURN_ORIGINS=http://localhost:3000
+REPO_OWNER=yearn
 REPO_NAME=tokenAssets
-# Optional: override API port
-# PORT=5174
+
+# Server-only RPC configuration. Legacy VITE_RPC_* names remain temporarily supported.
+RPC_URI_FOR_1=https://your_rpc_provider_for_chain_1
+RPC_URI_FOR_10=https://your_rpc_provider_for_chain_10
+RPC_URI_FOR_100=https://your_rpc_provider_for_chain_100
+RPC_URI_FOR_137=https://your_rpc_provider_for_chain_137
+RPC_URI_FOR_250=https://your_rpc_provider_for_chain_250
+RPC_URI_FOR_8453=https://your_rpc_provider_for_chain_8453
+RPC_URI_FOR_146=https://your_rpc_provider_for_chain_146
+RPC_URI_FOR_42161=https://your_rpc_provider_for_chain_42161
+RPC_URI_FOR_747474=https://your_rpc_provider_for_chain_747474

app/image-tools/AGENTS.md

@@ -2,47 +2,47 @@
 
 ## Project Structure & Module Organization
 
-- Assets: `tokens/<chainId>/<address>/` with `logo.svg`, `logo-32.png`, `logo-128.png`.
-- Chains: `chains/<chainId>/` (numeric `chainId`).
-- Image Upload App: `app/image-tools/`.
-- Automation: `scripts/` (e.g., `ingestTokens.js`; inputs in `scripts/token-images-to-ingest/`).
-- Root configs: `.editorconfig`, `.prettierrc`, `package.json`.
+-   Assets: `tokens/<chainId>/<address>/` with `logo.svg`, `logo-32.png`, `logo-128.png`.
+-   Chains: `chains/<chainId>/` (numeric `chainId`).
+-   Image Upload App: `app/image-tools/`.
+-   Automation: `scripts/` (e.g., `ingestTokens.js`; inputs in `scripts/token-images-to-ingest/`).
+-   Root configs: `.editorconfig`, `.prettierrc`, `package.json`.
 
 ## Build, Test, and Development Commands
 
-- SPA dev: `bun dev` in `app/image-tools` (Vite on `http://localhost:5173`).
-- Vercel dev: `vercel dev` in `app/image-tools` (serves API under `/api/*`).
-- Build/preview: `bun build` then `bun preview`.
-- Ingest assets: `node scripts/ingestTokens.js ./scripts/tokensToInjest.json` — copies prepared images into `tokens/`.
+-   Next.js dev: `bun dev` in `app/image-tools` (`http://127.0.0.1:3000`).
+-   The Next.js server serves both the UI and API routes under `/api/*`.
+-   Build/preview: `bun build` then `bun preview`.
+-   Ingest assets: `node scripts/ingestTokens.js ./scripts/tokensToInjest.json` — copies prepared images into `tokens/`.
 
 ## Coding Style & Naming Conventions
 
-- Indentation: tabs, width 4 (`.editorconfig`).
-- Prettier: single quotes, semicolons, 120‑column width.
-- Token asset files: exactly `logo.svg`, `logo-32.png`, `logo-128.png`.
-- Addresses: EVM lowercase.
-- Directories: numeric `chainId`; addresses under the chain folder.
+-   Indentation: tabs, width 4 (`.editorconfig`).
+-   Prettier: single quotes, semicolons, 120‑column width.
+-   Token asset files: exactly `logo.svg`, `logo-32.png`, `logo-128.png`.
+-   Addresses: EVM lowercase.
+-   Directories: numeric `chainId`; addresses under the chain folder.
 
 ## Testing Guidelines
 
-- No formal test suite. Validate via Vercel dev:
-  - OAuth callback: `/api/auth/github/callback` returns to `/auth/github/success`.
-  - ERC-20 name lookup: POST `/api/erc20-name` (Edge).
-  - Upload + PR: POST `/api/upload` (Edge) and confirm PR URL.
-- Ensure PNGs are exactly 32×32 and 128×128; keep SVGs optimized.
+-   Run `bun test`, `bun typecheck`, and `bun build`. Validate against the Next.js server:
+    -   OAuth callback: `/api/auth/github/callback` returns to `/auth/github/success`.
+    -   ERC-20 name lookup: POST `/api/erc20-name` (Node.js).
+    -   Upload + PR: POST `/api/upload` (Node.js) and confirm PR URL.
+-   Ensure PNGs are exactly 32×32 and 128×128; keep SVGs optimized.
 
 ## Commit & Pull Request Guidelines
 
-- Commits: conventional prefixes preferred (e.g., `chore:`, `fix:`).
-- PRs must include:
-  - Change summary and rationale.
-  - Exact path(s) added/changed (e.g., `tokens/1/0xabc.../`).
-  - Sample API URL(s) and, if helpful, screenshots of rendered PNGs.
-  - Linked issues or context.
+-   Commits: conventional prefixes preferred (e.g., `chore:`, `fix:`).
+-   PRs must include:
+    -   Change summary and rationale.
+    -   Exact path(s) added/changed (e.g., `tokens/1/0xabc.../`).
+    -   Sample API URL(s) and, if helpful, screenshots of rendered PNGs.
+    -   Linked issues or context.
 
 ## Security & Configuration Tips
 
-- Do not commit secrets or binaries outside `tokens/` build outputs.
-- Optimize SVGs (small, simple paths).
-- Ensure PNGs are precisely sized (32×32, 128×128).
-- Unless explicitly requested, avoid editing anything under `/_config`.
+-   Do not commit secrets or binaries outside `tokens/` build outputs.
+-   Optimize SVGs (small, simple paths).
+-   Ensure PNGs are precisely sized (32×32, 128×128).
+-   Unless explicitly requested, avoid editing anything under `/_config`.

app/image-tools/PRODUCT.md

@@ -0,0 +1,32 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Yearn contributors using an internal tool to prepare token and chain assets and open consistent repository pull requests.
+
+## Product Purpose
+
+Make asset submission quick, reliable, and easy to review while enforcing the repository's file and security requirements.
+
+## Brand Personality
+
+Simple, clean, dependable.
+
+## Anti-references
+
+Avoid marketing-heavy crypto styling, decorative effects, visual noise, and interactions that obscure the upload workflow.
+
+## Design Principles
+
+-   Keep the primary upload task obvious.
+-   Make repository and authentication context easy to verify.
+-   Prefer concise controls and actionable feedback.
+-   Preserve contributor confidence through predictable behavior.
+
+## Accessibility & Inclusion
+
+Use WCAG AA as the baseline, including keyboard access, visible focus states, meaningful labels, and sufficient contrast.

app/image-tools/README.md

@@ -1,42 +1,54 @@
 # Image Tools App
 
-A lightweight SPA + Vercel Functions app for uploading token/chain assets and opening GitHub PRs into this repository.
-
-## Environment Variables (Dev/Prod)
-
--   Client (exposed to browser)
-    -   `VITE_GITHUB_CLIENT_ID` — GitHub OAuth App client ID.
-    -   `VITE_API_BASE_URL` — optional; default same-origin. Set only if the API lives on another origin.
-    -   `VITE_RPC_URI_FOR_<chainId>` — optional RPC URLs used by `/api/erc20-name`.
--   Server (Vercel Functions)
-    -   `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET` — same GitHub OAuth App used by the client.
-    -   `APP_BASE_URL` — optional; default request origin. Only set if SPA and API are on different origins. For the
-        public deployment, leave unset or set to `https://token-assets.yearn.fi`; do not point this at a Vercel alias.
-    -   `REPO_OWNER` (default `yearn`), `REPO_NAME` (default `tokenAssets`).
-    -   `ALLOW_REPO_OVERRIDE` — set to `true` only if you intentionally want to target a non-yearn repo when deploying
-        from a fork.
--   GitHub OAuth App callback must be configured to the deployed API callback URL:
-    `https://<api-domain>/api/auth/github/callback`. The client intentionally does not send a `redirect_uri`; GitHub
-    uses the callback URL registered on the OAuth App, and the API redirects back to `APP_BASE_URL` after exchanging the
-    code.
+A Next.js app for uploading token and chain assets and opening pull requests against this repository.
+
+## Environment variables
+
+### Browser
+
+-   `NEXT_PUBLIC_GITHUB_OAUTH_BROKER_ORIGIN` — optional; defaults to `https://token-assets.yearn.fi`. The production
+    broker uses its registered GitHub callback and safely returns users to approved preview origins.
+
+### Server
+
+-   `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET` — GitHub OAuth App credentials used by the production broker.
+-   `OAUTH_RETURN_ORIGINS` — optional comma-separated list of additional exact origins allowed after GitHub OAuth.
+    The canonical production origin and private `dev-vm.tail197cc7.ts.net` preview host are already trusted.
+-   `REPO_OWNER` and `REPO_NAME` — default to `yearn/tokenAssets`.
+-   `ALLOW_REPO_OVERRIDE` — set to `true` only when intentionally targeting another repository from a fork deployment.
+-   `RPC_URI_FOR_<chainId>` or `RPC_<chainId>` — optional RPC URLs used by `/api/erc20-name`. Legacy `VITE_RPC_*`
+    names are temporarily accepted during deployment migration.
+
+The GitHub OAuth App callback must be `https://token-assets.yearn.fi/api/auth/github/callback`. Preview sign-in starts
+at the production `/api/auth/github/start` broker, which signs the requested app origin into OAuth state. GitHub then
+returns to the registered production callback, and the broker returns the token in the URL fragment of the approved
+preview or production `/auth/github/success` route.
+
+### OAuth deployment transition
+
+The pre-migration production Vite client starts GitHub OAuth with an unsigned nonce. The Next.js callback intentionally
+does not accept that legacy state. An OAuth attempt started in an old or already-open Vite tab before the Next.js
+deployment will fail after cutover; the user must refresh and start sign-in again. Deploy the Next.js frontend, OAuth
+start route, and callback together so all newly started attempts use signed, expiring state.
 
 ## Commands
 
--   `bun dev` — Vite dev server for the SPA (http://localhost:5173).
--   `vercel dev` — Runs API routes and serves the SPA locally (recommended for full flow).
--   `bun build` / `bun preview` — Build and preview the SPA.
--   `bun typecheck` — TypeScript type checks (acts as lightweight lint).
--   `bun lint` — Alias to type checks.
+-   `bun dev` — Next.js development server at `http://127.0.0.1:3000`.
+-   `bun build` — production Next.js build.
+-   `bun preview` — serve the production build at `http://127.0.0.1:3000`.
+-   `bun typecheck` / `bun lint` — TypeScript validation.
+-   `bun test` — focused Bun tests for OAuth and upload behavior.
 
-## App Flow (What Calls What)
+Node.js 20.9 or newer is required. Vercel should use `app/image-tools` as the project root and the Next.js framework
+preset.
 
-1. Open the site — SPA loads; no API calls by default.
-2. Sign in with GitHub — Browser goes to GitHub OAuth; upon approval GitHub redirects to `/api/auth/github/callback` (Edge). The function exchanges the code for a token and redirects to `/auth/github/success` where the token is stored.
-3. Enter chain/address — Client may call `POST /api/erc20-name` (Edge) to resolve ERC‑20 name.
-4. Drop SVG — Client generates PNG previews (32×32, 128×128) via Canvas.
-5. Submit PR — Client posts multipart form to `POST /api/upload` (Edge) with `svg`, `png32`, and `png128`. The function validates sizes and opens a PR via GitHub API.
+## App flow
 
-## Notes
+1. The App Router serves the upload form.
+2. GitHub sign-in uses the production OAuth broker and returns through `/auth/github/success`.
+3. The client calls `POST /api/erc20-name` to resolve ERC-20 names through a server-only RPC.
+4. Dropping an SVG generates 32×32 and 128×128 PNG previews in the browser.
+5. `POST /api/upload` validates the multipart files and opens a GitHub pull request.
 
--   PNGs are generated client‑side and validated on the server.
--   Keep SVGs simple/optimized; ensure PNGs are exactly 32×32 and 128×128.
+Git tree entries create missing directories implicitly. A chain `999` upload submits
+`chains/999/{logo.svg,logo-32.png,logo-128.png}` even when `chains/999` does not exist yet.