@0xsequence/marketplace-sdk 0.4.3 → 0.4.5

package/dist/{chunk-2AMLJ2TA.js → chunk-SEISACMH.js}

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-VYSWBIWC.js";
+} from "./chunk-CKOWM2ZR.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -53,13 +53,13 @@ import {
   useMarketplaceConfig,
   useRoyaltyPercentage,
   useTransferTokens
-} from "./chunk-ST6RH2IB.js";
+} from "./chunk-KZGDOIZY.js";
 import {
   AlertMessage,
   switchChainModal_default,
   useSwitchChainModal,
   useWallet
-} from "./chunk-YZE7RXC2.js";
+} from "./chunk-KL5JPUPS.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
@@ -67,16 +67,20 @@ import {
   calculatePriceDifferencePercentage,
   getPublicRpcClient,
   truncateMiddle
-} from "./chunk-4VS5NKDD.js";
+} from "./chunk-FT3J32ZV.js";
+import {
+  getProviderEl
+} from "./chunk-ZEKRTFBU.js";
 import {
   balanceQueries,
+  collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-URX7ZHX4.js";
+} from "./chunk-KILOCWY2.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
-} from "./chunk-DNDPYQKV.js";
+} from "./chunk-YUETNNZQ.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer14 } from "@legendapp/state/react";
@@ -100,12 +104,15 @@ var AccountModal = observer(function AccountModal2() {
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Show, observer as observer7 } from "@legendapp/state/react";
-import { useState as useState6 } from "react";
-import { parseUnits as parseUnits2 } from "viem";
+import { Show, observer as observer7, use$ } from "@legendapp/state/react";
+import { useState as useState7 } from "react";
+import { parseUnits as parseUnits2, zeroAddress } 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,9 +125,10 @@ var useGetTokenApprovalData = (params) => {
     pricePerToken: "100000",
     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(),
@@ -141,7 +149,7 @@ var useGetTokenApprovalData = (params) => {
       return {
         step: tokenApprovalStep
       };
-    },
+    } : skipToken,
     enabled: !!wallet && !!params.collectionAddress && !!params.currencyAddress
   });
   return {
@@ -151,6 +159,9 @@ var useGetTokenApprovalData = (params) => {
   };
 };
 
+// src/react/_internal/transaction-machine/execute-transaction.ts
+import { avalanche, optimism } from "viem/chains";
+
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import {
   CloseIcon,
@@ -484,6 +495,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) {
@@ -509,12 +523,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.`;
@@ -566,6 +585,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,
@@ -587,6 +612,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 ...");
@@ -595,10 +621,15 @@ var TransactionStatusModal = observer3(() => {
         console.log("receipt", receipt);
         setTransactionStatus("SUCCESS");
         if (callbacks?.onSuccess) {
-          callbacks.onSuccess(hash || "0x");
+          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) {
@@ -612,9 +643,6 @@ var TransactionStatusModal = observer3(() => {
       }
       setTransactionStatus("FAILED");
     });
-    if (queriesToInvalidate) {
-      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
-    }
     return () => {
       setTransactionStatus("PENDING");
     };
@@ -635,15 +663,15 @@ 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,
     hash: hash || "0x"
   });
-  return /* @__PURE__ */ jsx5(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs4(Portal, { children: [
+  return /* @__PURE__ */ jsx5(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs4(Portal, { container: getProviderEl(), children: [
     /* @__PURE__ */ jsx5(Overlay, { className: dialogOverlay3 }),
     /* @__PURE__ */ jsxs4(Content, { className: transactionStatusModalContent, children: [
       title ? /* @__PURE__ */ jsx5(
@@ -723,6 +751,10 @@ var useTransactionSteps = ({
       if (!steps) return;
     }
   });
+  const { data: currency } = useCurrency({
+    chainId,
+    currencyAddress: offerInput.offer.currencyAddress
+  });
   const getOfferSteps = async () => {
     if (!wallet) return;
     try {
@@ -745,7 +777,6 @@ var useTransactionSteps = ({
       } else {
         console.debug("onError callback not provided:", error);
       }
-      throw error;
     }
   };
   const executeApproval = async () => {
@@ -766,18 +797,18 @@ var useTransactionSteps = ({
       }
     } catch (error) {
       steps$.approval.isExecuting.set(false);
-      throw error;
     }
   };
   const makeOffer = async () => {
     if (!wallet) return;
     try {
       steps$.transaction.isExecuting.set(true);
-      const transactionStep = await getOfferSteps().then(
-        (steps) => steps?.find((step) => step.id === "createOffer" /* createOffer */)
+      const steps = await getOfferSteps();
+      const transactionStep = steps?.find(
+        (step) => step.id === "createOffer" /* createOffer */
       );
-      const signatureStep = await getOfferSteps().then(
-        (steps) => steps?.find((step) => step.id === "signEIP712" /* signEIP712 */)
+      const signatureStep = steps?.find(
+        (step) => step.id === "signEIP712" /* signEIP712 */
       );
       console.debug("transactionStep", transactionStep);
       console.debug("signatureStep", signatureStep);
@@ -799,12 +830,40 @@ 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
+        }
       });
-      steps$.transaction.isExecuting.set(false);
+      if (hash) {
+        await waitForReceipt(hash);
+        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);
-      throw error;
+      steps$.transaction.exist.set(false);
+      if (callbacks?.onError && typeof callbacks.onError === "function") {
+        callbacks.onError(error);
+      }
     }
   };
   const executeTransaction = async ({
@@ -839,12 +898,11 @@ 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$
@@ -1169,20 +1227,17 @@ function FloorPriceText({
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
 import { Box as Box9, NumericInput, Text as Text8 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
-import { useEffect as useEffect5, useState as useState5 } from "react";
-import { parseUnits } from "viem";
+import { useCallback, useMemo } from "react";
 import { useAccount as useAccount2 } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyImage/index.tsx
 import { Box as Box8, TokenImage } from "@0xsequence/design-system";
 import { useState as useState4 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-function CurrencyImage({
-  $listingPrice
-}) {
+function CurrencyImage({ price$ }) {
   const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] = useState4(null);
   if (imageLoadErrorCurrencyAddresses?.includes(
-    $listingPrice.currency.contractAddress.get()
+    price$.currency.contractAddress.get()
   )) {
     return /* @__PURE__ */ jsx12(
       Box8,
@@ -1197,17 +1252,17 @@ function CurrencyImage({
   return /* @__PURE__ */ jsx12(
     TokenImage,
     {
-      src: $listingPrice.currency.imageUrl.get(),
+      src: price$.currency.imageUrl.get(),
       onError: () => {
-        const listingPrice = $listingPrice?.get();
-        if (listingPrice) {
+        const price = price$?.get();
+        if (price) {
           setImageLoadErrorCurrencyAddresses((prev) => {
             if (!prev)
-              return [listingPrice.currency.contractAddress];
-            if (!prev.includes(listingPrice.currency.contractAddress)) {
+              return [price$.currency.contractAddress.get()];
+            if (!prev.includes(price$.currency.contractAddress.get())) {
               return [
                 ...prev,
-                listingPrice.currency.contractAddress
+                price$.currency.contractAddress.get()
               ];
             }
             return prev;
@@ -1228,6 +1283,7 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
+  secondCurrencyAsDefault,
   selectedCurrency$
 }) {
   const currency = selectedCurrency$.get();
@@ -1238,7 +1294,11 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
   });
   useEffect4(() => {
     if (currencies && currencies.length > 0 && !selectedCurrency$.get()?.contractAddress) {
-      selectedCurrency$.set(currencies[0]);
+      if (secondCurrencyAsDefault) {
+        selectedCurrency$.set(currencies[1]);
+      } else {
+        selectedCurrency$.set(currencies[0]);
+      }
     }
   }, [currencies]);
   if (!currencies || currenciesLoading || !currency.symbol) {
@@ -1271,44 +1331,70 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
 });
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
-// src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var PriceInput = observer6(function PriceInput2({
-  chainId,
-  collectionAddress,
-  $listingPrice,
-  onPriceChange,
-  checkBalance
-}) {
-  const [balanceError, setBalanceError] = useState5("");
-  const { address: accountAddress } = useAccount2();
-  const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
-    currencyAddress: $listingPrice.currency.contractAddress.get(),
-    chainId: Number(chainId),
-    userAddress: accountAddress
-  });
-  const currencyDecimals = $listingPrice.currency.decimals.get();
+// src/react/ui/modals/_internal/components/priceInput/hooks/usePriceInput.ts
+import { useState as useState5, useEffect as useEffect5 } from "react";
+import { parseUnits } from "viem";
+var usePriceInput = ({
+  price$,
+  currencyDecimals,
+  onPriceChange
+}) => {
   const [value, setValue] = useState5("");
-  const changeListingPrice = (value2) => {
-    setValue(value2);
-    const trimmedValue = value2.replace(/,/g, "");
-    const parsedTrimmedValue = parseUnits(
-      trimmedValue,
-      Number(currencyDecimals)
-    );
+  useEffect5(() => {
+    const currentAmount = value.replace(/,/g, "");
+    if (currentAmount) {
+      try {
+        const parsedAmount = parseUnits(
+          currentAmount,
+          Number(currencyDecimals)
+        );
+        price$.amountRaw.set(parsedAmount.toString());
+      } catch {
+        price$.amountRaw.set("0");
+      }
+    }
+  }, [currencyDecimals, value, price$]);
+  const handlePriceChange = (newValue) => {
+    setValue(newValue);
     try {
-      const parsedAmount = parseUnits(value2, Number(currencyDecimals));
-      $listingPrice.amountRaw.set(parsedAmount.toString());
-      if (onPriceChange && parsedTrimmedValue !== 0n) {
+      const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
+      price$.amountRaw.set(parsedAmount.toString());
+      if (onPriceChange && parsedAmount !== 0n) {
         onPriceChange();
       }
     } catch {
-      $listingPrice.amountRaw.set("0");
+      price$.amountRaw.set("0");
     }
   };
-  const checkInsufficientBalance = (priceAmountRaw) => {
-    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance?.value || 0);
-    if (!checkBalance) return;
+  return {
+    value,
+    handlePriceChange
+  };
+};
+
+// src/react/ui/modals/_internal/components/priceInput/hooks/useBalanceCheck.ts
+import { useState as useState6, useEffect as useEffect6 } from "react";
+var useBalanceCheck = ({
+  checkBalance,
+  price$,
+  currencyAddress,
+  chainId,
+  userAddress,
+  currencyDecimals
+}) => {
+  const [balanceError, setBalanceError] = useState6("");
+  const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
+    currencyAddress,
+    chainId,
+    userAddress
+  });
+  useEffect6(() => {
+    if (!checkBalance?.enabled) {
+      setBalanceError("");
+      return;
+    }
+    const priceAmountRaw = price$.amountRaw.get() || "0";
+    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance?.value || 0n);
     if (hasInsufficientBalance) {
       setBalanceError("Insufficient balance");
       checkBalance.callback(true);
@@ -1316,13 +1402,66 @@ var PriceInput = observer6(function PriceInput2({
       setBalanceError("");
       checkBalance.callback(false);
     }
+  }, [
+    price$.amountRaw.get(),
+    currencyAddress,
+    balance?.value,
+    isBalanceSuccess,
+    checkBalance,
+    currencyDecimals
+  ]);
+  return {
+    balanceError
   };
-  useEffect5(() => {
-    const priceAmountRaw = $listingPrice.amountRaw.get();
-    if (priceAmountRaw && priceAmountRaw !== "0") {
-      checkInsufficientBalance(priceAmountRaw);
-    }
-  }, [$listingPrice.currency.get()]);
+};
+
+// src/react/ui/modals/_internal/components/priceInput/index.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var PriceInput = observer6(function PriceInput2({
+  chainId,
+  collectionAddress,
+  $price,
+  onPriceChange,
+  checkBalance,
+  secondCurrencyAsDefault
+}) {
+  const { address: accountAddress } = useAccount2();
+  const currencyDecimals = $price.currency.decimals.get() || 18;
+  const currencyAddress = $price.currency.contractAddress.get();
+  const { value, handlePriceChange } = usePriceInput({
+    price$: $price,
+    currencyDecimals,
+    onPriceChange
+  });
+  const { balanceError } = useBalanceCheck({
+    checkBalance,
+    price$: $price,
+    currencyAddress,
+    chainId: Number(chainId),
+    userAddress: accountAddress,
+    currencyDecimals
+  });
+  const renderBalanceError = useMemo(() => {
+    if (!balanceError) return null;
+    return /* @__PURE__ */ jsx14(
+      Text8,
+      {
+        color: "negative",
+        fontSize: "xsmall",
+        fontFamily: "body",
+        fontWeight: "semibold",
+        position: "absolute",
+        style: { bottom: "-13px" },
+        children: balanceError
+      }
+    );
+  }, [balanceError]);
+  const handleChange = useCallback(
+    (event) => {
+      handlePriceChange(event.target.value);
+    },
+    [handlePriceChange]
+  );
   return /* @__PURE__ */ jsxs7(Box9, { className: priceInputWrapper, position: "relative", children: [
     /* @__PURE__ */ jsx14(
       Box9,
@@ -1332,41 +1471,31 @@ var PriceInput = observer6(function PriceInput2({
         left: "2",
         display: "flex",
         alignItems: "center",
-        children: /* @__PURE__ */ jsx14(currencyImage_default, { $listingPrice })
+        children: /* @__PURE__ */ jsx14(currencyImage_default, { price$: $price })
       }
     ),
     /* @__PURE__ */ jsx14(
       NumericInput,
       {
-        name: "listingPrice",
+        name: "price-input",
         decimals: currencyDecimals,
         label: "Enter price",
         labelLocation: "top",
         controls: /* @__PURE__ */ jsx14(
           currencyOptionsSelect_default,
           {
-            selectedCurrency$: $listingPrice?.currency,
+            selectedCurrency$: $price.currency,
             collectionAddress,
-            chainId
+            chainId,
+            secondCurrencyAsDefault
           }
         ),
         value,
-        onChange: (event) => changeListingPrice(event.target.value),
+        onChange: handleChange,
         width: "full"
       }
     ),
-    balanceError && /* @__PURE__ */ jsx14(
-      Text8,
-      {
-        color: "negative",
-        fontSize: "xsmall",
-        fontFamily: "body",
-        fontWeight: "semibold",
-        position: "absolute",
-        style: { bottom: "-13px" },
-        children: balanceError
-      }
-    )
+    renderBalanceError
   ] });
 });
 var priceInput_default = PriceInput;
@@ -1454,7 +1583,7 @@ function QuantityInput({
               /* @__PURE__ */ jsx15(
                 IconButton2,
                 {
-                  disabled: !quantity || Number(quantity) <= 0,
+                  disabled: !quantity || Number(quantity) <= 1,
                   onClick: handleDecrement,
                   background: "buttonGlass",
                   size: "xs",
@@ -1464,6 +1593,7 @@ function QuantityInput({
               /* @__PURE__ */ jsx15(
                 IconButton2,
                 {
+                  disabled: !quantity || Number(quantity) >= Number(maxQuantity),
                   onClick: handleIncrement,
                   background: "buttonGlass",
                   size: "xs",
@@ -1595,6 +1725,7 @@ 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, {}) });
@@ -1612,7 +1743,7 @@ var Modal2 = observer7(() => {
     callbacks
   } = state;
   const steps$ = makeOfferModal$.steps;
-  const [insufficientBalance, setInsufficientBalance] = useState6(false);
+  const [insufficientBalance, setInsufficientBalance] = useState7(false);
   const {
     data: collectible,
     isLoading: collectableIsLoading,
@@ -1630,6 +1761,16 @@ var Modal2 = observer7(() => {
     chainId,
     collectionAddress
   });
+  const currencyOptions = useCurrencyOptions({ collectionAddress });
+  const {
+    data: currencies,
+    isLoading: currenciesLoading,
+    isError: currenciesIsError
+  } = useCurrencies({
+    chainId,
+    currencyOptions
+  });
+  const selectedCurrency = use$(makeOfferModal$.offerPrice.currency);
   const { isLoading, executeApproval, makeOffer } = useMakeOffer({
     offerInput: {
       contractType: collection?.type,
@@ -1651,7 +1792,7 @@ var Modal2 = observer7(() => {
     closeMainModal: () => makeOfferModal$.close(),
     steps$
   });
-  if (collectableIsLoading || collectionIsLoading) {
+  if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
     return /* @__PURE__ */ jsx17(
       LoadingModal,
       {
@@ -1662,7 +1803,7 @@ var Modal2 = observer7(() => {
       }
     );
   }
-  if (collectableIsError || collectionIsError) {
+  if (collectableIsError || collectionIsError || currenciesIsError) {
     return /* @__PURE__ */ jsx17(
       ErrorModal,
       {
@@ -1673,6 +1814,7 @@ var Modal2 = observer7(() => {
       }
     );
   }
+  const invalidCurrency = selectedCurrency?.contractAddress === zeroAddress && orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -1686,9 +1828,10 @@ 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 || offerPrice.amountRaw === "0"
+      disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity || invalidCurrency
     }
   ];
+  const secondCurrencyAsDefault = orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */ && currencies && currencies[0]?.contractAddress === zeroAddress;
   return /* @__PURE__ */ jsx17(Fragment, { children: /* @__PURE__ */ jsxs10(
     ActionModal,
     {
@@ -1712,8 +1855,9 @@ var Modal2 = observer7(() => {
           {
             chainId,
             collectionAddress,
-            $listingPrice: makeOfferModal$.offerPrice,
+            $price: makeOfferModal$.offerPrice,
             onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
+            secondCurrencyAsDefault,
             checkBalance: {
               enabled: true,
               callback: (state2) => setInsufficientBalance(state2)
@@ -1738,7 +1882,8 @@ var Modal2 = observer7(() => {
             price: offerPrice
           }
         ),
-        /* @__PURE__ */ jsx17(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+        /* @__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" })
       ]
     }
   ) });
@@ -1749,8 +1894,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 Box12, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
+import { Box as Box13, 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({
@@ -1771,7 +1916,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);
   }
@@ -1779,7 +1924,7 @@ function TransactionDetails({
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
   }
   return /* @__PURE__ */ jsxs11(
-    Box12,
+    Box13,
     {
       width: "full",
       display: "flex",
@@ -1787,7 +1932,7 @@ function TransactionDetails({
       alignItems: "center",
       children: [
         /* @__PURE__ */ jsx18(Text10, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", gap: "2", children: [
+        /* @__PURE__ */ jsxs11(Box13, { 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,
@@ -1801,7 +1946,7 @@ function TransactionDetails({
 }
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box13, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
+import { Box as Box14, 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({
@@ -1809,7 +1954,7 @@ function TransactionHeader({
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs12(Box13, { display: "flex", alignItems: "center", width: "full", children: [
+  return /* @__PURE__ */ jsxs12(Box14, { display: "flex", alignItems: "center", width: "full", children: [
     /* @__PURE__ */ jsx19(
       Text11,
       {
@@ -1879,7 +2024,7 @@ var sellModal$ = observable4(initialState3);
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/react/ui/modals/BuyModal/hooks/useFees.ts
-import { avalanche, optimism } from "viem/chains";
+import { avalanche as avalanche2, optimism as optimism2 } from "viem/chains";
 var useFees = ({
   chainId,
   collectionAddress
@@ -1891,7 +2036,7 @@ var useFees = ({
   const collection = marketplaceConfig?.collections.find(
     (collection2) => collection2.collectionAddress.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
   );
-  const avalancheOrOptimism = chainId === avalanche.id || chainId === optimism.id;
+  const avalancheOrOptimism = chainId === avalanche2.id || chainId === optimism2.id;
   const receiver = avalancheOrOptimism ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
   const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
   return {
@@ -1976,8 +2121,6 @@ var useTransactionSteps2 = ({
       if (!steps) return;
     }
   });
-  console.log("amount", amount);
-  console.log("receiver", receiver);
   const getSellSteps = async () => {
     if (!wallet) return;
     try {
@@ -2002,7 +2145,6 @@ var useTransactionSteps2 = ({
       } else {
         console.debug("onError callback not provided:", error);
       }
-      throw error;
     }
   };
   const executeApproval = async () => {
@@ -2023,18 +2165,16 @@ var useTransactionSteps2 = ({
       }
     } catch (error) {
       steps$.approval.isExecuting.set(false);
-      throw error;
     }
   };
   const sell = async () => {
     if (!wallet) return;
     try {
       steps$.transaction.isExecuting.set(true);
-      const transactionStep = await getSellSteps().then(
-        (steps) => steps?.find((step) => step.id === "sell" /* sell */)
-      );
-      const signatureStep = await getSellSteps().then(
-        (steps) => steps?.find((step) => step.id === "signEIP712" /* signEIP712 */)
+      const steps = await getSellSteps();
+      const transactionStep = steps?.find((step) => step.id === "sell" /* sell */);
+      const signatureStep = steps?.find(
+        (step) => step.id === "signEIP712" /* signEIP712 */
       );
       console.debug("transactionStep", transactionStep);
       console.debug("signatureStep", signatureStep);
@@ -2056,12 +2196,30 @@ var useTransactionSteps2 = ({
         collectibleId,
         hash,
         orderId,
-        callbacks
+        callbacks,
+        queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances]
       });
-      steps$.transaction.isExecuting.set(false);
+      if (hash) {
+        await waitForReceipt(hash);
+        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);
-      throw error;
+      steps$.transaction.exist.set(false);
+      if (callbacks?.onError && typeof callbacks.onError === "function") {
+        callbacks.onError(error);
+      }
     }
   };
   const executeTransaction = async ({
@@ -2096,7 +2254,7 @@ var useTransactionSteps2 = ({
 };
 
 // src/react/ui/modals/SellModal/hooks/useSell.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 var useSell = ({
   collectibleId,
   chainId,
@@ -2113,7 +2271,7 @@ var useSell = ({
     ordersData,
     marketplace
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -2267,7 +2425,7 @@ var Modal3 = observer8(() => {
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
 import {
-  Box as Box14,
+  Box as Box15,
   Button as Button3,
   CloseIcon as CloseIcon2,
   ExternalLinkIcon,
@@ -2332,7 +2490,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(Box14, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+      /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
         /* @__PURE__ */ jsx21(
           Text12,
           {
@@ -2349,7 +2507,7 @@ var SuccessfulPurchaseModal = observer9(() => {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
+        /* @__PURE__ */ jsxs14(Box15, { 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" }),
@@ -2372,7 +2530,7 @@ var SuccessfulPurchaseModal = observer9(() => {
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
+  return /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "2", children: [
     successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx21(
       Button3,
       {
@@ -2401,10 +2559,10 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx21(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx21(Box15, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
     return /* @__PURE__ */ jsxs14(
-      Box14,
+      Box15,
       {
         className: collectiblesGridItem,
         position: "relative",
@@ -2421,7 +2579,7 @@ function CollectiblesGrid({ collectibles }) {
             }
           ),
           showPlus && /* @__PURE__ */ jsx21(
-            Box14,
+            Box15,
             {
               position: "absolute",
               top: "0",
@@ -2506,7 +2664,7 @@ var initialState5 = {
 var transferModal$ = observable6(initialState5);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box15, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
+import { Box as Box16, 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";
@@ -2533,58 +2691,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 };
@@ -2625,9 +2769,9 @@ var EnterWalletAddressView = () => {
     transfer();
     transferModal$.view.set("followWalletInstructions");
   }
-  return /* @__PURE__ */ jsxs15(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs15(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
     /* @__PURE__ */ jsx22(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsxs15(Box15, { display: "flex", flexDirection: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs15(Box16, { display: "flex", flexDirection: "column", gap: "3", children: [
       /* @__PURE__ */ jsx22(
         AlertMessage,
         {
@@ -2687,13 +2831,13 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box16, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
+import { Box as Box17, 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(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs16(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
     /* @__PURE__ */ jsx23(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx23(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx23(Box17, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
@@ -2781,7 +2925,7 @@ var TransactionModalView = observer11(() => {
 });
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { Box as Box17 } from "@0xsequence/design-system";
+import { Box as Box18 } 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";
@@ -2838,10 +2982,10 @@ var createListingModal$ = observable8({
 });
 
 // src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx
-import { useEffect as useEffect7 } from "react";
+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();
@@ -2854,9 +2998,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(),
@@ -2877,7 +3022,7 @@ var useGetTokenApprovalData3 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    }
+    } : skipToken2
   });
   return {
     data,
@@ -2891,7 +3036,7 @@ var useTransactionSteps3 = ({
   listingInput,
   chainId,
   collectionAddress,
-  orderbookKind = "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  orderbookKind,
   callbacks,
   closeMainModal,
   steps$
@@ -2930,7 +3075,6 @@ var useTransactionSteps3 = ({
       } else {
         console.debug("onError callback not provided:", error);
       }
-      throw error;
     }
   };
   const executeApproval = async () => {
@@ -2951,7 +3095,6 @@ var useTransactionSteps3 = ({
       }
     } catch (error) {
       steps$.approval.isExecuting.set(false);
-      throw error;
     }
   };
   const createListing = async () => {
@@ -2985,12 +3128,36 @@ var useTransactionSteps3 = ({
         collectibleId: listingInput.listing.tokenId,
         hash,
         orderId,
-        callbacks
+        callbacks,
+        queriesToInvalidate: [
+          balanceQueries.all,
+          collectableKeys.lowestListings,
+          collectableKeys.listings,
+          collectableKeys.listingsCount,
+          collectableKeys.userBalances
+        ]
       });
-      steps$.transaction.isExecuting.set(false);
+      if (hash) {
+        await waitForReceipt(hash);
+        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);
-      throw error;
+      steps$.transaction.exist.set(false);
+      if (callbacks?.onError && typeof callbacks.onError === "function") {
+        callbacks.onError(error);
+      }
     }
   };
   const executeTransaction = async ({
@@ -3029,20 +3196,28 @@ 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
+    }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -3182,13 +3357,13 @@ var Modal5 = observer12(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+        /* @__PURE__ */ jsxs18(Box18, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
           /* @__PURE__ */ jsx25(
             priceInput_default,
             {
               chainId,
               collectionAddress,
-              $listingPrice: createListingModal$.listingPrice
+              $price: createListingModal$.listingPrice
             }
           ),
           listingPrice.amountRaw !== "0" && /* @__PURE__ */ jsx25(
@@ -3227,7 +3402,7 @@ var Modal5 = observer12(() => {
 });
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { use$ } from "@legendapp/state/react";
+import { use$ as use$2 } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable9 } from "@legendapp/state";
@@ -3242,7 +3417,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);
@@ -3254,17 +3431,25 @@ 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
 };
 var buyModal$ = observable9(initialState7);
 
 // src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { parseUnits as parseUnits5 } from "viem";
 function CheckoutModal({ buy, collectable, order }) {
-  useEffect8(() => {
+  useEffect9(() => {
     const executeBuy = () => {
       buy({
         orderId: order.orderId,
@@ -3279,15 +3464,12 @@ function CheckoutModal({ buy, collectable, order }) {
 }
 
 // src/react/ui/modals/BuyModal/modals/Modal1155.tsx
-import { Box as Box18, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { Box as Box19, 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
     });
@@ -3301,6 +3483,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,
       {
@@ -3312,6 +3497,7 @@ var ERC1155QuantityModal = observer13(
           {
             label: "Buy now",
             onClick: () => {
+              buyModal$.state.checkoutModalIsLoading.set(true);
               buy({
                 quantity: parseUnits6(
                   buyModal$.state.quantity.get(),
@@ -3321,10 +3507,12 @@ var ERC1155QuantityModal = observer13(
                 collectableDecimals: collectable.decimals || 0,
                 marketplace: order.marketplace
               });
-            }
+            },
+            disabled: buyModal$.state.checkoutModalIsLoading.get(),
+            pending: buyModal$.state.checkoutModalIsLoading.get()
           }
         ],
-        children: /* @__PURE__ */ jsxs19(Box18, { display: "flex", flexDirection: "column", gap: "4", children: [
+        children: /* @__PURE__ */ jsxs19(Box19, { display: "flex", flexDirection: "column", gap: "4", children: [
           /* @__PURE__ */ jsx26(
             QuantityInput,
             {
@@ -3334,11 +3522,11 @@ var ERC1155QuantityModal = observer13(
               maxQuantity: order.quantityRemaining
             }
           ),
-          /* @__PURE__ */ jsxs19(Box18, { display: "flex", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxs19(Box19, { display: "flex", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx26(Text15, { color: "text50", fontSize: "small", children: "Total Price" }),
-            /* @__PURE__ */ jsxs19(Box18, { display: "flex", alignItems: "center", gap: "2", children: [
+            /* @__PURE__ */ jsxs19(Box19, { 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) })
             ] })
           ] })
         ] })
@@ -3433,7 +3621,9 @@ var useBuyCollectable = ({
   collectionAddress,
   tokenId,
   callbacks,
-  priceCurrencyAddress
+  priceCurrencyAddress,
+  setCheckoutModalIsLoading,
+  setCheckoutModalLoaded
 }) => {
   const { openSelectPaymentModal } = useSelectPaymentModal();
   const config = useConfig();
@@ -3446,6 +3636,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,
@@ -3464,6 +3660,8 @@ var useBuyCollectable = ({
         additionalFees: [fees],
         walletType: "unknown" /* unknown */
       });
+      setCheckoutModalLoaded(true);
+      setCheckoutModalIsLoading(false);
       const step = steps[0];
       openSelectPaymentModal({
         chain: chainId,
@@ -3483,10 +3681,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();
         }
       });
@@ -3497,20 +3703,22 @@ var useBuyCollectable = ({
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var BuyModal = () => {
-  const isOpen = use$(buyModal$.isOpen);
+  const isOpen = use$2(buyModal$.isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx27(BuyModalContent, {});
 };
 var BuyModalContent = () => {
-  const chainId = String(use$(buyModal$.state.order.chainId));
-  const collectionAddress = use$(
+  const chainId = String(use$2(buyModal$.state.order.chainId));
+  const collectionAddress = use$2(
     buyModal$.state.order.collectionContractAddress
   );
-  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 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 setCheckoutModalIsLoading = use$2(buyModal$.setCheckoutModalIsLoading);
+  const setCheckoutModalLoaded = use$2(buyModal$.setCheckoutModalLoaded);
   const { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
     chainId: Number(chainId),
     collectionAddress,
@@ -3527,7 +3735,9 @@ var BuyModalContent = () => {
     collectionAddress,
     callbacks,
     tokenId: collectibleId,
-    priceCurrencyAddress: order.priceCurrencyAddress
+    priceCurrencyAddress: order.priceCurrencyAddress,
+    setCheckoutModalIsLoading,
+    setCheckoutModalLoaded
   });
   if (isLoading || !collection || !collectable || !checkoutOptions || buyIsLoading) {
     return /* @__PURE__ */ jsx27(
@@ -3619,12 +3829,12 @@ var useBuyModal = (callbacks) => {
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { useState as useState7 } from "react";
-import { Box as Box22, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
+import { useState as useState8 } from "react";
+import { Box as Box23, 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 Box19 } from "@0xsequence/design-system";
+import { Box as Box20 } from "@0xsequence/design-system";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var Svg = () => /* @__PURE__ */ jsxs21(
   "svg",
@@ -3651,7 +3861,7 @@ var Svg = () => /* @__PURE__ */ jsxs21(
   }
 );
 var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
-  Box19,
+  Box20,
   {
     as: Svg,
     className: iconVariants({
@@ -3776,12 +3986,12 @@ function ActionButtonBody({ label, onClick }) {
 }
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits4 } from "viem";
+import { Box as Box22, 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 Box20 } from "@0xsequence/design-system";
+import { Box as Box21 } from "@0xsequence/design-system";
 import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var Svg2 = () => /* @__PURE__ */ jsxs22(
   "svg",
@@ -3808,7 +4018,7 @@ var Svg2 = () => /* @__PURE__ */ jsxs22(
   }
 );
 var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
-  Box20,
+  Box21,
   {
     as: Svg2,
     className: iconVariants({
@@ -3840,7 +4050,7 @@ var Footer = ({
     name = `${name.substring(0, 17)}...`;
   }
   return /* @__PURE__ */ jsxs23(
-    Box21,
+    Box22,
     {
       display: "flex",
       flexDirection: "column",
@@ -3852,7 +4062,7 @@ var Footer = ({
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
         /* @__PURE__ */ jsxs23(
-          Box21,
+          Box22,
           {
             display: "flex",
             alignItems: "center",
@@ -3890,7 +4100,7 @@ var Footer = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
+        /* @__PURE__ */ jsxs23(Box22, { display: "flex", alignItems: "center", gap: "1", children: [
           listed && /* @__PURE__ */ jsx32(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
           /* @__PURE__ */ jsxs23(
             Text16,
@@ -3901,7 +4111,7 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                listed && `${formatUnits4(
+                listed && `${formatUnits5(
                   BigInt(lowestListingPriceAmount),
                   lowestListingCurrency.decimals
                 )} ${lowestListingCurrency.symbol}`,
@@ -3940,7 +4150,7 @@ var TokenTypeBalancePill = ({
 import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
   return /* @__PURE__ */ jsxs24(
-    Box22,
+    Box23,
     {
       className: collectibleCard,
       borderRadius: "md",
@@ -3955,7 +4165,7 @@ function CollectibleSkeleton() {
           }
         ),
         /* @__PURE__ */ jsxs24(
-          Box22,
+          Box23,
           {
             display: "flex",
             flexDirection: "column",
@@ -3987,7 +4197,7 @@ function CollectibleCard({
 }) {
   const { address: accountAddress } = useAccount7();
   const collectibleMetadata = lowestListing?.metadata;
-  const [imageLoadingError, setImageLoadingError] = useState7(false);
+  const [imageLoadingError, setImageLoadingError] = useState8(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
     chainId: String(chainId),
     collectionAddress,
@@ -4006,14 +4216,14 @@ function CollectibleCard({
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
   return /* @__PURE__ */ jsx33(
-    Box22,
+    Box23,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
       children: /* @__PURE__ */ jsx33(
-        Box22,
+        Box23,
         {
           display: "flex",
           flexDirection: "column",
@@ -4069,7 +4279,7 @@ function CollectibleCard({
               }
             ),
             accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx33(
-              Box22,
+              Box23,
               {
                 display: "flex",
                 alignItems: "center",
@@ -4108,4 +4318,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-2AMLJ2TA.js.map
+//# sourceMappingURL=chunk-SEISACMH.js.map