@0xsequence/marketplace-sdk 0.5.2 → 0.5.3

package/dist/{chunk-MSTTVFVQ.js → chunk-BVXIRVEC.js}

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-MKGSGTQC.js";
+} from "./chunk-Y7YTLAO2.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -33,7 +33,7 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-5NORRVPM.js";
+} from "./chunk-UZIAX32Y.js";
 import {
   AlertMessage,
   dateToUnixTime,
@@ -44,7 +44,6 @@ import {
   useConfig,
   useCurrencies,
   useCurrency,
-  useCurrencyOptions,
   useGenerateListingTransaction,
   useGenerateOfferTransaction,
   useGenerateSellTransaction,
@@ -55,14 +54,14 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-I37CRQ4S.js";
+} from "./chunk-H5YWG6WN.js";
 import {
   iconVariants
 } from "./chunk-TQWM4ER6.js";
 import {
   calculatePriceDifferencePercentage,
   truncateMiddle
-} from "./chunk-XP3WY5AX.js";
+} from "./chunk-BZD2LDJJ.js";
 import {
   getProviderEl
 } from "./chunk-YOKGP2EQ.js";
@@ -837,7 +836,8 @@ var useTransactionSteps = ({
       if (!transactionStep && !signatureStep) {
         throw new Error("No transaction or signature step found");
       }
-      let hash, orderId;
+      let hash;
+      let orderId;
       if (transactionStep) {
         hash = await executeTransaction({ transactionStep });
       }
@@ -925,7 +925,7 @@ var useMakeOffer = ({
 }) => {
   const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
   const collectionConfig = marketplaceConfig?.collections.find(
-    (c) => c.collectionAddress === collectionAddress
+    (c) => c.address === collectionAddress
   );
   orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData({
@@ -963,7 +963,7 @@ var useMakeOffer = ({
 };
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
-import { Box as Box4 } from "@0xsequence/design-system";
+import { Box as Box4, Text as Text5 } from "@0xsequence/design-system";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var ErrorModal = ({
   isOpen,
@@ -987,7 +987,7 @@ var ErrorModal = ({
         justifyContent: "center",
         alignItems: "center",
         padding: "4",
-        children: message || "Error loading item details"
+        children: /* @__PURE__ */ jsx5(Text5, { color: "text80", fontFamily: "body", children: message || "Error loading item details" })
       }
     )
   }
@@ -1024,7 +1024,7 @@ var LoadingModal = ({
 );
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { Box as Box6, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
+import { Box as Box6, Skeleton as Skeleton3, Text as Text6 } from "@0xsequence/design-system";
 import { observer as observer2 } from "@legendapp/state/react";
 import { addDays } from "date-fns";
 
@@ -1175,7 +1175,7 @@ var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
   }
   return /* @__PURE__ */ jsxs5(Box6, { width: "full", position: "relative", children: [
     /* @__PURE__ */ jsx9(
-      Text5,
+      Text6,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1235,7 +1235,7 @@ var ExpirationDateSelect = observer2(function ExpirationDateSelect2({
 var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text6 } from "@0xsequence/design-system";
+import { Text as Text7 } from "@0xsequence/design-system";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
@@ -1262,7 +1262,7 @@ function FloorPriceText({
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
   return /* @__PURE__ */ jsx10(
-    Text6,
+    Text7,
     {
       fontSize: "small",
       fontWeight: "medium",
@@ -1276,7 +1276,7 @@ function FloorPriceText({
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box8, NumericInput, Text as Text7 } from "@0xsequence/design-system";
+import { Box as Box8, NumericInput, Text as Text8 } from "@0xsequence/design-system";
 import { parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
@@ -1338,10 +1338,9 @@ var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
   includeNativeCurrency
 }) {
   const currency = selectedCurrency$.get();
-  const currencyOptions = useCurrencyOptions({ collectionAddress });
   const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
     chainId,
-    currencyOptions,
+    collectionAddress,
     includeNativeCurrency
   });
   useEffect4(() => {
@@ -1458,7 +1457,7 @@ function PriceInput({
       }
     ),
     balanceError && /* @__PURE__ */ jsx13(
-      Text7,
+      Text8,
       {
         color: "negative",
         fontSize: "xsmall",
@@ -1586,7 +1585,7 @@ function QuantityInput({
 }
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box10, Image as Image2, Skeleton as Skeleton5, Text as Text8 } from "@0xsequence/design-system";
+import { Box as Box10, Image as Image2, Skeleton as Skeleton5, Text as Text9 } from "@0xsequence/design-system";
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
@@ -1622,7 +1621,7 @@ function TokenPreview({
     ),
     /* @__PURE__ */ jsxs8(Box10, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
       /* @__PURE__ */ jsx15(
-        Text8,
+        Text9,
         {
           fontSize: "small",
           color: "text80",
@@ -1632,7 +1631,7 @@ function TokenPreview({
         }
       ),
       /* @__PURE__ */ jsx15(
-        Text8,
+        Text9,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -1739,14 +1738,12 @@ var Modal2 = observer4(() => {
     chainId,
     collectionAddress
   });
-  const currencyOptions = useCurrencyOptions({ collectionAddress });
   const {
     data: currencies,
     isLoading: currenciesLoading,
     isError: currenciesIsError
   } = useCurrencies({
     chainId,
-    currencyOptions,
     includeNativeCurrency: false
   });
   const { isLoading, executeApproval, makeOffer } = useMakeOffer({
@@ -1881,7 +1878,7 @@ import { Show as Show2, observer as observer5 } from "@legendapp/state/react";
 import { parseUnits as parseUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box11, Image as Image3, Skeleton as Skeleton6, Text as Text9 } from "@0xsequence/design-system";
+import { Box as Box11, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits3 } from "viem";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
@@ -1895,8 +1892,8 @@ function TransactionDetails({
 }) {
   const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
   const marketplaceFeePercentage = data?.collections.find(
-    (collection) => collection.collectionAddress === collectionAddress
-  )?.marketplaceFeePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+    (collection) => collection.address === collectionAddress
+  )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
   const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } = useRoyaltyPercentage({
     chainId,
     collectionAddress,
@@ -1918,10 +1915,10 @@ function TransactionDetails({
       justifyContent: "space-between",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsx17(Text9, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
+        /* @__PURE__ */ jsx17(Text10, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
         /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", gap: "2", children: [
           /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx17(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs10(Text9, { fontSize: "small", color: "text100", fontFamily: "body", children: [
+          priceLoading ? /* @__PURE__ */ jsx17(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs10(Text10, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             showPlaceholderPrice ? "0" : formattedAmount,
             " ",
             price.currency.symbol
@@ -1933,7 +1930,7 @@ function TransactionDetails({
 }
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box12, Image as Image4, Skeleton as Skeleton7, Text as Text10 } from "@0xsequence/design-system";
+import { Box as Box12, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function TransactionHeader({
@@ -1943,7 +1940,7 @@ function TransactionHeader({
 }) {
   return /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", width: "full", children: [
     /* @__PURE__ */ jsx18(
-      Text10,
+      Text11,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1955,7 +1952,7 @@ function TransactionHeader({
     ),
     /* @__PURE__ */ jsx18(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
     date && /* @__PURE__ */ jsxs11(
-      Text10,
+      Text11,
       {
         fontSize: "small",
         color: "text50",
@@ -2008,7 +2005,7 @@ var initialState3 = {
 var sellModal$ = observable3(initialState3);
 
 // src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx
-import { useQuery as useQuery3 } from "@tanstack/react-query";
+import { skipToken as skipToken3, useQuery as useQuery3 } from "@tanstack/react-query";
 
 // src/react/ui/modals/BuyModal/hooks/useFees.ts
 import { avalanche, optimism } from "viem/chains";
@@ -2021,15 +2018,13 @@ var useFees = ({
   const avalancheAndOptimismPlatformFeeRecipient = "0x400cdab4676c17aec07e8ec748a5fc3b674bca41";
   const { data: marketplaceConfig } = useMarketplaceConfig();
   const collection = marketplaceConfig?.collections.find(
-    (collection2) => collection2.collectionAddress.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
+    (collection2) => collection2.address.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
   );
   const avalancheOrOptimism = chainId === avalanche.id || chainId === optimism.id;
   const receiver = avalancheOrOptimism ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
   const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
   return {
-    amount: percentageToBPS(
-      collection?.marketplaceFeePercentage || defaultFee
-    ).toString(),
+    amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
     receiver
   };
 };
@@ -2045,7 +2040,7 @@ var useGetTokenApprovalData2 = (params) => {
   });
   const { data, isLoading, isSuccess } = useQuery3({
     queryKey: ["token-approval-data", params.ordersData],
-    queryFn: async () => {
+    queryFn: wallet ? async () => {
       const address = await wallet.address();
       const args = {
         collectionAddress: params.collectionAddress,
@@ -2072,7 +2067,7 @@ var useGetTokenApprovalData2 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    },
+    } : skipToken3,
     enabled: !!wallet && !!params.collectionAddress
   });
   return {
@@ -2165,7 +2160,8 @@ var useTransactionSteps2 = ({
       if (!transactionStep && !signatureStep) {
         throw new Error("No transaction or signature step found");
       }
-      let hash, orderId;
+      let hash;
+      let orderId;
       if (transactionStep) {
         hash = await executeTransaction({ transactionStep });
       }
@@ -2409,7 +2405,7 @@ import {
   ExternalLinkIcon,
   IconButton as IconButton3,
   Image as Image5,
-  Text as Text11
+  Text as Text12
 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
 import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
@@ -2470,7 +2466,7 @@ var SuccessfulPurchaseModal = observer6(() => {
     /* @__PURE__ */ jsxs13(Content3, { className: dialogContent.narrow, children: [
       /* @__PURE__ */ jsxs13(Box13, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
         /* @__PURE__ */ jsx20(
-          Text11,
+          Text12,
           {
             textAlign: "center",
             fontSize: "medium",
@@ -2486,10 +2482,10 @@ var SuccessfulPurchaseModal = observer6(() => {
           }
         ),
         /* @__PURE__ */ jsxs13(Box13, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx20(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
         /* @__PURE__ */ jsx20(SuccessfulPurchaseActions, {})
       ] }),
@@ -2570,7 +2566,7 @@ function CollectiblesGrid({ collectibles }) {
               background: "backgroundOverlay",
               backdropFilter: "blur",
               children: /* @__PURE__ */ jsxs13(
-                Text11,
+                Text12,
                 {
                   fontSize: "small",
                   fontWeight: "medium",
@@ -2642,7 +2638,7 @@ var initialState5 = {
 var transferModal$ = observable5(initialState5);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box14, Button as Button3, Text as Text12, TextInput } from "@0xsequence/design-system";
+import { Box as Box14, Button as Button3, Text as Text13, TextInput } from "@0xsequence/design-system";
 import { observable as observable6 } from "@legendapp/state";
 import { isAddress } from "viem";
 import { useAccount as useAccount2 } from "wagmi";
@@ -2752,7 +2748,7 @@ var EnterWalletAddressView = () => {
     transferModal$.view.set("followWalletInstructions");
   }
   return /* @__PURE__ */ jsxs14(Box14, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx21(Text12, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx21(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
     /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "3", children: [
       /* @__PURE__ */ jsx21(
         AlertMessage,
@@ -2783,7 +2779,7 @@ var EnterWalletAddressView = () => {
           }
         ),
         /* @__PURE__ */ jsx21(
-          Text12,
+          Text13,
           {
             color: insufficientBalance ? "negative" : "text50",
             fontSize: "small",
@@ -2813,12 +2809,12 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box15, Button as Button4, Text as Text13 } from "@0xsequence/design-system";
+import { Box as Box15, Button as Button4, Text as Text14 } from "@0xsequence/design-system";
 import { observer as observer7 } from "@legendapp/state/react";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var FollowWalletInstructionsView = observer7(() => {
   return /* @__PURE__ */ jsxs15(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx22(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx22(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
     /* @__PURE__ */ jsx22(Box15, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx22(
       AlertMessage,
       {
@@ -2973,7 +2969,7 @@ var createListingModal$ = observable7({
 import { useEffect as useEffect6 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
-import { skipToken as skipToken3, useQuery as useQuery4 } from "@tanstack/react-query";
+import { skipToken as skipToken4, useQuery as useQuery4 } from "@tanstack/react-query";
 import { useAccount as useAccount4 } from "wagmi";
 var ONE_DAY_IN_SECONDS2 = 60 * 60 * 24;
 var useGetTokenApprovalData3 = (params) => {
@@ -3012,7 +3008,7 @@ var useGetTokenApprovalData3 = (params) => {
       return {
         step: tokenApprovalStep
       };
-    } : skipToken3
+    } : skipToken4
   });
   return {
     data,
@@ -3100,7 +3096,8 @@ var useTransactionSteps3 = ({
       if (!transactionStep && !signatureStep) {
         throw new Error("No transaction or signature step found");
       }
-      let hash, orderId;
+      let hash;
+      let orderId;
       if (transactionStep) {
         hash = await executeTransaction({ transactionStep });
       }
@@ -3184,7 +3181,7 @@ var useCreateListing = ({
 }) => {
   const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
   const collectionConfig = marketplaceConfig?.collections.find(
-    (c) => c.collectionAddress === collectionAddress
+    (c) => c.address === collectionAddress
   );
   orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData3({
@@ -3246,14 +3243,13 @@ var Modal5 = observer9(() => {
     collectionAddress,
     collectibleId
   });
-  const currencyOptions = useCurrencyOptions({ collectionAddress });
   const {
     data: currencies,
     isLoading: currenciesLoading,
     isError: currenciesIsError
   } = useCurrencies({
     chainId,
-    currencyOptions,
+    collectionAddress,
     includeNativeCurrency: true
   });
   const {
@@ -3408,6 +3404,9 @@ var Modal5 = observer9(() => {
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { use$ as use$3 } from "@legendapp/state/react";
 
+// src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
+import { useSelectPaymentModal } from "@0xsequence/kit-checkout";
+
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable8 } from "@legendapp/state";
 var buyState = {
@@ -3415,7 +3414,8 @@ var buyState = {
   quantity: "1",
   invalidQuantity: false,
   checkoutModalIsLoading: false,
-  checkoutModalLoaded: false
+  checkoutModalLoaded: false,
+  purchaseProcessing: false
 };
 var initialState7 = {
   isOpen: false,
@@ -3429,7 +3429,8 @@ var initialState7 = {
       order: args.order,
       invalidQuantity: false,
       checkoutModalIsLoading: false,
-      checkoutModalLoaded: false
+      checkoutModalLoaded: false,
+      purchaseProcessing: false
     });
     buyModal$.callbacks.set(callbacks || defaultCallbacks);
     buyModal$.isOpen.set(true);
@@ -3446,10 +3447,180 @@ var initialState7 = {
   setCheckoutModalLoaded: (isLoaded) => {
     buyModal$.state.checkoutModalLoaded.set(isLoaded);
   },
+  setPurchaseProcessing: (isProcessing) => {
+    buyModal$.state.purchaseProcessing.set(isProcessing);
+  },
   callbacks: void 0
 };
 var buyModal$ = observable8(initialState7);
 
+// src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
+var useBuyCollectable = ({
+  chainId,
+  collectionAddress,
+  tokenId,
+  callbacks,
+  priceCurrencyAddress,
+  setCheckoutModalIsLoading,
+  setCheckoutModalLoaded
+}) => {
+  const { openSelectPaymentModal } = useSelectPaymentModal();
+  const config = useConfig();
+  const marketplaceClient = getMarketplaceClient(Number(chainId), config);
+  const fees = useFees({ chainId: Number(chainId), collectionAddress });
+  const { wallet, isLoading, isError } = useWallet();
+  if (isLoading) {
+    return { status: "loading", buy: null, isLoading, isError: false };
+  }
+  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,
+    isError,
+    buy: async (input) => {
+      setCheckoutModalIsLoading(true);
+      const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
+        collectionAddress,
+        buyer: await wallet.address(),
+        marketplace: input.marketplace,
+        ordersData: [
+          {
+            orderId: input.orderId,
+            quantity: input.quantity
+          }
+        ],
+        additionalFees: [fees],
+        walletType: "unknown" /* unknown */
+      });
+      setCheckoutModalLoaded(true);
+      setCheckoutModalIsLoading(false);
+      const step = steps3[0];
+      openSelectPaymentModal({
+        chain: chainId,
+        collectibles: [
+          {
+            tokenId,
+            quantity: input.quantity,
+            decimals: input.collectableDecimals
+          }
+        ],
+        currencyAddress: priceCurrencyAddress,
+        price: step.value,
+        targetContractAddress: step.to,
+        txData: step.data,
+        collectionAddress,
+        recipientAddress: await wallet.address(),
+        enableMainCurrencyPayment: true,
+        enableSwapPayments: !!input.checkoutOptions.swap,
+        creditCardProviders: input.checkoutOptions.nftCheckout || [],
+        onSuccess: (hash) => {
+          callbacks?.onSuccess?.({ hash });
+        },
+        onError: callbacks?.onError,
+        onClose: () => {
+          invalidateQueries2([
+            collectableKeys.listings,
+            collectableKeys.lowestListings,
+            collectableKeys.listingsCount,
+            collectableKeys.lists,
+            collectableKeys.userBalances,
+            balanceQueries.all,
+            balanceQueries.collectionBalanceDetails
+          ]);
+          buyModal$.close();
+        }
+      });
+    }
+  };
+};
+
+// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
+import { skipToken as skipToken5, useQuery as useQuery5 } from "@tanstack/react-query";
+var useCheckoutOptions = (input) => {
+  const config = useConfig();
+  const { wallet } = useWallet();
+  const fees = useFees({
+    chainId: input.chainId,
+    collectionAddress: input.collectionAddress
+  });
+  return useQuery5({
+    queryKey: [
+      "checkoutOptions",
+      input.chainId,
+      input.collectionAddress,
+      input.orderId,
+      input.marketplace
+    ],
+    queryFn: wallet ? async () => {
+      const marketplaceClient = getMarketplaceClient(input.chainId, config);
+      return marketplaceClient.checkoutOptionsMarketplace({
+        wallet: await wallet.address(),
+        orders: [
+          {
+            contractAddress: input.collectionAddress,
+            orderId: input.orderId,
+            marketplace: input.marketplace
+          }
+        ],
+        additionalFee: Number(fees.amount)
+      }).then((res) => res.options);
+    } : skipToken5,
+    enabled: !!wallet
+  });
+};
+
+// src/react/ui/modals/BuyModal/hooks/useLoadData.ts
+var useLoadData = ({
+  chainId,
+  collectionAddress,
+  collectibleId,
+  orderId,
+  marketplace
+}) => {
+  const {
+    data: collection,
+    isLoading: collectionLoading,
+    isError: collectionError
+  } = useCollection({
+    chainId,
+    collectionAddress
+  });
+  const {
+    data: collectable,
+    isLoading: collectableLoading,
+    isError: collectableError
+  } = useCollectible({
+    chainId: String(chainId),
+    collectionAddress,
+    collectibleId
+  });
+  const {
+    data: checkoutOptions,
+    isLoading: checkoutOptionsLoading,
+    isError: checkoutOptionsError
+  } = useCheckoutOptions({
+    chainId,
+    collectionAddress,
+    orderId,
+    marketplace
+  });
+  return {
+    collection,
+    collectable,
+    checkoutOptions,
+    isLoading: collectionLoading || collectableLoading || checkoutOptionsLoading,
+    isError: collectionError || collectableError || checkoutOptionsError
+  };
+};
+
 // src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
 import { useEffect as useEffect7 } from "react";
 import { parseUnits as parseUnits5 } from "viem";
@@ -3471,7 +3642,7 @@ function CheckoutModal({ buy, collectable, order }) {
 }
 
 // src/react/ui/modals/BuyModal/modals/Modal1155.tsx
-import { Box as Box17, Text as Text14, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { Box as Box17, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { observer as observer10 } from "@legendapp/state/react";
 import { formatUnits as formatUnits4, parseUnits as parseUnits6 } from "viem";
 import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -3484,7 +3655,7 @@ var ERC1155QuantityModal = observer10(
     const quantity = Number(buyModal$.state.quantity.get());
     const pricePerToken = order.priceAmount;
     const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
-    if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get()) {
+    if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get() && buyModal$.state.purchaseProcessing.get()) {
       return null;
     }
     return /* @__PURE__ */ jsx25(
@@ -3499,6 +3670,7 @@ var ERC1155QuantityModal = observer10(
             label: "Buy now",
             onClick: () => {
               buyModal$.state.checkoutModalIsLoading.set(true);
+              buyModal$.state.purchaseProcessing.set(true);
               buy({
                 quantity: parseUnits6(
                   buyModal$.state.quantity.get(),
@@ -3524,11 +3696,11 @@ var ERC1155QuantityModal = observer10(
             }
           ),
           /* @__PURE__ */ jsxs18(Box17, { display: "flex", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", fontFamily: "body", children: "Total Price" }),
-            /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: isCurrencyLoading || !currency ? /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", fontFamily: "body", children: "Loading..." }) }) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
+            /* @__PURE__ */ jsx25(Text15, { color: "text50", fontSize: "small", fontFamily: "body", children: "Total Price" }),
+            /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: isCurrencyLoading || !currency ? /* @__PURE__ */ jsx25(Box17, { display: "flex", alignItems: "center", gap: "2", children: /* @__PURE__ */ jsx25(Text15, { color: "text50", fontSize: "small", fontFamily: "body", children: "Loading..." }) }) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
               currency.imageUrl && /* @__PURE__ */ jsx25(TokenImage2, { src: currency.imageUrl, size: "xs" }),
               /* @__PURE__ */ jsx25(
-                Text14,
+                Text15,
                 {
                   color: "text100",
                   fontSize: "small",
@@ -3537,7 +3709,7 @@ var ERC1155QuantityModal = observer10(
                   children: formatUnits4(BigInt(totalPrice), currency.decimals || 0)
                 }
               ),
-              /* @__PURE__ */ jsx25(Text14, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
+              /* @__PURE__ */ jsx25(Text15, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
             ] }) })
           ] })
         ] })
@@ -3546,174 +3718,6 @@ var ERC1155QuantityModal = observer10(
   }
 );
 
-// src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts
-import { skipToken as skipToken4, useQuery as useQuery5 } from "@tanstack/react-query";
-var useCheckoutOptions = (input) => {
-  const config = useConfig();
-  const { wallet } = useWallet();
-  const fees = useFees({
-    chainId: input.chainId,
-    collectionAddress: input.collectionAddress
-  });
-  return useQuery5({
-    queryKey: [
-      "checkoutOptions",
-      input.chainId,
-      input.collectionAddress,
-      input.orderId,
-      input.marketplace
-    ],
-    queryFn: wallet ? async () => {
-      const marketplaceClient = getMarketplaceClient(input.chainId, config);
-      return marketplaceClient.checkoutOptionsMarketplace({
-        wallet: await wallet.address(),
-        orders: [
-          {
-            contractAddress: input.collectionAddress,
-            orderId: input.orderId,
-            marketplace: input.marketplace
-          }
-        ],
-        additionalFee: Number(fees.amount)
-      }).then((res) => res.options);
-    } : skipToken4,
-    enabled: !!wallet
-  });
-};
-
-// src/react/ui/modals/BuyModal/hooks/useLoadData.ts
-var useLoadData = ({
-  chainId,
-  collectionAddress,
-  collectibleId,
-  orderId,
-  marketplace
-}) => {
-  const {
-    data: collection,
-    isLoading: collectionLoading,
-    isError: collectionError
-  } = useCollection({
-    chainId,
-    collectionAddress
-  });
-  const {
-    data: collectable,
-    isLoading: collectableLoading,
-    isError: collectableError
-  } = useCollectible({
-    chainId: String(chainId),
-    collectionAddress,
-    collectibleId
-  });
-  const {
-    data: checkoutOptions,
-    isLoading: checkoutOptionsLoading,
-    isError: checkoutOptionsError
-  } = useCheckoutOptions({
-    chainId,
-    collectionAddress,
-    orderId,
-    marketplace
-  });
-  return {
-    collection,
-    collectable,
-    checkoutOptions,
-    isLoading: collectionLoading || collectableLoading || checkoutOptionsLoading,
-    isError: collectionError || collectableError || checkoutOptionsError
-  };
-};
-
-// src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
-import { useSelectPaymentModal } from "@0xsequence/kit-checkout";
-var useBuyCollectable = ({
-  chainId,
-  collectionAddress,
-  tokenId,
-  callbacks,
-  priceCurrencyAddress,
-  setCheckoutModalIsLoading,
-  setCheckoutModalLoaded
-}) => {
-  const { openSelectPaymentModal } = useSelectPaymentModal();
-  const config = useConfig();
-  const marketplaceClient = getMarketplaceClient(Number(chainId), config);
-  const fees = useFees({ chainId: Number(chainId), collectionAddress });
-  const { wallet, isLoading, isError } = useWallet();
-  if (isLoading) {
-    return { status: "loading", buy: null, isLoading, isError: false };
-  }
-  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,
-    isError,
-    buy: async (input) => {
-      setCheckoutModalIsLoading(true);
-      const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
-        collectionAddress,
-        buyer: await wallet.address(),
-        marketplace: input.marketplace,
-        ordersData: [
-          {
-            orderId: input.orderId,
-            quantity: input.quantity
-          }
-        ],
-        additionalFees: [fees],
-        walletType: "unknown" /* unknown */
-      });
-      setCheckoutModalLoaded(true);
-      setCheckoutModalIsLoading(false);
-      const step = steps3[0];
-      openSelectPaymentModal({
-        chain: chainId,
-        collectibles: [
-          {
-            tokenId,
-            quantity: input.quantity,
-            decimals: input.collectableDecimals
-          }
-        ],
-        currencyAddress: priceCurrencyAddress,
-        price: step.value,
-        targetContractAddress: step.to,
-        txData: step.data,
-        collectionAddress,
-        recipientAddress: await wallet.address(),
-        enableMainCurrencyPayment: true,
-        enableSwapPayments: !!input.checkoutOptions.swap,
-        creditCardProviders: input.checkoutOptions.nftCheckout || [],
-        onSuccess: (hash) => {
-          callbacks?.onSuccess?.({ hash });
-        },
-        onError: callbacks?.onError,
-        onClose: () => {
-          invalidateQueries2([
-            collectableKeys.listings,
-            collectableKeys.lowestListings,
-            collectableKeys.listingsCount,
-            collectableKeys.lists,
-            collectableKeys.userBalances,
-            balanceQueries.all,
-            balanceQueries.collectionBalanceDetails
-          ]);
-          buyModal$.close();
-        }
-      });
-    }
-  };
-};
-
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var BuyModal = () => {
@@ -3756,6 +3760,7 @@ var BuyModalContent = () => {
   const buyAction = (input) => {
     if (buy && checkoutOptions) {
       buy({ ...input, checkoutOptions });
+      buyModal$.state.purchaseProcessing.set(true);
     } else {
       console.error("buy is null or undefined");
     }
@@ -3782,6 +3787,9 @@ var BuyModalContent = () => {
       }
     );
   }
+  if (buyModal$.state.purchaseProcessing.get()) {
+    return null;
+  }
   return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx26(
     CheckoutModal,
     {
@@ -4239,7 +4247,7 @@ var ActionButton = observer12(
 );
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
+import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits5 } from "viem";
 
 // src/react/ui/icons/Bell.tsx
@@ -4283,6 +4291,11 @@ var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+var formatPrice = (amount, currency) => {
+  const formattedPrice = formatUnits5(BigInt(amount), currency.decimals);
+  const numericPrice = Number.parseFloat(formattedPrice);
+  return numericPrice < 1e-4 ? `< 0.0001 ${currency.symbol}` : `${formattedPrice} ${currency.symbol}`;
+};
 var Footer = ({
   name,
   type,
@@ -4321,7 +4334,7 @@ var Footer = ({
             width: "full",
             children: [
               /* @__PURE__ */ jsx35(
-                Text15,
+                Text16,
                 {
                   color: "text100",
                   fontSize: "normal",
@@ -4354,7 +4367,7 @@ var Footer = ({
         /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
           listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx35(Image6, { src: lowestListingCurrency.imageUrl, width: "3", height: "3" }),
           /* @__PURE__ */ jsxs23(
-            Text15,
+            Text16,
             {
               color: listed ? "text100" : "text50",
               fontSize: "small",
@@ -4362,10 +4375,7 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                listed && `${formatUnits5(
-                  BigInt(lowestListingPriceAmount),
-                  lowestListingCurrency.decimals
-                )} ${lowestListingCurrency.symbol}`,
+                listed && formatPrice(lowestListingPriceAmount, lowestListingCurrency),
                 !listed && "Not listed yet"
               ]
             }
@@ -4382,7 +4392,7 @@ var TokenTypeBalancePill = ({
 }) => {
   const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
   return /* @__PURE__ */ jsx35(
-    Text15,
+    Text16,
     {
       background: "backgroundSecondary",
       color: "text80",
@@ -4578,4 +4588,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-MSTTVFVQ.js.map
+//# sourceMappingURL=chunk-BVXIRVEC.js.map