@orvui/vue 0.0.0-stage → 0.1.0

package/dist/wallet-card-DOa9Q4pg.js

@@ -0,0 +1,580 @@
+import { s as e, t } from "./composables-BJ1sih_H.js";
+import { l as n, r } from "./ease-rIvCM4O3.js";
+import { t as i } from "./utils-DIrLOK2M.js";
+import { a } from "./button-CDD333Yn.js";
+import { t as o } from "./ActionSwapText-GBQfNPxd.js";
+import { t as s } from "./ActionSwapIcon-BWUn5TzV.js";
+import { t as c } from "./dismiss-Db0RZCUY.js";
+import { r as l, t as u } from "./shared-DAEawhBJ.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, nextTick as b, normalizeClass as x, onBeforeUnmount as S, openBlock as C, ref as w, renderList as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, useId as k, watch as A, withCtx as j, withKeys as M, withModifiers as N } from "vue";
+import { AnimatePresence as P, motion as F } from "motion-v";
+import { ArrowDownToLine as I, ArrowUp as ee, Bell as L, Check as R, ChevronDown as z, Copy as B, CreditCard as V, Eye as te, EyeOff as ne, History as re, Repeat as ie, Search as H, TrendingDown as U, TrendingUp as W } from "lucide-vue-next";
+// src/blocks/wallet-card/src/use-wallet.ts
+function G(e, t) {
+	let n = l(() => e.accountId, e.defaultAccountId ?? e.accounts[0]?.id ?? "", t), r = f(() => e.accounts.find((e) => e.id === n.value) ?? e.accounts[0]), i = w(e.defaultBalanceHidden), a = w(e.defaultChange ? {
+		id: 0,
+		amount: e.defaultChange
+	} : null), o = f(() => e.balancePrefix + K(e.balance)), s = 0;
+	return A(() => e.balance, (e, t) => {
+		let n = e - t;
+		n && (a.value = {
+			id: ++s,
+			amount: n
+		});
+	}), {
+		accountId: n,
+		account: r,
+		hidden: i,
+		delta: a,
+		shownBalance: o
+	};
+}
+function K(e) {
+	return e.toLocaleString(void 0, {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	});
+}
+// src/blocks/wallet-card/src/constants.ts
+var q = {
+	type: "spring",
+	duration: .5,
+	bounce: .22
+}, J = {
+	hidden: {},
+	show: { transition: {
+		staggerChildren: .035,
+		delayChildren: .12
+	} }
+}, Y = {
+	hidden: {
+		opacity: 0,
+		y: -6,
+		filter: "blur(3px)"
+	},
+	show: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)"
+	}
+}, X = "flex items-center gap-2 px-2 py-1.5 text-left";
+// src/blocks/wallet-card/src/utils.ts
+function ae(e) {
+	return "https://api.dicebear.com/9.x/glass/svg?seed=" + encodeURIComponent(e);
+}
+function oe(e) {
+	return e.length <= 12 ? e : [e.substring(0, 6), e.substring(e.length - 4)].join("…");
+}
+// src/blocks/wallet-card/src/use-wallet-panel.ts
+function Z(t, n, r) {
+	let i = w(!1), a = w(!1), o = w(), s = e(), l = k() + t, u, d = !1;
+	return c(i, o, () => {
+		i.value = !1;
+	}), A([i, s], () => {
+		clearTimeout(u), a.value = !1, i.value && (b(() => {
+			!d && i.value && r?.();
+		}), u = setTimeout(() => {
+			a.value = !0;
+		}, s.value ? 0 : n));
+	}), S(() => {
+		d = !0, clearTimeout(u);
+	}), {
+		open: i,
+		armed: a,
+		root: o,
+		reduce: s,
+		layoutId: l,
+		morph: f(() => s.value ? { duration: 0 } : q)
+	};
+}
+// src/blocks/wallet-card/src/AccountAvatar.vue?vue&type=script&setup=true&lang.ts
+var se = ["src", "alt"], Q = /* @__PURE__ */ y({
+	__name: "AccountAvatar",
+	props: { account: {} },
+	setup(e) {
+		let t = e, n = f(() => t.account ? ae(t.account.id || t.account.address) : "");
+		return (t, r) => e.account?.avatar ? (C(), p(O(u), {
+			key: 0,
+			node: e.account.avatar
+		}, null, 8, ["node"])) : e.account ? (C(), h("img", {
+			key: 1,
+			src: n.value,
+			alt: e.account.name,
+			class: "h-7 w-7 shrink-0 rounded-full bg-muted"
+		}, null, 8, se)) : m("", !0);
+	}
+}), ce = ["aria-label"], le = /* @__PURE__ */ y({
+	__name: "CopyButton",
+	props: { value: {} },
+	setup(e) {
+		let t = e, n = w(!1), r, i = !1;
+		async function a() {
+			try {
+				await navigator.clipboard.writeText(t.value);
+			} catch {}
+			i || (n.value = !0, clearTimeout(r), r = setTimeout(() => {
+				n.value = !1;
+			}, 1400));
+		}
+		return S(() => {
+			i = !0, clearTimeout(r);
+		}), (e, t) => (C(), h("button", {
+			type: "button",
+			"aria-label": n.value ? "Copied" : "Copy address",
+			class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground",
+			onClick: N(a, ["stop"])
+		}, [v(O(s), {
+			value: n.value ? "check" : "copy",
+			animation: "cascade",
+			class: "h-3.5 w-3.5"
+		}, {
+			default: j(() => [n.value ? (C(), p(O(R), {
+				key: 0,
+				class: "h-3.5 w-3.5 text-emerald-500"
+			})) : (C(), p(O(B), {
+				key: 1,
+				class: "h-3.5 w-3.5"
+			}))]),
+			_: 1
+		}, 8, ["value"])], 8, ce));
+	}
+}), ue = { class: "grid" }, de = ["aria-selected", "onClick"], fe = { class: "flex min-w-0 flex-1 flex-col" }, pe = { class: "truncate font-medium" }, me = { class: "truncate text-xs text-muted-foreground" }, he = /* @__PURE__ */ y({
+	__name: "AccountSwitcher",
+	props: {
+		accounts: {},
+		activeAccount: {}
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let n = t, { open: r, armed: a, root: o, reduce: s, layoutId: c, morph: l } = Z("-account", 280);
+		return (t, u) => (C(), h("div", {
+			ref_key: "root",
+			ref: o,
+			class: "min-w-0"
+		}, [
+			g("div", {
+				"aria-hidden": "true",
+				class: x(O(i)("pointer-events-none opacity-0", O(X)))
+			}, [
+				v(Q, { account: e.activeAccount ?? e.accounts[0] }, null, 8, ["account"]),
+				g("span", ue, [(C(!0), h(d, null, T(e.accounts, (e) => (C(), h("span", {
+					key: e.id,
+					class: "col-start-1 row-start-1 whitespace-nowrap text-sm font-medium"
+				}, D(e.name), 1))), 128))]),
+				v(O(z), { class: "h-4 w-4" })
+			], 2),
+			v(O(P), {
+				initial: !1,
+				mode: "popLayout",
+				as: "div",
+				class: "contents"
+			}, {
+				default: j(() => [O(r) ? m("", !0) : (C(), p(O(F).button, {
+					key: "trigger",
+					"layout-id": O(c),
+					type: "button",
+					"aria-haspopup": "listbox",
+					"aria-expanded": "false",
+					transition: O(l),
+					style: { borderRadius: "16px" },
+					class: x(O(i)("absolute -left-2 top-0 z-20 max-w-full outline-none transition-colors hover:bg-muted/60", O(X))),
+					onClick: u[0] ||= (e) => r.value = !0
+				}, {
+					default: j(() => [e.activeAccount ? (C(), h(d, { key: 0 }, [
+						v(Q, { account: e.activeAccount }, null, 8, ["account"]),
+						v(O(F).span, {
+							layout: "position",
+							class: "truncate text-sm font-medium text-foreground"
+						}, {
+							default: j(() => [_(D(e.activeAccount.name), 1)]),
+							_: 1
+						}),
+						v(O(F).span, {
+							layout: "position",
+							class: "text-muted-foreground"
+						}, {
+							default: j(() => [v(O(z), { class: "h-4 w-4" })]),
+							_: 1
+						})
+					], 64)) : m("", !0)]),
+					_: 1
+				}, 8, [
+					"layout-id",
+					"transition",
+					"class"
+				]))]),
+				_: 1
+			}),
+			v(O(P), {
+				initial: !1,
+				mode: "popLayout",
+				as: "div",
+				class: "contents"
+			}, {
+				default: j(() => [O(r) ? (C(), p(O(F).div, {
+					key: "panel",
+					"layout-id": O(c),
+					role: "listbox",
+					transition: O(l),
+					style: { borderRadius: "16px" },
+					class: "absolute -left-2 -right-2 top-0 z-30 overflow-hidden border border-border/30 bg-background backdrop-blur-md"
+				}, {
+					default: j(() => [g("button", {
+						type: "button",
+						class: x(O(i)("w-full outline-none", O(X))),
+						onClick: u[1] ||= (e) => r.value = !1
+					}, [
+						v(Q, { account: e.activeAccount }, null, 8, ["account"]),
+						v(O(F).span, {
+							layout: "position",
+							class: "min-w-0 flex-1 truncate text-sm font-medium text-foreground"
+						}, {
+							default: j(() => [_(D(e.activeAccount?.name ?? "Select account"), 1)]),
+							_: 1
+						}),
+						v(O(F).span, {
+							layout: "position",
+							animate: { rotate: 180 },
+							transition: O(l),
+							class: "text-muted-foreground"
+						}, {
+							default: j(() => [v(O(z), { class: "h-4 w-4" })]),
+							_: 1
+						}, 8, ["transition"])
+					], 2), v(O(F).ul, {
+						initial: "hidden",
+						animate: "show",
+						variants: O(s) ? void 0 : O(J),
+						class: x(O(i)("max-h-64 overflow-y-auto p-1.5", !O(a) && "pointer-events-none"))
+					}, {
+						default: j(() => [(C(!0), h(d, null, T(e.accounts, (t) => (C(), p(O(F).li, {
+							key: t.id,
+							variants: O(s) ? void 0 : O(Y),
+							class: x(O(i)("flex items-center rounded-xl pr-1 text-sm transition-colors", t.id === e.activeAccount?.id ? "bg-muted text-foreground" : ["text-muted-foreground", O(a) && "hover:bg-muted hover:text-foreground"]))
+						}, {
+							default: j(() => [g("button", {
+								type: "button",
+								role: "option",
+								"aria-selected": t.id === e.activeAccount?.id,
+								class: "flex min-w-0 flex-1 items-center gap-2.5 rounded-xl px-2 py-2 text-left outline-none",
+								onClick: (e) => {
+									n("select", t.id), r.value = !1;
+								}
+							}, [
+								v(Q, { account: t }, null, 8, ["account"]),
+								g("span", fe, [g("span", pe, D(t.name), 1), g("span", me, D(O(oe)(t.address)), 1)]),
+								t.id === e.activeAccount?.id ? (C(), p(O(R), {
+									key: 0,
+									class: "h-4 w-4 shrink-0 text-foreground"
+								})) : m("", !0)
+							], 8, de), v(le, { value: t.address }, null, 8, ["value"])]),
+							_: 2
+						}, 1032, ["variants", "class"]))), 128))]),
+						_: 1
+					}, 8, ["variants", "class"])]),
+					_: 1
+				}, 8, ["layout-id", "transition"])) : m("", !0)]),
+				_: 1
+			})
+		], 512));
+	}
+}), ge = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "h-8 w-8"
+}, _e = { class: "flex h-9 items-center gap-2 px-3" }, ve = ["onClick"], ye = { class: "min-w-0 flex-1 truncate" }, be = { class: "text-sm text-muted-foreground" }, xe = /* @__PURE__ */ y({
+	__name: "SearchBar",
+	props: {
+		placeholder: { default: "Search" },
+		recent: { default: () => [] }
+	},
+	emits: ["change", "submit"],
+	setup(e, { emit: n }) {
+		let a = e, o = n, s = w(), c = w(""), { open: l, armed: u, root: _, reduce: y, layoutId: b, morph: S } = Z("-search", 260, () => t(s.value)?.focus()), E = f(() => c.value.trim().toLowerCase()), k = f(() => a.recent.filter((e) => !E.value || e.toLowerCase().includes(E.value))), A = f(() => y.value ? { duration: 0 } : {
+			type: "spring",
+			duration: .5,
+			bounce: 0
+		});
+		function N(e) {
+			c.value = e, o("change", e);
+		}
+		function I(e) {
+			o("submit", e), l.value = !1;
+		}
+		return (t, n) => (C(), h("div", {
+			ref_key: "root",
+			ref: _,
+			class: "shrink-0"
+		}, [
+			O(l) ? (C(), h("div", ge)) : m("", !0),
+			v(O(P), {
+				initial: !1,
+				mode: "popLayout",
+				as: "div",
+				class: "contents"
+			}, {
+				default: j(() => [O(l) ? m("", !0) : (C(), p(O(F).button, {
+					key: "icon",
+					"layout-id": O(b),
+					type: "button",
+					"aria-label": "Search",
+					transition: O(S),
+					style: { borderRadius: "12px" },
+					class: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground",
+					onClick: n[0] ||= (e) => l.value = !0
+				}, {
+					default: j(() => [v(O(H), { class: "h-4 w-4" })]),
+					_: 1
+				}, 8, ["layout-id", "transition"]))]),
+				_: 1
+			}),
+			v(O(P), {
+				initial: !1,
+				mode: "popLayout",
+				as: "div",
+				class: "contents"
+			}, {
+				default: j(() => [O(l) ? (C(), p(O(F).div, {
+					key: "panel",
+					"layout-id": O(b),
+					transition: O(S),
+					style: { borderRadius: "16px" },
+					class: "absolute -left-2 -right-2 top-0 z-40 overflow-hidden border border-border/30 bg-background backdrop-blur-md"
+				}, {
+					default: j(() => [
+						g("div", _e, [v(O(F).span, {
+							layout: "position",
+							transition: A.value,
+							class: "shrink-0"
+						}, {
+							default: j(() => [v(O(H), { class: "h-4 w-4 text-muted-foreground" })]),
+							_: 1
+						}, 8, ["transition"]), v(O(F).input, {
+							ref_key: "input",
+							ref: s,
+							layout: "position",
+							initial: !O(y) && { opacity: 0 },
+							animate: { opacity: 1 },
+							transition: {
+								opacity: {
+									duration: .15,
+									delay: .12,
+									ease: O(r)
+								},
+								layout: A.value
+							},
+							value: c.value,
+							placeholder: e.placeholder,
+							"aria-label": "Search wallet",
+							class: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+							onInput: n[1] ||= (e) => N(e.target.value),
+							onKeydown: [n[2] ||= M((e) => c.value.trim() && I(c.value.trim()), ["enter"]), n[3] ||= M((e) => l.value = !1, ["esc"])]
+						}, null, 8, [
+							"initial",
+							"transition",
+							"value",
+							"placeholder"
+						])]),
+						n[4] ||= g("div", { class: "h-px bg-border/40" }, null, -1),
+						k.value.length ? (C(), p(O(F).ul, {
+							key: 0,
+							initial: "hidden",
+							animate: "show",
+							variants: O(y) ? void 0 : O(J),
+							class: x(O(i)("max-h-56 overflow-y-auto p-1.5", !O(u) && "pointer-events-none"))
+						}, {
+							default: j(() => [(C(!0), h(d, null, T(k.value, (e) => (C(), p(O(F).li, {
+								key: e,
+								layout: "position",
+								variants: O(y) ? void 0 : O(Y)
+							}, {
+								default: j(() => [g("button", {
+									type: "button",
+									class: x(O(i)("flex w-full items-center gap-2.5 rounded-xl px-2.5 py-2 text-left text-sm text-muted-foreground outline-none transition-colors", O(u) && "hover:bg-muted hover:text-foreground")),
+									onClick: (t) => {
+										N(e), I(e);
+									}
+								}, [v(O(re), { class: "h-4 w-4 shrink-0" }), g("span", ye, D(e), 1)], 10, ve)]),
+								_: 2
+							}, 1032, ["variants"]))), 128))]),
+							_: 1
+						}, 8, ["variants", "class"])) : (C(), p(O(F).div, {
+							key: 1,
+							layout: "position",
+							class: "flex flex-col items-center gap-1 px-4 py-8 text-center"
+						}, {
+							default: j(() => [v(O(H), { class: "h-5 w-5 text-muted-foreground/60" }), g("p", be, D(E.value ? "No matches" : "No recent searches"), 1)]),
+							_: 1
+						}))
+					]),
+					_: 1
+				}, 8, ["layout-id", "transition"])) : m("", !0)]),
+				_: 1
+			})
+		], 512));
+	}
+}), Se = { class: "relative w-full max-w-xs overflow-hidden rounded-4xl border border-border p-6" }, Ce = { class: "relative flex items-center justify-between gap-2" }, we = { class: "flex shrink-0 items-center gap-1" }, Te = {
+	key: 0,
+	class: "absolute right-1.5 top-1.5 flex h-2 w-2"
+}, Ee = { class: "mt-8 flex flex-col items-center text-center" }, De = { class: "flex items-center gap-1.5" }, $ = ["aria-label", "aria-pressed"], Oe = {
+	key: 0,
+	class: "mt-2 flex h-7 items-center justify-center"
+}, ke = {
+	key: 1,
+	class: "mt-2 flex h-7 items-center justify-center"
+}, Ae = { class: "mt-8" }, je = { class: "flex items-start justify-between gap-2" }, Me = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-muted text-foreground" }, Ne = { class: "text-xs font-medium text-muted-foreground" }, Pe = /* @__PURE__ */ y({
+	__name: "WalletCard",
+	props: {
+		accounts: {},
+		accountId: {},
+		defaultAccountId: {},
+		balance: {},
+		balancePrefix: { default: "$" },
+		defaultChange: {},
+		defaultBalanceHidden: {
+			type: Boolean,
+			default: !1
+		},
+		searchPlaceholder: {},
+		searchRecent: { default: () => [] },
+		hasNotifications: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"update:accountId",
+		"accountChange",
+		"send",
+		"deposit",
+		"swap",
+		"buy",
+		"searchChange",
+		"searchSubmit",
+		"notifications"
+	],
+	setup(t, { emit: s }) {
+		let c = t, l = s, u = e(), { accountId: f, account: y, hidden: b, delta: S, shownBalance: w } = G(c, (e) => {
+			l("update:accountId", e), l("accountChange", e);
+		}), k = [
+			{
+				id: "send",
+				label: "Send",
+				icon: ee,
+				run: () => l("send")
+			},
+			{
+				id: "deposit",
+				label: "Deposit",
+				icon: I,
+				run: () => l("deposit")
+			},
+			{
+				id: "swap",
+				label: "Swap",
+				icon: ie,
+				run: () => l("swap")
+			},
+			{
+				id: "buy",
+				label: "Buy",
+				icon: V,
+				run: () => l("buy")
+			}
+		];
+		return (e, s) => (C(), h("div", Se, [
+			g("div", Ce, [v(he, {
+				accounts: t.accounts,
+				"active-account": O(y),
+				onSelect: s[0] ||= (e) => f.value = e
+			}, null, 8, ["accounts", "active-account"]), g("div", we, [v(xe, {
+				placeholder: t.searchPlaceholder,
+				recent: t.searchRecent,
+				onChange: s[1] ||= (e) => l("searchChange", e),
+				onSubmit: s[2] ||= (e) => l("searchSubmit", e)
+			}, null, 8, ["placeholder", "recent"]), v(O(a), {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": "Notifications",
+				class: "relative",
+				onClick: s[3] ||= (e) => l("notifications")
+			}, {
+				default: j(() => [v(O(L), { class: "h-4 w-4" }), t.hasNotifications ? (C(), h("span", Te, [...s[5] ||= [g("span", { class: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" }, null, -1), g("span", { class: "relative inline-flex h-2 w-2 rounded-full bg-primary" }, null, -1)]])) : m("", !0)]),
+				_: 1
+			})])]),
+			g("div", Ee, [
+				g("div", De, [s[6] ||= g("p", { class: "text-xs text-muted-foreground" }, "Balance", -1), g("button", {
+					type: "button",
+					"aria-label": O(b) ? "Show balance" : "Hide balance",
+					"aria-pressed": O(b),
+					class: "text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+					onClick: s[4] ||= (e) => b.value = !O(b)
+				}, [(C(), p(E(O(b) ? O(ne) : O(te)), { class: "h-3.5 w-3.5" }))], 8, $)]),
+				v(O(o), {
+					value: O(b) ? "hidden" : O(w),
+					animation: "cascade",
+					class: "text-3xl font-semibold text-foreground"
+				}, {
+					default: j(() => [_(D(O(b) ? "*******" : O(w)), 1)]),
+					_: 1
+				}, 8, ["value"]),
+				O(b) ? (C(), h("div", Oe, [...s[7] ||= [g("span", { class: "translate-y-[3px] text-sm font-semibold leading-none tracking-[0.3em] text-muted-foreground" }, "*****", -1)]])) : (C(), h("div", ke, [v(O(P), {
+					mode: "wait",
+					as: "span",
+					class: "contents"
+				}, {
+					default: j(() => [O(S) ? (C(), p(O(F).span, {
+						key: O(S).id,
+						initial: {
+							opacity: 0,
+							y: O(u) ? 0 : 6,
+							scale: O(u) ? 1 : .9
+						},
+						animate: {
+							opacity: 1,
+							y: 0,
+							scale: 1
+						},
+						exit: {
+							opacity: 0,
+							y: O(u) ? 0 : -6,
+							scale: O(u) ? 1 : .9
+						},
+						transition: {
+							duration: .2,
+							ease: O(r)
+						},
+						class: x(O(i)("inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold tabular-nums", O(S).amount > 0 ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400" : "bg-red-500/15 text-red-600 dark:text-red-400"))
+					}, {
+						default: j(() => [(C(), p(E(O(S).amount > 0 ? O(W) : O(U)), { class: "h-3.5 w-3.5" })), _(D(O(S).amount > 0 ? "+" : "-") + "$" + D(O(K)(Math.abs(O(S).amount))), 1)]),
+						_: 1
+					}, 8, [
+						"initial",
+						"exit",
+						"transition",
+						"class"
+					])) : m("", !0)]),
+					_: 1
+				})]))
+			]),
+			g("div", Ae, [g("div", je, [(C(), h(d, null, T(k, (e) => v(O(F).button, {
+				key: e.id,
+				type: "button",
+				"while-press": O(u) ? void 0 : { scale: .94 },
+				transition: O(n),
+				class: "flex flex-1 flex-col items-center gap-2 outline-none",
+				onClick: e.run
+			}, {
+				default: j(() => [g("span", Me, [(C(), p(E(e.icon), { class: "h-5 w-5" }))]), g("span", Ne, D(e.label), 1)]),
+				_: 2
+			}, 1032, [
+				"while-press",
+				"transition",
+				"onClick"
+			])), 64))])])
+		]));
+	}
+});
+export { Pe as t };
+
+//# sourceMappingURL=wallet-card-DOa9Q4pg.js.map