@medialane/ui 0.134.1 → 0.134.3

package/dist/components/coin-guarantees.cjs

@@ -0,0 +1,124 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var coin_guarantees_exports = {};
+__export(coin_guarantees_exports, {
+  CoinGuarantees: () => CoinGuarantees
+});
+module.exports = __toCommonJS(coin_guarantees_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_cn = require("../utils/cn.js");
+function whole(raw, decimals) {
+  try {
+    const units = BigInt(raw);
+    if (units <= 0n) return null;
+    const v = Number(units) / 10 ** decimals;
+    return isFinite(v) && v >= 1 ? v : null;
+  } catch {
+    return null;
+  }
+}
+const compact = (n) => new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 2 }).format(n);
+function Line({
+  label,
+  value,
+  detail,
+  href
+}) {
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold tabular-nums", children: value }),
+    detail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-muted-foreground", children: detail }),
+    href && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ExternalLink, { className: "h-3 w-3 text-muted-foreground/60" })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline justify-between gap-3 border-b border-border/40 py-2.5 last:border-b-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-muted-foreground", children: label }),
+    href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex items-baseline gap-1.5 transition-colors hover:text-primary active:opacity-70",
+        children: body
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-baseline gap-1.5", children: body })
+  ] });
+}
+function CoinGuarantees({
+  data,
+  isLoading,
+  decimals = 18,
+  maxTeamAllocationPercent,
+  contractUrl,
+  liquidityUrl,
+  blockUrl,
+  className
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("space-y-2.5", className), children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-9 animate-pulse rounded bg-muted-foreground/10" }, i)) });
+  }
+  if (!data) return null;
+  const supply = whole(data.totalSupplyRaw, decimals);
+  const allocation = whole(data.teamAllocationRaw, decimals);
+  const pct = data.teamAllocationPercent;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Guaranteed by the contract" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Line,
+      {
+        label: "Creator allocation",
+        value: pct != null ? `${pct}%` : allocation != null ? compact(allocation) : "\u2014",
+        detail: `capped at ${maxTeamAllocationPercent}%`,
+        href: contractUrl
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Line,
+      {
+        label: "Total supply",
+        value: supply != null ? compact(supply) : "\u2014",
+        detail: "fixed, cannot be increased",
+        href: contractUrl
+      }
+    ),
+    data.isLaunched ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Line,
+      {
+        label: "Liquidity",
+        value: "Locked permanently",
+        detail: data.liquidityPositionId ? `position #${data.liquidityPositionId}` : void 0,
+        href: liquidityUrl
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, { label: "Liquidity", value: "Not launched yet" }),
+    data.launchedAtBlock != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Line,
+      {
+        label: "Launched",
+        value: `Block ${data.launchedAtBlock.toLocaleString()}`,
+        href: blockUrl
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CoinGuarantees
+});
+//# sourceMappingURL=coin-guarantees.cjs.map

package/dist/components/coin-guarantees.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/coin-guarantees.tsx"],"sourcesContent":["\"use client\";\n\nimport { ExternalLink } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface CoinGuaranteesData {\n  isLaunched: boolean;\n  launchedAtBlock: number | null;\n  totalSupplyRaw: string;\n  teamAllocationRaw: string;\n  teamAllocationPercent: number | null;\n  liquidityPositionId: string | null;\n}\n\nexport interface CoinGuaranteesProps {\n  data: CoinGuaranteesData | null;\n  isLoading?: boolean;\n  decimals?: number;\n  maxTeamAllocationPercent: number;\n\n  contractUrl?: string;\n  liquidityUrl?: string;\n  blockUrl?: string;\n  className?: string;\n}\n\nfunction whole(raw: string, decimals: number): number | null {\n  try {\n    const units = BigInt(raw);\n    if (units <= 0n) return null;\n    const v = Number(units) / 10 ** decimals;\n    return isFinite(v) && v >= 1 ? v : null;\n  } catch {\n    return null;\n  }\n}\n\nconst compact = (n: number) =>\n  new Intl.NumberFormat(undefined, { notation: \"compact\", maximumFractionDigits: 2 }).format(n);\n\nfunction Line({\n  label,\n  value,\n  detail,\n  href,\n}: {\n  label: string;\n  value: string;\n  detail?: string;\n  href?: string;\n}) {\n  const body = (\n    <>\n      <span className=\"text-sm font-semibold tabular-nums\">{value}</span>\n      {detail && <span className=\"text-xs text-muted-foreground\">{detail}</span>}\n      {href && <ExternalLink className=\"h-3 w-3 text-muted-foreground/60\" />}\n    </>\n  );\n\n  return (\n    <div className=\"flex items-baseline justify-between gap-3 border-b border-border/40 py-2.5 last:border-b-0\">\n      <span className=\"text-xs text-muted-foreground\">{label}</span>\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex items-baseline gap-1.5 transition-colors hover:text-primary active:opacity-70\"\n        >\n          {body}\n        </a>\n      ) : (\n        <span className=\"inline-flex items-baseline gap-1.5\">{body}</span>\n      )}\n    </div>\n  );\n}\n\nexport function CoinGuarantees({\n  data,\n  isLoading,\n  decimals = 18,\n  maxTeamAllocationPercent,\n  contractUrl,\n  liquidityUrl,\n  blockUrl,\n  className,\n}: CoinGuaranteesProps) {\n  if (isLoading) {\n    return (\n      <div className={cn(\"space-y-2.5\", className)}>\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div key={i} className=\"h-9 animate-pulse rounded bg-muted-foreground/10\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (!data) return null;\n\n  const supply = whole(data.totalSupplyRaw, decimals);\n  const allocation = whole(data.teamAllocationRaw, decimals);\n  const pct = data.teamAllocationPercent;\n\n  return (\n    <div className={className}>\n      <p className=\"mb-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground\">\n        Guaranteed by the contract\n      </p>\n\n      <Line\n        label=\"Creator allocation\"\n        value={pct != null ? `${pct}%` : allocation != null ? compact(allocation) : \"—\"}\n        detail={`capped at ${maxTeamAllocationPercent}%`}\n        href={contractUrl}\n      />\n\n      <Line\n        label=\"Total supply\"\n        value={supply != null ? compact(supply) : \"—\"}\n        detail=\"fixed, cannot be increased\"\n        href={contractUrl}\n      />\n\n      {data.isLaunched ? (\n        <Line\n          label=\"Liquidity\"\n          value=\"Locked permanently\"\n          detail={data.liquidityPositionId ? `position #${data.liquidityPositionId}` : undefined}\n          href={liquidityUrl}\n        />\n      ) : (\n        <Line label=\"Liquidity\" value=\"Not launched yet\" />\n      )}\n\n      {data.launchedAtBlock != null && (\n        <Line\n          label=\"Launched\"\n          value={`Block ${data.launchedAtBlock.toLocaleString()}`}\n          href={blockUrl}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDI;AAlDJ,0BAA6B;AAC7B,gBAAmB;AAuBnB,SAAS,MAAM,KAAa,UAAiC;AAC3D,MAAI;AACF,UAAM,QAAQ,OAAO,GAAG;AACxB,QAAI,SAAS,GAAI,QAAO;AACxB,UAAM,IAAI,OAAO,KAAK,IAAI,MAAM;AAChC,WAAO,SAAS,CAAC,KAAK,KAAK,IAAI,IAAI;AAAA,EACrC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAM,UAAU,CAAC,MACf,IAAI,KAAK,aAAa,QAAW,EAAE,UAAU,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,CAAC;AAE9F,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,OACJ,4EACE;AAAA,gDAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA,IAC3D,UAAU,4CAAC,UAAK,WAAU,iCAAiC,kBAAO;AAAA,IAClE,QAAQ,4CAAC,oCAAa,WAAU,oCAAmC;AAAA,KACtE;AAGF,SACE,6CAAC,SAAI,WAAU,8FACb;AAAA,gDAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,IACtD,OACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QAET;AAAA;AAAA,IACH,IAEA,4CAAC,UAAK,WAAU,sCAAsC,gBAAK;AAAA,KAE/D;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,MAAI,WAAW;AACb,WACE,4CAAC,SAAI,eAAW,cAAG,eAAe,SAAS,GACxC,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,sDAAb,CAAgE,CAC3E,GACH;AAAA,EAEJ;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,SAAS,MAAM,KAAK,gBAAgB,QAAQ;AAClD,QAAM,aAAa,MAAM,KAAK,mBAAmB,QAAQ;AACzD,QAAM,MAAM,KAAK;AAEjB,SACE,6CAAC,SAAI,WACH;AAAA,gDAAC,OAAE,WAAU,6EAA4E,wCAEzF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,OAAO,OAAO,GAAG,GAAG,MAAM,cAAc,OAAO,QAAQ,UAAU,IAAI;AAAA,QAC5E,QAAQ,aAAa,wBAAwB;AAAA,QAC7C,MAAM;AAAA;AAAA,IACR;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,UAAU,OAAO,QAAQ,MAAM,IAAI;AAAA,QAC1C,QAAO;AAAA,QACP,MAAM;AAAA;AAAA,IACR;AAAA,IAEC,KAAK,aACJ;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAQ,KAAK,sBAAsB,aAAa,KAAK,mBAAmB,KAAK;AAAA,QAC7E,MAAM;AAAA;AAAA,IACR,IAEA,4CAAC,QAAK,OAAM,aAAY,OAAM,oBAAmB;AAAA,IAGlD,KAAK,mBAAmB,QACvB;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,SAAS,KAAK,gBAAgB,eAAe,CAAC;AAAA,QACrD,MAAM;AAAA;AAAA,IACR;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/coin-guarantees.d.cts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CoinGuaranteesData {
+    isLaunched: boolean;
+    launchedAtBlock: number | null;
+    totalSupplyRaw: string;
+    teamAllocationRaw: string;
+    teamAllocationPercent: number | null;
+    liquidityPositionId: string | null;
+}
+interface CoinGuaranteesProps {
+    data: CoinGuaranteesData | null;
+    isLoading?: boolean;
+    decimals?: number;
+    maxTeamAllocationPercent: number;
+    contractUrl?: string;
+    liquidityUrl?: string;
+    blockUrl?: string;
+    className?: string;
+}
+declare function CoinGuarantees({ data, isLoading, decimals, maxTeamAllocationPercent, contractUrl, liquidityUrl, blockUrl, className, }: CoinGuaranteesProps): react_jsx_runtime.JSX.Element | null;
+
+export { CoinGuarantees, type CoinGuaranteesData, type CoinGuaranteesProps };

package/dist/components/coin-guarantees.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CoinGuaranteesData {
+    isLaunched: boolean;
+    launchedAtBlock: number | null;
+    totalSupplyRaw: string;
+    teamAllocationRaw: string;
+    teamAllocationPercent: number | null;
+    liquidityPositionId: string | null;
+}
+interface CoinGuaranteesProps {
+    data: CoinGuaranteesData | null;
+    isLoading?: boolean;
+    decimals?: number;
+    maxTeamAllocationPercent: number;
+    contractUrl?: string;
+    liquidityUrl?: string;
+    blockUrl?: string;
+    className?: string;
+}
+declare function CoinGuarantees({ data, isLoading, decimals, maxTeamAllocationPercent, contractUrl, liquidityUrl, blockUrl, className, }: CoinGuaranteesProps): react_jsx_runtime.JSX.Element | null;
+
+export { CoinGuarantees, type CoinGuaranteesData, type CoinGuaranteesProps };

package/dist/components/coin-guarantees.js

@@ -0,0 +1,100 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../utils/cn.js";
+function whole(raw, decimals) {
+  try {
+    const units = BigInt(raw);
+    if (units <= 0n) return null;
+    const v = Number(units) / 10 ** decimals;
+    return isFinite(v) && v >= 1 ? v : null;
+  } catch {
+    return null;
+  }
+}
+const compact = (n) => new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 2 }).format(n);
+function Line({
+  label,
+  value,
+  detail,
+  href
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums", children: value }),
+    detail && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: detail }),
+    href && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 text-muted-foreground/60" })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 border-b border-border/40 py-2.5 last:border-b-0", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: label }),
+    href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex items-baseline gap-1.5 transition-colors hover:text-primary active:opacity-70",
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-baseline gap-1.5", children: body })
+  ] });
+}
+function CoinGuarantees({
+  data,
+  isLoading,
+  decimals = 18,
+  maxTeamAllocationPercent,
+  contractUrl,
+  liquidityUrl,
+  blockUrl,
+  className
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2.5", className), children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-9 animate-pulse rounded bg-muted-foreground/10" }, i)) });
+  }
+  if (!data) return null;
+  const supply = whole(data.totalSupplyRaw, decimals);
+  const allocation = whole(data.teamAllocationRaw, decimals);
+  const pct = data.teamAllocationPercent;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Guaranteed by the contract" }),
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        label: "Creator allocation",
+        value: pct != null ? `${pct}%` : allocation != null ? compact(allocation) : "\u2014",
+        detail: `capped at ${maxTeamAllocationPercent}%`,
+        href: contractUrl
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        label: "Total supply",
+        value: supply != null ? compact(supply) : "\u2014",
+        detail: "fixed, cannot be increased",
+        href: contractUrl
+      }
+    ),
+    data.isLaunched ? /* @__PURE__ */ jsx(
+      Line,
+      {
+        label: "Liquidity",
+        value: "Locked permanently",
+        detail: data.liquidityPositionId ? `position #${data.liquidityPositionId}` : void 0,
+        href: liquidityUrl
+      }
+    ) : /* @__PURE__ */ jsx(Line, { label: "Liquidity", value: "Not launched yet" }),
+    data.launchedAtBlock != null && /* @__PURE__ */ jsx(
+      Line,
+      {
+        label: "Launched",
+        value: `Block ${data.launchedAtBlock.toLocaleString()}`,
+        href: blockUrl
+      }
+    )
+  ] });
+}
+export {
+  CoinGuarantees
+};
+//# sourceMappingURL=coin-guarantees.js.map

package/dist/components/coin-guarantees.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/coin-guarantees.tsx"],"sourcesContent":["\"use client\";\n\nimport { ExternalLink } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface CoinGuaranteesData {\n  isLaunched: boolean;\n  launchedAtBlock: number | null;\n  totalSupplyRaw: string;\n  teamAllocationRaw: string;\n  teamAllocationPercent: number | null;\n  liquidityPositionId: string | null;\n}\n\nexport interface CoinGuaranteesProps {\n  data: CoinGuaranteesData | null;\n  isLoading?: boolean;\n  decimals?: number;\n  maxTeamAllocationPercent: number;\n\n  contractUrl?: string;\n  liquidityUrl?: string;\n  blockUrl?: string;\n  className?: string;\n}\n\nfunction whole(raw: string, decimals: number): number | null {\n  try {\n    const units = BigInt(raw);\n    if (units <= 0n) return null;\n    const v = Number(units) / 10 ** decimals;\n    return isFinite(v) && v >= 1 ? v : null;\n  } catch {\n    return null;\n  }\n}\n\nconst compact = (n: number) =>\n  new Intl.NumberFormat(undefined, { notation: \"compact\", maximumFractionDigits: 2 }).format(n);\n\nfunction Line({\n  label,\n  value,\n  detail,\n  href,\n}: {\n  label: string;\n  value: string;\n  detail?: string;\n  href?: string;\n}) {\n  const body = (\n    <>\n      <span className=\"text-sm font-semibold tabular-nums\">{value}</span>\n      {detail && <span className=\"text-xs text-muted-foreground\">{detail}</span>}\n      {href && <ExternalLink className=\"h-3 w-3 text-muted-foreground/60\" />}\n    </>\n  );\n\n  return (\n    <div className=\"flex items-baseline justify-between gap-3 border-b border-border/40 py-2.5 last:border-b-0\">\n      <span className=\"text-xs text-muted-foreground\">{label}</span>\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex items-baseline gap-1.5 transition-colors hover:text-primary active:opacity-70\"\n        >\n          {body}\n        </a>\n      ) : (\n        <span className=\"inline-flex items-baseline gap-1.5\">{body}</span>\n      )}\n    </div>\n  );\n}\n\nexport function CoinGuarantees({\n  data,\n  isLoading,\n  decimals = 18,\n  maxTeamAllocationPercent,\n  contractUrl,\n  liquidityUrl,\n  blockUrl,\n  className,\n}: CoinGuaranteesProps) {\n  if (isLoading) {\n    return (\n      <div className={cn(\"space-y-2.5\", className)}>\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div key={i} className=\"h-9 animate-pulse rounded bg-muted-foreground/10\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (!data) return null;\n\n  const supply = whole(data.totalSupplyRaw, decimals);\n  const allocation = whole(data.teamAllocationRaw, decimals);\n  const pct = data.teamAllocationPercent;\n\n  return (\n    <div className={className}>\n      <p className=\"mb-1 text-2xs font-semibold uppercase tracking-wide text-muted-foreground\">\n        Guaranteed by the contract\n      </p>\n\n      <Line\n        label=\"Creator allocation\"\n        value={pct != null ? `${pct}%` : allocation != null ? compact(allocation) : \"—\"}\n        detail={`capped at ${maxTeamAllocationPercent}%`}\n        href={contractUrl}\n      />\n\n      <Line\n        label=\"Total supply\"\n        value={supply != null ? compact(supply) : \"—\"}\n        detail=\"fixed, cannot be increased\"\n        href={contractUrl}\n      />\n\n      {data.isLaunched ? (\n        <Line\n          label=\"Liquidity\"\n          value=\"Locked permanently\"\n          detail={data.liquidityPositionId ? `position #${data.liquidityPositionId}` : undefined}\n          href={liquidityUrl}\n        />\n      ) : (\n        <Line label=\"Liquidity\" value=\"Not launched yet\" />\n      )}\n\n      {data.launchedAtBlock != null && (\n        <Line\n          label=\"Launched\"\n          value={`Block ${data.launchedAtBlock.toLocaleString()}`}\n          href={blockUrl}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoDI,mBACE,KADF;AAlDJ,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AAuBnB,SAAS,MAAM,KAAa,UAAiC;AAC3D,MAAI;AACF,UAAM,QAAQ,OAAO,GAAG;AACxB,QAAI,SAAS,GAAI,QAAO;AACxB,UAAM,IAAI,OAAO,KAAK,IAAI,MAAM;AAChC,WAAO,SAAS,CAAC,KAAK,KAAK,IAAI,IAAI;AAAA,EACrC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAM,UAAU,CAAC,MACf,IAAI,KAAK,aAAa,QAAW,EAAE,UAAU,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,CAAC;AAE9F,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,OACJ,iCACE;AAAA,wBAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA,IAC3D,UAAU,oBAAC,UAAK,WAAU,iCAAiC,kBAAO;AAAA,IAClE,QAAQ,oBAAC,gBAAa,WAAU,oCAAmC;AAAA,KACtE;AAGF,SACE,qBAAC,SAAI,WAAU,8FACb;AAAA,wBAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,IACtD,OACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QAET;AAAA;AAAA,IACH,IAEA,oBAAC,UAAK,WAAU,sCAAsC,gBAAK;AAAA,KAE/D;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACxC,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,sDAAb,CAAgE,CAC3E,GACH;AAAA,EAEJ;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,SAAS,MAAM,KAAK,gBAAgB,QAAQ;AAClD,QAAM,aAAa,MAAM,KAAK,mBAAmB,QAAQ;AACzD,QAAM,MAAM,KAAK;AAEjB,SACE,qBAAC,SAAI,WACH;AAAA,wBAAC,OAAE,WAAU,6EAA4E,wCAEzF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,OAAO,OAAO,GAAG,GAAG,MAAM,cAAc,OAAO,QAAQ,UAAU,IAAI;AAAA,QAC5E,QAAQ,aAAa,wBAAwB;AAAA,QAC7C,MAAM;AAAA;AAAA,IACR;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,UAAU,OAAO,QAAQ,MAAM,IAAI;AAAA,QAC1C,QAAO;AAAA,QACP,MAAM;AAAA;AAAA,IACR;AAAA,IAEC,KAAK,aACJ;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAQ,KAAK,sBAAsB,aAAa,KAAK,mBAAmB,KAAK;AAAA,QAC7E,MAAM;AAAA;AAAA,IACR,IAEA,oBAAC,QAAK,OAAM,aAAY,OAAM,oBAAmB;AAAA,IAGlD,KAAK,mBAAmB,QACvB;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,SAAS,KAAK,gBAAgB,eAAe,CAAC;AAAA,QACrD,MAAM;AAAA;AAAA,IACR;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/coin-row.cjs

@@ -49,12 +49,12 @@ function CoinAvatar({ collection, size = 36 }) {
   const logoUri = collection.profile?.image ?? collection.image;
   const logo = logoUri ? (0, import_ipfs.ipfsToHttp)(logoUri) : null;
   const initials = (collection.symbol ?? collection.name ?? "?").trim().slice(0, 2).toUpperCase();
-  const hue = (0, import_coins.coinAccentHue)(collection.symbol ?? collection.name ?? collection.contractAddress);
+  const accent = (0, import_coins.coinAccentToken)(collection.symbol ?? collection.name ?? collection.contractAddress);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: "relative shrink-0 overflow-hidden rounded-full",
-      style: { width: size, height: size, backgroundColor: `hsl(${hue} 70% 52%)` },
+      className: (0, import_cn.cn)("relative shrink-0 overflow-hidden rounded-full", accent),
+      style: { width: size, height: size },
       children: logo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: logo, alt: "", fill: true, sizes: `${size}px`, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
         {
@@ -66,9 +66,11 @@ function CoinAvatar({ collection, size = 36 }) {
     }
   );
 }
-function PriceCell({ price, isLoading }) {
+function PriceCell({ price, status, isLoading }) {
   if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20" });
-  if (!price) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block text-right text-muted-foreground", children: "\u2014" });
+  if (!price) {
+    return status === "pre-launch" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block text-right text-xs text-muted-foreground", children: "Not trading yet" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block text-right text-muted-foreground", children: "\u2014" });
+  }
   const usd = price.quoteUsdRate != null ? (0, import_format.formatUsdPrice)(price.quotePerCoin * price.quoteUsdRate) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "block text-right leading-tight", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block font-semibold tabular-nums", children: usd ?? (0, import_coins.formatCoinPrice)(price.quotePerCoin) }),
@@ -79,12 +81,16 @@ function PriceCell({ price, isLoading }) {
   ] });
 }
 function CoinRow({ collection, usePrice, href, showKind = false }) {
-  const { price, isLoading } = usePrice(collection);
+  const { price, status, isLoading } = usePrice(collection);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_link.default,
     {
       href,
-      className: (0, import_cn.cn)(COIN_GRID, "border-b border-border/40 px-2 py-2.5 text-sm transition-colors hover:bg-muted/40"),
+      className: (0, import_cn.cn)(
+        COIN_GRID,
+        "border-b border-border/40 px-2 py-2.5 text-sm transition-colors",
+        "hover:bg-muted/40 active:bg-muted/60"
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinAvatar, { collection }),
@@ -99,7 +105,7 @@ function CoinRow({ collection, usePrice, href, showKind = false }) {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceCell, { price, isLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceCell, { price, status, isLoading })
       ]
     }
   );

package/dist/components/coin-row.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/coin-row.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport Image from \"./image.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport {\n  coinKind, coinAccentHue, formatCoinPrice,\n  type CoinCollectionLike, type CoinPriceLike,\n} from \"../data/coins.js\";\nimport { formatUsdPrice } from \"../utils/format.js\";\n\nexport type UseCoinPrice = (collection: CoinCollectionLike) => {\n  price: CoinPriceLike | null;\n  isLoading: boolean;\n};\n\nexport const COIN_GRID = \"grid grid-cols-[minmax(0,1fr)_8rem] items-center gap-3 sm:gap-4\";\n\nconst kindLabel = (kind: string) => (kind === \"creator\" ? \"Creator Coin\" : \"Memecoin\");\n\nexport interface CoinRowProps {\n  collection: CoinCollectionLike;\n  usePrice: UseCoinPrice;\n  href: string;\n  showKind?: boolean;\n}\n\nexport function CoinAvatar({ collection, size = 36 }: { collection: CoinCollectionLike; size?: number }) {\n  const logoUri = collection.profile?.image ?? collection.image;\n  const logo = logoUri ? ipfsToHttp(logoUri) : null;\n  const initials = (collection.symbol ?? collection.name ?? \"?\").trim().slice(0, 2).toUpperCase();\n  const hue = coinAccentHue(collection.symbol ?? collection.name ?? collection.contractAddress);\n\n  return (\n    <div\n      className=\"relative shrink-0 overflow-hidden rounded-full\"\n      style={{ width: size, height: size, backgroundColor: `hsl(${hue} 70% 52%)` }}\n    >\n      {logo ? (\n        <Image src={logo} alt=\"\" fill sizes={`${size}px`} className=\"object-cover\" unoptimized />\n      ) : (\n        <span\n          className=\"flex h-full w-full items-center justify-center font-bold leading-none text-white\"\n          style={{ fontSize: size * 0.36 }}\n        >\n          {initials}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction PriceCell({ price, isLoading }: { price: CoinPriceLike | null; isLoading: boolean }) {\n  if (isLoading) return <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />;\n  if (!price) return <span className=\"block text-right text-muted-foreground\">—</span>;\n\n  const usd = price.quoteUsdRate != null ? formatUsdPrice(price.quotePerCoin * price.quoteUsdRate) : null;\n\n  return (\n    <span className=\"block text-right leading-tight\">\n      <span className=\"block font-semibold tabular-nums\">{usd ?? formatCoinPrice(price.quotePerCoin)}</span>\n      <span className=\"mt-0.5 inline-flex items-center justify-end gap-1 text-2xs tabular-nums text-muted-foreground\">\n        <CurrencyIcon symbol={price.quoteSymbol} size={10} />\n        {formatCoinPrice(price.quotePerCoin)}\n      </span>\n    </span>\n  );\n}\n\nexport function CoinRow({ collection, usePrice, href, showKind = false }: CoinRowProps) {\n  const { price, isLoading } = usePrice(collection);\n\n  return (\n    <Link\n      href={href}\n      className={cn(COIN_GRID, \"border-b border-border/40 px-2 py-2.5 text-sm transition-colors hover:bg-muted/40\")}\n    >\n      <span className=\"flex min-w-0 items-center gap-3\">\n        <CoinAvatar collection={collection} />\n        <span className=\"min-w-0\">\n          <span className=\"block truncate font-semibold leading-tight\">{collection.name ?? \"Untitled coin\"}</span>\n          <span className=\"block truncate text-xs text-muted-foreground\">\n            {collection.symbol ?? \"—\"}\n            {showKind && <span className=\"text-muted-foreground/60\"> · {kindLabel(coinKind(collection.service))}</span>}\n          </span>\n        </span>\n      </span>\n\n      <PriceCell price={price} isLoading={isLoading} />\n    </Link>\n  );\n}\n\nexport function CoinRowSkeleton() {\n  return (\n    <div className={cn(COIN_GRID, \"border-b border-border/40 px-2 py-2.5\")}>\n      <span className=\"flex items-center gap-3\">\n        <span className=\"h-9 w-9 shrink-0 animate-pulse rounded-full bg-muted-foreground/20\" />\n        <span className=\"space-y-1.5\">\n          <span className=\"block h-4 w-28 animate-pulse rounded bg-muted-foreground/20\" />\n          <span className=\"block h-3 w-14 animate-pulse rounded bg-muted-foreground/10\" />\n        </span>\n      </span>\n      <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":["Image","Link"]}
+{"version":3,"sources":["../../src/components/coin-row.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport Image from \"./image.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport {\n  coinKind, coinAccentToken, formatCoinPrice,\n  type CoinCollectionLike, type CoinPriceLike,\n} from \"../data/coins.js\";\nimport { formatUsdPrice } from \"../utils/format.js\";\n\nexport type CoinMarketStatus = \"live\" | \"pre-launch\" | \"unavailable\";\n\nexport type UseCoinPrice = (collection: CoinCollectionLike) => {\n  price: CoinPriceLike | null;\n  status?: CoinMarketStatus;\n  isLoading: boolean;\n};\n\nexport const COIN_GRID = \"grid grid-cols-[minmax(0,1fr)_8rem] items-center gap-3 sm:gap-4\";\n\nconst kindLabel = (kind: string) => (kind === \"creator\" ? \"Creator Coin\" : \"Memecoin\");\n\nexport interface CoinRowProps {\n  collection: CoinCollectionLike;\n  usePrice: UseCoinPrice;\n  href: string;\n  showKind?: boolean;\n}\n\nexport function CoinAvatar({ collection, size = 36 }: { collection: CoinCollectionLike; size?: number }) {\n  const logoUri = collection.profile?.image ?? collection.image;\n  const logo = logoUri ? ipfsToHttp(logoUri) : null;\n  const initials = (collection.symbol ?? collection.name ?? \"?\").trim().slice(0, 2).toUpperCase();\n  const accent = coinAccentToken(collection.symbol ?? collection.name ?? collection.contractAddress);\n\n  return (\n    <div\n      className={cn(\"relative shrink-0 overflow-hidden rounded-full\", accent)}\n      style={{ width: size, height: size }}\n    >\n      {logo ? (\n        <Image src={logo} alt=\"\" fill sizes={`${size}px`} className=\"object-cover\" unoptimized />\n      ) : (\n        <span\n          className=\"flex h-full w-full items-center justify-center font-bold leading-none text-white\"\n          style={{ fontSize: size * 0.36 }}\n        >\n          {initials}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction PriceCell({ price, status, isLoading }: { price: CoinPriceLike | null; status?: CoinMarketStatus; isLoading: boolean }) {\n  if (isLoading) return <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />;\n  if (!price) {\n    return status === \"pre-launch\" ? (\n      <span className=\"block text-right text-xs text-muted-foreground\">Not trading yet</span>\n    ) : (\n      <span className=\"block text-right text-muted-foreground\">—</span>\n    );\n  }\n\n  const usd = price.quoteUsdRate != null ? formatUsdPrice(price.quotePerCoin * price.quoteUsdRate) : null;\n\n  return (\n    <span className=\"block text-right leading-tight\">\n      <span className=\"block font-semibold tabular-nums\">{usd ?? formatCoinPrice(price.quotePerCoin)}</span>\n      <span className=\"mt-0.5 inline-flex items-center justify-end gap-1 text-2xs tabular-nums text-muted-foreground\">\n        <CurrencyIcon symbol={price.quoteSymbol} size={10} />\n        {formatCoinPrice(price.quotePerCoin)}\n      </span>\n    </span>\n  );\n}\n\nexport function CoinRow({ collection, usePrice, href, showKind = false }: CoinRowProps) {\n  const { price, status, isLoading } = usePrice(collection);\n\n  return (\n    <Link\n      href={href}\n      className={cn(\n        COIN_GRID,\n        \"border-b border-border/40 px-2 py-2.5 text-sm transition-colors\",\n        \"hover:bg-muted/40 active:bg-muted/60\"\n      )}\n    >\n      <span className=\"flex min-w-0 items-center gap-3\">\n        <CoinAvatar collection={collection} />\n        <span className=\"min-w-0\">\n          <span className=\"block truncate font-semibold leading-tight\">{collection.name ?? \"Untitled coin\"}</span>\n          <span className=\"block truncate text-xs text-muted-foreground\">\n            {collection.symbol ?? \"—\"}\n            {showKind && <span className=\"text-muted-foreground/60\"> · {kindLabel(coinKind(collection.service))}</span>}\n          </span>\n        </span>\n      </span>\n\n      <PriceCell price={price} status={status} isLoading={isLoading} />\n    </Link>\n  );\n}\n\nexport function CoinRowSkeleton() {\n  return (\n    <div className={cn(COIN_GRID, \"border-b border-border/40 px-2 py-2.5\")}>\n      <span className=\"flex items-center gap-3\">\n        <span className=\"h-9 w-9 shrink-0 animate-pulse rounded-full bg-muted-foreground/20\" />\n        <span className=\"space-y-1.5\">\n          <span className=\"block h-4 w-28 animate-pulse rounded bg-muted-foreground/20\" />\n          <span className=\"block h-3 w-14 animate-pulse rounded bg-muted-foreground/10\" />\n        </span>\n      </span>\n      <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":["Image","Link"]}

package/dist/components/coin-row.d.cts

@@ -1,8 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CoinCollectionLike, CoinPriceLike } from '../data/coins.cjs';
+import '@medialane/sdk';
 
+type CoinMarketStatus = "live" | "pre-launch" | "unavailable";
 type UseCoinPrice = (collection: CoinCollectionLike) => {
     price: CoinPriceLike | null;
+    status?: CoinMarketStatus;
     isLoading: boolean;
 };
 declare const COIN_GRID = "grid grid-cols-[minmax(0,1fr)_8rem] items-center gap-3 sm:gap-4";
@@ -19,4 +22,4 @@ declare function CoinAvatar({ collection, size }: {
 declare function CoinRow({ collection, usePrice, href, showKind }: CoinRowProps): react_jsx_runtime.JSX.Element;
 declare function CoinRowSkeleton(): react_jsx_runtime.JSX.Element;
 
-export { COIN_GRID, CoinAvatar, CoinRow, type CoinRowProps, CoinRowSkeleton, type UseCoinPrice };
+export { COIN_GRID, CoinAvatar, type CoinMarketStatus, CoinRow, type CoinRowProps, CoinRowSkeleton, type UseCoinPrice };

package/dist/components/coin-row.d.ts

@@ -1,8 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CoinCollectionLike, CoinPriceLike } from '../data/coins.js';
+import '@medialane/sdk';
 
+type CoinMarketStatus = "live" | "pre-launch" | "unavailable";
 type UseCoinPrice = (collection: CoinCollectionLike) => {
     price: CoinPriceLike | null;
+    status?: CoinMarketStatus;
     isLoading: boolean;
 };
 declare const COIN_GRID = "grid grid-cols-[minmax(0,1fr)_8rem] items-center gap-3 sm:gap-4";
@@ -19,4 +22,4 @@ declare function CoinAvatar({ collection, size }: {
 declare function CoinRow({ collection, usePrice, href, showKind }: CoinRowProps): react_jsx_runtime.JSX.Element;
 declare function CoinRowSkeleton(): react_jsx_runtime.JSX.Element;
 
-export { COIN_GRID, CoinAvatar, CoinRow, type CoinRowProps, CoinRowSkeleton, type UseCoinPrice };
+export { COIN_GRID, CoinAvatar, type CoinMarketStatus, CoinRow, type CoinRowProps, CoinRowSkeleton, type UseCoinPrice };

package/dist/components/coin-row.js

@@ -7,7 +7,7 @@ import { ipfsToHttp } from "../utils/ipfs.js";
 import { CurrencyIcon } from "./currency-icon.js";
 import {
   coinKind,
-  coinAccentHue,
+  coinAccentToken,
   formatCoinPrice
 } from "../data/coins.js";
 import { formatUsdPrice } from "../utils/format.js";
@@ -17,12 +17,12 @@ function CoinAvatar({ collection, size = 36 }) {
   const logoUri = collection.profile?.image ?? collection.image;
   const logo = logoUri ? ipfsToHttp(logoUri) : null;
   const initials = (collection.symbol ?? collection.name ?? "?").trim().slice(0, 2).toUpperCase();
-  const hue = coinAccentHue(collection.symbol ?? collection.name ?? collection.contractAddress);
+  const accent = coinAccentToken(collection.symbol ?? collection.name ?? collection.contractAddress);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "relative shrink-0 overflow-hidden rounded-full",
-      style: { width: size, height: size, backgroundColor: `hsl(${hue} 70% 52%)` },
+      className: cn("relative shrink-0 overflow-hidden rounded-full", accent),
+      style: { width: size, height: size },
       children: logo ? /* @__PURE__ */ jsx(Image, { src: logo, alt: "", fill: true, sizes: `${size}px`, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx(
         "span",
         {
@@ -34,9 +34,11 @@ function CoinAvatar({ collection, size = 36 }) {
     }
   );
 }
-function PriceCell({ price, isLoading }) {
+function PriceCell({ price, status, isLoading }) {
   if (isLoading) return /* @__PURE__ */ jsx("span", { className: "ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20" });
-  if (!price) return /* @__PURE__ */ jsx("span", { className: "block text-right text-muted-foreground", children: "\u2014" });
+  if (!price) {
+    return status === "pre-launch" ? /* @__PURE__ */ jsx("span", { className: "block text-right text-xs text-muted-foreground", children: "Not trading yet" }) : /* @__PURE__ */ jsx("span", { className: "block text-right text-muted-foreground", children: "\u2014" });
+  }
   const usd = price.quoteUsdRate != null ? formatUsdPrice(price.quotePerCoin * price.quoteUsdRate) : null;
   return /* @__PURE__ */ jsxs("span", { className: "block text-right leading-tight", children: [
     /* @__PURE__ */ jsx("span", { className: "block font-semibold tabular-nums", children: usd ?? formatCoinPrice(price.quotePerCoin) }),
@@ -47,12 +49,16 @@ function PriceCell({ price, isLoading }) {
   ] });
 }
 function CoinRow({ collection, usePrice, href, showKind = false }) {
-  const { price, isLoading } = usePrice(collection);
+  const { price, status, isLoading } = usePrice(collection);
   return /* @__PURE__ */ jsxs(
     Link,
     {
       href,
-      className: cn(COIN_GRID, "border-b border-border/40 px-2 py-2.5 text-sm transition-colors hover:bg-muted/40"),
+      className: cn(
+        COIN_GRID,
+        "border-b border-border/40 px-2 py-2.5 text-sm transition-colors",
+        "hover:bg-muted/40 active:bg-muted/60"
+      ),
       children: [
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-3", children: [
           /* @__PURE__ */ jsx(CoinAvatar, { collection }),
@@ -67,7 +73,7 @@ function CoinRow({ collection, usePrice, href, showKind = false }) {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(PriceCell, { price, isLoading })
+        /* @__PURE__ */ jsx(PriceCell, { price, status, isLoading })
       ]
     }
   );

package/dist/components/coin-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/coin-row.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport Image from \"./image.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport {\n  coinKind, coinAccentHue, formatCoinPrice,\n  type CoinCollectionLike, type CoinPriceLike,\n} from \"../data/coins.js\";\nimport { formatUsdPrice } from \"../utils/format.js\";\n\nexport type UseCoinPrice = (collection: CoinCollectionLike) => {\n  price: CoinPriceLike | null;\n  isLoading: boolean;\n};\n\nexport const COIN_GRID = \"grid grid-cols-[minmax(0,1fr)_8rem] items-center gap-3 sm:gap-4\";\n\nconst kindLabel = (kind: string) => (kind === \"creator\" ? \"Creator Coin\" : \"Memecoin\");\n\nexport interface CoinRowProps {\n  collection: CoinCollectionLike;\n  usePrice: UseCoinPrice;\n  href: string;\n  showKind?: boolean;\n}\n\nexport function CoinAvatar({ collection, size = 36 }: { collection: CoinCollectionLike; size?: number }) {\n  const logoUri = collection.profile?.image ?? collection.image;\n  const logo = logoUri ? ipfsToHttp(logoUri) : null;\n  const initials = (collection.symbol ?? collection.name ?? \"?\").trim().slice(0, 2).toUpperCase();\n  const hue = coinAccentHue(collection.symbol ?? collection.name ?? collection.contractAddress);\n\n  return (\n    <div\n      className=\"relative shrink-0 overflow-hidden rounded-full\"\n      style={{ width: size, height: size, backgroundColor: `hsl(${hue} 70% 52%)` }}\n    >\n      {logo ? (\n        <Image src={logo} alt=\"\" fill sizes={`${size}px`} className=\"object-cover\" unoptimized />\n      ) : (\n        <span\n          className=\"flex h-full w-full items-center justify-center font-bold leading-none text-white\"\n          style={{ fontSize: size * 0.36 }}\n        >\n          {initials}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction PriceCell({ price, isLoading }: { price: CoinPriceLike | null; isLoading: boolean }) {\n  if (isLoading) return <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />;\n  if (!price) return <span className=\"block text-right text-muted-foreground\">—</span>;\n\n  const usd = price.quoteUsdRate != null ? formatUsdPrice(price.quotePerCoin * price.quoteUsdRate) : null;\n\n  return (\n    <span className=\"block text-right leading-tight\">\n      <span className=\"block font-semibold tabular-nums\">{usd ?? formatCoinPrice(price.quotePerCoin)}</span>\n      <span className=\"mt-0.5 inline-flex items-center justify-end gap-1 text-2xs tabular-nums text-muted-foreground\">\n        <CurrencyIcon symbol={price.quoteSymbol} size={10} />\n        {formatCoinPrice(price.quotePerCoin)}\n      </span>\n    </span>\n  );\n}\n\nexport function CoinRow({ collection, usePrice, href, showKind = false }: CoinRowProps) {\n  const { price, isLoading } = usePrice(collection);\n\n  return (\n    <Link\n      href={href}\n      className={cn(COIN_GRID, \"border-b border-border/40 px-2 py-2.5 text-sm transition-colors hover:bg-muted/40\")}\n    >\n      <span className=\"flex min-w-0 items-center gap-3\">\n        <CoinAvatar collection={collection} />\n        <span className=\"min-w-0\">\n          <span className=\"block truncate font-semibold leading-tight\">{collection.name ?? \"Untitled coin\"}</span>\n          <span className=\"block truncate text-xs text-muted-foreground\">\n            {collection.symbol ?? \"—\"}\n            {showKind && <span className=\"text-muted-foreground/60\"> · {kindLabel(coinKind(collection.service))}</span>}\n          </span>\n        </span>\n      </span>\n\n      <PriceCell price={price} isLoading={isLoading} />\n    </Link>\n  );\n}\n\nexport function CoinRowSkeleton() {\n  return (\n    <div className={cn(COIN_GRID, \"border-b border-border/40 px-2 py-2.5\")}>\n      <span className=\"flex items-center gap-3\">\n        <span className=\"h-9 w-9 shrink-0 animate-pulse rounded-full bg-muted-foreground/20\" />\n        <span className=\"space-y-1.5\">\n          <span className=\"block h-4 w-28 animate-pulse rounded bg-muted-foreground/20\" />\n          <span className=\"block h-3 w-14 animate-pulse rounded bg-muted-foreground/10\" />\n        </span>\n      </span>\n      <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/coin-row.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport Image from \"./image.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport {\n  coinKind, coinAccentToken, formatCoinPrice,\n  type CoinCollectionLike, type CoinPriceLike,\n} from \"../data/coins.js\";\nimport { formatUsdPrice } from \"../utils/format.js\";\n\nexport type CoinMarketStatus = \"live\" | \"pre-launch\" | \"unavailable\";\n\nexport type UseCoinPrice = (collection: CoinCollectionLike) => {\n  price: CoinPriceLike | null;\n  status?: CoinMarketStatus;\n  isLoading: boolean;\n};\n\nexport const COIN_GRID = \"grid grid-cols-[minmax(0,1fr)_8rem] items-center gap-3 sm:gap-4\";\n\nconst kindLabel = (kind: string) => (kind === \"creator\" ? \"Creator Coin\" : \"Memecoin\");\n\nexport interface CoinRowProps {\n  collection: CoinCollectionLike;\n  usePrice: UseCoinPrice;\n  href: string;\n  showKind?: boolean;\n}\n\nexport function CoinAvatar({ collection, size = 36 }: { collection: CoinCollectionLike; size?: number }) {\n  const logoUri = collection.profile?.image ?? collection.image;\n  const logo = logoUri ? ipfsToHttp(logoUri) : null;\n  const initials = (collection.symbol ?? collection.name ?? \"?\").trim().slice(0, 2).toUpperCase();\n  const accent = coinAccentToken(collection.symbol ?? collection.name ?? collection.contractAddress);\n\n  return (\n    <div\n      className={cn(\"relative shrink-0 overflow-hidden rounded-full\", accent)}\n      style={{ width: size, height: size }}\n    >\n      {logo ? (\n        <Image src={logo} alt=\"\" fill sizes={`${size}px`} className=\"object-cover\" unoptimized />\n      ) : (\n        <span\n          className=\"flex h-full w-full items-center justify-center font-bold leading-none text-white\"\n          style={{ fontSize: size * 0.36 }}\n        >\n          {initials}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction PriceCell({ price, status, isLoading }: { price: CoinPriceLike | null; status?: CoinMarketStatus; isLoading: boolean }) {\n  if (isLoading) return <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />;\n  if (!price) {\n    return status === \"pre-launch\" ? (\n      <span className=\"block text-right text-xs text-muted-foreground\">Not trading yet</span>\n    ) : (\n      <span className=\"block text-right text-muted-foreground\">—</span>\n    );\n  }\n\n  const usd = price.quoteUsdRate != null ? formatUsdPrice(price.quotePerCoin * price.quoteUsdRate) : null;\n\n  return (\n    <span className=\"block text-right leading-tight\">\n      <span className=\"block font-semibold tabular-nums\">{usd ?? formatCoinPrice(price.quotePerCoin)}</span>\n      <span className=\"mt-0.5 inline-flex items-center justify-end gap-1 text-2xs tabular-nums text-muted-foreground\">\n        <CurrencyIcon symbol={price.quoteSymbol} size={10} />\n        {formatCoinPrice(price.quotePerCoin)}\n      </span>\n    </span>\n  );\n}\n\nexport function CoinRow({ collection, usePrice, href, showKind = false }: CoinRowProps) {\n  const { price, status, isLoading } = usePrice(collection);\n\n  return (\n    <Link\n      href={href}\n      className={cn(\n        COIN_GRID,\n        \"border-b border-border/40 px-2 py-2.5 text-sm transition-colors\",\n        \"hover:bg-muted/40 active:bg-muted/60\"\n      )}\n    >\n      <span className=\"flex min-w-0 items-center gap-3\">\n        <CoinAvatar collection={collection} />\n        <span className=\"min-w-0\">\n          <span className=\"block truncate font-semibold leading-tight\">{collection.name ?? \"Untitled coin\"}</span>\n          <span className=\"block truncate text-xs text-muted-foreground\">\n            {collection.symbol ?? \"—\"}\n            {showKind && <span className=\"text-muted-foreground/60\"> · {kindLabel(coinKind(collection.service))}</span>}\n          </span>\n        </span>\n      </span>\n\n      <PriceCell price={price} status={status} isLoading={isLoading} />\n    </Link>\n  );\n}\n\nexport function CoinRowSkeleton() {\n  return (\n    <div className={cn(COIN_GRID, \"border-b border-border/40 px-2 py-2.5\")}>\n      <span className=\"flex items-center gap-3\">\n        <span className=\"h-9 w-9 shrink-0 animate-pulse rounded-full bg-muted-foreground/20\" />\n        <span className=\"space-y-1.5\">\n          <span className=\"block h-4 w-28 animate-pulse rounded bg-muted-foreground/20\" />\n          <span className=\"block h-3 w-14 animate-pulse rounded bg-muted-foreground/10\" />\n        </span>\n      </span>\n      <span className=\"ml-auto block h-4 w-16 animate-pulse rounded bg-muted-foreground/20\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/coins-explorer.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseCoinPrice } from './coin-row.cjs';
 import { CoinCollectionLike } from '../data/coins.cjs';
+import '@medialane/sdk';
 
 type CoinFilter = "all" | "creator" | "memecoin";
 type CoinSort = "recent" | "name";

package/dist/components/coins-explorer.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseCoinPrice } from './coin-row.js';
 import { CoinCollectionLike } from '../data/coins.js';
+import '@medialane/sdk';
 
 type CoinFilter = "all" | "creator" | "memecoin";
 type CoinSort = "recent" | "name";