> For the complete documentation index, see [llms.txt](https://docs.strike.fun/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strike.fun/zh/qian-duan/overview.md).

# 概览

STRIKE 的 Web 前端是一个使用 Next.js 16、Tailwind CSS 与 shadcn/ui 构建的交易 terminal。界面采用深色主题，灵感来自 Bloomberg 与 Polymarket。

## Stack

| Component | Technology                                    |
| --------- | --------------------------------------------- |
| Framework | Next.js 16 (App Router)                       |
| Styling   | Tailwind CSS + shadcn/ui                      |
| Wallet    | RainbowKit + WalletConnect / injected wallets |
| 链交互       | wagmi v3 + viem v2.45                         |
| 实时数据      | 索引器 WebSocket                                 |
| 合约 ABIs   | 从 Foundry artifacts 自动生成                      |

> **注意：** 用户通过 RainbowKit 连接外部或 injected wallet。交易由用户钱包签名；前端通过 wagmi/viem 与合约交互。

## Pages

| Page | Route          | 说明                               |
| ---- | -------------- | -------------------------------- |
| 市场   | `/`            | 展示活跃市场及其 volume、spread、countdown |
| 交易   | `/markets/:id` | 完整订单簿、下单区和交易历史                   |
| 投资组合 | `/portfolio`   | Positions、P\&L、bulk claim/redeem |
| 市场详情 | `/markets/:id` | 结算详情、价格图表和生命周期                   |

## 关键 UX 模式

* **Batch-aware:** 到下一次清算的 countdown timer，以及客户端计算的 indicative clearing price
* **Transaction toasts:** 所有链交互都会展示 pending → confirmed → success/error 状态
* **Gas guards:** 确认前展示 estimated Gas，并防止 insufficient funds
* **实时:** 订单簿和交易 feed 通过 WebSocket 更新，无需手动刷新
* **Mobile-first:** responsive breakpoints、touch-friendly 下单区、PWA-ready


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.strike.fun/zh/qian-duan/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.