@0xsequence/marketplace-sdk 0.4.5 → 0.4.6

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

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-CKOWM2ZR.js";
+} from "./chunk-RD7HPANB.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -46,20 +46,19 @@ import {
   useGenerateListingTransaction,
   useGenerateOfferTransaction,
   useGenerateSellTransaction,
-  useGetReceiptFromHash,
   useHighestOffer,
   useListBalances,
   useLowestListing,
   useMarketplaceConfig,
   useRoyaltyPercentage,
   useTransferTokens
-} from "./chunk-KZGDOIZY.js";
+} from "./chunk-36NGHJH5.js";
 import {
   AlertMessage,
   switchChainModal_default,
   useSwitchChainModal,
   useWallet
-} from "./chunk-KL5JPUPS.js";
+} from "./chunk-3C2MT5TM.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
@@ -67,20 +66,20 @@ import {
   calculatePriceDifferencePercentage,
   getPublicRpcClient,
   truncateMiddle
-} from "./chunk-FT3J32ZV.js";
+} from "./chunk-LTHX6RXH.js";
 import {
   getProviderEl
-} from "./chunk-ZEKRTFBU.js";
+} from "./chunk-DNVERQ5J.js";
 import {
   balanceQueries,
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-KILOCWY2.js";
+} from "./chunk-QVOUL555.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
-} from "./chunk-YUETNNZQ.js";
+} from "./chunk-WM4RGBFQ.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer14 } from "@legendapp/state/react";
@@ -104,9 +103,9 @@ var AccountModal = observer(function AccountModal2() {
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Show, observer as observer7, use$ } from "@legendapp/state/react";
+import { Show, observer as observer7 } from "@legendapp/state/react";
 import { useState as useState7 } from "react";
-import { parseUnits as parseUnits2, zeroAddress } from "viem";
+import { parseUnits as parseUnits2 } from "viem";
 
 // src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx
 import { useEffect as useEffect3 } from "react";
@@ -122,7 +121,7 @@ var useGetTokenApprovalData = (params) => {
     tokenId: params.tokenId,
     quantity: "1",
     currencyAddress: params.currencyAddress,
-    pricePerToken: "100000",
+    pricePerToken: "1",
     expiry: String(Number(dateToUnixTime(/* @__PURE__ */ new Date())) + ONE_DAY_IN_SECONDS)
   };
   const isEnabled = wallet && params.query?.enabled !== false;
@@ -159,9 +158,6 @@ 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,
@@ -744,7 +740,6 @@ var useTransactionSteps = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { generateOfferTransactionAsync, isPending: generatingSteps } = useGenerateOfferTransaction({
     chainId,
     onSuccess: (steps) => {
@@ -790,11 +785,9 @@ var useTransactionSteps = ({
         Number(chainId),
         approvalStep
       );
-      const receipt = await waitForReceipt(hash);
-      if (receipt) {
-        steps$.approval.isExecuting.set(false);
-        steps$.approval.exist.set(false);
-      }
+      await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+      steps$.approval.isExecuting.set(false);
+      steps$.approval.exist.set(false);
     } catch (error) {
       steps$.approval.isExecuting.set(false);
     }
@@ -844,19 +837,13 @@ var useTransactionSteps = ({
         }
       });
       if (hash) {
-        await waitForReceipt(hash);
+        await wallet.handleConfirmTransactionStep(hash, Number(chainId));
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ hash });
-        }
       }
       if (orderId) {
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ orderId });
-        }
       }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
@@ -907,13 +894,21 @@ var useMakeOffer = ({
   closeMainModal,
   steps$
 }) => {
+  const { data: marketplaceConfig, isLoading: marketplaceIsLoading } = useMarketplaceConfig();
+  const collectionConfig = marketplaceConfig?.collections.find(
+    (c) => c.collectionAddress === collectionAddress
+  );
+  orderbookKind = orderbookKind ?? collectionConfig?.destinationMarketplace ?? "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
   const { data: tokenApproval, isLoading: tokenApprovalIsLoading } = useGetTokenApprovalData({
     chainId,
     tokenId: offerInput.offer.tokenId,
     collectionAddress,
     currencyAddress: offerInput.offer.currencyAddress,
     contractType: offerInput.contractType,
-    orderbook: orderbookKind
+    orderbook: orderbookKind,
+    query: {
+      enabled: !marketplaceIsLoading
+    }
   });
   useEffect3(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
@@ -945,7 +940,8 @@ var ErrorModal = ({
   isOpen,
   chainId,
   onClose,
-  title
+  title,
+  message
 }) => /* @__PURE__ */ jsx6(
   ActionModal,
   {
@@ -954,7 +950,7 @@ var ErrorModal = ({
     onClose,
     title,
     ctas: [],
-    children: /* @__PURE__ */ jsx6(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" })
+    children: /* @__PURE__ */ jsx6(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: message || "Error loading item details" })
   }
 );
 
@@ -1072,6 +1068,11 @@ function CalendarPopover({
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
 import { useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var setToEndOfDay = (date) => {
+  const endOfDay = new Date(date);
+  endOfDay.setHours(23, 59, 59, 999);
+  return endOfDay;
+};
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -1113,7 +1114,8 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
     if (!presetRange) {
       return;
     }
-    const newDate = addDays(/* @__PURE__ */ new Date(), presetRange.offset);
+    const baseDate = /* @__PURE__ */ new Date();
+    const newDate = presetRange.value === "today" ? setToEndOfDay(baseDate) : addDays(baseDate, presetRange.offset);
     $date.set(newDate);
   }
   function handleDateValueChange(date) {
@@ -1284,13 +1286,15 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   secondCurrencyAsDefault,
-  selectedCurrency$
+  selectedCurrency$,
+  includeNativeCurrency
 }) {
   const currency = selectedCurrency$.get();
   const currencyOptions = useCurrencyOptions({ collectionAddress });
   const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
     chainId,
-    currencyOptions
+    currencyOptions,
+    includeNativeCurrency
   });
   useEffect4(() => {
     if (currencies && currencies.length > 0 && !selectedCurrency$.get()?.contractAddress) {
@@ -1423,7 +1427,8 @@ var PriceInput = observer6(function PriceInput2({
   $price,
   onPriceChange,
   checkBalance,
-  secondCurrencyAsDefault
+  secondCurrencyAsDefault,
+  includeNativeCurrency
 }) {
   const { address: accountAddress } = useAccount2();
   const currencyDecimals = $price.currency.decimals.get() || 18;
@@ -1487,7 +1492,8 @@ var PriceInput = observer6(function PriceInput2({
             selectedCurrency$: $price.currency,
             collectionAddress,
             chainId,
-            secondCurrencyAsDefault
+            secondCurrencyAsDefault,
+            includeNativeCurrency
           }
         ),
         value,
@@ -1681,7 +1687,7 @@ var initialState2 = {
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
-  orderbookKind: "reservoir" /* reservoir */,
+  orderbookKind: void 0,
   callbacks: void 0,
   offerPrice: {
     amountRaw: "0",
@@ -1725,7 +1731,6 @@ var makeOfferModal$ = observable3({
 });
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Box as Box12 } from "@0xsequence/design-system";
 import { Fragment, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var MakeOfferModal = () => {
   return /* @__PURE__ */ jsx17(Show, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx17(Modal2, {}) });
@@ -1768,9 +1773,9 @@ var Modal2 = observer7(() => {
     isError: currenciesIsError
   } = useCurrencies({
     chainId,
-    currencyOptions
+    currencyOptions,
+    includeNativeCurrency: false
   });
-  const selectedCurrency = use$(makeOfferModal$.offerPrice.currency);
   const { isLoading, executeApproval, makeOffer } = useMakeOffer({
     offerInput: {
       contractType: collection?.type,
@@ -1814,7 +1819,18 @@ var Modal2 = observer7(() => {
       }
     );
   }
-  const invalidCurrency = selectedCurrency?.contractAddress === zeroAddress && orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
+  if (!currencies || currencies.length === 0) {
+    return /* @__PURE__ */ jsx17(
+      ErrorModal,
+      {
+        isOpen: makeOfferModal$.isOpen.get(),
+        chainId: Number(chainId),
+        onClose: makeOfferModal$.close,
+        title: "Make an offer",
+        message: "No ERC-20s are configured for the marketplace, contact the marketplace owners"
+      }
+    );
+  }
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -1828,10 +1844,9 @@ var Modal2 = observer7(() => {
       label: "Make offer",
       onClick: () => makeOffer(),
       pending: steps$.transaction.isExecuting.get(),
-      disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity || invalidCurrency
+      disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity
     }
   ];
-  const secondCurrencyAsDefault = orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */ && currencies && currencies[0]?.contractAddress === zeroAddress;
   return /* @__PURE__ */ jsx17(Fragment, { children: /* @__PURE__ */ jsxs10(
     ActionModal,
     {
@@ -1857,7 +1872,7 @@ var Modal2 = observer7(() => {
             collectionAddress,
             $price: makeOfferModal$.offerPrice,
             onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
-            secondCurrencyAsDefault,
+            includeNativeCurrency: false,
             checkBalance: {
               enabled: true,
               callback: (state2) => setInsufficientBalance(state2)
@@ -1882,8 +1897,7 @@ var Modal2 = observer7(() => {
             price: offerPrice
           }
         ),
-        /* @__PURE__ */ jsx17(expirationDateSelect_default, { $date: makeOfferModal$.expiry }),
-        invalidCurrency && /* @__PURE__ */ jsx17(Box12, { color: "negative", fontSize: "small", children: "Native currency offers are not supported on this marketplace. Please select another currency to continue" })
+        /* @__PURE__ */ jsx17(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
       ]
     }
   ) });
@@ -1894,7 +1908,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 Box13, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
+import { Box as Box12, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits3 } from "viem";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
@@ -1924,7 +1938,7 @@ function TransactionDetails({
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
   }
   return /* @__PURE__ */ jsxs11(
-    Box13,
+    Box12,
     {
       width: "full",
       display: "flex",
@@ -1932,7 +1946,7 @@ function TransactionDetails({
       alignItems: "center",
       children: [
         /* @__PURE__ */ jsx18(Text10, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs11(Box13, { display: "flex", alignItems: "center", gap: "2", children: [
+        /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", gap: "2", children: [
           /* @__PURE__ */ jsx18(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
           priceLoading ? /* @__PURE__ */ jsx18(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs11(Text10, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             showPlaceholderPrice ? "0" : formattedAmount,
@@ -1946,7 +1960,7 @@ function TransactionDetails({
 }
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box14, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
+import { Box as Box13, Image as Image4, Skeleton as Skeleton7, Text as Text11 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function TransactionHeader({
@@ -1954,7 +1968,7 @@ function TransactionHeader({
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs12(Box14, { display: "flex", alignItems: "center", width: "full", children: [
+  return /* @__PURE__ */ jsxs12(Box13, { display: "flex", alignItems: "center", width: "full", children: [
     /* @__PURE__ */ jsx19(
       Text11,
       {
@@ -2024,7 +2038,7 @@ var sellModal$ = observable4(initialState3);
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/react/ui/modals/BuyModal/hooks/useFees.ts
-import { avalanche as avalanche2, optimism as optimism2 } from "viem/chains";
+import { avalanche, optimism } from "viem/chains";
 var useFees = ({
   chainId,
   collectionAddress
@@ -2036,7 +2050,7 @@ var useFees = ({
   const collection = marketplaceConfig?.collections.find(
     (collection2) => collection2.collectionAddress.toLowerCase() === collectionAddress.toLowerCase() && chainId === Number(collection2.chainId)
   );
-  const avalancheOrOptimism = chainId === avalanche2.id || chainId === optimism2.id;
+  const avalancheOrOptimism = chainId === avalanche.id || chainId === optimism.id;
   const receiver = avalancheOrOptimism ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
   const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
   return {
@@ -2110,7 +2124,6 @@ var useTransactionSteps2 = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { amount, receiver } = useFees({
     chainId: Number(chainId),
     collectionAddress
@@ -2158,11 +2171,9 @@ var useTransactionSteps2 = ({
         Number(chainId),
         approvalStep
       );
-      const receipt = await waitForReceipt(hash);
-      if (receipt) {
-        steps$.approval.isExecuting.set(false);
-        steps$.approval.exist.set(false);
-      }
+      await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+      steps$.approval.isExecuting.set(false);
+      steps$.approval.exist.set(false);
     } catch (error) {
       steps$.approval.isExecuting.set(false);
     }
@@ -2200,19 +2211,13 @@ var useTransactionSteps2 = ({
         queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances]
       });
       if (hash) {
-        await waitForReceipt(hash);
+        await wallet.handleConfirmTransactionStep(hash, Number(chainId));
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ hash });
-        }
       }
       if (orderId) {
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ orderId });
-        }
       }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
@@ -2425,7 +2430,7 @@ var Modal3 = observer8(() => {
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
 import {
-  Box as Box15,
+  Box as Box14,
   Button as Button3,
   CloseIcon as CloseIcon2,
   ExternalLinkIcon,
@@ -2490,7 +2495,7 @@ var SuccessfulPurchaseModal = observer9(() => {
   return /* @__PURE__ */ jsx21(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs14(Portal3, { children: [
     /* @__PURE__ */ jsx21(Overlay2, { className: dialogOverlay }),
     /* @__PURE__ */ jsxs14(Content3, { className: dialogContent.narrow, children: [
-      /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+      /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
         /* @__PURE__ */ jsx21(
           Text12,
           {
@@ -2507,7 +2512,7 @@ var SuccessfulPurchaseModal = observer9(() => {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs14(Box15, { display: "flex", alignItems: "center", gap: "1", children: [
+        /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
           /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
           /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
           /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
@@ -2530,7 +2535,7 @@ var SuccessfulPurchaseModal = observer9(() => {
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "2", children: [
+  return /* @__PURE__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
     successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx21(
       Button3,
       {
@@ -2559,10 +2564,10 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx21(Box15, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx21(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
     return /* @__PURE__ */ jsxs14(
-      Box15,
+      Box14,
       {
         className: collectiblesGridItem,
         position: "relative",
@@ -2579,7 +2584,7 @@ function CollectiblesGrid({ collectibles }) {
             }
           ),
           showPlus && /* @__PURE__ */ jsx21(
-            Box15,
+            Box14,
             {
               position: "absolute",
               top: "0",
@@ -2664,7 +2669,7 @@ var initialState5 = {
 var transferModal$ = observable6(initialState5);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box16, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
+import { Box as Box15, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
 import { observable as observable7 } from "@legendapp/state";
 import { isAddress } from "viem";
 import { useAccount as useAccount3 } from "wagmi";
@@ -2769,9 +2774,9 @@ var EnterWalletAddressView = () => {
     transfer();
     transferModal$.view.set("followWalletInstructions");
   }
-  return /* @__PURE__ */ jsxs15(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs15(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
     /* @__PURE__ */ jsx22(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsxs15(Box16, { display: "flex", flexDirection: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs15(Box15, { display: "flex", flexDirection: "column", gap: "3", children: [
       /* @__PURE__ */ jsx22(
         AlertMessage,
         {
@@ -2831,13 +2836,13 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box17, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
+import { Box as Box16, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
 import { observer as observer10 } from "@legendapp/state/react";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var FollowWalletInstructionsView = observer10(() => {
-  return /* @__PURE__ */ jsxs16(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs16(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
     /* @__PURE__ */ jsx23(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx23(Box17, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx23(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx23(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
@@ -2925,7 +2930,7 @@ var TransactionModalView = observer11(() => {
 });
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { Box as Box18 } from "@0xsequence/design-system";
+import { Box as Box17 } from "@0xsequence/design-system";
 import { Show as Show4, observer as observer12 } from "@legendapp/state/react";
 import { parseUnits as parseUnits4 } from "viem";
 import { useAccount as useAccount5 } from "wagmi";
@@ -3046,7 +3051,6 @@ var useTransactionSteps3 = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { generateListingTransactionAsync, isPending: generatingSteps } = useGenerateListingTransaction({
     chainId,
     onSuccess: (steps) => {
@@ -3088,11 +3092,9 @@ var useTransactionSteps3 = ({
         Number(chainId),
         approvalStep
       );
-      const receipt = await waitForReceipt(hash);
-      if (receipt) {
-        steps$.approval.isExecuting.set(false);
-        steps$.approval.exist.set(false);
-      }
+      await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+      steps$.approval.isExecuting.set(false);
+      steps$.approval.exist.set(false);
     } catch (error) {
       steps$.approval.isExecuting.set(false);
     }
@@ -3138,19 +3140,13 @@ var useTransactionSteps3 = ({
         ]
       });
       if (hash) {
-        await waitForReceipt(hash);
+        await wallet.handleConfirmTransactionStep(hash, Number(chainId));
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ hash });
-        }
       }
       if (orderId) {
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
-        if (callbacks?.onSuccess && typeof callbacks.onSuccess === "function") {
-          callbacks.onSuccess({ orderId });
-        }
       }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
@@ -3357,7 +3353,7 @@ var Modal5 = observer12(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsxs18(Box18, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+        /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
           /* @__PURE__ */ jsx25(
             priceInput_default,
             {
@@ -3402,7 +3398,7 @@ var Modal5 = observer12(() => {
 });
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { use$ as use$2 } from "@legendapp/state/react";
+import { use$ } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable9 } from "@legendapp/state";
@@ -3464,7 +3460,7 @@ function CheckoutModal({ buy, collectable, order }) {
 }
 
 // src/react/ui/modals/BuyModal/modals/Modal1155.tsx
-import { Box as Box19, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { Box as Box18, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { observer as observer13 } from "@legendapp/state/react";
 import { formatUnits as formatUnits4, parseUnits as parseUnits6 } from "viem";
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -3512,7 +3508,7 @@ var ERC1155QuantityModal = observer13(
             pending: buyModal$.state.checkoutModalIsLoading.get()
           }
         ],
-        children: /* @__PURE__ */ jsxs19(Box19, { display: "flex", flexDirection: "column", gap: "4", children: [
+        children: /* @__PURE__ */ jsxs19(Box18, { display: "flex", flexDirection: "column", gap: "4", children: [
           /* @__PURE__ */ jsx26(
             QuantityInput,
             {
@@ -3522,9 +3518,9 @@ var ERC1155QuantityModal = observer13(
               maxQuantity: order.quantityRemaining
             }
           ),
-          /* @__PURE__ */ jsxs19(Box19, { display: "flex", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxs19(Box18, { display: "flex", justifyContent: "space-between", children: [
             /* @__PURE__ */ jsx26(Text15, { color: "text50", fontSize: "small", children: "Total Price" }),
-            /* @__PURE__ */ jsxs19(Box19, { display: "flex", alignItems: "center", gap: "2", children: [
+            /* @__PURE__ */ jsxs19(Box18, { display: "flex", alignItems: "center", gap: "2", children: [
               /* @__PURE__ */ jsx26(TokenImage2, { src: currency?.imageUrl, size: "xs" }),
               /* @__PURE__ */ jsx26(Text15, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits4(BigInt(totalPrice), currency?.decimals || 0) })
             ] })
@@ -3703,22 +3699,22 @@ var useBuyCollectable = ({
 // src/react/ui/modals/BuyModal/Modal.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var BuyModal = () => {
-  const isOpen = use$2(buyModal$.isOpen);
+  const isOpen = use$(buyModal$.isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx27(BuyModalContent, {});
 };
 var BuyModalContent = () => {
-  const chainId = String(use$2(buyModal$.state.order.chainId));
-  const collectionAddress = use$2(
+  const chainId = String(use$(buyModal$.state.order.chainId));
+  const collectionAddress = use$(
     buyModal$.state.order.collectionContractAddress
   );
-  const collectibleId = use$2(buyModal$.state.order.tokenId);
-  const modalId = use$2(buyModal$.state.modalId);
-  const callbacks = use$2(buyModal$.callbacks);
-  const order = use$2(buyModal$.state.order);
-  const isOpen = use$2(buyModal$.isOpen);
-  const setCheckoutModalIsLoading = use$2(buyModal$.setCheckoutModalIsLoading);
-  const setCheckoutModalLoaded = use$2(buyModal$.setCheckoutModalLoaded);
+  const collectibleId = use$(buyModal$.state.order.tokenId);
+  const modalId = use$(buyModal$.state.modalId);
+  const callbacks = use$(buyModal$.callbacks);
+  const order = use$(buyModal$.state.order);
+  const isOpen = use$(buyModal$.isOpen);
+  const setCheckoutModalIsLoading = use$(buyModal$.setCheckoutModalIsLoading);
+  const setCheckoutModalLoaded = use$(buyModal$.setCheckoutModalLoaded);
   const { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
     chainId: Number(chainId),
     collectionAddress,
@@ -3830,11 +3826,11 @@ var useBuyModal = (callbacks) => {
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
 import { useState as useState8 } from "react";
-import { Box as Box23, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
+import { Box as Box22, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
 import { useAccount as useAccount7 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
-import { Box as Box20 } from "@0xsequence/design-system";
+import { Box as Box19 } from "@0xsequence/design-system";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var Svg = () => /* @__PURE__ */ jsxs21(
   "svg",
@@ -3861,7 +3857,7 @@ var Svg = () => /* @__PURE__ */ jsxs21(
   }
 );
 var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
-  Box20,
+  Box19,
   {
     as: Svg,
     className: iconVariants({
@@ -3986,12 +3982,12 @@ function ActionButtonBody({ label, onClick }) {
 }
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box22, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
+import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits5 } from "viem";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
-import { Box as Box21 } from "@0xsequence/design-system";
+import { Box as Box20 } from "@0xsequence/design-system";
 import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var Svg2 = () => /* @__PURE__ */ jsxs22(
   "svg",
@@ -4018,7 +4014,7 @@ var Svg2 = () => /* @__PURE__ */ jsxs22(
   }
 );
 var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
-  Box21,
+  Box20,
   {
     as: Svg2,
     className: iconVariants({
@@ -4050,7 +4046,7 @@ var Footer = ({
     name = `${name.substring(0, 17)}...`;
   }
   return /* @__PURE__ */ jsxs23(
-    Box22,
+    Box21,
     {
       display: "flex",
       flexDirection: "column",
@@ -4062,7 +4058,7 @@ var Footer = ({
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
         /* @__PURE__ */ jsxs23(
-          Box22,
+          Box21,
           {
             display: "flex",
             alignItems: "center",
@@ -4100,7 +4096,7 @@ var Footer = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23(Box22, { display: "flex", alignItems: "center", gap: "1", children: [
+        /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
           listed && /* @__PURE__ */ jsx32(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
           /* @__PURE__ */ jsxs23(
             Text16,
@@ -4150,7 +4146,7 @@ var TokenTypeBalancePill = ({
 import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
   return /* @__PURE__ */ jsxs24(
-    Box23,
+    Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
@@ -4165,7 +4161,7 @@ function CollectibleSkeleton() {
           }
         ),
         /* @__PURE__ */ jsxs24(
-          Box23,
+          Box22,
           {
             display: "flex",
             flexDirection: "column",
@@ -4216,14 +4212,14 @@ function CollectibleCard({
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
   return /* @__PURE__ */ jsx33(
-    Box23,
+    Box22,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
       children: /* @__PURE__ */ jsx33(
-        Box23,
+        Box22,
         {
           display: "flex",
           flexDirection: "column",
@@ -4279,7 +4275,7 @@ function CollectibleCard({
               }
             ),
             accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx33(
-              Box23,
+              Box22,
               {
                 display: "flex",
                 alignItems: "center",
@@ -4318,4 +4314,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-SEISACMH.js.map
+//# sourceMappingURL=chunk-2FOUCP2R.js.map