Menu
Scaffold a full prediction market trading UI with market list, orders, and portfolio
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create, cancel, or manage multiple orders in a single batch
Place and manage prediction market orders on Context Markets
Build an embeddable single-market prediction widget with buy/sell buttons
Build a portfolio dashboard showing positions, P&L, balances, and claimable winnings
Build prediction market frontends with the Context React SDK
Find interesting prediction markets by volume, trend, liquidity, or topic
| name | context-build-trading-app |
| description | Scaffold a full prediction market trading UI with market list, orders, and portfolio |
Build a full trading application: browse markets, view details, place orders, and manage a portfolio.
The user wants to build a complete trading frontend with market browsing, order placement, and portfolio management.
Set up providers — wrap the app with WagmiProvider > QueryClientProvider > ContextProvider. See the provider setup in the build SKILL.md.
Market list page — use useMarkets({ status: "active", sortBy: "trending" }) to render a filterable list. Add search with useSearchMarkets.
Market detail view — on market select:
useMarket(marketId) for title, description, statususeQuotes(marketId) for current prices (consider refetchInterval: 5000 for live updates)useOrderbook(marketId) for bid/ask depthuseOracle(marketId) for oracle evidence and summaryuseLatestOracleQuote(marketId) for the latest numeric oracle quoteOrder form — place trades:
useSimulateTrade(marketId, { side, amount, amountType: "usd" }) for preview as user adjusts sizeuseCreateOrder() for limit orders: mutate({ marketId, outcome: "yes", side: "buy", priceCents: 45, size: 10 })useCreateMarketOrder() for instant executioncontextKeys.orders.list() and contextKeys.portfolio.positions() on successOrder management — show open orders and allow cancellation:
useOrders({ marketId }) to listuseCancelOrder() to cancel by noncePortfolio view — usePortfolio() for positions, useBalance() for funds, usePortfolioStats() for P&L.
WagmiProvider must be outermost, then QueryClientProvider, then ContextProvider. Wrong order = hooks fail silently.useCreateOrder, useCancelOrder, etc. require an active wallet connection. Check useAccount() from wagmi first.queryClient.invalidateQueries() with contextKeys.ContextProvider requires apiKey prop. Even for read-only hooks, the provider needs an API key to authenticate requests.enabled option to prevent premature queries. Don't fetch orderbook data until the user selects a market: useOrderbook(marketId, {}, { enabled: !!marketId }).