18:I[55681,["/_next/static/immutable/chunks/1q7k1nvjizi_i.js","/_next/static/immutable/chunks/0sgmws27aoy08.js","/_next/static/immutable/chunks/3p0fmpe2k-4lb.js","/_next/static/immutable/chunks/0l80r5okuahqf.js","/_next/static/immutable/chunks/3c32zafrm890c.js","/_next/static/immutable/chunks/0momrsrgy-ew6.js"],"default"] 19:T807e,"use client"; import { useEffect, useId, useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNode } from "react"; import { AnimatePresence, LayoutGroup, motion, useAnimate, useMotionTemplate, useMotionValue, useReducedMotion, type Transition, type Variants, } from "motion/react"; import "./swap-card.css"; /** * Swap Card — a token swap card where every number moves. * * Swap, Buy and Stake share one card; the tab pill slides between them. Type * an amount and the quote rolls in an odometer, a digit at a time; flip the * pair and the two token pills glide past each other to trade panels while the * arrow turns. The token list opens out of its pill through a blur, the rate * line rolls over when the pair changes, and the details drawer unfolds on the * same spring as everything else. The button is liquid: light pools drift * across it, it ripples where it is pressed, shakes "no" when it cannot swap, * sweeps while the swap is in flight and throws a ring of specks when it lands. */ export type SwapCardToken = { symbol: string; name: string; /** USD price, used to quote every pair. */ price: number; /** 24h change, shown beside the dollar value. */ change: number; /** The coin mark's colour. */ color: string; }; export type SwapCardProps = { theme?: "light" | "dark"; /** Fired when a swap, buy or stake lands. */ onSwap?: (trade: { mode: "Swap" | "Buy" | "Stake"; pay: string; receive: string; amount: number; received: number }) => void; }; type Mode = "Swap" | "Buy" | "Stake"; type Side = "pay" | "receive"; type Status = "idle" | "pending" | "done"; /* one spring drives every morph so all the pieces land together, plus a short eased fade */ const morph: Transition = { type: "spring", visualDuration: 0.42, bounce: 0.16 }; const fade = (delay = 0): Transition => ({ duration: 0.22, ease: [0.25, 0.1, 0.25, 1], delay }); export const SWAP_CARD_TOKENS: SwapCardToken[] = [ { symbol: "USDT", name: "Tether USD", price: 1, change: -0.45, color: "#26a17b" }, { symbol: "ETH", name: "Ethereum", price: 3260.2, change: -0.45, color: "#627eea" }, { symbol: "USDC", name: "USD Coin", price: 1, change: 0.01, color: "#2775ca" }, { symbol: "BTC", name: "Bitcoin", price: 67420, change: 1.12, color: "#f7931a" }, { symbol: "DAI", name: "Dai", price: 1, change: -0.02, color: "#f5ac37" }, { symbol: "USD", name: "US Dollar", price: 1, change: 0, color: "#1f9d55" }, { symbol: "stETH", name: "Lido Staked ETH", price: 3255.4, change: -0.51, color: "#00a3ff" }, ]; const tokens = SWAP_CARD_TOKENS; const bySymbol = (symbol: string) => tokens.find((t) => t.symbol === symbol)!; const initialBalances: Record = { USDT: 4537.5, ETH: 0, USDC: 1250, BTC: 0, DAI: 0, USD: 10000, stETH: 0, }; const modes: Record = { Swap: { pay: "USDT", receive: "ETH", amount: "164.23", doing: "Swapping", done: "Swapped" }, Buy: { pay: "USD", receive: "ETH", amount: "250", doing: "Buying", done: "Bought" }, Stake: { pay: "ETH", receive: "stETH", amount: "", doing: "Staking", done: "Staked" }, }; /* entrance: each block rises out of a soft blur, one after another */ const stagger: Variants = { hidden: {}, shown: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } } }; const rise: Variants = { hidden: { opacity: 0, y: 16, filter: "blur(6px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { ...morph, opacity: fade(), filter: fade() } }, }; const usd = (v: number) => "$" + v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); function fmtOut(v: number) { if (v === 0) return "0"; if (v >= 1000) return v.toLocaleString("en-US", { maximumFractionDigits: 2 }); if (v >= 1) return v.toLocaleString("en-US", { maximumFractionDigits: 4 }); return v.toLocaleString("en-US", { maximumSignificantDigits: 3 }); } function fmtRate(r: number) { if (r >= 1000) return r.toLocaleString("en-US", { maximumFractionDigits: 2 }); if (r >= 1) return r.toLocaleString("en-US", { maximumFractionDigits: 4 }); return r.toLocaleString("en-US", { maximumSignificantDigits: 5 }); } function fmtBalance(v: number) { if (v === 0) return "none"; return v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: v < 1 ? 6 : 2 }); } /* a plain decimal string for the input: no grouping, no trailing zeros */ const toInput = (v: number) => (v > 0 ? String(Number(v.toFixed(8))) : ""); function sanitize(raw: string) { let s = raw.replace(",", ".").replace(/[^\d.]/g, ""); const dot = s.indexOf("."); if (dot !== -1) s = s.slice(0, dot + 1) + s.slice(dot + 1).replace(/\./g, "").slice(0, 8); if (s.startsWith(".")) s = "0" + s; return s.replace(/^0+(?=\d)/, ""); } const amountSize = (text: string) => (text.length <= 7 ? 38 : text.length <= 9 ? 32 : text.length <= 11 ? 27 : 22); export default function SwapCard({ theme = "light", onSwap }: SwapCardProps) { const [mode, setMode] = useState("Swap"); const [pay, setPay] = useState(modes.Swap.pay); const [receive, setReceive] = useState(modes.Swap.receive); const [amount, setAmount] = useState(modes.Swap.amount); const [balances, setBalances] = useState(initialBalances); const [flips, setFlips] = useState(0); const [picker, setPicker] = useState(null); const [details, setDetails] = useState(false); const [status, setStatus] = useState("idle"); const timers = useRef([]); /* its own layout group, so two cards on a page never trade pills */ const group = useId(); /* flipping back and forth restores the typed amount instead of compounding rounding */ const lastFlip = useRef<{ shown: string; typed: string } | null>(null); const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; }; useEffect(() => clearTimers, []); const payT = bySymbol(pay); const receiveT = bySymbol(receive); const value = parseFloat(amount) || 0; const rate = payT.price / receiveT.price; const out = value * rate; /* the opening quote shows the reference design's figures exactly; any edit switches to live quoting */ const preset = mode === "Swap" && pay === "USDT" && receive === "ETH" && amount === modes.Swap.amount; const outText = preset ? "0.0505" : fmtOut(out); const payUsd = preset ? 64.23 : value * payT.price; const receiveUsd = preset ? 64.23 : out * receiveT.price; const insufficient = value > balances[pay] + 1e-9; const ready = value > 0 && !insufficient && status === "idle"; const label = status === "pending" ? `${modes[mode].doing}…` : status === "done" ? modes[mode].done : value === 0 ? "Enter an amount" : insufficient ? `Insufficient ${pay}` : mode; const switchMode = (next: Mode) => { if (next === mode || status === "pending") return; clearTimers(); setStatus("idle"); setMode(next); setPay(modes[next].pay); setReceive(modes[next].receive); setAmount(modes[next].amount); setPicker(null); }; const flip = () => { if (status === "pending") return; setPay(receive); setReceive(pay); const next = lastFlip.current?.shown === amount ? lastFlip.current.typed : toInput(out); lastFlip.current = { shown: next, typed: amount }; setAmount(next); setFlips((n) => n + 1); setPicker(null); }; const pick = (side: Side, symbol: string) => { setPicker(null); const other = side === "pay" ? receive : pay; if (symbol === other) return flip(); if (side === "pay") setPay(symbol); else setReceive(symbol); }; const submit = () => { if (!ready) return; setStatus("pending"); timers.current.push( window.setTimeout(() => { setBalances((b) => ({ ...b, [pay]: Math.max(0, b[pay] - value), [receive]: b[receive] + out })); setStatus("done"); onSwap?.({ mode, pay, receive, amount: value, received: out }); }, 1200), window.setTimeout(() => setStatus("idle"), 2600), ); }; return (

setAmount(sanitize(e.target.value))} style={{ fontSize: amountSize(amount) }} className="pswap__amount pswap__input" /> setPicker(picker === "pay" ? null : "pay")} onClose={() => setPicker(null)} onPick={(s) => pick("pay", s)} balances={balances} />

} right={ <> You have {fmtBalance(balances[pay])} setAmount(toInput(balances[pay]))} disabled={balances[pay] === 0} className="pswap__max" > MAX } /> {/* the flip button sits on the seam between the two panels */}

{/* lucide: arrow-down-up */}

setPicker(picker === "receive" ? null : "receive")} onClose={() => setPicker(null)} onPick={(s) => pick("receive", s)} balances={balances} />

} right={ <> You have {fmtBalance(balances[receive])} } /> {details && (

{k}: {v}

)} {status === "pending" && ( /* lucide: loader-circle */ )} {status === "done" && } {label}

); } function Tabs({ mode, onChange }: { mode: Mode; onChange: (m: Mode) => void }) { return (

{(Object.keys(modes) as Mode[]).map((m) => ( onChange(m)} className="pswap__tab" > {m === mode && } {m} ))}

); } function Panel({ label, children }: { label: string; children: ReactNode }) { return (

{label}

{children}

); } function FooterRow({ left, right }: { left: ReactNode; right: ReactNode }) { return (

{left}

{right}

); } function UsdValue({ value, change }: { value: number; change: number }) { return ( ({change > 0 ? "+" : ""} {change.toFixed(2)}%) ); } function TokenSelect({ token, open, onToggle, onClose, onPick, balances, }: { token: SwapCardToken; open: boolean; onToggle: () => void; onClose: () => void; onPick: (symbol: string) => void; balances: Record; }) { const ref = useRef(null); /* open with the current token in view, even when it sits below the fold */ const centreCurrent = (list: HTMLUListElement | null) => { /* measure the

: its offset is relative to the list, the button's isn't mid-animation */ const current = list?.querySelector('[aria-selected="true"]')?.closest("li"); if (list && current) list.scrollTop = current.offsetTop - (list.clientHeight - current.offsetHeight) / 2; }; /* Escape or a press anywhere else closes the list */ useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose(); const onDown = (e: PointerEvent) => !ref.current?.contains(e.target as Node) && onClose(); window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onDown); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onDown); }; }, [open, onClose]); return (

{/* a layout id per token: when the sides flip, each pill glides to the other panel */} {open && ( )}

); } /* text that rolls up when it changes; give it a new key to trigger the roll */ function Swap({ distance, children }: { distance: number; children: ReactNode }) { return ( {children} ); } /* a short label that rolls whenever its text changes */ function Roll({ children, className = "" }: { children: string; className?: string }) { return ( {children} ); } /* an odometer: every character that changes slides out the top while its replacement rises from below; the unchanged ones stay put */ function RollingNumber({ value }: { value: string }) { const chars = value.split(""); return ( {chars.map((c, i) => ( {c} ))} ); } /* lucide: chevron-down */ function ChevronDown() { return ( ); } /* lucide: check */ function CheckIcon({ className }: { className: string }) { return ( ); } /* round coin marks, drawn inline so nothing has to load */ function TokenIcon({ token, size = 22 }: { token: SwapCardToken; size?: number }) { return ( ); } function Glyph({ symbol }: { symbol: string }) { switch (symbol) { case "USDT": return ( ); case "ETH": case "stETH": return ( ); case "BTC": return ( ₿ ); case "DAI": return ( D ); default: return ( $ ); } } /* ── the liquid button ───────────────────────────────────────────────────── */ /* soft pools of light drifting across the button, like light through water */ const blobs = [ { w: 120, h: 60, top: -16, dur: 5.5, delay: 0, color: "rgb(170 225 255 / 0.95)" }, { w: 95, h: 50, top: 8, dur: 7, delay: -2.5, color: "rgb(125 205 255 / 0.85)" }, { w: 135, h: 68, top: -6, dur: 8.5, delay: -5, color: "rgb(200 238 255 / 0.7)" }, ]; /* tiny glints that twinkle on the surface */ const sparks = Array.from({ length: 14 }, (_, i) => ({ left: (i * 37) % 100, top: 18 + ((i * 53) % 64), dur: 1.6 + (i % 5) * 0.35, delay: (i * 0.29) % 2, })); /* specks thrown out of the button when a swap lands */ const burst = Array.from({ length: 14 }, (_, i) => { const angle = (i / 14) * Math.PI * 2; const reach = 1 + (i % 3) * 0.22; return { x: Math.cos(angle) * 190 * reach, y: Math.sin(angle) * 44 * reach, size: 3 + (i % 3) }; }); type Ripple = { id: number; x: number; y: number }; /* kept light: a thin inner highlight and a short, soft drop */ const restShadow = "inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 2px rgb(10 40 160 / 0.2), 0 3px 8px -4px rgb(47 100 245 / 0.35)"; const hoverShadow = "inset 0 1px 0 rgb(255 255 255 / 0.36), inset 0 -1px 2px rgb(10 40 160 / 0.2), 0 4px 12px -5px rgb(47 100 245 / 0.45)"; function LiquidButton({ children, disabled, busy, success, onClick, }: { children: ReactNode; disabled: boolean; busy: boolean; success: boolean; onClick: () => void; }) { const reduce = useReducedMotion(); const [scope, animate] = useAnimate(); const [ripples, setRipples] = useState([]); const [hover, setHover] = useState(false); const [bursts, setBursts] = useState(0); const nextId = useRef(0); /* a soft highlight that follows the pointer across the glass */ const mx = useMotionValue(-200); const my = useMotionValue(-200); const glow = useMotionTemplate`radial-gradient(110px circle at ${mx}px ${my}px, rgb(255 255 255 / 0.28), transparent 70%)`; useEffect(() => { if (success && !reduce) setBursts((n) => n + 1); }, [success, reduce]); const interactive = !disabled && !busy; const onPointerDown = (e: ReactPointerEvent) => { if (!interactive) return; const r = e.currentTarget.getBoundingClientRect(); const id = nextId.current++; setRipples((list) => [...list, { id, x: e.clientX - r.left, y: e.clientY - r.top }]); }; const onPointerMove = (e: ReactPointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); mx.set(e.clientX - r.left); my.set(e.clientY - r.top); }; const handleClick = () => { if (busy) return; if (disabled) { /* a quick "no" shake instead of a dead click */ if (!reduce) animate(scope.current, { x: [0, -7, 7, -5, 5, -2, 0] }, { duration: 0.42, ease: "easeOut" }); return; } onClick(); }; return (

{/* success: a ring pulses out and specks fly from the centre */} {bursts > 0 && ( )} setHover(true)} onHoverEnd={() => setHover(false)} aria-disabled={disabled || busy} aria-busy={busy} animate={{ filter: disabled ? "saturate(0.25) brightness(1.08)" : "saturate(1) brightness(1)", boxShadow: hover && interactive ? hoverShadow : restShadow, }} transition={{ type: "spring", visualDuration: 0.25, bounce: 0.3 }} className="pswap__button" data-state={disabled ? "disabled" : busy ? "busy" : "ready"} style={{ boxShadow: restShadow }} > {/* the pointer-follow highlight */} {/* loading: a glossy band sweeps across while the swap is in flight */} {busy && !success && ( {/* click ripples, spreading from where the pointer landed */} {ripples.map((r) => (

); } 1a:T2c00,/* =========================================================================== Swap Card. Two panels, a flip button on the seam between them and a liquid button under them. Everything is themed through the tokens below; --pswap-page is the field the card sits on, which the flip button's ring is cut from. =========================================================================== */ .pswap { --pswap-page: #eaecef; --pswap-card: #ffffff; --pswap-ink: #1b1d22; --pswap-muted: #8a8f99; --pswap-faint: #a9adb5; --pswap-chip: #f2f3f5; --pswap-chip-hover: #e8e9ed; --pswap-accent: #2f6bff; --pswap-accent-soft: #e8f0ff; --pswap-list-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 16px 32px -12px rgb(0 0 0 / 0.25); display: flex; justify-content: center; width: 100%; color: var(--pswap-ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .pswap[data-theme="dark"] { --pswap-page: #0e0f12; --pswap-card: #17191d; --pswap-ink: #f3f4f6; --pswap-muted: #8b909a; --pswap-faint: #5f646e; --pswap-chip: #23262c; --pswap-chip-hover: #2c3037; --pswap-accent: #6b97ff; --pswap-accent-soft: rgb(107 151 255 / 0.16); --pswap-list-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 32px -12px rgb(0 0 0 / 0.6); } .pswap *, .pswap *::before, .pswap *::after { box-sizing: border-box; } .pswap button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; } .pswap :is(button, input):focus-visible { outline: 2px solid var(--pswap-accent); outline-offset: 2px; } .pswap__card { display: flex; flex-direction: column; width: 100%; max-width: 340px; } /* --- tabs ------------------------------------------------------------------- */ .pswap__tabsRow { display: flex; justify-content: center; margin-bottom: 10px; } .pswap__tabs { display: flex; gap: 4px; } .pswap .pswap__tab { position: relative; height: 28px; padding: 0 19px; border-radius: 999px; color: var(--pswap-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: color 0.2s ease; } .pswap .pswap__tab:hover, .pswap .pswap__tab[aria-selected="true"] { color: var(--pswap-ink); } .pswap__tabPill { position: absolute; inset: 0; border-radius: 999px; background: var(--pswap-card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px -2px rgb(0 0 0 / 0.06); } .pswap__tabText { position: relative; } /* --- panels ----------------------------------------------------------------- */ .pswap__slot { position: relative; z-index: 0; } /* the panel whose token list is open sits over the other one */ .pswap__slot[data-raised] { z-index: 30; } .pswap__panel { padding: 14px 16px; border-radius: 18px; background: var(--pswap-card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.03); transition: background-color 0.3s ease; } .pswap__panelLabel { margin: 0 0 12px; color: var(--pswap-muted); font-size: 13px; font-weight: 400; line-height: 1.4; } .pswap__row { display: flex; align-items: center; gap: 12px; } .pswap__amount { flex: 1 1 0; min-width: 0; font-weight: 500; line-height: 1; letter-spacing: -0.035em; transition: font-size 0.2s ease; } .pswap__input { width: 0; padding: 0; border: 0; background: transparent; color: var(--pswap-ink); font-family: inherit; caret-color: var(--pswap-accent); outline: none; } .pswap .pswap__input:focus-visible { outline: none; } .pswap__input::placeholder { color: var(--pswap-faint); opacity: 1; } .pswap__out { display: flex; align-items: center; color: var(--pswap-ink); } .pswap__out[data-empty] { color: var(--pswap-faint); } .pswap__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: var(--pswap-muted); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.4; } .pswap__footRight { display: flex; align-items: center; } .pswap__usd { display: flex; align-items: center; gap: 6px; } .pswap__faint, .pswap__have { color: var(--pswap-faint); } .pswap__have { margin-left: 4px; } .pswap .pswap__max { margin-left: 6px; padding: 3px 4px; border-radius: 4px; background: var(--pswap-accent-soft); color: var(--pswap-accent); font-size: 9px; font-weight: 500; letter-spacing: 0.025em; line-height: 1; cursor: pointer; } .pswap .pswap__max:disabled { cursor: not-allowed; opacity: 0.4; } /* --- the flip button on the seam ----------------------------------------- */ .pswap__seam { position: relative; z-index: 20; height: 6px; } .pswap .pswap__flip { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; translate: -50% -50%; border: 4px solid var(--pswap-page); border-radius: 999px; background: var(--pswap-card); color: var(--pswap-ink); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } .pswap__flipIcon { display: grid; place-items: center; } .pswap__flipIcon svg { width: 16px; height: 16px; } /* --- token picker ------------------------------------------------------------ */ .pswap__select { position: relative; flex: none; } .pswap .pswap__pill { display: flex; align-items: center; gap: 6px; height: 32px; padding: 4px 10px 4px 6px; background: var(--pswap-chip); color: var(--pswap-ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease; } .pswap .pswap__pill:hover { background: var(--pswap-chip-hover); } .pswap__pillToken { display: flex; align-items: center; gap: 8px; } .pswap__pillChevron { display: grid; color: var(--pswap-muted); } .pswap__chevron { display: block; width: 14px; height: 14px; } .pswap__coin { display: block; flex: none; } .pswap__list { position: absolute; top: 38px; right: 0; z-index: 50; width: 224px; max-height: 196px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; background: var(--pswap-card); box-shadow: var(--pswap-list-shadow); list-style: none; scrollbar-width: thin; scrollbar-color: var(--pswap-chip-hover) transparent; } .pswap__list::-webkit-scrollbar { width: 6px; } .pswap__list::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--pswap-chip-hover); } .pswap .pswap__option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 12px; text-align: left; cursor: pointer; transition: background-color 0.15s ease; } .pswap .pswap__option:hover, .pswap .pswap__option:focus-visible { background: var(--pswap-chip); outline: none; } .pswap__optionName { flex: 1; line-height: 1.25; } .pswap__optionSymbol { display: block; color: var(--pswap-ink); font-size: 13px; font-weight: 500; } .pswap__optionFull { display: block; color: var(--pswap-muted); font-size: 11px; } .pswap__optionBalance { color: var(--pswap-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .pswap__optionCheck { width: 16px; height: 16px; color: var(--pswap-accent); } /* --- rate line and details ------------------------------------------------------ */ .pswap .pswap__rate { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 6px; padding: 8px 14px; border-radius: 12px; color: var(--pswap-muted); font-size: 11px; cursor: pointer; } .pswap__rateText { position: relative; height: 14px; overflow: hidden; line-height: 14px; } .pswap__rateChevron { display: grid; place-items: center; } .pswap__rateChevron svg { transition: color 0.15s ease; } .pswap .pswap__rate:hover .pswap__rateChevron svg { color: var(--pswap-ink); } .pswap__drawer { overflow: hidden; } .pswap__details { display: grid; gap: 6px; margin: 0; padding: 2px 14px 10px; font-size: 11.5px; line-height: 1.4; } .pswap__detail { display: flex; justify-content: space-between; } .pswap__detail dt { color: var(--pswap-muted); } .pswap__detail dd { margin: 0; color: var(--pswap-ink); font-variant-numeric: tabular-nums; } /* --- rolling text --------------------------------------------------------------- */ .pswap__swap { display: block; white-space: nowrap; } .pswap__roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; } .pswap__odometer { position: relative; display: inline-flex; overflow: hidden; padding: 0.12em 0; font-variant-numeric: tabular-nums; } .pswap__digit { display: inline-block; } /* --- the liquid button -------------------------------------------------------------- */ .pswap__go { position: relative; margin-top: 2px; } .pswap__burst { position: absolute; inset: 0; pointer-events: none; } .pswap__burstRing { position: absolute; inset: 0; border: 2px solid #4d82ff; border-radius: 999px; } .pswap__burstCore { position: absolute; top: 50%; left: 50%; } .pswap__speck { position: absolute; border-radius: 999px; } .pswap .pswap__button { position: relative; display: block; width: 100%; height: 46px; overflow: hidden; border-radius: 999px; background: linear-gradient(180deg, #4d82ff 0%, #2f64f5 100%); color: #ffffff; font-size: 15px; font-weight: 400; cursor: pointer; /* the round shape holds its overflow clip through the transforms inside it */ isolation: isolate; } .pswap .pswap__button[data-state="disabled"] { cursor: not-allowed; } .pswap .pswap__button[data-state="busy"] { cursor: progress; } .pswap__water { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; } .pswap__blob { position: absolute; border-radius: 999px; filter: blur(10px); } .pswap__spark { position: absolute; width: 2px; height: 2px; border-radius: 999px; background: #ffffff; } .pswap__glow { position: absolute; inset: 0; pointer-events: none; } .pswap__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 33.333%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.38), transparent); pointer-events: none; } .pswap__ripple { position: absolute; width: 20px; height: 20px; border-radius: 999px; background: radial-gradient(closest-side, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0)); pointer-events: none; } .pswap__buttonText { position: relative; display: block; } .pswap__label { position: relative; display: flex; align-items: center; justify-content: center; height: 20px; overflow: hidden; line-height: 20px; } .pswap__labelInner { display: inline-flex; align-items: center; gap: 8px; } .pswap__spin, .pswap__done { width: 15px; height: 15px; } .pswap__spin { animation: pswap-spin 1s linear infinite; } @keyframes pswap-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pswap__spin { animation-duration: 2.4s; } } 10:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Swap Card — Pin UI\",\"description\":\"A token swap card where every number rolls and the button is liquid. Swap, Buy and Stake on one card. The quote rolls in like an odometer, flipping the pair sends the two token pills gliding past each other, and the token list opens out of its pill through a blur. The button is liquid: light drifts \",\"url\":\"https://www.pinui.xyz/components/swap-card\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Swap Card\",\"item\":\"https://www.pinui.xyz/components/swap-card\"}]}"}}]],["$","$L18",null,{"entry":{"slug":"swap-card","category":"cards","name":"Swap Card","isNew":true,"tagline":"A token swap card where every number rolls and the button is liquid.","blurb":"Swap, Buy and Stake on one card. The quote rolls in like an odometer, flipping the pair sends the two token pills gliding past each other, and the token list opens out of its pill through a blur. The button is liquid: light drifts across it, it ripples where you press, shakes when it can't swap and bursts when a swap lands.","highlights":["Odometer quotes","Pills trade panels on flip","Liquid button","Light and dark"],"clip":"/clips/loop/swap-card.mp4","poster":"/clips/loop/swap-card.jpg","hero":false,"sound":false,"zoom":1,"stage":"#eaecef","clipStage":"#eaecef","spill":true,"stageDark":"#0e0f12","usage":"import SwapCard from \"@/components/library/SwapCard\";\n\n console.log(trade)} />","props":[{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"White panels on cool grey, or graphite on near-black with a softer blue."},{"name":"onSwap","type":"(trade) => void","note":"Fired when a swap, buy or stake lands, with the mode, the pair, the amount paid and the amount received."}],"files":[{"name":"SwapCard.tsx","lang":"tsx"},{"name":"swap-card.css","lang":"css"}],"info":{"paragraphs":["Swap, Buy and Stake share one card, and the tab pill slides between them. Type an amount and the quote rolls in like an odometer — each character that changes slides out the top while its replacement rises from below. Flip the pair and the two token pills, each with its own layout id, glide past each other to trade panels while the arrow turns half a circle; flipping back restores what you typed rather than compounding the rounding.","The token list opens out of its pill through a blur with the current token centred, the rate line rolls over when the pair changes, and the details drawer unfolds on the same spring as everything else. The button is liquid: pools of light drift across it and glints twinkle on its surface, it ripples from wherever it is pressed, shakes \"no\" when there is nothing to swap, sweeps while the swap is in flight and throws a ring of specks when it lands."]},"origin":{"label":"swap-card"}},"panes":[{"name":"SwapCard.tsx","lang":"tsx","code":"$19"},{"name":"swap-card.css","lang":"css","code":"$1a"}],"registryUrl":"https://www.pinui.xyz/r/swap-card.json"}]]

Swap Card — Pin UI Component

Pay

Receive