@0xsequence/marketplace-sdk 0.4.3 → 0.4.4

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

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-VYSWBIWC.js";
+} from "./chunk-J4TRSLTB.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -53,13 +53,13 @@ import {
   useMarketplaceConfig,
   useRoyaltyPercentage,
   useTransferTokens
-} from "./chunk-ST6RH2IB.js";
+} from "./chunk-GLOIEUWC.js";
 import {
   AlertMessage,
   switchChainModal_default,
   useSwitchChainModal,
   useWallet
-} from "./chunk-YZE7RXC2.js";
+} from "./chunk-LHN6EBLM.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
@@ -68,6 +68,9 @@ import {
   getPublicRpcClient,
   truncateMiddle
 } from "./chunk-4VS5NKDD.js";
+import {
+  getProviderEl
+} from "./chunk-ZEKRTFBU.js";
 import {
   balanceQueries,
   getMarketplaceClient,
@@ -100,9 +103,9 @@ 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/useGetTokenApproval.tsx
 import { useQuery } from "@tanstack/react-query";
@@ -595,7 +598,7 @@ 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);
         }
@@ -643,7 +646,7 @@ var TransactionStatusModal = observer3(() => {
     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(
@@ -773,11 +776,12 @@ var useTransactionSteps = ({
     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);
@@ -801,9 +805,27 @@ var useTransactionSteps = ({
         orderId,
         callbacks
       });
-      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);
+      steps$.transaction.exist.set(false);
+      if (callbacks?.onError && typeof callbacks.onError === "function") {
+        callbacks.onError(error);
+      }
       throw error;
     }
   };
@@ -1169,20 +1191,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 +1216,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 +1247,7 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
+  secondCurrencyAsDefault,
   selectedCurrency$
 }) {
   const currency = selectedCurrency$.get();
@@ -1238,7 +1258,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 +1295,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 +1366,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 +1435,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;
@@ -1595,6 +1688,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 +1706,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 +1724,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 +1755,7 @@ var Modal2 = observer7(() => {
     closeMainModal: () => makeOfferModal$.close(),
     steps$
   });
-  if (collectableIsLoading || collectionIsLoading) {
+  if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
     return /* @__PURE__ */ jsx17(
       LoadingModal,
       {
@@ -1662,7 +1766,7 @@ var Modal2 = observer7(() => {
       }
     );
   }
-  if (collectableIsError || collectionIsError) {
+  if (collectableIsError || collectionIsError || currenciesIsError) {
     return /* @__PURE__ */ jsx17(
       ErrorModal,
       {
@@ -1673,6 +1777,7 @@ var Modal2 = observer7(() => {
       }
     );
   }
+  const invalidCurrency = selectedCurrency?.contractAddress === zeroAddress && orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -1686,9 +1791,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 +1818,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 +1845,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,7 +1857,7 @@ 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 { Box as Box13, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits2 } from "viem";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
@@ -1779,7 +1887,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 +1895,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 +1909,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 +1917,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,
       {
@@ -1976,8 +2084,6 @@ var useTransactionSteps2 = ({
       if (!steps) return;
     }
   });
-  console.log("amount", amount);
-  console.log("receiver", receiver);
   const getSellSteps = async () => {
     if (!wallet) return;
     try {
@@ -2030,11 +2136,10 @@ var useTransactionSteps2 = ({
     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);
@@ -2058,9 +2163,27 @@ var useTransactionSteps2 = ({
         orderId,
         callbacks
       });
-      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);
+      steps$.transaction.exist.set(false);
+      if (callbacks?.onError && typeof callbacks.onError === "function") {
+        callbacks.onError(error);
+      }
       throw error;
     }
   };
@@ -2096,7 +2219,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 +2236,7 @@ var useSell = ({
     ordersData,
     marketplace
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -2267,7 +2390,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 +2455,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 +2472,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 +2495,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 +2524,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 +2544,7 @@ function CollectiblesGrid({ collectibles }) {
             }
           ),
           showPlus && /* @__PURE__ */ jsx21(
-            Box14,
+            Box15,
             {
               position: "absolute",
               top: "0",
@@ -2506,7 +2629,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";
@@ -2625,9 +2748,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 +2810,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 +2904,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,7 +2961,7 @@ 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";
@@ -2987,9 +3110,27 @@ var useTransactionSteps3 = ({
         orderId,
         callbacks
       });
-      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);
+      steps$.transaction.exist.set(false);
+      if (callbacks?.onError && typeof callbacks.onError === "function") {
+        callbacks.onError(error);
+      }
       throw error;
     }
   };
@@ -3042,7 +3183,7 @@ var useCreateListing = ({
     contractType: listingInput.contractType,
     orderbook: orderbookKind
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -3182,13 +3323,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 +3368,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";
@@ -3261,10 +3402,10 @@ var initialState7 = {
 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,7 +3420,7 @@ 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 { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -3324,7 +3465,7 @@ var ERC1155QuantityModal = observer13(
             }
           }
         ],
-        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,9 +3475,9 @@ 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) })
             ] })
@@ -3483,7 +3624,7 @@ var useBuyCollectable = ({
         enableMainCurrencyPayment: true,
         enableSwapPayments: !!input.checkoutOptions.swap,
         creditCardProviders: input.checkoutOptions.nftCheckout || [],
-        onSuccess: (hash) => callbacks?.onSuccess?.(hash),
+        onSuccess: (hash) => callbacks?.onSuccess?.({ hash }),
         onError: callbacks?.onError,
         onClose: () => {
           console.log("onClose");
@@ -3497,20 +3638,20 @@ 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 { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
     chainId: Number(chainId),
     collectionAddress,
@@ -3619,12 +3760,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 +3792,7 @@ var Svg = () => /* @__PURE__ */ jsxs21(
   }
 );
 var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
-  Box19,
+  Box20,
   {
     as: Svg,
     className: iconVariants({
@@ -3776,12 +3917,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 { Box as Box22, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits4 } 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 +3949,7 @@ var Svg2 = () => /* @__PURE__ */ jsxs22(
   }
 );
 var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
-  Box20,
+  Box21,
   {
     as: Svg2,
     className: iconVariants({
@@ -3840,7 +3981,7 @@ var Footer = ({
     name = `${name.substring(0, 17)}...`;
   }
   return /* @__PURE__ */ jsxs23(
-    Box21,
+    Box22,
     {
       display: "flex",
       flexDirection: "column",
@@ -3852,7 +3993,7 @@ var Footer = ({
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
         /* @__PURE__ */ jsxs23(
-          Box21,
+          Box22,
           {
             display: "flex",
             alignItems: "center",
@@ -3890,7 +4031,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,
@@ -3940,7 +4081,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 +4096,7 @@ function CollectibleSkeleton() {
           }
         ),
         /* @__PURE__ */ jsxs24(
-          Box22,
+          Box23,
           {
             display: "flex",
             flexDirection: "column",
@@ -3987,7 +4128,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 +4147,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 +4210,7 @@ function CollectibleCard({
               }
             ),
             accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx33(
-              Box22,
+              Box23,
               {
                 display: "flex",
                 alignItems: "center",
@@ -4108,4 +4249,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-2AMLJ2TA.js.map
+//# sourceMappingURL=chunk-6XUCLBZC.js.map