前端應用程式

CloudBank 的前端被組織為具有共享包的多應用程式單一存儲庫。每個應用程式都針對不同的使用者群體，並使用針對其用例進行最佳化的堆疊來建置。

應用架構

apps/web — 交易 UI

主要面向用戶的應用程序，用於瀏覽市場、進行交易和管理頭寸。

Aspect	Technology
Framework	反應 19
建構工具	Vite
Routing	TanStack 路由器（基於檔案）
伺服器狀態	TanStack 查詢
Blockchain	瓦格米+維姆
Styling	順風 CSS

主要特點

• 市場發現 — 按類別、數量和新近度瀏覽、搜尋和過濾預測市場。
• 交易介面 — Buy/sell 結果代幣透過 AMM 或訂單簿上的限價訂單，帶有即時價格圖表。
• 投資組合管理 — 查看未平倉部位、歷史交易、已實現與未實現的損益。
• 錢包連接 — 透過 wagmi 連接器支援 MetaMask、WalletConnect 和 Coinbase 錢包。

狀態管理

• 伺服器狀態完全透過 TanStack 查詢進行管理，查詢以市場 ID、用戶位址和鏈 ID 為鍵。重新驗證時陳舊可確保回應 UI，同時保持資料新鮮。
• 本地狀態使用 React Context 來解決 UI 特定的問題，例如模式可見性、選定的市場選項卡和交易表單輸入。

apps/admin — 管理面板

平台營運商管理市場、使用者和系統配置的內部工具。

Aspect	Technology
Framework	反應 19
建構工具	Vite
UI 圖書館	螞蟻設計
Routing	TanStack 路由器

Capabilities

• 市場生命週期管理（創建、特色、暫停、取消）。
• 用戶帳號審查和審核。
• 推薦活動的建立和監控。
• 提款請求審核隊列。
• 系統配置（速率限制、合約白名單、每日提現上限）。
• 審核日誌檢視器以查看管理操作記錄。

apps/node-presale — 節點銷售

CloudBank節點發售活動專用應用，專為高流量上線場景設計。

Aspect	Technology
Framework	下.js 16
Blockchain	wagmi
Internationalization	下一個國際 (i18n)

Features

• 節點層選擇和購買流程。
• 即時庫存追蹤和倒數計時器。
• 多語言支援：英語、繁體中文 (zh-TW)、韓語 (ko)、越南語 (vi)。
• SEO 的伺服器端渲染和快速初始載入。

apps/docs — 文檔

使用 VitePress 建置的文件網站（本網站），提供技術和使用者導向的文件。

• 基於 Markdown 的內容，帶有用於互動元素的 Vue 元件。
• 原生美人魚圖支援架構視覺化。
• 部署到 Cloudflare Pages，並在推送時自動建置。

共享套餐

packages/subgraph

從子圖模式產生的共用 GraphQL 查詢和 TypeScript 類型。主要由 GraphQL 用於透過 The Graph 取得鏈上資料（市場、交易、部位）。

packages/contracts

從 Foundry 合約工件自動產生 TypeScript 類型和 ABI 定義。提供：

• 每個網路的鍵入合約位址。
• ABI 常數與 viem 的 ABI 和 wagmi 掛鉤一起使用。
• 市場參數、訂單結構和事件負載的共享類型定義。

多語言支援

CloudBank 的目標是亞太市場的多語言使用者群。翻譯策略因應用程式而異：

Language	Code	Coverage
English	en	所有應用程式
繁體中文	zh-TW	節點預售、網絡
Korean	ko	node-presale
Vietnamese	vi	node-presale

翻譯檔案與每個應用程式位於相同位置，並在建置時 (Next.js) 或執行階段 (React i18n) 載入。

錢包整合

所有支援區塊鏈的應用程式共享一個基於 wagmi 構建的通用錢包連接層：

• MetaMask — 瀏覽器擴充功能和行動應用程式內瀏覽器。
• WalletConnect — QR 代碼和行動錢包的深層連結連接。
• Coinbase 錢包 — 透過 Coinbase SDK 直接整合。

當使用者連接到不受支援的網路時，會自動處理鏈切換，提示他們切換到 BSC。