context-build

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Build Skill

构建Skill

Build prediction market frontends using React hooks from

context-markets-react

使用

context-markets-react

中的React hooks构建预测市场前端。

Prerequisites

前提条件

```
context-markets-react
```
and
```
context-markets
```
>= 0.5
React 18+,
```
wagmi
```
>= 2,
```
viem
```
>= 2,
```
@tanstack/react-query
```
>= 5
No API key needed for read-only hooks. Trading hooks require wallet connection.

bash

npm install context-markets-react context-markets wagmi viem @tanstack/react-query

```
context-markets-react
```
和
```
context-markets
```
版本 >= 0.5
React 18+、
```
wagmi
```
>= 2、
```
viem
```
>= 2、
```
@tanstack/react-query
```
>= 5
只读hooks无需API密钥，交易类hooks需要连接钱包。

bash

npm install context-markets-react context-markets wagmi viem @tanstack/react-query

Shared Foundations

共享基础

Provider Hierarchy

提供者层级

Order matters. All three are required.

tsx

import { WagmiProvider } from "wagmi"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ContextProvider } from "context-markets-react"

const queryClient = new QueryClient()

function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ContextProvider apiKey={process.env.NEXT_PUBLIC_CONTEXT_API_KEY!}>
          {children}
        </ContextProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

顺序很重要，三者都是必需的。

tsx

import { WagmiProvider } from "wagmi"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ContextProvider } from "context-markets-react"

const queryClient = new QueryClient()

function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ContextProvider apiKey={process.env.NEXT_PUBLIC_CONTEXT_API_KEY!}>
          {children}
        </ContextProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Hook Catalog

Hook目录

Markets (query):

useMarkets

useSearchMarkets

useMarket

useOrderbook

useQuotes

usePriceHistory

useMarketActivity

useSimulateTrade

useOracle

useLatestOracleQuote

Orders (query):

useOrders

useOrder

Orders (mutation):

useCreateOrder

useCreateMarketOrder

useCancelOrder

useCancelReplace

Portfolio (query):

usePortfolio

usePositions

useBalance

useClaimable

usePortfolioStats

Account (mixed):

useAccountStatus

useAccountSetup

useDeposit

useWithdraw

useApproveUsdc

useApproveOperator

Questions (mutation):

useSubmitQuestion

useSubmitAndWait

useCreateMarket

useAgentSubmit

useAgentSubmitAndWait

Utilities:

ContextProvider

useContextClient

contextKeys

ContextWalletError

市场（查询类）：

useMarkets

useSearchMarkets

useMarket

useOrderbook

useQuotes

usePriceHistory

useMarketActivity

useSimulateTrade

useOracle

useLatestOracleQuote

订单（查询类）：

useOrders

useOrder

订单（变更类）：

useCreateOrder

useCreateMarketOrder

useCancelOrder

useCancelReplace

投资组合（查询类）：

usePortfolio

usePositions

useBalance

useClaimable

usePortfolioStats

账户（混合类）：

useAccountStatus

useAccountSetup

useDeposit

useWithdraw

useApproveUsdc

useApproveOperator

问题（变更类）：

useSubmitQuestion

useSubmitAndWait

useCreateMarket

useAgentSubmit

useAgentSubmitAndWait

工具类：

ContextProvider

useContextClient

contextKeys

ContextWalletError

Query Keys

查询密钥

Use

contextKeys

for cache invalidation after mutations:

import { contextKeys } from "context-markets-react"

contextKeys.markets.list(params)
contextKeys.markets.detail(marketId)
contextKeys.markets.quotes(marketId)
contextKeys.orders.list(params)
contextKeys.portfolio.positions(address)
contextKeys.portfolio.balance(address)

使用

contextKeys

在变更操作后实现缓存失效：

import { contextKeys } from "context-markets-react"

contextKeys.markets.list(params)
contextKeys.markets.detail(marketId)
contextKeys.markets.quotes(marketId)
contextKeys.orders.list(params)
contextKeys.portfolio.positions(address)
contextKeys.portfolio.balance(address)

Available Workflows

可用工作流

Workflow	When to use
trading-app	Full trading UI with market list, orders, portfolio
market-widget	Embeddable single-market component
portfolio-dashboard	Position tracking and P&L display
account-setup-flow	Wallet connect → approve → deposit → ready

工作流	使用场景
trading-app	包含市场列表、订单、投资组合的完整交易UI
market-widget	可嵌入的单市场组件
portfolio-dashboard	仓位追踪与盈亏展示
account-setup-flow	钱包连接 → 授权 → 存款 → 准备就绪

References

参考资料

React Hooks API — Full hook signatures and return types
Provider Setup — ContextProvider, wagmi config, chain config
Query Patterns — contextKeys, cache invalidation, polling
Wagmi Integration — Wallet connection, account setup, Base config

React Hooks API — 完整的hook签名与返回类型
Provider Setup — ContextProvider、wagmi配置、链配置
Query Patterns — contextKeys、缓存失效、轮询
Wagmi Integration — 钱包连接、账户设置、Base配置