feat: fast swaps

docs/tx-confirmation-flow.md

@@ -0,0 +1,25 @@
+# Transaction confirmation flow (TL;DR)
+
+Two sources race to confirm a swap tx: **Fast RPC** (polled via `eth_getTransactionReceipt`) and **Wagmi** (on-chain receipt). The flow is robust to status flipping from success to failed before finality.
+
+## Flow
+
+- **RPC polling** (every 500ms): Single fetch per iteration. If receipt is **success** (0x1) → call `onPreConfirmed` once, show “pre-confirmed” UI, **keep polling**. If receipt is **reverted** (0x0) at any time → treat as final failure: stop polling, set `hasConfirmedRef` so Wagmi won’t override, call `onError` → UI shows error modal.
+- **Wagmi**: When on-chain receipt arrives, if we already “confirmed” (including by RPC failure) we do nothing. Else: if reverted → `onError`; if success → `onConfirmed`, abort RPC polling.
+
+So: pre-confirm is optimistic (0x1 from RPC); we keep re-checking until either Wagmi confirms or we see 0x0 and show error.
+
+## Key pieces
+
+- **Hook:** `useWaitForTxConfirmation` in `src/hooks/use-wait-for-tx-confirmation.ts` — runs the race, uses `fetchTransactionReceiptFromDb` (single request per loop), `preConfirmedFiredRef` so `onPreConfirmed` fires once per hash.
+- **Swap UI:** `SwapToast` uses the hook only; `onPreConfirmed` → set status to `"pre-confirmed"`; `onError` → `setFailed` → `lastTxError` → SwapConfirmationModal shows the error.
+- **Status:** RPC returns 0x1/0x0; `transaction-receipt-utils` normalizes to `"success"` / `"reverted"`. No raw 0x0/0x1 checks in UI.
+
+## Outcome matrix
+
+| RPC first      | Then        | Result                    |
+|----------------|------------|---------------------------|
+| 0x1 (success)  | keep polling | Pre-confirm shown        |
+| 0x1 then 0x0   | —          | Error; Wagmi ignored     |
+| 0x0            | —          | Error                     |
+| Wagmi receipt  | —          | Success → `onConfirmed`; reverted → `onError` |

next.config.mjs

@@ -40,11 +40,26 @@ const nextConfig = {
         hostname: 'assets.coingecko.com',
         pathname: '/coins/images/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'coin-images.coingecko.com',
+        pathname: '/coins/images/**',
+      },
       {
         protocol: 'https',
         hostname: 'cryptologos.cc',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'token-icons.s3.amazonaws.com',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+        pathname: '/**',
+      },
     ],
   },
 };

package.json

@@ -12,12 +12,14 @@
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "stablecoins": "tsx scripts/getStablecoins.ts"
   },
   "dependencies": {
     "@fuul/sdk": "^7.7.1",
     "@hookform/resolvers": "^3.10.0",
     "@next/eslint-plugin-next": "^15.4.2",
+    "@number-flow/react": "^0.5.10",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -60,6 +62,7 @@
     "ethers": "^6.16.0",
     "googleapis": "^169.0.0",
     "input-otp": "^1.4.2",
+    "lenis": "^1.3.17",
     "lucide-react": "^0.462.0",
     "motion": "^12.23.26",
     "next": "^15.5.7",
@@ -81,6 +84,7 @@
     "vaul": "^0.9.9",
     "viem": "^2.40.4",
     "wagmi": "^2.19.5",
+    "zustand": "^5.0.3",
     "zod": "^3.25.76"
   },
   "devDependencies": {

scripts/getStablecoins.ts

@@ -0,0 +1,35 @@
+/**
+ * Fetches stablecoin symbols from CoinGecko and writes a deduplicated list to src/lib/stablecoin-list.json.
+ * Run: npx tsx scripts/getStablecoins.ts
+ */
+
+const COINGECKO_URL =
+  "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&category=stablecoins"
+const OUT_PATH = new URL("../src/lib/stablecoin-list.json", import.meta.url)
+
+interface CoinGeckoItem {
+  symbol: string
+  [key: string]: unknown
+}
+
+async function main() {
+  const res = await fetch(COINGECKO_URL)
+  if (!res.ok) {
+    throw new Error(`CoinGecko API error: ${res.status} ${res.statusText}`)
+  }
+  const data = (await res.json()) as CoinGeckoItem[]
+  const symbols = [...new Set(data.map((item) => item.symbol.toUpperCase()))].sort()
+  const json = JSON.stringify(symbols, null, 2)
+  const { writeFileSync, mkdirSync } = await import("fs")
+  const { dirname } = await import("path")
+  const { fileURLToPath } = await import("url")
+  const outPath = fileURLToPath(OUT_PATH)
+  mkdirSync(dirname(outPath), { recursive: true })
+  writeFileSync(outPath, json + "\n", "utf8")
+  console.log(`Wrote ${symbols.length} stablecoin symbols to ${outPath}`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

src/app/(app)/layout.tsx

@@ -68,7 +68,9 @@ function AppLayoutContent({ children }: { children: React.ReactNode }) {
       !hasCheckedStatus &&
       status !== "connecting" &&
       status !== "reconnecting" &&
-      (pathname?.startsWith("/dashboard") || pathname?.startsWith("/leaderboard"))
+      (pathname?.startsWith("/dashboard") ||
+        pathname?.startsWith("/leaderboard") ||
+        pathname?.startsWith("/swap"))
     ) {
       // Small tick to ensure RainbowKit's internal state is also ready
       const timer = setTimeout(() => {

src/app/(app)/page.tsx

@@ -0,0 +1,13 @@
+import { Hero } from "@/components/swap/HeroSection"
+import { AnimatedBackgroundOrbs } from "@/components/swap/OrbAnimatedBackground"
+import { SwapForm } from "@/components/swap/SwapForm"
+
+export default function IndexPage() {
+  return (
+    <div className="relative flex flex-col items-center justify-start px-4 xs:pt-6 pb-4">
+      <AnimatedBackgroundOrbs />
+      <Hero />
+      <SwapForm />
+    </div>
+  )
+}

src/app/api/barter/route/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const BARTER_API_BASE = "https://api2.eth.barterswap.xyz"
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { source, target, sellAmount } = body
+
+    if (!source || !target || !sellAmount) {
+      return NextResponse.json(
+        { error: "Missing required fields: source, target, sellAmount" },
+        { status: 400 }
+      )
+    }
+
+    const apiKey = process.env.BARTER_API_KEY
+    if (!apiKey) {
+      return NextResponse.json({ error: "Barter API key invalid or missing." }, { status: 500 })
+    }
+
+    const requestId = crypto.randomUUID?.() ?? `route-${Date.now()}`
+
+    const resp = await fetch(`${BARTER_API_BASE}/route`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`,
+        "X-Request-Id": requestId,
+      },
+      body: JSON.stringify({
+        source: String(source).toLowerCase(),
+        target: String(target).toLowerCase(),
+        sellAmount: String(sellAmount),
+      }),
+    })
+
+    const data = await resp.json()
+    console.log("barter data", data)
+
+    if (!resp.ok) {
+      const msg = data?.error ?? data?.message ?? `Barter API error (${resp.status})`
+      return NextResponse.json({ error: msg }, { status: resp.status })
+    }
+
+    const outputAmount = data?.outputWithGasAmount
+    const gasEstimation = data?.gasEstimation
+    const transactionFee = data?.transactionFee
+    const gasPrice = data?.gasPrice
+
+    if (outputAmount == null || gasEstimation == null) {
+      return NextResponse.json(
+        { error: "Barter API error. Invalid route response." },
+        { status: 500 }
+      )
+    }
+
+    const response: Record<string, unknown> = {
+      outputAmount: String(outputAmount),
+      gasEstimation: Number(gasEstimation),
+    }
+    if (transactionFee != null) response.transactionFee = String(transactionFee)
+    if (gasPrice != null) response.gasPrice = String(gasPrice)
+
+    return NextResponse.json(response)
+  } catch (error) {
+    console.error("Barter route API error:", error)
+    return NextResponse.json(
+      { error: "Barter API error. Please check your connection." },
+      { status: 500 }
+    )
+  }
+}