@medialane/ui 0.183.0 → 0.185.0

package/dist/components/drop/page/drop-mint-dialog.js

@@ -0,0 +1,73 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+import { ActionDialog } from "../../action-dialog.js";
+import { GradientButton } from "../../gradient-button.js";
+import { Button } from "../../button.js";
+import { describeError } from "../../../utils/describe-error.js";
+function DropMintDialog({
+  open,
+  onClose,
+  name,
+  quantity,
+  totalText,
+  onMint,
+  portfolioHref
+}) {
+  const [step, setStep] = useState({ kind: "confirm" });
+  const mint = async () => {
+    setStep({ kind: "minting" });
+    try {
+      setStep({ kind: "done", tokenIds: (await onMint()).tokenIds });
+    } catch (err) {
+      setStep({ kind: "error", message: describeError(err, "The mint didn't go through. Please try again.").message });
+    }
+  };
+  const close = () => {
+    if (step.kind === "minting") return;
+    setStep({ kind: "confirm" });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(ActionDialog, { open, onClose: close, width: 460, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-6", children: [
+    step.kind === "confirm" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold", children: [
+        "Mint ",
+        quantity.toString(),
+        " from ",
+        name
+      ] }),
+      totalText && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: totalText }),
+      /* @__PURE__ */ jsx(GradientButton, { big: true, onClick: () => void mint(), children: "Confirm mint" })
+    ] }),
+    step.kind === "minting" && /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+      "Minting\u2026"
+    ] }),
+    step.kind === "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" }),
+        "Minted"
+      ] }),
+      step.tokenIds.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Token",
+        step.tokenIds.length > 1 ? "s" : "",
+        " #",
+        step.tokenIds.join(", #")
+      ] }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: portfolioHref, children: "View in portfolio" }) })
+    ] }),
+    step.kind === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: [
+        /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-destructive" }),
+        "Not minted"
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: step.message }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => void mint(), children: "Try again" })
+    ] })
+  ] }) });
+}
+export {
+  DropMintDialog
+};
+//# sourceMappingURL=drop-mint-dialog.js.map

package/dist/components/drop/page/drop-mint-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/drop/page/drop-mint-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { CheckCircle2, Loader2, XCircle } from \"lucide-react\";\nimport { ActionDialog } from \"../../action-dialog.js\";\nimport { GradientButton } from \"../../gradient-button.js\";\nimport { Button } from \"../../button.js\";\nimport { describeError } from \"../../../utils/describe-error.js\";\n\ntype Step = { kind: \"confirm\" } | { kind: \"minting\" } | { kind: \"done\"; tokenIds: string[] } | { kind: \"error\"; message: string };\n\nexport function DropMintDialog({\n  open, onClose, name, quantity, totalText, onMint, portfolioHref,\n}: {\n  open: boolean;\n  onClose: () => void;\n  name: string;\n  quantity: bigint;\n  totalText: string | null;\n  onMint: () => Promise<{ tokenIds: string[] }>;\n  portfolioHref: string;\n}) {\n  const [step, setStep] = useState<Step>({ kind: \"confirm\" });\n  const mint = async () => {\n    setStep({ kind: \"minting\" });\n    try {\n      setStep({ kind: \"done\", tokenIds: (await onMint()).tokenIds });\n    } catch (err) {\n      setStep({ kind: \"error\", message: describeError(err, \"The mint didn't go through. Please try again.\").message });\n    }\n  };\n  const close = () => {\n    if (step.kind === \"minting\") return;\n    setStep({ kind: \"confirm\" });\n    onClose();\n  };\n  return (\n    <ActionDialog open={open} onClose={close} width={460}>\n      <div className=\"space-y-5 p-6\">\n        {step.kind === \"confirm\" && (\n          <>\n            <h2 className=\"text-lg font-semibold\">Mint {quantity.toString()} from {name}</h2>\n            {totalText && <p className=\"text-sm text-muted-foreground\">{totalText}</p>}\n            <GradientButton big onClick={() => void mint()}>Confirm mint</GradientButton>\n          </>\n        )}\n        {step.kind === \"minting\" && <h2 className=\"flex items-center gap-2 text-lg font-semibold\"><Loader2 className=\"h-4 w-4 animate-spin\" />Minting…</h2>}\n        {step.kind === \"done\" && (\n          <>\n            <h2 className=\"flex items-center gap-2 text-lg font-semibold\"><CheckCircle2 className=\"h-5 w-5 text-green-500\" />Minted</h2>\n            {step.tokenIds.length > 0 && <p className=\"text-sm text-muted-foreground\">Token{step.tokenIds.length > 1 ? \"s\" : \"\"} #{step.tokenIds.join(\", #\")}</p>}\n            <Button asChild><a href={portfolioHref}>View in portfolio</a></Button>\n          </>\n        )}\n        {step.kind === \"error\" && (\n          <>\n            <h2 className=\"flex items-center gap-2 text-lg font-semibold\"><XCircle className=\"h-4 w-4 text-destructive\" />Not minted</h2>\n            <p className=\"text-sm text-muted-foreground\">{step.message}</p>\n            <Button onClick={() => void mint()}>Try again</Button>\n          </>\n        )}\n      </div>\n    </ActionDialog>\n  );\n}\n"],"mappings":";AAwCU,mBAEgB,KADd,YADF;AAtCV,SAAS,gBAAgB;AACzB,SAAS,cAAc,SAAS,eAAe;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAIvB,SAAS,eAAe;AAAA,EAC7B;AAAA,EAAM;AAAA,EAAS;AAAA,EAAM;AAAA,EAAU;AAAA,EAAW;AAAA,EAAQ;AACpD,GAQG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAe,EAAE,MAAM,UAAU,CAAC;AAC1D,QAAM,OAAO,YAAY;AACvB,YAAQ,EAAE,MAAM,UAAU,CAAC;AAC3B,QAAI;AACF,cAAQ,EAAE,MAAM,QAAQ,WAAW,MAAM,OAAO,GAAG,SAAS,CAAC;AAAA,IAC/D,SAAS,KAAK;AACZ,cAAQ,EAAE,MAAM,SAAS,SAAS,cAAc,KAAK,+CAA+C,EAAE,QAAQ,CAAC;AAAA,IACjH;AAAA,EACF;AACA,QAAM,QAAQ,MAAM;AAClB,QAAI,KAAK,SAAS,UAAW;AAC7B,YAAQ,EAAE,MAAM,UAAU,CAAC;AAC3B,YAAQ;AAAA,EACV;AACA,SACE,oBAAC,gBAAa,MAAY,SAAS,OAAO,OAAO,KAC/C,+BAAC,SAAI,WAAU,iBACZ;AAAA,SAAK,SAAS,aACb,iCACE;AAAA,2BAAC,QAAG,WAAU,yBAAwB;AAAA;AAAA,QAAM,SAAS,SAAS;AAAA,QAAE;AAAA,QAAO;AAAA,SAAK;AAAA,MAC3E,aAAa,oBAAC,OAAE,WAAU,iCAAiC,qBAAU;AAAA,MACtE,oBAAC,kBAAe,KAAG,MAAC,SAAS,MAAM,KAAK,KAAK,GAAG,0BAAY;AAAA,OAC9D;AAAA,IAED,KAAK,SAAS,aAAa,qBAAC,QAAG,WAAU,iDAAgD;AAAA,0BAAC,WAAQ,WAAU,wBAAuB;AAAA,MAAE;AAAA,OAAQ;AAAA,IAC7I,KAAK,SAAS,UACb,iCACE;AAAA,2BAAC,QAAG,WAAU,iDAAgD;AAAA,4BAAC,gBAAa,WAAU,0BAAyB;AAAA,QAAE;AAAA,SAAM;AAAA,MACtH,KAAK,SAAS,SAAS,KAAK,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,QAAM,KAAK,SAAS,SAAS,IAAI,MAAM;AAAA,QAAG;AAAA,QAAG,KAAK,SAAS,KAAK,KAAK;AAAA,SAAE;AAAA,MACjJ,oBAAC,UAAO,SAAO,MAAC,8BAAC,OAAE,MAAM,eAAe,+BAAiB,GAAI;AAAA,OAC/D;AAAA,IAED,KAAK,SAAS,WACb,iCACE;AAAA,2BAAC,QAAG,WAAU,iDAAgD;AAAA,4BAAC,WAAQ,WAAU,4BAA2B;AAAA,QAAE;AAAA,SAAU;AAAA,MACxH,oBAAC,OAAE,WAAU,iCAAiC,eAAK,SAAQ;AAAA,MAC3D,oBAAC,UAAO,SAAS,MAAM,KAAK,KAAK,GAAG,uBAAS;AAAA,OAC/C;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/components/drop/page/drop-page.cjs

@@ -0,0 +1,167 @@
+"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 drop_page_exports = {};
+__export(drop_page_exports, {
+  DropPage: () => DropPage
+});
+module.exports = __toCommonJS(drop_page_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_starknet = require("@medialane/sdk/starknet");
+var import_image = __toESM(require("../../image.js"), 1);
+var import_creator_chip = require("../../creator-chip.js");
+var import_share_button = require("../../share-button.js");
+var import_skeleton = require("../../skeleton.js");
+var import_tabs = require("../../tabs.js");
+var import_asset_license_summary = require("../../asset-license-summary.js");
+var import_token_card = require("../../token-card.js");
+var import_drop_action_box = require("./drop-action-box.js");
+var import_drop_activity = require("./drop-activity.js");
+var import_drop_manage = require("./drop-manage.js");
+var import_drop_mint_dialog = require("./drop-mint-dialog.js");
+var import_gradient_button = require("../../gradient-button.js");
+var import_ipfs = require("../../../utils/ipfs.js");
+var import_use_collections = require("../../../utils/use-collections.js");
+var import_use_drops = require("../../../utils/use-drops.js");
+var import_use_now = require("../../../utils/drop/use-now.js");
+var import_view = require("../../../utils/drop/view.js");
+var import_claim_proof = require("../../../utils/drop/claim-proof.js");
+var import_actions = require("../../../utils/drop/actions.js");
+function DropPage(props) {
+  const { contract, getClient, provider, walletAddress } = props;
+  const { drop: indexed, isLoading } = (0, import_use_drops.useDrop)(getClient, contract);
+  const chain = (0, import_use_drops.useDropChain)(provider, contract, walletAddress);
+  const { mints, mutate: refreshMints } = (0, import_use_drops.useDropMints)(getClient, contract);
+  const feeBps = (0, import_use_drops.useDropFee)(getClient);
+  const collectionFile = (0, import_use_drops.useDropFile)(getClient, indexed?.baseUri ?? null, "collection.json");
+  const isCollection = collectionFile?.drop_kind === "collection";
+  const firstToken = (0, import_use_drops.useDropFile)(getClient, indexed?.baseUri ?? null, "1");
+  const { tokens } = (0, import_use_collections.useCollectionTokens)(getClient, isCollection ? contract : null, 1, 24);
+  const now = (0, import_use_now.useNow)();
+  const [quantity, setQuantity] = (0, import_react.useState)(1n);
+  const [minting, setMinting] = (0, import_react.useState)(false);
+  const proof = (0, import_react.useMemo)(
+    () => typeof window === "undefined" ? null : (0, import_claim_proof.claimProofFor)(window.localStorage, contract, window.location.hash, "drop-proof"),
+    [contract]
+  );
+  if (isLoading && !chain.drop) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-8 lg:grid-cols-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "aspect-square rounded-2xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-96 rounded-2xl" })
+    ] });
+  }
+  if (!indexed && !chain.drop) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 py-24 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Package, { className: "mx-auto h-10 w-10 text-muted-foreground/30" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: "This drop wasn't found. A new drop can take a minute to appear." })
+    ] });
+  }
+  const onchain = chain.drop;
+  const priced = feeBps === null ? null : onchain;
+  const mint = (0, import_starknet.dropMintState)({ drop: priced, wallet: walletAddress, claimed: chain.claimed, proof, balance: chain.balance, feeBps: feeBps ?? 0, now });
+  const view = priced ? (0, import_view.actionBoxView)({ drop: priced, mint, quantity, feeBps, now }) : null;
+  const isOrganizer = !!walletAddress && !!onchain && BigInt(walletAddress) === BigInt(onchain.organizer);
+  const art = firstToken?.image ?? indexed?.image ?? null;
+  const name = indexed?.name ?? "Drop";
+  const deps = async () => ({ client: getClient(), provider, signer: await props.getSigner() });
+  const onAction = () => {
+    if (!view) return;
+    if (view.button.action === "sign-in") props.onRequireWallet();
+    if (view.button.action === "mint") setMinting(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-10 pb-28 lg:pb-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-8 lg:grid-cols-2 lg:gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square overflow-hidden rounded-2xl bg-muted", children: art && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: (0, import_ipfs.ipfsToHttp)(art), alt: name, fill: true, unoptimized: true, className: "object-cover" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-3xl font-semibold", children: name }),
+            onchain && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_creator_chip.CreatorChip, { getClient, address: onchain.organizer })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_share_button.ShareButton, { title: name, variant: "outline", size: "sm" })
+        ] }),
+        view && onchain && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden lg:block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drop_action_box.DropActionBox, { view, minted: onchain.totalMinted, maxSupply: onchain.maxSupply, quantity, onQuantity: setQuantity, onAction }) })
+      ] })
+    ] }),
+    view && onchain && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lg:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drop_action_box.DropActionBox, { view, minted: onchain.totalMinted, maxSupply: onchain.maxSupply, quantity, onQuantity: setQuantity, onAction }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-3 backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gradient_button.GradientButton, { disabled: view.button.action === "none", onClick: onAction, children: view.button.label }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.Tabs, { defaultValue: props.initialTab === "manage" && isOrganizer ? "manage" : "about", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTrigger, { value: "about", children: "About" }),
+        isCollection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTrigger, { value: "items", children: "Items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTrigger, { value: "activity", children: "Activity" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTrigger, { value: "license", children: "License" }),
+        isOrganizer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTrigger, { value: "manage", children: "Manage" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsContent, { value: "about", className: "pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "whitespace-pre-line text-sm leading-relaxed text-muted-foreground", children: indexed?.description || "No description." }) }),
+      isCollection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsContent, { value: "items", className: "pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: tokens.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_token_card.TokenCard, { token: t }, t.tokenId)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsContent, { value: "activity", className: "pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drop_activity.DropActivityList, { mints }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsContent, { value: "license", className: "pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_asset_license_summary.AssetLicenseSummary, { attributes: firstToken?.attributes ?? [] }) }),
+      isOrganizer && onchain && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsContent, { value: "manage", className: "pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_drop_manage.DropManage,
+        {
+          contract,
+          indexed,
+          onchain,
+          mints,
+          run: async (params) => {
+            await (0, import_actions.manageDrop)(await deps(), { owner: walletAddress, collection: contract, ...params });
+            await Promise.all([chain.mutate(), refreshMints()]);
+          },
+          saveExclusive: (value) => (0, import_actions.saveExclusiveContent)(getClient(), contract, value)
+        }
+      ) })
+    ] }),
+    view && minting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_drop_mint_dialog.DropMintDialog,
+      {
+        open: true,
+        onClose: () => setMinting(false),
+        name,
+        quantity: quantity > view.maxQuantity ? view.maxQuantity : quantity,
+        totalText: view.totalText,
+        portfolioHref: props.portfolioHref ?? "/portfolio",
+        onMint: async () => {
+          const res = await (0, import_actions.mintDrop)(await deps(), { claimer: walletAddress, collection: contract, quantity: quantity > view.maxQuantity ? view.maxQuantity : quantity, proof });
+          await Promise.all([chain.mutate(), refreshMints()]);
+          return res;
+        }
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DropPage
+});
+//# sourceMappingURL=drop-page.cjs.map

package/dist/components/drop/page/drop-page.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/drop/page/drop-page.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { Package } from \"lucide-react\";\nimport { dropMintState } from \"@medialane/sdk/starknet\";\nimport Image from \"../../image.js\";\nimport { CreatorChip } from \"../../creator-chip.js\";\nimport { ShareButton } from \"../../share-button.js\";\nimport { Skeleton } from \"../../skeleton.js\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../../tabs.js\";\nimport { AssetLicenseSummary } from \"../../asset-license-summary.js\";\nimport { TokenCard } from \"../../token-card.js\";\nimport { DropActionBox } from \"./drop-action-box.js\";\nimport { DropActivityList } from \"./drop-activity.js\";\nimport { DropManage } from \"./drop-manage.js\";\nimport { DropMintDialog } from \"./drop-mint-dialog.js\";\nimport { GradientButton } from \"../../gradient-button.js\";\nimport { ipfsToHttp } from \"../../../utils/ipfs.js\";\nimport { useCollectionTokens } from \"../../../utils/use-collections.js\";\nimport { useDrop, useDropChain, useDropFee, useDropFile, useDropMints } from \"../../../utils/use-drops.js\";\nimport { useNow } from \"../../../utils/drop/use-now.js\";\nimport { actionBoxView } from \"../../../utils/drop/view.js\";\nimport { claimProofFor } from \"../../../utils/drop/claim-proof.js\";\nimport { manageDrop, mintDrop, saveExclusiveContent } from \"../../../utils/drop/actions.js\";\nimport type { DropAppProps } from \"../../../utils/drop/types.js\";\n\ntype TokenFile = { image?: string; attributes?: { trait_type?: string; value?: string }[] };\n\nexport function DropPage(props: DropAppProps & { contract: string; initialTab?: string; portfolioHref?: string }) {\n  const { contract, getClient, provider, walletAddress } = props;\n  const { drop: indexed, isLoading } = useDrop(getClient, contract);\n  const chain = useDropChain(provider, contract, walletAddress);\n  const { mints, mutate: refreshMints } = useDropMints(getClient, contract);\n  const feeBps = useDropFee(getClient);\n  const collectionFile = useDropFile<{ drop_kind?: string }>(getClient, indexed?.baseUri ?? null, \"collection.json\");\n  const isCollection = collectionFile?.drop_kind === \"collection\";\n  const firstToken = useDropFile<TokenFile>(getClient, indexed?.baseUri ?? null, \"1\");\n  const { tokens } = useCollectionTokens(getClient, isCollection ? contract : null, 1, 24);\n  const now = useNow();\n  const [quantity, setQuantity] = useState(1n);\n  const [minting, setMinting] = useState(false);\n  const proof = useMemo(\n    () => (typeof window === \"undefined\" ? null : claimProofFor(window.localStorage, contract, window.location.hash, \"drop-proof\")),\n    [contract],\n  );\n\n  if (isLoading && !chain.drop) {\n    return <div className=\"grid gap-8 lg:grid-cols-2\"><Skeleton className=\"aspect-square rounded-2xl\" /><Skeleton className=\"h-96 rounded-2xl\" /></div>;\n  }\n  if (!indexed && !chain.drop) {\n    return (\n      <div className=\"space-y-3 py-24 text-center\">\n        <Package className=\"mx-auto h-10 w-10 text-muted-foreground/30\" />\n        <p className=\"text-sm text-muted-foreground\">This drop wasn't found. A new drop can take a minute to appear.</p>\n      </div>\n    );\n  }\n\n  const onchain = chain.drop;\n  // Until the fee is known the mint box counts as loading: no total, no mint button on a guessed fee.\n  const priced = feeBps === null ? null : onchain;\n  const mint = dropMintState({ drop: priced, wallet: walletAddress, claimed: chain.claimed, proof, balance: chain.balance, feeBps: feeBps ?? 0, now });\n  const view = priced ? actionBoxView({ drop: priced, mint, quantity, feeBps: feeBps!, now }) : null;\n  const isOrganizer = !!walletAddress && !!onchain && BigInt(walletAddress) === BigInt(onchain.organizer);\n  const art = firstToken?.image ?? indexed?.image ?? null;\n  const name = indexed?.name ?? \"Drop\";\n  const deps = async () => ({ client: getClient(), provider, signer: await props.getSigner() });\n\n  const onAction = () => {\n    if (!view) return;\n    if (view.button.action === \"sign-in\") props.onRequireWallet();\n    if (view.button.action === \"mint\") setMinting(true);\n  };\n\n  return (\n    <div className=\"space-y-10 pb-28 lg:pb-0\">\n      <div className=\"grid gap-8 lg:grid-cols-2 lg:gap-10\">\n        <div className=\"relative aspect-square overflow-hidden rounded-2xl bg-muted\">\n          {art && <Image src={ipfsToHttp(art)} alt={name} fill unoptimized className=\"object-cover\" />}\n        </div>\n        <div className=\"space-y-5\">\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"space-y-1\">\n              <h1 className=\"text-3xl font-semibold\">{name}</h1>\n              {onchain && <CreatorChip getClient={getClient} address={onchain.organizer} />}\n            </div>\n            <ShareButton title={name} variant=\"outline\" size=\"sm\" />\n          </div>\n          {view && onchain && (\n            <div className=\"hidden lg:block\">\n              <DropActionBox view={view} minted={onchain.totalMinted} maxSupply={onchain.maxSupply} quantity={quantity} onQuantity={setQuantity} onAction={onAction} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {view && onchain && (\n        <div className=\"lg:hidden\">\n          <DropActionBox view={view} minted={onchain.totalMinted} maxSupply={onchain.maxSupply} quantity={quantity} onQuantity={setQuantity} onAction={onAction} />\n          <div className=\"fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-3 backdrop-blur\">\n            <GradientButton disabled={view.button.action === \"none\"} onClick={onAction}>{view.button.label}</GradientButton>\n          </div>\n        </div>\n      )}\n\n      <Tabs defaultValue={props.initialTab === \"manage\" && isOrganizer ? \"manage\" : \"about\"}>\n        <TabsList>\n          <TabsTrigger value=\"about\">About</TabsTrigger>\n          {isCollection && <TabsTrigger value=\"items\">Items</TabsTrigger>}\n          <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n          <TabsTrigger value=\"license\">License</TabsTrigger>\n          {isOrganizer && <TabsTrigger value=\"manage\">Manage</TabsTrigger>}\n        </TabsList>\n        <TabsContent value=\"about\" className=\"pt-6\">\n          <p className=\"whitespace-pre-line text-sm leading-relaxed text-muted-foreground\">{indexed?.description || \"No description.\"}</p>\n        </TabsContent>\n        {isCollection && (\n          <TabsContent value=\"items\" className=\"pt-6\">\n            <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">{tokens.map((t) => <TokenCard key={t.tokenId} token={t} />)}</div>\n          </TabsContent>\n        )}\n        <TabsContent value=\"activity\" className=\"pt-6\"><DropActivityList mints={mints} /></TabsContent>\n        <TabsContent value=\"license\" className=\"pt-6\"><AssetLicenseSummary attributes={firstToken?.attributes ?? []} /></TabsContent>\n        {isOrganizer && onchain && (\n          <TabsContent value=\"manage\" className=\"pt-6\">\n            <DropManage\n              contract={contract}\n              indexed={indexed}\n              onchain={onchain}\n              mints={mints}\n              run={async (params) => {\n                await manageDrop(await deps(), { owner: walletAddress!, collection: contract, ...params });\n                await Promise.all([chain.mutate(), refreshMints()]);\n              }}\n              saveExclusive={(value) => saveExclusiveContent(getClient(), contract, value)}\n            />\n          </TabsContent>\n        )}\n      </Tabs>\n\n      {view && minting && (\n        <DropMintDialog\n          open\n          onClose={() => setMinting(false)}\n          name={name}\n          quantity={quantity > view.maxQuantity ? view.maxQuantity : quantity}\n          totalText={view.totalText}\n          portfolioHref={props.portfolioHref ?? \"/portfolio\"}\n          onMint={async () => {\n            const res = await mintDrop(await deps(), { claimer: walletAddress!, collection: contract, quantity: quantity > view.maxQuantity ? view.maxQuantity : quantity, proof });\n            await Promise.all([chain.mutate(), refreshMints()]);\n            return res;\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Image"]}

package/dist/components/drop/page/drop-page.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DropAppProps } from '../../../utils/drop/types.cjs';
+import 'starknet';
+import '@medialane/sdk/starknet';
+import '../../fast-mint/types.cjs';
+import 'react';
+import '@medialane/sdk';
+
+declare function DropPage(props: DropAppProps & {
+    contract: string;
+    initialTab?: string;
+    portfolioHref?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { DropPage };

package/dist/components/drop/page/drop-page.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DropAppProps } from '../../../utils/drop/types.js';
+import 'starknet';
+import '@medialane/sdk/starknet';
+import '../../fast-mint/types.js';
+import 'react';
+import '@medialane/sdk';
+
+declare function DropPage(props: DropAppProps & {
+    contract: string;
+    initialTab?: string;
+    portfolioHref?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { DropPage };

package/dist/components/drop/page/drop-page.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Package } from "lucide-react";
+import { dropMintState } from "@medialane/sdk/starknet";
+import Image from "../../image.js";
+import { CreatorChip } from "../../creator-chip.js";
+import { ShareButton } from "../../share-button.js";
+import { Skeleton } from "../../skeleton.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../tabs.js";
+import { AssetLicenseSummary } from "../../asset-license-summary.js";
+import { TokenCard } from "../../token-card.js";
+import { DropActionBox } from "./drop-action-box.js";
+import { DropActivityList } from "./drop-activity.js";
+import { DropManage } from "./drop-manage.js";
+import { DropMintDialog } from "./drop-mint-dialog.js";
+import { GradientButton } from "../../gradient-button.js";
+import { ipfsToHttp } from "../../../utils/ipfs.js";
+import { useCollectionTokens } from "../../../utils/use-collections.js";
+import { useDrop, useDropChain, useDropFee, useDropFile, useDropMints } from "../../../utils/use-drops.js";
+import { useNow } from "../../../utils/drop/use-now.js";
+import { actionBoxView } from "../../../utils/drop/view.js";
+import { claimProofFor } from "../../../utils/drop/claim-proof.js";
+import { manageDrop, mintDrop, saveExclusiveContent } from "../../../utils/drop/actions.js";
+function DropPage(props) {
+  const { contract, getClient, provider, walletAddress } = props;
+  const { drop: indexed, isLoading } = useDrop(getClient, contract);
+  const chain = useDropChain(provider, contract, walletAddress);
+  const { mints, mutate: refreshMints } = useDropMints(getClient, contract);
+  const feeBps = useDropFee(getClient);
+  const collectionFile = useDropFile(getClient, indexed?.baseUri ?? null, "collection.json");
+  const isCollection = collectionFile?.drop_kind === "collection";
+  const firstToken = useDropFile(getClient, indexed?.baseUri ?? null, "1");
+  const { tokens } = useCollectionTokens(getClient, isCollection ? contract : null, 1, 24);
+  const now = useNow();
+  const [quantity, setQuantity] = useState(1n);
+  const [minting, setMinting] = useState(false);
+  const proof = useMemo(
+    () => typeof window === "undefined" ? null : claimProofFor(window.localStorage, contract, window.location.hash, "drop-proof"),
+    [contract]
+  );
+  if (isLoading && !chain.drop) {
+    return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square rounded-2xl" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-2xl" })
+    ] });
+  }
+  if (!indexed && !chain.drop) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 py-24 text-center", children: [
+      /* @__PURE__ */ jsx(Package, { className: "mx-auto h-10 w-10 text-muted-foreground/30" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This drop wasn't found. A new drop can take a minute to appear." })
+    ] });
+  }
+  const onchain = chain.drop;
+  const priced = feeBps === null ? null : onchain;
+  const mint = dropMintState({ drop: priced, wallet: walletAddress, claimed: chain.claimed, proof, balance: chain.balance, feeBps: feeBps ?? 0, now });
+  const view = priced ? actionBoxView({ drop: priced, mint, quantity, feeBps, now }) : null;
+  const isOrganizer = !!walletAddress && !!onchain && BigInt(walletAddress) === BigInt(onchain.organizer);
+  const art = firstToken?.image ?? indexed?.image ?? null;
+  const name = indexed?.name ?? "Drop";
+  const deps = async () => ({ client: getClient(), provider, signer: await props.getSigner() });
+  const onAction = () => {
+    if (!view) return;
+    if (view.button.action === "sign-in") props.onRequireWallet();
+    if (view.button.action === "mint") setMinting(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-10 pb-28 lg:pb-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-2 lg:gap-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative aspect-square overflow-hidden rounded-2xl bg-muted", children: art && /* @__PURE__ */ jsx(Image, { src: ipfsToHttp(art), alt: name, fill: true, unoptimized: true, className: "object-cover" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold", children: name }),
+            onchain && /* @__PURE__ */ jsx(CreatorChip, { getClient, address: onchain.organizer })
+          ] }),
+          /* @__PURE__ */ jsx(ShareButton, { title: name, variant: "outline", size: "sm" })
+        ] }),
+        view && onchain && /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(DropActionBox, { view, minted: onchain.totalMinted, maxSupply: onchain.maxSupply, quantity, onQuantity: setQuantity, onAction }) })
+      ] })
+    ] }),
+    view && onchain && /* @__PURE__ */ jsxs("div", { className: "lg:hidden", children: [
+      /* @__PURE__ */ jsx(DropActionBox, { view, minted: onchain.totalMinted, maxSupply: onchain.maxSupply, quantity, onQuantity: setQuantity, onAction }),
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-3 backdrop-blur", children: /* @__PURE__ */ jsx(GradientButton, { disabled: view.button.action === "none", onClick: onAction, children: view.button.label }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: props.initialTab === "manage" && isOrganizer ? "manage" : "about", children: [
+      /* @__PURE__ */ jsxs(TabsList, { children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "about", children: "About" }),
+        isCollection && /* @__PURE__ */ jsx(TabsTrigger, { value: "items", children: "Items" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "activity", children: "Activity" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "license", children: "License" }),
+        isOrganizer && /* @__PURE__ */ jsx(TabsTrigger, { value: "manage", children: "Manage" })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "about", className: "pt-6", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-sm leading-relaxed text-muted-foreground", children: indexed?.description || "No description." }) }),
+      isCollection && /* @__PURE__ */ jsx(TabsContent, { value: "items", className: "pt-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: tokens.map((t) => /* @__PURE__ */ jsx(TokenCard, { token: t }, t.tokenId)) }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "activity", className: "pt-6", children: /* @__PURE__ */ jsx(DropActivityList, { mints }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "license", className: "pt-6", children: /* @__PURE__ */ jsx(AssetLicenseSummary, { attributes: firstToken?.attributes ?? [] }) }),
+      isOrganizer && onchain && /* @__PURE__ */ jsx(TabsContent, { value: "manage", className: "pt-6", children: /* @__PURE__ */ jsx(
+        DropManage,
+        {
+          contract,
+          indexed,
+          onchain,
+          mints,
+          run: async (params) => {
+            await manageDrop(await deps(), { owner: walletAddress, collection: contract, ...params });
+            await Promise.all([chain.mutate(), refreshMints()]);
+          },
+          saveExclusive: (value) => saveExclusiveContent(getClient(), contract, value)
+        }
+      ) })
+    ] }),
+    view && minting && /* @__PURE__ */ jsx(
+      DropMintDialog,
+      {
+        open: true,
+        onClose: () => setMinting(false),
+        name,
+        quantity: quantity > view.maxQuantity ? view.maxQuantity : quantity,
+        totalText: view.totalText,
+        portfolioHref: props.portfolioHref ?? "/portfolio",
+        onMint: async () => {
+          const res = await mintDrop(await deps(), { claimer: walletAddress, collection: contract, quantity: quantity > view.maxQuantity ? view.maxQuantity : quantity, proof });
+          await Promise.all([chain.mutate(), refreshMints()]);
+          return res;
+        }
+      }
+    )
+  ] });
+}
+export {
+  DropPage
+};
+//# sourceMappingURL=drop-page.js.map

package/dist/components/drop/page/drop-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/drop/page/drop-page.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { Package } from \"lucide-react\";\nimport { dropMintState } from \"@medialane/sdk/starknet\";\nimport Image from \"../../image.js\";\nimport { CreatorChip } from \"../../creator-chip.js\";\nimport { ShareButton } from \"../../share-button.js\";\nimport { Skeleton } from \"../../skeleton.js\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../../tabs.js\";\nimport { AssetLicenseSummary } from \"../../asset-license-summary.js\";\nimport { TokenCard } from \"../../token-card.js\";\nimport { DropActionBox } from \"./drop-action-box.js\";\nimport { DropActivityList } from \"./drop-activity.js\";\nimport { DropManage } from \"./drop-manage.js\";\nimport { DropMintDialog } from \"./drop-mint-dialog.js\";\nimport { GradientButton } from \"../../gradient-button.js\";\nimport { ipfsToHttp } from \"../../../utils/ipfs.js\";\nimport { useCollectionTokens } from \"../../../utils/use-collections.js\";\nimport { useDrop, useDropChain, useDropFee, useDropFile, useDropMints } from \"../../../utils/use-drops.js\";\nimport { useNow } from \"../../../utils/drop/use-now.js\";\nimport { actionBoxView } from \"../../../utils/drop/view.js\";\nimport { claimProofFor } from \"../../../utils/drop/claim-proof.js\";\nimport { manageDrop, mintDrop, saveExclusiveContent } from \"../../../utils/drop/actions.js\";\nimport type { DropAppProps } from \"../../../utils/drop/types.js\";\n\ntype TokenFile = { image?: string; attributes?: { trait_type?: string; value?: string }[] };\n\nexport function DropPage(props: DropAppProps & { contract: string; initialTab?: string; portfolioHref?: string }) {\n  const { contract, getClient, provider, walletAddress } = props;\n  const { drop: indexed, isLoading } = useDrop(getClient, contract);\n  const chain = useDropChain(provider, contract, walletAddress);\n  const { mints, mutate: refreshMints } = useDropMints(getClient, contract);\n  const feeBps = useDropFee(getClient);\n  const collectionFile = useDropFile<{ drop_kind?: string }>(getClient, indexed?.baseUri ?? null, \"collection.json\");\n  const isCollection = collectionFile?.drop_kind === \"collection\";\n  const firstToken = useDropFile<TokenFile>(getClient, indexed?.baseUri ?? null, \"1\");\n  const { tokens } = useCollectionTokens(getClient, isCollection ? contract : null, 1, 24);\n  const now = useNow();\n  const [quantity, setQuantity] = useState(1n);\n  const [minting, setMinting] = useState(false);\n  const proof = useMemo(\n    () => (typeof window === \"undefined\" ? null : claimProofFor(window.localStorage, contract, window.location.hash, \"drop-proof\")),\n    [contract],\n  );\n\n  if (isLoading && !chain.drop) {\n    return <div className=\"grid gap-8 lg:grid-cols-2\"><Skeleton className=\"aspect-square rounded-2xl\" /><Skeleton className=\"h-96 rounded-2xl\" /></div>;\n  }\n  if (!indexed && !chain.drop) {\n    return (\n      <div className=\"space-y-3 py-24 text-center\">\n        <Package className=\"mx-auto h-10 w-10 text-muted-foreground/30\" />\n        <p className=\"text-sm text-muted-foreground\">This drop wasn't found. A new drop can take a minute to appear.</p>\n      </div>\n    );\n  }\n\n  const onchain = chain.drop;\n  // Until the fee is known the mint box counts as loading: no total, no mint button on a guessed fee.\n  const priced = feeBps === null ? null : onchain;\n  const mint = dropMintState({ drop: priced, wallet: walletAddress, claimed: chain.claimed, proof, balance: chain.balance, feeBps: feeBps ?? 0, now });\n  const view = priced ? actionBoxView({ drop: priced, mint, quantity, feeBps: feeBps!, now }) : null;\n  const isOrganizer = !!walletAddress && !!onchain && BigInt(walletAddress) === BigInt(onchain.organizer);\n  const art = firstToken?.image ?? indexed?.image ?? null;\n  const name = indexed?.name ?? \"Drop\";\n  const deps = async () => ({ client: getClient(), provider, signer: await props.getSigner() });\n\n  const onAction = () => {\n    if (!view) return;\n    if (view.button.action === \"sign-in\") props.onRequireWallet();\n    if (view.button.action === \"mint\") setMinting(true);\n  };\n\n  return (\n    <div className=\"space-y-10 pb-28 lg:pb-0\">\n      <div className=\"grid gap-8 lg:grid-cols-2 lg:gap-10\">\n        <div className=\"relative aspect-square overflow-hidden rounded-2xl bg-muted\">\n          {art && <Image src={ipfsToHttp(art)} alt={name} fill unoptimized className=\"object-cover\" />}\n        </div>\n        <div className=\"space-y-5\">\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"space-y-1\">\n              <h1 className=\"text-3xl font-semibold\">{name}</h1>\n              {onchain && <CreatorChip getClient={getClient} address={onchain.organizer} />}\n            </div>\n            <ShareButton title={name} variant=\"outline\" size=\"sm\" />\n          </div>\n          {view && onchain && (\n            <div className=\"hidden lg:block\">\n              <DropActionBox view={view} minted={onchain.totalMinted} maxSupply={onchain.maxSupply} quantity={quantity} onQuantity={setQuantity} onAction={onAction} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {view && onchain && (\n        <div className=\"lg:hidden\">\n          <DropActionBox view={view} minted={onchain.totalMinted} maxSupply={onchain.maxSupply} quantity={quantity} onQuantity={setQuantity} onAction={onAction} />\n          <div className=\"fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-3 backdrop-blur\">\n            <GradientButton disabled={view.button.action === \"none\"} onClick={onAction}>{view.button.label}</GradientButton>\n          </div>\n        </div>\n      )}\n\n      <Tabs defaultValue={props.initialTab === \"manage\" && isOrganizer ? \"manage\" : \"about\"}>\n        <TabsList>\n          <TabsTrigger value=\"about\">About</TabsTrigger>\n          {isCollection && <TabsTrigger value=\"items\">Items</TabsTrigger>}\n          <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n          <TabsTrigger value=\"license\">License</TabsTrigger>\n          {isOrganizer && <TabsTrigger value=\"manage\">Manage</TabsTrigger>}\n        </TabsList>\n        <TabsContent value=\"about\" className=\"pt-6\">\n          <p className=\"whitespace-pre-line text-sm leading-relaxed text-muted-foreground\">{indexed?.description || \"No description.\"}</p>\n        </TabsContent>\n        {isCollection && (\n          <TabsContent value=\"items\" className=\"pt-6\">\n            <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">{tokens.map((t) => <TokenCard key={t.tokenId} token={t} />)}</div>\n          </TabsContent>\n        )}\n        <TabsContent value=\"activity\" className=\"pt-6\"><DropActivityList mints={mints} /></TabsContent>\n        <TabsContent value=\"license\" className=\"pt-6\"><AssetLicenseSummary attributes={firstToken?.attributes ?? []} /></TabsContent>\n        {isOrganizer && onchain && (\n          <TabsContent value=\"manage\" className=\"pt-6\">\n            <DropManage\n              contract={contract}\n              indexed={indexed}\n              onchain={onchain}\n              mints={mints}\n              run={async (params) => {\n                await manageDrop(await deps(), { owner: walletAddress!, collection: contract, ...params });\n                await Promise.all([chain.mutate(), refreshMints()]);\n              }}\n              saveExclusive={(value) => saveExclusiveContent(getClient(), contract, value)}\n            />\n          </TabsContent>\n        )}\n      </Tabs>\n\n      {view && minting && (\n        <DropMintDialog\n          open\n          onClose={() => setMinting(false)}\n          name={name}\n          quantity={quantity > view.maxQuantity ? view.maxQuantity : quantity}\n          totalText={view.totalText}\n          portfolioHref={props.portfolioHref ?? \"/portfolio\"}\n          onMint={async () => {\n            const res = await mintDrop(await deps(), { claimer: walletAddress!, collection: contract, quantity: quantity > view.maxQuantity ? view.maxQuantity : quantity, proof });\n            await Promise.all([chain.mutate(), refreshMints()]);\n            return res;\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/image.d.cts

@@ -1 +1,3 @@
 export { default } from 'next/image';
+import 'next/link';
+import 'next/navigation';

package/dist/components/image.d.ts

@@ -1 +1,3 @@
 export { default } from 'next/image';
+import 'next/link';
+import 'next/navigation';