Components

ConfirmCard

Stable

Pre-send confirmation card. Shows the transaction summary with a header (label + amount) and a list of DetailRow entries. Supports a loading state with an animated skeleton while fee estimates are being fetched.

Default

You're withdrawing

$120.00

Token

USDC

Network

Ethereum

Destination

038123...2301

Est. network fee

~$0.02

Recipient receives

~119.98 USDC

Loading

Usage

import { ConfirmCard } from "@mnee-ui/ui"// Fetch preview from API, show skeleton while loadingconst { data, isLoading } = useSWR(`/api/withdraw/${id}/preview`, fetcher)<ConfirmCard  subtitle="You're withdrawing"  amount={data?.amountUsd ?? "$0.00"}  state={isLoading ? "loading" : "default"}  rows={[    { label: "Token",       value: data?.token,    action: <TokenIcon token={data?.token} size="sm" /> },    { label: "Network",     value: data?.network,  action: <TokenIcon network={data?.networkId} size="sm" /> },    { label: "Destination", value: data?.address },  ]}  belowDivider={[    { label: "Est. network fee",   value: `~$${data?.fee}` },    { label: "Recipient receives", value: `~${data?.receiveAmount} ${data?.token}`, variant: "brand" },  ]}/>

Props

Prop	Type	Default	Description
subtitle	string	"You're withdrawing"	Label above the amount
amount	string	—	Large amount displayed in the header
rows	ConfirmCardRow[]	—	Rows above the divider
belowDivider	ConfirmCardRow[]	—	Rows below the divider (fees, totals)
state	"default" \| "loading"	"default"	Loading shows animated skeleton rows
skeletonRowCount	number	5	Number of skeleton rows in loading state
className	string	—	Additional container classes

ConfirmCardRow

Field	Type	Description
label	string	Row label text
value	React.ReactNode	Row value (string, JSX, monospace address)
action	React.ReactNode	Trailing icon (TokenIcon, copy button, etc.)
variant	"default" \| "success" \| "muted" \| "brand"	Value color variant