context-build

Build Skill

Build prediction market frontends using React hooks from context-markets-react.

Prerequisites

• context-markets-react and context-markets >= 0.6.0
• React 18+, wagmi >= 2, viem >= 2, @tanstack/react-query >= 5
• An API key is required for all hooks via the ContextProvider. Trading hooks additionally require wallet connection.

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

Shared Foundations

Provider Hierarchy

Order matters. All three are required.

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

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

Query Keys

Use contextKeys for cache invalidation after mutations:

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

contextKeys.markets.list(params)
contextKeys.markets.get(marketId)
contextKeys.markets.quotes(marketId)
contextKeys.markets.latestOracleQuote(marketId)
contextKeys.orders.list(address, params)
contextKeys.orders.get(address, id)
contextKeys.portfolio.get(address, params)
contextKeys.portfolio.positions(address, params)
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

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