@lumen-dapps-kit/web3 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChainBrief, TxState } from './utils.cjs';
+export { TruncateAddressOpts, formatGwei, formatUnits, truncateAddress } from './utils.cjs';
+
+interface AddressDisplayProps {
+    /** Raw address. */
+    address: string;
+    /** Optional ENS / display name override. */
+    name?: string;
+    /** Show a small chain symbol after the address. */
+    chainSymbol?: string;
+    /** Enable click-to-copy. Defaults true. */
+    copyable?: boolean;
+    /** Surface treatment. */
+    variant?: 'pill' | 'inline';
+    /** Truncation params. */
+    head?: number;
+    tail?: number;
+    className?: string;
+}
+/**
+ * AddressDisplay — wallet address with optional name resolution, chain
+ * label, and click-to-copy. Chain-agnostic — you resolve ENS/name yourself
+ * (e.g. via wagmi's useEnsName) and pass it as `name`.
+ */
+declare const AddressDisplay: ({ address, name, chainSymbol, copyable, variant, head, tail, className, }: AddressDisplayProps) => react_jsx_runtime.JSX.Element;
+
+interface WalletPillProps {
+    /** Address — undefined renders the connect CTA. */
+    address?: string;
+    /** Display name (ENS, etc). */
+    name?: string;
+    /** Active chain symbol shown after the address. */
+    chainSymbol?: string;
+    onConnect?: () => void;
+    /** When provided, the pill becomes a click target (opens an account drawer, etc).
+     *  When omitted, the pill defaults to click-to-copy. */
+    onClick?: () => void;
+    /** Loading state during connect/reconnect handshake. */
+    pending?: boolean;
+    className?: string;
+}
+/**
+ * WalletPill — top-right wallet affordance. Renders a CONNECT button when
+ * disconnected; a pill with truncated address (+ optional ENS, chain symbol)
+ * when connected. Wallet-library agnostic — pass state in via props.
+ */
+declare const WalletPill: ({ address, name, chainSymbol, onConnect, onClick, pending, className, }: WalletPillProps) => react_jsx_runtime.JSX.Element;
+
+interface NetworkStatusProps {
+    /** "online" | "degraded" | "offline" */
+    state?: 'online' | 'degraded' | 'offline';
+    /** Latency in ms, rendered as "42ms". */
+    latencyMs?: number;
+    /** Optional override label ("NET ONLINE", "RPC DOWN", etc). */
+    label?: string;
+    className?: string;
+}
+/**
+ * NetworkStatus — the pulsing network-state pill from the header. Pairs
+ * with RPC health checks or a wagmi `useBlockNumber` watcher.
+ */
+declare const NetworkStatus: ({ state, latencyMs, label, className, }: NetworkStatusProps) => react_jsx_runtime.JSX.Element;
+
+interface ChainSelectorProps {
+    chains: ChainBrief[];
+    /** Selected chain id. */
+    value: ChainBrief['id'];
+    onChange?: (id: ChainBrief['id']) => void;
+    className?: string;
+}
+/**
+ * ChainSelector — a minimal dropdown for switching active networks. Pure
+ * controlled component — pair with wagmi's `useSwitchChain` for execution.
+ *
+ * For dApps that need testnet/mainnet groupings, sort the `chains` prop
+ * upstream (testnets last) — this component renders them in input order.
+ */
+declare const ChainSelector: ({ chains, value, onChange, className, }: ChainSelectorProps) => react_jsx_runtime.JSX.Element | null;
+
+interface GasIndicatorProps {
+    /** Current gas price in wei (bigint) or gwei (pass `unit="gwei"`). */
+    value: bigint | string | number;
+    /** Unit of the `value` prop. Defaults wei. */
+    unit?: 'wei' | 'gwei';
+    /** Optional threshold gwei values that flip tone (warn/err). */
+    thresholds?: {
+        warn: number;
+        err: number;
+    };
+    /** Label prefix. Defaults "GAS". */
+    label?: string;
+    className?: string;
+}
+/**
+ * GasIndicator — chip showing current gas price with tone shifts at warn/err
+ * thresholds. Drop into the footer status bar or near tx CTAs.
+ */
+declare const GasIndicator: ({ value, unit, thresholds, label, className, }: GasIndicatorProps) => react_jsx_runtime.JSX.Element;
+
+interface TxStatusProps {
+    state: TxState;
+    /** Tx hash, when available. */
+    hash?: string;
+    /** Optional block explorer URL to link to. */
+    explorerUrl?: string;
+    /** Optional title (defaults from state). */
+    title?: string;
+    /** Confirmations seen so far. */
+    confirmations?: number;
+    /** Required confirmations target. */
+    requiredConfirmations?: number;
+    className?: string;
+}
+/**
+ * TxStatus — transaction lifecycle indicator. Six canonical states, each
+ * with its own tone + dot/badge. Pair with wagmi's `useWaitForTransactionReceipt`
+ * to drive state, or any custom signer flow.
+ */
+declare const TxStatus: ({ state, hash, explorerUrl, title, confirmations, requiredConfirmations, className, }: TxStatusProps) => react_jsx_runtime.JSX.Element;
+
+interface AmountDisplayProps {
+    /** Raw value in base units (e.g. wei for ETH). */
+    value: bigint | string;
+    /** Decimal places of the token. */
+    decimals: number;
+    /** Symbol to render after the amount. */
+    symbol?: string;
+    /** Decimals to display. Defaults 4. */
+    displayDecimals?: number;
+    /** Size scale of the rendered amount. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** USD value (numeric). Renders as a caption beneath. */
+    usd?: number;
+    className?: string;
+}
+/**
+ * AmountDisplay — formats a base-unit bigint as a tabular-nums token amount
+ * with optional USD caption. Use for balances, deposits, claim amounts.
+ */
+declare const AmountDisplay: ({ value, decimals, symbol, displayDecimals, size, usd, className, }: AmountDisplayProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressDisplay, type AddressDisplayProps, AmountDisplay, type AmountDisplayProps, ChainBrief, ChainSelector, type ChainSelectorProps, GasIndicator, type GasIndicatorProps, NetworkStatus, type NetworkStatusProps, TxState, TxStatus, type TxStatusProps, WalletPill, type WalletPillProps };

package/dist/index.d.ts

@@ -0,0 +1,143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChainBrief, TxState } from './utils.js';
+export { TruncateAddressOpts, formatGwei, formatUnits, truncateAddress } from './utils.js';
+
+interface AddressDisplayProps {
+    /** Raw address. */
+    address: string;
+    /** Optional ENS / display name override. */
+    name?: string;
+    /** Show a small chain symbol after the address. */
+    chainSymbol?: string;
+    /** Enable click-to-copy. Defaults true. */
+    copyable?: boolean;
+    /** Surface treatment. */
+    variant?: 'pill' | 'inline';
+    /** Truncation params. */
+    head?: number;
+    tail?: number;
+    className?: string;
+}
+/**
+ * AddressDisplay — wallet address with optional name resolution, chain
+ * label, and click-to-copy. Chain-agnostic — you resolve ENS/name yourself
+ * (e.g. via wagmi's useEnsName) and pass it as `name`.
+ */
+declare const AddressDisplay: ({ address, name, chainSymbol, copyable, variant, head, tail, className, }: AddressDisplayProps) => react_jsx_runtime.JSX.Element;
+
+interface WalletPillProps {
+    /** Address — undefined renders the connect CTA. */
+    address?: string;
+    /** Display name (ENS, etc). */
+    name?: string;
+    /** Active chain symbol shown after the address. */
+    chainSymbol?: string;
+    onConnect?: () => void;
+    /** When provided, the pill becomes a click target (opens an account drawer, etc).
+     *  When omitted, the pill defaults to click-to-copy. */
+    onClick?: () => void;
+    /** Loading state during connect/reconnect handshake. */
+    pending?: boolean;
+    className?: string;
+}
+/**
+ * WalletPill — top-right wallet affordance. Renders a CONNECT button when
+ * disconnected; a pill with truncated address (+ optional ENS, chain symbol)
+ * when connected. Wallet-library agnostic — pass state in via props.
+ */
+declare const WalletPill: ({ address, name, chainSymbol, onConnect, onClick, pending, className, }: WalletPillProps) => react_jsx_runtime.JSX.Element;
+
+interface NetworkStatusProps {
+    /** "online" | "degraded" | "offline" */
+    state?: 'online' | 'degraded' | 'offline';
+    /** Latency in ms, rendered as "42ms". */
+    latencyMs?: number;
+    /** Optional override label ("NET ONLINE", "RPC DOWN", etc). */
+    label?: string;
+    className?: string;
+}
+/**
+ * NetworkStatus — the pulsing network-state pill from the header. Pairs
+ * with RPC health checks or a wagmi `useBlockNumber` watcher.
+ */
+declare const NetworkStatus: ({ state, latencyMs, label, className, }: NetworkStatusProps) => react_jsx_runtime.JSX.Element;
+
+interface ChainSelectorProps {
+    chains: ChainBrief[];
+    /** Selected chain id. */
+    value: ChainBrief['id'];
+    onChange?: (id: ChainBrief['id']) => void;
+    className?: string;
+}
+/**
+ * ChainSelector — a minimal dropdown for switching active networks. Pure
+ * controlled component — pair with wagmi's `useSwitchChain` for execution.
+ *
+ * For dApps that need testnet/mainnet groupings, sort the `chains` prop
+ * upstream (testnets last) — this component renders them in input order.
+ */
+declare const ChainSelector: ({ chains, value, onChange, className, }: ChainSelectorProps) => react_jsx_runtime.JSX.Element | null;
+
+interface GasIndicatorProps {
+    /** Current gas price in wei (bigint) or gwei (pass `unit="gwei"`). */
+    value: bigint | string | number;
+    /** Unit of the `value` prop. Defaults wei. */
+    unit?: 'wei' | 'gwei';
+    /** Optional threshold gwei values that flip tone (warn/err). */
+    thresholds?: {
+        warn: number;
+        err: number;
+    };
+    /** Label prefix. Defaults "GAS". */
+    label?: string;
+    className?: string;
+}
+/**
+ * GasIndicator — chip showing current gas price with tone shifts at warn/err
+ * thresholds. Drop into the footer status bar or near tx CTAs.
+ */
+declare const GasIndicator: ({ value, unit, thresholds, label, className, }: GasIndicatorProps) => react_jsx_runtime.JSX.Element;
+
+interface TxStatusProps {
+    state: TxState;
+    /** Tx hash, when available. */
+    hash?: string;
+    /** Optional block explorer URL to link to. */
+    explorerUrl?: string;
+    /** Optional title (defaults from state). */
+    title?: string;
+    /** Confirmations seen so far. */
+    confirmations?: number;
+    /** Required confirmations target. */
+    requiredConfirmations?: number;
+    className?: string;
+}
+/**
+ * TxStatus — transaction lifecycle indicator. Six canonical states, each
+ * with its own tone + dot/badge. Pair with wagmi's `useWaitForTransactionReceipt`
+ * to drive state, or any custom signer flow.
+ */
+declare const TxStatus: ({ state, hash, explorerUrl, title, confirmations, requiredConfirmations, className, }: TxStatusProps) => react_jsx_runtime.JSX.Element;
+
+interface AmountDisplayProps {
+    /** Raw value in base units (e.g. wei for ETH). */
+    value: bigint | string;
+    /** Decimal places of the token. */
+    decimals: number;
+    /** Symbol to render after the amount. */
+    symbol?: string;
+    /** Decimals to display. Defaults 4. */
+    displayDecimals?: number;
+    /** Size scale of the rendered amount. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** USD value (numeric). Renders as a caption beneath. */
+    usd?: number;
+    className?: string;
+}
+/**
+ * AmountDisplay — formats a base-unit bigint as a tabular-nums token amount
+ * with optional USD caption. Use for balances, deposits, claim amounts.
+ */
+declare const AmountDisplay: ({ value, decimals, symbol, displayDecimals, size, usd, className, }: AmountDisplayProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressDisplay, type AddressDisplayProps, AmountDisplay, type AmountDisplayProps, ChainBrief, ChainSelector, type ChainSelectorProps, GasIndicator, type GasIndicatorProps, NetworkStatus, type NetworkStatusProps, TxState, TxStatus, type TxStatusProps, WalletPill, type WalletPillProps };

package/dist/index.js

@@ -0,0 +1,376 @@
+import { truncateAddress, formatGwei, formatUnits } from './chunk-AMDZMZJO.js';
+export { formatGwei, formatUnits, truncateAddress } from './chunk-AMDZMZJO.js';
+import { useState, useCallback } from 'react';
+import { cn, Button, PulseDot, StatusBadge } from '@lumen-dapps-kit/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var AddressDisplay = ({
+  address,
+  name,
+  chainSymbol,
+  copyable = true,
+  variant = "pill",
+  head = 4,
+  tail = 4,
+  className
+}) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    if (!copyable || !address) return;
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  }, [address, copyable]);
+  const label = name || truncateAddress(address, { head, tail });
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        disabled: !copyable,
+        className: cn(
+          "mono text-[11px] text-ink-900 hover:text-white transition-colors",
+          className
+        ),
+        title: address,
+        children: copied ? "COPIED" : label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      disabled: !copyable,
+      title: address,
+      className: cn(
+        "flex items-center gap-2 px-3 h-8 hairline mono text-[11px] transition-colors",
+        copyable && "hover:bg-white/5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-white", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "text-ink-900", children: copied ? "COPIED" : label }),
+        chainSymbol && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-ink-700", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "text-ink-700", children: chainSymbol })
+        ] })
+      ]
+    }
+  );
+};
+var WalletPill = ({
+  address,
+  name,
+  chainSymbol,
+  onConnect,
+  onClick,
+  pending,
+  className
+}) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    if (!address) return;
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  }, [address]);
+  if (!address) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        size: "sm",
+        onClick: onConnect,
+        disabled: pending,
+        className: cn(className),
+        children: pending ? "CONNECTING\u2026" : "CONNECT WALLET"
+      }
+    );
+  }
+  const handleClick = onClick ?? handleCopy;
+  const label = copied ? "COPIED" : name || truncateAddress(address);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      title: address,
+      className: cn(
+        "flex items-center gap-2 px-3 h-8 hairline mono text-[11px] hover:bg-white/5 transition-colors",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-white", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "text-ink-900", children: label }),
+        chainSymbol && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-ink-700", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "text-ink-700", children: chainSymbol })
+        ] })
+      ]
+    }
+  );
+};
+var TONE = {
+  online: { dot: "ok", txt: "NET ONLINE" },
+  degraded: { dot: "warn", txt: "NET DEGRADED" },
+  offline: { dot: "err", txt: "NET OFFLINE" }
+};
+var NetworkStatus = ({
+  state = "online",
+  latencyMs,
+  label,
+  className
+}) => {
+  const tone = TONE[state];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-3 h-8 hairline mono text-[11px] text-ink-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(PulseDot, { tone: tone.dot }),
+        /* @__PURE__ */ jsx("span", { children: label ?? tone.txt }),
+        typeof latencyMs === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-ink-600", children: "\xB7" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-ink-700", children: [
+            Math.round(latencyMs),
+            "ms"
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ChainSelector = ({
+  chains,
+  value,
+  onChange,
+  className
+}) => {
+  const [open, setOpen] = useState(false);
+  const active = chains.find((c) => c.id === value) ?? chains[0];
+  if (!active) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        className: "flex items-center gap-2 px-3 h-8 hairline mono text-[11px] hover:bg-white/5",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-1.5 h-1.5",
+              style: { backgroundColor: active.color ?? "#ffffff" },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-ink-900", children: active.symbol }),
+          /* @__PURE__ */ jsx("span", { className: "text-ink-700", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "text-ink-700 text-[10.5px]", children: active.name }),
+          active.testnet && /* @__PURE__ */ jsx("span", { className: "text-signal-warn ml-1", children: "TESTNET" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-40",
+          onClick: () => setOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "listbox",
+          className: "absolute right-0 mt-1 min-w-[240px] glass z-50 p-1",
+          children: chains.map((c) => {
+            const selected = c.id === value;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                role: "option",
+                "aria-selected": selected,
+                type: "button",
+                onClick: () => {
+                  onChange?.(c.id);
+                  setOpen(false);
+                },
+                className: cn(
+                  "w-full flex items-center gap-2 px-3 h-8 mono text-[11px] text-left transition-colors",
+                  selected ? "bg-white text-black" : "text-ink-800 hover:bg-white/5"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "w-1.5 h-1.5",
+                      style: { backgroundColor: c.color ?? "#ffffff" },
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "font-medium",
+                        selected ? "text-black" : "text-ink-900"
+                      ),
+                      children: c.symbol
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        selected ? "text-black/60" : "text-ink-700"
+                      ),
+                      children: [
+                        "\xB7 ",
+                        c.name
+                      ]
+                    }
+                  ),
+                  c.testnet && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "ml-auto",
+                        selected ? "text-black" : "text-signal-warn"
+                      ),
+                      children: "TESTNET"
+                    }
+                  )
+                ]
+              },
+              c.id
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+};
+var GasIndicator = ({
+  value,
+  unit = "wei",
+  thresholds = { warn: 40, err: 100 },
+  label = "GAS",
+  className
+}) => {
+  const gwei = unit === "gwei" ? Number(value) : Number(typeof value === "bigint" ? value : BigInt(value)) / 1e9;
+  const tone = gwei >= thresholds.err ? "text-signal-err" : gwei >= thresholds.warn ? "text-signal-warn" : "text-signal-ok";
+  return /* @__PURE__ */ jsxs("span", { className: cn("mono text-[10.5px] tracking-wider", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-ink-800", children: label }),
+    " ",
+    /* @__PURE__ */ jsxs("span", { className: cn("tabular-nums", tone), children: [
+      formatGwei(value),
+      " gwei"
+    ] })
+  ] });
+};
+var COPY = {
+  idle: { title: "IDLE", tone: "muted", live: false },
+  preparing: { title: "PREPARING", tone: "data", live: true },
+  "awaiting-signature": { title: "AWAITING SIGNATURE", tone: "warn", live: true },
+  pending: { title: "PENDING", tone: "data", live: true },
+  confirmed: { title: "CONFIRMED", tone: "ok", live: false },
+  failed: { title: "FAILED", tone: "err", live: false },
+  rejected: { title: "REJECTED", tone: "err", live: false }
+};
+var TxStatus = ({
+  state,
+  hash,
+  explorerUrl,
+  title,
+  confirmations,
+  requiredConfirmations,
+  className
+}) => {
+  const copy = COPY[state];
+  const label = title ?? copy.title;
+  const link = hash && explorerUrl ? `${explorerUrl.replace(/\/$/, "")}/tx/${hash}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between hairline px-3 py-2.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          copy.live ? /* @__PURE__ */ jsx(PulseDot, { tone: copy.tone === "muted" ? "data" : copy.tone }) : /* @__PURE__ */ jsx(StatusBadge, { tone: copy.tone, dot: true, children: "" }),
+          /* @__PURE__ */ jsx("span", { className: "mono text-[11px] text-ink-900", children: label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mono text-[10.5px] text-ink-700", children: [
+          typeof confirmations === "number" && typeof requiredConfirmations === "number" && /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+            confirmations,
+            "/",
+            requiredConfirmations,
+            " CONF"
+          ] }),
+          hash && (link ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link,
+              target: "_blank",
+              rel: "noreferrer",
+              className: "text-ink-800 hover:text-white underline-offset-2 hover:underline",
+              children: truncateAddress(hash, { head: 6, tail: 4 })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-ink-800", children: truncateAddress(hash, { head: 6, tail: 4 }) }))
+        ] })
+      ]
+    }
+  );
+};
+var SIZE = {
+  sm: "text-[14px]",
+  md: "text-[18px]",
+  lg: "text-[24px]",
+  xl: "text-[40px]"
+};
+var AmountDisplay = ({
+  value,
+  decimals,
+  symbol,
+  displayDecimals = 4,
+  size = "md",
+  usd,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: cn("leading-none", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("font-semibold tabular-nums tracking-tight", SIZE[size]),
+        children: formatUnits(value, decimals, displayDecimals)
+      }
+    ),
+    symbol && /* @__PURE__ */ jsx("span", { className: "text-ink-700 text-[11px]", children: symbol })
+  ] }),
+  typeof usd === "number" && /* @__PURE__ */ jsxs("div", { className: "mono text-[10.5px] text-ink-700 mt-1 tabular-nums", children: [
+    "$",
+    usd.toLocaleString("en-US", { maximumFractionDigits: 2 })
+  ] })
+] });
+
+export { AddressDisplay, AmountDisplay, ChainSelector, GasIndicator, NetworkStatus, TxStatus, WalletPill };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map