Ứng dụng giao diện người dùng
Giao diện người dùng của CloudBank được tổ chức dưới dạng monorepo đa ứng dụng với các gói dùng chung. Mỗi ứng dụng nhắm đến đối tượng người dùng riêng biệt và được xây dựng với một ngăn xếp được tối ưu hóa cho trường hợp sử dụng của nó.
Kiến trúc ứng dụng
apps/web — Giao dịch UI
Ứng dụng chính dành cho người dùng để duyệt thị trường, đặt giao dịch và quản lý vị thế.
| Aspect | Technology |
|---|---|
| Framework | Phản ứng 19 |
| Công cụ xây dựng | Vite |
| Routing | TanStack Bộ định tuyến (dựa trên tệp) |
| Trạng thái máy chủ | TanStack Truy vấn |
| Blockchain | wagmi + viem |
| Styling | Gió xuôi CSS |
Các tính năng chính
- Khám phá thị trường — Duyệt qua, tìm kiếm và lọc các thị trường dự đoán theo danh mục, số lượng và mức độ gần đây.
- Giao diện giao dịch — Buy/sell mã thông báo kết quả thông qua AMM hoặc giới hạn lệnh trên sổ lệnh, với biểu đồ giá theo thời gian thực.
- Quản lý danh mục đầu tư — Xem các vị thế mở, giao dịch lịch sử, PnL đã thực hiện và chưa thực hiện.
- Kết nối ví — Hỗ trợ MetaMask, WalletConnect và Ví Coinbase thông qua đầu nối wagmi.
Quản lý nhà nước
- Trạng thái máy chủ được quản lý hoàn toàn thông qua TanStack Truy vấn, với các truy vấn được khóa theo thị trường ID, địa chỉ người dùng và chuỗi ID. Stale-while-revalidate đảm bảo phản hồi UI trong khi vẫn giữ cho dữ liệu luôn mới.
- Trạng thái địa phương sử dụng Ngữ cảnh phản ứng cho các mối quan tâm cụ thể của UI như khả năng hiển thị phương thức, tab thị trường đã chọn và đầu vào biểu mẫu giao dịch.
apps/admin — Bảng quản trị
Một công cụ nội bộ dành cho các nhà khai thác nền tảng để quản lý thị trường, người dùng và cấu hình hệ thống.
| Aspect | Technology |
|---|---|
| Framework | Phản ứng 19 |
| Công cụ xây dựng | Vite |
| UI Thư viện | Thiết Kế Kiến |
| Routing | TanStack Bộ định tuyến |
Capabilities
- Quản lý vòng đời thị trường (tạo, tính năng, tạm dừng, hủy).
- Đánh giá và kiểm duyệt tài khoản người dùng.
- Tạo và giám sát chiến dịch giới thiệu.
- Hàng đợi xem xét yêu cầu rút tiền.
- Cấu hình hệ thống (giới hạn tỷ lệ, danh sách trắng hợp đồng, giới hạn rút tiền hàng ngày).
- Trình xem nhật ký kiểm tra cho lịch sử hành động quản trị.
apps/node-presale — Bán nút
Một ứng dụng dành riêng cho sự kiện bán nút của CloudBank, được thiết kế cho các tình huống khởi chạy có lưu lượng truy cập cao.
| Aspect | Technology |
|---|---|
| Framework | Next.js 16 |
| Blockchain | wagmi |
| Internationalization | intl tiếp theo (i18n) |
Features
- Lựa chọn cấp độ nút và quy trình mua hàng.
- Theo dõi hàng tồn kho theo thời gian thực và đồng hồ đếm ngược.
- Hỗ trợ đa ngôn ngữ: Tiếng Anh, Tiếng Trung phồn thể (zh-TW), Tiếng Hàn (ko), Tiếng Việt (vi).
- Kết xuất phía máy chủ cho SEO và tốc độ tải ban đầu nhanh.
apps/docs — Tài liệu
Trang web tài liệu (trang này) được xây dựng bằng VitePress, cung cấp tài liệu kỹ thuật và hướng tới người dùng.
- Nội dung dựa trên Markdown với các thành phần Vue cho các phần tử tương tác.
- Hỗ trợ sơ đồ Nàng tiên cá bản địa để trực quan hóa kiến trúc.
- Đã triển khai lên các Trang Cloudflare với các bản dựng tự động khi đẩy.
Gói chia sẻ
packages/subgraph
Các truy vấn GraphQL được chia sẻ và các loại TypeScript được tạo từ lược đồ sơ đồ con. Được sử dụng chủ yếu bởi GraphQL để tìm nạp dữ liệu trên chuỗi (thị trường, giao dịch, vị trí) thông qua Biểu đồ.
packages/contracts
Các loại TypeScript được tạo tự động và các định nghĩa ABI từ các tạo phẩm hợp đồng của Foundry. Cung cấp:
- Địa chỉ hợp đồng đã nhập trên mỗi mạng.
- Các hằng số ABI để sử dụng với móc ABI và wagmi của viem.
- Định nghĩa loại được chia sẻ cho các thông số thị trường, cấu trúc đơn hàng và trọng tải sự kiện.
Hỗ trợ đa ngôn ngữ
CloudBank nhắm đến cơ sở người dùng đa ngôn ngữ trên khắp các thị trường Châu Á-Thái Bình Dương. Chiến lược dịch thuật khác nhau tùy theo ứng dụng:
| Language | Code | Coverage |
|---|---|---|
| English | en | Tất cả ứng dụng |
| Tiếng Trung phồn thể | zh-TW | bán trước nút, web |
| Korean | ko | node-presale |
| Vietnamese | vi | node-presale |
Các tệp dịch được đặt cùng vị trí với mỗi ứng dụng và được tải vào thời điểm xây dựng (Next.js) hoặc thời gian chạy (React i18n).
Tích hợp ví
Tất cả các ứng dụng hỗ trợ blockchain đều chia sẻ một lớp kết nối ví chung được xây dựng trên wagmi:
- MetaMask — Tiện ích mở rộng trình duyệt và trình duyệt trong ứng dụng dành cho thiết bị di động.
- WalletConnect — QR mã và kết nối liên kết sâu cho ví di động.
- Ví Coinbase — Tích hợp trực tiếp qua Coinbase SDK.
Việc chuyển đổi chuỗi được xử lý tự động khi người dùng kết nối trên mạng không được hỗ trợ, nhắc họ chuyển sang BSC.