zoroswap · 0x0-mico · Mar 2, 2026 · Mar 2, 2026 · Mar 2, 2026 · Mar 2, 2026
diff --git a/index.html b/index.html
@@ -52,6 +52,12 @@
 
   <!-- Preload fonts and images -->
   <link rel="preload" href="/fonts/CalSans/CalSans-Regular.ttf" as="font" type="font/ttf" crossorigin>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"
+    rel="stylesheet"
+  >
 </head>
 
 <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "vite-project",
+  "name": "zoroswap-frontend",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,19 +11,20 @@
     "postinstall": "setup-para"
   },
   "dependencies": {
-    "@demox-labs/miden-wallet-adapter": "0.10.0",
-    "@getpara/react-sdk-lite": "^2.2.0",
-    "@miden-sdk/miden-para": "^0.13.0",
-    "@miden-sdk/miden-sdk": "^0.13.0",
-    "@miden-sdk/react": "^0.13.2",
-    "@miden-sdk/use-miden-para-react": "^0.13.0",
+    "@demox-labs/miden-wallet-adapter": "^0.10.0",
+    "@getpara/react-sdk-lite": "^2.15.0",
+    "@miden-sdk/miden-para": "^0.13.3",
+    "@miden-sdk/miden-sdk": "^0.13.3",
+    "@miden-sdk/react": "^0.13.3",
+    "@miden-sdk/use-miden-para-react": "^0.13.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-query": "^5.90.12",
     "@wagmi/core": "^3.0.0",
     "async-mutex": "^0.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lightweight-charts": "^5.1.0",
     "lucide-react": "^0.556.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
@@ -35,7 +36,7 @@
     "wagmi": "^3.1.0"
   },
   "overrides": {
-    "@getpara/web-sdk": "2.8.0"
+    "@getpara/web-sdk": "2.15.0"
   },
   "devDependencies": {
     "@eslint/css": "^0.14.1",

diff --git a/public/banner.md b/public/banner.md
@@ -0,0 +1 @@
+High frequency pools are currently under maintenance. Swaps / deposits & withdrawals may not work.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,11 +13,16 @@ import { ThemeProvider } from './providers/ThemeProvider';
 import '@demox-labs/miden-wallet-adapter-reactui/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Bounce, ToastContainer } from 'react-toastify';
-import LiquidityPools from './pages/LiquidityPools';
+import Launchpad from './pages/Launchpad';
+import Explore from './pages/Explore';
+import HfPoolDetail from './pages/HfPoolDetail';
+import XykPoolDetail from './pages/XykPoolDetail';
+import NewXykPool from './pages/NewXykPool';
+import { DisclaimerGate } from './components/Disclaimer';
 import ModalProvider from './providers/ModalProvider';
-import { ZoroProvider } from './providers/ZoroProvider';
 import { ParaProviderWrapper } from './providers/ParaProviderWrapper';
 import { UnifiedWalletProvider } from './providers/UnifiedWalletProvider';
+import { ZoroProvider } from './providers/ZoroProvider';
 
 const queryClient = new QueryClient();
 
@@ -27,7 +32,11 @@ function AppRouter() {
       <Routes>
         <Route path='/' element={<SwapPage />} />
         <Route path='/faucet' element={<FaucetPage />} />
-        <Route path='/pools' element={<LiquidityPools />} />
+        <Route path='/launchpad' element={<Launchpad />} />
+        <Route path='/explore' element={<Explore />} />
+        <Route path='/pools/hf/:poolId' element={<HfPoolDetail />} />
+        <Route path='/pools/xyk/:poolId' element={<XykPoolDetail />} />
+        <Route path='/new-xyk-pool' element={<NewXykPool />} />
         <Route path='*' element={<NotFound />} />
       </Routes>
     </Router>
@@ -53,8 +62,9 @@ function App() {
                 <ThemeProvider storageKey='vite-ui-theme'>
                   <OracleProvider>
                     <ModalProvider>
-                      <AppRouter />
-                      <ToastContainer
+                      <DisclaimerGate>
+                        <AppRouter />
+                        <ToastContainer
                         position='top-center'
                         autoClose={5000}
                         hideProgressBar={false}
@@ -67,6 +77,7 @@ function App() {
                         theme='dark'
                         transition={Bounce}
                       />
+                      </DisclaimerGate>
                     </ModalProvider>
                   </OracleProvider>
                 </ThemeProvider>

diff --git a/src/components/AllDropdown.tsx b/src/components/AllDropdown.tsx
@@ -0,0 +1,28 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ChevronDown } from 'lucide-react';
+import { Button } from './ui/button';
+
+export function AllDropdown() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='outline'
+          size='sm'
+          className='rounded-lg bg-muted/50 border-muted-foreground/20 gap-1'
+        >
+          All
+          <ChevronDown className='h-4 w-4' />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='start' className='rounded-lg'>
+        <DropdownMenuItem>All</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/AssetIcon.tsx b/src/components/AssetIcon.tsx
@@ -5,19 +5,40 @@ interface AssetIconProps {
   size?: 'small' | 'normal' | number;
 }
 
+/** LP tokens (zBTC, zUSDC) use the same icon as the underlying token (BTC, USDC). */
+const iconSymbol = (s: string) => (s.startsWith('z') ? s.slice(1) : s);
+
+/** Symbols that have a dedicated icon (must match .icon-* classes in CSS). */
+const SYMBOLS_WITH_ICONS = new Set(['BTC', 'USDC', 'ETH', 'ANY']);
+
 const AssetIcon = ({ symbol, size = 'normal' }: AssetIconProps) => {
-  const iconSize = size === 'normal'
-    ? 32
-    : size === 'small'
-    ? 24
-    : typeof size === 'number'
-    ? size
-    : 32;
+  const iconSize =
+    size === 'normal'
+      ? 32
+      : size === 'small'
+        ? 24
+        : typeof size === 'number'
+          ? size
+          : 32;
+  const symbolForIcon = iconSymbol(symbol);
+  const hasIcon = SYMBOLS_WITH_ICONS.has(symbolForIcon.toUpperCase());
+
+  if (hasIcon) {
+    return (
+      <span
+        className={`icon-any icon-${symbolForIcon} inline-block flex-shrink-0`}
+        style={{ width: iconSize, height: iconSize }}
+      />
+    );
+  }
+
+  const letter = (symbolForIcon || '?')[0].toUpperCase();
   return (
     <span
-      className={`icon-any icon-${symbol} inline-block`}
+      className='inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-semibold text-foreground flex-shrink-0'
       style={{ width: iconSize, height: iconSize }}
     >
+      {letter}
     </span>
   );
 };

diff --git a/src/components/Disclaimer.tsx b/src/components/Disclaimer.tsx
@@ -0,0 +1,127 @@
+import { FancyLogo } from '@/components/FancyLogo';
+import { poweredByMiden } from '@/components/PoweredByMiden';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+const DISCLAIMER_STORAGE_KEY = 'zoro-disclaimer-accepted';
+
+function hasAcceptedDisclaimer(): boolean {
+  if (typeof window === 'undefined') return true;
+  return window.localStorage.getItem(DISCLAIMER_STORAGE_KEY) === 'true';
+}
+
+function acceptDisclaimer(): void {
+  if (typeof window === 'undefined') return;
+  window.localStorage.setItem(DISCLAIMER_STORAGE_KEY, 'true');
+}
+
+interface DisclaimerModalProps {
+  onAccept: () => void;
+}
+
+function DisclaimerModal({ onAccept }: DisclaimerModalProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const t = requestAnimationFrame(() => {
+      requestAnimationFrame(() => setVisible(true));
+    });
+    return () => cancelAnimationFrame(t);
+  }, []);
+
+  const handleAccept = useCallback(() => {
+    setVisible(false);
+    acceptDisclaimer();
+    setTimeout(onAccept, 200);
+  }, [onAccept]);
+
+  return createPortal(
+    <div
+      className='fixed inset-0 z-[10000] flex items-center justify-center bg-black/60 backdrop-blur-sm p-6 sm:p-8'
+      role='dialog'
+      aria-modal='true'
+      aria-labelledby='disclaimer-title'
+    >
+      <Card
+        className={`relative w-full max-w-lg border-border bg-card shadow-xl transition-all duration-200 ease-out ${
+          visible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'
+        }`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <CardHeader className='flex flex-col items-center text-center space-y-4 pb-2 pt-10 px-10'>
+          <FancyLogo size={128} />
+          <div className='space-y-5'>
+            <CardTitle
+              id='disclaimer-title'
+              className='text-2xl font-bold font-cal-sans text-foreground sm:text-3xl'
+            >
+              Open Alpha
+            </CardTitle>
+            <CardDescription className='text-xs text-muted-foreground leading-relaxed'>
+              ZoroSwap is under active development — features and interfaces may change
+              without notice, and you may run into bugs.
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className='flex flex-col items-center text-center space-y-6 px-10 pb-10 pt-2'>
+          <p className='text-xs text-muted-foreground leading-relaxed max-w-md'>
+            The app runs on the Miden testnet. All tokens and assets here are for testing
+            only and have no monetary value.
+          </p>
+          <Button
+            type='button'
+            size='lg'
+            className='w-full max-w-sm rounded-lg font-medium'
+            onClick={handleAccept}
+          >
+            I understand and want to continue
+          </Button>
+          <div className='flex justify-center'>
+            {poweredByMiden}
+          </div>
+        </CardContent>
+      </Card>
+    </div>,
+    document.body,
+  );
+}
+
+/**
+ * Renders the disclaimer modal when the user has not yet accepted it (once per
+ * device via localStorage). Mount once at app root (e.g. inside ModalProvider).
+ */
+export function DisclaimerGate({ children }: { children: ReactNode }) {
+  const [showDisclaimer, setShowDisclaimer] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setShowDisclaimer(!hasAcceptedDisclaimer());
+  }, [mounted]);
+
+  const handleAccept = useCallback(() => {
+    setShowDisclaimer(false);
+  }, []);
+
+  return (
+    <>
+      {children}
+      {showDisclaimer && <DisclaimerModal onAccept={handleAccept} />}
+    </>
+  );
+}
diff --git a/src/components/ExchangeRatio.tsx b/src/components/ExchangeRatio.tsx
@@ -1,18 +1,20 @@
 import { OracleContext } from '@/providers/OracleContext';
 import type { TokenConfig } from '@/providers/ZoroProvider';
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
 const ExchangeRatio = (
-  { assetA, assetB }: {
+  { assetA, assetB, overrideRatio }: {
     assetA: TokenConfig;
     assetB: TokenConfig;
+    overrideRatio?: string;
   },
 ) => {
   const { getWebsocketPrice } = useContext(OracleContext);
   const [ratio, setRatio] = useState<number | undefined>(undefined);
   const activeRatio = useRef<undefined | number>(undefined);
 
   useEffect(() => {
+    if (overrideRatio != null) return;
     const i = setInterval(() => {
       const priceA = getWebsocketPrice(assetA.oracleId);
       const priceB = getWebsocketPrice(assetB.oracleId);
@@ -25,13 +27,14 @@ const ExchangeRatio = (
       }
     }, 50);
     return () => clearInterval(i);
-  }, [assetA.oracleId, assetB.oracleId, getWebsocketPrice]);
+  }, [assetA.oracleId, assetB.oracleId, getWebsocketPrice, overrideRatio]);
 
-  const html = useMemo(() => {
-    return <>{ratio?.toFixed(8)}</>;
-  }, [ratio]);
+  if (overrideRatio != null) {
+    return <>{overrideRatio}</>;
+  }
+
+  return <>{ratio?.toFixed(8)}</>;
 
-  return html;
 };
 
 export default ExchangeRatio;
diff --git a/src/components/FancyLogo.tsx b/src/components/FancyLogo.tsx
@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils';
+
+interface FancyLogoProps {
+  className?: string;
+  size?: number;
+}
+
+export function FancyLogo({ className, size = 56 }: FancyLogoProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center rounded-2xl bg-white dark:bg-black ring-1 ring-border',
+        className,
+      )}
+      style={{ width: size, height: size }}
+    >
+      <img
+        src='/zoro-logo.svg'
+        alt='ZoroSwap'
+        className='h-[70%] w-[70%] object-contain'
+      />
+    </div>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		High frequency pools are currently under maintenance. Swaps / deposits & withdrawals may not work.