Master the React hooks, component patterns, and visibility-aware polling techniques used to build a production trading UI on DeepBook Predict — from data fetching hooks to transaction execution and battery-friendly polling.
A Predict trading UI is powered by a small set of focused React hooks. Each hook owns one data concern: fetching markets, computing prices, finding the user's manager, or reading vault state. They compose together inside components to create a complete trading experience.
useOracles is the foundational data hook. It fetches the full oracle list from the predict-server REST API, categorizes markets by status, and re-fetches on a polling interval. The hook returns everything a market-list component needs.
useSviPricing fetches the SVI volatility surface parameters for a single oracle. It hits the /oracles/:id/svi/latest endpoint and returns the SviData needed by computeSviPrice to calculate fair value for any strike.
The TradePanel is the central trading component. It composes multiple hooks to gather all the data it needs — the user's manager, their DUSDC balance, SVI pricing data, and vault stats. Then it uses useMemo to derive the fair price and fee breakdown, keeping expensive computations cached.
When the user clicks "Mint," the TradePanel builds a transaction and submits it through the connected wallet. The @mysten/dapp-kit provides signAndExecuteTransaction, which prompts the wallet for approval and returns the transaction result.
The TradePanel has four distinct states based on the data from its hooks. Each state maps to a different UI presentation — from skeleton loaders to active trading. Matching these states correctly is essential for a polished user experience.
A trading dApp polls APIs every few seconds for live prices. But when the user switches to another browser tab, those requests keep firing — wasting bandwidth, draining battery on mobile, and hitting rate limits. The Page Visibility API solves this by letting you detect when your tab is hidden.
This custom hook wraps setInterval with visibility awareness. It pauses the interval when the tab is hidden and resumes it — with an immediate callback invocation — when the tab becomes visible again.
Here is a complete mini trading dApp skeleton showing how providers, hooks, visibility-aware polling, price display, and transaction execution compose into a cohesive application.