@0xsequence/marketplace-sdk 0.4.8 → 0.4.9

package/dist/{chunk-7WCZP6FN.js → chunk-BJLOO4NP.js}

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-AQT3BQ67.js";
+} from "./chunk-Y3KINNAU.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -33,9 +33,11 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-2OJB35FS.js";
+} from "./chunk-BMWCIHCB.js";
 import {
+  AlertMessage,
   dateToUnixTime,
+  switchChainModal_default,
   useBalanceOfCollectible,
   useCollectible,
   useCollection,
@@ -51,20 +53,15 @@ import {
   useLowestListing,
   useMarketplaceConfig,
   useRoyaltyPercentage,
-  useTransferTokens
-} from "./chunk-WRMJ5FZM.js";
-import {
-  AlertMessage,
-  switchChainModal_default,
   useSwitchChainModal,
+  useTransferTokens,
   useWallet
-} from "./chunk-FWN2MCLI.js";
+} from "./chunk-CUA4SGWT.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
 import {
   calculatePriceDifferencePercentage,
-  getPublicRpcClient,
   truncateMiddle
 } from "./chunk-XP3WY5AX.js";
 import {
@@ -75,17 +72,17 @@ import {
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-6R4G7J6Q.js";
+} from "./chunk-7HWJ4DUX.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
 } from "./chunk-WM4RGBFQ.js";
 
 // src/react/ui/modals/modal-provider.tsx
-import { observer as observer12 } from "@legendapp/state/react";
+import { observer as observer11 } from "@legendapp/state/react";
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Show, observer as observer5 } from "@legendapp/state/react";
+import { Show, observer as observer4 } from "@legendapp/state/react";
 import { useState as useState6 } from "react";
 import { parseUnits as parseUnits2 } from "viem";
 
@@ -147,11 +144,15 @@ import {
   Skeleton as Skeleton2,
   Text as Text4
 } from "@0xsequence/design-system";
-import { TRANSACTION_CONFIRMATIONS_DEFAULT } from "@0xsequence/kit";
-import { observer as observer2 } from "@legendapp/state/react";
-import { Close, Content, Overlay, Portal, Root } from "@radix-ui/react-dialog";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { WaitForTransactionReceiptTimeoutError } from "viem";
+import { use$ } from "@legendapp/state/react";
+import {
+  Close,
+  Content,
+  Overlay,
+  Portal,
+  Root,
+  Title
+} from "@radix-ui/react-dialog";
 
 // src/react/ui/modals/_internal/components/transaction-footer/index.tsx
 import { networks } from "@0xsequence/network";
@@ -263,9 +264,7 @@ var initialState = {
     collectibleId,
     type,
     callbacks,
-    queriesToInvalidate,
-    confirmations,
-    blocked
+    queriesToInvalidate
   }) => {
     transactionStatusModal$.state.set({
       ...transactionStatusModal$.state.get(),
@@ -277,9 +276,7 @@ var initialState = {
       collectibleId,
       type,
       callbacks,
-      queriesToInvalidate,
-      confirmations,
-      blocked
+      queriesToInvalidate
     });
     transactionStatusModal$.isOpen.set(true);
   },
@@ -299,9 +296,7 @@ var initialState = {
     collectibleId: "",
     type: void 0,
     callbacks: void 0,
-    queriesToInvalidate: [],
-    confirmations: -1,
-    blocked: false
+    queriesToInvalidate: []
   }
 };
 var transactionStatusModal$ = observable(initialState);
@@ -574,24 +569,73 @@ function getTransactionStatusModalTitle({
   }
 }
 
+// src/react/ui/modals/_internal/components/transactionStatusModal/hooks/useTransactionStatus.ts
+import { skipToken as skipToken2, useQuery as useQuery2 } from "@tanstack/react-query";
+import { TransactionStatus as IndexerTransactionStatus } from "@0xsequence/indexer";
+import { WaitForTransactionReceiptTimeoutError } from "viem";
+import { useState as useState2, useEffect as useEffect2 } from "react";
+var useTransactionStatus = (hash, chainId, callbacks) => {
+  const { wallet } = useWallet();
+  const [status, setStatus] = useState2(
+    hash ? "PENDING" : "SUCCESS"
+  );
+  const { data: confirmationResult } = useQuery2({
+    queryKey: ["transaction-confirmation", hash, chainId, !!wallet],
+    queryFn: !!wallet && hash ? async () => await wallet.handleConfirmTransactionStep(hash, Number(chainId)) : skipToken2
+  });
+  useEffect2(() => {
+    if (!hash) {
+      setStatus("SUCCESS");
+      return;
+    }
+    if (!confirmationResult) {
+      setStatus("PENDING");
+      return;
+    }
+    try {
+      if (confirmationResult.txnStatus === IndexerTransactionStatus.SUCCESSFUL) {
+        setStatus("SUCCESS");
+        callbacks?.onSuccess?.({ hash: hash || "0x0" });
+        return;
+      }
+      setStatus("FAILED");
+      callbacks?.onError?.(new Error("Transaction failed"));
+    } catch (error) {
+      setStatus(
+        error instanceof WaitForTransactionReceiptTimeoutError ? "TIMEOUT" : "FAILED"
+      );
+      callbacks?.onError?.(error);
+    }
+  }, [confirmationResult, hash]);
+  return status;
+};
+var useTransactionStatus_default = useTransactionStatus;
+
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var invalidateQueries = async (queriesToInvalidate) => {
+  const queryClient = getQueryClient();
+  if (!queriesToInvalidate) {
+    queryClient.invalidateQueries();
+    return;
+  }
+  for (const queryKey of queriesToInvalidate) {
+    await queryClient.invalidateQueries({ queryKey });
+  }
+};
 var useTransactionStatusModal = () => {
   return {
     show: (args) => {
-      if (args.blocked) return;
       transactionStatusModal$.open(args);
     },
     close: () => transactionStatusModal$.close()
   };
 };
-var invalidateQueries = async (queriesToInvalidate) => {
-  const queryClient = getQueryClient();
-  for (const queryKey of queriesToInvalidate) {
-    await queryClient.invalidateQueries({ queryKey });
-  }
+var TransactionStatusModal = () => {
+  const isOpen = use$(transactionStatusModal$.isOpen);
+  return isOpen ? /* @__PURE__ */ jsx4(Modal, {}) : null;
 };
-var TransactionStatusModal = observer2(() => {
+function Modal() {
   const {
     type,
     hash,
@@ -601,64 +645,14 @@ var TransactionStatusModal = observer2(() => {
     chainId,
     collectibleId,
     callbacks,
-    queriesToInvalidate,
-    confirmations
-  } = transactionStatusModal$.state.get();
+    queriesToInvalidate
+  } = use$(transactionStatusModal$.state);
   const { data: collectible, isLoading: collectibleLoading } = useCollectible({
     collectionAddress,
     chainId,
     collectibleId
   });
-  const [transactionStatus, setTransactionStatus] = useState2(
-    orderId ? "SUCCESS" : "PENDING"
-  );
-  const queryClient = getQueryClient();
-  const publicClient = chainId ? getPublicRpcClient(chainId) : null;
-  const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
-    confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
-    hash: hash || "0x"
-  });
-  useEffect2(() => {
-    if (!transactionStatusModal$.isOpen.get() || orderId) return;
-    console.log("Waiting for transaction receipt ...");
-    waitForTransactionReceiptPromise?.then((receipt) => {
-      if (receipt.status === "success") {
-        console.log("receipt", receipt);
-        setTransactionStatus("SUCCESS");
-        if (callbacks?.onSuccess) {
-          callbacks.onSuccess({ hash: hash || "0x0" });
-        } else {
-          console.debug("onSuccess callback not provided:", hash);
-        }
-        if (queriesToInvalidate) {
-          invalidateQueries(queriesToInvalidate);
-        } else {
-          queryClient.invalidateQueries();
-        }
-      }
-    }).catch((error) => {
-      if (callbacks?.onError) {
-        callbacks.onError(error);
-      } else {
-        console.debug("onError callback not provided:", error);
-      }
-      if (error instanceof WaitForTransactionReceiptTimeoutError) {
-        setTransactionStatus("TIMEOUT");
-        return;
-      }
-      setTransactionStatus("FAILED");
-    });
-    return () => {
-      setTransactionStatus("PENDING");
-    };
-  }, [
-    callbacks?.onSuccess,
-    callbacks?.onError,
-    transactionStatusModal$.isOpen.get()
-  ]);
-  if (!type) {
-    return null;
-  }
+  const transactionStatus = useTransactionStatus_default(hash, chainId, callbacks);
   const title = getTransactionStatusModalTitle({
     transactionStatus,
     transactionType: type,
@@ -671,7 +665,7 @@ var TransactionStatusModal = observer2(() => {
     orderId,
     price
   });
-  return /* @__PURE__ */ jsx4(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs3(Portal, { container: getProviderEl(), children: [
+  return /* @__PURE__ */ jsx4(Root, { open: true, children: /* @__PURE__ */ jsxs3(Portal, { container: getProviderEl(), children: [
     /* @__PURE__ */ jsx4(Overlay, { className: dialogOverlay3 }),
     /* @__PURE__ */ jsxs3(
       Content,
@@ -679,7 +673,7 @@ var TransactionStatusModal = observer2(() => {
         className: transactionStatusModalContent,
         "data-testid": "transaction-status-modal",
         children: [
-          title ? /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx4(Title, { asChild: true, children: title ? /* @__PURE__ */ jsx4(
             Text4,
             {
               fontSize: "large",
@@ -696,7 +690,7 @@ var TransactionStatusModal = observer2(() => {
               height: "6",
               "data-testid": "transaction-modal-title-skeleton"
             }
-          ),
+          ) }),
           message ? /* @__PURE__ */ jsx4(
             Text4,
             {
@@ -746,6 +740,7 @@ var TransactionStatusModal = observer2(() => {
             Close,
             {
               onClick: () => {
+                invalidateQueries(queriesToInvalidate);
                 transactionStatusModal$.close();
               },
               className: closeButton3,
@@ -757,7 +752,7 @@ var TransactionStatusModal = observer2(() => {
       }
     )
   ] }) });
-});
+}
 var transactionStatusModal_default = TransactionStatusModal;
 
 // src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx
@@ -1031,7 +1026,7 @@ var LoadingModal = ({
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
 import { Box as Box6, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
-import { observer as observer3 } from "@legendapp/state/react";
+import { observer as observer2 } from "@legendapp/state/react";
 import { addDays } from "date-fns";
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
@@ -1155,7 +1150,7 @@ var PRESET_RANGES = {
     offset: 30
   }
 };
-var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
+var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
   className,
   $date
 }) {
@@ -1333,10 +1328,10 @@ var currencyImage_default = CurrencyImage;
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
 import { Skeleton as Skeleton4 } from "@0xsequence/design-system";
-import { observer as observer4 } from "@legendapp/state/react";
+import { observer as observer3 } from "@legendapp/state/react";
 import { useEffect as useEffect4 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
+var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   secondCurrencyAsDefault,
@@ -1390,7 +1385,7 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { use$ } from "@legendapp/state/react";
+import { use$ as use$2 } from "@legendapp/state/react";
 import { useState as useState5 } from "react";
 import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function PriceInput({
@@ -1403,9 +1398,9 @@ function PriceInput({
   includeNativeCurrency
 }) {
   const { address: accountAddress } = useAccount();
-  const currencyDecimals = use$($price.currency.decimals);
-  const currencyAddress = use$($price.currency.contractAddress);
-  const priceAmountRaw = use$($price.amountRaw);
+  const currencyDecimals = use$2($price.currency.decimals);
+  const currencyAddress = use$2($price.currency.contractAddress);
+  const priceAmountRaw = use$2($price.amountRaw);
   const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
     currencyAddress,
     chainId: Number(chainId),
@@ -1712,9 +1707,9 @@ var makeOfferModal$ = observable2({
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
 import { Fragment, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var MakeOfferModal = () => {
-  return /* @__PURE__ */ jsx16(Show, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx16(Modal, {}) });
+  return /* @__PURE__ */ jsx16(Show, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx16(Modal2, {}) });
 };
-var Modal = observer5(() => {
+var Modal2 = observer4(() => {
   const state = makeOfferModal$.get();
   const {
     collectionAddress,
@@ -1883,7 +1878,7 @@ var Modal = observer5(() => {
 });
 
 // src/react/ui/modals/SellModal/Modal.tsx
-import { Show as Show2, observer as observer6 } from "@legendapp/state/react";
+import { Show as Show2, observer as observer5 } from "@legendapp/state/react";
 import { parseUnits as parseUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
@@ -2014,7 +2009,7 @@ var initialState3 = {
 var sellModal$ = observable3(initialState3);
 
 // src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx
-import { useQuery as useQuery2 } from "@tanstack/react-query";
+import { useQuery as useQuery3 } from "@tanstack/react-query";
 
 // src/react/ui/modals/BuyModal/hooks/useFees.ts
 import { avalanche, optimism } from "viem/chains";
@@ -2049,7 +2044,7 @@ var useGetTokenApprovalData2 = (params) => {
     chainId: Number(params.chainId),
     collectionAddress: params.collectionAddress
   });
-  const { data, isLoading, isSuccess } = useQuery2({
+  const { data, isLoading, isSuccess } = useQuery3({
     queryKey: ["token-approval-data", params.ordersData],
     queryFn: async () => {
       const address = await wallet.address();
@@ -2282,9 +2277,9 @@ var useSell = ({
 // src/react/ui/modals/SellModal/Modal.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SellModal = () => {
-  return /* @__PURE__ */ jsx19(Show2, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx19(Modal2, {}) });
+  return /* @__PURE__ */ jsx19(Show2, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx19(Modal3, {}) });
 };
-var Modal2 = observer6(() => {
+var Modal3 = observer5(() => {
   const { tokenId, collectionAddress, chainId, order, callbacks } = sellModal$.get();
   const steps$ = sellModal$.steps;
   const { data: collectible } = useCollection({
@@ -2417,7 +2412,7 @@ import {
   Image as Image5,
   Text as Text11
 } from "@0xsequence/design-system";
-import { observer as observer7 } from "@legendapp/state/react";
+import { observer as observer6 } from "@legendapp/state/react";
 import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
 
 // src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
@@ -2470,7 +2465,7 @@ var useSuccessfulPurchaseModal = (callbacks) => {
     close: () => successfulPurchaseModal$.close()
   };
 };
-var SuccessfulPurchaseModal = observer7(() => {
+var SuccessfulPurchaseModal = observer6(() => {
   return /* @__PURE__ */ jsx20(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs13(Portal3, { children: [
     /* @__PURE__ */ jsx20(Overlay2, { className: dialogOverlay }),
     /* @__PURE__ */ jsxs13(Content3, { className: dialogContent.narrow, children: [
@@ -2604,7 +2599,7 @@ var SuccessfulPurchaseModal_default = SuccessfulPurchaseModal;
 
 // src/react/ui/modals/TransferModal/index.tsx
 import { CloseIcon as CloseIcon3, IconButton as IconButton4 } from "@0xsequence/design-system";
-import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
+import { Show as Show3, observer as observer8 } from "@legendapp/state/react";
 import { Close as Close3, Content as Content4, Overlay as Overlay3, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
 import { useAccount as useAccount3 } from "wagmi";
 
@@ -2816,9 +2811,9 @@ var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
 import { Box as Box15, Button as Button4, Text as Text13 } from "@0xsequence/design-system";
-import { observer as observer8 } from "@legendapp/state/react";
+import { observer as observer7 } from "@legendapp/state/react";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var FollowWalletInstructionsView = observer8(() => {
+var FollowWalletInstructionsView = observer7(() => {
   return /* @__PURE__ */ jsxs15(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
     /* @__PURE__ */ jsx22(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
     /* @__PURE__ */ jsx22(Box15, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx22(
@@ -2882,12 +2877,12 @@ var useTransferModal = () => {
   };
 };
 var TransferModal = () => {
-  return /* @__PURE__ */ jsx23(Show3, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx23(Modal3, {}) });
+  return /* @__PURE__ */ jsx23(Show3, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx23(Modal4, {}) });
 };
-var Modal3 = () => {
+var Modal4 = () => {
   return /* @__PURE__ */ jsx23(ModalContent, {});
 };
-var ModalContent = observer9(() => {
+var ModalContent = observer8(() => {
   return /* @__PURE__ */ jsx23(Root4, { open: true, children: /* @__PURE__ */ jsxs16(Portal4, { children: [
     /* @__PURE__ */ jsx23(Overlay3, { className: dialogOverlay2 }),
     /* @__PURE__ */ jsxs16(Content4, { className: transferModalContent, children: [
@@ -2896,7 +2891,7 @@ var ModalContent = observer9(() => {
     ] })
   ] }) });
 });
-var TransactionModalView = observer9(() => {
+var TransactionModalView = observer8(() => {
   const { view } = transferModal$.get();
   switch (view) {
     case "enterReceiverAddress":
@@ -2910,7 +2905,7 @@ var TransactionModalView = observer9(() => {
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
 import { Box as Box16 } from "@0xsequence/design-system";
-import { Show as Show4, observer as observer10 } from "@legendapp/state/react";
+import { Show as Show4, observer as observer9 } from "@legendapp/state/react";
 import { parseUnits as parseUnits4 } from "viem";
 import { useAccount as useAccount4 } from "wagmi";
 
@@ -2975,7 +2970,7 @@ var createListingModal$ = observable7({
 import { useEffect as useEffect6 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
-import { skipToken as skipToken2, useQuery as useQuery3 } from "@tanstack/react-query";
+import { skipToken as skipToken3, useQuery as useQuery4 } from "@tanstack/react-query";
 var ONE_DAY_IN_SECONDS2 = 60 * 60 * 24;
 var useGetTokenApprovalData3 = (params) => {
   const config = useConfig();
@@ -2989,7 +2984,7 @@ var useGetTokenApprovalData3 = (params) => {
     expiry: String(Number(dateToUnixTime(/* @__PURE__ */ new Date())) + ONE_DAY_IN_SECONDS2)
   };
   const isEnabled = wallet && params.query?.enabled !== false;
-  const { data, isLoading, isSuccess } = useQuery3({
+  const { data, isLoading, isSuccess } = useQuery4({
     queryKey: ["token-approval-data", params.currencyAddress],
     queryFn: isEnabled ? async () => {
       const args = {
@@ -3012,7 +3007,7 @@ var useGetTokenApprovalData3 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    } : skipToken2
+    } : skipToken3
   });
   return {
     data,
@@ -3224,9 +3219,9 @@ var useCreateListing = ({
 // src/react/ui/modals/CreateListingModal/Modal.tsx
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var CreateListingModal = () => {
-  return /* @__PURE__ */ jsx24(Show4, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx24(Modal4, {}) });
+  return /* @__PURE__ */ jsx24(Show4, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx24(Modal5, {}) });
 };
-var Modal4 = observer10(() => {
+var Modal5 = observer9(() => {
   const state = createListingModal$.get();
   const {
     collectionAddress,
@@ -3246,6 +3241,16 @@ var Modal4 = observer10(() => {
     collectionAddress,
     collectibleId
   });
+  const currencyOptions = useCurrencyOptions({ collectionAddress });
+  const {
+    data: currencies,
+    isLoading: currenciesLoading,
+    isError: currenciesIsError
+  } = useCurrencies({
+    chainId,
+    currencyOptions,
+    includeNativeCurrency: true
+  });
   const {
     data: collection,
     isLoading: collectionIsLoading,
@@ -3282,7 +3287,7 @@ var Modal4 = observer10(() => {
     closeMainModal: () => createListingModal$.close(),
     steps$
   });
-  if (collectableIsLoading || collectionIsLoading) {
+  if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
     return /* @__PURE__ */ jsx24(
       LoadingModal,
       {
@@ -3293,7 +3298,7 @@ var Modal4 = observer10(() => {
       }
     );
   }
-  if (collectableIsError || collectionIsError) {
+  if (collectableIsError || collectionIsError || currenciesIsError) {
     return /* @__PURE__ */ jsx24(
       ErrorModal,
       {
@@ -3304,6 +3309,18 @@ var Modal4 = observer10(() => {
       }
     );
   }
+  if (!currencies || currencies.length === 0) {
+    return /* @__PURE__ */ jsx24(
+      ErrorModal,
+      {
+        isOpen: createListingModal$.isOpen.get(),
+        chainId: Number(chainId),
+        onClose: createListingModal$.close,
+        title: "List item for sale",
+        message: "No currencies are configured for the marketplace, contact the marketplace owners"
+      }
+    );
+  }
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -3384,10 +3401,17 @@ var Modal4 = observer10(() => {
 });
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { use$ as use$2 } from "@legendapp/state/react";
+import { use$ as use$3 } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable8 } from "@legendapp/state";
+var buyState = {
+  order: void 0,
+  quantity: "1",
+  invalidQuantity: false,
+  checkoutModalIsLoading: false,
+  checkoutModalLoaded: false
+};
 var initialState7 = {
   isOpen: false,
   open: ({
@@ -3398,7 +3422,6 @@ var initialState7 = {
     buyModal$.state.set({
       quantity: args.order.quantityAvailableFormatted,
       order: args.order,
-      modalId: buyModal$.state.modalId.get() + 1,
       invalidQuantity: false,
       checkoutModalIsLoading: false,
       checkoutModalLoaded: false
@@ -3408,15 +3431,10 @@ var initialState7 = {
   },
   close: () => {
     buyModal$.isOpen.set(false);
+    buyModal$.callbacks.set(void 0);
+    buyModal$.state.set(buyState);
   },
-  state: {
-    order: void 0,
-    quantity: "1",
-    modalId: 0,
-    invalidQuantity: false,
-    checkoutModalIsLoading: false,
-    checkoutModalLoaded: false
-  },
+  state: buyState,
   setCheckoutModalIsLoading: (isLoading) => {
     buyModal$.state.checkoutModalIsLoading.set(isLoading);
   },
@@ -3449,25 +3467,19 @@ function CheckoutModal({ buy, collectable, order }) {
 
 // src/react/ui/modals/BuyModal/modals/Modal1155.tsx
 import { Box as Box17, Text as Text14, TokenImage as TokenImage2 } from "@0xsequence/design-system";
-import { observer as observer11 } from "@legendapp/state/react";
+import { observer as observer10 } from "@legendapp/state/react";
 import { formatUnits as formatUnits4, parseUnits as parseUnits6 } from "viem";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-var ERC1155QuantityModal = observer11(
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var ERC1155QuantityModal = observer10(
   ({ buy, collectable, order }) => {
-    const currencyOptions = useCurrencyOptions({
-      collectionAddress: order.collectionContractAddress
-    });
-    const { data: currencies } = useCurrencies({
+    const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
       chainId: order.chainId,
-      currencyOptions
+      currencyAddress: order.priceCurrencyAddress
     });
-    const currency = currencies?.find(
-      (currency2) => currency2.contractAddress === order.priceCurrencyAddress
-    );
     const quantity = Number(buyModal$.state.quantity.get());
     const pricePerToken = order.priceAmount;
     const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
-    if (buyModal$.state.checkoutModalLoaded.get()) {
+    if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get()) {
       return null;
     }
     return /* @__PURE__ */ jsx25(
@@ -3507,11 +3519,21 @@ var ERC1155QuantityModal = observer11(
             }
           ),
           /* @__PURE__ */ jsxs18(Box17, { display: "flex", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", children: "Total Price" }),
-            /* @__PURE__ */ jsxs18(Box17, { display: "flex", alignItems: "center", gap: "2", children: [
-              /* @__PURE__ */ jsx25(TokenImage2, { src: currency?.imageUrl, size: "xs" }),
-              /* @__PURE__ */ jsx25(Text14, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits4(BigInt(totalPrice), currency?.decimals || 0) })
-            ] })
+            /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", fontFamily: "body", children: "Total Price" }),
+            /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: isCurrencyLoading || !currency ? /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", fontFamily: "body", children: "Loading..." }) }) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
+              currency.imageUrl && /* @__PURE__ */ jsx25(TokenImage2, { src: currency.imageUrl, size: "xs" }),
+              /* @__PURE__ */ jsx25(
+                Text14,
+                {
+                  color: "text100",
+                  fontSize: "small",
+                  fontWeight: "bold",
+                  fontFamily: "body",
+                  children: formatUnits4(BigInt(totalPrice), currency.decimals || 0)
+                }
+              ),
+              /* @__PURE__ */ jsx25(Text14, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
+            ] }) })
           ] })
         ] })
       }
@@ -3520,7 +3542,7 @@ var ERC1155QuantityModal = observer11(
 );
 
 // src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
-import { useQuery as useQuery4 } from "@tanstack/react-query";
+import { skipToken as skipToken4, useQuery as useQuery5 } from "@tanstack/react-query";
 var useCheckoutOptions = (input) => {
   const config = useConfig();
   const { wallet } = useWallet();
@@ -3528,7 +3550,7 @@ var useCheckoutOptions = (input) => {
     chainId: input.chainId,
     collectionAddress: input.collectionAddress
   });
-  return useQuery4({
+  return useQuery5({
     queryKey: [
       "checkoutOptions",
       input.chainId,
@@ -3536,7 +3558,7 @@ var useCheckoutOptions = (input) => {
       input.orderId,
       input.marketplace
     ],
-    queryFn: async () => {
+    queryFn: wallet ? async () => {
       const marketplaceClient = getMarketplaceClient(input.chainId, config);
       return marketplaceClient.checkoutOptionsMarketplace({
         wallet: await wallet.address(),
@@ -3549,7 +3571,7 @@ var useCheckoutOptions = (input) => {
         ],
         additionalFee: Number(fees.amount)
       }).then((res) => res.options);
-    },
+    } : skipToken4,
     enabled: !!wallet
   });
 };
@@ -3688,23 +3710,22 @@ var useBuyCollectable = ({
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var BuyModal = () => {
-  const isOpen = use$2(buyModal$.isOpen);
+  const isOpen = use$3(buyModal$.isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx26(BuyModalContent, {});
 };
 var BuyModalContent = () => {
-  const chainId = String(use$2(buyModal$.state.order.chainId));
-  const collectionAddress = use$2(
+  const chainId = String(use$3(buyModal$.state.order.chainId));
+  const collectionAddress = use$3(
     buyModal$.state.order.collectionContractAddress
   );
-  const collectibleId = use$2(buyModal$.state.order.tokenId);
-  const modalId = use$2(buyModal$.state.modalId);
-  const callbacks = use$2(buyModal$.callbacks);
-  const order = use$2(buyModal$.state.order);
-  const isOpen = use$2(buyModal$.isOpen);
-  const checkoutModalIsLoading = use$2(buyModal$.state.checkoutModalIsLoading);
-  const setCheckoutModalIsLoading = use$2(buyModal$.setCheckoutModalIsLoading);
-  const setCheckoutModalLoaded = use$2(buyModal$.setCheckoutModalLoaded);
+  const collectibleId = use$3(buyModal$.state.order.tokenId);
+  const callbacks = use$3(buyModal$.callbacks);
+  const order = use$3(buyModal$.state.order);
+  const isOpen = use$3(buyModal$.isOpen);
+  const checkoutModalIsLoading = use$3(buyModal$.state.checkoutModalIsLoading);
+  const setCheckoutModalIsLoading = use$3(buyModal$.setCheckoutModalIsLoading);
+  const setCheckoutModalLoaded = use$3(buyModal$.setCheckoutModalLoaded);
   const { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
     chainId: Number(chainId),
     collectionAddress,
@@ -3760,8 +3781,7 @@ var BuyModalContent = () => {
       buy: buyAction,
       collectable,
       order
-    },
-    modalId
+    }
   ) : /* @__PURE__ */ jsx26(
     ERC1155QuantityModal,
     {
@@ -3776,9 +3796,9 @@ var BuyModalContent = () => {
 };
 
 // src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-var ModalProvider = observer12(() => {
-  return /* @__PURE__ */ jsxs19(Fragment3, { children: [
+import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var ModalProvider = observer11(() => {
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
     /* @__PURE__ */ jsx27(CreateListingModal, {}),
     /* @__PURE__ */ jsx27(MakeOfferModal, {}),
     /* @__PURE__ */ jsx27(TransferModal, {}),
@@ -3822,8 +3842,7 @@ var useBuyModal = (callbacks) => {
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
 import { useState as useState7 } from "react";
-import { Box as Box21, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
-import { useAccount as useAccount6 } from "wagmi";
+import { Box as Box22, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
 
 // src/react/ui/icons/DiamondEye.tsx
 import { Box as Box18 } from "@0xsequence/design-system";
@@ -3865,127 +3884,361 @@ var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx28(
 var DiamondEye_default = SvgDiamondEyeIcon;
 
 // src/react/ui/components/_internals/action-button/ActionButton.tsx
+import { observer as observer12 } from "@legendapp/state/react";
+
+// src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts
+import { useEffect as useEffect8 } from "react";
+import { useAccount as useAccount5 } from "wagmi";
+
+// src/react/ui/components/_internals/action-button/store.ts
+import { observable as observable9 } from "@legendapp/state";
+var actionButtonStore = observable9({
+  pendingAction: null
+});
+var setPendingAction = (type, callback, collectibleId) => {
+  actionButtonStore.pendingAction.set({
+    type,
+    callback,
+    timestamp: Date.now(),
+    collectibleId
+  });
+};
+var clearPendingAction = () => {
+  actionButtonStore.pendingAction.set(null);
+};
+var executePendingActionIfExists = () => {
+  const timestamp = actionButtonStore.pendingAction.get()?.timestamp;
+  const callback = actionButtonStore.pendingAction.get()?.callback;
+  if (timestamp && callback) {
+    if (Date.now() - timestamp < 5 * 60 * 1e3 && typeof callback === "function") {
+      callback();
+    }
+  }
+};
+
+// src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts
+var useActionButtonLogic = ({
+  tokenId,
+  owned,
+  action,
+  onCannotPerformAction
+}) => {
+  const { address } = useAccount5();
+  const actionsThatOwnersCannotPerform = [
+    "Buy" /* BUY */,
+    "Make an offer" /* OFFER */
+  ];
+  const pendingActionType = actionButtonStore.pendingAction.type.get();
+  useEffect8(() => {
+    if (owned && actionButtonStore.pendingAction.get() && address && !actionsThatOwnersCannotPerform.includes(action) && actionButtonStore.pendingAction.get()?.collectibleId === tokenId) {
+      onCannotPerformAction?.(
+        pendingActionType
+      );
+      clearPendingAction();
+    }
+  }, [
+    owned,
+    actionButtonStore.pendingAction.get(),
+    address,
+    action,
+    tokenId,
+    onCannotPerformAction,
+    pendingActionType
+  ]);
+  useEffect8(() => {
+    if (address && !owned && actionButtonStore.pendingAction.get() && actionButtonStore.pendingAction.get()?.collectibleId === tokenId) {
+      setTimeout(() => {
+        executePendingActionIfExists();
+        clearPendingAction();
+      }, 1e3);
+    }
+  }, [address, owned, tokenId]);
+  const shouldShowAction = !address ? ["Buy" /* BUY */, "Make an offer" /* OFFER */].includes(action) : true;
+  const isOwnerAction = address && owned && [
+    "Create listing" /* LIST */,
+    "Transfer" /* TRANSFER */,
+    "Sell" /* SELL */
+  ].includes(action);
+  return {
+    address,
+    shouldShowAction,
+    isOwnerAction
+  };
+};
+
+// src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx
 import { Button as Button5 } from "@0xsequence/design-system";
-import { observer as observer13 } from "@legendapp/state/react";
+import { useAccount as useAccount6 } from "wagmi";
+import { useOpenConnectModal } from "@0xsequence/kit";
+
+// src/react/ui/components/_internals/action-button/styles.css.ts
+var actionButton = "styles_actionButton__m8ll4q0";
+
+// src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
-var ActionButton = observer13(
-  ({
-    collectionAddress,
-    chainId,
-    tokenId,
-    orderbookKind,
-    action,
-    highestOffer,
-    lowestListing
-  }) => {
-    const { show: showCreateListingModal } = useCreateListingModal();
-    const { show: showMakeOfferModal } = useMakeOfferModal();
-    const { show: showSellModal } = useSellModal();
-    const { show: showTransferModal } = useTransferModal();
-    const { show: showBuyModal } = useBuyModal();
-    if (action === "Buy" /* BUY */) {
-      if (!lowestListing)
-        throw new InvalidStepError("BUY", "lowestListing is required");
-      return /* @__PURE__ */ jsx29(
-        ActionButtonBody,
+function ActionButtonBody({
+  tokenId,
+  label,
+  onClick,
+  icon,
+  action
+}) {
+  const { address } = useAccount6();
+  const { setOpenConnectModal } = useOpenConnectModal();
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!address && action) {
+      setPendingAction(action, onClick, tokenId);
+      setOpenConnectModal(true);
+    } else {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsx29(
+    Button5,
+    {
+      className: actionButton,
+      variant: "primary",
+      label,
+      onClick: handleClick,
+      leftIcon: icon,
+      size: "xs",
+      shape: "square",
+      width: "full"
+    }
+  );
+}
+
+// src/react/ui/components/_internals/action-button/components/OwnerActions.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function OwnerActions({
+  action,
+  tokenId,
+  collectionAddress,
+  chainId,
+  orderbookKind,
+  highestOffer
+}) {
+  const { show: showCreateListingModal } = useCreateListingModal();
+  const { show: showSellModal } = useSellModal();
+  const { show: showTransferModal } = useTransferModal();
+  if (action === "Create listing" /* LIST */) {
+    return /* @__PURE__ */ jsx30(
+      ActionButtonBody,
+      {
+        label: "Create listing",
+        tokenId,
+        onClick: () => showCreateListingModal({
+          collectionAddress,
+          chainId,
+          collectibleId: tokenId,
+          orderbookKind
+        })
+      }
+    );
+  }
+  if (action === "Sell" /* SELL */ && highestOffer) {
+    return /* @__PURE__ */ jsx30(
+      ActionButtonBody,
+      {
+        tokenId,
+        label: "Sell",
+        onClick: () => showSellModal({
+          collectionAddress,
+          chainId,
+          tokenId,
+          order: highestOffer
+        })
+      }
+    );
+  }
+  if (action === "Transfer" /* TRANSFER */) {
+    return /* @__PURE__ */ jsx30(
+      ActionButtonBody,
+      {
+        label: "Transfer",
+        tokenId,
+        onClick: () => showTransferModal({
+          collectionAddress,
+          chainId,
+          collectibleId: tokenId
+        })
+      }
+    );
+  }
+  return null;
+}
+
+// src/react/ui/icons/CartIcon.tsx
+import { Box as Box19 } from "@0xsequence/design-system";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+var Svg2 = () => /* @__PURE__ */ jsxs21(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-labelledby": "cart-title",
+    children: [
+      /* @__PURE__ */ jsx31("title", { id: "cart-title", children: "Cart Icon" }),
+      /* @__PURE__ */ jsx31(
+        "path",
         {
-          label: "Buy",
-          onClick: () => showBuyModal({
-            collectionAddress,
-            chainId,
-            tokenId,
-            order: lowestListing
-          })
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M2.5 3.46836C2.5 3.20969 2.72366 3 2.99955 3H5.16925C5.88938 3 6.5077 3.48022 6.64172 4.14359L8.33188 12.5093C8.37655 12.7304 8.58266 12.8905 8.8227 12.8905H16.987C17.2629 12.8905 17.4866 13.1002 17.4866 13.3589C17.4866 13.6175 17.2629 13.8272 16.987 13.8272H8.8227C8.10257 13.8272 7.48425 13.347 7.35023 12.6836L5.66007 4.31793C5.6154 4.0968 5.40929 3.93673 5.16925 3.93673H2.99955C2.72366 3.93673 2.5 3.72704 2.5 3.46836Z",
+          fill: "white"
         }
-      );
-    }
-    if (action === "Sell" /* SELL */) {
-      if (!highestOffer)
-        throw new InvalidStepError("SELL", "highestOffer is required");
-      return /* @__PURE__ */ jsx29(
-        ActionButtonBody,
+      ),
+      /* @__PURE__ */ jsx31(
+        "path",
         {
-          label: "Sell",
-          onClick: () => showSellModal({
-            collectionAddress,
-            chainId,
-            tokenId,
-            order: highestOffer
-          })
+          d: "M18.0003 5.34182H6.40946L7.49564 10.8234H17.0736C17.3133 10.8234 17.5193 10.6637 17.5643 10.443L18.491 5.89813C18.5498 5.60942 18.3138 5.34182 18.0003 5.34182Z",
+          fill: "white"
         }
-      );
-    }
-    if (action === "Create listing" /* LIST */) {
-      return /* @__PURE__ */ jsx29(
-        ActionButtonBody,
+      ),
+      /* @__PURE__ */ jsx31(
+        "path",
         {
-          label: "Create listing",
-          onClick: () => showCreateListingModal({
-            collectionAddress,
-            chainId,
-            collectibleId: tokenId,
-            orderbookKind
-          })
+          d: "M10.0889 15.8559C10.0889 16.4878 9.54259 17 8.86866 17C8.19473 17 7.64841 16.4878 7.64841 15.8559C7.64841 15.2241 8.19473 14.7119 8.86866 14.7119C9.54259 14.7119 10.0889 15.2241 10.0889 15.8559Z",
+          fill: "white"
         }
-      );
-    }
-    if (action === "Make an offer" /* OFFER */) {
-      return /* @__PURE__ */ jsx29(
-        ActionButtonBody,
+      ),
+      /* @__PURE__ */ jsx31(
+        "path",
         {
-          label: "Make an offer",
-          onClick: () => showMakeOfferModal({
-            collectionAddress,
-            chainId,
-            collectibleId: tokenId,
-            orderbookKind
-          })
+          d: "M16.6268 15.8559C16.6268 16.4878 16.0804 17 15.4065 17C14.7326 17 14.1863 16.4878 14.1863 15.8559C14.1863 15.2241 14.7326 14.7119 15.4065 14.7119C16.0804 14.7119 16.6268 15.2241 16.6268 15.8559Z",
+          fill: "white"
         }
-      );
+      )
+    ]
+  }
+);
+var SvgCartIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
+  Box19,
+  {
+    as: Svg2,
+    className: iconVariants({
+      size
+    }),
+    ...props
+  }
+);
+var CartIcon_default = SvgCartIcon;
+
+// src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function NonOwnerActions({
+  action,
+  tokenId,
+  collectionAddress,
+  chainId,
+  orderbookKind,
+  lowestListing
+}) {
+  const { show: showBuyModal } = useBuyModal();
+  const { show: showMakeOfferModal } = useMakeOfferModal();
+  if (action === "Buy" /* BUY */) {
+    if (!lowestListing) {
+      throw new InvalidStepError("BUY", "lowestListing is required");
+    }
+    return /* @__PURE__ */ jsx32(
+      ActionButtonBody,
+      {
+        action: "Buy" /* BUY */,
+        tokenId,
+        label: "Buy now",
+        onClick: () => showBuyModal({
+          collectionAddress,
+          chainId,
+          tokenId,
+          order: lowestListing
+        }),
+        icon: CartIcon_default
+      }
+    );
+  }
+  if (action === "Make an offer" /* OFFER */) {
+    return /* @__PURE__ */ jsx32(
+      ActionButtonBody,
+      {
+        action: "Make an offer" /* OFFER */,
+        tokenId,
+        label: "Make an offer",
+        onClick: () => showMakeOfferModal({
+          collectionAddress,
+          chainId,
+          collectibleId: tokenId,
+          orderbookKind
+        })
+      }
+    );
+  }
+  return null;
+}
+
+// src/react/ui/components/_internals/action-button/ActionButton.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var ActionButton = observer12(
+  ({
+    collectionAddress,
+    chainId,
+    tokenId,
+    orderbookKind,
+    action,
+    owned,
+    highestOffer,
+    lowestListing,
+    onCannotPerformAction
+  }) => {
+    const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
+      tokenId,
+      owned,
+      action,
+      onCannotPerformAction
+    });
+    if (!shouldShowAction) {
+      return null;
     }
-    if (action === "Transfer" /* TRANSFER */) {
-      return /* @__PURE__ */ jsx29(
-        ActionButtonBody,
+    if (isOwnerAction) {
+      return /* @__PURE__ */ jsx33(
+        OwnerActions,
         {
-          label: "Transfer",
-          onClick: () => showTransferModal({
-            collectionAddress,
-            chainId,
-            collectibleId: tokenId
-          })
+          action,
+          tokenId,
+          collectionAddress,
+          chainId,
+          orderbookKind,
+          highestOffer
         }
       );
     }
-    return null;
+    return /* @__PURE__ */ jsx33(
+      NonOwnerActions,
+      {
+        action,
+        tokenId,
+        collectionAddress,
+        chainId,
+        orderbookKind,
+        lowestListing
+      }
+    );
   }
 );
-function ActionButtonBody({ label, onClick }) {
-  return /* @__PURE__ */ jsx29(
-    Button5,
-    {
-      variant: "primary",
-      label,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick();
-      },
-      size: "xs",
-      shape: "square",
-      width: "full"
-    }
-  );
-}
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box20, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
+import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits5 } from "viem";
-import { useAccount as useAccount5 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
-import { Box as Box19 } from "@0xsequence/design-system";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
-var Svg2 = () => /* @__PURE__ */ jsxs21(
+import { Box as Box20 } from "@0xsequence/design-system";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+var Svg3 = () => /* @__PURE__ */ jsxs22(
   "svg",
   {
     width: "17",
@@ -3996,8 +4249,8 @@ var Svg2 = () => /* @__PURE__ */ jsxs21(
     role: "img",
     "aria-labelledby": "bell-title",
     children: [
-      /* @__PURE__ */ jsx30("title", { id: "bell-title", children: "Notification Bell" }),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx34("title", { id: "bell-title", children: "Notification Bell" }),
+      /* @__PURE__ */ jsx34(
         "path",
         {
           fillRule: "evenodd",
@@ -4009,10 +4262,10 @@ var Svg2 = () => /* @__PURE__ */ jsxs21(
     ]
   }
 );
-var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
-  Box19,
+var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx34(
+  Box20,
   {
-    as: Svg2,
+    as: Svg3,
     className: iconVariants({
       size
     }),
@@ -4022,7 +4275,7 @@ var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
 var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var Footer = ({
   name,
   type,
@@ -4030,10 +4283,8 @@ var Footer = ({
   highestOffer,
   lowestListingPriceAmount,
   lowestListingCurrency,
-  balance,
-  isAnimated
+  balance
 }) => {
-  const { address } = useAccount5();
   const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
   if (name.length > 15 && highestOffer) {
     name = `${name.substring(0, 13)}...`;
@@ -4041,8 +4292,8 @@ var Footer = ({
   if (name.length > 17 && !highestOffer) {
     name = `${name.substring(0, 17)}...`;
   }
-  return /* @__PURE__ */ jsxs22(
-    Box20,
+  return /* @__PURE__ */ jsxs23(
+    Box21,
     {
       display: "flex",
       flexDirection: "column",
@@ -4051,10 +4302,10 @@ var Footer = ({
       padding: "4",
       whiteSpace: "nowrap",
       position: "relative",
-      className: !!address && isAnimated ? footer.animated : footer.static,
+      className: footer,
       children: [
-        /* @__PURE__ */ jsxs22(
-          Box20,
+        /* @__PURE__ */ jsxs23(
+          Box21,
           {
             display: "flex",
             alignItems: "center",
@@ -4062,7 +4313,7 @@ var Footer = ({
             position: "relative",
             width: "full",
             children: [
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx35(
                 Text15,
                 {
                   color: "text100",
@@ -4070,10 +4321,11 @@ var Footer = ({
                   fontWeight: "bold",
                   textAlign: "left",
                   fontFamily: "body",
-                  children: name
+                  visibility: name ? "visible" : "hidden",
+                  children: name || "Untitled"
                 }
               ),
-              highestOffer && onOfferClick && /* @__PURE__ */ jsx31(
+              highestOffer && onOfferClick && /* @__PURE__ */ jsx35(
                 IconButton5,
                 {
                   size: "xs",
@@ -4086,15 +4338,15 @@ var Footer = ({
                     e.stopPropagation();
                     onOfferClick?.();
                   },
-                  icon: (props) => /* @__PURE__ */ jsx31(Bell_default, { ...props, size: "xs" })
+                  icon: (props) => /* @__PURE__ */ jsx35(Bell_default, { ...props, size: "xs" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
-          listed && /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
-          /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
+          listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx35(Image6, { src: lowestListingCurrency.imageUrl, width: "3", height: "3" }),
+          /* @__PURE__ */ jsxs23(
             Text15,
             {
               color: listed ? "text100" : "text50",
@@ -4112,7 +4364,7 @@ var Footer = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx31(TokenTypeBalancePill, { balance, type })
+        /* @__PURE__ */ jsx35(TokenTypeBalancePill, { balance, type })
       ]
     }
   );
@@ -4122,7 +4374,7 @@ var TokenTypeBalancePill = ({
   type
 }) => {
   const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx35(
     Text15,
     {
       background: "backgroundSecondary",
@@ -4139,25 +4391,25 @@ var TokenTypeBalancePill = ({
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
-  return /* @__PURE__ */ jsxs23(
-    Box21,
+  return /* @__PURE__ */ jsxs24(
+    Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx36(
           Skeleton8,
           {
             size: "lg",
             style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
           }
         ),
-        /* @__PURE__ */ jsxs23(
-          Box21,
+        /* @__PURE__ */ jsxs24(
+          Box22,
           {
             display: "flex",
             flexDirection: "column",
@@ -4166,8 +4418,8 @@ function CollectibleSkeleton() {
             paddingBottom: "4",
             marginTop: "2",
             children: [
-              /* @__PURE__ */ jsx32(Skeleton8, { size: "lg" }),
-              /* @__PURE__ */ jsx32(Skeleton8, { size: "sm" })
+              /* @__PURE__ */ jsx36(Skeleton8, { size: "lg" }),
+              /* @__PURE__ */ jsx36(Skeleton8, { size: "sm" })
             ]
           }
         )
@@ -4185,9 +4437,9 @@ function CollectibleCard({
   onCollectibleClick,
   onOfferClick,
   balance,
-  cardLoading
+  cardLoading,
+  onCannotPerformAction
 }) {
-  const { address: accountAddress } = useAccount6();
   const collectibleMetadata = lowestListing?.metadata;
   const [imageLoadingError, setImageLoadingError] = useState7(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
@@ -4204,21 +4456,22 @@ function CollectibleCard({
     }
   });
   if (highestOfferLoading || cardLoading) {
-    return /* @__PURE__ */ jsx32(CollectibleSkeleton, {});
+    return /* @__PURE__ */ jsx36(CollectibleSkeleton, {});
   }
   const action = balance ? highestOffer?.order && "Sell" /* SELL */ || !lowestListing?.order && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : lowestListing?.order && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
   const name = collectibleMetadata?.name;
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
-  return /* @__PURE__ */ jsx32(
-    Box21,
+  return /* @__PURE__ */ jsx36(
+    Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
-      children: /* @__PURE__ */ jsx32(
-        Box21,
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsx36(
+        Box22,
         {
           display: "flex",
           flexDirection: "column",
@@ -4233,70 +4486,76 @@ function CollectibleCard({
           cursor: "pointer",
           padding: "0",
           className: collectibleTileWrapper,
-          children: /* @__PURE__ */ jsxs23("article", { style: { width: "100%" }, children: [
-            externalUrl && /* @__PURE__ */ jsx32(
-              IconButton6,
-              {
-                as: "a",
-                href: externalUrl,
-                size: "sm",
-                backdropFilter: "blur",
-                variant: "glass",
-                onClick: (e) => {
-                  e.stopPropagation();
-                },
-                position: "absolute",
-                top: "2",
-                left: "2",
-                icon: DiamondEye_default
-              }
-            ),
-            /* @__PURE__ */ jsx32(
-              "img",
-              {
-                src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
-                alt: name,
-                className: collectibleImage,
-                onError: () => setImageLoadingError(true)
-              }
-            ),
-            /* @__PURE__ */ jsx32(
-              Footer,
-              {
-                name: name || "",
-                type: collectionType,
-                onOfferClick: () => onOfferClick?.({ order: highestOffer?.order }),
-                highestOffer: highestOffer?.order,
-                lowestListingPriceAmount: lowestListing?.order?.priceAmount,
-                lowestListingCurrency,
-                balance,
-                isAnimated: !!action
-              }
-            ),
-            accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx32(
-              Box21,
-              {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "2",
-                className: actionWrapper,
-                children: /* @__PURE__ */ jsx32(
-                  ActionButton,
+          children: /* @__PURE__ */ jsxs24(
+            "article",
+            {
+              style: { width: "100%", display: "flex", flexDirection: "column" },
+              children: [
+                externalUrl && /* @__PURE__ */ jsx36(
+                  IconButton6,
+                  {
+                    as: "a",
+                    href: externalUrl,
+                    size: "sm",
+                    backdropFilter: "blur",
+                    variant: "glass",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    },
+                    position: "absolute",
+                    top: "2",
+                    left: "2",
+                    icon: DiamondEye_default
+                  }
+                ),
+                /* @__PURE__ */ jsx36(
+                  "img",
                   {
-                    chainId: String(chainId),
-                    collectionAddress,
-                    tokenId: collectibleId,
-                    orderbookKind,
-                    action,
+                    src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
+                    alt: name,
+                    className: collectibleImage,
+                    onError: () => setImageLoadingError(true)
+                  }
+                ),
+                /* @__PURE__ */ jsx36(
+                  Footer,
+                  {
+                    name: name || "",
+                    type: collectionType,
+                    onOfferClick: () => onOfferClick?.({ order: highestOffer?.order }),
                     highestOffer: highestOffer?.order,
-                    lowestListing: lowestListing?.order,
-                    isOwned: !!balance
+                    lowestListingPriceAmount: lowestListing?.order?.priceAmount,
+                    lowestListingCurrency,
+                    balance
+                  }
+                ),
+                (highestOffer || lowestListing) && /* @__PURE__ */ jsx36(
+                  Box22,
+                  {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "2",
+                    className: actionWrapper,
+                    children: /* @__PURE__ */ jsx36(
+                      ActionButton,
+                      {
+                        chainId: String(chainId),
+                        collectionAddress,
+                        tokenId: collectibleId,
+                        orderbookKind,
+                        action,
+                        highestOffer: highestOffer?.order,
+                        lowestListing: lowestListing?.order,
+                        owned: !!balance,
+                        onCannotPerformAction
+                      }
+                    )
                   }
                 )
-              }
-            )
-          ] })
+              ]
+            }
+          )
         }
       )
     }
@@ -4313,4 +4572,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-7WCZP6FN.js.map
+//# sourceMappingURL=chunk-BJLOO4NP.js.map