Visual reference for all
@pmxt/componentsUI elements.Screenshots captured from Storybook stories using Playwright.
Wallet-aware header button that shows a "Log In" prompt when disconnected, or a deposit button, live cash balance, and avatar dropdown when connected. The dropdown includes portfolio value, P&L summary, deposit/withdraw actions, and a log-out option. Hovering the balance reveals a detailed portfolio breakdown tooltip.
Props:
| Prop | Type | Description |
|---|---|---|
portfolio |
PortfolioSummary | null |
User's portfolio data (cash, positions, P&L). Pass null when not loaded. |
portfolioHref |
string |
Link target for the "Portfolio" menu item. Defaults to "/portfolio". |
onFundsSuccess |
() => void |
Callback fired after a successful deposit or withdrawal. |
Compact status indicator with a colored dot and text label. Designed for dark-themed trading terminal UIs. The dot pulses when in the connected state.
Props:
| Prop | Type | Description |
|---|---|---|
state |
"connected" | "connecting" | "disconnected" |
Current connection state. Controls dot color and label text. |
Numbered list of trending or featured items for sidebar navigation. Each row displays a title, subtitle, probability, and trend indicator. Clicking a row navigates to the event detail page.
Props:
| Prop | Type | Description |
|---|---|---|
title |
string |
Section heading displayed above the list. |
items |
SidebarSectionItem[] |
Array of items to render. Each item has id, title, subtitle, probability, trend, isUp, and eventSlug. |
className |
string |
Optional CSS class for the wrapper element. |
Horizontal banner cards for sidebar promotions or featured categories. Each banner shows a title, subtitle, and thumbnail image.
Props:
| Prop | Type | Description |
|---|---|---|
banners |
SidebarBanner[] |
Array of banner objects with title, subtitle, and image URL. |
Card displaying a prediction market event with its category, title, top outcomes (with colored probability bars), 24h volume, and change indicator. Clicking the card navigates to the event detail page. The number of visible outcomes auto-sizes based on total count unless overridden.
Props:
| Prop | Type | Description |
|---|---|---|
event |
CatalogEvent |
Full event object including nested markets and outcomes. |
maxOutcomes |
number |
Max outcome rows to show. Defaults to automatic sizing (2-4 rows). |
Card for a single market within an event. Shows category, question, top two outcomes with probability bars, total volume, and outcome count. Clicking navigates to the parent event page.
Props:
| Prop | Type | Description |
|---|---|---|
market |
CatalogMarketCard |
Market object with question, outcomes, volume, category, and event context. |
Table-style row for market listings. Displays rank, market name with lead outcome, probability, 24h/7d change, volume, liquidity, and an inline sparkline chart. Uses a fixed 8-column CSS grid layout.
Props:
| Prop | Type | Description |
|---|---|---|
market |
CatalogMarketCard |
Market data including outcomes, volume, and liquidity. |
rank |
number |
Display rank number shown in the leftmost column. |
accent |
string |
Accent color (currently unused in the template but available for theming). |
fetchSparklineData |
(outcomePmxtId: string) => Promise<{ p: number }[]> |
Optional async loader for sparkline price history. |
Sortable data table of events. Renders a header row with sortable columns (Price, 24h, 7d, Volume, Liquidity) and expandable event rows. Expanding a row reveals all non-complement outcomes across the event's markets. Each row includes a sparkline chart.
Props:
| Prop | Type | Description |
|---|---|---|
events |
CatalogEvent[] |
Array of events to display as rows. |
onNavigate |
(path: string) => void |
Navigation handler called when a row is clicked. Receives the full path (e.g. "/event/slug"). |
fetchSparklineData |
(outcomePmxtId: string) => Promise<{ p: number }[]> |
Optional async loader for per-outcome sparkline data. |
Hero-sized carousel for featured events. Shows the event title, category, up to four outcomes with probability sliders, and a multi-series LightweightChart with a color-coded legend. Includes prev/next navigation, dot indicators, and download/share actions. Clicking the card (outside interactive elements) navigates to the event.
Props:
| Prop | Type | Description |
|---|---|---|
events |
CatalogEvent[] |
Array of featured events to cycle through. |
priceHistories |
ReadonlyMap<string, PricePoint[]> |
Map of outcome pmxtId to price history arrays for chart rendering. |
Wrapper around OrderDrawer that resolves the correct token ID and share holdings from portfolio data based on the selected side (Yes/No). Prevents callers from duplicating the side-switching logic.
Props:
| Prop | Type | Description |
|---|---|---|
outcomeName |
string |
Display name of the outcome being traded. |
outcomeColor |
string |
Accent color for the outcome. |
currentPrice |
number |
Current probability as a 0-100 integer. |
yesTokenId |
string | null |
Token ID for the Yes side. |
noTokenId |
string | null |
Token ID for the No side. |
portfolio |
PortfolioSummary | null |
User's portfolio for balance and position lookups. |
initialSide |
"yes" | "no" |
Which side to pre-select. Defaults to "yes". |
onClose |
() => void |
Callback to close the panel. |
onSideChange |
(side: "yes" | "no") => void |
Called when the user switches sides. |
Self-contained embeddable trading widget. Displays category tabs, an animated probability chart, Yes/No buy buttons with live prices, and an inline OrderDrawer that slides in when a side is selected. Designed for iframe-like embedding scenarios.
Props:
| Prop | Type | Description |
|---|---|---|
eventsByCategory |
ReadonlyMap<string, { event, priceHistory? }> |
Map of category label to event data and optional price history. |
initialCategory |
string |
Category tab to select on mount. Defaults to the first key. |
cashBalance |
number |
User's available cash balance for order validation. |
holdings |
ReadonlyMap<string, number> |
Map of token ID to share count for position display. |
Full order lifecycle component: input (amount, buy/sell toggle, quick-amount pills), confirmation summary, wallet signing flow, settling spinner, and executed state with confetti animation. Handles the complete build-sign-submit flow via @pmxt/sdk with client-side wallet signing through wagmi.
Props:
| Prop | Type | Description |
|---|---|---|
outcomeName |
string |
Name of the outcome being traded. |
outcomeColor |
string |
Accent color used for buttons and highlights. |
currentPrice |
number |
Current probability (0-100). |
side |
"yes" | "no" |
Currently selected side. |
tokenId |
string |
Token ID for the selected side. |
holdings |
number |
Number of shares the user holds for this token. |
cashBalance |
number |
User's available cash balance. |
onClose |
() => void |
Callback to close the drawer. |
onSideChange |
(side: "yes" | "no") => void |
Called when the user toggles between Yes and No. |
Full-screen modal for depositing or withdrawing funds. Features a deposit/withdraw tab toggle, large amount input with quick-amount pills, balance display, and a multi-stage flow (input, wallet signing, broadcasting, success, error). Transactions are built server-side via @pmxt/sdk and signed client-side through wagmi.
Props:
| Prop | Type | Description |
|---|---|---|
initialMode |
"deposit" | "withdraw" |
Which tab to show on open. |
cashBalance |
number |
User's current cash balance (shown and used for withdraw validation). |
onClose |
() => void |
Callback to dismiss the modal. |
onSuccess |
() => void |
Callback fired after a transaction is confirmed on-chain. |
Thin horizontal progress bar representing an outcome's probability. Uses the primary color for the first outcome and secondary for subsequent ones. Accepts probability as a number or percentage string.
Props:
| Prop | Type | Description |
|---|---|---|
probability |
string | number |
Probability value. Accepts 75, "75%", etc. Clamped to 0-100. |
index |
number |
Outcome index. 0 uses the primary color; all others use secondary. |
className |
string |
Optional wrapper class. |
barClassName |
string |
Optional class applied to the bar element itself. |
Interactive row for a single outcome on an event detail page. Shows the outcome name, probability, and Buy Yes / Buy No buttons. When selected, expands to reveal an inline price chart with time-range controls.
Props:
| Prop | Type | Description |
|---|---|---|
id |
string |
Unique outcome identifier. |
name |
string |
Outcome display name. |
probability |
number |
Current probability (0-100). |
buyYes |
string |
Display label for the Yes button (e.g. "54c"). |
buyNo |
string |
Display label for the No button (e.g. "46c"). |
color |
string |
Accent color for the chart line. |
isSelected |
boolean |
Whether the row is currently expanded. |
imageUrl |
string | null |
Optional thumbnail for the outcome. |
chartData |
ChartDataPoint[] |
Price history data shown when the row is expanded. |
onSelect |
(id: string) => void |
Called when the row is clicked. |
onBuyYes |
(id: string) => void |
Called when the Buy Yes button is clicked. |
onBuyNo |
(id: string) => void |
Called when the Buy No button is clicked. |
Compact sidebar item for outcome selection and chart visibility toggling. Shows a color dot, outcome name, optional subtitle or share count, and probability. Supports a compact mode for dense layouts and an eye icon to toggle chart series visibility.
Props:
| Prop | Type | Description |
|---|---|---|
id |
string |
Unique outcome identifier. |
name |
string |
Outcome display name. |
subtitle |
string |
Secondary text shown below the name (hidden in compact mode). |
probability |
number |
Current probability (0-100). |
color |
string |
Dot and probability text color. |
isSelected |
boolean |
Whether this item is actively selected. |
isVisible |
boolean |
Whether the outcome is visible on the chart. Defaults to true. |
compact |
boolean |
Enables smaller sizing for dense layouts. Defaults to false. |
positionShares |
number |
If set and > 0, replaces the subtitle with a share count display. |
onSelect |
(id: string) => void |
Called when the item is clicked. |
onToggleVisible |
(id: string) => void |
Called when the eye icon is clicked. Omit to hide the toggle. |
Multi-series line chart powered by TradingView's lightweight-charts library. Renders one or more time series with configurable colors, optional series markers (arrows, circles), a crosshair tooltip with per-series labels, and automatic label spacing to avoid overlaps. Exposes a ref handle for screenshot capture.
Props:
| Prop | Type | Description |
|---|---|---|
data |
ChartDataPoint[][] |
Array of series data. Each inner array is { time, value } points. |
colors |
string[] |
Line colors per series. Cycles if fewer colors than series. |
labels |
string[] |
Names per series, shown in the crosshair tooltip. |
autoScale |
boolean |
Whether to fit all data into view on mount. Defaults to true. |
markers |
ChartSeriesMarker[][] |
Optional markers per series (arrows, dots at specific timestamps). |
Ref handle (LightweightChartHandle):
| Method | Returns | Description |
|---|---|---|
takeScreenshot() |
HTMLCanvasElement | null |
Captures the current chart as a canvas element for download. |
Lightweight SVG sparkline chart for inline use in tables and lists. Renders a simple polyline from price history data. Supports synchronous data via data or lazy loading via onLoadData. Shows a flat gray line when no data is available.
Props:
| Prop | Type | Description |
|---|---|---|
width |
number |
SVG width in pixels. Defaults to 120. |
height |
number |
SVG height in pixels. Defaults to 40. |
positive |
boolean |
Trend direction. true renders green; false renders red. |
data |
{ p: number }[] |
Synchronous price history (probability 0-1). |
onLoadData |
() => Promise<{ p: number }[]> |
Async loader called once on mount. Used when data is fetched per-row. |
Pair of action buttons for chart interactions: share (copies current URL to clipboard with a "Link copied!" tooltip) and download (triggers a chart screenshot export). Available in ghost and subtle visual variants.
Props:
| Prop | Type | Description |
|---|---|---|
onDownload |
(e: React.MouseEvent) => void |
Handler for the download button click. |
variant |
"ghost" | "subtle" |
Visual style. ghost is minimal; subtle has a light background. Defaults to "ghost". |
className |
string |
Optional wrapper class. |