4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1442,"use client"; // beui.dev/components/blocks/swap import { useEffect, useMemo, useState } from "react"; import { Settings } from "lucide-react"; import { useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; import { CHAINS, TOKENS } from "./swap/data"; import { ActionButton, DestinationRow, FlipButton } from "./swap/controls"; import { Field } from "./swap/field"; import { QuoteRow } from "./swap/quote-row"; import { TokenPicker } from "./swap/token-picker"; import type { Chain, Token, TokenSide } from "./swap/types"; import { formatAmount } from "./swap/utils"; export type { Chain, Token } from "./swap/types"; export { SWAP_DRAWER_EASE } from "./swap/constants"; export interface MultiChainSwapProps { chains?: Chain[]; tokens?: Token[]; defaultFromId?: string; defaultToId?: string; className?: string; } export function MultiChainSwap({ chains = CHAINS, tokens = TOKENS, defaultFromId = "eth-eth", defaultToId = "sol-sol", className, }: MultiChainSwapProps) { const reduce = useReducedMotion(); const [fromId, setFromId] = useState(defaultFromId); const [toId, setToId] = useState(defaultToId); const [amount, setAmount] = useState("1"); const [flipRot, setFlipRot] = useState(0); const [quoting, setQuoting] = useState(false); const [picking, setPicking] = useState(null); const [showDest, setShowDest] = useState(false); const [destAddress, setDestAddress] = useState(""); const from = findToken(tokens, fromId); const to = findToken(tokens, toId); const fromChain = findChain(chains, from.chainId); const toChain = findChain(chains, to.chainId); const numericAmount = Number(amount) || 0; const quoteKey = `${numericAmount}:${fromId}:${toId}`; const rate = useMemo(() => { if (!from.usd || !to.usd) return 1; return from.usd / to.usd; }, [from.usd, to.usd]); const toAmount = numericAmount * rate; useEffect(() => { if (!quoteKey) return; if (numericAmount === 0) return; setQuoting(true); const id = setTimeout(() => setQuoting(false), 450); return () => clearTimeout(id); }, [numericAmount, quoteKey]); const flip = () => { setFlipRot((r) => r + 180); setFromId(toId); setToId(fromId); }; const pickToken = (id: string) => { if (!picking) return; if (picking === "from") { if (id === toId) setToId(fromId); setFromId(id); } else { if (id === fromId) setFromId(toId); setToId(id); } setPicking(null); }; return (

Swap

setPicking("from")} /> 0 ? formatAmount(toAmount) : ""} editable={false} quoting={quoting} onOpenPicker={() => setPicking("to")} /> { if (showDest) setDestAddress(""); setShowDest((v) => !v); }} address={destAddress} onAddress={setDestAddress} reduce={!!reduce} />

setPicking(null)} reduce={!!reduce} />

); } function findToken(tokens: Token[], id: string) { const token = tokens.find((t) => t.id === id); if (!token) throw new Error(`Unknown token id: ${id}`); return token; } function findChain(chains: Chain[], id: string) { const chain = chains.find((c) => c.id === id); if (!chain) throw new Error(`Unknown chain id: ${id}`); return chain; } 52:T1a52,"use client"; import { useEffect, useRef } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ArrowDownUp, Check, ChevronDown, Send, X } from "lucide-react"; import { SPRING_PRESS } from "@/lib/ease"; import { cn } from "@/lib/utils"; import type { Token } from "./types"; import { EASE } from "./constants"; import { isValidAddress, truncateAddress } from "./utils"; export function FlipButton({ rotation, reduce, onClick, }: { rotation: number; reduce: boolean; onClick: () => void; }) { return (

); } export function ActionButton({ from, to, amount, destAddress, }: { from: Token; to: Token; amount: number; destAddress: string; }) { const reduce = useReducedMotion(); const noAmount = amount <= 0; const overBalance = from.balance !== undefined && amount > from.balance; const validDest = destAddress && isValidAddress(destAddress); const label = noAmount ? "Enter an amount" : overBalance ? `Insufficient ${from.symbol}` : validDest ? `Swap + Send to ${truncateAddress(destAddress)}` : `Swap ${from.symbol} → ${to.symbol}`; const disabled = noAmount || overBalance; return ( {label} ); } export function DestinationRow({ show, onToggle, address, onAddress, reduce, }: { show: boolean; onToggle: () => void; address: string; onAddress: (v: string) => void; reduce: boolean; }) { const inputRef = useRef(null); const hasAddress = address.length > 0; const valid = isValidAddress(address); useEffect(() => { if (!show) return; requestAnimationFrame(() => inputRef.current?.focus({ preventScroll: true }), ); }, [show]); return (

{show ? (

onAddress(e.target.value.trim())} placeholder="0x... or name.eth" spellCheck={false} className="min-w-0 flex-1 bg-transparent font-mono text-[12px] text-foreground outline-none placeholder:text-muted-foreground/60" /> {hasAddress ? ( valid ? ( ) : ( onAddress("")} aria-label="Clear address" initial={{ opacity: 0, scale: 0.7 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.7 }} transition={{ duration: 0.14, ease: EASE }} className="shrink-0 text-muted-foreground hover:text-foreground" > ) ) : null}

) : null}

); } 53:Tdfc,import type { Chain, Token } from "./types"; export const CHAINS: Chain[] = [ { id: "eth", name: "Ethereum", tone: "bg-primary text-primary-foreground", symbol: "Ξ" }, { id: "sol", name: "Solana", tone: "bg-secondary text-secondary-foreground", symbol: "◎" }, { id: "base", name: "Base", tone: "bg-accent text-accent-foreground", symbol: "B" }, { id: "arb", name: "Arbitrum", tone: "bg-muted text-muted-foreground", symbol: "A" }, { id: "op", name: "Optimism", tone: "bg-destructive text-primary-foreground", symbol: "O" }, { id: "poly", name: "Polygon", tone: "bg-primary/80 text-primary-foreground", symbol: "P" }, { id: "bnb", name: "BNB", tone: "bg-secondary text-secondary-foreground", symbol: "B" }, { id: "avax", name: "Avalanche", tone: "bg-destructive/80 text-primary-foreground", symbol: "A" }, ]; export const TOKENS: Token[] = [ { id: "eth-eth", symbol: "ETH", name: "Ether", chainId: "eth", balance: 1.245, usd: 3142, popular: true, }, { id: "eth-weth", symbol: "WETH", name: "Wrapped Ether", chainId: "eth", balance: 0.5, usd: 3142, popular: true, }, { id: "eth-usdc", symbol: "USDC", name: "USD Coin", chainId: "eth", balance: 4521, usd: 1, popular: true, }, { id: "eth-usdt", symbol: "USDT", name: "Tether", chainId: "eth", balance: 2100, usd: 1, popular: true, }, { id: "eth-dai", symbol: "DAI", name: "Dai Stablecoin", chainId: "eth", balance: 800, usd: 1, popular: true, }, { id: "eth-wbtc", symbol: "WBTC", name: "Wrapped Bitcoin", chainId: "eth", balance: 0.04, usd: 96000, popular: true, }, { id: "eth-link", symbol: "LINK", name: "ChainLink Token", chainId: "eth", balance: 120, usd: 22, address: "0x51...86ca", trending: true, }, { id: "eth-aztec", symbol: "AZTEC", name: "AZTEC", chainId: "eth", balance: 0, address: "0xa2...62d2", trending: true, }, { id: "eth-cfg", symbol: "CFG", name: "Centrifuge", chainId: "eth", balance: 0, address: "0xcc...8a94", trending: true, }, { id: "eth-ondo", symbol: "ONDO", name: "Ondo", chainId: "eth", balance: 0, address: "0xfa...9be3", trending: true, }, { id: "sol-sol", symbol: "SOL", name: "Solana", chainId: "sol", balance: 12.4, usd: 168, }, { id: "sol-usdc", symbol: "USDC", name: "USD Coin", chainId: "sol", balance: 985.32, usd: 1, }, { id: "base-eth", symbol: "ETH", name: "Ether", chainId: "base", balance: 0.65, usd: 3142, }, { id: "base-usdc", symbol: "USDC", name: "USD Coin", chainId: "base", balance: 1200, usd: 1, }, { id: "arb-arb", symbol: "ARB", name: "Arbitrum", chainId: "arb", balance: 800, usd: 0.95, }, { id: "arb-eth", symbol: "ETH", name: "Ether", chainId: "arb", balance: 0.32, usd: 3142, }, { id: "op-op", symbol: "OP", name: "Optimism", chainId: "op", balance: 450, usd: 2.8, }, { id: "poly-matic", symbol: "MATIC", name: "Polygon", chainId: "poly", balance: 1500, usd: 0.75, }, { id: "bnb-bnb", symbol: "BNB", name: "BNB", chainId: "bnb", balance: 0, usd: 620, }, { id: "avax-avax", symbol: "AVAX", name: "Avalanche", chainId: "avax", balance: 0, usd: 38, }, ]; 54:Tfc7,"use client"; import { useId } from "react"; import { AnimatePresence, motion } from "motion/react"; import { ChevronDown, Loader2, Wallet } from "lucide-react"; import type { Chain, Token, TokenSide } from "./types"; import { TokenDot } from "./token-badges"; import { EASE } from "./constants"; import { formatAmount, sanitizeAmount } from "./utils"; export function Field({ side, token, chain, amount, onAmount, editable, quoting, onOpenPicker, }: { side: TokenSide; token: Token; chain: Chain; amount: string; onAmount?: (v: string) => void; editable: boolean; quoting: boolean; onOpenPicker: () => void; }) { const id = useId(); const usdValue = (Number(amount) || 0) * (token.usd ?? 0); return (

{side === "from" ? "You pay" : "You get"}

{editable ? ( onAmount?.(sanitizeAmount(e.target.value))} placeholder="0" className="w-full bg-transparent text-2xl font-semibold tracking-tight text-foreground tabular-nums outline-none placeholder:text-muted-foreground/60" /> ) : (

{amount || "0"} {quoting ? ( ) : null}

)}

≈ ${formatAmount(usdValue, 2)}

{token.balance ? formatAmount(token.balance) : "0.00"} · {chain.name} {side === "from" && token.balance ? ( ) : null}

); } 55:T530,import { Loader2 } from "lucide-react"; import type { Token } from "./types"; import { formatAmount } from "./utils"; export function QuoteRow({ from, to, rate, fee, slippage, eta, quoting, }: { from: Token; to: Token; rate: number; fee: number; slippage: number; eta: string; quoting: boolean; }) { return (

Rate {quoting ? ( ) : ( <> 1 {from.symbol} ≈ {formatAmount(rate)} {to.symbol} )} Network fee ${fee.toFixed(2)} Slippage {slippage.toFixed(2)}% ETA {eta}

); } 56:T20ac,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { Search, X } from "lucide-react"; import { SPRING_PANEL } from "@/lib/ease"; import { cn } from "@/lib/utils"; import { EASE } from "./constants"; import { ChainChip, TokenDot } from "./token-badges"; import type { Chain, Token, TokenSide } from "./types"; import { formatAmount } from "./utils"; export function TokenPicker({ open, side, chains, tokens, selectedId, onPick, onClose, reduce, }: { open: boolean; side: TokenSide | null; chains: Chain[]; tokens: Token[]; selectedId: string; onPick: (id: string) => void; onClose: () => void; reduce: boolean; }) { const [chainFilter, setChainFilter] = useState("all"); const [q, setQ] = useState(""); const inputRef = useRef(null); useEffect(() => { if (!open) return; setQ(""); requestAnimationFrame(() => inputRef.current?.focus({ preventScroll: true }), ); }, [open]); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); const popular = useMemo( () => tokens.filter((t) => t.popular).slice(0, 6), [tokens], ); const chainById = useMemo( () => new Map(chains.map((chain) => [chain.id, chain])), [chains], ); const filtered = useMemo(() => { const needle = q.trim().toLowerCase(); return tokens.filter((t) => { if (chainFilter !== "all" && t.chainId !== chainFilter) return false; if (!needle) return true; const chain = chains.find((c) => c.id === t.chainId); return [t.symbol, t.name, chain?.name, t.address].some((h) => h?.toLowerCase().includes(needle), ); }); }, [q, chainFilter, tokens, chains]); return ( {open ? ( <> ) : null} ); } 57:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 58:T806,import { cn } from "@/lib/utils"; import type { Chain, Token } from "./types"; export function ChainChip({ active, onClick, chain, label, }: { active: boolean; onClick: () => void; chain?: Chain; label?: string; }) { return ( ); } export function ChainDot({ chain, size = 16 }: { chain: Chain; size?: number }) { return ( {chain.symbol} ); } export function TokenDot({ token, chain, size = 28, }: { token: Token; chain: Chain; size?: number; }) { return ( {token.symbol.slice(0, 2)} {chain.symbol} ); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/swap.tsx","content":"$51","type":"registry:component","target":"@components/motion/swap.tsx"},{"path":"components/motion/swap/constants.ts","content":"// Swap-local aliases for the shared motion tokens in @/lib/ease.\nexport { EASE_OUT as EASE, EASE_DRAWER as SWAP_DRAWER_EASE } from \"@/lib/ease\";\n","type":"registry:component","target":"@components/motion/swap/constants.ts"},{"path":"components/motion/swap/controls.tsx","content":"$52","type":"registry:component","target":"@components/motion/swap/controls.tsx"},{"path":"components/motion/swap/data.ts","content":"$53","type":"registry:component","target":"@components/motion/swap/data.ts"},{"path":"components/motion/swap/field.tsx","content":"$54","type":"registry:component","target":"@components/motion/swap/field.tsx"},{"path":"components/motion/swap/quote-row.tsx","content":"$55","type":"registry:component","target":"@components/motion/swap/quote-row.tsx"},{"path":"components/motion/swap/token-picker.tsx","content":"$56","type":"registry:component","target":"@components/motion/swap/token-picker.tsx"},{"path":"components/motion/swap/types.ts","content":"export type Chain = {\n id: string;\n name: string;\n tone: string;\n symbol: string;\n};\n\nexport type Token = {\n id: string;\n symbol: string;\n name: string;\n chainId: string;\n address?: string;\n balance?: number;\n usd?: number;\n trending?: boolean;\n popular?: boolean;\n};\n\nexport type TokenSide = \"from\" | \"to\";\n","type":"registry:component","target":"@components/motion/swap/types.ts"},{"path":"components/motion/swap/utils.ts","content":"export function isValidAddress(v: string) {\n if (/^0x[0-9a-fA-F]{40}$/.test(v)) return true;\n if (/\\.(eth|sol|bnb)$/.test(v) && v.length > 5) return true;\n return false;\n}\n\nexport function truncateAddress(v: string) {\n if (v.startsWith(\"0x\") && v.length === 42) {\n return `${v.slice(0, 6)}...${v.slice(-4)}`;\n }\n return v;\n}\n\nexport function sanitizeAmount(v: string) {\n const cleaned = v.replace(/[^0-9.]/g, \"\");\n const parts = cleaned.split(\".\");\n if (parts.length <= 1) return cleaned;\n return `${parts[0]}.${parts.slice(1).join(\"\")}`;\n}\n\nexport function formatAmount(n: number, max = 6) {\n if (!Number.isFinite(n)) return \"0\";\n if (n === 0) return \"0\";\n if (n >= 1000) {\n return n.toLocaleString(undefined, { maximumFractionDigits: 2 });\n }\n return n.toLocaleString(undefined, { maximumFractionDigits: max });\n}\n","type":"registry:component","target":"@components/motion/swap/utils.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"lib/ease.ts","content":"$57","type":"registry:lib","target":"@lib/ease.ts"},{"path":"components/motion/swap/token-badges.tsx","content":"$58","type":"registry:component","target":"@components/motion/swap/token-badges.tsx"}],"className":"h-[70svh] min-h-80"}]]}]