Skip to main content
Add a read-only markets section to your site. Visitors see Outcome’s live markets and odds, filter them by category, and click through to outcome.xyz to trade.
A grid of Outcome market cards with category tabs and live probabilities

Outcome's markets by category, with live odds. Every row opens outcome.xyz in a new tab.

​
What you need

  • @outcome.xyz/hip4 1.3.0 or later.
  • A frontend that runs JavaScript. The example uses plain TypeScript and Vite.
  • Mainnet. The SDK targets testnet unless you pass { testnet: false }, and Outcome’s markets are on mainnet.
  • No API key and no backend. The data comes from Hyperliquid’s public API, called from the visitor’s browser.

​
How it works

  1. hip4.events.fetchMarkets() returns every live HIP-4 market with the coins of both sides. Show parsedName: for a template market such as template:priceTouch it’s the readable name, “BTC touches 90000 by Nov 1, 00:00 UTC”.
  2. Keep Outcome’s markets: their raw.venue is "out". Other deployers publish on Hyperliquid too, and outcome.xyz doesn’t open their markets. Skip markets that have already expired. A recurring market’s expiry is in the past, but it stays in the catalog until it settles.
  3. Show a question as one card with its options, such as a match with Arsenal, Draw and Leeds United. Show every other market as a card of its own.
  4. Price each side with hip4.client.fetchAllMids(). A side’s mid price is its implied probability. A side with no mid price yet shows a dash, not NaN%.
  5. Give each card a category, and link it to outcome.xyz.
The code for each step is in Showcase markets code.

​
Categories

outcome.xyz files every event under one category. Apply the same rules, in this order:
  • Use all as the category of an uncategorized event.
  • Add utm_source with your brand and utm_medium=referral. outcome.xyz records them on a visitor’s first visit.
  • Open links in a new tab with target="_blank" and rel="noopener".

​
Run the example

The example is in the SDK repository, in examples/web-showcase.
Open http://localhost:5173. Before you ship, replace acme-games in src/markets.ts with your brand.

​
Before you go live

  • Hyperliquid allows 1,200 request weight per minute per IP. The requests run in each visitor’s browser, so every visitor has their own budget. One refresh weighs 84, and the example refreshes once a minute. If you fetch on a server instead, cache the result, because all your traffic then shares one IP.
  • If a refresh fails, keep showing the last result.
  • Outcome isn’t available in some jurisdictions. See Risks, and promote markets only where your users can trade them.

​
Next steps