Beta
Swap Ticket
The composed trade card — an editable pay amount with Max, a flip button on the seam that really swaps the two cards, a token-select overlay that covers the whole ticket, and a CTA whose label is the validation state before it becomes a Buy / Sell toggle.
Swap Ticket
The composed trade card — an editable pay amount with Max, a flip button on the seam that really swaps the two cards, a token-select overlay that covers the whole ticket, and a CTA whose label is the validation state before it becomes a Buy / Sell toggle.
When to use it
Composed transaction forms where validation, amount entry and confirmation belong in one surface. Folding the validation message into the CTA label removes the error row that normally shifts the layout as the user types.
Install
Adds Swap Ticket and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/swap-ticket.jsonProps · SwapTicket
| Prop | Type | Default |
|---|---|---|
| title? | stringHeading above the pair. | "Trade" |
| tokens? | SwapToken[]The book the ticket can trade from — the first two are the opening pair. | TOKENS |
| paySymbol? | stringOpening pay / receive symbols (must exist in `tokens`). | — |
| receiveSymbol? | string | — |
| defaultAmount? | string | "1.2" |
| slippage? | stringRight-hand footer chip — the slippage policy in force. | "Auto · 0.5%" |
| onSubmit? | (ticket: { side: "buy" | "sell"; pay: SwapToken; receive: SwapToken; amount: number }) => | — |
Generated from the component source. Run npm run props:extract after changing a signature.