Swap Quote
One card carries a swap from first request to settlement: shimmer while quoting, a locked rate with a countdown ring, an amber expiring ring, a muted expired state with requote, executing progress, the kelp check-draw on success with the aurum halo, and a danger retry on failure.
Lifecycle — all seven statuses
Every status of the state machine, simultaneously. The border is the tell: warning at expiring, danger at failed, accent with shadow-beacon at success, quiet line everywhere else.
<SwapQuoteCard from={{ symbol: "BTC", amount: "0.05000000" }} to={{ symbol: "XMR", amount: "…" }} rate="…" status="quoting" />--ch-bg-raised--ch-surface--ch-border
Fetching from Meridian — amounts and rate shimmer; the amount typed by the user is already committed.
<SwapQuoteCard … status="quoted" countdownSec={118} countdownMaxSec={120} />--ch-fg-muted--ch-border--ch-font-family-mono
Rate locked for 120 seconds — the muted ring counts down from 118s without alarm.
<SwapQuoteCard … status="expiring" countdownSec={9} countdownMaxSec={30} />--ch-warning--ch-border
9 seconds left — the ring and border turn warning. Act or requote.
<SwapQuoteCard … status="expired" onRequote={requote} />--ch-fg-muted--ch-surface--ch-border
Amounts dim to half opacity; the only action left is Get new quote.
<SwapQuoteCard … status="executing" />--ch-primary--ch-surface--ch-border
10 XMR → BTC via Northlane — indeterminate progress; the card is no longer cancelable.
<SwapQuoteCard … status="success" />--ch-accent--ch-accent-muted--ch-success--ch-shadow-beacon
Settled — kelp check draws itself, SWAP COMPLETE in aurum, shadow-beacon on the card.
<SwapQuoteCard … status="failed" onRetry={retry} />--ch-danger--ch-danger-muted--ch-border
Provider could not fill the order before the rate lock lapsed. Funds returned in full.
Across themes
The success state under dark, light, and Harbor Mode — in Harbor Mode the accent re-points to the beacon aurum, so a settled swap literally glows brighter on your own node.
<SwapQuoteCard from={{ symbol: "BTC", amount: "0.01000000" }} to={{ symbol: "DBL", amount: "409.33000000" }} rate="1 BTC = 40,933.1 DBL" status="success" />--ch-accent--ch-accent-muted--ch-shadow-beacon--ch-success