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)/SwapOrLandingGate.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { useAccount } from "wagmi"
+import { FEATURE_FLAGS } from "@/lib/feature-flags"
+import { useWhitelist } from "@/hooks/use-whitelist"
+import { useWaitlist } from "@/hooks/use-waitlist"
+import { Hero } from "@/components/swap/HeroSection"
+import { AnimatedBackgroundOrbs } from "@/components/swap/OrbAnimatedBackground"
+import { SwapForm } from "@/components/swap/SwapForm"
+import LandingPage from "@/components/landing/Page"
+import { EarlyAccessForm } from "@/components/landing/EarlyAccessForm"
+import { AlreadyOnWaitlistMessage } from "@/components/landing/AlreadyOnWaitlistMessage"
+
+function SwapContent() {
+  return (
+    <div className="relative flex flex-col items-center justify-start px-4 xs:pt-6 pb-4">
+      <AnimatedBackgroundOrbs />
+      <Hero />
+      <SwapForm />
+    </div>
+  )
+}
+
+export function SwapOrLandingGate() {
+  const { swapPrivateMode } = FEATURE_FLAGS
+  const { isConnected, address } = useAccount()
+  const { isWhitelisted, isLoading: isWhitelistLoading } = useWhitelist()
+  const { onWaitlist, isLoading: isWaitlistLoading } = useWaitlist()
+
+  if (!swapPrivateMode) {
+    return <SwapContent />
+  }
+
+  if (isWhitelistLoading || isWaitlistLoading) {
+    return (
+      <div className="relative flex min-h-[60vh] items-center justify-center px-4">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    )
+  }
+
+  const canSwap = isWhitelisted && onWaitlist
+  if (canSwap) {
+    return <SwapContent />
+  }
+
+  if (isConnected && address) {
+    if (onWaitlist) {
+      return <AlreadyOnWaitlistMessage />
+    }
+    return <EarlyAccessForm initialWalletAddress={address} />
+  }
+
+  return <LandingPage />
+}

src/app/(app)/layout.tsx

@@ -7,10 +7,14 @@ import { useConnectModal } from "@rainbow-me/rainbowkit"
 import { toast } from "sonner"
 import { Suspense } from "react"
 import { AppHeader } from "@/components/shared/AppHeader"
+import { AnimatedBackground } from "@/components/AnimatedBackground"
 import { useRPCTest } from "@/hooks/use-rpc-test"
 import { useWalletInfo } from "@/hooks/use-wallet-info"
+import { useWhitelist } from "@/hooks/use-whitelist"
+import { useWaitlist } from "@/hooks/use-waitlist"
 import { isMetaMaskWallet, isRabbyWallet } from "@/lib/onboarding-utils"
 import { NETWORK_CONFIG } from "@/lib/network-config"
+import { FEATURE_FLAGS } from "@/lib/feature-flags"
 import { DashboardTabProvider, useDashboardTab } from "./DashboardTabContext"
 
 // Modal Components
@@ -32,10 +36,19 @@ function AppLayoutContent({ children }: { children: React.ReactNode }) {
   const { isConnected, status, connector, address } = useAccount()
   const { connectors } = useConnect()
   const { walletName, walletIcon } = useWalletInfo(connector, isConnected)
+  const { isWhitelisted, isLoading: isWhitelistLoading } = useWhitelist()
+  const { onWaitlist, isLoading: isWaitlistLoading } = useWaitlist()
   const rpcTest = useRPCTest()
   const { openConnectModal } = useConnectModal()
   const [hasCheckedStatus, setHasCheckedStatus] = useState(false)
 
+  const canSwap = isWhitelisted && onWaitlist
+  const isGateRoute = pathname === "/"
+  const hideLayout =
+    isGateRoute &&
+    FEATURE_FLAGS.swapPrivateMode &&
+    (isWhitelistLoading || isWaitlistLoading || !canSwap)
+
   // Wallet detection
   const isMetaMask = isMetaMaskWallet(connector)
   const isRabby = isRabbyWallet(connector)
@@ -68,7 +81,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(() => {
@@ -152,6 +167,15 @@ function AppLayoutContent({ children }: { children: React.ReactNode }) {
     }
   }
 
+  if (hideLayout) {
+    return (
+      <div className="relative min-h-screen">
+        <AnimatedBackground />
+        <div className="relative z-10">{children}</div>
+      </div>
+    )
+  }
+
   return (
     <div className="bg-background min-h-screen">
       <div

src/app/(app)/page.tsx

@@ -0,0 +1,5 @@
+import { SwapOrLandingGate } from "./SwapOrLandingGate"
+
+export default function IndexPage() {
+  return <SwapOrLandingGate />
+}