Skip to main content

​
React SDK

context-markets-react · v0.1.0 · React 18+ · TanStack Query 5+ · wagmi 2+ Declarative React hooks for Context Markets. Built on context-markets and TanStack Query, with automatic wallet integration through wagmi.

​
Install

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

​
Quick start

​
Provider setup

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

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ContextProvider apiKey="your-api-key" chain="mainnet">
          <YourApp />
        </ContextProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
The chain prop accepts a ChainOption value (re-exported from context-markets-react) and defaults to "mainnet" (Base). For testnet usage, see the Testnet guide.

​
Using hooks

import { useMarkets, useQuotes } from 'context-markets-react'

function MarketList() {
  const { data: markets, isLoading } = useMarkets({ status: 'active' })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {markets?.data.map(market => (
        <li key={market.id}>{market.question}</li>
      ))}
    </ul>
  )
}

​
Hooks

​
Market hooks

HookTypeDescription
useMarketsQueryList and filter markets
useMarketQueryGet a single market by ID
useOrderbookQueryLive orderbook for a market
useQuotesQueryCurrent bid/ask/last prices
usePriceHistoryQueryHistorical price data
useMarketActivityQueryMarket event feed
useSimulateTradeQueryPreview trade execution
useOracleQueryOracle resolution data
useSearchMarketsQuerySearch markets by keyword
useLatestOracleQuoteQueryLatest oracle quote for a market

​
Market creation hooks

HookTypeDescription
useAgentSubmitMutationSubmit a market draft via agent endpoint
useAgentSubmitAndWaitMutationSubmit and poll until market is created

​
Order hooks

HookTypeDescription
useOrdersQueryList orders with filters
useMyOrdersQueryYour open orders
useCreateOrderMutationPlace a limit order
useMarketOrderMutationPlace a market order
useCancelOrderMutationCancel an order
useCancelReplaceOrderMutationCancel and replace an order

​
Portfolio hooks

HookTypeDescription
usePositionsQueryView positions across markets
useBalanceQueryUSDC balance (wallet + settlement)
useClaimableQueryWinnings from resolved markets
usePortfolioStatsQueryPortfolio value and PnL

​
Account hooks

HookTypeDescription
useAccountStatusQueryAccount approvals and balances
useAccountSetupMutationApprove contracts (chain-aware)
useDepositMutationDeposit USDC (chain-aware)
useWithdrawMutationWithdraw USDC
useApproveUsdcMutationApprove USDC spending
useApproveOperatorMutationApprove operator

​
Query keys

Use contextKeys for manual cache invalidation: 
import { contextKeys } from 'context-markets-react'
import { useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// Invalidate all market data
queryClient.invalidateQueries({ queryKey: contextKeys.markets.all })

// Invalidate a specific market
queryClient.invalidateQueries({ queryKey: contextKeys.markets.detail(marketId) })

Best practices

Query patterns, cache invalidation, wallet connection

Hooks reference

Complete hook signatures and parameters