@orvui/vue 0.0.0-stage → 0.1.1

package/dist/swap-BSeVL8dB.js

@@ -0,0 +1,878 @@
+import { o as e, s as t } from "./composables-BJ1sih_H.js";
+import { c as n, l as r, r as i } from "./ease-rIvCM4O3.js";
+import { t as a } from "./utils-DIrLOK2M.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createStaticVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useId as T, vModelText as E, watch as D, withCtx as O, withDirectives as k } from "vue";
+import { AnimatePresence as A, motion as j } from "motion-v";
+import { ArrowDownUp as M, Check as N, ChevronDown as P, LoaderCircle as F, Search as I, Send as L, Settings as ee, Wallet as R, X as z } from "lucide-vue-next";
+var B = [
+	[
+		"eth",
+		"Ethereum",
+		"bg-primary text-primary-foreground",
+		"Ξ"
+	],
+	[
+		"sol",
+		"Solana",
+		"bg-secondary text-secondary-foreground",
+		"◎"
+	],
+	[
+		"base",
+		"Base",
+		"bg-accent text-accent-foreground",
+		"B"
+	],
+	[
+		"arb",
+		"Arbitrum",
+		"bg-muted text-muted-foreground",
+		"A"
+	],
+	[
+		"op",
+		"Optimism",
+		"bg-destructive text-primary-foreground",
+		"O"
+	],
+	[
+		"poly",
+		"Polygon",
+		"bg-primary/80 text-primary-foreground",
+		"P"
+	],
+	[
+		"bnb",
+		"BNB",
+		"bg-secondary text-secondary-foreground",
+		"B"
+	],
+	[
+		"avax",
+		"Avalanche",
+		"bg-destructive/80 text-primary-foreground",
+		"A"
+	]
+].map(([e, t, n, r]) => ({
+	id: e,
+	name: t,
+	tone: n,
+	symbol: r
+})), V = [
+	[
+		"eth-eth",
+		"ETH",
+		"Ether",
+		"eth",
+		1.245,
+		3142
+	],
+	[
+		"eth-weth",
+		"WETH",
+		"Wrapped Ether",
+		"eth",
+		.5,
+		3142
+	],
+	[
+		"eth-usdc",
+		"USDC",
+		"USD Coin",
+		"eth",
+		4521,
+		1
+	],
+	[
+		"eth-usdt",
+		"USDT",
+		"Tether",
+		"eth",
+		2100,
+		1
+	],
+	[
+		"eth-dai",
+		"DAI",
+		"Dai Stablecoin",
+		"eth",
+		800,
+		1
+	],
+	[
+		"eth-wbtc",
+		"WBTC",
+		"Wrapped Bitcoin",
+		"eth",
+		.04,
+		96e3
+	],
+	[
+		"eth-link",
+		"LINK",
+		"ChainLink Token",
+		"eth",
+		120,
+		22,
+		"0x51...86ca"
+	],
+	[
+		"eth-aztec",
+		"AZTEC",
+		"AZTEC",
+		"eth",
+		0,
+		void 0,
+		"0xa2...62d2"
+	],
+	[
+		"eth-cfg",
+		"CFG",
+		"Centrifuge",
+		"eth",
+		0,
+		void 0,
+		"0xcc...8a94"
+	],
+	[
+		"eth-ondo",
+		"ONDO",
+		"Ondo",
+		"eth",
+		0,
+		void 0,
+		"0xfa...9be3"
+	],
+	[
+		"sol-sol",
+		"SOL",
+		"Solana",
+		"sol",
+		12.4,
+		168
+	],
+	[
+		"sol-usdc",
+		"USDC",
+		"USD Coin",
+		"sol",
+		985.32,
+		1
+	],
+	[
+		"base-eth",
+		"ETH",
+		"Ether",
+		"base",
+		.65,
+		3142
+	],
+	[
+		"base-usdc",
+		"USDC",
+		"USD Coin",
+		"base",
+		1200,
+		1
+	],
+	[
+		"arb-arb",
+		"ARB",
+		"Arbitrum",
+		"arb",
+		800,
+		.95
+	],
+	[
+		"arb-eth",
+		"ETH",
+		"Ether",
+		"arb",
+		.32,
+		3142
+	],
+	[
+		"op-op",
+		"OP",
+		"Optimism",
+		"op",
+		450,
+		2.8
+	],
+	[
+		"poly-matic",
+		"MATIC",
+		"Polygon",
+		"poly",
+		1500,
+		.75
+	],
+	[
+		"bnb-bnb",
+		"BNB",
+		"BNB",
+		"bnb",
+		0,
+		620
+	],
+	[
+		"avax-avax",
+		"AVAX",
+		"Avalanche",
+		"avax",
+		0,
+		38
+	]
+].map(([e, t, n, r, i, a, o], s) => ({
+	id: e,
+	symbol: t,
+	name: n,
+	chainId: r,
+	balance: i,
+	...a === void 0 ? {} : { usd: a },
+	...o ? {
+		address: o,
+		trending: !0
+	} : {},
+	...s < 6 ? { popular: !0 } : {}
+}));
+// src/blocks/swap/src/utils.ts
+function H(e) {
+	return /^0x[0-9a-fA-F]{40}$/.test(e) || e.length > 5 && /\.(eth|sol|bnb)$/.test(e);
+}
+function U(e) {
+	return e.length === 42 && e.startsWith("0x") ? [e.substring(0, 6), e.substring(38)].join("...") : e;
+}
+function te(e) {
+	let t = "", n = !1;
+	for (let r of e) r >= "0" && r <= "9" ? t += r : r === "." && !n && (n = !0, t += ".");
+	return t;
+}
+function W(e, t = 6) {
+	return !Number.isFinite(e) || e === 0 ? "0" : e.toLocaleString(void 0, { maximumFractionDigits: e >= 1e3 ? 2 : t });
+}
+// src/blocks/swap/src/use-swap.ts
+function ne(e, n) {
+	let r = t(), i = x(e.defaultFromId), a = x(e.defaultToId), o = x("1"), c = x(0), l = x(!1), u = x(null), d = x(!1), f = x("");
+	function p(t) {
+		let n = e.tokens.find((e) => e.id === t);
+		if (!n) throw Error("Unknown token id: " + t);
+		return n;
+	}
+	function m(t) {
+		let n = e.chains.find((e) => e.id === t);
+		if (!n) throw Error("Unknown chain id: " + t);
+		return n;
+	}
+	let h = s(() => p(i.value)), g = s(() => p(a.value)), _ = s(() => m(h.value.chainId)), b = s(() => m(g.value.chainId)), S = s(() => Number(o.value) || 0), C = s(() => h.value.usd && g.value.usd ? h.value.usd / g.value.usd : 1), w = s(() => S.value * C.value), T = s(() => h.value.balance !== void 0 && S.value > h.value.balance), E = s(() => S.value <= 0 || T.value), O = s(() => S.value <= 0 ? "Enter an amount" : T.value ? `Insufficient ${h.value.symbol}` : f.value && H(f.value) ? `Swap + Send to ${U(f.value)}` : `Swap ${h.value.symbol} → ${g.value.symbol}`), k, A = !1;
+	function j() {
+		clearTimeout(k), l.value = A && !!S.value, l.value && (k = setTimeout(() => {
+			l.value = !1;
+		}, 450));
+	}
+	D([
+		S,
+		i,
+		a
+	], j), y(() => {
+		A = !0, j();
+	}), v(() => {
+		A = !1, clearTimeout(k);
+	});
+	function M() {
+		c.value += 180, [i.value, a.value] = [a.value, i.value];
+	}
+	function N(e) {
+		let t = u.value;
+		if (!t) return;
+		let n = t === "from" ? i : a, r = t === "from" ? a : i;
+		e === r.value && (r.value = n.value), n.value = e, u.value = null;
+	}
+	function P() {
+		d.value && (f.value = ""), d.value = !d.value;
+	}
+	function F() {
+		E.value || n({
+			from: h.value,
+			to: g.value,
+			amount: S.value,
+			toAmount: w.value,
+			destination: f.value || void 0
+		});
+	}
+	return {
+		reduce: r,
+		fromId: i,
+		toId: a,
+		amount: o,
+		rotation: c,
+		quoting: l,
+		picking: u,
+		showDest: d,
+		destination: f,
+		from: h,
+		to: g,
+		fromChain: _,
+		toChain: b,
+		rate: C,
+		total: w,
+		disabled: E,
+		label: O,
+		flip: M,
+		pick: N,
+		toggleDestination: P,
+		submit: F
+	};
+}
+// src/blocks/swap/src/TokenDot.vue?vue&type=script&setup=true&lang.ts
+var re = { class: "absolute inset-0 inline-flex items-center justify-center rounded-full border border-border bg-background text-[11px] font-bold text-foreground" }, G = /* @__PURE__ */ h({
+	__name: "TokenDot",
+	props: {
+		token: {},
+		chain: {},
+		size: { default: 28 }
+	},
+	setup(e) {
+		let t = e, n = s(() => `${t.size}px`), r = s(() => `${t.size * .42}px`);
+		return (t, i) => (b(), u("span", {
+			class: "relative inline-flex shrink-0",
+			style: _({
+				width: n.value,
+				height: n.value
+			})
+		}, [d("span", re, C(e.token.symbol.substring(0, 2)), 1), d("span", {
+			style: _({
+				width: r.value,
+				height: r.value
+			}),
+			class: g(w(a)("absolute -bottom-0.5 -right-0.5 inline-flex items-center justify-center rounded-full border-2 border-card text-[7px] font-bold", e.chain.tone))
+		}, C(e.chain.symbol), 7)], 4));
+	}
+}), K = { class: "relative rounded-2xl border border-border/50 bg-background/40 p-3.5" }, q = ["for"], J = { class: "flex items-center justify-between gap-3" }, Y = { class: "min-w-0 flex-1" }, X = ["id", "value"], ie = {
+	key: 1,
+	class: "flex h-9 items-center gap-2 text-2xl font-semibold tracking-tight tabular-nums"
+}, ae = { class: "mt-1 text-[11px] text-muted-foreground tabular-nums" }, oe = { class: "mt-2 flex items-center justify-between text-[11px] text-muted-foreground" }, se = { class: "inline-flex items-center gap-1" }, ce = { class: "tabular-nums" }, Z = /* @__PURE__ */ h({
+	__name: "Field",
+	props: {
+		side: {},
+		token: {},
+		chain: {},
+		amount: {},
+		editable: { type: Boolean },
+		quoting: { type: Boolean }
+	},
+	emits: ["amount", "openPicker"],
+	setup(e, { emit: n }) {
+		let r = e, a = n, o = T(), f = t(), h = s(() => (Number(r.amount) || 0) * (r.token.usd ?? 0));
+		return (t, n) => (b(), u("div", K, [
+			d("label", {
+				for: w(o),
+				class: "mb-2 block text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
+			}, C(e.side === "from" ? "You pay" : "You get"), 9, q),
+			d("div", J, [d("div", Y, [e.editable ? (b(), u("input", {
+				key: 0,
+				id: w(o),
+				inputmode: "decimal",
+				value: e.amount,
+				placeholder: "0",
+				class: "w-full bg-transparent text-2xl font-semibold tracking-tight text-foreground tabular-nums outline-none placeholder:text-muted-foreground/60",
+				onInput: n[0] ||= (e) => a("amount", w(te)(e.target.value))
+			}, null, 40, X)) : (b(), u("div", ie, [m(w(j).span, {
+				animate: {
+					opacity: e.quoting ? .55 : 1,
+					filter: e.quoting ? "blur(2px)" : "blur(0px)"
+				},
+				transition: {
+					duration: w(f) ? 0 : .18,
+					ease: w(i)
+				},
+				class: "text-foreground"
+			}, {
+				default: O(() => [p(C(e.amount || "0"), 1)]),
+				_: 1
+			}, 8, ["animate", "transition"]), m(w(A), {
+				as: "span",
+				class: "contents"
+			}, {
+				default: O(() => [e.quoting ? (b(), c(w(j).span, {
+					key: 0,
+					initial: {
+						opacity: 0,
+						scale: .85
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					exit: {
+						opacity: 0,
+						scale: .85
+					},
+					transition: {
+						duration: w(f) ? 0 : .14,
+						ease: w(i)
+					}
+				}, {
+					default: O(() => [m(w(F), { class: "h-4 w-4 animate-spin text-muted-foreground" })]),
+					_: 1
+				}, 8, ["transition"])) : l("", !0)]),
+				_: 1
+			})])), d("p", ae, " ≈ $" + C(w(W)(h.value, 2)), 1)]), d("button", {
+				type: "button",
+				class: "group inline-flex h-10 items-center gap-2 rounded-full border border-border bg-card pl-1 pr-2.5 text-sm font-semibold text-foreground transition-transform hover:border-border active:scale-[0.97]",
+				onClick: n[1] ||= (e) => a("openPicker")
+			}, [
+				m(G, {
+					token: e.token,
+					chain: e.chain
+				}, null, 8, ["token", "chain"]),
+				d("span", null, C(e.token.symbol), 1),
+				m(w(P), { class: "h-3.5 w-3.5 text-muted-foreground" })
+			])]),
+			d("div", oe, [d("span", se, [
+				m(w(R), { class: "h-3 w-3" }),
+				d("span", ce, C(e.token.balance ? w(W)(e.token.balance) : "0.00"), 1),
+				d("span", null, "· " + C(e.chain.name), 1)
+			]), e.side === "from" && e.token.balance ? (b(), u("button", {
+				key: 0,
+				type: "button",
+				class: "rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+				onClick: n[2] ||= (t) => a("amount", String(e.token.balance))
+			}, " Max ")) : l("", !0)])
+		]));
+	}
+}), le = { class: "mt-1 overflow-hidden rounded-xl border border-border/50 bg-background/40" }, ue = { class: "flex items-center gap-2" }, de = { class: "border-t border-border/50 px-3.5 pb-3 pt-2.5" }, fe = ["value"], pe = /* @__PURE__ */ h({
+	__name: "DestinationRow",
+	props: {
+		show: { type: Boolean },
+		address: {},
+		reduce: { type: Boolean }
+	},
+	emits: ["toggle", "address"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, o = x(), f = s(() => !!n.address && H(n.address)), p = 0;
+		return D(() => n.show, (e) => {
+			cancelAnimationFrame(p), e && (p = requestAnimationFrame(() => o.value?.focus({ preventScroll: !0 })));
+		}, { flush: "post" }), v(() => cancelAnimationFrame(p)), (t, n) => (b(), u("div", le, [d("button", {
+			type: "button",
+			class: "flex w-full items-center justify-between gap-2 px-3.5 py-2.5 text-[12px] text-muted-foreground hover:text-foreground",
+			onClick: n[0] ||= (e) => r("toggle")
+		}, [d("span", ue, [m(w(L), { class: "h-3.5 w-3.5 shrink-0" }), d("span", null, C(e.show && f.value ? "To: " + w(U)(e.address) : "Send to different address"), 1)]), m(w(j).span, {
+			animate: e.reduce ? {} : { rotate: e.show ? 180 : 0 },
+			transition: {
+				duration: e.reduce ? 0 : .2,
+				ease: w(i)
+			},
+			style: { display: "inline-flex" }
+		}, {
+			default: O(() => [m(w(P), { class: "h-3.5 w-3.5" })]),
+			_: 1
+		}, 8, ["animate", "transition"])]), m(w(A), {
+			as: "div",
+			class: "contents"
+		}, {
+			default: O(() => [e.show ? (b(), c(w(j).div, {
+				key: "dest-input",
+				initial: e.reduce ? { opacity: 0 } : {
+					height: 0,
+					opacity: 0
+				},
+				animate: e.reduce ? { opacity: 1 } : {
+					height: "auto",
+					opacity: 1
+				},
+				exit: e.reduce ? { opacity: 0 } : {
+					height: 0,
+					opacity: 0
+				},
+				transition: {
+					duration: e.reduce ? 0 : .22,
+					ease: w(i)
+				},
+				style: { overflow: "hidden" }
+			}, {
+				default: O(() => [d("div", de, [d("div", { class: g(w(a)("flex items-center gap-2 rounded-lg border px-2.5 py-2 transition-colors", e.address && !f.value ? "border-destructive/40" : "border-border")) }, [d("input", {
+					ref_key: "input",
+					ref: o,
+					value: e.address,
+					"aria-label": "Destination address",
+					placeholder: "0x... or name.eth",
+					spellcheck: !1,
+					class: "min-w-0 flex-1 bg-transparent font-mono text-[12px] text-foreground outline-none placeholder:text-muted-foreground/60",
+					onInput: n[1] ||= (e) => r("address", e.target.value.trim())
+				}, null, 40, fe), m(w(A), {
+					mode: "wait",
+					as: "span",
+					class: "contents"
+				}, {
+					default: O(() => [f.value ? (b(), c(w(j).span, {
+						key: "check",
+						initial: {
+							opacity: 0,
+							scale: .7
+						},
+						animate: {
+							opacity: 1,
+							scale: 1
+						},
+						exit: {
+							opacity: 0,
+							scale: .7
+						},
+						transition: {
+							duration: e.reduce ? 0 : .14,
+							ease: w(i)
+						}
+					}, {
+						default: O(() => [m(w(N), { class: "h-3.5 w-3.5 shrink-0 text-primary" })]),
+						_: 1
+					}, 8, ["transition"])) : e.address ? (b(), c(w(j).button, {
+						key: "clear",
+						type: "button",
+						"aria-label": "Clear address",
+						initial: {
+							opacity: 0,
+							scale: .7
+						},
+						animate: {
+							opacity: 1,
+							scale: 1
+						},
+						exit: {
+							opacity: 0,
+							scale: .7
+						},
+						transition: {
+							duration: e.reduce ? 0 : .14,
+							ease: w(i)
+						},
+						class: "shrink-0 text-muted-foreground hover:text-foreground",
+						onClick: n[2] ||= (e) => r("address", "")
+					}, {
+						default: O(() => [m(w(z), { class: "h-3.5 w-3.5" })]),
+						_: 1
+					}, 8, ["transition"])) : l("", !0)]),
+					_: 1
+				})], 2)])]),
+				_: 1
+			}, 8, [
+				"initial",
+				"animate",
+				"exit",
+				"transition"
+			])) : l("", !0)]),
+			_: 1
+		})]));
+	}
+}), me = ["aria-pressed", "title"], he = {
+	key: 1,
+	class: "text-xs font-semibold"
+}, Q = /* @__PURE__ */ h({
+	__name: "ChainChip",
+	props: {
+		active: { type: Boolean },
+		chain: {},
+		label: {}
+	},
+	setup(e) {
+		return (t, n) => (b(), u("button", {
+			type: "button",
+			"aria-pressed": e.active,
+			title: e.chain?.name ?? e.label,
+			class: g(w(a)("inline-flex h-9 shrink-0 items-center justify-center rounded-xl border transition-colors active:scale-[0.97] transition-transform", e.chain ? "w-9" : "px-3", e.active ? "border-primary/20 bg-muted/60 text-foreground" : "border-border/60 bg-background/40 text-foreground hover:border-border"))
+		}, [e.chain ? (b(), u("span", {
+			key: 0,
+			style: {
+				width: "20px",
+				height: "20px"
+			},
+			class: g(w(a)("inline-flex shrink-0 items-center justify-center rounded-full text-[9px] font-bold", e.chain.tone))
+		}, C(e.chain.symbol), 3)) : (b(), u("span", he, C(e.label), 1))], 10, me));
+	}
+}), ge = { class: "flex items-center gap-2 border-b border-border px-4 pb-3" }, _e = { class: "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden flex items-center gap-1.5 overflow-x-auto border-b border-border px-3 py-5" }, ve = { class: "flex-1 overflow-y-auto px-3 pb-4 pt-3" }, ye = { class: "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden flex items-center gap-1.5 overflow-x-auto pb-3" }, be = ["onClick"], xe = { class: "px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground" }, Se = { class: "flex flex-col gap-0.5" }, Ce = {
+	key: 0,
+	class: "py-8 text-center text-xs text-muted-foreground"
+}, we = ["onClick"], Te = { class: "flex min-w-0 items-center gap-2.5" }, Ee = { class: "flex min-w-0 flex-col" }, De = { class: "truncate text-sm font-semibold text-foreground" }, $ = { class: "truncate text-[11px] text-muted-foreground" }, Oe = { class: "shrink-0 text-right text-[11px] tabular-nums text-muted-foreground" }, ke = /* @__PURE__ */ h({
+	__name: "TokenPicker",
+	props: {
+		open: { type: Boolean },
+		side: {},
+		chains: {},
+		tokens: {},
+		selectedId: {},
+		reduce: { type: Boolean }
+	},
+	emits: ["pick", "close"],
+	setup(t, { emit: r }) {
+		let f = t, h = r, _ = x("all"), v = x(""), y = x(), T = x(null), M = s(() => f.tokens.filter((e) => e.popular).slice(0, 6)), N = s(() => new Map(f.chains.map((e) => [e.id, e]))), P = s(() => {
+			let e = v.value.trim().toLowerCase();
+			return f.tokens.filter((t) => (_.value === "all" || t.chainId === _.value) && (!e || [
+				t.symbol,
+				t.name,
+				N.value.get(t.chainId)?.name,
+				t.address
+			].some((t) => t?.toLowerCase().includes(e))));
+		});
+		return D(() => f.open, (e) => {
+			e && (v.value = "");
+		}), e(s(() => f.open), T, () => h("close"), () => y.value), (e, r) => (b(), c(w(A), {
+			as: "div",
+			class: "contents"
+		}, {
+			default: O(() => [t.open ? (b(), c(w(j).button, {
+				key: "backdrop",
+				type: "button",
+				"aria-label": "Close",
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: {
+					duration: t.reduce ? 0 : .2,
+					ease: w(i)
+				},
+				class: "absolute inset-0 z-10 cursor-default bg-background/40 backdrop-blur-sm",
+				onClick: r[0] ||= (e) => h("close")
+			}, null, 8, ["transition"])) : l("", !0), t.open ? (b(), c(w(j).div, {
+				key: "sheet",
+				ref_key: "panel",
+				ref: T,
+				initial: t.reduce ? { opacity: 0 } : {
+					opacity: 0,
+					y: "100%"
+				},
+				animate: t.reduce ? { opacity: 1 } : {
+					opacity: 1,
+					y: 0
+				},
+				exit: t.reduce ? { opacity: 0 } : {
+					opacity: 0,
+					y: "100%"
+				},
+				transition: t.reduce ? {
+					duration: .18,
+					ease: w(i)
+				} : w(n),
+				class: "absolute inset-x-0 bottom-0 z-20 flex max-h-[92%] flex-col rounded-t-3xl border-t border-border bg-card shadow-2xl",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": `Select ${t.side === "from" ? "from" : "to"} token`
+			}, {
+				default: O(() => [
+					r[5] ||= d("div", { class: "flex justify-center pb-1 pt-2.5" }, [d("span", { class: "h-1 w-9 rounded-full bg-muted" })], -1),
+					d("div", ge, [
+						m(w(I), { class: "h-4 w-4 shrink-0 text-muted-foreground" }),
+						k(d("input", {
+							ref_key: "input",
+							ref: y,
+							"onUpdate:modelValue": r[1] ||= (e) => v.value = e,
+							placeholder: "Search name or paste address",
+							"aria-label": "Search tokens",
+							class: "w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground/70"
+						}, null, 512), [[E, v.value]]),
+						d("button", {
+							type: "button",
+							"aria-label": "Close",
+							class: "inline-flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+							onClick: r[2] ||= (e) => h("close")
+						}, [m(w(z), { class: "h-3.5 w-3.5" })])
+					]),
+					d("div", _e, [m(Q, {
+						active: _.value === "all",
+						label: "All",
+						onClick: r[3] ||= (e) => _.value = "all"
+					}, null, 8, ["active"]), (b(!0), u(o, null, S(t.chains, (e) => (b(), c(Q, {
+						key: e.id,
+						active: _.value === e.id,
+						chain: e,
+						onClick: (t) => _.value = e.id
+					}, null, 8, [
+						"active",
+						"chain",
+						"onClick"
+					]))), 128))]),
+					d("div", ve, [
+						!v.value && _.value === "all" ? (b(), u(o, { key: 0 }, [r[4] ||= d("p", { class: "px-1 pb-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground" }, " Most popular ", -1), d("div", ye, [(b(!0), u(o, null, S(M.value, (e) => (b(), u(o, { key: e.id }, [N.value.has(e.chainId) ? (b(), u("button", {
+							key: 0,
+							type: "button",
+							class: "inline-flex shrink-0 items-center gap-2 rounded-full border border-border bg-background/50 py-1 pl-1 pr-3 text-sm font-semibold text-foreground transition-transform hover:border-border active:scale-[0.97]",
+							onClick: (t) => h("pick", e.id)
+						}, [m(G, {
+							token: e,
+							chain: N.value.get(e.chainId),
+							size: 22
+						}, null, 8, ["token", "chain"]), p(C(e.symbol), 1)], 8, be)) : l("", !0)], 64))), 128))])], 64)) : l("", !0),
+						d("p", xe, C(v.value ? "Results" : _.value === "all" ? "Trending" : "Tokens"), 1),
+						d("ul", Se, [P.value.length ? l("", !0) : (b(), u("li", Ce, " No tokens found ")), (b(!0), u(o, null, S(P.value, (e) => (b(), u("li", { key: e.id }, [N.value.has(e.chainId) ? (b(), u("button", {
+							key: 0,
+							type: "button",
+							class: g(w(a)("flex w-full items-center justify-between rounded-xl px-2 py-2 text-left transition-colors active:scale-[0.97]", e.id === t.selectedId ? "bg-muted/60" : "hover:bg-muted/60")),
+							onClick: (t) => h("pick", e.id)
+						}, [d("span", Te, [m(G, {
+							token: e,
+							chain: N.value.get(e.chainId),
+							size: 32
+						}, null, 8, ["token", "chain"]), d("span", Ee, [d("span", De, C(e.name), 1), d("span", $, C(e.symbol), 1)])]), d("span", Oe, C(e.address ?? (e.balance ? w(W)(e.balance) : "")), 1)], 10, we)) : l("", !0)]))), 128))])
+					])
+				]),
+				_: 1
+			}, 8, [
+				"initial",
+				"animate",
+				"exit",
+				"transition",
+				"aria-label"
+			])) : l("", !0)]),
+			_: 1
+		}));
+	}
+}), Ae = { class: "relative isolate w-full max-w-[420px] overflow-hidden rounded-3xl border border-border/30 bg-card" }, je = { class: "flex h-12 items-center justify-between border-b border-border/50 px-3" }, Me = {
+	type: "button",
+	"aria-label": "Settings",
+	class: "inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-transform hover:bg-muted/60 hover:text-foreground active:scale-[0.97]"
+}, Ne = { class: "flex flex-col gap-1.5 p-4" }, Pe = {
+	class: "relative -my-4 flex justify-center",
+	style: { zIndex: 1 }
+}, Fe = { class: "mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-xl border border-border/50 bg-background/40 px-3.5 py-2.5 text-[11px]" }, Ie = { class: "text-right tabular-nums text-foreground" }, Le = /* @__PURE__ */ h({
+	__name: "MultiChainSwap",
+	props: {
+		chains: { default: () => B },
+		tokens: { default: () => V },
+		defaultFromId: { default: "eth-eth" },
+		defaultToId: { default: "sol-sol" }
+	},
+	emits: ["swap", "connect"],
+	setup(e, { emit: t }) {
+		let n = e, s = t, { reduce: l, fromId: h, toId: _, amount: v, rotation: y, quoting: x, picking: S, showDest: T, destination: E, from: D, to: k, fromChain: N, toChain: P, rate: I, total: L, disabled: R, label: z, flip: B, pick: V, toggleDestination: H, submit: U } = ne(n, (e) => s("swap", e));
+		return (t, n) => (b(), u("div", Ae, [
+			d("div", je, [n[5] ||= d("span", { class: "px-2 text-sm font-semibold tracking-tight text-foreground" }, "Swap", -1), d("button", Me, [m(w(ee), { class: "h-4 w-4" })])]),
+			d("div", Ne, [
+				m(Z, {
+					side: "from",
+					token: w(D),
+					chain: w(N),
+					amount: w(v),
+					editable: "",
+					quoting: !1,
+					onAmount: n[0] ||= (e) => v.value = e,
+					onOpenPicker: n[1] ||= (e) => S.value = "from"
+				}, null, 8, [
+					"token",
+					"chain",
+					"amount"
+				]),
+				d("div", Pe, [m(w(j).button, {
+					type: "button",
+					"aria-label": "Reverse direction",
+					"while-press": w(l) ? void 0 : { scale: .9 },
+					animate: w(l) ? void 0 : { rotate: w(y) },
+					transition: w(l) ? { duration: 0 } : {
+						type: "spring",
+						stiffness: 380,
+						damping: 26,
+						mass: .6
+					},
+					class: "inline-flex h-9 w-9 items-center justify-center rounded-full border-[3px] border-card bg-muted text-foreground backdrop-blur",
+					onClick: w(B)
+				}, {
+					default: O(() => [m(w(M), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, [
+					"while-press",
+					"animate",
+					"transition",
+					"onClick"
+				])]),
+				m(Z, {
+					side: "to",
+					token: w(k),
+					chain: w(P),
+					amount: w(L) > 0 ? w(W)(w(L)) : "",
+					editable: !1,
+					quoting: w(x),
+					onOpenPicker: n[2] ||= (e) => S.value = "to"
+				}, null, 8, [
+					"token",
+					"chain",
+					"amount",
+					"quoting"
+				]),
+				d("div", Fe, [
+					n[6] ||= d("span", { class: "text-muted-foreground" }, "Rate", -1),
+					d("span", Ie, [w(x) ? (b(), c(w(F), {
+						key: 0,
+						class: "ml-auto inline h-3 w-3 animate-spin text-muted-foreground"
+					})) : (b(), u(o, { key: 1 }, [p("1 " + C(w(D).symbol) + " ≈ " + C(w(W)(w(I))) + " " + C(w(k).symbol), 1)], 64))]),
+					n[7] ||= f("<span class=\"text-muted-foreground\">Network fee</span><span class=\"text-right tabular-nums text-foreground\">$0.42</span><span class=\"text-muted-foreground\">Slippage</span><span class=\"text-right tabular-nums text-foreground\">0.50%</span><span class=\"text-muted-foreground\">ETA</span><span class=\"text-right text-foreground\">≈ 24s</span>", 6)
+				]),
+				m(pe, {
+					show: w(T),
+					address: w(E),
+					reduce: w(l),
+					onToggle: w(H),
+					onAddress: n[3] ||= (e) => E.value = e
+				}, null, 8, [
+					"show",
+					"address",
+					"reduce",
+					"onToggle"
+				]),
+				m(w(j).button, {
+					type: "button",
+					"while-press": w(R) || w(l) ? void 0 : { scale: .97 },
+					transition: w(r),
+					disabled: w(R),
+					class: g(w(a)("mt-3 inline-flex h-12 w-full items-center justify-center rounded-2xl text-sm font-semibold transition-colors", w(R) ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90")),
+					onClick: w(U)
+				}, {
+					default: O(() => [m(w(A), {
+						mode: "wait",
+						initial: !1
+					}, {
+						default: O(() => [(b(), c(w(j).span, {
+							key: w(z),
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
+							exit: { opacity: 0 },
+							transition: {
+								duration: w(l) ? 0 : .14,
+								ease: w(i)
+							}
+						}, {
+							default: O(() => [p(C(w(z)), 1)]),
+							_: 1
+						}, 8, ["transition"]))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"while-press",
+					"transition",
+					"disabled",
+					"class",
+					"onClick"
+				])
+			]),
+			m(ke, {
+				open: w(S) !== null,
+				side: w(S),
+				chains: e.chains,
+				tokens: e.tokens,
+				"selected-id": w(S) === "from" ? w(h) : w(_),
+				reduce: w(l),
+				onPick: w(V),
+				onClose: n[4] ||= (e) => S.value = null
+			}, null, 8, [
+				"open",
+				"side",
+				"chains",
+				"tokens",
+				"selected-id",
+				"reduce",
+				"onPick"
+			])
+		]));
+	}
+});
+export { B as n, V as r, Le as t };
+
+//# sourceMappingURL=swap-BSeVL8dB.js.map