@chainvibe/components 0.2.0

package/README.md

@@ -0,0 +1 @@
+# ChainVibe components

package/dist/_virtual/config.js

@@ -0,0 +1,4 @@
+var config = {};
+export {
+  config as __exports
+};

package/dist/_virtual/core.js

@@ -0,0 +1,4 @@
+var core = {};
+export {
+  core as __exports
+};

package/dist/_virtual/debug.js

@@ -0,0 +1,4 @@
+var debug = {};
+export {
+  debug as __exports
+};

package/dist/_virtual/encode.js

@@ -0,0 +1,4 @@
+var encode = {};
+export {
+  encode as __exports
+};

package/dist/_virtual/helpers.js

@@ -0,0 +1,4 @@
+var helpers = {};
+export {
+  helpers as __exports
+};

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+import { __require as requireDist } from "../node_modules/compress-json/dist/index.js";
+var distExports = requireDist();
+export {
+  distExports as d
+};

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var dist = {};
+export {
+  dist as __exports
+};

package/dist/_virtual/memory.js

@@ -0,0 +1,4 @@
+var memory = {};
+export {
+  memory as __exports
+};

package/dist/_virtual/number.js

@@ -0,0 +1,4 @@
+var number = {};
+export {
+  number as __exports
+};

package/dist/components/NotificationBox/NotificationBox.d.ts

@@ -0,0 +1,41 @@
+import { HTMLAttributes } from 'react';
+import { ChainVibeEvent } from '../../types/events';
+import { Abi } from 'abitype';
+export interface NotificationBoxProps<TAbi extends Abi> extends HTMLAttributes<HTMLDivElement> {
+    event?: ChainVibeEvent<TAbi>;
+    wrapperClassName?: string;
+    headerClassName?: string;
+    titleGroupClassName?: string;
+    titleClassName?: string;
+    badgeClassName?: string;
+    timestampClassName?: string;
+    messageClassName?: string;
+    metaGridClassName?: string;
+    metaItemClassName?: string;
+    metaLabelClassName?: string;
+    metaValueClassName?: string;
+    metaMonoClassName?: string;
+    show?: {
+        title?: boolean;
+        message?: boolean;
+        action?: boolean;
+        timestamp?: boolean;
+        wallet?: boolean;
+        hash?: boolean;
+        amount?: boolean;
+        amountUSD?: boolean;
+        tokenSymbol?: boolean;
+        rawAmounts?: boolean;
+        timestampTimeAgo?: boolean;
+    };
+    format?: {
+        timestampTimeAgo?: (timestamp: number) => string;
+        timestamp?: (timestamp: number) => string;
+        hash?: (hash: `0x${string}`) => string;
+        wallet?: (wallet: `0x${string}`) => string;
+        amount?: (amount: string) => string;
+        amountUSD?: (amount: string) => string;
+    };
+}
+export declare function NotificationBox<TAbi extends Abi>({ event, wrapperClassName, headerClassName, titleGroupClassName, titleClassName, badgeClassName, timestampClassName, messageClassName, metaGridClassName, metaItemClassName, metaLabelClassName, metaValueClassName, metaMonoClassName, show, format, ...props }: NotificationBoxProps<TAbi>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=NotificationBox.d.ts.map

package/dist/components/NotificationBox/NotificationBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBox.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBox/NotificationBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,SAAS,CAAC;AA2BnC,MAAM,WAAW,oBAAoB,CACnC,IAAI,SAAS,GAAG,CAChB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,KAAK,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;IACF,MAAM,CAAC,EAAE;QACP,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QACjD,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QAC1C,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,CAAC;QACvC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,CAAC;QAC3C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;QACpC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;KACxC,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,IAAI,SAAS,GAAG,EAAE,EAChD,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,IAKC,EACD,MAAM,EACN,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,IAAI,CAAC,kDA0I5B"}

package/dist/components/NotificationBox/NotificationBox.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import styles from "./NotificationBox.module.css.js";
+import { cn } from "../utils/cn.js";
+const abbreviate = (s) => `${s.slice(0, 6)}...${s.slice(-4)}`, formatNumber = (n) => {
+  const x = parseFloat(n);
+  return x >= 1e9 ? (x / 1e9).toFixed(2) + "B" : x >= 1e6 ? (x / 1e6).toFixed(2) + "M" : x >= 1e3 ? (x / 1e3).toFixed(2) + "K" : x.toString();
+}, formatTimeAgo = (ts) => {
+  const d = Date.now() - ts;
+  return d < 6e4 ? "Just now" : d < 36e5 ? `${Math.floor(d / 6e4)}m` : d < 864e5 ? `${Math.floor(d / 36e5)}h` : `${Math.floor(d / 864e5)}d`;
+};
+function NotificationBox({
+  event,
+  wrapperClassName,
+  headerClassName,
+  titleGroupClassName,
+  titleClassName,
+  badgeClassName,
+  timestampClassName,
+  messageClassName,
+  metaGridClassName,
+  metaItemClassName,
+  metaLabelClassName,
+  metaValueClassName,
+  metaMonoClassName,
+  show = {
+    title: !0,
+    message: !0,
+    action: !0,
+    timestampTimeAgo: !0
+  },
+  format,
+  ...props
+}) {
+  const [displayTime, setDisplayTime] = useState(""), fmt = format?.timestampTimeAgo || formatTimeAgo;
+  if (useEffect(() => {
+    if (!show.timestampTimeAgo || !event) return;
+    setDisplayTime(fmt(event.timestamp));
+    const i = setInterval(() => setDisplayTime(fmt(event.timestamp)), 5 * 1e3);
+    return () => clearInterval(i);
+  }, [event?.timestamp, show.timestampTimeAgo, fmt]), !event) return null;
+  const { data } = event, fmtTs = show.timestampTimeAgo ? displayTime : format?.timestamp ? format.timestamp(event.timestamp) : new Date(event.timestamp).toLocaleString();
+  return /* @__PURE__ */ jsxs("div", { className: cn(styles.notificationBox, wrapperClassName), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(styles.header, headerClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(styles.titleGroup, titleGroupClassName), children: [
+        show.title && /* @__PURE__ */ jsx("div", { className: cn(styles.title, titleClassName), children: data.title }),
+        show.action && /* @__PURE__ */ jsx("div", { className: cn(styles.badge, badgeClassName), children: data.action })
+      ] }),
+      (show.timestamp || show.timestampTimeAgo) && /* @__PURE__ */ jsx("div", { className: cn(styles.timestamp, timestampClassName), children: fmtTs })
+    ] }),
+    show.message && /* @__PURE__ */ jsx("div", { className: cn(styles.message, messageClassName), children: data.message }),
+    (show.amount || show.tokenSymbol || show.amountUSD || show.wallet || show.hash) && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaGrid, metaGridClassName), children: [
+      show.amount && data.amount && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "Amount" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaValue, metaValueClassName), children: format?.amount ? format.amount(data.amount) : formatNumber(data.amount) })
+      ] }),
+      show.tokenSymbol && data.tokenSymbol && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "Token" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaValue, metaValueClassName), children: data.tokenSymbol })
+      ] }),
+      show.amountUSD && data.amountUSD && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "USD" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaValue, metaValueClassName), children: format?.amountUSD ? format.amountUSD(data.amountUSD) : formatNumber(data.amountUSD) })
+      ] }),
+      show.wallet && data.wallet && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "Wallet" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaMono, metaMonoClassName), children: format?.wallet ? format.wallet(data.wallet) : abbreviate(data.wallet) })
+      ] }),
+      show.hash && data.hash && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "Hash" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaMono, metaMonoClassName), children: format?.hash ? format.hash(data.hash) : abbreviate(data.hash) })
+      ] }),
+      show.rawAmounts && data.amountRaw && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "Amount Raw" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaMono, metaMonoClassName), children: data.amountRaw })
+      ] }),
+      show.rawAmounts && data.amountUSDRaw && /* @__PURE__ */ jsxs("div", { className: cn(styles.metaItem, metaItemClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaLabel, metaLabelClassName), children: "USD Raw" }),
+        /* @__PURE__ */ jsx("span", { className: cn(styles.metaMono, metaMonoClassName), children: data.amountUSDRaw })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NotificationBox
+};

package/dist/components/NotificationBox/NotificationBox.module.css

@@ -0,0 +1 @@
+:root{--cv-nb-bg: #f7f7f8;--cv-nb-bg-elevated: #ffffff;--cv-nb-border: #e6e7eb;--cv-nb-text: #0f172a;--cv-nb-muted: #6b7280;--cv-nb-accent: #3b82f6;--cv-nb-badge-bg: #eef2ff;--cv-nb-badge-text: #3730a3;--cv-nb-shadow: 0 10px 30px rgba(15, 23, 42, .08)}@media(prefers-color-scheme:dark){:root{--cv-nb-bg: #0b0f14;--cv-nb-bg-elevated: #121821;--cv-nb-border: #1f2937;--cv-nb-text: #e5e7eb;--cv-nb-muted: #94a3b8;--cv-nb-accent: #60a5fa;--cv-nb-badge-bg: #1e293b;--cv-nb-badge-text: #c7d2fe;--cv-nb-shadow: 0 16px 40px rgba(0, 0, 0, .35)}}[data-theme=light]{--cv-nb-bg: #f7f7f8;--cv-nb-bg-elevated: #ffffff;--cv-nb-border: #e6e7eb;--cv-nb-text: #0f172a;--cv-nb-muted: #6b7280;--cv-nb-accent: #3b82f6;--cv-nb-badge-bg: #eef2ff;--cv-nb-badge-text: #3730a3;--cv-nb-shadow: 0 10px 30px rgba(15, 23, 42, .08)}[data-theme=dark]{--cv-nb-bg: #0b0f14;--cv-nb-bg-elevated: #121821;--cv-nb-border: #1f2937;--cv-nb-text: #e5e7eb;--cv-nb-muted: #94a3b8;--cv-nb-accent: #60a5fa;--cv-nb-badge-bg: #1e293b;--cv-nb-badge-text: #c7d2fe;--cv-nb-shadow: 0 16px 40px rgba(0, 0, 0, .35)}._notificationBox_q03fz_51{background:var(--cv-nb-bg-elevated);border:1px solid var(--cv-nb-border);border-radius:14px;padding:16px 18px;color:var(--cv-nb-text);box-shadow:var(--cv-nb-shadow);display:flex;flex-direction:column;gap:12px;min-width:260px}._header_q03fz_64{display:flex;align-items:center;justify-content:space-between;gap:12px}._titleGroup_q03fz_71{display:flex;align-items:center;gap:10px;flex-wrap:wrap}._title_q03fz_71{font-size:15px;font-weight:600;letter-spacing:.01em}._badge_q03fz_84{font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;background:var(--cv-nb-badge-bg);color:var(--cv-nb-badge-text);text-transform:uppercase;letter-spacing:.08em}._timestamp_q03fz_95{font-size:12px;color:var(--cv-nb-muted);white-space:nowrap}._message_q03fz_101{font-size:14px;line-height:1.5;color:var(--cv-nb-text)}._metaGrid_q03fz_107{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 16px;padding-top:8px;border-top:1px solid var(--cv-nb-border)}._metaItem_q03fz_115{display:flex;flex-direction:column;gap:4px}._metaLabel_q03fz_121{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cv-nb-muted)}._metaValue_q03fz_128{font-size:13px;font-weight:600}._metaMono_q03fz_133{font-size:12px;font-family:SFMono-Regular,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:var(--cv-nb-text)}

package/dist/components/NotificationBox/NotificationBox.module.css.js

@@ -0,0 +1,29 @@
+const notificationBox = "_notificationBox_q03fz_51", header = "_header_q03fz_64", titleGroup = "_titleGroup_q03fz_71", title = "_title_q03fz_71", badge = "_badge_q03fz_84", timestamp = "_timestamp_q03fz_95", message = "_message_q03fz_101", metaGrid = "_metaGrid_q03fz_107", metaItem = "_metaItem_q03fz_115", metaLabel = "_metaLabel_q03fz_121", metaValue = "_metaValue_q03fz_128", metaMono = "_metaMono_q03fz_133", styles = {
+  notificationBox,
+  header,
+  titleGroup,
+  title,
+  badge,
+  timestamp,
+  message,
+  metaGrid,
+  metaItem,
+  metaLabel,
+  metaValue,
+  metaMono
+};
+export {
+  badge,
+  styles as default,
+  header,
+  message,
+  metaGrid,
+  metaItem,
+  metaLabel,
+  metaMono,
+  metaValue,
+  notificationBox,
+  timestamp,
+  title,
+  titleGroup
+};

package/dist/components/NotificationBox/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationBox, type NotificationBoxProps } from './NotificationBox';
+export { type ChainVibeEvent } from '../../types/events';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NotificationBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/NotificationBoxAmount/NotificationBoxAmount.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { NumberFlowProps } from '@number-flow/react';
+export interface NotificationBoxAmountProps extends HTMLAttributes<HTMLDivElement> {
+    amount: string | number;
+    label?: string;
+    prefix?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    numberFlowProps?: Partial<NumberFlowProps>;
+}
+export declare function NotificationBoxAmount({ amount, label, prefix, wrapperClassName, labelClassName, valueClassName, numberFlowProps, ...props }: NotificationBoxAmountProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationBoxAmount.d.ts.map

package/dist/components/NotificationBoxAmount/NotificationBoxAmount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBoxAmount.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBoxAmount/NotificationBoxAmount.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAItE,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChF,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,KAAyC,EACzC,MAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAuB5B"}

package/dist/components/NotificationBoxAmount/NotificationBoxAmount.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "../../node_modules/number-flow/dist/lite-BtgQ9jUv.js";
+import { N as NumberFlow } from "../../node_modules/@number-flow/react/dist/NumberFlow-client-48rw3j0J.js";
+import styles from "./NotificationBoxAmount.module.css.js";
+import { cn } from "../utils/cn.js";
+function NotificationBoxAmount({
+  amount,
+  label = "USD moved since opened the page",
+  prefix = "$",
+  wrapperClassName,
+  labelClassName,
+  valueClassName,
+  numberFlowProps,
+  ...props
+}) {
+  const numericValue = typeof amount == "string" ? parseFloat(amount) || 0 : amount;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(styles.notificationBoxAmount, wrapperClassName),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(styles.value, valueClassName), children: [
+          prefix,
+          /* @__PURE__ */ jsx(
+            NumberFlow,
+            {
+              value: numericValue,
+              format: {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+              },
+              ...numberFlowProps
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx("div", { className: cn(styles.label, labelClassName), children: label })
+      ]
+    }
+  );
+}
+export {
+  NotificationBoxAmount
+};

package/dist/components/NotificationBoxAmount/NotificationBoxAmount.module.css

@@ -0,0 +1 @@
+:root{--cv-nba-bg: #f7f7f8;--cv-nba-bg-elevated: #ffffff;--cv-nba-border: #e6e7eb;--cv-nba-text: #0f172a;--cv-nba-muted: #6b7280;--cv-nba-accent: #3b82f6;--cv-nba-shadow: 0 10px 30px rgba(15, 23, 42, .08)}@media(prefers-color-scheme:dark){:root{--cv-nba-bg: #0b0f14;--cv-nba-bg-elevated: #121821;--cv-nba-border: #1f2937;--cv-nba-text: #e5e7eb;--cv-nba-muted: #94a3b8;--cv-nba-accent: #60a5fa;--cv-nba-shadow: 0 16px 40px rgba(0, 0, 0, .35)}}[data-theme=light]{--cv-nba-bg: #f7f7f8;--cv-nba-bg-elevated: #ffffff;--cv-nba-border: #e6e7eb;--cv-nba-text: #0f172a;--cv-nba-muted: #6b7280;--cv-nba-accent: #3b82f6;--cv-nba-shadow: 0 10px 30px rgba(15, 23, 42, .08)}[data-theme=dark]{--cv-nba-bg: #0b0f14;--cv-nba-bg-elevated: #121821;--cv-nba-border: #1f2937;--cv-nba-text: #e5e7eb;--cv-nba-muted: #94a3b8;--cv-nba-accent: #60a5fa;--cv-nba-shadow: 0 16px 40px rgba(0, 0, 0, .35)}._notificationBoxAmount_18aq3_43{background:var(--cv-nba-bg-elevated);border:1px solid var(--cv-nba-border);border-radius:14px;padding:20px 24px;color:var(--cv-nba-text);box-shadow:var(--cv-nba-shadow);display:flex;flex-direction:column;gap:8px;min-width:200px;text-align:center}._label_18aq3_57{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--cv-nba-muted)}._value_18aq3_65{font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--cv-nba-text);font-variant-numeric:tabular-nums;line-height:1.2}

package/dist/components/NotificationBoxAmount/NotificationBoxAmount.module.css.js

@@ -0,0 +1,11 @@
+const notificationBoxAmount = "_notificationBoxAmount_18aq3_43", label = "_label_18aq3_57", value = "_value_18aq3_65", styles = {
+  notificationBoxAmount,
+  label,
+  value
+};
+export {
+  styles as default,
+  label,
+  notificationBoxAmount,
+  value
+};

package/dist/components/NotificationBoxAmount/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationBoxAmount, type NotificationBoxAmountProps, } from './NotificationBoxAmount';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NotificationBoxAmount/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBoxAmount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC"}

package/dist/components/NotificationBoxStack/NotificationBoxStack.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ToasterProps, ExternalToast } from 'sonner';
+import { ChainVibeEvent } from '../../types/events';
+import { NotificationBoxProps } from '../NotificationBox/NotificationBox';
+import { Abi } from 'abitype';
+export interface NotificationBoxStackProps<TAbi extends Abi> extends React.HTMLAttributes<HTMLDivElement> {
+    events?: ChainVibeEvent<TAbi>[];
+    itemsCount?: number;
+    notificationBoxProps?: Partial<Omit<NotificationBoxProps<TAbi>, "event">>;
+    toastOptions?: ExternalToast;
+    toasterProps?: ToasterProps;
+}
+export declare function NotificationBoxStack<TAbi extends Abi>({ events, itemsCount, notificationBoxProps, toastOptions, toasterProps, }: NotificationBoxStackProps<TAbi>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationBoxStack.d.ts.map

package/dist/components/NotificationBoxStack/NotificationBoxStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBoxStack.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBoxStack/NotificationBoxStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAEL,YAAY,EAEZ,KAAK,aAAa,EACnB,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAEnC,OAAO,mCAAmC,CAAC;AAE3C,MAAM,WAAW,yBAAyB,CACxC,IAAI,SAAS,GAAG,CAChB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1E,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAAC,IAAI,SAAS,GAAG,EAAE,EACrD,MAAW,EACX,UAAc,EACd,oBAAyB,EACzB,YAAY,EACZ,YAAY,GACb,EAAE,yBAAyB,CAAC,IAAI,CAAC,2CA4CjC"}

package/dist/components/NotificationBoxStack/NotificationBoxStack.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { toast, Toaster } from "../../node_modules/sonner/dist/index.js";
+import { NotificationBox } from "../NotificationBox/NotificationBox.js";
+function NotificationBoxStack({
+  events = [],
+  itemsCount = 5,
+  notificationBoxProps = {},
+  toastOptions,
+  toasterProps
+}) {
+  const toastIds = useRef(/* @__PURE__ */ new Map());
+  return useEffect(() => {
+    const activeKeys = /* @__PURE__ */ new Set();
+    events.slice(-itemsCount).forEach((event) => {
+      const key = `${event.data.id}`;
+      if (activeKeys.add(key), toastIds.current.has(key)) return;
+      const id = toast.custom(
+        () => /* @__PURE__ */ jsx(NotificationBox, { event, ...notificationBoxProps }),
+        {
+          id: key,
+          duration: 1 / 0,
+          dismissible: !1,
+          classNames: {
+            toast: "cv-sonner-toast"
+          },
+          ...toastOptions
+        }
+      );
+      toastIds.current.set(key, id);
+    }), Array.from(toastIds.current.entries()).forEach(([key, id]) => {
+      activeKeys.has(key) || (toast.dismiss(id), toastIds.current.delete(key));
+    });
+  }, [events, toastOptions, notificationBoxProps]), /* @__PURE__ */ jsx(
+    Toaster,
+    {
+      richColors: !1,
+      closeButton: !1,
+      duration: 1 / 0,
+      visibleToasts: itemsCount,
+      ...toasterProps
+    }
+  );
+}
+export {
+  NotificationBoxStack
+};

package/dist/components/NotificationBoxStack/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationBoxStack, type NotificationBoxStackProps, } from './NotificationBoxStack';
+export { type ChainVibeEvent } from '../../types/events';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NotificationBoxStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBoxStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,KAAK,yBAAyB,GAC/B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare const cn: (...classes: (string | undefined | false)[]) => string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/components/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/components/utils/cn.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,WAC1B,CAAC"}

package/dist/components/utils/cn.js

@@ -0,0 +1,4 @@
+const cn = (...classes) => classes.filter(Boolean).join(" ");
+export {
+  cn
+};

package/dist/dev/utils.js

@@ -0,0 +1,55 @@
+const protocols = ["Aave V3", "Uniswap V3", "Curve", "Balancer", "Lido"], chains = ["Ethereum", "Arbitrum", "Optimism", "Polygon", "Base"], actionsWithContext = [
+  { action: "Supply", verb: "supplied" },
+  { action: "Withdraw", verb: "withdrew" },
+  { action: "Swap", verb: "swapped" },
+  { action: "Stake", verb: "staked" },
+  { action: "Mint", verb: "minted" }
+], tokens = [
+  { symbol: "ETH", decimals: 18, price: 2800 },
+  { symbol: "USDC", decimals: 6, price: 1 },
+  { symbol: "DAI", decimals: 18, price: 1 },
+  { symbol: "USDT", decimals: 6, price: 1 },
+  { symbol: "ARB", decimals: 18, price: 0.85 },
+  { symbol: "OP", decimals: 18, price: 2.1 },
+  { symbol: "MATIC", decimals: 18, price: 0.6 },
+  { symbol: "WBTC", decimals: 8, price: 42e3 }
+], randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min, randomPick = (arr) => arr[randomInt(0, arr.length - 1)], randomHex = (length) => {
+  const chars = "0123456789abcdef";
+  let out = "";
+  for (let i = 0; i < length; i += 1)
+    out += chars[randomInt(0, chars.length - 1)];
+  return out;
+}, randomAddress = () => `0x${randomHex(40)}`, formatAddress = (address) => `${address.slice(0, 6)}...${address.slice(-4)}`, formatAmount = (rawAmount, decimals) => {
+  const num = BigInt(rawAmount), divisor = BigInt(10 ** decimals), integer = num / divisor, trimmed = (num % divisor).toString().padStart(decimals, "0").replace(/0+$/, "");
+  return trimmed ? `${integer}.${trimmed}` : integer.toString();
+}, formatDisplayNumber = (numStr, decimals = 2) => {
+  const num = parseFloat(numStr);
+  return num >= 1e9 ? (num / 1e9).toFixed(decimals) + "B" : num >= 1e6 ? (num / 1e6).toFixed(decimals) + "M" : num >= 1e3 ? (num / 1e3).toFixed(decimals) + "K" : num.toFixed(decimals);
+}, generateRandomEvent = () => {
+  const token = randomPick(tokens), action = randomPick(actionsWithContext), protocol = randomPick(protocols), chain = randomPick(chains);
+  let amountMin, amountMax;
+  token.price > 1e3 ? (amountMin = 0.01, amountMax = 1) : token.price > 1 ? (amountMin = 10, amountMax = 1e4) : (amountMin = 100, amountMax = 1e5);
+  const amountWithDecimals = amountMin + Math.random() * (amountMax - amountMin) + Math.random(), amountRaw = BigInt(
+    Math.floor(amountWithDecimals * 10 ** token.decimals)
+  ).toString(), amount = formatAmount(amountRaw, token.decimals), amountDisplay = formatDisplayNumber(amount), amountUSDNumeric = parseFloat(amount) * token.price, amountUSD = `$${formatDisplayNumber(amountUSDNumeric.toString())}`, amountUSDRaw = amountUSDNumeric.toString();
+  return {
+    clientId: `client_${randomHex(8)}`,
+    timestamp: Date.now(),
+    data: {
+      id: `event_${randomHex(12)}`,
+      title: `${protocol} ${chain} ${action.action}`,
+      message: `User ${formatAddress(randomAddress())} ${action.verb} ${amountDisplay} ${token.symbol} (${amountUSD})`,
+      hash: randomAddress(),
+      wallet: randomAddress(),
+      tokenSymbol: token.symbol,
+      amount,
+      amountRaw,
+      amountUSD,
+      amountUSDRaw,
+      action: action.action
+    }
+  };
+};
+export {
+  generateRandomEvent
+};

package/dist/hooks/useChainVibeStream.js

@@ -0,0 +1,60 @@
+import { d as distExports } from "../_virtual/index.js";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { generateRandomEvent } from "../dev/utils.js";
+const useChainVibeStream = ({
+  id,
+  keepLast = 5,
+  onNewEvent
+}) => {
+  const [usdSinceStart, setUsdSinceStart] = useState("0"), [events, setEvents] = useState([]), wsRef = useRef(null), onNewEventRef = useRef(onNewEvent);
+  useEffect(() => {
+    onNewEventRef.current = onNewEvent;
+  }, [onNewEvent]);
+  const addRandomEvent = useCallback(() => {
+    const newEvent = generateRandomEvent();
+    setUsdSinceStart(
+      (prev) => (Number(prev) + Number(newEvent.data.amountUSDRaw || "0")).toString()
+    ), setEvents((prev) => {
+      onNewEventRef.current && onNewEventRef.current(newEvent);
+      const nextEvents = [...prev, newEvent];
+      return keepLast && nextEvents.length > keepLast ? nextEvents.slice(-keepLast) : nextEvents;
+    });
+  }, [keepLast]);
+  return useEffect(() => {
+    if (!id)
+      return console.log("[ChainVibe] No id provided, skipping WebSocket connection."), () => {
+      };
+    let didUnmount = !1;
+    const ws = new WebSocket(`wss://api.chainvi.be/stream/${id}`);
+    return wsRef.current = ws, ws.onopen = () => {
+      didUnmount || console.log(`[ChainVibe] WebSocket connected for project ${id}`);
+    }, ws.onmessage = (event) => {
+      try {
+        const payload = distExports.decompress(JSON.parse(event.data));
+        if (payload.recentEvents) {
+          setEvents(payload.recentEvents);
+          return;
+        }
+        if (!payload || !payload.data)
+          return;
+        setUsdSinceStart(
+          (prev) => (Number(prev) + Number(payload.data.amountUSDRaw || "0")).toString()
+        ), setEvents((prev) => {
+          onNewEventRef.current && onNewEventRef.current(payload);
+          const newEvents = [...prev, payload];
+          return keepLast && newEvents.length > keepLast ? newEvents.slice(-keepLast) : newEvents;
+        });
+      } catch (err) {
+        console.error("[ChainVibe] Error processing message:", err);
+      }
+    }, ws.onerror = (error) => {
+      !didUnmount && ws.readyState !== WebSocket.CLOSING && console.error(`[ChainVibe] WebSocket error for project ${id}`, error);
+    }, ws.onclose = () => {
+    }, () => {
+      didUnmount = !0, ws.close(), wsRef.current = null;
+    };
+  }, [id, keepLast]), { events, usdSinceStart, addRandomEvent };
+};
+export {
+  useChainVibeStream
+};

package/dist/index.js

@@ -0,0 +1,10 @@
+import { useChainVibeStream } from "./hooks/useChainVibeStream.js";
+import { NotificationBox } from "./components/NotificationBox/NotificationBox.js";
+import { NotificationBoxAmount } from "./components/NotificationBoxAmount/NotificationBoxAmount.js";
+import { NotificationBoxStack } from "./components/NotificationBoxStack/NotificationBoxStack.js";
+export {
+  NotificationBox,
+  NotificationBoxAmount,
+  NotificationBoxStack,
+  useChainVibeStream
+};