Frontend Applications

CloudBank's frontend is organized as a multi-app monorepo with shared packages. Each application targets a distinct user audience and is built with a stack optimized for its use case.

Application Architecture

apps/web — Trading UI

The primary user-facing application for browsing markets, placing trades, and managing positions.

Aspect	Technology
Framework	React 19
Build Tool	Vite
Routing	TanStack Router (file-based)
Server State	TanStack Query
Blockchain	wagmi + viem
Styling	Tailwind CSS

Key Features

• Market discovery — Browse, search, and filter prediction markets by category, volume, and recency.
• Trading interface — Buy/sell outcome tokens via AMM or limit orders on the orderbook, with real-time price charts.
• Portfolio management — View open positions, historical trades, realized and unrealized PnL.
• Wallet connection — Supports MetaMask, WalletConnect, and Coinbase Wallet via wagmi connectors.

State Management

• Server state is managed entirely through TanStack Query, with queries keyed by market ID, user address, and chain ID. Stale-while-revalidate ensures responsive UI while keeping data fresh.
• Local state uses React Context for UI-specific concerns like modal visibility, selected market tab, and trade form inputs.

apps/admin — Admin Panel

An internal tool for platform operators to manage markets, users, and system configuration.

Aspect	Technology
Framework	React 19
Build Tool	Vite
UI Library	Ant Design
Routing	TanStack Router

Capabilities

• Market lifecycle management (create, feature, pause, cancel).
• User account review and moderation.
• Referral campaign creation and monitoring.
• Withdrawal request review queue.
• System configuration (rate limits, contract whitelist, daily withdrawal caps).
• Audit log viewer for administrative action history.

apps/node-presale — Node Sale

A dedicated application for CloudBank's node sale event, designed for high-traffic launch scenarios.

Aspect	Technology
Framework	Next.js 16
Blockchain	wagmi
Internationalization	next-intl (i18n)

Features

• Node tier selection and purchase flow.
• Real-time inventory tracking and countdown timers.
• Multi-language support: English, Traditional Chinese (zh-TW), Korean (ko), Vietnamese (vi).
• Server-side rendering for SEO and fast initial loads.

apps/docs — Documentation

The documentation site (this site) built with VitePress, providing technical and user-facing documentation.

• Markdown-based content with Vue components for interactive elements.
• Native Mermaid diagram support for architecture visualizations.
• Deployed to Cloudflare Pages with automatic builds on push.

Shared Packages

packages/subgraph

Shared GraphQL queries and TypeScript types generated from the subgraph schema. Used primarily by apps/web to fetch on-chain data (markets, trades, positions) via The Graph.

packages/contracts

Auto-generated TypeScript types and ABI definitions from the Foundry contract artifacts. Provides:

• Typed contract addresses per network.
• ABI constants for use with viem's getContract and wagmi hooks.
• Shared type definitions for market parameters, order structures, and event payloads.

Multilingual Support

CloudBank targets a multilingual user base across Asia-Pacific markets. The translation strategy varies by app:

Language	Code	Coverage
English	en	All apps
Traditional Chinese	zh-TW	node-presale, web
Korean	ko	node-presale
Vietnamese	vi	node-presale

Translation files are co-located with each application and loaded at build time (Next.js) or runtime (React i18n).

Wallet Integration

All blockchain-enabled apps share a common wallet connection layer built on wagmi:

• MetaMask — Browser extension and mobile in-app browser.
• WalletConnect — QR code and deep-link connection for mobile wallets.
• Coinbase Wallet — Direct integration via Coinbase SDK.

Chain switching is handled automatically when users connect on an unsupported network, prompting them to switch to BSC.