warp(x) Frontend

✨ Introduction

This is the frontend repository for the warp(x) project — a fully on-chain hybrid DEX combining both AMM and Orderbook mechanics, built on Polkadot SDK.

The frontend is developed using Next.js, React, Tailwind CSS, and @polkadot/api, and interacts directly with a Substrate-based node via WebSocket for live trading and asset state updates.

warp(x) enables users to:

• Trade using Limit / Market orders
• Interact with AMM pools
• Connect via Polkadot.js Wallet Extension
• Visualize live orderbook and liquidity data
• Execute fully on-chain transactions with real-time feedback

---

🚀 How to Run

Make sure the local Substrate node is running before launching the frontend.

🧩 SDK & Type Generation

Type generation is needed for proper API interaction with the custom runtime.

1. Move to SDK workspace:

cd packages/sdk

2. Run the node and expose metadata:

./target/release/warpx-node \
  --rpc-port 9988 \
  ...

3. Export runtime metadata:

curl -H "Content-Type: application/json" \
     -d '{"id":"1", "jsonrpc":"2.0", "method": "state_getMetadata", "params":[]}' \
     http://localhost:9988 > ./warpx.json

4. Generate type definitions:

# From project root
yarn codegen

# Or from SDK workspace
yarn workspace @warpx/sdk codegen

This will generate the required custom types for the frontend to work with the Polkadot API.

---

📦 Tech Stack

Layer	Tech
Framework	Next.js (App Router)
Styling	Tailwind CSS, shadcn/ui
Blockchain API	warp/api, @polkadot/api
Wallet Integration	@polkadot/extension-dapp
State / Data	React Query, Zustand
Build Tool	Turborepo (Yarn Workspaces)

---

Application

🔌 Polkadot Node Integration

• WsProvider

  • Connects to local or remote nodes (e.g. warpX testnet).

• ApiPromise

  • Centralized factory function ensures a single shared instance across the appApiPromise is created and shared across the app.

• Zustand

  • Manages and persists:
    • Polkadot API connection instance.
    • Current connected wallet account.
    • Pool info and metadata.
    • UI states: loading, success, error.

• React Query

  • Fetches on-chain data (balances, orderbook, pools).
  • Handles caching, refetching, and state sync.

• Polkadot.js Extension Integration

  • Uses web3Enable, web3Accounts for wallet access.
  • Handles transaction signing via signAndSend.

• Custom Hooks

  • useApi, useWallet, useSubmitTx, useOrderbook.
  • Encapsulate logic for modular use in components.

• Connection Handling

  • Shows real-time status (Connected / Connecting / Disconnected).
  • Graceful fallback for missing wallet or node issues.

💧 Pool Management

• Pair Discovery

  • Query existing pairs and display available pools
  • Handle routing to pair-specific pages (e.g. /pools/DOT/USDC)

• Create Pool

  • Submits create_pool transaction with correct token IDs
  • Enforces minimum amount of liquidity when creating a new pool

• Add Liquidity Pool

  • Submits add_liquidity transaction
  • Calculates proportional contribution based on current pool reserves

• AMM Info Fetching

  • Fetches on-chain pool state (reserves, LP supply, fee rate)
  • Updates UI with live price, ratio, and APR
  • Uses React Query to sync with latest chain state

• verified_pool(optional) : Link

🧾 Order System

• Live Orderbook Fetching

  • Fetches real-time bids and asks from on-chain storage
  • Uses React Query or subscription to sync order changes
  • Displays sorted orderbook (highest bid, lowest ask)

• Order State Management

  • Normalizes raw storage into price/amount format
  • Aggregates orders by price level for display
  • Updates state efficiently on every block or event

• UI Display

  • Renders bid/ask tables side by side
  • Shows depth bar or volume visualizations

🔄 Trade Execution

• Limit Order

  • Form input for price and amount
  • Validates balance and orderbook constraints
  • Submits limit_order transaction
  • Shows estimated fill, fees, and confirmation status

• Market Order

  • Executes against best available price in the orderbook
  • Auto-calculates expected output based on slippage
  • Submits market_order transaction with real-time preview

• UX & Feedback

  • Displays transaction status: pending, included, failed
  • Shows toast notifications or inline status
  • Resets form after confirmation

---

🧠 Developer Notes

• Ensure your local chain exposes the correct RPC port (9988) for SDK operations.
• Onchain logic for order matching is handled by Substrate custom pallets (see backend repo).
• Frontend provides live WebSocket updates for trades and liquidity events.
• Wallet must be connected and authorized via Polkadot.js Extension to sign transactions.

---

🙌 Contributors

• Frontend: Kiyori (GitHub: @thxforall)

---