add swap

Author: openweb3

demo/app/globals.css

@@ -79,11 +79,11 @@
 }
 
 .dark {
-  --background: #14161a;
+  --background: #0f0f0f;
   --foreground: oklch(0.985 0 0);
-  --card: #25292e;
+  --card: #1f1f1f;
   --card-foreground: oklch(0.985 0 0);
-  --popover: #25292e;
+  --popover: #1f1f1f;
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
@@ -120,3 +120,15 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Hide number input spin buttons (Chrome, Safari, Edge, Opera) */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Hide number input spin buttons (Firefox) */
+input[type="number"] {
+  -moz-appearance: textfield;
+}

demo/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

demo/app/page.tsx

@@ -8,25 +8,33 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 export default function Home() {
+  const pathname = usePathname();
   const [tab, setTab] = useState("program");
 
   return (
     <div>
       <header className="border-b">
         <h1 className="text-3xl font-bold pt-6 pb-2 text-center">PVQ Demo</h1>
         <div className="mt-auto max-w-5xl mx-auto flex gap-4 font-semibold">
-          <Link href="/" className="p-4">
+          <Link
+            href="/"
+            className={`p-4 transition-colors ${pathname === "/" ? "text-primary font-bold underline" : "text-muted-foreground"}`}
+          >
             Home
           </Link>
-          {/* <Link href="/swap" className="p-4">
+          <Link
+            href="/swap"
+            className={`p-4 transition-colors ${pathname === "/swap" ? "text-primary font-bold underline" : "text-muted-foreground"}`}
+          >
             Swap
-          </Link> */}
+          </Link>
         </div>
       </header>
-      <Card className="mt-4 max-w-5xl mx-auto">
+      <Card className="mt-4 max-w-2xl mx-auto">
         <CardContent>
           <div className="flex">
             <div className="flex-1 px-4">

demo/app/swap/assets/guest-swap-info-metadata.json

@@ -0,0 +1 @@
+{"types":{"types":[{"id":0,"type":{"def":{"sequence":{"type":1}}}},{"id":1,"type":{"def":{"primitive":"u8"}}},{"id":2,"type":{"def":{"primitive":"u128"}}},{"id":3,"type":{"def":{"primitive":"bool"}}},{"id":4,"type":{"path":["Option"],"params":[{"name":"T","type":2}],"def":{"variant":{"variants":[{"name":"None","index":0},{"name":"Some","fields":[{"type":2}],"index":1}]}}}},{"id":5,"type":{"path":["Option"],"params":[{"name":"T","type":6}],"def":{"variant":{"variants":[{"name":"None","index":0},{"name":"Some","fields":[{"type":6}],"index":1}]}}}},{"id":6,"type":{"def":{"tuple":[2,2]}}},{"id":7,"type":{"def":{"sequence":{"type":8}}}},{"id":8,"type":{"def":{"tuple":[0,0,2,2]}}}]},"extension_fns":[["13206387959972970661",0,{"name":"quote_price_tokens_for_exact_tokens","inputs":[{"name":"asset1","ty":0},{"name":"asset2","ty":0},{"name":"amount","ty":2},{"name":"include_fee","ty":3}],"output":4}],["13206387959972970661",1,{"name":"quote_price_exact_tokens_for_tokens","inputs":[{"name":"asset1","ty":0},{"name":"asset2","ty":0},{"name":"amount","ty":2},{"name":"include_fee","ty":3}],"output":4}],["13206387959972970661",2,{"name":"get_liquidity_pool","inputs":[{"name":"asset1","ty":0},{"name":"asset2","ty":0}],"output":5}],["13206387959972970661",3,{"name":"list_pools","inputs":[],"output":7}]],"entrypoints":[{"name":"entrypoint_quote_price_exact_tokens_for_tokens","inputs":[{"name":"asset1","ty":0},{"name":"asset2","ty":0},{"name":"amount","ty":2}],"output":4},{"name":"entrypoint_quote_price_tokens_for_exact_tokens","inputs":[{"name":"asset1","ty":0},{"name":"asset2","ty":0},{"name":"amount","ty":2}],"output":4},{"name":"entrypoint_get_liquidity_pool","inputs":[{"name":"asset1","ty":0},{"name":"asset2","ty":0}],"output":5},{"name":"entrypoint_list_pools","inputs":[],"output":7}]}

demo/app/swap/assets/guest-swap-info.ts

@@ -0,0 +1,14 @@
+"use client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export default function SwapLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}