Components

DetailRow

Stable

Key-value pair row for confirmation screens and receipts. Label on the left, value on the right, with an optional trailing action slot for icons or buttons. Use variant="brand" for highlighted values like “Recipient receives”.

Variants

Token

USDC

Status

Completed

Est. network fee

~$0.02

Recipient receives

~119.98 USDC

Confirmation card

You are withdrawing

$120.00

Token

USDC

Network

Ethereum

Destination

038123...2301

Est. network fee

~$0.02

Recipient receives

~119.98 USDC

Success confirmation

Withdraw successful

~119.98 USDC has been sent to 038123...2301 on Ethereum.

Amount sent

$120.00

Token received

USDC

Network

Ethereum

Network fee

~$0.02

Net received

~119.98 USDC

Transaction ID

0x7a8b...3f2e

Usage

import { DetailRow, TokenIcon } from "@mnee-ui/ui"<div className="flex flex-col gap-3">  <DetailRow label="Token" value="USDC" action={<TokenIcon token="USDC" size="sm" />} />  <DetailRow label="Network" value="Ethereum" action={<TokenIcon network="ethereum" size="sm" />} />  <DetailRow label="Amount" value="$120.00" />  <DetailRow label="Recipient receives" value="~119.98 USDC" variant="brand" /></div>

Backend-driven confirmation

DetailRow is purely presentational — pass any value from your API. Token icons, network icons, truncated addresses, and fee estimates all come from the backend response.

// All values come from your API — DetailRow is purely presentational.const { data: tx } = useSWR(`/api/withdraw/${txId}/preview`, fetcher)<div className="rounded-xl border border-[#e5e5e5] overflow-hidden">  <div className="bg-[#f5f5f5] pt-3 px-4 pb-4">    <p className="text-sm text-muted">You are withdrawing</p>    <p className="text-2xl font-semibold text-gray-900">      ${tx.amountUsd.toLocaleString("en-US", { minimumFractionDigits: 2 })}    </p>  </div>  <div className="flex flex-col gap-3 p-4">    <DetailRow      label="Token"      value={tx.token}      action={<TokenIcon token={tx.token} size="sm" />}    />    <DetailRow      label="Network"      value={tx.networkName}      action={<TokenIcon network={tx.network} size="sm" />}    />    <DetailRow      label="Destination"      value={<span className="font-mono">{truncateAddress(tx.address)}</span>}    />    <div className="border-t border-[#e5e5e5]" />    <DetailRow label="Est. network fee" value={`~$${tx.fee}`} />    <DetailRow      label="Recipient receives"      value={`~${tx.recipientAmount} ${tx.token}`}      variant="brand"    />  </div></div>

Props

Prop	Type	Default	Description
label	string	—	Left-side label text (omit for loading)
value	React.ReactNode	—	Right-side value (omit for loading)
action	React.ReactNode	—	Optional trailing slot (icon, copy button, token badge)
variant	"default" \| "success" \| "muted" \| "brand" \| "loading"	"default"	Value color variant; loading renders skeleton pills
className	string	—	Additional container classes