Build HIP-4 Apps with Open-Source React Components

The short answer

@purrdict/hip4-ui is an MIT-licensed, shadcn-compatible source registry for building HIP-4 prediction-market interfaces in React. The public registry currently contains 24 registry entries: 11 UI components, 11 hooks, one formatting library, and one quickstart example.

You can inspect the machine-readable registry index, install the complete quickstart, or copy only the source files your application needs. Because shadcn installs source into your project, the components remain editable rather than becoming a sealed dependency.

Install the HIP-4 quickstart

In a React project configured for shadcn/ui, install the complete example with:

npx shadcn@latest add https://ui.purrdict.xyz/r/hip4-quickstart.json

Install individual entries when you want a smaller starting point:

npx shadcn@latest add https://ui.purrdict.xyz/r/market-card.json
npx shadcn@latest add https://ui.purrdict.xyz/r/orderbook.json
npx shadcn@latest add https://ui.purrdict.xyz/r/trade-form.json
npx shadcn@latest add https://ui.purrdict.xyz/r/rounds-timeline.json

The registry files land in your application and can be restyled, extended, or reduced to fit your own market model.

What is in the public registry?

The 11 UI components cover market discovery, trading, positions, and recurring rounds:

MarketCard presents a market, outcome probability, expiry, and volume.
LivePriceChart plots the current underlying price and an optional target level.
ProbabilityChart displays outcome-price history for multi-outcome markets.
Orderbook renders live bid and ask levels.
RecentTrades shows the latest fills for a selected outcome token.
TradeForm prepares buy and sell orders with price and size controls.
MarketStats presents summary market metrics.
ProbabilityBar visualizes a binary probability split.
Countdown displays time remaining before a round or market expiry.
PositionCard presents a wallet’s outcome-token position.
RoundsTimeline shows the sequence and status of recurring market rounds.

The 11 hooks provide the integration layer:

HIP4Provider and useHIP4Client configure the Hyperliquid information and subscription clients.
useHIP4Signer connects wallet signing to supported order actions.
useMarkets discovers HIP-4 markets and tracks current mids.
useOrderbook subscribes to Level 2 book data.
usePortfolio loads outcome positions, balances, and open orders.
useTrade prepares order and cancellation actions.
useMinShares calculates the minimum valid share quantity from current pricing.
useRecentTrades subscribes to fills.
useUnderlyingPrice tracks the current underlying mark price.
useProbabilityHistory builds local outcome-price history from observed updates.

The remaining entries are hip4-format, a set of display-formatting helpers, and hip4-quickstart, a working integration example.

How the components fit together

Each data-aware component has a clear hook boundary:

MarketCard        <- useMarkets
LivePriceChart    <- useUnderlyingPrice
ProbabilityChart <- useProbabilityHistory
Orderbook         <- useOrderbook
TradeForm         <- useOrderbook + useTrade + useMinShares
RecentTrades      <- useRecentTrades
PositionCard      <- usePortfolio
RoundsTimeline    <- market round metadata

Presentation components such as ProbabilityBar, MarketStats, and Countdown take ordinary props. That separation makes it possible to retain the UI while replacing the data source, or to keep the hooks while designing a different interface.

Network and asset status

Curated HIP-4 outcome markets are available on Hyperliquid mainnet. The current mainnet quote and settlement asset is USDC. Some historical testnet code and field names may still refer to USDH; treat that as legacy testnet terminology rather than the current mainnet asset.

Purrdict’s permissionless market Launchpad is a separate product surface currently running on Hyperliquid Testnet. Builders should distinguish the network used by their selected market from the network shown in examples, and should verify current metadata before constructing an order.

Use the SDK for protocol rules

The components work with @purrdict/hip4, a small HIP-4 knowledge layer for market discovery, coin mapping, price constraints, and order construction. Keeping protocol rules outside presentation components reduces duplicated logic and makes those rules easier to test.

Typical helpers include:

import {
  discoverMarkets,
  getMinShares,
  getTickSize,
  roundToTick,
  createOrderRequest,
} from "@purrdict/hip4";

The SDK does not replace Hyperliquid’s client. Applications still use the Hyperliquid information, subscription, and exchange APIs for live data and signed actions.

Build a market screen

A practical integration has four parts:

Wrap the application in HIP4Provider for the intended network.
Discover markets with useMarkets and let the user select an outcome token.
Subscribe to its book with useOrderbook and render the Orderbook and TradeForm.
Connect a wallet signer before enabling order submission.

import { HIP4Provider } from "@/hooks/hip4/hip4-provider";

export function App() {
  return (
    <HIP4Provider testnet={false}>
      <MarketWorkspace />
    </HIP4Provider>
  );
}

Network selection is a product decision, not a cosmetic flag. Keep mainnet and testnet configuration explicit, display it to users, and do not reuse testnet assumptions for current mainnet assets or market identifiers.

Why source ownership matters

Prediction-market interfaces need product-specific choices: which outcome to emphasize, how to explain resolution, what signing context to show, and how much order-book detail to expose. A source registry provides a tested starting point without forcing every product into one package-level API or visual system.

After installation, review the copied code as part of your own application. In particular:

verify network and market identifiers;
preserve price and minimum-size validation;
show users what they are signing;
handle subscription reconnects and stale data;
test empty, loading, error, and disconnected-wallet states;
confirm current asset and fee metadata from authoritative sources.

Browse, audit, and contribute

Browse the rendered registry at ui.purrdict.xyz.
Audit all entries in the public registry index.
Read and contribute to github.com/purrdict/hip4-ui.
Use @purrdict/hip4 for HIP-4 domain helpers.
Read the current HIP-4 guide before shipping network-specific behavior.

The quickest route is the quickstart bundle; the safest route to production is to understand, test, and own every copied file.