MetaPredict: making a trade visible from quote to settlement

A trade has several moments that can look like the same wait. Getting a quote, asking for a wallet signature and settling a transaction are different jobs. People need to know which one is happening.

At MetaPredict, an on-chain prediction market, I built the trading interface and changed the execution flow behind it. The original path made a server round trip before settlement. I moved oracle quoting into the client and kept settlement signed by the user, removing one network hop.

I represented the flow as explicit states: input, quoting, signing, swapping, then done or error. Each stage gives the interface a concrete state to render instead of leaving the transaction's progress implicit.

The implementation includes configurable slippage, which lets a user set the price movement they will accept, and client-side Ed25519 signature verification for quote data. Oracle pricing refreshes every 20 seconds, with bounds on how old a quote can be. A refresh schedule and a quote's usable lifetime are separate decisions.

I built the interface in TypeScript, React and Next.js, with TanStack Query for asynchronous data. TradingView lightweight-charts handles the market charts, backed by reactive data from Convex and updates over WebSockets.

Cached history supplies the chart's initial content. Current-state reads have a limit on staleness and fetch fresh data when that limit is exceeded. Price history is sorted and deduplicated before it reaches the chart, which also supports a crosshair and formatted prices.

I added Playwright coverage for wallet and swap flows, visual regression checks, unit tests with React Testing Library and Vitest, and Sentry monitoring.

MetaPredict is live on mainnet. The concrete engineering result is a shorter execution path and an interface that represents the trade from input through settlement or failure. The interface brings the market question, countdown, price chart and wallet action into one view.

Explore MetaPredict or ask about the trade-execution decisions.

Chart hover and NO/YES round-history filtering in MetaPredict.

If customers act on changing data in your product, I can work on the interface and state handling that keep each step understandable. MetaPredict shows how I approach current prices, a transaction in progress, and the errors a user needs to recover from. Ask how that experience applies to your live interface.