@0xsequence/marketplace-sdk 0.4.5 → 0.4.7

package/dist/{chunk-SEISACMH.js → chunk-5UCKYAMR.js}

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-CKOWM2ZR.js";
+} from "./chunk-AQT3BQ67.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-R7GVMKMM.js";
 import {
   AlertMessage,
   switchChainModal_default,
   useSwitchChainModal,
   useWallet
-} from "./chunk-KL5JPUPS.js";
+} from "./chunk-FWN2MCLI.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
@@ -67,46 +66,28 @@ import {
   calculatePriceDifferencePercentage,
   getPublicRpcClient,
   truncateMiddle
-} from "./chunk-FT3J32ZV.js";
+} from "./chunk-XP3WY5AX.js";
 import {
   getProviderEl
-} from "./chunk-ZEKRTFBU.js";
+} from "./chunk-YOKGP2EQ.js";
 import {
   balanceQueries,
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-KILOCWY2.js";
+} from "./chunk-6R4G7J6Q.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";
-
-// src/react/ui/modals/Account/index.tsx
-import { Box, Button, Modal, Text } from "@0xsequence/design-system";
-import { observable } from "@legendapp/state";
-import { observer } from "@legendapp/state/react";
-import { useAccount } from "wagmi";
-import { jsx, jsxs } from "react/jsx-runtime";
-var accountModalOpen$ = observable(false);
-var AccountModal = observer(function AccountModal2() {
-  const { address } = useAccount();
-  return accountModalOpen$.get() && /* @__PURE__ */ jsxs(Modal, { children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { children: "Wallet address" }),
-      /* @__PURE__ */ jsx(Text, { children: address })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { label: "Sign out" })
-  ] });
-});
+import { observer as observer12 } from "@legendapp/state/react";
 
 // src/react/ui/modals/MakeOfferModal/Modal.tsx
-import { Show, observer as observer7, use$ } from "@legendapp/state/react";
-import { useState as useState7 } from "react";
-import { parseUnits as parseUnits2, zeroAddress } from "viem";
+import { Show, observer as observer5 } from "@legendapp/state/react";
+import { useState as useState6 } from "react";
+import { parseUnits as parseUnits2 } from "viem";
 
 // src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx
 import { useEffect as useEffect3 } from "react";
@@ -122,7 +103,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;
@@ -137,8 +118,8 @@ var useGetTokenApprovalData = (params) => {
         orderbook: params.orderbook,
         offer
       };
-      const steps = await marketplaceClient.generateOfferTransaction(args).then((resp) => resp.steps);
-      const tokenApprovalStep = steps.find(
+      const steps3 = await marketplaceClient.generateOfferTransaction(args).then((resp) => resp.steps);
+      const tokenApprovalStep = steps3.find(
         (step) => step.id === "tokenApproval" /* tokenApproval */
       );
       if (!tokenApprovalStep) {
@@ -159,26 +140,23 @@ 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,
   IconButton,
   Skeleton as Skeleton2,
-  Text as Text5
+  Text as Text4
 } from "@0xsequence/design-system";
 import { TRANSACTION_CONFIRMATIONS_DEFAULT } from "@0xsequence/kit";
-import { observer as observer3 } from "@legendapp/state/react";
+import { observer as observer2 } from "@legendapp/state/react";
 import { Close, Content, Overlay, Portal, Root } from "@radix-ui/react-dialog";
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { WaitForTransactionReceiptTimeoutError } from "viem";
 
 // src/react/ui/modals/_internal/components/transaction-footer/index.tsx
 import { networks } from "@0xsequence/network";
-import { Box as Box2, Text as Text2, Spinner } from "@0xsequence/design-system";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Box, Text, Spinner } from "@0xsequence/design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
 function TransactionFooter({
   transactionHash,
   orderId,
@@ -188,13 +166,13 @@ function TransactionFooter({
   isTimeout,
   chainId
 }) {
-  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx2(PositiveCircleIcon_default, { size: "md" }) || isConfirming && /* @__PURE__ */ jsx2(Spinner, { size: "md" });
+  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx(PositiveCircleIcon_default, { size: "md" }) || isConfirming && /* @__PURE__ */ jsx(Spinner, { size: "md" });
   const title = (isConfirmed || orderId) && "Transaction complete" || isConfirming && "Processing transaction" || isFailed && "Transaction failed" || isTimeout && "Transaction took longer than expected";
   const transactionUrl = `${networks[chainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
-  return /* @__PURE__ */ jsxs2(Box2, { display: "flex", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
     icon,
-    /* @__PURE__ */ jsx2(
-      Text2,
+    /* @__PURE__ */ jsx(
+      Text,
       {
         color: "text50",
         fontSize: "normal",
@@ -204,8 +182,8 @@ function TransactionFooter({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx2(
-      Box2,
+    /* @__PURE__ */ jsx(
+      Box,
       {
         as: "a",
         flexGrow: "1",
@@ -215,8 +193,8 @@ function TransactionFooter({
         rel: "noopener noreferrer",
         textAlign: "right",
         textDecoration: "none",
-        children: /* @__PURE__ */ jsx2(
-          Text2,
+        children: /* @__PURE__ */ jsx(
+          Text,
           {
             textAlign: "right",
             fontSize: "normal",
@@ -235,23 +213,23 @@ function TransactionFooter({
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
 import {
-  Box as Box4,
+  Box as Box3,
   Image,
   NetworkImage,
   Skeleton,
-  Text as Text4
+  Text as Text3
 } from "@0xsequence/design-system";
-import { observer as observer2 } from "@legendapp/state/react";
+import { observer } from "@legendapp/state/react";
 import { formatUnits } from "viem";
 
 // src/react/ui/images/chess-tile.png
 var chess_tile_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACuCAYAAABAzl3QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgB7dyxbUMxEAXBs6FEjagv91/AD+keeNFCMw1csmBEvJ/P53Nm4Xme2Xi/37Ph/nfeP+f8/Q5EiZcs8ZIlXrLES5Z4yRIvWeIlS7xkiZcs8ZIlXrLES5Z4yRIvWS//Ud2v3vfykiVessRLlnjJEi9Z4iVLvGSJlyzxkiVessRLlnjJEi9Z4iVLvGS9/Ed1v3j/nOPlpUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMmyz+v+bNjnhQviJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWfV73Z8M+L1wQL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6y7PO6Pxv2eeGCeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSZZ/X/dmwzwsXxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPu87s+GfV64IF6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZNnndX827PPCBfGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1niJcs+r/uzYZ8XLoiXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6yxEuWeMkSL1n2ed2fDfu8cEG8ZImXLPGSJV6yxEuWeMkSL1niJUu8ZImXLPGSJV6y/gF97MkwfJRH7QAAAABJRU5ErkJggg==";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box3, Text as Text3 } from "@0xsequence/design-system";
+import { Box as Box2, Text as Text2 } from "@0xsequence/design-system";
 import { formatDistanceToNow } from "date-fns";
 import { useEffect, useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function TimeAgo({ date }) {
   const [timeAgo, setTimeAgo] = useState("");
   useEffect(() => {
@@ -260,20 +238,20 @@ function TimeAgo({ date }) {
     }, 1e3);
     return () => clearInterval(interval);
   }, [date]);
-  return /* @__PURE__ */ jsx3(
-    Box3,
+  return /* @__PURE__ */ jsx2(
+    Box2,
     {
       flexGrow: "1",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx3(Text3, { color: "text50", fontSize: "small", children: timeAgo })
+      children: /* @__PURE__ */ jsx2(Text2, { color: "text50", fontSize: "small", children: timeAgo })
     }
   );
 }
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
-import { observable as observable2 } from "@legendapp/state";
+import { observable } from "@legendapp/state";
 var initialState = {
   isOpen: false,
   open: ({
@@ -326,7 +304,7 @@ var initialState = {
     blocked: false
   }
 };
-var transactionStatusModal$ = observable2(initialState);
+var transactionStatusModal$ = observable(initialState);
 
 // src/react/ui/modals/_internal/components/transactionPreview/consts.ts
 var TRANSACTION_TITLES = {
@@ -374,8 +352,8 @@ function useTransactionPreviewTitle(orderId, status, type) {
 }
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var TransactionPreview = observer2(
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TransactionPreview = observer(
   ({
     orderId,
     price,
@@ -404,88 +382,110 @@ var TransactionPreview = observer2(
     const collectionName = collection?.name;
     const priceFormatted = price ? formatUnits(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
-      return /* @__PURE__ */ jsx4(Box4, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx4(Skeleton, { style: { width: "100%", height: "100%" } }) });
+      return /* @__PURE__ */ jsx3(Box3, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx3(Skeleton, { style: { width: "100%", height: "100%" } }) });
     }
-    return /* @__PURE__ */ jsxs3(Box4, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs3(Box4, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx4(
-          Text4,
-          {
-            color: "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            marginRight: "1",
-            fontFamily: "body",
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx4(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-        isConfirming && /* @__PURE__ */ jsx4(TimeAgo, { date: /* @__PURE__ */ new Date() })
-      ] }),
-      /* @__PURE__ */ jsxs3(Box4, { display: "flex", alignItems: "center", marginTop: "2", children: [
-        /* @__PURE__ */ jsx4(
-          Image,
-          {
-            src: collectibleImage2 || chess_tile_default,
-            alt: collectibleName,
-            width: "9",
-            height: "9",
-            borderRadius: "xs",
-            marginRight: "3",
-            style: { objectFit: "cover" }
-          }
-        ),
-        /* @__PURE__ */ jsxs3(
-          Box4,
-          {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "0.5",
-            children: [
-              /* @__PURE__ */ jsx4(
-                Text4,
-                {
-                  color: "text80",
-                  fontSize: "small",
-                  fontWeight: "medium",
-                  fontFamily: "body",
-                  children: collectibleName
-                }
-              ),
-              /* @__PURE__ */ jsx4(Text4, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
-            ]
-          }
-        ),
-        price && /* @__PURE__ */ jsxs3(
-          Box4,
-          {
-            flexGrow: "1",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            gap: "1",
-            children: [
-              /* @__PURE__ */ jsx4(Image, { src: currencyImageUrl, width: "3", height: "3" }),
-              /* @__PURE__ */ jsxs3(
-                Text4,
-                {
-                  color: "text80",
-                  fontSize: "small",
-                  fontWeight: "medium",
-                  fontFamily: "body",
-                  children: [
-                    priceFormatted,
-                    " ",
-                    price?.currency.symbol
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs2(
+      Box3,
+      {
+        padding: "3",
+        background: "backgroundSecondary",
+        borderRadius: "md",
+        "data-testid": "transaction-preview",
+        children: [
+          /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", children: [
+            /* @__PURE__ */ jsx3(
+              Text3,
+              {
+                color: "text50",
+                fontSize: "small",
+                fontWeight: "medium",
+                marginRight: "1",
+                fontFamily: "body",
+                "data-testid": "transaction-preview-title",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx3(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+            isConfirming && /* @__PURE__ */ jsx3(TimeAgo, { date: /* @__PURE__ */ new Date() })
+          ] }),
+          /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", marginTop: "2", children: [
+            /* @__PURE__ */ jsx3(
+              Image,
+              {
+                src: collectibleImage2 || chess_tile_default,
+                alt: collectibleName,
+                width: "9",
+                height: "9",
+                borderRadius: "xs",
+                marginRight: "3",
+                style: { objectFit: "cover" },
+                "data-testid": "transaction-preview-image"
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              Box3,
+              {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: "0.5",
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      color: "text80",
+                      fontSize: "small",
+                      fontWeight: "medium",
+                      fontFamily: "body",
+                      "data-testid": "transaction-preview-collectible-name",
+                      children: collectibleName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      color: "text100",
+                      fontSize: "small",
+                      fontFamily: "body",
+                      "data-testid": "transaction-preview-collection-name",
+                      children: collectionName
+                    }
+                  )
+                ]
+              }
+            ),
+            price && /* @__PURE__ */ jsxs2(
+              Box3,
+              {
+                flexGrow: "1",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                gap: "1",
+                "data-testid": "transaction-preview-price",
+                children: [
+                  /* @__PURE__ */ jsx3(Image, { src: currencyImageUrl, width: "3", height: "3" }),
+                  /* @__PURE__ */ jsxs2(
+                    Text3,
+                    {
+                      color: "text80",
+                      fontSize: "small",
+                      fontWeight: "medium",
+                      fontFamily: "body",
+                      children: [
+                        priceFormatted,
+                        " ",
+                        price?.currency.symbol
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
   }
 );
 var transactionPreview_default = TransactionPreview;
@@ -538,7 +538,7 @@ function getTransactionStatusModalMessage({
     case "PENDING":
       return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It should be confirmed on the blockchain shortly.`;
     case "SUCCESS":
-      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It\u2019s been confirmed on the blockchain!`;
+      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It's been confirmed on the blockchain!`;
     case "FAILED":
       return `Your ${getFormattedType(transactionType)} has failed.`;
     case "TIMEOUT":
@@ -575,7 +575,7 @@ function getTransactionStatusModalTitle({
 }
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var useTransactionStatusModal = () => {
   return {
     show: (args) => {
@@ -591,7 +591,7 @@ var invalidateQueries = async (queriesToInvalidate) => {
     await queryClient.invalidateQueries({ queryKey });
   }
 };
-var TransactionStatusModal = observer3(() => {
+var TransactionStatusModal = observer2(() => {
   const {
     type,
     hash,
@@ -613,6 +613,11 @@ var TransactionStatusModal = observer3(() => {
     orderId ? "SUCCESS" : "PENDING"
   );
   const queryClient = getQueryClient();
+  const publicClient = chainId ? getPublicRpcClient(chainId) : null;
+  const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
+    confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
+    hash: hash || "0x"
+  });
   useEffect2(() => {
     if (!transactionStatusModal$.isOpen.get() || orderId) return;
     console.log("Waiting for transaction receipt ...");
@@ -666,65 +671,91 @@ var TransactionStatusModal = observer3(() => {
     orderId,
     price
   });
-  const publicClient = chainId ? getPublicRpcClient(chainId) : null;
-  const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
-    confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
-    hash: hash || "0x"
-  });
-  return /* @__PURE__ */ jsx5(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs4(Portal, { container: getProviderEl(), children: [
-    /* @__PURE__ */ jsx5(Overlay, { className: dialogOverlay3 }),
-    /* @__PURE__ */ jsxs4(Content, { className: transactionStatusModalContent, children: [
-      title ? /* @__PURE__ */ jsx5(
-        Text5,
-        {
-          fontSize: "large",
-          fontWeight: "bold",
-          color: "text100",
-          fontFamily: "body",
-          children: title
-        }
-      ) : /* @__PURE__ */ jsx5(Skeleton2, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx5(Text5, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx5(Skeleton2, { width: "20", height: "4" }),
-      /* @__PURE__ */ jsx5(
-        transactionPreview_default,
-        {
-          orderId,
-          price,
-          collectionAddress,
-          chainId,
-          collectible,
-          collectibleLoading,
-          currencyImageUrl: price?.currency.imageUrl,
-          isConfirming: transactionStatus === "PENDING",
-          isConfirmed: transactionStatus === "SUCCESS",
-          isFailed: transactionStatus === "FAILED",
-          isTimeout: transactionStatus === "TIMEOUT"
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        TransactionFooter,
-        {
-          transactionHash: hash,
-          orderId,
-          isConfirming: transactionStatus === "PENDING",
-          isConfirmed: transactionStatus === "SUCCESS",
-          isFailed: transactionStatus === "FAILED",
-          isTimeout: transactionStatus === "TIMEOUT",
-          chainId
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        Close,
-        {
-          onClick: () => {
-            transactionStatusModal$.close();
-          },
-          className: closeButton3,
-          asChild: true,
-          children: /* @__PURE__ */ jsx5(IconButton, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
-        }
-      )
-    ] })
+  return /* @__PURE__ */ jsx4(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs3(Portal, { container: getProviderEl(), children: [
+    /* @__PURE__ */ jsx4(Overlay, { className: dialogOverlay3 }),
+    /* @__PURE__ */ jsxs3(
+      Content,
+      {
+        className: transactionStatusModalContent,
+        "data-testid": "transaction-status-modal",
+        children: [
+          title ? /* @__PURE__ */ jsx4(
+            Text4,
+            {
+              fontSize: "large",
+              fontWeight: "bold",
+              color: "text100",
+              fontFamily: "body",
+              "data-testid": "transaction-status-title",
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx4(
+            Skeleton2,
+            {
+              width: "16",
+              height: "6",
+              "data-testid": "transaction-modal-title-skeleton"
+            }
+          ),
+          message ? /* @__PURE__ */ jsx4(
+            Text4,
+            {
+              fontSize: "small",
+              color: "text80",
+              fontFamily: "body",
+              "data-testid": "transaction-status-message",
+              children: message
+            }
+          ) : /* @__PURE__ */ jsx4(
+            Skeleton2,
+            {
+              width: "20",
+              height: "4",
+              "data-testid": "transaction-modal-content-skeleton"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            transactionPreview_default,
+            {
+              orderId,
+              price,
+              collectionAddress,
+              chainId,
+              collectible,
+              collectibleLoading,
+              currencyImageUrl: price?.currency.imageUrl,
+              isConfirming: transactionStatus === "PENDING",
+              isConfirmed: transactionStatus === "SUCCESS",
+              isFailed: transactionStatus === "FAILED",
+              isTimeout: transactionStatus === "TIMEOUT"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            TransactionFooter,
+            {
+              transactionHash: hash,
+              orderId,
+              isConfirming: transactionStatus === "PENDING",
+              isConfirmed: transactionStatus === "SUCCESS",
+              isFailed: transactionStatus === "FAILED",
+              isTimeout: transactionStatus === "TIMEOUT",
+              chainId
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Close,
+            {
+              onClick: () => {
+                transactionStatusModal$.close();
+              },
+              className: closeButton3,
+              asChild: true,
+              children: /* @__PURE__ */ jsx4(IconButton, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+            }
+          )
+        ]
+      }
+    )
   ] }) });
 });
 var transactionStatusModal_default = TransactionStatusModal;
@@ -744,11 +775,10 @@ var useTransactionSteps = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
-  const { waitForReceipt } = useGetReceiptFromHash();
   const { generateOfferTransactionAsync, isPending: generatingSteps } = useGenerateOfferTransaction({
     chainId,
-    onSuccess: (steps) => {
-      if (!steps) return;
+    onSuccess: (steps3) => {
+      if (!steps3) return;
     }
   });
   const { data: currency } = useCurrency({
@@ -759,7 +789,7 @@ var useTransactionSteps = ({
     if (!wallet) return;
     try {
       const address = await wallet.address();
-      const steps = await generateOfferTransactionAsync({
+      const steps3 = await generateOfferTransactionAsync({
         collectionAddress,
         maker: address,
         walletType: wallet.walletKind,
@@ -770,7 +800,7 @@ var useTransactionSteps = ({
           expiry
         }
       });
-      return steps;
+      return steps3;
     } catch (error) {
       if (callbacks?.onError) {
         callbacks.onError(error);
@@ -784,17 +814,15 @@ var useTransactionSteps = ({
     try {
       steps$.approval.isExecuting.set(true);
       const approvalStep = await getOfferSteps().then(
-        (steps) => steps?.find((step) => step.id === "tokenApproval" /* tokenApproval */)
+        (steps3) => steps3?.find((step) => step.id === "tokenApproval" /* tokenApproval */)
       );
       const hash = await wallet.handleSendTransactionStep(
         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);
     }
@@ -803,11 +831,11 @@ var useTransactionSteps = ({
     if (!wallet) return;
     try {
       steps$.transaction.isExecuting.set(true);
-      const steps = await getOfferSteps();
-      const transactionStep = steps?.find(
+      const steps3 = await getOfferSteps();
+      const transactionStep = steps3?.find(
         (step) => step.id === "createOffer" /* createOffer */
       );
-      const signatureStep = steps?.find(
+      const signatureStep = steps3?.find(
         (step) => step.id === "signEIP712" /* signEIP712 */
       );
       console.debug("transactionStep", transactionStep);
@@ -844,19 +872,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 +929,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) {
@@ -939,14 +969,15 @@ var useMakeOffer = ({
 };
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
-import { Box as Box5 } from "@0xsequence/design-system";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Box as Box4 } from "@0xsequence/design-system";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ErrorModal = ({
   isOpen,
   chainId,
   onClose,
-  title
-}) => /* @__PURE__ */ jsx6(
+  title,
+  message
+}) => /* @__PURE__ */ jsx5(
   ActionModal,
   {
     isOpen,
@@ -954,19 +985,29 @@ var ErrorModal = ({
     onClose,
     title,
     ctas: [],
-    children: /* @__PURE__ */ jsx6(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" })
+    children: /* @__PURE__ */ jsx5(
+      Box4,
+      {
+        "data-testid": "error-modal",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "4",
+        children: message || "Error loading item details"
+      }
+    )
   }
 );
 
 // src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx
-import { Box as Box6, Spinner as Spinner2 } from "@0xsequence/design-system";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { Box as Box5, Spinner as Spinner2 } from "@0xsequence/design-system";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var LoadingModal = ({
   isOpen,
   chainId,
   onClose,
   title
-}) => /* @__PURE__ */ jsx7(
+}) => /* @__PURE__ */ jsx6(
   ActionModal,
   {
     isOpen,
@@ -974,27 +1015,37 @@ var LoadingModal = ({
     onClose,
     title,
     ctas: [],
-    children: /* @__PURE__ */ jsx7(Box6, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx7(Spinner2, { size: "lg" }) })
+    children: /* @__PURE__ */ jsx6(
+      Box5,
+      {
+        "data-testid": "loading-modal",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "4",
+        children: /* @__PURE__ */ jsx6(Spinner2, { size: "lg" })
+      }
+    )
   }
 );
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { Box as Box7, Skeleton as Skeleton3, Text as Text6 } from "@0xsequence/design-system";
-import { observer as observer4 } from "@legendapp/state/react";
+import { Box as Box6, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
+import { observer as observer3 } from "@legendapp/state/react";
 import { addDays } from "date-fns";
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { Button as Button2 } from "@0xsequence/design-system";
+import { Button } from "@0xsequence/design-system";
 import { Content as Content2, Portal as Portal2, Root as Root2, Trigger } from "@radix-ui/react-popover";
 import { format } from "date-fns";
 
 // src/react/ui/modals/_internal/components/calendar/index.tsx
 import { DayPicker } from "react-day-picker";
 import "react-day-picker/style.css";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Calendar({ ...props }) {
   const { selectedDate, setSelectedDate } = props;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     DayPicker,
     {
       disabled: {
@@ -1042,14 +1093,14 @@ Calendar.displayName = "Calendar";
 var calendar_default = Calendar;
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function CalendarPopover({
   selectedDate,
   setSelectedDate
 }) {
-  return /* @__PURE__ */ jsxs5(Root2, { children: [
-    /* @__PURE__ */ jsx9(Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(
-      Button2,
+  return /* @__PURE__ */ jsxs4(Root2, { children: [
+    /* @__PURE__ */ jsx8(Trigger, { asChild: true, children: /* @__PURE__ */ jsx8(
+      Button,
       {
         leftIcon: CalendarIcon_default,
         className: dateSelectButton,
@@ -1058,7 +1109,7 @@ function CalendarPopover({
         shape: "square"
       }
     ) }),
-    /* @__PURE__ */ jsx9(Portal2, { children: /* @__PURE__ */ jsx9(Content2, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx8(Portal2, { children: /* @__PURE__ */ jsx8(Content2, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx8(
       calendar_default,
       {
         selectedDate,
@@ -1071,7 +1122,12 @@ 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";
+import { jsx as jsx9, jsxs as jsxs5 } 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",
@@ -1099,7 +1155,7 @@ var PRESET_RANGES = {
     offset: 30
   }
 };
-var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
+var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
   className,
   $date
 }) {
@@ -1113,18 +1169,19 @@ 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) {
     $date.set(date);
   }
   if (!$date.get()) {
-    return /* @__PURE__ */ jsx10(Skeleton3, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+    return /* @__PURE__ */ jsx9(Skeleton3, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
-  return /* @__PURE__ */ jsxs6(Box7, { width: "full", position: "relative", children: [
-    /* @__PURE__ */ jsx10(
-      Text6,
+  return /* @__PURE__ */ jsxs5(Box6, { width: "full", position: "relative", children: [
+    /* @__PURE__ */ jsx9(
+      Text5,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1135,8 +1192,8 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
         children: "Set expiry"
       }
     ),
-    /* @__PURE__ */ jsxs6(
-      Box7,
+    /* @__PURE__ */ jsxs5(
+      Box6,
       {
         className,
         width: "full",
@@ -1145,14 +1202,14 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
         gap: "2",
         marginTop: "0.5",
         children: [
-          /* @__PURE__ */ jsx10(
-            Box7,
+          /* @__PURE__ */ jsx9(
+            Box6,
             {
               position: "absolute",
               right: "0",
               onClick: (e) => e.stopPropagation(),
               zIndex: "10",
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx9(
                 CustomSelect,
                 {
                   items: Object.values(PRESET_RANGES).map((preset) => ({
@@ -1169,7 +1226,7 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
               )
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9(
             CalendarPopover,
             {
               selectedDate: $date.get(),
@@ -1184,8 +1241,8 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
 var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text7 } from "@0xsequence/design-system";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Text as Text6 } from "@0xsequence/design-system";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
   collectionAddress,
@@ -1210,8 +1267,8 @@ function FloorPriceText({
     decimals: price.currency.decimals
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
-  return /* @__PURE__ */ jsx11(
-    Text7,
+  return /* @__PURE__ */ jsx10(
+    Text6,
     {
       fontSize: "small",
       fontWeight: "medium",
@@ -1225,22 +1282,21 @@ 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 { useCallback, useMemo } from "react";
-import { useAccount as useAccount2 } from "wagmi";
+import { Box as Box8, NumericInput, Text as Text7 } from "@0xsequence/design-system";
+import { parseUnits } from "viem";
+import { useAccount } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyImage/index.tsx
-import { Box as Box8, TokenImage } from "@0xsequence/design-system";
+import { Box as Box7, TokenImage } from "@0xsequence/design-system";
 import { useState as useState4 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function CurrencyImage({ price$ }) {
   const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] = useState4(null);
   if (imageLoadErrorCurrencyAddresses?.includes(
     price$.currency.contractAddress.get()
   )) {
-    return /* @__PURE__ */ jsx12(
-      Box8,
+    return /* @__PURE__ */ jsx11(
+      Box7,
       {
         width: "3",
         height: "3",
@@ -1249,7 +1305,7 @@ function CurrencyImage({ price$ }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     TokenImage,
     {
       src: price$.currency.imageUrl.get(),
@@ -1277,20 +1333,22 @@ var currencyImage_default = CurrencyImage;
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
 import { Skeleton as Skeleton4 } from "@0xsequence/design-system";
-import { observer as observer5 } from "@legendapp/state/react";
+import { observer as observer4 } from "@legendapp/state/react";
 import { useEffect as useEffect4 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CurrencyOptionsSelect = observer4(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) {
@@ -1301,8 +1359,8 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
       }
     }
   }, [currencies]);
-  if (!currencies || currenciesLoading || !currency.symbol) {
-    return /* @__PURE__ */ jsx13(Skeleton4, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+  if (!currencies || currenciesLoading || !currency?.symbol) {
+    return /* @__PURE__ */ jsx12(Skeleton4, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
   const options = currencies.map(
     (currency2) => ({
@@ -1317,7 +1375,7 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
     );
     selectedCurrency$.set(selectedCurrency);
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12(
     CustomSelect,
     {
       items: options,
@@ -1331,163 +1389,73 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
 });
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
-// 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("");
-  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(newValue, Number(currencyDecimals));
-      price$.amountRaw.set(parsedAmount.toString());
-      if (onPriceChange && parsedAmount !== 0n) {
-        onPriceChange();
-      }
-    } catch {
-      price$.amountRaw.set("0");
-    }
-  };
-  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);
-    } else {
-      setBalanceError("");
-      checkBalance.callback(false);
-    }
-  }, [
-    price$.amountRaw.get(),
-    currencyAddress,
-    balance?.value,
-    isBalanceSuccess,
-    checkBalance,
-    currencyDecimals
-  ]);
-  return {
-    balanceError
-  };
-};
-
 // 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({
+import { use$ } from "@legendapp/state/react";
+import { useState as useState5 } from "react";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function PriceInput({
   chainId,
   collectionAddress,
   $price,
   onPriceChange,
   checkBalance,
-  secondCurrencyAsDefault
+  secondCurrencyAsDefault,
+  includeNativeCurrency
 }) {
-  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,
+  const { address: accountAddress } = useAccount();
+  const currencyDecimals = use$($price.currency.decimals);
+  const currencyAddress = use$($price.currency.contractAddress);
+  const priceAmountRaw = use$($price.amountRaw);
+  const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
     currencyAddress,
     chainId: Number(chainId),
-    userAddress: accountAddress,
-    currencyDecimals
+    userAddress: accountAddress
   });
-  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
+  const balanceError = !!checkBalance?.enabled && !!isBalanceSuccess && !!priceAmountRaw && !!currencyDecimals && BigInt(priceAmountRaw) > BigInt(balance?.value || 0n);
+  if (checkBalance?.enabled) {
+    checkBalance.callback(balanceError);
+  }
+  const [value, setValue] = useState5("0");
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    try {
+      const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
+      $price.amountRaw.set(parsedAmount.toString());
+      if (onPriceChange && parsedAmount !== 0n) {
+        onPriceChange();
       }
-    );
-  }, [balanceError]);
-  const handleChange = useCallback(
-    (event) => {
-      handlePriceChange(event.target.value);
-    },
-    [handlePriceChange]
-  );
-  return /* @__PURE__ */ jsxs7(Box9, { className: priceInputWrapper, position: "relative", children: [
-    /* @__PURE__ */ jsx14(
-      Box9,
+    } catch {
+      $price.amountRaw.set("0");
+    }
+  };
+  return /* @__PURE__ */ jsxs6(Box8, { className: priceInputWrapper, position: "relative", children: [
+    /* @__PURE__ */ jsx13(
+      Box8,
       {
         className: priceInputCurrencyImage,
         position: "absolute",
         left: "2",
         display: "flex",
         alignItems: "center",
-        children: /* @__PURE__ */ jsx14(currencyImage_default, { price$: $price })
+        children: /* @__PURE__ */ jsx13(currencyImage_default, { price$: $price })
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       NumericInput,
       {
         name: "price-input",
         decimals: currencyDecimals,
         label: "Enter price",
         labelLocation: "top",
-        controls: /* @__PURE__ */ jsx14(
+        controls: /* @__PURE__ */ jsx13(
           currencyOptionsSelect_default,
           {
             selectedCurrency$: $price.currency,
             collectionAddress,
             chainId,
-            secondCurrencyAsDefault
+            secondCurrencyAsDefault,
+            includeNativeCurrency
           }
         ),
         value,
@@ -1495,14 +1463,24 @@ var PriceInput = observer6(function PriceInput2({
         width: "full"
       }
     ),
-    renderBalanceError
+    balanceError && /* @__PURE__ */ jsx13(
+      Text7,
+      {
+        color: "negative",
+        fontSize: "xsmall",
+        fontFamily: "body",
+        fontWeight: "semibold",
+        position: "absolute",
+        style: { bottom: "-13px" },
+        children: "Insufficient balance"
+      }
+    )
   ] });
-});
-var priceInput_default = PriceInput;
+}
 
 // src/react/ui/modals/_internal/components/quantityInput/index.tsx
-import { Box as Box10, IconButton as IconButton2, NumericInput as NumericInput2 } from "@0xsequence/design-system";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box9, IconButton as IconButton2, NumericInput as NumericInput2 } from "@0xsequence/design-system";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function QuantityInput({
   $quantity,
   $invalidQuantity,
@@ -1563,8 +1541,8 @@ function QuantityInput({
   }
   const quantity = $quantity.get();
   const invalidQuantity = $invalidQuantity.get();
-  return /* @__PURE__ */ jsxs8(Box10, { className: quantityInputWrapper, children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs7(Box9, { className: quantityInputWrapper, children: [
+    /* @__PURE__ */ jsx14(
       NumericInput2,
       {
         name: "quantity",
@@ -1572,15 +1550,15 @@ function QuantityInput({
         paddingLeft: "1",
         label: "Enter quantity",
         labelLocation: "top",
-        controls: /* @__PURE__ */ jsxs8(
-          Box10,
+        controls: /* @__PURE__ */ jsxs7(
+          Box9,
           {
             display: "flex",
             alignItems: "center",
             gap: "1",
             marginRight: "2",
             children: [
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx14(
                 IconButton2,
                 {
                   disabled: !quantity || Number(quantity) <= 1,
@@ -1590,7 +1568,7 @@ function QuantityInput({
                   icon: MinusIcon_default
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx14(
                 IconButton2,
                 {
                   disabled: !quantity || Number(quantity) >= Number(maxQuantity),
@@ -1609,13 +1587,13 @@ function QuantityInput({
         width: "full"
       }
     ),
-    invalidQuantity && /* @__PURE__ */ jsx15(Box10, { color: "negative", fontSize: "small", children: invalidQuantity })
+    invalidQuantity && /* @__PURE__ */ jsx14(Box9, { color: "negative", fontSize: "small", children: invalidQuantity })
   ] });
 }
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box11, Image as Image2, Skeleton as Skeleton5, Text as Text9 } from "@0xsequence/design-system";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box10, Image as Image2, Skeleton as Skeleton5, Text as Text8 } from "@0xsequence/design-system";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
   collectionAddress,
@@ -1628,16 +1606,16 @@ function TokenPreview({
     collectibleId
   });
   if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs9(Box11, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx16(Skeleton5, { width: "9", height: "9", borderRadius: "xs" }),
-      /* @__PURE__ */ jsxs9(Box11, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx16(Skeleton5, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx16(Skeleton5, { width: "1/2", height: "3" })
+    return /* @__PURE__ */ jsxs8(Box10, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+      /* @__PURE__ */ jsx15(Skeleton5, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsxs8(Box10, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
+        /* @__PURE__ */ jsx15(Skeleton5, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx15(Skeleton5, { width: "1/2", height: "3" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs9(Box11, { className: tokenPreview, children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs8(Box10, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx15(
       Image2,
       {
         src: collectable?.image || chess_tile_default,
@@ -1648,9 +1626,9 @@ function TokenPreview({
         style: { objectFit: "cover" }
       }
     ),
-    /* @__PURE__ */ jsxs9(Box11, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
-      /* @__PURE__ */ jsx16(
-        Text9,
+    /* @__PURE__ */ jsxs8(Box10, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx15(
+        Text8,
         {
           fontSize: "small",
           color: "text80",
@@ -1659,8 +1637,8 @@ function TokenPreview({
           children: collectionName
         }
       ),
-      /* @__PURE__ */ jsx16(
-        Text9,
+      /* @__PURE__ */ jsx15(
+        Text8,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -1674,36 +1652,40 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/MakeOfferModal/store.ts
-import { observable as observable3 } from "@legendapp/state";
+import { observable as observable2 } from "@legendapp/state";
 import { addDays as addDays2 } from "date-fns/addDays";
+var offerPrice = {
+  amountRaw: "0",
+  currency: {}
+};
+var approval = {
+  exist: false,
+  isExecuting: false,
+  execute: () => Promise.resolve()
+};
+var transaction = {
+  exist: false,
+  isExecuting: false,
+  execute: () => Promise.resolve()
+};
+var steps = {
+  approval: { ...approval },
+  transaction: { ...transaction }
+};
 var initialState2 = {
   isOpen: false,
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
-  orderbookKind: "reservoir" /* reservoir */,
+  orderbookKind: void 0,
   callbacks: void 0,
-  offerPrice: {
-    amountRaw: "0",
-    currency: {}
-  },
+  offerPrice: { ...offerPrice },
   offerPriceChanged: false,
   quantity: "1",
   invalidQuantity: false,
   expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
   collectionType: void 0,
-  steps: {
-    approval: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    },
-    transaction: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    }
-  }
+  steps: { ...steps }
 };
 var actions = {
   open: (args) => {
@@ -1717,25 +1699,27 @@ var actions = {
   close: () => {
     makeOfferModal$.isOpen.set(false);
     makeOfferModal$.set({ ...initialState2, ...actions });
+    makeOfferModal$.steps.set({ ...steps });
+    makeOfferModal$.offerPrice.set({ ...offerPrice });
+    makeOfferModal$.steps.set({ ...steps });
   }
 };
-var makeOfferModal$ = observable3({
+var makeOfferModal$ = observable2({
   ...initialState2,
   ...actions
 });
 
 // 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";
+import { Fragment, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var MakeOfferModal = () => {
-  return /* @__PURE__ */ jsx17(Show, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx17(Modal2, {}) });
+  return /* @__PURE__ */ jsx16(Show, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx16(Modal, {}) });
 };
-var Modal2 = observer7(() => {
+var Modal = observer5(() => {
   const state = makeOfferModal$.get();
   const {
     collectionAddress,
     chainId,
-    offerPrice,
+    offerPrice: offerPrice2,
     offerPriceChanged,
     invalidQuantity,
     collectibleId,
@@ -1743,7 +1727,7 @@ var Modal2 = observer7(() => {
     callbacks
   } = state;
   const steps$ = makeOfferModal$.steps;
-  const [insufficientBalance, setInsufficientBalance] = useState7(false);
+  const [insufficientBalance, setInsufficientBalance] = useState6(false);
   const {
     data: collectible,
     isLoading: collectableIsLoading,
@@ -1768,9 +1752,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,
@@ -1781,8 +1765,8 @@ var Modal2 = observer7(() => {
           collectible?.decimals || 0
         ).toString(),
         expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
-        currencyAddress: offerPrice.currency.contractAddress,
-        pricePerToken: offerPrice.amountRaw
+        currencyAddress: offerPrice2.currency.contractAddress,
+        pricePerToken: offerPrice2.amountRaw
       }
     },
     chainId,
@@ -1793,7 +1777,7 @@ var Modal2 = observer7(() => {
     steps$
   });
   if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx16(
       LoadingModal,
       {
         isOpen: makeOfferModal$.isOpen.get(),
@@ -1804,7 +1788,7 @@ var Modal2 = observer7(() => {
     );
   }
   if (collectableIsError || collectionIsError || currenciesIsError) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx16(
       ErrorModal,
       {
         isOpen: makeOfferModal$.isOpen.get(),
@@ -1814,7 +1798,18 @@ var Modal2 = observer7(() => {
       }
     );
   }
-  const invalidCurrency = selectedCurrency?.contractAddress === zeroAddress && orderbookKind !== "sequence_marketplace_v2" /* sequence_marketplace_v2 */;
+  if (!currencies || currencies.length === 0) {
+    return /* @__PURE__ */ jsx16(
+      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",
@@ -1822,17 +1817,16 @@ var Modal2 = observer7(() => {
       hidden: !steps$.approval.exist.get(),
       pending: steps$.approval.isExecuting.get(),
       variant: "glass",
-      disabled: invalidQuantity || isLoading || insufficientBalance || offerPrice.amountRaw === "0" || !offerPriceChanged
+      disabled: invalidQuantity || isLoading || insufficientBalance || offerPrice2.amountRaw === "0" || !offerPriceChanged
     },
     {
       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() || offerPrice2.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(
+  return /* @__PURE__ */ jsx16(Fragment, { children: /* @__PURE__ */ jsxs9(
     ActionModal,
     {
       isOpen: makeOfferModal$.isOpen.get(),
@@ -1841,7 +1835,7 @@ var Modal2 = observer7(() => {
       title: "Make an offer",
       ctas,
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx16(
           TokenPreview,
           {
             collectionName: collection?.name,
@@ -1850,21 +1844,21 @@ var Modal2 = observer7(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsx17(
-          priceInput_default,
+        /* @__PURE__ */ jsx16(
+          PriceInput,
           {
             chainId,
             collectionAddress,
             $price: makeOfferModal$.offerPrice,
             onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
-            secondCurrencyAsDefault,
+            includeNativeCurrency: false,
             checkBalance: {
               enabled: true,
               callback: (state2) => setInsufficientBalance(state2)
             }
           }
         ),
-        collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx17(
+        collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx16(
           QuantityInput,
           {
             $quantity: makeOfferModal$.quantity,
@@ -1873,30 +1867,29 @@ var Modal2 = observer7(() => {
             maxQuantity: String(Number.MAX_SAFE_INTEGER)
           }
         ),
-        offerPrice.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx17(
+        offerPrice2.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx16(
           FloorPriceText,
           {
             tokenId: collectibleId,
             chainId,
             collectionAddress,
-            price: offerPrice
+            price: offerPrice2
           }
         ),
-        /* @__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__ */ jsx16(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
       ]
     }
   ) });
 });
 
 // src/react/ui/modals/SellModal/Modal.tsx
-import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
+import { Show as Show2, observer as observer6 } 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 Box11, Image as Image3, Skeleton as Skeleton6, Text as Text9 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits3 } from "viem";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
   collectibleId,
@@ -1923,18 +1916,18 @@ function TransactionDetails({
   if (marketplaceFeePercentage !== void 0 && formattedAmount && price) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
   }
-  return /* @__PURE__ */ jsxs11(
-    Box13,
+  return /* @__PURE__ */ jsxs10(
+    Box11,
     {
       width: "full",
       display: "flex",
       justifyContent: "space-between",
       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__ */ 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: [
+        /* @__PURE__ */ jsx17(Text9, { 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: [
             showPlaceholderPrice ? "0" : formattedAmount,
             " ",
             price.currency.symbol
@@ -1946,17 +1939,17 @@ 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 Box12, Image as Image4, Skeleton as Skeleton7, Text as Text10 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function TransactionHeader({
   title,
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs12(Box14, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx19(
-      Text11,
+  return /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", width: "full", children: [
+    /* @__PURE__ */ jsx18(
+      Text10,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1966,9 +1959,9 @@ function TransactionHeader({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx19(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
-    date && /* @__PURE__ */ jsxs12(
-      Text11,
+    /* @__PURE__ */ jsx18(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
+    date && /* @__PURE__ */ jsxs11(
+      Text10,
       {
         fontSize: "small",
         color: "text50",
@@ -1980,12 +1973,12 @@ function TransactionHeader({
           " ago"
         ]
       }
-    ) || /* @__PURE__ */ jsx19(Skeleton7, { width: "8", height: "4" })
+    ) || /* @__PURE__ */ jsx18(Skeleton7, { width: "8", height: "4" })
   ] });
 }
 
 // src/react/ui/modals/SellModal/store.ts
-import { observable as observable4 } from "@legendapp/state";
+import { observable as observable3 } from "@legendapp/state";
 var initialState3 = {
   isOpen: false,
   collectionAddress: "",
@@ -2018,13 +2011,13 @@ var initialState3 = {
     }
   }
 };
-var sellModal$ = observable4(initialState3);
+var sellModal$ = observable3(initialState3);
 
 // src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx
 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 +2029,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 {
@@ -2073,8 +2066,8 @@ var useGetTokenApprovalData2 = (params) => {
           }
         ]
       };
-      const steps = await marketplaceClient.generateSellTransaction(args).then((resp) => resp.steps);
-      const tokenApprovalStep = steps.find(
+      const steps3 = await marketplaceClient.generateSellTransaction(args).then((resp) => resp.steps);
+      const tokenApprovalStep = steps3.find(
         (step) => step.id === "tokenApproval" /* tokenApproval */
       );
       if (!tokenApprovalStep) {
@@ -2110,22 +2103,21 @@ 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
   });
   const { generateSellTransactionAsync, isPending: generatingSteps } = useGenerateSellTransaction({
     chainId,
-    onSuccess: (steps) => {
-      if (!steps) return;
+    onSuccess: (steps3) => {
+      if (!steps3) return;
     }
   });
   const getSellSteps = async () => {
     if (!wallet) return;
     try {
       const address = await wallet.address();
-      const steps = await generateSellTransactionAsync({
+      const steps3 = await generateSellTransactionAsync({
         collectionAddress,
         walletType: wallet.walletKind,
         marketplace,
@@ -2138,7 +2130,7 @@ var useTransactionSteps2 = ({
         ],
         seller: address
       });
-      return steps;
+      return steps3;
     } catch (error) {
       if (callbacks?.onError) {
         callbacks.onError(error);
@@ -2152,17 +2144,15 @@ var useTransactionSteps2 = ({
     try {
       steps$.approval.isExecuting.set(true);
       const approvalStep = await getSellSteps().then(
-        (steps) => steps?.find((step) => step.id === "tokenApproval" /* tokenApproval */)
+        (steps3) => steps3?.find((step) => step.id === "tokenApproval" /* tokenApproval */)
       );
       const hash = await wallet.handleSendTransactionStep(
         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);
     }
@@ -2171,9 +2161,9 @@ var useTransactionSteps2 = ({
     if (!wallet) return;
     try {
       steps$.transaction.isExecuting.set(true);
-      const steps = await getSellSteps();
-      const transactionStep = steps?.find((step) => step.id === "sell" /* sell */);
-      const signatureStep = steps?.find(
+      const steps3 = await getSellSteps();
+      const transactionStep = steps3?.find((step) => step.id === "sell" /* sell */);
+      const signatureStep = steps3?.find(
         (step) => step.id === "signEIP712" /* signEIP712 */
       );
       console.debug("transactionStep", transactionStep);
@@ -2200,19 +2190,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);
@@ -2254,7 +2238,7 @@ var useTransactionSteps2 = ({
 };
 
 // src/react/ui/modals/SellModal/hooks/useSell.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useSell = ({
   collectibleId,
   chainId,
@@ -2271,7 +2255,7 @@ var useSell = ({
     ordersData,
     marketplace
   });
-  useEffect7(() => {
+  useEffect5(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -2296,11 +2280,11 @@ var useSell = ({
 };
 
 // src/react/ui/modals/SellModal/Modal.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SellModal = () => {
-  return /* @__PURE__ */ jsx20(Show2, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx20(Modal3, {}) });
+  return /* @__PURE__ */ jsx19(Show2, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx19(Modal2, {}) });
 };
-var Modal3 = observer8(() => {
+var Modal2 = observer6(() => {
   const { tokenId, collectionAddress, chainId, order, callbacks } = sellModal$.get();
   const steps$ = sellModal$.steps;
   const { data: collectible } = useCollection({
@@ -2342,7 +2326,7 @@ var Modal3 = observer8(() => {
     steps$
   });
   if (collectionLoading || currencyLoading) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx19(
       LoadingModal,
       {
         isOpen: sellModal$.isOpen.get(),
@@ -2353,7 +2337,7 @@ var Modal3 = observer8(() => {
     );
   }
   if (collectionError || order === void 0 || currencyError) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx19(
       ErrorModal,
       {
         isOpen: sellModal$.isOpen.get(),
@@ -2376,10 +2360,10 @@ var Modal3 = observer8(() => {
       label: "Accept",
       onClick: () => sell(),
       pending: steps$.transaction.isExecuting.get(),
-      disabled: steps$.approval.isExecuting.get() || steps$.approval.exist.get() || order?.quantityRemaining === "0"
+      disabled: isLoading || steps$.approval.isExecuting.get() || steps$.approval.exist.get() || order?.quantityRemaining === "0"
     }
   ];
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs12(
     ActionModal,
     {
       isOpen: sellModal$.isOpen.get(),
@@ -2388,7 +2372,7 @@ var Modal3 = observer8(() => {
       title: "You have an offer",
       ctas,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx19(
           TransactionHeader,
           {
             title: "Offer received",
@@ -2396,7 +2380,7 @@ var Modal3 = observer8(() => {
             date: order && new Date(order.createdAt)
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx19(
           TokenPreview,
           {
             collectionName: collection?.name,
@@ -2405,7 +2389,7 @@ var Modal3 = observer8(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx19(
           TransactionDetails,
           {
             collectibleId: tokenId,
@@ -2425,19 +2409,19 @@ var Modal3 = observer8(() => {
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
 import {
-  Box as Box15,
-  Button as Button3,
+  Box as Box13,
+  Button as Button2,
   CloseIcon as CloseIcon2,
   ExternalLinkIcon,
   IconButton as IconButton3,
   Image as Image5,
-  Text as Text12
+  Text as Text11
 } from "@0xsequence/design-system";
-import { observer as observer9 } from "@legendapp/state/react";
+import { observer as observer7 } 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";
 
 // src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
-import { observable as observable5 } from "@legendapp/state";
+import { observable as observable4 } from "@legendapp/state";
 var initialState4 = {
   isOpen: false,
   open: ({
@@ -2476,23 +2460,23 @@ var initialState4 = {
   },
   callbacks: void 0
 };
-var successfulPurchaseModal$ = observable5(initialState4);
+var successfulPurchaseModal$ = observable4(initialState4);
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var useSuccessfulPurchaseModal = (callbacks) => {
   return {
     show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
     close: () => successfulPurchaseModal$.close()
   };
 };
-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__ */ jsx21(
-          Text12,
+var SuccessfulPurchaseModal = observer7(() => {
+  return /* @__PURE__ */ jsx20(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs13(Portal3, { children: [
+    /* @__PURE__ */ jsx20(Overlay2, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs13(Content3, { className: dialogContent.narrow, children: [
+      /* @__PURE__ */ jsxs13(Box13, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+        /* @__PURE__ */ jsx20(
+          Text11,
           {
             textAlign: "center",
             fontSize: "medium",
@@ -2501,21 +2485,21 @@ var SuccessfulPurchaseModal = observer9(() => {
             children: "Successful purchase!"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx20(
           CollectiblesGrid,
           {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__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" }),
-          /* @__PURE__ */ jsx21(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+        /* @__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__ */ jsx21(SuccessfulPurchaseActions, {})
+        /* @__PURE__ */ jsx20(SuccessfulPurchaseActions, {})
       ] }),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx20(
         Close2,
         {
           onClick: () => {
@@ -2523,16 +2507,16 @@ var SuccessfulPurchaseModal = observer9(() => {
           },
           className: closeButton,
           asChild: true,
-          children: /* @__PURE__ */ jsx21(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+          children: /* @__PURE__ */ jsx20(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
         }
       )
     ] })
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs14(Box15, { display: "flex", flexDirection: "column", gap: "2", children: [
-    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx21(
-      Button3,
+  return /* @__PURE__ */ jsxs13(Box13, { display: "flex", flexDirection: "column", gap: "2", children: [
+    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx20(
+      Button2,
       {
         shape: "square",
         leftIcon: successfulPurchaseModal$.state.ctaOptions.ctaIcon.get() || void 0,
@@ -2541,8 +2525,8 @@ function SuccessfulPurchaseActions() {
         onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
       }
     ),
-    /* @__PURE__ */ jsx21(
-      Button3,
+    /* @__PURE__ */ jsx20(
+      Button2,
       {
         as: "a",
         href: successfulPurchaseModal$.state.explorerUrl.get(),
@@ -2559,15 +2543,15 @@ 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__ */ jsx20(Box13, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
-    return /* @__PURE__ */ jsxs14(
-      Box15,
+    return /* @__PURE__ */ jsxs13(
+      Box13,
       {
         className: collectiblesGridItem,
         position: "relative",
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx20(
             Image5,
             {
               src: collectible.image,
@@ -2578,8 +2562,8 @@ function CollectiblesGrid({ collectibles }) {
               borderRadius: "sm"
             }
           ),
-          showPlus && /* @__PURE__ */ jsx21(
-            Box15,
+          showPlus && /* @__PURE__ */ jsx20(
+            Box13,
             {
               position: "absolute",
               top: "0",
@@ -2591,8 +2575,8 @@ function CollectiblesGrid({ collectibles }) {
               justifyContent: "center",
               background: "backgroundOverlay",
               backdropFilter: "blur",
-              children: /* @__PURE__ */ jsxs14(
-                Text12,
+              children: /* @__PURE__ */ jsxs13(
+                Text11,
                 {
                   fontSize: "small",
                   fontWeight: "medium",
@@ -2620,12 +2604,12 @@ var SuccessfulPurchaseModal_default = SuccessfulPurchaseModal;
 
 // src/react/ui/modals/TransferModal/index.tsx
 import { CloseIcon as CloseIcon3, IconButton as IconButton4 } from "@0xsequence/design-system";
-import { Show as Show3, observer as observer11 } from "@legendapp/state/react";
+import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
 import { Close as Close3, Content as Content4, Overlay as Overlay3, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
-import { useAccount as useAccount4 } from "wagmi";
+import { useAccount as useAccount3 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/_store.ts
-import { observable as observable6 } from "@legendapp/state";
+import { observable as observable5 } from "@legendapp/state";
 var initialState5 = {
   isOpen: false,
   open: ({
@@ -2661,13 +2645,13 @@ var initialState5 = {
   view: "enterReceiverAddress",
   hash: void 0
 };
-var transferModal$ = observable6(initialState5);
+var transferModal$ = observable5(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 { observable as observable7 } from "@legendapp/state";
+import { Box as Box14, Button as Button3, Text as Text12, TextInput } from "@0xsequence/design-system";
+import { observable as observable6 } from "@legendapp/state";
 import { isAddress } from "viem";
-import { useAccount as useAccount3 } from "wagmi";
+import { useAccount as useAccount2 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/messages.ts
 var baseMessages = {
@@ -2736,12 +2720,12 @@ var useHandleTransfer = () => {
 var useHandleTransfer_default = useHandleTransfer;
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var EnterWalletAddressView = () => {
-  const { address } = useAccount3();
+  const { address } = useAccount2();
   const { collectionAddress, collectibleId, chainId, collectionType } = transferModal$.state.get();
   const $quantity = transferModal$.state.quantity;
-  const $invalidQuantity = observable7(false);
+  const $invalidQuantity = observable6(false);
   const isWalletAddressValid = isAddress(
     transferModal$.state.receiverAddress.get()
   );
@@ -2769,17 +2753,17 @@ var EnterWalletAddressView = () => {
     transfer();
     transferModal$.view.set("followWalletInstructions");
   }
-  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(Box16, { display: "flex", flexDirection: "column", gap: "3", children: [
-      /* @__PURE__ */ jsx22(
+  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__ */ jsxs14(Box14, { display: "flex", flexDirection: "column", gap: "3", children: [
+      /* @__PURE__ */ jsx21(
         AlertMessage,
         {
           message: getMessage("enterReceiverAddress"),
           type: "warning"
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx21(
         TextInput,
         {
           label: "Wallet address",
@@ -2790,8 +2774,8 @@ var EnterWalletAddressView = () => {
           placeholder: "Enter wallet address of recipient"
         }
       ),
-      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs15(Fragment2, { children: [
-        /* @__PURE__ */ jsx22(
+      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+        /* @__PURE__ */ jsx21(
           QuantityInput,
           {
             $quantity,
@@ -2800,8 +2784,8 @@ var EnterWalletAddressView = () => {
             maxQuantity: balanceAmount
           }
         ),
-        /* @__PURE__ */ jsx22(
-          Text13,
+        /* @__PURE__ */ jsx21(
+          Text12,
           {
             color: insufficientBalance ? "negative" : "text50",
             fontSize: "small",
@@ -2812,8 +2796,8 @@ var EnterWalletAddressView = () => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx22(
-      Button4,
+    /* @__PURE__ */ jsx21(
+      Button3,
       {
         onClick: handleChangeView,
         disabled: !isWalletAddressValid || insufficientBalance || !$quantity.get(),
@@ -2831,21 +2815,21 @@ 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 { 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: [
-    /* @__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(
+import { Box as Box15, Button as Button4, Text as Text13 } from "@0xsequence/design-system";
+import { observer as observer8 } from "@legendapp/state/react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var FollowWalletInstructionsView = observer8(() => {
+  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(Box15, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx22(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
         type: "info"
       }
     ) }),
-    /* @__PURE__ */ jsx23(
-      Button5,
+    /* @__PURE__ */ jsx22(
+      Button4,
       {
         disabled: true,
         title: "Transfer",
@@ -2862,9 +2846,9 @@ var FollowWalletInstructionsView = observer10(() => {
 var followWalletInstructions_default = FollowWalletInstructionsView;
 
 // src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var useTransferModal = () => {
-  const { chainId: accountChainId } = useAccount4();
+  const { chainId: accountChainId } = useAccount3();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
   const openModal = (args) => {
     transferModal$.open(args);
@@ -2898,41 +2882,59 @@ var useTransferModal = () => {
   };
 };
 var TransferModal = () => {
-  return /* @__PURE__ */ jsx24(Show3, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx24(Modal4, {}) });
+  return /* @__PURE__ */ jsx23(Show3, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx23(Modal3, {}) });
 };
-var Modal4 = () => {
-  return /* @__PURE__ */ jsx24(ModalContent, {});
+var Modal3 = () => {
+  return /* @__PURE__ */ jsx23(ModalContent, {});
 };
-var ModalContent = observer11(() => {
-  return /* @__PURE__ */ jsx24(Root4, { open: true, children: /* @__PURE__ */ jsxs17(Portal4, { children: [
-    /* @__PURE__ */ jsx24(Overlay3, { className: dialogOverlay2 }),
-    /* @__PURE__ */ jsxs17(Content4, { className: transferModalContent, children: [
-      /* @__PURE__ */ jsx24(TransactionModalView, {}),
-      /* @__PURE__ */ jsx24(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx24(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
+var ModalContent = observer9(() => {
+  return /* @__PURE__ */ jsx23(Root4, { open: true, children: /* @__PURE__ */ jsxs16(Portal4, { children: [
+    /* @__PURE__ */ jsx23(Overlay3, { className: dialogOverlay2 }),
+    /* @__PURE__ */ jsxs16(Content4, { className: transferModalContent, children: [
+      /* @__PURE__ */ jsx23(TransactionModalView, {}),
+      /* @__PURE__ */ jsx23(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx23(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
     ] })
   ] }) });
 });
-var TransactionModalView = observer11(() => {
+var TransactionModalView = observer9(() => {
   const { view } = transferModal$.get();
   switch (view) {
     case "enterReceiverAddress":
-      return /* @__PURE__ */ jsx24(enterWalletAddress_default, {});
+      return /* @__PURE__ */ jsx23(enterWalletAddress_default, {});
     case "followWalletInstructions":
-      return /* @__PURE__ */ jsx24(followWalletInstructions_default, {});
+      return /* @__PURE__ */ jsx23(followWalletInstructions_default, {});
     default:
       return null;
   }
 });
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { Box as Box18 } from "@0xsequence/design-system";
-import { Show as Show4, observer as observer12 } from "@legendapp/state/react";
+import { Box as Box16 } from "@0xsequence/design-system";
+import { Show as Show4, observer as observer10 } from "@legendapp/state/react";
 import { parseUnits as parseUnits4 } from "viem";
-import { useAccount as useAccount5 } from "wagmi";
+import { useAccount as useAccount4 } from "wagmi";
 
 // src/react/ui/modals/CreateListingModal/store.ts
-import { observable as observable8 } from "@legendapp/state";
+import { observable as observable7 } from "@legendapp/state";
 import { addDays as addDays3 } from "date-fns/addDays";
+var listingPrice = {
+  amountRaw: "0",
+  currency: {}
+};
+var approval2 = {
+  exist: false,
+  isExecuting: false,
+  execute: () => Promise.resolve()
+};
+var transaction2 = {
+  exist: false,
+  isExecuting: false,
+  execute: () => Promise.resolve()
+};
+var steps2 = {
+  approval: { ...approval2 },
+  transaction: { ...transaction2 }
+};
 var initialState6 = {
   isOpen: false,
   collectionAddress: "",
@@ -2941,26 +2943,12 @@ var initialState6 = {
   orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
   collectionName: "",
   collectionType: void 0,
-  listingPrice: {
-    amountRaw: "0",
-    currency: {}
-  },
+  listingPrice: { ...listingPrice },
   quantity: "1",
   invalidQuantity: false,
   expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
   callbacks: void 0,
-  steps: {
-    approval: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    },
-    transaction: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    }
-  }
+  steps: { ...steps2 }
 };
 var actions2 = {
   open: (args) => {
@@ -2974,15 +2962,17 @@ var actions2 = {
   close: () => {
     createListingModal$.isOpen.set(false);
     createListingModal$.set({ ...initialState6, ...actions2 });
+    createListingModal$.listingPrice.set({ ...listingPrice });
+    createListingModal$.steps.set({ ...steps2 });
   }
 };
-var createListingModal$ = observable8({
+var createListingModal$ = observable7({
   ...initialState6,
   ...actions2
 });
 
 // src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
 import { skipToken as skipToken2, useQuery as useQuery3 } from "@tanstack/react-query";
@@ -3010,8 +3000,8 @@ var useGetTokenApprovalData3 = (params) => {
         orderbook: params.orderbook,
         listing
       };
-      const steps = await marketplaceClient.generateListingTransaction(args).then((resp) => resp.steps);
-      const tokenApprovalStep = steps.find(
+      const steps3 = await marketplaceClient.generateListingTransaction(args).then((resp) => resp.steps);
+      const tokenApprovalStep = steps3.find(
         (step) => step.id === "tokenApproval" /* tokenApproval */
       );
       if (!tokenApprovalStep) {
@@ -3046,18 +3036,17 @@ 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) => {
-      if (!steps) return;
+    onSuccess: (steps3) => {
+      if (!steps3) return;
     }
   });
   const getListingSteps = async () => {
     if (!wallet) return;
     try {
       const address = await wallet.address();
-      const steps = await generateListingTransactionAsync({
+      const steps3 = await generateListingTransactionAsync({
         collectionAddress,
         owner: address,
         walletType: wallet.walletKind,
@@ -3068,7 +3057,7 @@ var useTransactionSteps3 = ({
           expiry
         }
       });
-      return steps;
+      return steps3;
     } catch (error) {
       if (callbacks?.onError) {
         callbacks.onError(error);
@@ -3082,17 +3071,15 @@ var useTransactionSteps3 = ({
     try {
       steps$.approval.isExecuting.set(true);
       const approvalStep = await getListingSteps().then(
-        (steps) => steps?.find((step) => step.id === "tokenApproval" /* tokenApproval */)
+        (steps3) => steps3?.find((step) => step.id === "tokenApproval" /* tokenApproval */)
       );
       const hash = await wallet.handleSendTransactionStep(
         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);
     }
@@ -3101,11 +3088,11 @@ var useTransactionSteps3 = ({
     if (!wallet) return;
     try {
       steps$.transaction.isExecuting.set(true);
-      const steps = await getListingSteps();
-      const transactionStep = steps?.find(
+      const steps3 = await getListingSteps();
+      const transactionStep = steps3?.find(
         (step) => step.id === "createListing" /* createListing */
       );
-      const signatureStep = steps?.find(
+      const signatureStep = steps3?.find(
         (step) => step.id === "signEIP712" /* signEIP712 */
       );
       console.debug("transactionStep", transactionStep);
@@ -3138,19 +3125,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);
@@ -3217,7 +3198,7 @@ var useCreateListing = ({
       enabled: !marketplaceIsLoading
     }
   });
-  useEffect8(() => {
+  useEffect6(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -3241,16 +3222,16 @@ var useCreateListing = ({
 };
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var CreateListingModal = () => {
-  return /* @__PURE__ */ jsx25(Show4, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx25(Modal5, {}) });
+  return /* @__PURE__ */ jsx24(Show4, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx24(Modal4, {}) });
 };
-var Modal5 = observer12(() => {
+var Modal4 = observer10(() => {
   const state = createListingModal$.get();
   const {
     collectionAddress,
     chainId,
-    listingPrice,
+    listingPrice: listingPrice2,
     collectibleId,
     orderbookKind,
     callbacks
@@ -3273,7 +3254,7 @@ var Modal5 = observer12(() => {
     chainId,
     collectionAddress
   });
-  const { address } = useAccount5();
+  const { address } = useAccount4();
   const { data: balance } = useBalanceOfCollectible({
     chainId,
     collectionAddress,
@@ -3290,8 +3271,8 @@ var Modal5 = observer12(() => {
           collectible?.decimals || 0
         ).toString(),
         expiry: dateToUnixTime(createListingModal$.expiry.get()),
-        currencyAddress: listingPrice.currency.contractAddress,
-        pricePerToken: listingPrice.amountRaw
+        currencyAddress: listingPrice2.currency.contractAddress,
+        pricePerToken: listingPrice2.amountRaw
       }
     },
     chainId,
@@ -3302,7 +3283,7 @@ var Modal5 = observer12(() => {
     steps$
   });
   if (collectableIsLoading || collectionIsLoading) {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx24(
       LoadingModal,
       {
         isOpen: createListingModal$.isOpen.get(),
@@ -3313,7 +3294,7 @@ var Modal5 = observer12(() => {
     );
   }
   if (collectableIsError || collectionIsError) {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx24(
       ErrorModal,
       {
         isOpen: createListingModal$.isOpen.get(),
@@ -3330,16 +3311,17 @@ var Modal5 = observer12(() => {
       hidden: !steps$.approval.exist.get(),
       pending: steps$?.approval.isExecuting.get(),
       variant: "glass",
-      disabled: createListingModal$.invalidQuantity.get() || listingPrice.amountRaw === "0" || steps$?.approval.isExecuting.get() || tokenApprovalIsLoading || isLoading
+      disabled: createListingModal$.invalidQuantity.get() || listingPrice2.amountRaw === "0" || steps$?.approval.isExecuting.get() || tokenApprovalIsLoading || isLoading
     },
     {
       label: "List item for sale",
       onClick: () => createListing(),
       pending: steps$?.transaction.isExecuting.get(),
-      disabled: steps$.approval.exist.get() || tokenApprovalIsLoading || listingPrice.amountRaw === "0" || createListingModal$.invalidQuantity.get() || isLoading
+      testid: "create-listing-submit-button",
+      disabled: steps$.approval.exist.get() || tokenApprovalIsLoading || listingPrice2.amountRaw === "0" || createListingModal$.invalidQuantity.get() || isLoading
     }
   ];
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs17(
     ActionModal,
     {
       isOpen: createListingModal$.isOpen.get(),
@@ -3348,7 +3330,7 @@ var Modal5 = observer12(() => {
       title: "List item for sale",
       ctas,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(
           TokenPreview,
           {
             collectionName: collection?.name,
@@ -3357,26 +3339,26 @@ var Modal5 = observer12(() => {
             chainId
           }
         ),
-        /* @__PURE__ */ jsxs18(Box18, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
-          /* @__PURE__ */ jsx25(
-            priceInput_default,
+        /* @__PURE__ */ jsxs17(Box16, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+          /* @__PURE__ */ jsx24(
+            PriceInput,
             {
               chainId,
               collectionAddress,
               $price: createListingModal$.listingPrice
             }
           ),
-          listingPrice.amountRaw !== "0" && /* @__PURE__ */ jsx25(
+          listingPrice2.amountRaw !== "0" && /* @__PURE__ */ jsx24(
             FloorPriceText,
             {
               tokenId: collectibleId,
               chainId,
               collectionAddress,
-              price: listingPrice
+              price: listingPrice2
             }
           )
         ] }),
-        collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx25(
+        collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx24(
           QuantityInput,
           {
             $quantity: createListingModal$.quantity,
@@ -3385,15 +3367,15 @@ var Modal5 = observer12(() => {
             maxQuantity: balance?.balance
           }
         ),
-        /* @__PURE__ */ jsx25(expirationDateSelect_default, { $date: createListingModal$.expiry }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(expirationDateSelect_default, { $date: createListingModal$.expiry }),
+        /* @__PURE__ */ jsx24(
           TransactionDetails,
           {
             collectibleId,
             collectionAddress,
             chainId,
             price: createListingModal$.listingPrice.get(),
-            currencyImageUrl: listingPrice.currency.imageUrl
+            currencyImageUrl: listingPrice2.currency.imageUrl
           }
         )
       ]
@@ -3405,7 +3387,7 @@ var Modal5 = observer12(() => {
 import { use$ as use$2 } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/store.ts
-import { observable as observable9 } from "@legendapp/state";
+import { observable as observable8 } from "@legendapp/state";
 var initialState7 = {
   isOpen: false,
   open: ({
@@ -3443,13 +3425,13 @@ var initialState7 = {
   },
   callbacks: void 0
 };
-var buyModal$ = observable9(initialState7);
+var buyModal$ = observable8(initialState7);
 
 // src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { parseUnits as parseUnits5 } from "viem";
 function CheckoutModal({ buy, collectable, order }) {
-  useEffect9(() => {
+  useEffect7(() => {
     const executeBuy = () => {
       buy({
         orderId: order.orderId,
@@ -3464,11 +3446,11 @@ 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 { observer as observer13 } from "@legendapp/state/react";
+import { Box as Box17, Text as Text14, TokenImage as TokenImage2 } from "@0xsequence/design-system";
+import { observer as observer11 } from "@legendapp/state/react";
 import { formatUnits as formatUnits4, parseUnits as parseUnits6 } from "viem";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var ERC1155QuantityModal = observer13(
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var ERC1155QuantityModal = observer11(
   ({ buy, collectable, order }) => {
     const currencyOptions = useCurrencyOptions({
       collectionAddress: order.collectionContractAddress
@@ -3486,7 +3468,7 @@ var ERC1155QuantityModal = observer13(
     if (buyModal$.state.checkoutModalLoaded.get()) {
       return null;
     }
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx25(
       ActionModal,
       {
         isOpen: buyModal$.isOpen.get(),
@@ -3512,8 +3494,8 @@ var ERC1155QuantityModal = observer13(
             pending: buyModal$.state.checkoutModalIsLoading.get()
           }
         ],
-        children: /* @__PURE__ */ jsxs19(Box19, { display: "flex", flexDirection: "column", gap: "4", children: [
-          /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsxs18(Box17, { display: "flex", flexDirection: "column", gap: "4", children: [
+          /* @__PURE__ */ jsx25(
             QuantityInput,
             {
               $quantity: buyModal$.state.quantity,
@@ -3522,11 +3504,11 @@ var ERC1155QuantityModal = observer13(
               maxQuantity: order.quantityRemaining
             }
           ),
-          /* @__PURE__ */ jsxs19(Box19, { 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__ */ jsx26(TokenImage2, { src: currency?.imageUrl, size: "xs" }),
-              /* @__PURE__ */ jsx26(Text15, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits4(BigInt(totalPrice), currency?.decimals || 0) })
+          /* @__PURE__ */ jsxs18(Box17, { display: "flex", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx25(Text14, { color: "text50", fontSize: "small", children: "Total Price" }),
+            /* @__PURE__ */ jsxs18(Box17, { display: "flex", alignItems: "center", gap: "2", children: [
+              /* @__PURE__ */ jsx25(TokenImage2, { src: currency?.imageUrl, size: "xs" }),
+              /* @__PURE__ */ jsx25(Text14, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits4(BigInt(totalPrice), currency?.decimals || 0) })
             ] })
           ] })
         ] })
@@ -3647,7 +3629,8 @@ var useBuyCollectable = ({
     isLoading,
     isError,
     buy: async (input) => {
-      const { steps } = await marketplaceClient.generateBuyTransaction({
+      setCheckoutModalIsLoading(true);
+      const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
         collectionAddress,
         buyer: await wallet.address(),
         marketplace: input.marketplace,
@@ -3662,7 +3645,7 @@ var useBuyCollectable = ({
       });
       setCheckoutModalLoaded(true);
       setCheckoutModalIsLoading(false);
-      const step = steps[0];
+      const step = steps3[0];
       openSelectPaymentModal({
         chain: chainId,
         collectibles: [
@@ -3701,11 +3684,11 @@ var useBuyCollectable = ({
 };
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var BuyModal = () => {
   const isOpen = use$2(buyModal$.isOpen);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx27(BuyModalContent, {});
+  return /* @__PURE__ */ jsx26(BuyModalContent, {});
 };
 var BuyModalContent = () => {
   const chainId = String(use$2(buyModal$.state.order.chainId));
@@ -3717,6 +3700,7 @@ var BuyModalContent = () => {
   const callbacks = use$2(buyModal$.callbacks);
   const order = use$2(buyModal$.state.order);
   const isOpen = use$2(buyModal$.isOpen);
+  const checkoutModalIsLoading = use$2(buyModal$.state.checkoutModalIsLoading);
   const setCheckoutModalIsLoading = use$2(buyModal$.setCheckoutModalIsLoading);
   const setCheckoutModalLoaded = use$2(buyModal$.setCheckoutModalLoaded);
   const { collection, collectable, checkoutOptions, isLoading, isError } = useLoadData({
@@ -3739,8 +3723,8 @@ var BuyModalContent = () => {
     setCheckoutModalIsLoading,
     setCheckoutModalLoaded
   });
-  if (isLoading || !collection || !collectable || !checkoutOptions || buyIsLoading) {
-    return /* @__PURE__ */ jsx27(
+  if (isLoading || checkoutModalIsLoading || !collection || !collectable || !checkoutOptions || buyIsLoading) {
+    return /* @__PURE__ */ jsx26(
       LoadingModal,
       {
         isOpen,
@@ -3751,7 +3735,7 @@ var BuyModalContent = () => {
     );
   }
   if (buyIsError || isError) {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx26(
       ErrorModal,
       {
         isOpen,
@@ -3761,7 +3745,7 @@ var BuyModalContent = () => {
       }
     );
   }
-  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx27(
+  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx26(
     CheckoutModal,
     {
       buy: (input) => buy({ ...input, checkoutOptions }),
@@ -3769,7 +3753,7 @@ var BuyModalContent = () => {
       order
     },
     modalId
-  ) : /* @__PURE__ */ jsx27(
+  ) : /* @__PURE__ */ jsx26(
     ERC1155QuantityModal,
     {
       buy: (input) => buy({ ...input, checkoutOptions }),
@@ -3783,18 +3767,17 @@ var BuyModalContent = () => {
 };
 
 // src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
-var ModalProvider = observer14(() => {
-  return /* @__PURE__ */ jsxs20(Fragment3, { children: [
-    /* @__PURE__ */ jsx28(AccountModal, {}),
-    /* @__PURE__ */ jsx28(CreateListingModal, {}),
-    /* @__PURE__ */ jsx28(MakeOfferModal, {}),
-    /* @__PURE__ */ jsx28(TransferModal, {}),
-    /* @__PURE__ */ jsx28(SellModal, {}),
-    /* @__PURE__ */ jsx28(BuyModal, {}),
-    /* @__PURE__ */ jsx28(SuccessfulPurchaseModal_default, {}),
-    /* @__PURE__ */ jsx28(switchChainModal_default, {}),
-    /* @__PURE__ */ jsx28(transactionStatusModal_default, {})
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var ModalProvider = observer12(() => {
+  return /* @__PURE__ */ jsxs19(Fragment3, { children: [
+    /* @__PURE__ */ jsx27(CreateListingModal, {}),
+    /* @__PURE__ */ jsx27(MakeOfferModal, {}),
+    /* @__PURE__ */ jsx27(TransferModal, {}),
+    /* @__PURE__ */ jsx27(SellModal, {}),
+    /* @__PURE__ */ jsx27(BuyModal, {}),
+    /* @__PURE__ */ jsx27(SuccessfulPurchaseModal_default, {}),
+    /* @__PURE__ */ jsx27(switchChainModal_default, {}),
+    /* @__PURE__ */ jsx27(transactionStatusModal_default, {})
   ] });
 });
 
@@ -3829,14 +3812,14 @@ 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 { useAccount as useAccount7 } from "wagmi";
+import { useState as useState7 } from "react";
+import { Box as Box21, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
+import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
-import { Box as Box20 } from "@0xsequence/design-system";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
-var Svg = () => /* @__PURE__ */ jsxs21(
+import { Box as Box18 } from "@0xsequence/design-system";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var Svg = () => /* @__PURE__ */ jsxs20(
   "svg",
   {
     width: "16",
@@ -3847,8 +3830,8 @@ var Svg = () => /* @__PURE__ */ jsxs21(
     role: "img",
     "aria-labelledby": "diamond-eye-title",
     children: [
-      /* @__PURE__ */ jsx29("title", { id: "diamond-eye-title", children: "Diamond Eye Icon" }),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx28("title", { id: "diamond-eye-title", children: "Diamond Eye Icon" }),
+      /* @__PURE__ */ jsx28(
         "path",
         {
           fillRule: "evenodd",
@@ -3860,8 +3843,8 @@ var Svg = () => /* @__PURE__ */ jsxs21(
     ]
   }
 );
-var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
-  Box20,
+var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx28(
+  Box18,
   {
     as: Svg,
     className: iconVariants({
@@ -3873,10 +3856,10 @@ var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx29(
 var DiamondEye_default = SvgDiamondEyeIcon;
 
 // src/react/ui/components/_internals/action-button/ActionButton.tsx
-import { Button as Button6 } from "@0xsequence/design-system";
-import { observer as observer15 } from "@legendapp/state/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var ActionButton = observer15(
+import { Button as Button5 } from "@0xsequence/design-system";
+import { observer as observer13 } from "@legendapp/state/react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var ActionButton = observer13(
   ({
     collectionAddress,
     chainId,
@@ -3894,7 +3877,7 @@ var ActionButton = observer15(
     if (action === "Buy" /* BUY */) {
       if (!lowestListing)
         throw new InvalidStepError("BUY", "lowestListing is required");
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Buy",
@@ -3910,7 +3893,7 @@ var ActionButton = observer15(
     if (action === "Sell" /* SELL */) {
       if (!highestOffer)
         throw new InvalidStepError("SELL", "highestOffer is required");
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Sell",
@@ -3924,7 +3907,7 @@ var ActionButton = observer15(
       );
     }
     if (action === "Create listing" /* LIST */) {
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Create listing",
@@ -3938,7 +3921,7 @@ var ActionButton = observer15(
       );
     }
     if (action === "Make an offer" /* OFFER */) {
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Make an offer",
@@ -3952,7 +3935,7 @@ var ActionButton = observer15(
       );
     }
     if (action === "Transfer" /* TRANSFER */) {
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
           label: "Transfer",
@@ -3968,8 +3951,8 @@ var ActionButton = observer15(
   }
 );
 function ActionButtonBody({ label, onClick }) {
-  return /* @__PURE__ */ jsx30(
-    Button6,
+  return /* @__PURE__ */ jsx29(
+    Button5,
     {
       variant: "primary",
       label,
@@ -3986,14 +3969,14 @@ 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 Box20, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits5 } from "viem";
-import { useAccount as useAccount6 } from "wagmi";
+import { useAccount as useAccount5 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
-import { Box as Box21 } from "@0xsequence/design-system";
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
-var Svg2 = () => /* @__PURE__ */ jsxs22(
+import { Box as Box19 } from "@0xsequence/design-system";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+var Svg2 = () => /* @__PURE__ */ jsxs21(
   "svg",
   {
     width: "17",
@@ -4004,8 +3987,8 @@ var Svg2 = () => /* @__PURE__ */ jsxs22(
     role: "img",
     "aria-labelledby": "bell-title",
     children: [
-      /* @__PURE__ */ jsx31("title", { id: "bell-title", children: "Notification Bell" }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx30("title", { id: "bell-title", children: "Notification Bell" }),
+      /* @__PURE__ */ jsx30(
         "path",
         {
           fillRule: "evenodd",
@@ -4017,8 +4000,8 @@ var Svg2 = () => /* @__PURE__ */ jsxs22(
     ]
   }
 );
-var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
-  Box21,
+var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
+  Box19,
   {
     as: Svg2,
     className: iconVariants({
@@ -4030,7 +4013,7 @@ var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx31(
 var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var Footer = ({
   name,
   type,
@@ -4041,7 +4024,7 @@ var Footer = ({
   balance,
   isAnimated
 }) => {
-  const { address } = useAccount6();
+  const { address } = useAccount5();
   const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
   if (name.length > 15 && highestOffer) {
     name = `${name.substring(0, 13)}...`;
@@ -4049,8 +4032,8 @@ var Footer = ({
   if (name.length > 17 && !highestOffer) {
     name = `${name.substring(0, 17)}...`;
   }
-  return /* @__PURE__ */ jsxs23(
-    Box22,
+  return /* @__PURE__ */ jsxs22(
+    Box20,
     {
       display: "flex",
       flexDirection: "column",
@@ -4061,8 +4044,8 @@ var Footer = ({
       position: "relative",
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
-        /* @__PURE__ */ jsxs23(
-          Box22,
+        /* @__PURE__ */ jsxs22(
+          Box20,
           {
             display: "flex",
             alignItems: "center",
@@ -4070,8 +4053,8 @@ var Footer = ({
             position: "relative",
             width: "full",
             children: [
-              /* @__PURE__ */ jsx32(
-                Text16,
+              /* @__PURE__ */ jsx31(
+                Text15,
                 {
                   color: "text100",
                   fontSize: "normal",
@@ -4081,7 +4064,7 @@ var Footer = ({
                   children: name
                 }
               ),
-              highestOffer && onOfferClick && /* @__PURE__ */ jsx32(
+              highestOffer && onOfferClick && /* @__PURE__ */ jsx31(
                 IconButton5,
                 {
                   size: "xs",
@@ -4094,16 +4077,16 @@ var Footer = ({
                     e.stopPropagation();
                     onOfferClick?.();
                   },
-                  icon: (props) => /* @__PURE__ */ jsx32(Bell_default, { ...props, size: "xs" })
+                  icon: (props) => /* @__PURE__ */ jsx31(Bell_default, { ...props, size: "xs" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23(Box22, { display: "flex", alignItems: "center", gap: "1", children: [
-          listed && /* @__PURE__ */ jsx32(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
-          /* @__PURE__ */ jsxs23(
-            Text16,
+        /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
+          listed && /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
+          /* @__PURE__ */ jsxs22(
+            Text15,
             {
               color: listed ? "text100" : "text50",
               fontSize: "small",
@@ -4120,7 +4103,7 @@ var Footer = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx32(TokenTypeBalancePill, { balance, type })
+        /* @__PURE__ */ jsx31(TokenTypeBalancePill, { balance, type })
       ]
     }
   );
@@ -4130,8 +4113,8 @@ var TokenTypeBalancePill = ({
   type
 }) => {
   const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
-  return /* @__PURE__ */ jsx32(
-    Text16,
+  return /* @__PURE__ */ jsx31(
+    Text15,
     {
       background: "backgroundSecondary",
       color: "text80",
@@ -4147,25 +4130,25 @@ var TokenTypeBalancePill = ({
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
-  return /* @__PURE__ */ jsxs24(
-    Box23,
+  return /* @__PURE__ */ jsxs23(
+    Box21,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx32(
           Skeleton8,
           {
             size: "lg",
             style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
           }
         ),
-        /* @__PURE__ */ jsxs24(
-          Box23,
+        /* @__PURE__ */ jsxs23(
+          Box21,
           {
             display: "flex",
             flexDirection: "column",
@@ -4174,8 +4157,8 @@ function CollectibleSkeleton() {
             paddingBottom: "4",
             marginTop: "2",
             children: [
-              /* @__PURE__ */ jsx33(Skeleton8, { size: "lg" }),
-              /* @__PURE__ */ jsx33(Skeleton8, { size: "sm" })
+              /* @__PURE__ */ jsx32(Skeleton8, { size: "lg" }),
+              /* @__PURE__ */ jsx32(Skeleton8, { size: "sm" })
             ]
           }
         )
@@ -4195,9 +4178,9 @@ function CollectibleCard({
   balance,
   cardLoading
 }) {
-  const { address: accountAddress } = useAccount7();
+  const { address: accountAddress } = useAccount6();
   const collectibleMetadata = lowestListing?.metadata;
-  const [imageLoadingError, setImageLoadingError] = useState8(false);
+  const [imageLoadingError, setImageLoadingError] = useState7(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
     chainId: String(chainId),
     collectionAddress,
@@ -4209,21 +4192,21 @@ function CollectibleCard({
     (currency) => currency.contractAddress === lowestListing?.order?.priceCurrencyAddress
   );
   if (highestOfferLoading || cardLoading) {
-    return /* @__PURE__ */ jsx33(CollectibleSkeleton, {});
+    return /* @__PURE__ */ jsx32(CollectibleSkeleton, {});
   }
   const action = balance ? highestOffer?.order && "Sell" /* SELL */ || !lowestListing?.order && "Create listing" /* LIST */ || "Transfer" /* TRANSFER */ : lowestListing?.order && "Buy" /* BUY */ || "Make an offer" /* OFFER */;
   const name = collectibleMetadata?.name;
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
-  return /* @__PURE__ */ jsx33(
-    Box23,
+  return /* @__PURE__ */ jsx32(
+    Box21,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
-      children: /* @__PURE__ */ jsx33(
-        Box23,
+      children: /* @__PURE__ */ jsx32(
+        Box21,
         {
           display: "flex",
           flexDirection: "column",
@@ -4238,8 +4221,8 @@ function CollectibleCard({
           cursor: "pointer",
           padding: "0",
           className: collectibleTileWrapper,
-          children: /* @__PURE__ */ jsxs24("article", { style: { width: "100%" }, children: [
-            externalUrl && /* @__PURE__ */ jsx33(
+          children: /* @__PURE__ */ jsxs23("article", { style: { width: "100%" }, children: [
+            externalUrl && /* @__PURE__ */ jsx32(
               IconButton6,
               {
                 as: "a",
@@ -4256,7 +4239,7 @@ function CollectibleCard({
                 icon: DiamondEye_default
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx32(
               "img",
               {
                 src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
@@ -4265,7 +4248,7 @@ function CollectibleCard({
                 onError: () => setImageLoadingError(true)
               }
             ),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx32(
               Footer,
               {
                 name: name || "",
@@ -4278,15 +4261,15 @@ function CollectibleCard({
                 isAnimated: !!action
               }
             ),
-            accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx33(
-              Box23,
+            accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx32(
+              Box21,
               {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "2",
                 className: actionWrapper,
-                children: /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx32(
                   ActionButton,
                   {
                     chainId: String(chainId),
@@ -4318,4 +4301,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-SEISACMH.js.map
+//# sourceMappingURL=chunk-5UCKYAMR.js.map