feat: fast swaps

.env.example

@@ -8,3 +8,7 @@ EMAILOCTOPUS_LIST_ID="00000000-0000-0000-0000-000000000000"
 
 # Bearer token to access the FastRPC Readonly DB
 FAST_RPC_API_TOKEN=""
+
+# Use dummy FastSwap data to test swap flows without production API/contract.
+# Set to "true" in .env.local to bypass FastSwap API and show fake success.
+# NEXT_PUBLIC_FASTSWAP_DUMMY="true"

package.json

@@ -18,6 +18,7 @@
     "@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 +61,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",

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,9 @@
+"use client"
+
+import { SwapForm } from "@/components/swap/SwapForm"
+
+const IndexPage = () => {
+  return <SwapForm />
+}
+
+export default IndexPage

src/app/api/token-price/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getTokenPrice } from "@/lib/analytics-server"
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const symbol = searchParams.get("symbol")
+
+    if (!symbol) {
+      return NextResponse.json({ error: "Symbol parameter is required" }, { status: 400 })
+    }
+
+    const price = await getTokenPrice(symbol)
+
+    if (price === null) {
+      return NextResponse.json({ error: `Failed to fetch ${symbol} price` }, { status: 500 })
+    }
+
+    return NextResponse.json({
+      success: true,
+      symbol: symbol.toUpperCase(),
+      price: price,
+    })
+  } catch (error) {
+    console.error("Error fetching token price:", error)
+    return NextResponse.json({ error: "Failed to fetch token price" }, { status: 500 })
+  }
+}

src/app/api/tokens/route.ts

@@ -0,0 +1,16 @@
+import { getUniswapTokenList } from "@/lib/swap-server"
+import { NextResponse } from "next/server"
+
+/**
+ * API route to fetch Uniswap token list
+ * Used by client-side hooks for token list fetching
+ */
+export async function GET() {
+  try {
+    const tokens = await getUniswapTokenList()
+    return NextResponse.json(tokens)
+  } catch (error) {
+    console.error("Error fetching token list:", error)
+    return NextResponse.json([], { status: 500 })
+  }
+}

src/app/globals.css

@@ -162,6 +162,20 @@ All colors MUST be HSL.
     will-change: transform;
   }
 
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+  }
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
   @keyframes scroll-footer {
     0% {
       transform: translateX(0);
@@ -170,6 +184,107 @@ All colors MUST be HSL.
       transform: translateX(-50%);
     }
   }
+
+  @keyframes pulse-3 {
+    0% {
+      opacity: 1;
+    }
+    8% {
+      opacity: 0.3;
+    }
+    16% {
+      opacity: 1;
+    }
+    24% {
+      opacity: 0.3;
+    }
+    32% {
+      opacity: 1;
+    }
+    40% {
+      opacity: 0.3;
+    }
+    48% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .animate-pulse-3 {
+    animation: pulse-3 6s cubic-bezier(0.4, 0, 0.6, 1);
+    will-change: opacity;
+  }
+
+  .animate-pulse-3-loop {
+    animation: pulse-3 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    will-change: opacity;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .animate-shimmer {
+    animation: shimmer 2s ease-in-out infinite;
+  }
+
+  /* Staggered Exit Animation - The Vanishing Act */
+  .fade-out-others {
+    opacity: 0;
+    transform: scale(0.95);
+    filter: blur(10px);
+    pointer-events: none;
+    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  /* Staggered delays for choreographed animation */
+  .stagger-1 {
+    transition-delay: 0ms;
+  }
+
+  .stagger-2 {
+    transition-delay: 50ms;
+  }
+
+  .stagger-3 {
+    transition-delay: 100ms;
+  }
+
+  .stagger-4 {
+    transition-delay: 150ms;
+  }
+
+  .stagger-5 {
+    transition-delay: 200ms;
+  }
+}
+
+/* Blinking cursor animation for input fields */
+@keyframes blink-cursor {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Ensure input fields have visible blinking cursor */
+input[type="text"] {
+  caret-color: white;
+}
+
+input[type="text"]:focus {
+  caret-color: white;
 }
 
 /* Ensure inactive tab content is hidden on mobile (but not tab triggers) */