@medialane/ui 0.322.0 → 0.324.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/components/button.d.cts +1 -1
  2. package/dist/components/button.d.ts +1 -1
  3. package/dist/components/collection-card.cjs +2 -3
  4. package/dist/components/collection-card.cjs.map +1 -1
  5. package/dist/components/collection-card.js +2 -3
  6. package/dist/components/collection-card.js.map +1 -1
  7. package/dist/components/collections-page.cjs +32 -26
  8. package/dist/components/collections-page.cjs.map +1 -1
  9. package/dist/components/collections-page.js +33 -27
  10. package/dist/components/collections-page.js.map +1 -1
  11. package/dist/components/currency-icon.cjs +7 -2
  12. package/dist/components/currency-icon.cjs.map +1 -1
  13. package/dist/components/currency-icon.d.cts +2 -1
  14. package/dist/components/currency-icon.d.ts +2 -1
  15. package/dist/components/currency-icon.js +5 -1
  16. package/dist/components/currency-icon.js.map +1 -1
  17. package/dist/components/discover-collections-strip.cjs +3 -2
  18. package/dist/components/discover-collections-strip.cjs.map +1 -1
  19. package/dist/components/discover-collections-strip.d.cts +2 -1
  20. package/dist/components/discover-collections-strip.d.ts +2 -1
  21. package/dist/components/discover-collections-strip.js +3 -2
  22. package/dist/components/discover-collections-strip.js.map +1 -1
  23. package/dist/components/discover-page.cjs +3 -1
  24. package/dist/components/discover-page.cjs.map +1 -1
  25. package/dist/components/discover-page.js +3 -1
  26. package/dist/components/discover-page.js.map +1 -1
  27. package/dist/components/fast-mint/fast-mint.d.cts +2 -2
  28. package/dist/components/fast-mint/fast-mint.d.ts +2 -2
  29. package/dist/components/featured-carousel.cjs +3 -21
  30. package/dist/components/featured-carousel.cjs.map +1 -1
  31. package/dist/components/featured-carousel.js +3 -21
  32. package/dist/components/featured-carousel.js.map +1 -1
  33. package/dist/components/ip-type-nav.cjs +2 -14
  34. package/dist/components/ip-type-nav.cjs.map +1 -1
  35. package/dist/components/ip-type-nav.js +3 -15
  36. package/dist/components/ip-type-nav.js.map +1 -1
  37. package/dist/components/listing-card.cjs +17 -12
  38. package/dist/components/listing-card.cjs.map +1 -1
  39. package/dist/components/listing-card.js +17 -12
  40. package/dist/components/listing-card.js.map +1 -1
  41. package/dist/utils/media-wallet/use-erc20-balance.d.cts +1 -1
  42. package/dist/utils/media-wallet/use-erc20-balance.d.ts +1 -1
  43. package/package.json +1 -1
package/dist/components/ip-type-nav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/ip-type-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport { ArrowRight } from \"lucide-react\";\nimport { IP_TYPE_CONFIG } from \"./ip-type-badge.js\";\nimport { cn } from \"../utils/cn.js\";\n\nexport function IpTypeNav() {\n return (\n <section className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <h2 className=\"text-xl sm:text-2xl font-black\">Browse by Type</h2>\n <Link\n href=\"/nft\"\n className=\"flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors\"\n >\n View all <ArrowRight className=\"h-3.5 w-3.5\" />\n </Link>\n </div>\n\n <div className=\"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3\">\n {IP_TYPE_CONFIG.map(({ slug, label, icon: Icon, colorClass, bgClass }) => (\n <Link\n key={slug}\n href={`/${slug}`}\n className=\"group flex flex-col items-center gap-2.5 p-4 rounded-xl border border-border bg-card hover:border-primary/40 hover:bg-card/80 transition-all hover:shadow-md hover:shadow-black/10\"\n >\n <div className={cn(\"h-10 w-10 rounded-xl flex items-center justify-center\", bgClass)}>\n <Icon className={cn(\"h-5 w-5\", colorClass)} />\n </div>\n <span className=\"text-xs font-semibold text-center leading-tight\">{label}</span>\n </Link>\n ))}\n </div>\n </section>\n );\n}\n"],"mappings":";AAWQ,cACA,YADA;AATR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAEZ,SAAS,YAAY;AAC1B,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,QAAG,WAAU,kCAAiC,4BAAc;AAAA,MAC7D;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACX;AAAA;AAAA,YACU,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,wDACZ,yBAAe,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM,YAAY,QAAQ,MAClE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,IAAI,IAAI;AAAA,QACd,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAW,GAAG,yDAAyD,OAAO,GACjF,8BAAC,QAAK,WAAW,GAAG,WAAW,UAAU,GAAG,GAC9C;AAAA,UACA,oBAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA;AAAA;AAAA,MAPpE;AAAA,IAQP,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/components/ip-type-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport { LayoutGrid } from \"lucide-react\";\nimport { SectionHeading } from \"./section-heading.js\";\nimport { IP_TYPE_CONFIG } from \"./ip-type-badge.js\";\nimport { cn } from \"../utils/cn.js\";\n\nexport function IpTypeNav() {\n return (\n <section className=\"space-y-4\">\n <SectionHeading icon={<LayoutGrid />} title=\"Browse by Type\" href=\"/nft\" linkLabel=\"View all\" />\n\n <div className=\"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3\">\n {IP_TYPE_CONFIG.map(({ slug, label, icon: Icon, colorClass, bgClass }) => (\n <Link\n key={slug}\n href={`/${slug}`}\n className=\"group flex flex-col items-center gap-2.5 p-4 rounded-xl border border-border bg-card hover:border-primary/40 hover:bg-card/80 transition-all hover:shadow-md hover:shadow-black/10\"\n >\n <div className={cn(\"h-10 w-10 rounded-xl flex items-center justify-center\", bgClass)}>\n <Icon className={cn(\"h-5 w-5\", colorClass)} />\n </div>\n <span className=\"text-xs font-semibold text-center leading-tight\">{label}</span>\n </Link>\n ))}\n </div>\n </section>\n );\n}\n"],"mappings":";AAW4B,cAIlB,YAJkB;AAT5B,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAEZ,SAAS,YAAY;AAC1B,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,wBAAC,kBAAe,MAAM,oBAAC,cAAW,GAAI,OAAM,kBAAiB,MAAK,QAAO,WAAU,YAAW;AAAA,IAE9F,oBAAC,SAAI,WAAU,wDACZ,yBAAe,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM,YAAY,QAAQ,MAClE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,IAAI,IAAI;AAAA,QACd,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAW,GAAG,yDAAyD,OAAO,GACjF,8BAAC,QAAK,WAAW,GAAG,WAAW,UAAU,GAAG,GAC9C;AAAA,UACA,oBAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA;AAAA;AAAA,MAPpE;AAAA,IAQP,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
package/dist/components/listing-card.cjs CHANGED
@@ -39,6 +39,7 @@ var import_link = __toESM(require("./link.js"), 1);
39
39
  var import_lucide_react = require("lucide-react");
40
40
  var import_motion_primitives = require("./motion-primitives.js");
41
41
  var import_animated_token_media = require("./animated-token-media.js");
42
+ var import_currency_icon = require("./currency-icon.js");
42
43
  var import_cn = require("../utils/cn.js");
43
44
  var import_format = require("../utils/format.js");
44
45
  var import_time = require("../utils/time.js");
@@ -53,10 +54,14 @@ function CardPrice({
53
54
  if (!amountFormatted) return null;
54
55
  const amount = (0, import_format.formatDisplayPrice)(amountFormatted);
55
56
  const primary = usdValue ?? amount;
56
- const secondary = !usdValue ? currency : (0, import_format.isStableCurrency)(currency) ? currency : `${amount} ${currency}`;
57
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex items-baseline gap-1.5 tabular-nums", children: [
57
+ const showAmount = !!usdValue && !(0, import_format.isStableCurrency)(currency);
58
+ const marker = (0, import_currency_icon.hasCurrencyIcon)(currency) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: currency, size: 14 }) : currency;
59
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex items-center gap-1.5 tabular-nums", children: [
58
60
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-base font-bold tracking-tight", children: primary }),
59
- secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-muted-foreground", children: secondary })
61
+ marker || showAmount ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
62
+ marker,
63
+ showAmount ? amount : null
64
+ ] }) : null
60
65
  ] });
61
66
  }
62
67
  function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }) {
@@ -71,8 +76,8 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
71
76
  const assetHref = (0, import_sdk.assetHref)("STARKNET", order.nftContract ?? "", order.nftTokenId ?? "");
72
77
  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);
73
78
  if (compact) {
74
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.MotionCard, { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block", children: [
75
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square bg-muted overflow-hidden rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.MotionCard, { className: "group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block", children: [
80
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square bg-muted overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
76
81
  import_animated_token_media.AnimatedTokenMedia,
77
82
  {
78
83
  image,
@@ -87,15 +92,15 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
87
92
  fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15" })
88
93
  }
89
94
  ) }),
90
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-0.5 pt-2.5 space-y-0.5", children: [
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-2.5 space-y-0.5", children: [
91
96
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-medium truncate", children: name }),
92
97
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardPrice, { amountFormatted: order.price?.formatted, currency: order.price?.currency, usdValue }),
93
98
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xs text-muted-foreground", children: (0, import_time.timeAgo)(order.createdAt) })
94
99
  ] })
95
100
  ] }) });
96
101
  }
97
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.MotionCard, { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block", children: [
98
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square bg-muted overflow-hidden rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.MotionCard, { className: "group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block", children: [
103
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square bg-muted overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
99
104
  import_animated_token_media.AnimatedTokenMedia,
100
105
  {
101
106
  image,
@@ -110,7 +115,7 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
110
115
  fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15" })
111
116
  }
112
117
  ) }),
113
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-0.5 pt-3 space-y-2.5", children: [
118
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3.5 space-y-2.5", children: [
114
119
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 space-y-1", children: [
115
120
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium truncate", children: name }),
116
121
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardPrice, { amountFormatted: order.price?.formatted, currency: order.price?.currency, usdValue })
@@ -172,9 +177,9 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
172
177
  ] }) });
173
178
  }
174
179
  function ListingCardSkeleton() {
175
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
176
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full rounded-xl bg-muted animate-pulse" }),
177
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-0.5 pt-3 space-y-2.5", children: [
180
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card", children: [
181
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
182
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3.5 space-y-2.5", children: [
178
183
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
179
184
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-3/4 bg-muted animate-pulse rounded" }),
180
185
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-5 w-1/2 bg-muted animate-pulse rounded" })
package/dist/components/listing-card.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"./link.js\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { assetHref as buildAssetHref, type ApiOrder, type Chain } from \"@medialane/sdk\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\ntype OrderWithAnimation = ApiOrder & { token: (ApiOrder[\"token\"] & { animationUrl?: string | null }) | null };\n\nfunction CardPrice({\n amountFormatted, currency, usdValue,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n}) {\n if (!amountFormatted) return null;\n const amount = formatDisplayPrice(amountFormatted);\n const primary = usdValue ?? amount;\n const secondary = !usdValue ? currency : isStableCurrency(currency) ? currency : `${amount} ${currency}`;\n return (\n <p className=\"flex items-baseline gap-1.5 tabular-nums\">\n <span className=\"text-base font-bold tracking-tight\">{primary}</span>\n {secondary && <span className=\"text-xs text-muted-foreground\">{secondary}</span>}\n </p>\n );\n}\n\nexport interface ListingCardProps {\n order: ApiOrder;\n inCart?: boolean;\n onBuy?: (order: ApiOrder) => void;\n onCart?: (order: ApiOrder) => void;\n\n overflowMenu?: React.ReactNode;\n\n primaryAction?: React.ReactNode;\n compact?: boolean;\n\n imageUrl?: string | null;\n\n usdValue?: string | null;\n}\n\nexport function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }: ListingCardProps) {\n const resolveImage = useImageUrl();\n const order = rawOrder as OrderWithAnimation;\n const [imgError, setImgError] = useState(false);\n const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? resolveImage(order.token.image, { width: 480 }) : null);\n\n const animationUrl = order.token?.animationUrl ?? null;\n const live = !!(order.chain && order.nftContract) && isLivingRenderCollection(order.chain.toUpperCase() as Chain, order.nftContract!);\n const assetHref = buildAssetHref(\"STARKNET\", order.nftContract ?? \"\", order.nftTokenId ?? \"\");\n\n const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n if (compact) {\n return (\n <MotionCard className=\"group\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden rounded-xl\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 33vw, 20vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n <div className=\"px-0.5 pt-2.5 space-y-0.5\">\n <p className=\"text-xs font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n <p className=\"text-2xs text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n </div>\n </Link>\n </MotionCard>\n );\n }\n\n return (\n <MotionCard className=\"group\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden rounded-xl\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n\n <div className=\"px-0.5 pt-3 space-y-2.5\">\n <div className=\"min-w-0 space-y-1\">\n <p className=\"text-sm font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n </div>\n\n {showActionBar && (\n <div className=\"flex items-center gap-1.5\">\n {isListing ? (\n primaryAction ? (\n primaryAction\n ) : onBuy ? (\n <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n <button\n className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n onClick={(e) => { e.preventDefault(); onBuy(order); }}\n >\n <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n </button>\n </div>\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n </Link>\n )\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n </Link>\n )}\n {onCart && (\n <button\n className={cn(\n \"min-h-11 min-w-11 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n inCart\n ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n : \"border-border bg-background hover:bg-muted text-foreground\"\n )}\n onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n disabled={inCart}\n aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n >\n {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n </button>\n )}\n {overflowMenu}\n </div>\n )}\n </div>\n </Link>\n </MotionCard>\n );\n}\n\nexport function ListingCardSkeleton() {\n return (\n <div>\n <div className=\"aspect-square w-full rounded-xl bg-muted animate-pulse\" />\n <div className=\"px-0.5 pt-3 space-y-2.5\">\n <div className=\"space-y-1\">\n <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n <div className=\"h-5 w-1/2 bg-muted animate-pulse rounded\" />\n </div>\n <div className=\"h-9 w-full bg-muted animate-pulse rounded-[9px]\" />\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA1BJ,mBAAyB;AACzB,kBAAiB;AACjB,0BAAuD;AACvD,+BAA2B;AAC3B,kCAAmC;AACnC,gBAAmB;AACnB,oBAAqD;AACrD,kBAAwB;AACxB,uCAAyC;AACzC,iBAAuE;AACvE,2BAA4B;AAI5B,SAAS,UAAU;AAAA,EACjB;AAAA,EAAiB;AAAA,EAAU;AAC7B,GAIG;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,QAAM,aAAS,kCAAmB,eAAe;AACjD,QAAM,UAAU,YAAY;AAC5B,QAAM,YAAY,CAAC,WAAW,eAAW,gCAAiB,QAAQ,IAAI,WAAW,GAAG,MAAM,IAAI,QAAQ;AACtG,SACE,6CAAC,OAAE,WAAU,4CACX;AAAA,gDAAC,UAAK,WAAU,sCAAsC,mBAAQ;AAAA,IAC7D,aAAa,4CAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,KAC3E;AAEJ;AAkBO,SAAS,YAAY,EAAE,OAAO,UAAU,SAAS,OAAO,OAAO,QAAQ,cAAc,eAAe,UAAU,OAAO,UAAU,SAAS,GAAqB;AAClK,QAAM,mBAAe,kCAAY;AACjC,QAAM,QAAQ;AACd,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,YAAY,MAAM,MAAM,aAAa,YAAY,MAAM,MAAM,aAAa;AAChF,QAAM,OAAO,MAAM,OAAO,QAAQ,UAAU,MAAM,UAAU;AAC5D,QAAM,QAAQ,aAAa,SAAY,WAAY,MAAM,OAAO,QAAQ,aAAa,MAAM,MAAM,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI;AAE1H,QAAM,eAAe,MAAM,OAAO,gBAAgB;AAClD,QAAM,OAAO,CAAC,EAAE,MAAM,SAAS,MAAM,oBAAgB,2DAAyB,MAAM,MAAM,YAAY,GAAY,MAAM,WAAY;AACpI,QAAM,gBAAY,WAAAA,WAAe,YAAY,MAAM,eAAe,IAAI,MAAM,cAAc,EAAE;AAE5F,QAAM,gBAAgB,CAAC,EAAE,SAAS,UAAU,gBAAgB;AAE5D,MAAI,SAAS;AACX,WACE,4CAAC,uCAAW,WAAU,SACpB,uDAAC,YAAAC,SAAA,EAAK,MAAM,WAAW,WAAU,SAC/B;AAAA,kDAAC,SAAI,WAAU,8DACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAM;AAAA,UACN,WAAU;AAAA,UACV;AAAA,UACA,cAAc,MAAM,YAAY,IAAI;AAAA,UACpC,UACE,4CAAC,SAAI,WAAU,4EAA2E;AAAA;AAAA,MAE9F,GACF;AAAA,MACA,6CAAC,SAAI,WAAU,6BACb;AAAA,oDAAC,OAAE,WAAU,gCAAgC,gBAAK;AAAA,QAClD,4CAAC,aAAU,iBAAiB,MAAM,OAAO,WAAW,UAAU,MAAM,OAAO,UAAU,UAAoB;AAAA,QACzG,4CAAC,OAAE,WAAU,kCAAkC,mCAAQ,MAAM,SAAS,GAAE;AAAA,SAC1E;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE,4CAAC,uCAAW,WAAU,SACpB,uDAAC,YAAAA,SAAA,EAAK,MAAM,WAAW,WAAU,SAC/B;AAAA,gDAAC,SAAI,WAAU,8DACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAU;AAAA,QACV;AAAA,QACA,cAAc,MAAM,YAAY,IAAI;AAAA,QACpC,UACE,4CAAC,SAAI,WAAU,4EAA2E;AAAA;AAAA,IAE9F,GACF;AAAA,IAEA,6CAAC,SAAI,WAAU,2BACb;AAAA,mDAAC,SAAI,WAAU,qBACb;AAAA,oDAAC,OAAE,WAAU,gCAAgC,gBAAK;AAAA,QAClD,4CAAC,aAAU,iBAAiB,MAAM,OAAO,WAAW,UAAU,MAAM,OAAO,UAAU,UAAoB;AAAA,SAC3G;AAAA,MAEC,iBACC,6CAAC,SAAI,WAAU,6BACZ;AAAA,oBACC,gBACE,gBACE,QACF,4CAAC,SAAI,WAAU,2DACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,CAAC,MAAM;AAAE,gBAAE,eAAe;AAAG,oBAAM,KAAK;AAAA,YAAG;AAAA,YAEpD;AAAA,0DAAC,2BAAI,WAAU,wBAAuB;AAAA,cAAE;AAAA;AAAA;AAAA,QAC1C,GACF,IAEA;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,0DAAC,oCAAa,WAAU,wBAAuB;AAAA,cAAE;AAAA;AAAA;AAAA,QACnD,IAGF;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,0DAAC,oCAAa,WAAU,wBAAuB;AAAA,cAAE;AAAA;AAAA;AAAA,QACnD;AAAA,QAED,UACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,SACI,gEACA;AAAA,YACN;AAAA,YACA,SAAS,CAAC,MAAM;AAAE,gBAAE,eAAe;AAAG,kBAAI,CAAC,OAAQ,QAAO,KAAK;AAAA,YAAG;AAAA,YAClE,UAAU;AAAA,YACV,cAAY,SAAS,kBAAkB;AAAA,YAEtC,mBAAS,4CAAC,6BAAM,WAAU,eAAc,IAAK,4CAAC,oCAAa,WAAU,eAAc;AAAA;AAAA,QACtF;AAAA,QAED;AAAA,SACH;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,sBAAsB;AACpC,SACE,6CAAC,SACC;AAAA,gDAAC,SAAI,WAAU,0DAAyD;AAAA,IACxE,6CAAC,SAAI,WAAU,2BACb;AAAA,mDAAC,SAAI,WAAU,aACb;AAAA,oDAAC,SAAI,WAAU,4CAA2C;AAAA,QAC1D,4CAAC,SAAI,WAAU,4CAA2C;AAAA,SAC5D;AAAA,MACA,4CAAC,SAAI,WAAU,mDAAkD;AAAA,OACnE;AAAA,KACF;AAEJ;","names":["buildAssetHref","Link"]}
1
+ {"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"./link.js\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { CurrencyIcon, hasCurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { assetHref as buildAssetHref, type ApiOrder, type Chain } from \"@medialane/sdk\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\ntype OrderWithAnimation = ApiOrder & { token: (ApiOrder[\"token\"] & { animationUrl?: string | null }) | null };\n\nfunction CardPrice({\n amountFormatted, currency, usdValue,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n}) {\n if (!amountFormatted) return null;\n const amount = formatDisplayPrice(amountFormatted);\n const primary = usdValue ?? amount;\n const showAmount = !!usdValue && !isStableCurrency(currency);\n const marker = hasCurrencyIcon(currency) ? <CurrencyIcon symbol={currency} size={14} /> : currency;\n return (\n <p className=\"flex items-center gap-1.5 tabular-nums\">\n <span className=\"text-base font-bold tracking-tight\">{primary}</span>\n {marker || showAmount ? (\n <span className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\">\n {marker}\n {showAmount ? amount : null}\n </span>\n ) : null}\n </p>\n );\n}\n\nexport interface ListingCardProps {\n order: ApiOrder;\n inCart?: boolean;\n onBuy?: (order: ApiOrder) => void;\n onCart?: (order: ApiOrder) => void;\n\n overflowMenu?: React.ReactNode;\n\n primaryAction?: React.ReactNode;\n compact?: boolean;\n\n imageUrl?: string | null;\n\n usdValue?: string | null;\n}\n\nexport function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }: ListingCardProps) {\n const resolveImage = useImageUrl();\n const order = rawOrder as OrderWithAnimation;\n const [imgError, setImgError] = useState(false);\n const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? resolveImage(order.token.image, { width: 480 }) : null);\n\n const animationUrl = order.token?.animationUrl ?? null;\n const live = !!(order.chain && order.nftContract) && isLivingRenderCollection(order.chain.toUpperCase() as Chain, order.nftContract!);\n const assetHref = buildAssetHref(\"STARKNET\", order.nftContract ?? \"\", order.nftTokenId ?? \"\");\n\n const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n if (compact) {\n return (\n <MotionCard className=\"group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 33vw, 20vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n <div className=\"p-2.5 space-y-0.5\">\n <p className=\"text-xs font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n <p className=\"text-2xs text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n </div>\n </Link>\n </MotionCard>\n );\n }\n\n return (\n <MotionCard className=\"group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n\n <div className=\"p-3.5 space-y-2.5\">\n <div className=\"min-w-0 space-y-1\">\n <p className=\"text-sm font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n </div>\n\n {showActionBar && (\n <div className=\"flex items-center gap-1.5\">\n {isListing ? (\n primaryAction ? (\n primaryAction\n ) : onBuy ? (\n <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n <button\n className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n onClick={(e) => { e.preventDefault(); onBuy(order); }}\n >\n <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n </button>\n </div>\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n </Link>\n )\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n </Link>\n )}\n {onCart && (\n <button\n className={cn(\n \"min-h-11 min-w-11 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n inCart\n ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n : \"border-border bg-background hover:bg-muted text-foreground\"\n )}\n onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n disabled={inCart}\n aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n >\n {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n </button>\n )}\n {overflowMenu}\n </div>\n )}\n </div>\n </Link>\n </MotionCard>\n );\n}\n\nexport function ListingCardSkeleton() {\n return (\n <div className=\"overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card\">\n <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n <div className=\"p-3.5 space-y-2.5\">\n <div className=\"space-y-1\">\n <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n <div className=\"h-5 w-1/2 bg-muted animate-pulse rounded\" />\n </div>\n <div className=\"h-9 w-full bg-muted animate-pulse rounded-[9px]\" />\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":["buildAssetHref","Link"]}
package/dist/components/listing-card.js CHANGED
@@ -5,6 +5,7 @@ import Link from "./link.js";
5
5
  import { ShoppingCart, Check, Zap, ArrowUpRight } from "lucide-react";
6
6
  import { MotionCard } from "./motion-primitives.js";
7
7
  import { AnimatedTokenMedia } from "./animated-token-media.js";
8
+ import { CurrencyIcon, hasCurrencyIcon } from "./currency-icon.js";
8
9
  import { cn } from "../utils/cn.js";
9
10
  import { formatDisplayPrice, isStableCurrency } from "../utils/format.js";
10
11
  import { timeAgo } from "../utils/time.js";
@@ -19,10 +20,14 @@ function CardPrice({
19
20
  if (!amountFormatted) return null;
20
21
  const amount = formatDisplayPrice(amountFormatted);
21
22
  const primary = usdValue ?? amount;
22
- const secondary = !usdValue ? currency : isStableCurrency(currency) ? currency : `${amount} ${currency}`;
23
- return /* @__PURE__ */ jsxs("p", { className: "flex items-baseline gap-1.5 tabular-nums", children: [
23
+ const showAmount = !!usdValue && !isStableCurrency(currency);
24
+ const marker = hasCurrencyIcon(currency) ? /* @__PURE__ */ jsx(CurrencyIcon, { symbol: currency, size: 14 }) : currency;
25
+ return /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 tabular-nums", children: [
24
26
  /* @__PURE__ */ jsx("span", { className: "text-base font-bold tracking-tight", children: primary }),
25
- secondary && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: secondary })
27
+ marker || showAmount ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
28
+ marker,
29
+ showAmount ? amount : null
30
+ ] }) : null
26
31
  ] });
27
32
  }
28
33
  function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }) {
@@ -37,8 +42,8 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
37
42
  const assetHref = buildAssetHref("STARKNET", order.nftContract ?? "", order.nftTokenId ?? "");
38
43
  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);
39
44
  if (compact) {
40
- return /* @__PURE__ */ jsx(MotionCard, { className: "group", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block", children: [
41
- /* @__PURE__ */ jsx("div", { className: "relative aspect-square bg-muted overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
45
+ return /* @__PURE__ */ jsx(MotionCard, { className: "group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block", children: [
46
+ /* @__PURE__ */ jsx("div", { className: "relative aspect-square bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
42
47
  AnimatedTokenMedia,
43
48
  {
44
49
  image,
@@ -53,15 +58,15 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
53
58
  fallback: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15" })
54
59
  }
55
60
  ) }),
56
- /* @__PURE__ */ jsxs("div", { className: "px-0.5 pt-2.5 space-y-0.5", children: [
61
+ /* @__PURE__ */ jsxs("div", { className: "p-2.5 space-y-0.5", children: [
57
62
  /* @__PURE__ */ jsx("p", { className: "text-xs font-medium truncate", children: name }),
58
63
  /* @__PURE__ */ jsx(CardPrice, { amountFormatted: order.price?.formatted, currency: order.price?.currency, usdValue }),
59
64
  /* @__PURE__ */ jsx("p", { className: "text-2xs text-muted-foreground", children: timeAgo(order.createdAt) })
60
65
  ] })
61
66
  ] }) });
62
67
  }
63
- return /* @__PURE__ */ jsx(MotionCard, { className: "group", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block", children: [
64
- /* @__PURE__ */ jsx("div", { className: "relative aspect-square bg-muted overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
68
+ return /* @__PURE__ */ jsx(MotionCard, { className: "group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block", children: [
69
+ /* @__PURE__ */ jsx("div", { className: "relative aspect-square bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
65
70
  AnimatedTokenMedia,
66
71
  {
67
72
  image,
@@ -76,7 +81,7 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
76
81
  fallback: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15" })
77
82
  }
78
83
  ) }),
79
- /* @__PURE__ */ jsxs("div", { className: "px-0.5 pt-3 space-y-2.5", children: [
84
+ /* @__PURE__ */ jsxs("div", { className: "p-3.5 space-y-2.5", children: [
80
85
  /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
81
86
  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: name }),
82
87
  /* @__PURE__ */ jsx(CardPrice, { amountFormatted: order.price?.formatted, currency: order.price?.currency, usdValue })
@@ -138,9 +143,9 @@ function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowM
138
143
  ] }) });
139
144
  }
140
145
  function ListingCardSkeleton() {
141
- return /* @__PURE__ */ jsxs("div", { children: [
142
- /* @__PURE__ */ jsx("div", { className: "aspect-square w-full rounded-xl bg-muted animate-pulse" }),
143
- /* @__PURE__ */ jsxs("div", { className: "px-0.5 pt-3 space-y-2.5", children: [
146
+ return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card", children: [
147
+ /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
148
+ /* @__PURE__ */ jsxs("div", { className: "p-3.5 space-y-2.5", children: [
144
149
  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
145
150
  /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 bg-muted animate-pulse rounded" }),
146
151
  /* @__PURE__ */ jsx("div", { className: "h-5 w-1/2 bg-muted animate-pulse rounded" })
package/dist/components/listing-card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"./link.js\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { assetHref as buildAssetHref, type ApiOrder, type Chain } from \"@medialane/sdk\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\ntype OrderWithAnimation = ApiOrder & { token: (ApiOrder[\"token\"] & { animationUrl?: string | null }) | null };\n\nfunction CardPrice({\n amountFormatted, currency, usdValue,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n}) {\n if (!amountFormatted) return null;\n const amount = formatDisplayPrice(amountFormatted);\n const primary = usdValue ?? amount;\n const secondary = !usdValue ? currency : isStableCurrency(currency) ? currency : `${amount} ${currency}`;\n return (\n <p className=\"flex items-baseline gap-1.5 tabular-nums\">\n <span className=\"text-base font-bold tracking-tight\">{primary}</span>\n {secondary && <span className=\"text-xs text-muted-foreground\">{secondary}</span>}\n </p>\n );\n}\n\nexport interface ListingCardProps {\n order: ApiOrder;\n inCart?: boolean;\n onBuy?: (order: ApiOrder) => void;\n onCart?: (order: ApiOrder) => void;\n\n overflowMenu?: React.ReactNode;\n\n primaryAction?: React.ReactNode;\n compact?: boolean;\n\n imageUrl?: string | null;\n\n usdValue?: string | null;\n}\n\nexport function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }: ListingCardProps) {\n const resolveImage = useImageUrl();\n const order = rawOrder as OrderWithAnimation;\n const [imgError, setImgError] = useState(false);\n const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? resolveImage(order.token.image, { width: 480 }) : null);\n\n const animationUrl = order.token?.animationUrl ?? null;\n const live = !!(order.chain && order.nftContract) && isLivingRenderCollection(order.chain.toUpperCase() as Chain, order.nftContract!);\n const assetHref = buildAssetHref(\"STARKNET\", order.nftContract ?? \"\", order.nftTokenId ?? \"\");\n\n const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n if (compact) {\n return (\n <MotionCard className=\"group\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden rounded-xl\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 33vw, 20vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n <div className=\"px-0.5 pt-2.5 space-y-0.5\">\n <p className=\"text-xs font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n <p className=\"text-2xs text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n </div>\n </Link>\n </MotionCard>\n );\n }\n\n return (\n <MotionCard className=\"group\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden rounded-xl\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n\n <div className=\"px-0.5 pt-3 space-y-2.5\">\n <div className=\"min-w-0 space-y-1\">\n <p className=\"text-sm font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n </div>\n\n {showActionBar && (\n <div className=\"flex items-center gap-1.5\">\n {isListing ? (\n primaryAction ? (\n primaryAction\n ) : onBuy ? (\n <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n <button\n className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n onClick={(e) => { e.preventDefault(); onBuy(order); }}\n >\n <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n </button>\n </div>\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n </Link>\n )\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n </Link>\n )}\n {onCart && (\n <button\n className={cn(\n \"min-h-11 min-w-11 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n inCart\n ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n : \"border-border bg-background hover:bg-muted text-foreground\"\n )}\n onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n disabled={inCart}\n aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n >\n {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n </button>\n )}\n {overflowMenu}\n </div>\n )}\n </div>\n </Link>\n </MotionCard>\n );\n}\n\nexport function ListingCardSkeleton() {\n return (\n <div>\n <div className=\"aspect-square w-full rounded-xl bg-muted animate-pulse\" />\n <div className=\"px-0.5 pt-3 space-y-2.5\">\n <div className=\"space-y-1\">\n <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n <div className=\"h-5 w-1/2 bg-muted animate-pulse rounded\" />\n </div>\n <div className=\"h-9 w-full bg-muted animate-pulse rounded-[9px]\" />\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"./link.js\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { CurrencyIcon, hasCurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { assetHref as buildAssetHref, type ApiOrder, type Chain } from \"@medialane/sdk\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\ntype OrderWithAnimation = ApiOrder & { token: (ApiOrder[\"token\"] & { animationUrl?: string | null }) | null };\n\nfunction CardPrice({\n amountFormatted, currency, usdValue,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n}) {\n if (!amountFormatted) return null;\n const amount = formatDisplayPrice(amountFormatted);\n const primary = usdValue ?? amount;\n const showAmount = !!usdValue && !isStableCurrency(currency);\n const marker = hasCurrencyIcon(currency) ? <CurrencyIcon symbol={currency} size={14} /> : currency;\n return (\n <p className=\"flex items-center gap-1.5 tabular-nums\">\n <span className=\"text-base font-bold tracking-tight\">{primary}</span>\n {marker || showAmount ? (\n <span className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\">\n {marker}\n {showAmount ? amount : null}\n </span>\n ) : null}\n </p>\n );\n}\n\nexport interface ListingCardProps {\n order: ApiOrder;\n inCart?: boolean;\n onBuy?: (order: ApiOrder) => void;\n onCart?: (order: ApiOrder) => void;\n\n overflowMenu?: React.ReactNode;\n\n primaryAction?: React.ReactNode;\n compact?: boolean;\n\n imageUrl?: string | null;\n\n usdValue?: string | null;\n}\n\nexport function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }: ListingCardProps) {\n const resolveImage = useImageUrl();\n const order = rawOrder as OrderWithAnimation;\n const [imgError, setImgError] = useState(false);\n const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? resolveImage(order.token.image, { width: 480 }) : null);\n\n const animationUrl = order.token?.animationUrl ?? null;\n const live = !!(order.chain && order.nftContract) && isLivingRenderCollection(order.chain.toUpperCase() as Chain, order.nftContract!);\n const assetHref = buildAssetHref(\"STARKNET\", order.nftContract ?? \"\", order.nftTokenId ?? \"\");\n\n const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n if (compact) {\n return (\n <MotionCard className=\"group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 33vw, 20vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n <div className=\"p-2.5 space-y-0.5\">\n <p className=\"text-xs font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n <p className=\"text-2xs text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n </div>\n </Link>\n </MotionCard>\n );\n }\n\n return (\n <MotionCard className=\"group overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card\">\n <Link href={assetHref} className=\"block\">\n <div className=\"relative aspect-square bg-muted overflow-hidden\">\n <AnimatedTokenMedia\n image={image}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\"\n className=\"object-cover\"\n imgError={imgError}\n onImageError={() => setImgError(true)}\n fallback={\n <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n }\n />\n </div>\n\n <div className=\"p-3.5 space-y-2.5\">\n <div className=\"min-w-0 space-y-1\">\n <p className=\"text-sm font-medium truncate\">{name}</p>\n <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n </div>\n\n {showActionBar && (\n <div className=\"flex items-center gap-1.5\">\n {isListing ? (\n primaryAction ? (\n primaryAction\n ) : onBuy ? (\n <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n <button\n className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n onClick={(e) => { e.preventDefault(); onBuy(order); }}\n >\n <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n </button>\n </div>\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n </Link>\n )\n ) : (\n <Link\n href={assetHref}\n className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n >\n <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n </Link>\n )}\n {onCart && (\n <button\n className={cn(\n \"min-h-11 min-w-11 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n inCart\n ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n : \"border-border bg-background hover:bg-muted text-foreground\"\n )}\n onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n disabled={inCart}\n aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n >\n {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n </button>\n )}\n {overflowMenu}\n </div>\n )}\n </div>\n </Link>\n </MotionCard>\n );\n}\n\nexport function ListingCardSkeleton() {\n return (\n <div className=\"overflow-hidden rounded-[calc(var(--radius)*1.25)] bg-card\">\n <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n <div className=\"p-3.5 space-y-2.5\">\n <div className=\"space-y-1\">\n <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n <div className=\"h-5 w-1/2 bg-muted animate-pulse rounded\" />\n </div>\n <div className=\"h-9 w-full bg-muted animate-pulse rounded-[9px]\" />\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
package/dist/utils/media-wallet/use-erc20-balance.d.cts CHANGED
@@ -7,7 +7,7 @@ declare function useTokenBalance(symbol: string | null, holderAddress: string |
7
7
  rawBalance: bigint | null;
8
8
  isLoading: boolean;
9
9
  error: any;
10
- decimals: 8 | 6 | 18;
10
+ decimals: 6 | 8 | 18;
11
11
  };
12
12
  declare function hasSufficientBalance(rawBalance: bigint | null, requiredHuman: string, decimals: number): boolean | null;
13
13
 
package/dist/utils/media-wallet/use-erc20-balance.d.ts CHANGED
@@ -7,7 +7,7 @@ declare function useTokenBalance(symbol: string | null, holderAddress: string |
7
7
  rawBalance: bigint | null;
8
8
  isLoading: boolean;
9
9
  error: any;
10
- decimals: 8 | 6 | 18;
10
+ decimals: 6 | 8 | 18;
11
11
  };
12
12
  declare function hasSufficientBalance(rawBalance: bigint | null, requiredHuman: string, decimals: number): boolean | null;
13
13
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medialane/ui",
3
- "version": "0.322.0",
3
+ "version": "0.324.0",
4
4
  "description": "Shared UI components for Medialane apps",
5
5
  "type": "module",
6
6
  "sideEffects": false,