Next.js Market swap prompt

Prompt an AI agent to integrate Velora Market Swap into a Next.js dApp using Wagmi and Viem.

Want gasless + MEV-protected fills instead? Start with nextjs-delta-swap, or call GET /v2/quote?mode=ALL and let Velora pick the path; see Trading modes.

Outcome

A Next.js 14 (App Router) page with a fully working Velora Market swap: quote → build calldata → sign and send via Wagmi/Viem. The user signs one transaction. The route uses Augustus v6.2 against the chain selected by their connected wallet.

Prompt

Claude Code

You are working in a Next.js 14 App Router project with Wagmi v2 and Viem already configured.

Build a `/swap` page that lets the user swap any ERC-20 → any ERC-20 on Velora's Market API.

Requirements:
- Use the Velora Market REST API at `https://api.velora.xyz`. Endpoints: `GET /prices` and `POST /transactions/:chainId`.
- Always set `partner` to the host app's partner identifier on every quote call (`my-app-name` is only a placeholder).
- For the native ETH placeholder, use `0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE` (mixed case; lowercase is rejected).
- Quote first, then call `/transactions/:chainId` with the `priceRoute` returned by the quote, passed verbatim.
- Use Viem's `useWalletClient` to send the transaction. Read `chainId` from Wagmi.
- Handle the three real failure modes: stale `priceRoute` (re-quote on submit), `INSUFFICIENT_OUTPUT` revert (increase slippage and retry), and ERC-20 allowance missing (prompt approval to the v6.2 router from the quote response's `contractAddress` field).
- Show the user `srcUSD`, `destUSD`, `gasCostUSD`, and `partnerFee` from the response before they confirm.

Reference these docs and follow them exactly:
- https://velora.xyz/docs/overview/quickstart
- https://velora.xyz/docs/api-reference/market/prices
- https://velora.xyz/docs/api-reference/market/transactions

Do NOT invent endpoint paths. Do NOT cache `priceRoute` longer than 30 seconds. Always approve the address returned in `priceRoute.contractAddress` (not a hardcoded address).

End-state check

• A signed swap transaction lands on-chain in your wallet’s history.
• priceRoute.version on the most recent quote is "6.2".
• The token approval (if needed) was granted to priceRoute.contractAddress, not to a hardcoded address.