@0xsequence/marketplace-sdk 0.4.4 → 0.4.6

package/dist/{chunk-6XUCLBZC.js → chunk-2FOUCP2R.js}

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-J4TRSLTB.js";
+} from "./chunk-RD7HPANB.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -46,20 +46,19 @@ import {
   useGenerateListingTransaction,
   useGenerateOfferTransaction,
   useGenerateSellTransaction,
-  useGetReceiptFromHash,
   useHighestOffer,
   useListBalances,
   useLowestListing,
   useMarketplaceConfig,
   useRoyaltyPercentage,
   useTransferTokens
-} from "./chunk-GLOIEUWC.js";
+} from "./chunk-36NGHJH5.js";
 import {
   AlertMessage,
   switchChainModal_default,
   useSwitchChainModal,
   useWallet
-} from "./chunk-LHN6EBLM.js";
+} from "./chunk-3C2MT5TM.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
@@ -67,19 +66,20 @@ import {
   calculatePriceDifferencePercentage,
   getPublicRpcClient,
   truncateMiddle
-} from "./chunk-4VS5NKDD.js";
+} from "./chunk-LTHX6RXH.js";
 import {
   getProviderEl
-} from "./chunk-ZEKRTFBU.js";
+} from "./chunk-DNVERQ5J.js";
 import {
   balanceQueries,
+  collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-URX7ZHX4.js";
+} from "./chunk-QVOUL555.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
-} from "./chunk-DNDPYQKV.js";
+} from "./chunk-WM4RGBFQ.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer14 } from "@legendapp/state/react";
@@ -103,12 +103,15 @@ var AccountModal = observer(function AccountModal2() {
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Show, observer as observer7, use$ } from "@legendapp/state/react";
+import { Show, observer as observer7 } from "@legendapp/state/react";
 import { useState as useState7 } from "react";
-import { parseUnits as parseUnits2, zeroAddress } from "viem";
+import { parseUnits as parseUnits2 } from "viem";
+
+// src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx
+import { useEffect as useEffect3 } from "react";
 
 // src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
 var ONE_DAY_IN_SECONDS = 60 * 60 * 24;
 var useGetTokenApprovalData = (params) => {
   const config = useConfig();
@@ -118,12 +121,13 @@ var useGetTokenApprovalData = (params) => {
     tokenId: params.tokenId,
     quantity: "1",
     currencyAddress: params.currencyAddress,
-    pricePerToken: "100000",
+    pricePerToken: "1",
     expiry: String(Number(dateToUnixTime(/* @__PURE__ */ new Date())) + ONE_DAY_IN_SECONDS)
   };
+  const isEnabled = wallet && params.query?.enabled !== false;
   const { data, isLoading, isSuccess } = useQuery({
     queryKey: ["token-approval-data", params.currencyAddress],
-    queryFn: async () => {
+    queryFn: isEnabled ? async () => {
       const args = {
         collectionAddress: params.collectionAddress,
         maker: await wallet.address(),
@@ -144,7 +148,7 @@ var useGetTokenApprovalData = (params) => {
       return {
         step: tokenApprovalStep
       };
-    },
+    } : skipToken,
     enabled: !!wallet && !!params.collectionAddress && !!params.currencyAddress
   });
   return {
@@ -487,6 +491,9 @@ var closeButton3 = "fyvr11lw fyvr1tc fyvr1mo";
 var dialogOverlay3 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11vl fyvr11m0 fyvr11rs";
 var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11ul fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
 
+// src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts
+import { formatUnits as formatUnits2 } from "viem";
+
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts
 function getFormattedType(transactionType, verb = false) {
   switch (transactionType) {
@@ -512,12 +519,17 @@ function getTransactionStatusModalMessage({
   transactionStatus,
   transactionType,
   collectibleName,
-  orderId
+  orderId,
+  price
 }) {
   const hideCollectibleName = transactionType === "CANCEL";
+  const formattedPrice = price ? formatUnits2(BigInt(price.amountRaw), price.currency.decimals) : "";
   if (orderId) {
     return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It's been confirmed on the blockchain!`;
   }
+  if (transactionType === "OFFER" /* OFFER */) {
+    return `You just offered ${formattedPrice} ${price?.currency.symbol} for ${collectibleName}. It's been confirmed on the blockchain!`;
+  }
   switch (transactionStatus) {
     case "PENDING":
       return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It should be confirmed on the blockchain shortly.`;
@@ -569,6 +581,12 @@ var useTransactionStatusModal = () => {
     close: () => transactionStatusModal$.close()
   };
 };
+var invalidateQueries = async (queriesToInvalidate) => {
+  const queryClient = getQueryClient();
+  for (const queryKey of queriesToInvalidate) {
+    await queryClient.invalidateQueries({ queryKey });
+  }
+};
 var TransactionStatusModal = observer3(() => {
   const {
     type,
@@ -590,6 +608,7 @@ var TransactionStatusModal = observer3(() => {
   const [transactionStatus, setTransactionStatus] = useState2(
     orderId ? "SUCCESS" : "PENDING"
   );
+  const queryClient = getQueryClient();
   useEffect2(() => {
     if (!transactionStatusModal$.isOpen.get() || orderId) return;
     console.log("Waiting for transaction receipt ...");
@@ -602,6 +621,11 @@ var TransactionStatusModal = observer3(() => {
         } else {
           console.debug("onSuccess callback not provided:", hash);
         }
+        if (queriesToInvalidate) {
+          invalidateQueries(queriesToInvalidate);
+        } else {
+          queryClient.invalidateQueries();
+        }
       }
     }).catch((error) => {
       if (callbacks?.onError) {
@@ -615,9 +639,6 @@ var TransactionStatusModal = observer3(() => {
       }
       setTransactionStatus("FAILED");
     });
-    if (queriesToInvalidate) {
-      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
-    }
     return () => {
       setTransactionStatus("PENDING");
     };
@@ -638,9 +659,9 @@ var TransactionStatusModal = observer3(() => {
     transactionStatus,
     transactionType: type,
     collectibleName: collectible?.name || "",
-    orderId
+    orderId,
+    price
   });
-  const queryClient = getQueryClient();
   const publicClient = chainId ? getPublicRpcClient(chainId) : null;
   const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
     confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
@@ -719,13 +740,16 @@ var useTransactionSteps = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { generateOfferTransactionAsync, isPending: generatingSteps } = useGenerateOfferTransaction({
     chainId,
     onSuccess: (steps) => {
       if (!steps) return;
     }
   });
+  const { data: currency } = useCurrency({
+    chainId,
+    currencyAddress: offerInput.offer.currencyAddress
+  });
   const getOfferSteps = async () => {
     if (!wallet) return;
     try {
@@ -748,7 +772,6 @@ var useTransactionSteps = ({
       } else {
         console.debug("onError callback not provided:", error);
       }
-      throw error;
     }
   };
   const executeApproval = async () => {
@@ -762,14 +785,11 @@ var useTransactionSteps = ({
         Number(chainId),
         approvalStep
       );
-      const receipt = await waitForReceipt(hash);
-      if (receipt) {
-        steps$.approval.isExecuting.set(false);
-        steps$.approval.exist.set(false);
-      }
+      await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+      steps$.approval.isExecuting.set(false);
+      steps$.approval.exist.set(false);
     } catch (error) {
       steps$.approval.isExecuting.set(false);
-      throw error;
     }
   };
   const makeOffer = async () => {
@@ -803,22 +823,27 @@ var useTransactionSteps = ({
         collectibleId: offerInput.offer.tokenId,
         hash,
         orderId,
-        callbacks
+        callbacks,
+        queriesToInvalidate: [
+          balanceQueries.all,
+          collectableKeys.highestOffers,
+          collectableKeys.offers,
+          collectableKeys.offersCount,
+          collectableKeys.userBalances
+        ],
+        price: {
+          amountRaw: offerInput.offer.pricePerToken,
+          currency
+        }
       });
       if (hash) {
-        await waitForReceipt(hash);
+        await wallet.handleConfirmTransactionStep(hash, Number(chainId));
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ hash });
-        }
       }
       if (orderId) {
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ orderId });
-        }
       }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
@@ -826,7 +851,6 @@ var useTransactionSteps = ({
       if (callbacks?.onError && typeof callbacks.onError === "function") {
         callbacks.onError(error);
       }
-      throw error;
     }
   };
   const executeTransaction = async ({
@@ -861,23 +885,30 @@ var useTransactionSteps = ({
 };
 
 // src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx
-import { useEffect as useEffect3 } from "react";
 var useMakeOffer = ({
   offerInput,
   chainId,
   collectionAddress,
-  orderbookKind = "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  orderbookKind,
   callbacks,
   closeMainModal,
   steps$
 }) => {
+  const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
+  const collectionConfig = marketplaceConfig?.collections.find(
+    (c) => c.collectionAddress === collectionAddress
+  );
+  orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData({
     chainId,
     tokenId: offerInput.offer.tokenId,
     collectionAddress,
     currencyAddress: offerInput.offer.currencyAddress,
     contractType: offerInput.contractType,
-    orderbook: orderbookKind
+    orderbook: orderbookKind,
+    query: {
+      enabled: !marketplaceIsLoading
+    }
   });
   useEffect3(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
@@ -909,7 +940,8 @@ var ErrorModal = ({
   isOpen,
   chainId,
   onClose,
-  title
+  title,
+  message
 }) => /* @__PURE__ */ jsx6(
   ActionModal,
   {
@@ -918,7 +950,7 @@ var ErrorModal = ({
     onClose,
     title,
     ctas: [],
-    children: /* @__PURE__ */ jsx6(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" })
+    children: /* @__PURE__ */ jsx6(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: message || "Error loading item details" })
   }
 );
 
@@ -1036,6 +1068,11 @@ function CalendarPopover({
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
 import { useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var setToEndOfDay = (date) => {
+  const endOfDay = new Date(date);
+  endOfDay.setHours(23, 59, 59, 999);
+  return endOfDay;
+};
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -1077,7 +1114,8 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
     if (!presetRange) {
       return;
     }
-    const newDate = addDays(/* @__PURE__ */ new Date(), presetRange.offset);
+    const baseDate = /* @__PURE__ */ new Date();
+    const newDate = presetRange.value === "today" ? setToEndOfDay(baseDate) : addDays(baseDate, presetRange.offset);
     $date.set(newDate);
   }
   function handleDateValueChange(date) {
@@ -1248,13 +1286,15 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   secondCurrencyAsDefault,
-  selectedCurrency$
+  selectedCurrency$,
+  includeNativeCurrency
 }) {
   const currency = selectedCurrency$.get();
   const currencyOptions = useCurrencyOptions({ collectionAddress });
   const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
     chainId,
-    currencyOptions
+    currencyOptions,
+    includeNativeCurrency
   });
   useEffect4(() => {
     if (currencies && currencies.length > 0 && !selectedCurrency$.get()?.contractAddress) {
@@ -1387,7 +1427,8 @@ var PriceInput = observer6(function PriceInput2({
   $price,
   onPriceChange,
   checkBalance,
-  secondCurrencyAsDefault
+  secondCurrencyAsDefault,
+  includeNativeCurrency
 }) {
   const { address: accountAddress } = useAccount2();
   const currencyDecimals = $price.currency.decimals.get() || 18;
@@ -1451,7 +1492,8 @@ var PriceInput = observer6(function PriceInput2({
             selectedCurrency$: $price.currency,
             collectionAddress,
             chainId,
-            secondCurrencyAsDefault
+            secondCurrencyAsDefault,
+            includeNativeCurrency
           }
         ),
         value,
@@ -1547,7 +1589,7 @@ function QuantityInput({
               /* @__PURE__ */ jsx15(
                 IconButton2,
                 {
-                  disabled: !quantity || Number(quantity) <= 0,
+                  disabled: !quantity || Number(quantity) <= 1,
                   onClick: handleDecrement,
                   background: "buttonGlass",
                   size: "xs",
@@ -1557,6 +1599,7 @@ function QuantityInput({
               /* @__PURE__ */ jsx15(
                 IconButton2,
                 {
+                  disabled: !quantity || Number(quantity) >= Number(maxQuantity),
                   onClick: handleIncrement,
                   background: "buttonGlass",
                   size: "xs",
@@ -1644,7 +1687,7 @@ var initialState2 = {
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
-  orderbookKind: "reservoir" /* reservoir */,
+  orderbookKind: void 0,
   callbacks: void 0,
   offerPrice: {
     amountRaw: "0",
@@ -1688,7 +1731,6 @@ var makeOfferModal$ = observable3({
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Box as Box12 } from "@0xsequence/design-system";
 import { Fragment, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var MakeOfferModal = () => {
   return /* @__PURE__ */ jsx17(Show, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx17(Modal2, {}) });
@@ -1731,9 +1773,9 @@ var Modal2 = observer7(() => {
     isError: currenciesIsError
   } = useCurrencies({
     chainId,
-    currencyOptions
+    currencyOptions,
+    includeNativeCurrency: false
   });
-  const selectedCurrency = use$(makeOfferModal$.offerPrice.currency);
   const { isLoading, executeApproval, makeOffer } = useMakeOffer({
     offerInput: {
       contractType: collection?.type,
@@ -1777,7 +1819,18 @@ var Modal2 = observer7(() => {
       }
     );
   }
-  const invalidCurrency = selectedCurrency?.contractAddress === zeroAddress && orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
+  if (!currencies || currencies.length === 0) {
+    return /* @__PURE__ */ jsx17(
+      ErrorModal,
+      {
+        isOpen: makeOfferModal$.isOpen.get(),
+        chainId: Number(chainId),
+        onClose: makeOfferModal$.close,
+        title: "Make an offer",
+        message: "No ERC-20s are configured for the marketplace, contact the marketplace owners"
+      }
+    );
+  }
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -1791,10 +1844,9 @@ var Modal2 = observer7(() => {
       label: "Make offer",
       onClick: () => makeOffer(),
       pending: steps$.transaction.isExecuting.get(),
-      disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity || invalidCurrency
+      disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity
     }
   ];
-  const secondCurrencyAsDefault = orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */ && currencies && currencies[0]?.contractAddress === zeroAddress;
   return /* @__PURE__ */ jsx17(Fragment, { children: /* @__PURE__ */ jsxs10(
     ActionModal,
     {
@@ -1820,7 +1872,7 @@ var Modal2 = observer7(() => {
             collectionAddress,
             $price: makeOfferModal$.offerPrice,
             onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
-            secondCurrencyAsDefault,
+            includeNativeCurrency: false,
             checkBalance: {
               enabled: true,
               callback: (state2) => setInsufficientBalance(state2)
@@ -1845,8 +1897,7 @@ var Modal2 = observer7(() => {
             price: offerPrice
           }
         ),
-        /* @__PURE__ */ jsx17(expirationDateSelect_default, { $date: makeOfferModal$.expiry }),
-        invalidCurrency && /* @__PURE__ */ jsx17(Box12, { color: "negative", fontSize: "small", children: "Native currency offers are not supported on this marketplace. Please select another currency to continue" })
+        /* @__PURE__ */ jsx17(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
       ]
     }
   ) });
@@ -1857,8 +1908,8 @@ import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
 import { parseUnits as parseUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box13, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
+import { Box as Box12, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits3 } from "viem";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
@@ -1879,7 +1930,7 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
   if (royaltyPercentage !== void 0 && formattedAmount && price) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toFixed(price.currency.decimals);
   }
@@ -1887,7 +1938,7 @@ function TransactionDetails({
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
   }
   return /* @__PURE__ */ jsxs11(
-    Box13,
+    Box12,
     {
       width: "full",
       display: "flex",
@@ -1895,7 +1946,7 @@ function TransactionDetails({
       alignItems: "center",
       children: [
         /* @__PURE__ */ jsx18(Text10, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs11(Box13, { display: "flex", alignItems: "center", gap: "2", children: [
+        /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", gap: "2", children: [
           /* @__PURE__ */ jsx18(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
           priceLoading ? /* @__PURE__ */ jsx18(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs11(Text10, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             showPlaceholderPrice ? "0" : formattedAmount,
@@ -1909,7 +1960,7 @@ function TransactionDetails({
 }
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box14, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
+import { Box as Box13, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function TransactionHeader({
@@ -1917,7 +1968,7 @@ function TransactionHeader({
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs12(Box14, { display: "flex", alignItems: "center", width: "full", children: [
+  return /* @__PURE__ */ jsxs12(Box13, { display: "flex", alignItems: "center", width: "full", children: [
     /* @__PURE__ */ jsx19(
       Text11,
       {
@@ -2073,7 +2124,6 @@ var useTransactionSteps2 = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { amount, receiver } = useFees({
     chainId: Number(chainId),
     collectionAddress
@@ -2108,7 +2158,6 @@ var useTransactionSteps2 = ({
       } else {
         console.debug("onError callback not provided:", error);
       }
-      throw error;
     }
   };
   const executeApproval = async () => {
@@ -2122,14 +2171,11 @@ var useTransactionSteps2 = ({
         Number(chainId),
         approvalStep
       );
-      const receipt = await waitForReceipt(hash);
-      if (receipt) {
-        steps$.approval.isExecuting.set(false);
-        steps$.approval.exist.set(false);
-      }
+      await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+      steps$.approval.isExecuting.set(false);
+      steps$.approval.exist.set(false);
     } catch (error) {
       steps$.approval.isExecuting.set(false);
-      throw error;
     }
   };
   const sell = async () => {
@@ -2161,22 +2207,17 @@ var useTransactionSteps2 = ({
         collectibleId,
         hash,
         orderId,
-        callbacks
+        callbacks,
+        queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances]
       });
       if (hash) {
-        await waitForReceipt(hash);
+        await wallet.handleConfirmTransactionStep(hash, Number(chainId));
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ hash });
-        }
       }
       if (orderId) {
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ orderId });
-        }
       }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
@@ -2184,7 +2225,6 @@ var useTransactionSteps2 = ({
       if (callbacks?.onError && typeof callbacks.onError === "function") {
         callbacks.onError(error);
       }
-      throw error;
     }
   };
   const executeTransaction = async ({
@@ -2390,7 +2430,7 @@ var Modal3 = observer8(() => {
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
 import {
-  Box as Box15,
+  Box as Box14,
   Button as Button3,
   CloseIcon as CloseIcon2,
   ExternalLinkIcon,
@@ -2455,7 +2495,7 @@ var SuccessfulPurchaseModal = observer9(() => {
   return /* @__PURE__ */ jsx21(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs14(Portal3, { children: [
     /* @__PURE__ */ jsx21(Overlay2, { className: dialogOverlay }),
     /* @__PURE__ */ jsxs14(Content3, { className: dialogContent.narrow, children: [
-      /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+      /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
         /* @__PURE__ */ jsx21(
           Text12,
           {
@@ -2472,7 +2512,7 @@ var SuccessfulPurchaseModal = observer9(() => {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs14(Box15, { display: "flex", alignItems: "center", gap: "1", children: [
+        /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
           /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
           /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
           /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
@@ -2495,7 +2535,7 @@ var SuccessfulPurchaseModal = observer9(() => {
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "2", children: [
+  return /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
     successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx21(
       Button3,
       {
@@ -2524,10 +2564,10 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx21(Box15, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx21(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
     return /* @__PURE__ */ jsxs14(
-      Box15,
+      Box14,
       {
         className: collectiblesGridItem,
         position: "relative",
@@ -2544,7 +2584,7 @@ function CollectiblesGrid({ collectibles }) {
             }
           ),
           showPlus && /* @__PURE__ */ jsx21(
-            Box15,
+            Box14,
             {
               position: "absolute",
               top: "0",
@@ -2629,7 +2669,7 @@ var initialState5 = {
 var transferModal$ = observable6(initialState5);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box16, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
+import { Box as Box15, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
 import { observable as observable7 } from "@legendapp/state";
 import { isAddress } from "viem";
 import { useAccount as useAccount3 } from "wagmi";
@@ -2656,58 +2696,44 @@ var useHandleTransfer = () => {
   } = transferModal$.state.get();
   const { transferTokensAsync } = useTransferTokens();
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  const getHash = async () => {
+    if (collectionType === "ERC721" /* ERC721 */) {
+      return await transferTokensAsync({
+        receiverAddress,
+        collectionAddress,
+        tokenId: collectibleId,
+        chainId,
+        contractType: "ERC721" /* ERC721 */
+      });
+    }
+    return await transferTokensAsync({
+      receiverAddress,
+      collectionAddress,
+      tokenId: collectibleId,
+      chainId,
+      contractType: "ERC1155" /* ERC1155 */,
+      quantity: String(quantity)
+    });
+  };
   async function transfer() {
     if (collectionType !== "ERC721" /* ERC721 */ && collectionType !== "ERC1155" /* ERC1155 */) {
       throw new InvalidContractTypeError(collectionType);
     }
-    if (collectionType === "ERC721" /* ERC721 */) {
-      try {
-        const hash = await transferTokensAsync({
-          receiverAddress,
-          collectionAddress,
-          tokenId: collectibleId,
-          chainId,
-          contractType: "ERC721" /* ERC721 */
-        });
-        transferModal$.close();
-        showTransactionStatusModal({
-          hash,
-          collectionAddress,
-          chainId,
-          collectibleId,
-          price: void 0,
-          type: "TRANSFER" /* TRANSFER */,
-          queriesToInvalidate: balanceQueries.all
-        });
-      } catch (error) {
-        transferModal$.view.set("enterReceiverAddress");
-        callbacks?.onError?.(error);
-      }
-    }
-    if (collectionType === "ERC1155" /* ERC1155 */) {
-      try {
-        const hash = await transferTokensAsync({
-          receiverAddress,
-          collectionAddress,
-          tokenId: collectibleId,
-          chainId,
-          contractType: "ERC1155" /* ERC1155 */,
-          quantity: String(quantity)
-        });
-        transferModal$.close();
-        showTransactionStatusModal({
-          hash,
-          collectionAddress,
-          chainId,
-          collectibleId,
-          price: void 0,
-          type: "TRANSFER" /* TRANSFER */,
-          queriesToInvalidate: balanceQueries.all
-        });
-      } catch (error) {
-        transferModal$.view.set("enterReceiverAddress");
-        callbacks?.onError?.(error);
-      }
+    try {
+      const hash = await getHash();
+      transferModal$.close();
+      showTransactionStatusModal({
+        hash,
+        collectionAddress,
+        chainId,
+        collectibleId,
+        price: void 0,
+        type: "TRANSFER" /* TRANSFER */,
+        queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances]
+      });
+    } catch (error) {
+      transferModal$.view.set("enterReceiverAddress");
+      callbacks?.onError?.(error);
     }
   }
   return { transfer };
@@ -2748,9 +2774,9 @@ var EnterWalletAddressView = () => {
     transfer();
     transferModal$.view.set("followWalletInstructions");
   }
-  return /* @__PURE__ */ jsxs15(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
+  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__ */ jsxs15(Box16, { display: "flex", flexDirection: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs15(Box15, { display: "flex", flexDirection: "column", gap: "3", children: [
       /* @__PURE__ */ jsx22(
         AlertMessage,
         {
@@ -2810,13 +2836,13 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box17, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
+import { Box as Box16, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
 import { observer as observer10 } from "@legendapp/state/react";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var FollowWalletInstructionsView = observer10(() => {
-  return /* @__PURE__ */ jsxs16(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs16(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
     /* @__PURE__ */ jsx23(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx23(Box17, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx23(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
@@ -2904,7 +2930,7 @@ var TransactionModalView = observer11(() => {
 });
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { Box as Box18 } from "@0xsequence/design-system";
+import { Box as Box17 } from "@0xsequence/design-system";
 import { Show as Show4, observer as observer12 } from "@legendapp/state/react";
 import { parseUnits as parseUnits4 } from "viem";
 import { useAccount as useAccount5 } from "wagmi";
@@ -2964,7 +2990,7 @@ var createListingModal$ = observable8({
 import { useEffect as useEffect8 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
-import { useQuery as useQuery3 } from "@tanstack/react-query";
+import { skipToken as skipToken2, useQuery as useQuery3 } from "@tanstack/react-query";
 var ONE_DAY_IN_SECONDS2 = 60 * 60 * 24;
 var useGetTokenApprovalData3 = (params) => {
   const config = useConfig();
@@ -2977,9 +3003,10 @@ var useGetTokenApprovalData3 = (params) => {
     pricePerToken: "100000",
     expiry: String(Number(dateToUnixTime(/* @__PURE__ */ new Date())) + ONE_DAY_IN_SECONDS2)
   };
+  const isEnabled = wallet && params.query?.enabled !== false;
   const { data, isLoading, isSuccess } = useQuery3({
     queryKey: ["token-approval-data", params.currencyAddress],
-    queryFn: async () => {
+    queryFn: isEnabled ? async () => {
       const args = {
         collectionAddress: params.collectionAddress,
         owner: await wallet.address(),
@@ -3000,7 +3027,7 @@ var useGetTokenApprovalData3 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    }
+    } : skipToken2
   });
   return {
     data,
@@ -3014,7 +3041,7 @@ var useTransactionSteps3 = ({
   listingInput,
   chainId,
   collectionAddress,
-  orderbookKind = "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  orderbookKind,
   callbacks,
   closeMainModal,
   steps$
@@ -3024,7 +3051,6 @@ var useTransactionSteps3 = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { generateListingTransactionAsync, isPending: generatingSteps } = useGenerateListingTransaction({
     chainId,
     onSuccess: (steps) => {
@@ -3053,7 +3079,6 @@ var useTransactionSteps3 = ({
       } else {
         console.debug("onError callback not provided:", error);
       }
-      throw error;
     }
   };
   const executeApproval = async () => {
@@ -3067,14 +3092,11 @@ var useTransactionSteps3 = ({
         Number(chainId),
         approvalStep
       );
-      const receipt = await waitForReceipt(hash);
-      if (receipt) {
-        steps$.approval.isExecuting.set(false);
-        steps$.approval.exist.set(false);
-      }
+      await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+      steps$.approval.isExecuting.set(false);
+      steps$.approval.exist.set(false);
     } catch (error) {
       steps$.approval.isExecuting.set(false);
-      throw error;
     }
   };
   const createListing = async () => {
@@ -3108,22 +3130,23 @@ var useTransactionSteps3 = ({
         collectibleId: listingInput.listing.tokenId,
         hash,
         orderId,
-        callbacks
+        callbacks,
+        queriesToInvalidate: [
+          balanceQueries.all,
+          collectableKeys.lowestListings,
+          collectableKeys.listings,
+          collectableKeys.listingsCount,
+          collectableKeys.userBalances
+        ]
       });
       if (hash) {
-        await waitForReceipt(hash);
+        await wallet.handleConfirmTransactionStep(hash, Number(chainId));
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ hash });
-        }
       }
       if (orderId) {
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ orderId });
-        }
       }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
@@ -3131,7 +3154,6 @@ var useTransactionSteps3 = ({
       if (callbacks?.onError && typeof callbacks.onError === "function") {
         callbacks.onError(error);
       }
-      throw error;
     }
   };
   const executeTransaction = async ({
@@ -3170,18 +3192,26 @@ var useCreateListing = ({
   listingInput,
   chainId,
   collectionAddress,
-  orderbookKind = "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  orderbookKind,
   steps$,
   callbacks,
   closeMainModal
 }) => {
+  const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
+  const collectionConfig = marketplaceConfig?.collections.find(
+    (c) => c.collectionAddress === collectionAddress
+  );
+  orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData3({
     chainId,
     tokenId: listingInput.listing.tokenId,
     collectionAddress,
     currencyAddress: listingInput.listing.currencyAddress,
     contractType: listingInput.contractType,
-    orderbook: orderbookKind
+    orderbook: orderbookKind,
+    query: {
+      enabled: !marketplaceIsLoading
+    }
   });
   useEffect8(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
@@ -3323,7 +3353,7 @@ var Modal5 = observer12(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsxs18(Box18, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+        /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
           /* @__PURE__ */ jsx25(
             priceInput_default,
             {
@@ -3368,7 +3398,7 @@ var Modal5 = observer12(() => {
 });
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { use$ as use$2 } from "@legendapp/state/react";
+import { use$ } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable9 } from "@legendapp/state";
@@ -3383,7 +3413,9 @@ var initialState7 = {
       quantity: args.order.quantityAvailableFormatted,
       order: args.order,
       modalId: buyModal$.state.modalId.get() + 1,
-      invalidQuantity: false
+      invalidQuantity: false,
+      checkoutModalIsLoading: false,
+      checkoutModalLoaded: false
     });
     buyModal$.callbacks.set(callbacks || defaultCallbacks);
     buyModal$.isOpen.set(true);
@@ -3395,7 +3427,15 @@ var initialState7 = {
     order: void 0,
     quantity: "1",
     modalId: 0,
-    invalidQuantity: false
+    invalidQuantity: false,
+    checkoutModalIsLoading: false,
+    checkoutModalLoaded: false
+  },
+  setCheckoutModalIsLoading: (isLoading) => {
+    buyModal$.state.checkoutModalIsLoading.set(isLoading);
+  },
+  setCheckoutModalLoaded: (isLoaded) => {
+    buyModal$.state.checkoutModalLoaded.set(isLoaded);
   },
   callbacks: void 0
 };
@@ -3420,15 +3460,12 @@ function CheckoutModal({ buy, collectable, order }) {
 }
 
 // src/react/ui/modals/BuyModal/modals/Modal1155.tsx
-import { Box as Box19, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { Box as Box18, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { observer as observer13 } from "@legendapp/state/react";
-import { formatUnits as formatUnits3, parseUnits as parseUnits6 } from "viem";
+import { formatUnits as formatUnits4, parseUnits as parseUnits6 } from "viem";
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var ERC1155QuantityModal = observer13(
   ({ buy, collectable, order }) => {
-    buyModal$.state.quantity.set(
-      Math.min(Number(order.quantityRemaining), 1).toString()
-    );
     const currencyOptions = useCurrencyOptions({
       collectionAddress: order.collectionContractAddress
     });
@@ -3442,6 +3479,9 @@ var ERC1155QuantityModal = observer13(
     const quantity = Number(buyModal$.state.quantity.get());
     const pricePerToken = order.priceAmount;
     const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
+    if (buyModal$.state.checkoutModalLoaded.get()) {
+      return null;
+    }
     return /* @__PURE__ */ jsx26(
       ActionModal,
       {
@@ -3453,6 +3493,7 @@ var ERC1155QuantityModal = observer13(
           {
             label: "Buy now",
             onClick: () => {
+              buyModal$.state.checkoutModalIsLoading.set(true);
               buy({
                 quantity: parseUnits6(
                   buyModal$.state.quantity.get(),
@@ -3462,10 +3503,12 @@ var ERC1155QuantityModal = observer13(
                 collectableDecimals: collectable.decimals || 0,
                 marketplace: order.marketplace
               });
-            }
+            },
+            disabled: buyModal$.state.checkoutModalIsLoading.get(),
+            pending: buyModal$.state.checkoutModalIsLoading.get()
           }
         ],
-        children: /* @__PURE__ */ jsxs19(Box19, { display: "flex", flexDirection: "column", gap: "4", children: [
+        children: /* @__PURE__ */ jsxs19(Box18, { display: "flex", flexDirection: "column", gap: "4", children: [
           /* @__PURE__ */ jsx26(
             QuantityInput,
             {
@@ -3475,11 +3518,11 @@ var ERC1155QuantityModal = observer13(
               maxQuantity: order.quantityRemaining
             }
           ),
-          /* @__PURE__ */ jsxs19(Box19, { display: "flex", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxs19(Box18, { display: "flex", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx26(Text15, { color: "text50", fontSize: "small", children: "Total Price" }),
-            /* @__PURE__ */ jsxs19(Box19, { display: "flex", alignItems: "center", gap: "2", children: [
+            /* @__PURE__ */ jsxs19(Box18, { display: "flex", alignItems: "center", gap: "2", children: [
               /* @__PURE__ */ jsx26(TokenImage2, { src: currency?.imageUrl, size: "xs" }),
-              /* @__PURE__ */ jsx26(Text15, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits3(BigInt(totalPrice), currency?.decimals || 0) })
+              /* @__PURE__ */ jsx26(Text15, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits4(BigInt(totalPrice), currency?.decimals || 0) })
             ] })
           ] })
         ] })
@@ -3574,7 +3617,9 @@ var useBuyCollectable = ({
   collectionAddress,
   tokenId,
   callbacks,
-  priceCurrencyAddress
+  priceCurrencyAddress,
+  setCheckoutModalIsLoading,
+  setCheckoutModalLoaded
 }) => {
   const { openSelectPaymentModal } = useSelectPaymentModal();
   const config = useConfig();
@@ -3587,6 +3632,12 @@ var useBuyCollectable = ({
   if (isError || !wallet) {
     return { status: "error", buy: null, isLoading, isError: true };
   }
+  const invalidateQueries2 = async (queriesToInvalidate) => {
+    const queryClient = getQueryClient();
+    for (const queryKey of queriesToInvalidate) {
+      await queryClient.invalidateQueries({ queryKey });
+    }
+  };
   return {
     status: "ready",
     isLoading,
@@ -3605,6 +3656,8 @@ var useBuyCollectable = ({
         additionalFees: [fees],
         walletType: "unknown" /* unknown */
       });
+      setCheckoutModalLoaded(true);
+      setCheckoutModalIsLoading(false);
       const step = steps[0];
       openSelectPaymentModal({
         chain: chainId,
@@ -3624,10 +3677,18 @@ var useBuyCollectable = ({
         enableMainCurrencyPayment: true,
         enableSwapPayments: !!input.checkoutOptions.swap,
         creditCardProviders: input.checkoutOptions.nftCheckout || [],
-        onSuccess: (hash) => callbacks?.onSuccess?.({ hash }),
+        onSuccess: (hash) => {
+          invalidateQueries2([
+            collectableKeys.listings,
+            collectableKeys.listingsCount,
+            collectableKeys.lists,
+            collectableKeys.userBalances,
+            balanceQueries.all
+          ]);
+          callbacks?.onSuccess?.({ hash });
+        },
         onError: callbacks?.onError,
         onClose: () => {
-          console.log("onClose");
           buyModal$.close();
         }
       });
@@ -3638,20 +3699,22 @@ var useBuyCollectable = ({
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var BuyModal = () => {
-  const isOpen = use$2(buyModal$.isOpen);
+  const isOpen = use$(buyModal$.isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx27(BuyModalContent, {});
 };
 var BuyModalContent = () => {
-  const chainId = String(use$2(buyModal$.state.order.chainId));
-  const collectionAddress = use$2(
+  const chainId = String(use$(buyModal$.state.order.chainId));
+  const collectionAddress = use$(
     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 collectibleId = use$(buyModal$.state.order.tokenId);
+  const modalId = use$(buyModal$.state.modalId);
+  const callbacks = use$(buyModal$.callbacks);
+  const order = use$(buyModal$.state.order);
+  const isOpen = use$(buyModal$.isOpen);
+  const setCheckoutModalIsLoading = use$(buyModal$.setCheckoutModalIsLoading);
+  const setCheckoutModalLoaded = use$(buyModal$.setCheckoutModalLoaded);
   const { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
     chainId: Number(chainId),
     collectionAddress,
@@ -3668,7 +3731,9 @@ var BuyModalContent = () => {
     collectionAddress,
     callbacks,
     tokenId: collectibleId,
-    priceCurrencyAddress: order.priceCurrencyAddress
+    priceCurrencyAddress: order.priceCurrencyAddress,
+    setCheckoutModalIsLoading,
+    setCheckoutModalLoaded
   });
   if (isLoading || !collection || !collectable || !checkoutOptions || buyIsLoading) {
     return /* @__PURE__ */ jsx27(
@@ -3761,11 +3826,11 @@ var useBuyModal = (callbacks) => {
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
 import { useState as useState8 } from "react";
-import { Box as Box23, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
+import { Box as Box22, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
 import { useAccount as useAccount7 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
-import { Box as Box20 } from "@0xsequence/design-system";
+import { Box as Box19 } from "@0xsequence/design-system";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var Svg = () => /* @__PURE__ */ jsxs21(
   "svg",
@@ -3792,7 +3857,7 @@ var Svg = () => /* @__PURE__ */ jsxs21(
   }
 );
 var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
-  Box20,
+  Box19,
   {
     as: Svg,
     className: iconVariants({
@@ -3917,12 +3982,12 @@ function ActionButtonBody({ label, onClick }) {
 }
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box22, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits4 } from "viem";
+import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits5 } from "viem";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
-import { Box as Box21 } from "@0xsequence/design-system";
+import { Box as Box20 } from "@0xsequence/design-system";
 import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var Svg2 = () => /* @__PURE__ */ jsxs22(
   "svg",
@@ -3949,7 +4014,7 @@ var Svg2 = () => /* @__PURE__ */ jsxs22(
   }
 );
 var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
-  Box21,
+  Box20,
   {
     as: Svg2,
     className: iconVariants({
@@ -3981,7 +4046,7 @@ var Footer = ({
     name = `${name.substring(0, 17)}...`;
   }
   return /* @__PURE__ */ jsxs23(
-    Box22,
+    Box21,
     {
       display: "flex",
       flexDirection: "column",
@@ -3993,7 +4058,7 @@ var Footer = ({
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
         /* @__PURE__ */ jsxs23(
-          Box22,
+          Box21,
           {
             display: "flex",
             alignItems: "center",
@@ -4031,7 +4096,7 @@ var Footer = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23(Box22, { display: "flex", alignItems: "center", gap: "1", children: [
+        /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
           listed && /* @__PURE__ */ jsx32(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
           /* @__PURE__ */ jsxs23(
             Text16,
@@ -4042,7 +4107,7 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                listed && `${formatUnits4(
+                listed && `${formatUnits5(
                   BigInt(lowestListingPriceAmount),
                   lowestListingCurrency.decimals
                 )} ${lowestListingCurrency.symbol}`,
@@ -4081,7 +4146,7 @@ var TokenTypeBalancePill = ({
 import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
   return /* @__PURE__ */ jsxs24(
-    Box23,
+    Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
@@ -4096,7 +4161,7 @@ function CollectibleSkeleton() {
           }
         ),
         /* @__PURE__ */ jsxs24(
-          Box23,
+          Box22,
           {
             display: "flex",
             flexDirection: "column",
@@ -4147,14 +4212,14 @@ function CollectibleCard({
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
   return /* @__PURE__ */ jsx33(
-    Box23,
+    Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
       children: /* @__PURE__ */ jsx33(
-        Box23,
+        Box22,
         {
           display: "flex",
           flexDirection: "column",
@@ -4210,7 +4275,7 @@ function CollectibleCard({
               }
             ),
             accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx33(
-              Box23,
+              Box22,
               {
                 display: "flex",
                 alignItems: "center",
@@ -4249,4 +4314,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-6XUCLBZC.js.map
+//# sourceMappingURL=chunk-2FOUCP2R.js.map