COMPONENT trade-form
Trade Form
Complete prediction market trade form. Pass bookData={{ bids, asks }} from useOrderbook to auto-resolve mid/bid/ask. Requires sides array from market.sides (e.g. [{name: 'Yes', coin: '#9860'}]). Connect useTrade(exchange) for order submission via onSubmit. Key props: sides, bookData?, minShares? (from useMinShares), usdhBalance? (from usePortfolio), shareBalance?, isConnected?, builder? ({address, fee}), onSubmit? (TradeSubmitParams => Promise).
Install
$
npx shadcn@latest add https://ui.purrdict.xyz/r/trade-form.json Preview
Bid 64.5¢Mid 65.0¢Ask 65.5¢
AmountBalance: $1,000.00
Usage
import { TradeForm } from "@/components/hip4/trade-form"
import { useOrderbook } from "@/hooks/hip4/use-orderbook"
import { usePortfolio } from "@/hooks/hip4/use-portfolio"
import { useMinShares } from "@/hooks/hip4/use-min-shares"
function TradingPanel({ market }: { market: Market }) {
// Hooks auto-resolve client from HIP4Provider
const book = useOrderbook(undefined, market.sides[0].coin)
const { balance } = usePortfolio(undefined, address)
const { minShares } = useMinShares(undefined, market.sides[0].coin)
return (
<TradeForm
sides={market.sides}
bookData={book}
minShares={minShares}
usdhBalance={balance}
isConnected={!!signer}
onSubmit={async (params) => {
await placeOrder(params)
}}
/>
)
}Props
| Prop | Type | Description |
|---|---|---|
market | Market | Market object |
side | TradeSide | "Yes" | "No" — active trade side |
onSideChange | (side: TradeSide) => void | Called when user switches side |
currentPrice | number | Current mid price for selected side (0-1) |
minShares | number | Minimum order size |
builder | BuilderConfig | Builder fee config: { address: string, fee: number } |
usdhBalance | number | User's free USDH balance for validation |
isConnected | boolean | Whether the wallet is connected/signed in |
onTrade | (params: TradeParams) => Promise<void> | Trade execution callback |
Dependencies
npm packages
Registry components