TaurusSwapDOCS

Frontend Overview

The taurusSwap frontend is a Next.js 16 application with React 19, built for trading, liquidity provision, and portfolio tracking. This page explains the architecture and page structure.

Tech Stack

  • Framework: Next.js 16 (App Router)
  • React: 19 with Server Components
  • State: Zustand (UI state), React Query (server state)
  • UI: Radix UI primitives, Tailwind CSS
  • 3D: Three.js via @react-three/fiber and @react-three/drei
  • Wallet: @txnlab/use-wallet-react (Pera, Defly, Lute)

Page Tree

app/
├── layout.tsx              # Root layout with providers
├── page.tsx                # Landing page
├── trade/
│   └── page.tsx            # Main trading interface
├── pool/
│   ├── page.tsx            # Pool list
│   └── add/
│       └── page.tsx        # Add liquidity form
├── portfolio/
│   └── page.tsx            # Portfolio dashboard
├── explore/
│   └── page.tsx            # Token/pool explorer
└── docs/
    ├── layout.tsx          # Docs shell
    ├── page.tsx            # Docs landing
    └── [sections]/         # Documentation pages

State Management

Zustand (UI State)

// store/useAppStore.ts
interface AppState {
  selectedNetwork: 'testnet' | 'mainnet';
  isWalletModalOpen: boolean;
  setNetwork: (network: string) => void;
  toggleWalletModal: (open: boolean) => void;
}

Used for: network selection, modal states, theme preference.

React Query (Server State)

// hooks/usePoolState.ts
const { data: poolState } = useQuery({
  queryKey: ['poolState', appId],
  queryFn: () => readPoolState(algodClient, appId),
  staleTime: 30_000,        // 30 seconds
  refetchInterval: 30_000   // Live polling
});

Used for: pool state, token balances, transaction history, LP positions.

Component Structure

components/
├── animation/              # Three.js visualizations
│   ├── SphereAmm.tsx
│   ├── PolarDecomposition.tsx
│   ├── TicksAndCaps.tsx
│   └── ...
├── docs/                   # Docs-specific components
│   ├── AnimationEmbed.tsx
│   ├── DocsSidebar.tsx
│   └── DocsToc.tsx
├── landing/                # Landing page components
│   ├── FloatingOrbs.tsx
│   └── Footer.tsx
├── layout/                 # Layout components
│   ├── Layout.tsx
│   └── Navbar.tsx
├── pool/                   # Pool-related components
│   ├── AddLiquidityModal.tsx
│   ├── PositionCard.tsx
│   └── PositionsTable.tsx
├── swap/                   # Swap components
│   └── TokenSelectorModal.tsx
└── ui/                     # shadcn/ui primitives
    ├── button.tsx
    ├── card.tsx
    ├── dialog.tsx
    └── ...

Data Flow

┌─────────────────┐
│  Algorand Node  │
└────────┬────────┘
         │ algodClient
         ▼
┌─────────────────┐
│  SDK Functions  │  ← readPoolState, getSwapQuote
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  React Query    │  ← Caching, refetching
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Components     │  ← Render UI
└─────────────────┘

Styling

The app uses Tailwind CSS with custom CSS variables for theming:

:root {
  --green: #9FE870;
  --dark-green: #163300;
  --background: #9FE870;
  --foreground: #0A3F2F;
  --card: #ffffff;
  --border: #0A3F2F;
}

.glass-panel {
  border: 2px solid var(--border);
  box-shadow: 4px 4px 0 0 var(--border);
}

Animations

Three.js animations are used throughout:

  • Landing page — Floating orbs background
  • Docs — Mathematical concept visualizations
  • Pool — Liquidity state visualization

See Visualizations for the full gallery.

← API ReferenceData Hooks →