@medialane/ui 0.290.0 → 0.292.0

package/dist/components/listings-grid.cjs

@@ -0,0 +1,147 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var listings_grid_exports = {};
+__export(listings_grid_exports, {
+  ListingsGrid: () => ListingsGrid
+});
+module.exports = __toCommonJS(listings_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_sdk = require("@medialane/sdk");
+var import_link = __toESM(require("./link.js"), 1);
+var import_button = require("./button.js");
+var import_listing_card = require("./listing-card.js");
+var import_listing_card_menu = require("./listing-card-menu.js");
+var import_load_more_sentinel = require("./load-more-sentinel.js");
+var import_medialane_app = require("./medialane-app.js");
+var import_use_orders = require("../utils/use-orders.js");
+var import_use_image_url = require("../utils/use-image-url.js");
+var import_use_usd_prices = require("../utils/use-usd-prices.js");
+var import_empty_messages = require("../utils/empty-messages.js");
+const PAGE_SIZE = 15;
+const BACKEND_PAGE_SIZE = 50;
+function MarketplaceListingCard({ order, onBuy }) {
+  const resolveImage = (0, import_use_image_url.useImageUrl)();
+  const usdPrices = (0, import_use_usd_prices.useUsdPrices)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_listing_card.ListingCard,
+    {
+      order,
+      onBuy,
+      overflowMenu: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listing_card_menu.ListingCardMenu, { order }),
+      imageUrl: resolveImage(order.token?.image),
+      usdValue: (0, import_use_usd_prices.usdValueFor)(order.price?.formatted, order.price?.currency, usdPrices)
+    }
+  );
+}
+function ListingsGrid({ sort = "recent", currency, orderType = "", minPrice, maxPrice, initialOrders, onBuy }) {
+  const { walletAddress } = (0, import_medialane_app.useMedialaneApp)();
+  const [backendPage, setBackendPage] = (0, import_react.useState)(1);
+  const [visiblePages, setVisiblePages] = (0, import_react.useState)(1);
+  const [allOrders, setAllOrders] = (0, import_react.useState)(initialOrders ?? []);
+  const prevFilters = (0, import_react.useRef)({ sort, currency, orderType, minPrice, maxPrice });
+  (0, import_react.useEffect)(() => {
+    const f = prevFilters.current;
+    if (f.sort !== sort || f.currency !== currency || f.orderType !== orderType || f.minPrice !== minPrice || f.maxPrice !== maxPrice) {
+      prevFilters.current = { sort, currency, orderType, minPrice, maxPrice };
+      setBackendPage(1);
+      setVisiblePages(1);
+      setAllOrders([]);
+    }
+  }, [sort, currency, orderType, minPrice, maxPrice]);
+  const { orders, meta, isLoading } = (0, import_use_orders.useOrders)({
+    status: "ACTIVE",
+    sort,
+    ...currency ? { currency } : {},
+    ...minPrice ? { minPrice } : {},
+    ...maxPrice ? { maxPrice } : {},
+    page: backendPage,
+    limit: BACKEND_PAGE_SIZE
+  });
+  (0, import_react.useEffect)(() => {
+    if (isLoading) return;
+    if (backendPage === 1) {
+      setAllOrders(orders);
+    } else {
+      setAllOrders((prev) => {
+        const existing = new Set(prev.map((o) => o.orderHash));
+        const newItems = orders.filter((o) => !existing.has(o.orderHash));
+        return newItems.length > 0 ? [...prev, ...newItems] : prev;
+      });
+    }
+  }, [orders, isLoading, backendPage]);
+  const filteredOrders = orderType === "offers" ? allOrders.filter((o) => o.offer.itemType === "ERC20") : allOrders.filter((o) => o.offer.itemType === "ERC721" || o.offer.itemType === "ERC1155");
+  const visibleLimit = visiblePages * PAGE_SIZE;
+  const displayedOrders = filteredOrders.slice(0, visibleLimit);
+  const isInitialLoading = isLoading && allOrders.length === 0;
+  const isLoadingMore = isLoading && allOrders.length > 0;
+  const backendTotal = meta?.total ?? 0;
+  const hasBackendMore = backendTotal > 0 ? allOrders.length < backendTotal : orders.length === BACKEND_PAGE_SIZE;
+  const hasBufferedOrders = filteredOrders.length > displayedOrders.length;
+  const hasMore = hasBufferedOrders || hasBackendMore || isLoadingMore;
+  (0, import_react.useEffect)(() => {
+    if (isLoading || !hasBackendMore || filteredOrders.length >= visibleLimit) return;
+    setBackendPage((p) => p + 1);
+  }, [filteredOrders.length, hasBackendMore, isLoading, visibleLimit]);
+  const isOwner = (order) => !!walletAddress && !!order.offerer && (0, import_sdk.normalizeAddress)("STARKNET", order.offerer) === (0, import_sdk.normalizeAddress)("STARKNET", walletAddress);
+  const handleLoadMore = () => {
+    setVisiblePages((p) => p + 1);
+  };
+  if (isInitialLoading || filteredOrders.length === 0 && hasBackendMore) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: PAGE_SIZE }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listing_card.ListingCardSkeleton, {}, i)) });
+  }
+  if (filteredOrders.length === 0 && !isLoading && !hasBackendMore) {
+    const empty = orderType === "offers" ? import_empty_messages.emptyMessages.offers : import_empty_messages.emptyMessages.listings;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center py-24 gap-4 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xl font-bold", children: empty.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground max-w-sm", children: empty.description }),
+      orderType !== "offers" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: "/create", children: "Create & List" }) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: [
+      displayedOrders.map((order) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarketplaceListingCard, { order, onBuy: isOwner(order) ? void 0 : onBuy }, order.orderHash)),
+      isLoadingMore && Array.from({ length: PAGE_SIZE }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listing_card.ListingCardSkeleton, {}, `loading-${i}`))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_load_more_sentinel.LoadMoreSentinel, { hasMore, isLoading: isLoadingMore, onLoadMore: handleLoadMore }),
+    !hasMore && filteredOrders.length > PAGE_SIZE && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-center text-xs text-muted-foreground", children: [
+      "All ",
+      filteredOrders.length,
+      " ",
+      orderType === "offers" ? "offers" : "listings",
+      " shown"
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ListingsGrid
+});
+//# sourceMappingURL=listings-grid.cjs.map

package/dist/components/listings-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/listings-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useRef } from \"react\";\nimport { normalizeAddress, type ApiOrder, type SortOrder } from \"@medialane/sdk\";\nimport Link from \"./link.js\";\nimport { Button } from \"./button.js\";\nimport { ListingCard, ListingCardSkeleton } from \"./listing-card.js\";\nimport { ListingCardMenu } from \"./listing-card-menu.js\";\nimport { LoadMoreSentinel } from \"./load-more-sentinel.js\";\nimport { useMedialaneApp } from \"./medialane-app.js\";\nimport { useOrders } from \"../utils/use-orders.js\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\nimport { useUsdPrices, usdValueFor } from \"../utils/use-usd-prices.js\";\nimport { emptyMessages } from \"../utils/empty-messages.js\";\n\nconst PAGE_SIZE = 15;\nconst BACKEND_PAGE_SIZE = 50;\n\nexport interface ListingsGridProps {\n  sort?: string;\n  currency?: string;\n  orderType?: string;\n  minPrice?: string;\n  maxPrice?: string;\n\n  initialOrders?: ApiOrder[];\n  onBuy: (order: ApiOrder) => void;\n}\n\nfunction MarketplaceListingCard({ order, onBuy }: { order: ApiOrder; onBuy?: (order: ApiOrder) => void }) {\n  const resolveImage = useImageUrl();\n  const usdPrices = useUsdPrices();\n  return (\n    <ListingCard\n      order={order}\n      onBuy={onBuy}\n      overflowMenu={<ListingCardMenu order={order} />}\n      imageUrl={resolveImage(order.token?.image)}\n      usdValue={usdValueFor(order.price?.formatted, order.price?.currency, usdPrices)}\n    />\n  );\n}\n\nexport function ListingsGrid({ sort = \"recent\", currency, orderType = \"\", minPrice, maxPrice, initialOrders, onBuy }: ListingsGridProps) {\n  const { walletAddress } = useMedialaneApp();\n  const [backendPage, setBackendPage] = useState(1);\n  const [visiblePages, setVisiblePages] = useState(1);\n  const [allOrders, setAllOrders] = useState<ApiOrder[]>(initialOrders ?? []);\n\n  const prevFilters = useRef({ sort, currency, orderType, minPrice, maxPrice });\n  useEffect(() => {\n    const f = prevFilters.current;\n    if (f.sort !== sort || f.currency !== currency || f.orderType !== orderType || f.minPrice !== minPrice || f.maxPrice !== maxPrice) {\n      prevFilters.current = { sort, currency, orderType, minPrice, maxPrice };\n      setBackendPage(1);\n      setVisiblePages(1);\n      setAllOrders([]);\n    }\n  }, [sort, currency, orderType, minPrice, maxPrice]);\n\n  const { orders, meta, isLoading } = useOrders({\n    status: \"ACTIVE\",\n    sort: sort as SortOrder,\n    ...(currency ? { currency } : {}),\n    ...(minPrice ? { minPrice } : {}),\n    ...(maxPrice ? { maxPrice } : {}),\n    page: backendPage,\n    limit: BACKEND_PAGE_SIZE,\n  });\n\n  useEffect(() => {\n    if (isLoading) return;\n    if (backendPage === 1) {\n      setAllOrders(orders);\n    } else {\n      setAllOrders((prev) => {\n        const existing = new Set(prev.map((o) => o.orderHash));\n        const newItems = orders.filter((o) => !existing.has(o.orderHash));\n        return newItems.length > 0 ? [...prev, ...newItems] : prev;\n      });\n    }\n  }, [orders, isLoading, backendPage]);\n\n  const filteredOrders = orderType === \"offers\"\n    ? allOrders.filter((o) => o.offer.itemType === \"ERC20\")\n    : allOrders.filter((o) => o.offer.itemType === \"ERC721\" || o.offer.itemType === \"ERC1155\");\n\n  const visibleLimit = visiblePages * PAGE_SIZE;\n  const displayedOrders = filteredOrders.slice(0, visibleLimit);\n\n  const isInitialLoading = isLoading && allOrders.length === 0;\n  const isLoadingMore = isLoading && allOrders.length > 0;\n  const backendTotal = meta?.total ?? 0;\n  const hasBackendMore = backendTotal > 0\n    ? allOrders.length < backendTotal\n    : orders.length === BACKEND_PAGE_SIZE;\n  const hasBufferedOrders = filteredOrders.length > displayedOrders.length;\n  const hasMore = hasBufferedOrders || hasBackendMore || isLoadingMore;\n\n  useEffect(() => {\n    if (isLoading || !hasBackendMore || filteredOrders.length >= visibleLimit) return;\n    setBackendPage((p) => p + 1);\n  }, [filteredOrders.length, hasBackendMore, isLoading, visibleLimit]);\n\n  const isOwner = (order: ApiOrder) =>\n    !!walletAddress && !!order.offerer && normalizeAddress(\"STARKNET\", order.offerer) === normalizeAddress(\"STARKNET\", walletAddress);\n\n  const handleLoadMore = () => {\n    setVisiblePages((p) => p + 1);\n  };\n\n  if (isInitialLoading || (filteredOrders.length === 0 && hasBackendMore)) {\n    return (\n      <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4\">\n        {Array.from({ length: PAGE_SIZE }).map((_, i) => (\n          <ListingCardSkeleton key={i} />\n        ))}\n      </div>\n    );\n  }\n\n  if (filteredOrders.length === 0 && !isLoading && !hasBackendMore) {\n    const empty = orderType === \"offers\" ? emptyMessages.offers : emptyMessages.listings;\n    return (\n      <div className=\"flex flex-col items-center justify-center py-24 gap-4 text-center\">\n        <p className=\"text-2xl font-bold\">{empty.title}</p>\n        <p className=\"text-muted-foreground max-w-sm\">{empty.description}</p>\n        {orderType !== \"offers\" && (\n          <Button variant=\"outline\" asChild>\n            <Link href=\"/create\">Create &amp; List</Link>\n          </Button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"space-y-6\">\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4\">\n          {displayedOrders.map((order) => (\n            <MarketplaceListingCard key={order.orderHash} order={order} onBuy={isOwner(order) ? undefined : onBuy} />\n          ))}\n          {isLoadingMore &&\n            Array.from({ length: PAGE_SIZE }).map((_, i) => (\n              <ListingCardSkeleton key={`loading-${i}`} />\n            ))}\n        </div>\n\n        <LoadMoreSentinel hasMore={hasMore} isLoading={isLoadingMore} onLoadMore={handleLoadMore} />\n\n        {!hasMore && filteredOrders.length > PAGE_SIZE && (\n          <p className=\"text-center text-xs text-muted-foreground\">\n            All {filteredOrders.length} {orderType === \"offers\" ? \"offers\" : \"listings\"} shown\n          </p>\n        )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":["Link"]}

package/dist/components/listings-grid.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder } from '@medialane/sdk';
+
+interface ListingsGridProps {
+    sort?: string;
+    currency?: string;
+    orderType?: string;
+    minPrice?: string;
+    maxPrice?: string;
+    initialOrders?: ApiOrder[];
+    onBuy: (order: ApiOrder) => void;
+}
+declare function ListingsGrid({ sort, currency, orderType, minPrice, maxPrice, initialOrders, onBuy }: ListingsGridProps): react_jsx_runtime.JSX.Element;
+
+export { ListingsGrid, type ListingsGridProps };

package/dist/components/listings-grid.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder } from '@medialane/sdk';
+
+interface ListingsGridProps {
+    sort?: string;
+    currency?: string;
+    orderType?: string;
+    minPrice?: string;
+    maxPrice?: string;
+    initialOrders?: ApiOrder[];
+    onBuy: (order: ApiOrder) => void;
+}
+declare function ListingsGrid({ sort, currency, orderType, minPrice, maxPrice, initialOrders, onBuy }: ListingsGridProps): react_jsx_runtime.JSX.Element;
+
+export { ListingsGrid, type ListingsGridProps };

package/dist/components/listings-grid.js

@@ -0,0 +1,113 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { normalizeAddress } from "@medialane/sdk";
+import Link from "./link.js";
+import { Button } from "./button.js";
+import { ListingCard, ListingCardSkeleton } from "./listing-card.js";
+import { ListingCardMenu } from "./listing-card-menu.js";
+import { LoadMoreSentinel } from "./load-more-sentinel.js";
+import { useMedialaneApp } from "./medialane-app.js";
+import { useOrders } from "../utils/use-orders.js";
+import { useImageUrl } from "../utils/use-image-url.js";
+import { useUsdPrices, usdValueFor } from "../utils/use-usd-prices.js";
+import { emptyMessages } from "../utils/empty-messages.js";
+const PAGE_SIZE = 15;
+const BACKEND_PAGE_SIZE = 50;
+function MarketplaceListingCard({ order, onBuy }) {
+  const resolveImage = useImageUrl();
+  const usdPrices = useUsdPrices();
+  return /* @__PURE__ */ jsx(
+    ListingCard,
+    {
+      order,
+      onBuy,
+      overflowMenu: /* @__PURE__ */ jsx(ListingCardMenu, { order }),
+      imageUrl: resolveImage(order.token?.image),
+      usdValue: usdValueFor(order.price?.formatted, order.price?.currency, usdPrices)
+    }
+  );
+}
+function ListingsGrid({ sort = "recent", currency, orderType = "", minPrice, maxPrice, initialOrders, onBuy }) {
+  const { walletAddress } = useMedialaneApp();
+  const [backendPage, setBackendPage] = useState(1);
+  const [visiblePages, setVisiblePages] = useState(1);
+  const [allOrders, setAllOrders] = useState(initialOrders ?? []);
+  const prevFilters = useRef({ sort, currency, orderType, minPrice, maxPrice });
+  useEffect(() => {
+    const f = prevFilters.current;
+    if (f.sort !== sort || f.currency !== currency || f.orderType !== orderType || f.minPrice !== minPrice || f.maxPrice !== maxPrice) {
+      prevFilters.current = { sort, currency, orderType, minPrice, maxPrice };
+      setBackendPage(1);
+      setVisiblePages(1);
+      setAllOrders([]);
+    }
+  }, [sort, currency, orderType, minPrice, maxPrice]);
+  const { orders, meta, isLoading } = useOrders({
+    status: "ACTIVE",
+    sort,
+    ...currency ? { currency } : {},
+    ...minPrice ? { minPrice } : {},
+    ...maxPrice ? { maxPrice } : {},
+    page: backendPage,
+    limit: BACKEND_PAGE_SIZE
+  });
+  useEffect(() => {
+    if (isLoading) return;
+    if (backendPage === 1) {
+      setAllOrders(orders);
+    } else {
+      setAllOrders((prev) => {
+        const existing = new Set(prev.map((o) => o.orderHash));
+        const newItems = orders.filter((o) => !existing.has(o.orderHash));
+        return newItems.length > 0 ? [...prev, ...newItems] : prev;
+      });
+    }
+  }, [orders, isLoading, backendPage]);
+  const filteredOrders = orderType === "offers" ? allOrders.filter((o) => o.offer.itemType === "ERC20") : allOrders.filter((o) => o.offer.itemType === "ERC721" || o.offer.itemType === "ERC1155");
+  const visibleLimit = visiblePages * PAGE_SIZE;
+  const displayedOrders = filteredOrders.slice(0, visibleLimit);
+  const isInitialLoading = isLoading && allOrders.length === 0;
+  const isLoadingMore = isLoading && allOrders.length > 0;
+  const backendTotal = meta?.total ?? 0;
+  const hasBackendMore = backendTotal > 0 ? allOrders.length < backendTotal : orders.length === BACKEND_PAGE_SIZE;
+  const hasBufferedOrders = filteredOrders.length > displayedOrders.length;
+  const hasMore = hasBufferedOrders || hasBackendMore || isLoadingMore;
+  useEffect(() => {
+    if (isLoading || !hasBackendMore || filteredOrders.length >= visibleLimit) return;
+    setBackendPage((p) => p + 1);
+  }, [filteredOrders.length, hasBackendMore, isLoading, visibleLimit]);
+  const isOwner = (order) => !!walletAddress && !!order.offerer && normalizeAddress("STARKNET", order.offerer) === normalizeAddress("STARKNET", walletAddress);
+  const handleLoadMore = () => {
+    setVisiblePages((p) => p + 1);
+  };
+  if (isInitialLoading || filteredOrders.length === 0 && hasBackendMore) {
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: PAGE_SIZE }).map((_, i) => /* @__PURE__ */ jsx(ListingCardSkeleton, {}, i)) });
+  }
+  if (filteredOrders.length === 0 && !isLoading && !hasBackendMore) {
+    const empty = orderType === "offers" ? emptyMessages.offers : emptyMessages.listings;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-24 gap-4 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: empty.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-sm", children: empty.description }),
+      orderType !== "offers" && /* @__PURE__ */ jsx(Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/create", children: "Create & List" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: [
+      displayedOrders.map((order) => /* @__PURE__ */ jsx(MarketplaceListingCard, { order, onBuy: isOwner(order) ? void 0 : onBuy }, order.orderHash)),
+      isLoadingMore && Array.from({ length: PAGE_SIZE }).map((_, i) => /* @__PURE__ */ jsx(ListingCardSkeleton, {}, `loading-${i}`))
+    ] }),
+    /* @__PURE__ */ jsx(LoadMoreSentinel, { hasMore, isLoading: isLoadingMore, onLoadMore: handleLoadMore }),
+    !hasMore && filteredOrders.length > PAGE_SIZE && /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
+      "All ",
+      filteredOrders.length,
+      " ",
+      orderType === "offers" ? "offers" : "listings",
+      " shown"
+    ] })
+  ] }) });
+}
+export {
+  ListingsGrid
+};
+//# sourceMappingURL=listings-grid.js.map

package/dist/components/listings-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/listings-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useRef } from \"react\";\nimport { normalizeAddress, type ApiOrder, type SortOrder } from \"@medialane/sdk\";\nimport Link from \"./link.js\";\nimport { Button } from \"./button.js\";\nimport { ListingCard, ListingCardSkeleton } from \"./listing-card.js\";\nimport { ListingCardMenu } from \"./listing-card-menu.js\";\nimport { LoadMoreSentinel } from \"./load-more-sentinel.js\";\nimport { useMedialaneApp } from \"./medialane-app.js\";\nimport { useOrders } from \"../utils/use-orders.js\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\nimport { useUsdPrices, usdValueFor } from \"../utils/use-usd-prices.js\";\nimport { emptyMessages } from \"../utils/empty-messages.js\";\n\nconst PAGE_SIZE = 15;\nconst BACKEND_PAGE_SIZE = 50;\n\nexport interface ListingsGridProps {\n  sort?: string;\n  currency?: string;\n  orderType?: string;\n  minPrice?: string;\n  maxPrice?: string;\n\n  initialOrders?: ApiOrder[];\n  onBuy: (order: ApiOrder) => void;\n}\n\nfunction MarketplaceListingCard({ order, onBuy }: { order: ApiOrder; onBuy?: (order: ApiOrder) => void }) {\n  const resolveImage = useImageUrl();\n  const usdPrices = useUsdPrices();\n  return (\n    <ListingCard\n      order={order}\n      onBuy={onBuy}\n      overflowMenu={<ListingCardMenu order={order} />}\n      imageUrl={resolveImage(order.token?.image)}\n      usdValue={usdValueFor(order.price?.formatted, order.price?.currency, usdPrices)}\n    />\n  );\n}\n\nexport function ListingsGrid({ sort = \"recent\", currency, orderType = \"\", minPrice, maxPrice, initialOrders, onBuy }: ListingsGridProps) {\n  const { walletAddress } = useMedialaneApp();\n  const [backendPage, setBackendPage] = useState(1);\n  const [visiblePages, setVisiblePages] = useState(1);\n  const [allOrders, setAllOrders] = useState<ApiOrder[]>(initialOrders ?? []);\n\n  const prevFilters = useRef({ sort, currency, orderType, minPrice, maxPrice });\n  useEffect(() => {\n    const f = prevFilters.current;\n    if (f.sort !== sort || f.currency !== currency || f.orderType !== orderType || f.minPrice !== minPrice || f.maxPrice !== maxPrice) {\n      prevFilters.current = { sort, currency, orderType, minPrice, maxPrice };\n      setBackendPage(1);\n      setVisiblePages(1);\n      setAllOrders([]);\n    }\n  }, [sort, currency, orderType, minPrice, maxPrice]);\n\n  const { orders, meta, isLoading } = useOrders({\n    status: \"ACTIVE\",\n    sort: sort as SortOrder,\n    ...(currency ? { currency } : {}),\n    ...(minPrice ? { minPrice } : {}),\n    ...(maxPrice ? { maxPrice } : {}),\n    page: backendPage,\n    limit: BACKEND_PAGE_SIZE,\n  });\n\n  useEffect(() => {\n    if (isLoading) return;\n    if (backendPage === 1) {\n      setAllOrders(orders);\n    } else {\n      setAllOrders((prev) => {\n        const existing = new Set(prev.map((o) => o.orderHash));\n        const newItems = orders.filter((o) => !existing.has(o.orderHash));\n        return newItems.length > 0 ? [...prev, ...newItems] : prev;\n      });\n    }\n  }, [orders, isLoading, backendPage]);\n\n  const filteredOrders = orderType === \"offers\"\n    ? allOrders.filter((o) => o.offer.itemType === \"ERC20\")\n    : allOrders.filter((o) => o.offer.itemType === \"ERC721\" || o.offer.itemType === \"ERC1155\");\n\n  const visibleLimit = visiblePages * PAGE_SIZE;\n  const displayedOrders = filteredOrders.slice(0, visibleLimit);\n\n  const isInitialLoading = isLoading && allOrders.length === 0;\n  const isLoadingMore = isLoading && allOrders.length > 0;\n  const backendTotal = meta?.total ?? 0;\n  const hasBackendMore = backendTotal > 0\n    ? allOrders.length < backendTotal\n    : orders.length === BACKEND_PAGE_SIZE;\n  const hasBufferedOrders = filteredOrders.length > displayedOrders.length;\n  const hasMore = hasBufferedOrders || hasBackendMore || isLoadingMore;\n\n  useEffect(() => {\n    if (isLoading || !hasBackendMore || filteredOrders.length >= visibleLimit) return;\n    setBackendPage((p) => p + 1);\n  }, [filteredOrders.length, hasBackendMore, isLoading, visibleLimit]);\n\n  const isOwner = (order: ApiOrder) =>\n    !!walletAddress && !!order.offerer && normalizeAddress(\"STARKNET\", order.offerer) === normalizeAddress(\"STARKNET\", walletAddress);\n\n  const handleLoadMore = () => {\n    setVisiblePages((p) => p + 1);\n  };\n\n  if (isInitialLoading || (filteredOrders.length === 0 && hasBackendMore)) {\n    return (\n      <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4\">\n        {Array.from({ length: PAGE_SIZE }).map((_, i) => (\n          <ListingCardSkeleton key={i} />\n        ))}\n      </div>\n    );\n  }\n\n  if (filteredOrders.length === 0 && !isLoading && !hasBackendMore) {\n    const empty = orderType === \"offers\" ? emptyMessages.offers : emptyMessages.listings;\n    return (\n      <div className=\"flex flex-col items-center justify-center py-24 gap-4 text-center\">\n        <p className=\"text-2xl font-bold\">{empty.title}</p>\n        <p className=\"text-muted-foreground max-w-sm\">{empty.description}</p>\n        {orderType !== \"offers\" && (\n          <Button variant=\"outline\" asChild>\n            <Link href=\"/create\">Create &amp; List</Link>\n          </Button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"space-y-6\">\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4\">\n          {displayedOrders.map((order) => (\n            <MarketplaceListingCard key={order.orderHash} order={order} onBuy={isOwner(order) ? undefined : onBuy} />\n          ))}\n          {isLoadingMore &&\n            Array.from({ length: PAGE_SIZE }).map((_, i) => (\n              <ListingCardSkeleton key={`loading-${i}`} />\n            ))}\n        </div>\n\n        <LoadMoreSentinel hasMore={hasMore} isLoading={isLoadingMore} onLoadMore={handleLoadMore} />\n\n        {!hasMore && filteredOrders.length > PAGE_SIZE && (\n          <p className=\"text-center text-xs text-muted-foreground\">\n            All {filteredOrders.length} {orderType === \"offers\" ? \"offers\" : \"listings\"} shown\n          </p>\n        )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/media-wallet/action-button.cjs

@@ -19,26 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var action_button_exports = {};
 __export(action_button_exports, {
-  ACTION_FOREGROUNDS: () => ACTION_FOREGROUNDS,
-  ACTION_GRADIENTS: () => ACTION_GRADIENTS,
   TrustNote: () => TrustNote
 });
 module.exports = __toCommonJS(action_button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-const ACTION_GRADIENTS = {
-  buy: ["#3b7bff", "#8a5cf6", "#3b7bff"],
-  submit: ["#d6359a", "#5b4ce6", "#d6359a"],
-  offer: ["#f6608f", "#fb8b46", "#f6608f"],
-  remix: ["#8a5cf6", "#f6608f", "#8a5cf6"],
-  license: ["#3b7bff", "#5b4ce6", "#3b7bff"]
-};
-const ACTION_FOREGROUNDS = {
-  buy: "#3b7bff",
-  submit: "#5b4ce6",
-  offer: "#fb7a32",
-  remix: "#8a3ff0",
-  license: "#3b7bff"
-};
 function TrustNote({ children, center }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex items-center gap-1.5 text-2xs leading-relaxed text-muted-foreground ${center ? "justify-center" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z" }) }),
@@ -47,8 +31,6 @@ function TrustNote({ children, center }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ACTION_FOREGROUNDS,
-  ACTION_GRADIENTS,
   TrustNote
 });
 //# sourceMappingURL=action-button.cjs.map

package/dist/components/media-wallet/action-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/media-wallet/action-button.tsx"],"sourcesContent":["\"use client\";\n\nexport const ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy: [\"#3b7bff\", \"#8a5cf6\", \"#3b7bff\"],\n  submit: [\"#d6359a\", \"#5b4ce6\", \"#d6359a\"],\n  offer: [\"#f6608f\", \"#fb8b46\", \"#f6608f\"],\n  remix: [\"#8a5cf6\", \"#f6608f\", \"#8a5cf6\"],\n  license: [\"#3b7bff\", \"#5b4ce6\", \"#3b7bff\"],\n};\nexport const ACTION_FOREGROUNDS: Record<string, string> = {\n  buy: \"#3b7bff\",\n  submit: \"#5b4ce6\",\n  offer: \"#fb7a32\",\n  remix: \"#8a3ff0\",\n  license: \"#3b7bff\",\n};\n\nexport function TrustNote({ children, center }: { children: React.ReactNode; center?: boolean }) {\n  return (\n    <div className={`flex items-center gap-1.5 text-2xs leading-relaxed text-muted-foreground ${center ? \"justify-center\" : \"\"}`}>\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"flex-shrink-0\">\n        <path d=\"M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z\" />\n      </svg>\n      <span>{children}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAjBG,MAAM,mBAA6D;AAAA,EACxE,KAAK,CAAC,WAAW,WAAW,SAAS;AAAA,EACrC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,OAAO,CAAC,WAAW,WAAW,SAAS;AAAA,EACvC,OAAO,CAAC,WAAW,WAAW,SAAS;AAAA,EACvC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AACO,MAAM,qBAA6C;AAAA,EACxD,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAEO,SAAS,UAAU,EAAE,UAAU,OAAO,GAAoD;AAC/F,SACE,6CAAC,SAAI,WAAW,4EAA4E,SAAS,mBAAmB,EAAE,IACxH;AAAA,gDAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,WAAU,iBAC1G,sDAAC,UAAK,GAAE,gDAA+C,GACzD;AAAA,IACA,4CAAC,UAAM,UAAS;AAAA,KAClB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/media-wallet/action-button.tsx"],"sourcesContent":["\"use client\";\n\nexport function TrustNote({ children, center }: { children: React.ReactNode; center?: boolean }) {\n  return (\n    <div className={`flex items-center gap-1.5 text-2xs leading-relaxed text-muted-foreground ${center ? \"justify-center\" : \"\"}`}>\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"flex-shrink-0\">\n        <path d=\"M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z\" />\n      </svg>\n      <span>{children}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAFG,SAAS,UAAU,EAAE,UAAU,OAAO,GAAoD;AAC/F,SACE,6CAAC,SAAI,WAAW,4EAA4E,SAAS,mBAAmB,EAAE,IACxH;AAAA,gDAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,WAAU,iBAC1G,sDAAC,UAAK,GAAE,gDAA+C,GACzD;AAAA,IACA,4CAAC,UAAM,UAAS;AAAA,KAClB;AAEJ;","names":[]}

package/dist/components/media-wallet/action-button.d.cts

@@ -1,10 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const ACTION_GRADIENTS: Record<string, [string, string, string]>;
-declare const ACTION_FOREGROUNDS: Record<string, string>;
 declare function TrustNote({ children, center }: {
     children: React.ReactNode;
     center?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { ACTION_FOREGROUNDS, ACTION_GRADIENTS, TrustNote };
+export { TrustNote };

package/dist/components/media-wallet/action-button.d.ts

@@ -1,10 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const ACTION_GRADIENTS: Record<string, [string, string, string]>;
-declare const ACTION_FOREGROUNDS: Record<string, string>;
 declare function TrustNote({ children, center }: {
     children: React.ReactNode;
     center?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { ACTION_FOREGROUNDS, ACTION_GRADIENTS, TrustNote };
+export { TrustNote };

package/dist/components/media-wallet/action-button.js

@@ -1,19 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-const ACTION_GRADIENTS = {
-  buy: ["#3b7bff", "#8a5cf6", "#3b7bff"],
-  submit: ["#d6359a", "#5b4ce6", "#d6359a"],
-  offer: ["#f6608f", "#fb8b46", "#f6608f"],
-  remix: ["#8a5cf6", "#f6608f", "#8a5cf6"],
-  license: ["#3b7bff", "#5b4ce6", "#3b7bff"]
-};
-const ACTION_FOREGROUNDS = {
-  buy: "#3b7bff",
-  submit: "#5b4ce6",
-  offer: "#fb7a32",
-  remix: "#8a3ff0",
-  license: "#3b7bff"
-};
 function TrustNote({ children, center }) {
   return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1.5 text-2xs leading-relaxed text-muted-foreground ${center ? "justify-center" : ""}`, children: [
     /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "flex-shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z" }) }),
@@ -21,8 +7,6 @@ function TrustNote({ children, center }) {
   ] });
 }
 export {
-  ACTION_FOREGROUNDS,
-  ACTION_GRADIENTS,
   TrustNote
 };
 //# sourceMappingURL=action-button.js.map

package/dist/components/media-wallet/action-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/media-wallet/action-button.tsx"],"sourcesContent":["\"use client\";\n\nexport const ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy: [\"#3b7bff\", \"#8a5cf6\", \"#3b7bff\"],\n  submit: [\"#d6359a\", \"#5b4ce6\", \"#d6359a\"],\n  offer: [\"#f6608f\", \"#fb8b46\", \"#f6608f\"],\n  remix: [\"#8a5cf6\", \"#f6608f\", \"#8a5cf6\"],\n  license: [\"#3b7bff\", \"#5b4ce6\", \"#3b7bff\"],\n};\nexport const ACTION_FOREGROUNDS: Record<string, string> = {\n  buy: \"#3b7bff\",\n  submit: \"#5b4ce6\",\n  offer: \"#fb7a32\",\n  remix: \"#8a3ff0\",\n  license: \"#3b7bff\",\n};\n\nexport function TrustNote({ children, center }: { children: React.ReactNode; center?: boolean }) {\n  return (\n    <div className={`flex items-center gap-1.5 text-2xs leading-relaxed text-muted-foreground ${center ? \"justify-center\" : \"\"}`}>\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"flex-shrink-0\">\n        <path d=\"M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z\" />\n      </svg>\n      <span>{children}</span>\n    </div>\n  );\n}\n"],"mappings":";AAmBI,SAEI,KAFJ;AAjBG,MAAM,mBAA6D;AAAA,EACxE,KAAK,CAAC,WAAW,WAAW,SAAS;AAAA,EACrC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,OAAO,CAAC,WAAW,WAAW,SAAS;AAAA,EACvC,OAAO,CAAC,WAAW,WAAW,SAAS;AAAA,EACvC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AACO,MAAM,qBAA6C;AAAA,EACxD,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAEO,SAAS,UAAU,EAAE,UAAU,OAAO,GAAoD;AAC/F,SACE,qBAAC,SAAI,WAAW,4EAA4E,SAAS,mBAAmB,EAAE,IACxH;AAAA,wBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,WAAU,iBAC1G,8BAAC,UAAK,GAAE,gDAA+C,GACzD;AAAA,IACA,oBAAC,UAAM,UAAS;AAAA,KAClB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/media-wallet/action-button.tsx"],"sourcesContent":["\"use client\";\n\nexport function TrustNote({ children, center }: { children: React.ReactNode; center?: boolean }) {\n  return (\n    <div className={`flex items-center gap-1.5 text-2xs leading-relaxed text-muted-foreground ${center ? \"justify-center\" : \"\"}`}>\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"flex-shrink-0\">\n        <path d=\"M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z\" />\n      </svg>\n      <span>{children}</span>\n    </div>\n  );\n}\n"],"mappings":";AAII,SAEI,KAFJ;AAFG,SAAS,UAAU,EAAE,UAAU,OAAO,GAAoD;AAC/F,SACE,qBAAC,SAAI,WAAW,4EAA4E,SAAS,mBAAmB,EAAE,IACxH;AAAA,wBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,WAAU,iBAC1G,8BAAC,UAAK,GAAE,gDAA+C,GACzD;AAAA,IACA,oBAAC,UAAM,UAAS;AAAA,KAClB;AAEJ;","names":[]}

package/dist/components/media-wallet/activate-card.cjs

@@ -26,8 +26,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_action_button = require("../action-button.js");
 var import_describe_error = require("../../utils/describe-error.js");
+var import_brand = require("../../data/brand.js");
 var import_types = require("./types.js");
-const BRAND_GRADIENT = "linear-gradient(115deg,#3b7bff,#8a5cf6,#f6608f,#fb8b46,#3b7bff)";
 function ActivateCard({ onActivated }) {
   const { wallet } = (0, import_types.useMediaWalletApp)();
   const [busy, setBusy] = (0, import_react.useState)(false);
@@ -54,7 +54,7 @@ function ActivateCard({ onActivated }) {
         onClick: activate,
         disabled: busy,
         className: "w-full disabled:opacity-40 disabled:pointer-events-none",
-        style: { "--ml-grad": BRAND_GRADIENT },
+        style: { "--ml-grad": import_brand.BRAND_GRADIENT },
         children: [
           busy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-foreground/25 border-t-foreground" }),
           "Activate my wallet"

package/dist/components/media-wallet/activate-card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/media-wallet/activate-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { ActionButton } from \"../action-button.js\";\nimport { describeError } from \"../../utils/describe-error.js\";\nimport { useMediaWalletApp } from \"./types.js\";\n\nconst BRAND_GRADIENT = \"linear-gradient(115deg,#3b7bff,#8a5cf6,#f6608f,#fb8b46,#3b7bff)\";\n\nexport function ActivateCard({ onActivated }: { onActivated: (txHash?: string) => void }) {\n  const { wallet } = useMediaWalletApp();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const activate = async () => {\n    setError(null);\n    setBusy(true);\n    try {\n      await wallet.completeDeployment(() => {});\n      onActivated();\n    } catch (e) {\n      setError(describeError(e).message);\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <div className=\"card-base p-5\">\n      <div className=\"flex flex-col items-center gap-3 text-center\">\n        <ActionButton\n          action=\"buy\"\n          big\n          onClick={activate}\n          disabled={busy}\n          className=\"w-full disabled:opacity-40 disabled:pointer-events-none\"\n          style={{ \"--ml-grad\": BRAND_GRADIENT } as React.CSSProperties}\n        >\n          {busy && <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-foreground/25 border-t-foreground\" />}\n          Activate my wallet\n        </ActionButton>\n        <p className=\"mx-auto max-w-[22rem] text-sm leading-relaxed text-muted-foreground\">\n          Your account is stored securely and ready whenever you need it. Activating is free — no gas fees.\n        </p>\n        {error && <p className=\"text-xs text-destructive\">{error}</p>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BQ;AA5BR,mBAAyB;AACzB,2BAA6B;AAC7B,4BAA8B;AAC9B,mBAAkC;AAElC,MAAM,iBAAiB;AAEhB,SAAS,aAAa,EAAE,YAAY,GAA+C;AACxF,QAAM,EAAE,OAAO,QAAI,gCAAkB;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AAEtD,QAAM,WAAW,YAAY;AAC3B,aAAS,IAAI;AACb,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,OAAO,mBAAmB,MAAM;AAAA,MAAC,CAAC;AACxC,kBAAY;AAAA,IACd,SAAS,GAAG;AACV,mBAAS,qCAAc,CAAC,EAAE,OAAO;AAAA,IACnC,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAU,iBACb,uDAAC,SAAI,WAAU,gDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,KAAG;AAAA,QACH,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,eAAe;AAAA,QAEpC;AAAA,kBAAQ,4CAAC,UAAK,WAAU,uFAAsF;AAAA,UAAG;AAAA;AAAA;AAAA,IAEpH;AAAA,IACA,4CAAC,OAAE,WAAU,uEAAsE,oHAEnF;AAAA,IACC,SAAS,4CAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,KAC3D,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/media-wallet/activate-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { ActionButton } from \"../action-button.js\";\nimport { describeError } from \"../../utils/describe-error.js\";\nimport { BRAND_GRADIENT } from \"../../data/brand.js\";\nimport { useMediaWalletApp } from \"./types.js\";\n\nexport function ActivateCard({ onActivated }: { onActivated: (txHash?: string) => void }) {\n  const { wallet } = useMediaWalletApp();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const activate = async () => {\n    setError(null);\n    setBusy(true);\n    try {\n      await wallet.completeDeployment(() => {});\n      onActivated();\n    } catch (e) {\n      setError(describeError(e).message);\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <div className=\"card-base p-5\">\n      <div className=\"flex flex-col items-center gap-3 text-center\">\n        <ActionButton\n          action=\"buy\"\n          big\n          onClick={activate}\n          disabled={busy}\n          className=\"w-full disabled:opacity-40 disabled:pointer-events-none\"\n          style={{ \"--ml-grad\": BRAND_GRADIENT } as React.CSSProperties}\n        >\n          {busy && <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-foreground/25 border-t-foreground\" />}\n          Activate my wallet\n        </ActionButton>\n        <p className=\"mx-auto max-w-[22rem] text-sm leading-relaxed text-muted-foreground\">\n          Your account is stored securely and ready whenever you need it. Activating is free — no gas fees.\n        </p>\n        {error && <p className=\"text-xs text-destructive\">{error}</p>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BQ;AA3BR,mBAAyB;AACzB,2BAA6B;AAC7B,4BAA8B;AAC9B,mBAA+B;AAC/B,mBAAkC;AAE3B,SAAS,aAAa,EAAE,YAAY,GAA+C;AACxF,QAAM,EAAE,OAAO,QAAI,gCAAkB;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AAEtD,QAAM,WAAW,YAAY;AAC3B,aAAS,IAAI;AACb,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,OAAO,mBAAmB,MAAM;AAAA,MAAC,CAAC;AACxC,kBAAY;AAAA,IACd,SAAS,GAAG;AACV,mBAAS,qCAAc,CAAC,EAAE,OAAO;AAAA,IACnC,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAU,iBACb,uDAAC,SAAI,WAAU,gDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,KAAG;AAAA,QACH,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,4BAAe;AAAA,QAEpC;AAAA,kBAAQ,4CAAC,UAAK,WAAU,uFAAsF;AAAA,UAAG;AAAA;AAAA;AAAA,IAEpH;AAAA,IACA,4CAAC,OAAE,WAAU,uEAAsE,oHAEnF;AAAA,IACC,SAAS,4CAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,KAC3D,GACF;AAEJ;","names":[]}

package/dist/components/media-wallet/activate-card.js

@@ -3,8 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ActionButton } from "../action-button.js";
 import { describeError } from "../../utils/describe-error.js";
+import { BRAND_GRADIENT } from "../../data/brand.js";
 import { useMediaWalletApp } from "./types.js";
-const BRAND_GRADIENT = "linear-gradient(115deg,#3b7bff,#8a5cf6,#f6608f,#fb8b46,#3b7bff)";
 function ActivateCard({ onActivated }) {
   const { wallet } = useMediaWalletApp();
   const [busy, setBusy] = useState(false);

package/dist/components/media-wallet/activate-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/media-wallet/activate-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { ActionButton } from \"../action-button.js\";\nimport { describeError } from \"../../utils/describe-error.js\";\nimport { useMediaWalletApp } from \"./types.js\";\n\nconst BRAND_GRADIENT = \"linear-gradient(115deg,#3b7bff,#8a5cf6,#f6608f,#fb8b46,#3b7bff)\";\n\nexport function ActivateCard({ onActivated }: { onActivated: (txHash?: string) => void }) {\n  const { wallet } = useMediaWalletApp();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const activate = async () => {\n    setError(null);\n    setBusy(true);\n    try {\n      await wallet.completeDeployment(() => {});\n      onActivated();\n    } catch (e) {\n      setError(describeError(e).message);\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <div className=\"card-base p-5\">\n      <div className=\"flex flex-col items-center gap-3 text-center\">\n        <ActionButton\n          action=\"buy\"\n          big\n          onClick={activate}\n          disabled={busy}\n          className=\"w-full disabled:opacity-40 disabled:pointer-events-none\"\n          style={{ \"--ml-grad\": BRAND_GRADIENT } as React.CSSProperties}\n        >\n          {busy && <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-foreground/25 border-t-foreground\" />}\n          Activate my wallet\n        </ActionButton>\n        <p className=\"mx-auto max-w-[22rem] text-sm leading-relaxed text-muted-foreground\">\n          Your account is stored securely and ready whenever you need it. Activating is free — no gas fees.\n        </p>\n        {error && <p className=\"text-xs text-destructive\">{error}</p>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA8BQ,SAQW,KARX;AA5BR,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAElC,MAAM,iBAAiB;AAEhB,SAAS,aAAa,EAAE,YAAY,GAA+C;AACxF,QAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,WAAW,YAAY;AAC3B,aAAS,IAAI;AACb,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,OAAO,mBAAmB,MAAM;AAAA,MAAC,CAAC;AACxC,kBAAY;AAAA,IACd,SAAS,GAAG;AACV,eAAS,cAAc,CAAC,EAAE,OAAO;AAAA,IACnC,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAU,iBACb,+BAAC,SAAI,WAAU,gDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,KAAG;AAAA,QACH,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,eAAe;AAAA,QAEpC;AAAA,kBAAQ,oBAAC,UAAK,WAAU,uFAAsF;AAAA,UAAG;AAAA;AAAA;AAAA,IAEpH;AAAA,IACA,oBAAC,OAAE,WAAU,uEAAsE,oHAEnF;AAAA,IACC,SAAS,oBAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,KAC3D,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/media-wallet/activate-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { ActionButton } from \"../action-button.js\";\nimport { describeError } from \"../../utils/describe-error.js\";\nimport { BRAND_GRADIENT } from \"../../data/brand.js\";\nimport { useMediaWalletApp } from \"./types.js\";\n\nexport function ActivateCard({ onActivated }: { onActivated: (txHash?: string) => void }) {\n  const { wallet } = useMediaWalletApp();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const activate = async () => {\n    setError(null);\n    setBusy(true);\n    try {\n      await wallet.completeDeployment(() => {});\n      onActivated();\n    } catch (e) {\n      setError(describeError(e).message);\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <div className=\"card-base p-5\">\n      <div className=\"flex flex-col items-center gap-3 text-center\">\n        <ActionButton\n          action=\"buy\"\n          big\n          onClick={activate}\n          disabled={busy}\n          className=\"w-full disabled:opacity-40 disabled:pointer-events-none\"\n          style={{ \"--ml-grad\": BRAND_GRADIENT } as React.CSSProperties}\n        >\n          {busy && <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-foreground/25 border-t-foreground\" />}\n          Activate my wallet\n        </ActionButton>\n        <p className=\"mx-auto max-w-[22rem] text-sm leading-relaxed text-muted-foreground\">\n          Your account is stored securely and ready whenever you need it. Activating is free — no gas fees.\n        </p>\n        {error && <p className=\"text-xs text-destructive\">{error}</p>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA6BQ,SAQW,KARX;AA3BR,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAE3B,SAAS,aAAa,EAAE,YAAY,GAA+C;AACxF,QAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,WAAW,YAAY;AAC3B,aAAS,IAAI;AACb,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,OAAO,mBAAmB,MAAM;AAAA,MAAC,CAAC;AACxC,kBAAY;AAAA,IACd,SAAS,GAAG;AACV,eAAS,cAAc,CAAC,EAAE,OAAO;AAAA,IACnC,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAU,iBACb,+BAAC,SAAI,WAAU,gDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,KAAG;AAAA,QACH,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,eAAe;AAAA,QAEpC;AAAA,kBAAQ,oBAAC,UAAK,WAAU,uFAAsF;AAAA,UAAG;AAAA;AAAA;AAAA,IAEpH;AAAA,IACA,oBAAC,OAAE,WAAU,uEAAsE,oHAEnF;AAAA,IACC,SAAS,oBAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,KAC3D,GACF;AAEJ;","names":[]}

package/dist/components/media-wallet/media-wallet-activity.cjs

@@ -45,13 +45,11 @@ var import_wallet_activity_icon = require("./wallet-activity-icon.js");
 var import_action_modal = require("./action-modal.js");
 var import_types = require("./types.js");
 var import_medialane_app = require("../medialane-app.js");
+var import_brand = require("../../data/brand.js");
 var import_empty_messages = require("../../utils/empty-messages.js");
-const GRADS = [
-  "linear-gradient(135deg,#3b7bff,#8a5cf6)",
-  "linear-gradient(135deg,#8a5cf6,#f6608f)",
-  "linear-gradient(135deg,#f6608f,#fb8b46)",
-  "linear-gradient(135deg,#5b4ce6,#3b7bff)"
-];
+const GRADS = [["blue", "purple"], ["purple", "rose"], ["rose", "orange"], ["purple", "blue"]].map(
+  ([from, to]) => `linear-gradient(135deg, ${import_brand.BRAND_COLOR[from]}, ${import_brand.BRAND_COLOR[to]})`
+);
 const gradFor = (seed) => {
   let h = 0;
   for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) | 0;