@0xsequence/marketplace-sdk 0.3.3 → 0.3.4

package/dist/{chunk-ZZMM3IVS.js → chunk-PMDJARYX.js}

@@ -7,7 +7,7 @@ import {
   MinusIcon_default,
   PlusIcon_default,
   PositiveCircleIcon_default
-} from "./chunk-4YU2UPYH.js";
+} from "./chunk-FFCNYF3S.js";
 import {
   actionWrapper,
   closeButton,
@@ -31,10 +31,11 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-RZSZNVEH.js";
+} from "./chunk-L6GSYPCR.js";
 import {
   AlertMessage,
   switchChainModal_default,
+  useBalanceOfCollectible,
   useBuyCollectable,
   useCollectible,
   useCollection,
@@ -47,470 +48,309 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-RJK7PUJE.js";
+} from "./chunk-6LQST3KZ.js";
 import {
   iconVariants
 } from "./chunk-SBVLWSRZ.js";
 import {
   calculatePriceDifferencePercentage,
   truncateMiddle
-} from "./chunk-SPW24Y7I.js";
+} from "./chunk-OUZ42I6B.js";
 import {
   balanceQueries,
   collectableKeys,
   getQueryClient
-} from "./chunk-GZG2QO64.js";
+} from "./chunk-D3HRXVYJ.js";
+import {
+  InvalidContractTypeError,
+  InvalidStepError
+} from "./chunk-T2AMWIKD.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer14 } from "@legendapp/state/react";
 
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import {
-  CloseIcon,
-  IconButton,
-  Skeleton,
-  Text as Text4
-} from "@0xsequence/design-system";
-import { observer as observer2 } from "@legendapp/state/react";
-import { Close, Content, Overlay, Portal, Root } from "@radix-ui/react-dialog";
-import { useEffect as useEffect2 } from "react";
-import { useTransactionReceipt } from "wagmi";
-
-// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
-import { networks } from "@0xsequence/network";
-import { Box, Spinner, Text } from "@0xsequence/design-system";
+// 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";
-function TransactionFooter({
-  transactionHash,
-  isConfirming,
-  isConfirmed,
-  isFailed,
-  chainId
+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" })
+  ] });
+});
+
+// src/react/ui/modals/BuyModal/index.tsx
+import { Show, observer as observer2, useSelector } from "@legendapp/state/react";
+import { useEffect } from "react";
+
+// src/react/ui/modals/_internal/components/quantityInput/index.tsx
+import { Box as Box2, IconButton, NumericInput } from "@0xsequence/design-system";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function QuantityInput({
+  $quantity,
+  $invalidQuantity,
+  decimals,
+  maxQuantity
 }) {
-  const icon = isConfirming && /* @__PURE__ */ jsx(Spinner, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx(PositiveCircleIcon_default, { size: "md" });
-  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
-  const transactionUrl = `${networks[chainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-    icon,
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        color: "text50",
-        fontSize: "normal",
-        fontWeight: "medium",
-        marginLeft: "2",
-        fontFamily: "body",
-        children: title
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
+  function handleChangeQuantity(value) {
+    const formattedValue = formatQuantity(value);
+    $quantity.set(formattedValue);
+    validateQuantity(formattedValue);
+  }
+  function validateQuantity(value) {
+    if (!value || value.trim() === "" || isNaN(Number(value))) {
+      $invalidQuantity.set(true);
+      return;
+    }
+    const numValue = Number(value);
+    $invalidQuantity.set(numValue <= 0 || numValue > Number(maxQuantity));
+  }
+  function formatQuantity(value) {
+    if (!value || isNaN(Number(value))) {
+      return "0";
+    }
+    if (Number(value) > Number(maxQuantity)) {
+      return maxQuantity;
+    }
+    return value;
+  }
+  function handleIncrement() {
+    const currentValue = Number(quantity) || 0;
+    const maxValue = Number(maxQuantity);
+    const newValue = Math.min(currentValue + 1, maxValue);
+    handleChangeQuantity(newValue.toString());
+    return newValue.toString();
+  }
+  function handleDecrement() {
+    const minValue = decimals ? Number(`0.${"0".repeat(decimals - 1)}1`) : 1;
+    const currentValue = Number(quantity) || 0;
+    const newValue = Math.max(currentValue - 1, minValue);
+    const stringValue = newValue.toString();
+    handleChangeQuantity(stringValue);
+    return stringValue;
+  }
+  const quantity = $quantity.get();
+  const invalidQuantity = $invalidQuantity.get();
+  return /* @__PURE__ */ jsxs2(Box2, { className: quantityInputWrapper, children: [
+    /* @__PURE__ */ jsx2(
+      NumericInput,
       {
-        as: "a",
-        flexGrow: "1",
-        marginLeft: "2",
-        href: transactionUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        textAlign: "right",
-        textDecoration: "none",
-        children: /* @__PURE__ */ jsx(
-          Text,
+        name: "quantity",
+        decimals: decimals || 0,
+        paddingLeft: "1",
+        label: "Enter quantity",
+        labelLocation: "top",
+        controls: /* @__PURE__ */ jsxs2(
+          Box2,
           {
-            color: "polygonLight",
-            textAlign: "right",
-            fontSize: "normal",
-            fontWeight: "medium",
-            fontFamily: "body",
-            children: truncateMiddle(transactionHash, 4, 4)
+            display: "flex",
+            alignItems: "center",
+            gap: "1",
+            marginRight: "2",
+            children: [
+              /* @__PURE__ */ jsx2(
+                IconButton,
+                {
+                  disabled: !quantity || Number(quantity) <= 0,
+                  onClick: handleDecrement,
+                  background: "buttonGlass",
+                  size: "xs",
+                  icon: MinusIcon_default
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                IconButton,
+                {
+                  onClick: handleIncrement,
+                  background: "buttonGlass",
+                  size: "xs",
+                  icon: PlusIcon_default
+                }
+              )
+            ]
           }
-        )
+        ),
+        numeric: true,
+        value: quantity,
+        onChange: (e) => handleChangeQuantity(e.target.value),
+        width: "full"
       }
-    )
+    ),
+    invalidQuantity && /* @__PURE__ */ jsx2(Box2, { color: "negative", fontSize: "small", children: invalidQuantity })
   ] });
 }
 
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { Box as Box3, Image, NetworkImage, Text as Text3 } from "@0xsequence/design-system";
-import { observer } from "@legendapp/state/react";
-import { formatUnits } from "viem";
-
-// src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box2, Text as Text2 } from "@0xsequence/design-system";
-import { formatDistanceToNow } from "date-fns";
-import { useState, useEffect } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function TimeAgo({ date }) {
-  const [timeAgo, setTimeAgo] = useState("");
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTimeAgo(formatDistanceToNow(date));
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [date]);
-  return /* @__PURE__ */ jsx2(
-    Box2,
-    {
-      flexGrow: "1",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx2(Text2, { color: "text50", fontSize: "small", children: timeAgo })
-    }
-  );
-}
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
-import { observable } from "@legendapp/state";
+// src/react/ui/modals/BuyModal/_store.ts
+import { observable as observable2 } from "@legendapp/state";
 var initialState = {
   isOpen: false,
   open: ({
-    hash,
-    price,
-    collectionAddress,
-    chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
-    type,
     callbacks,
-    queriesToInvalidate
+    defaultCallbacks,
+    ...args
   }) => {
-    transactionStatusModal$.state.set({
-      ...transactionStatusModal$.state.get(),
-      hash,
-      price,
-      collectionAddress,
-      chainId,
-      tokenId,
-      getTitle,
-      getMessage: getMessage2,
-      type,
-      callbacks,
-      queriesToInvalidate
+    buyModal$.state.set({
+      quantity: args.order.quantityAvailableFormatted,
+      order: args.order,
+      modalId: buyModal$.state.modalId.get() + 1,
+      invalidQuantity: false
     });
-    transactionStatusModal$.isOpen.set(true);
+    buyModal$.callbacks.set(callbacks || defaultCallbacks);
+    buyModal$.isOpen.set(true);
   },
   close: () => {
-    transactionStatusModal$.isOpen.set(false);
-    transactionStatusModal$.state.set({
-      ...initialState.state
-    });
+    buyModal$.isOpen.set(false);
   },
   state: {
-    hash: void 0,
-    status: "PENDING",
-    price: void 0,
-    collectionAddress: "",
-    chainId: "",
-    tokenId: "",
-    getTitle: void 0,
-    getMessage: void 0,
-    type: void 0
-  }
-};
-var transactionStatusModal$ = observable(initialState);
-
-// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
-import { useMemo } from "react";
-
-// src/react/ui/modals/_internal/components/transactionPreview/consts.ts
-var TRANSACTION_TITLES = {
-  sell: {
-    confirming: "Selling",
-    confirmed: "Sold",
-    failed: "Sale failed"
-  },
-  createListing: {
-    confirming: "Creating listing",
-    confirmed: "Listed",
-    failed: "Listing failed"
-  },
-  createOffer: {
-    confirming: "Creating offer",
-    confirmed: "Offer created",
-    failed: "Offer failed"
-  },
-  buy: {
-    confirming: "Buying",
-    confirmed: "Bought",
-    failed: "Purchase failed"
+    order: void 0,
+    quantity: "1",
+    modalId: 0,
+    invalidQuantity: false
   },
-  transfer: {
-    confirming: "Transferring",
-    confirmed: "Transferred",
-    failed: "Transfer failed"
-  }
+  callbacks: void 0
 };
+var buyModal$ = observable2(initialState);
 
-// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
-function useTransactionPreviewTitle(status, type) {
-  return useMemo(() => {
-    if (!type) return "";
-    const { isConfirming, isConfirmed, isFailed } = status;
-    const titles = TRANSACTION_TITLES[type];
-    if (isConfirming) return titles.confirming;
-    if (isConfirmed) return titles.confirmed;
-    if (isFailed) return titles.failed;
-    return "";
-  }, [status, type]);
-}
-
-// 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/transactionPreview/index.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var TransactionPreview = observer(
-  ({
-    price,
+// src/react/ui/modals/BuyModal/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var useBuyModal = (callbacks) => {
+  return {
+    show: (args) => buyModal$.open({ ...args, defaultCallbacks: callbacks }),
+    close: () => buyModal$.close()
+  };
+};
+var BuyModal = () => /* @__PURE__ */ jsx3(Show, { if: buyModal$.isOpen, children: /* @__PURE__ */ jsx3(BuyModalContent, {}) });
+var BuyModalContent = () => {
+  const chainId = String(useSelector(buyModal$.state.order.chainId));
+  const collectionAddress = useSelector(
+    buyModal$.state.order.collectionContractAddress
+  );
+  const collectibleId = useSelector(buyModal$.state.order.tokenId);
+  const modalId = useSelector(buyModal$.state.modalId);
+  const { data: collection } = useCollection({
+    chainId,
+    collectionAddress
+  });
+  const { buy, isLoading } = useBuyCollectable({
+    chainId,
     collectionAddress,
+    onError: buyModal$.callbacks.get()?.onError,
+    onSuccess: (hash) => {
+      buyModal$.callbacks.get()?.onSuccess?.(hash);
+      buyModal$.close();
+    }
+  });
+  const { data: collectable } = useCollectible({
     chainId,
-    collectible,
-    currencyImageUrl,
-    isConfirming,
-    isConfirmed,
-    isFailed
-  }) => {
-    const { type } = transactionStatusModal$.state.get();
-    const title = useTransactionPreviewTitle(
-      { isConfirmed, isConfirming, isFailed },
-      type
-    );
-    const { data: collection } = useCollection({
-      collectionAddress,
-      chainId
-    });
-    const collectibleImage2 = collectible.image;
-    const collectibleName = collectible.name;
-    const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits(BigInt(price.amountRaw), price.currency.decimals) : void 0;
-    return /* @__PURE__ */ jsxs2(Box3, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx3(
-          Text3,
-          {
-            color: "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            marginRight: "1",
-            fontFamily: "body",
-            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"
-          }
-        ),
-        /* @__PURE__ */ jsxs2(
-          Box3,
+    collectionAddress,
+    collectibleId
+  });
+  if (modalId == 0 || !collection || !collectable || !buy) return null;
+  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx3(
+    CheckoutModal,
+    {
+      buy,
+      collectable,
+      order: buyModal$.state.order.get(),
+      isLoading
+    },
+    modalId
+  ) : /* @__PURE__ */ jsx3(
+    ERC1155QuantityModal,
+    {
+      buy,
+      collectable,
+      order: buyModal$.state.order.get(),
+      chainId,
+      collectionAddress,
+      collectibleId,
+      isLoading
+    }
+  );
+};
+function CheckoutModal({
+  buy,
+  collectable,
+  order,
+  isLoading
+}) {
+  useEffect(() => {
+    const executeBuy = () => {
+      if (isLoading) return;
+      buy({
+        orderId: order.orderId,
+        collectableDecimals: collectable.decimals || 0,
+        quantity: "1",
+        marketplace: order.marketplace
+      });
+    };
+    executeBuy();
+  }, [isLoading]);
+  return null;
+}
+var ERC1155QuantityModal = observer2(
+  ({ buy, collectable, order }) => {
+    buyModal$.state.quantity.set(
+      Math.max(Number(order.quantityRemaining), 1).toString()
+    );
+    return /* @__PURE__ */ jsx3(
+      ActionModal,
+      {
+        store: buyModal$,
+        onClose: () => buyModal$.close(),
+        title: "Select Quantity",
+        ctas: [
           {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "0.5",
-            children: [
-              /* @__PURE__ */ jsx3(
-                Text3,
-                {
-                  color: "text80",
-                  fontSize: "small",
-                  fontWeight: "medium",
-                  fontFamily: "body",
-                  children: collectibleName
-                }
-              ),
-              /* @__PURE__ */ jsx3(Text3, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
-            ]
+            label: "Select Quantity",
+            onClick: () => {
+              buy({
+                quantity: buyModal$.state.quantity.get(),
+                orderId: order.orderId,
+                collectableDecimals: collectable.decimals || 0,
+                marketplace: order.marketplace
+              });
+              buyModal$.close();
+            }
           }
-        ),
-        price && /* @__PURE__ */ jsxs2(
-          Box3,
+        ],
+        children: /* @__PURE__ */ jsx3(
+          QuantityInput,
           {
-            flexGrow: "1",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            gap: "1",
-            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
-                  ]
-                }
-              )
-            ]
+            $quantity: buyModal$.state.quantity,
+            $invalidQuantity: buyModal$.state.invalidQuantity,
+            decimals: order.quantityDecimals,
+            maxQuantity: order.quantityRemaining
           }
         )
-      ] })
-    ] });
+      }
+    );
   }
 );
-var transactionPreview_default = TransactionPreview;
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
-var closeButton3 = "fyvr11lw fyvr1tc fyvr1mo";
-var dialogOverlay3 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
-var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var useTransactionStatusModal = () => {
-  return {
-    show: (args) => transactionStatusModal$.open(args),
-    close: () => transactionStatusModal$.close()
-  };
-};
-var TransactionStatusModal = observer2(() => {
-  const {
-    hash,
-    price,
-    collectionAddress,
-    chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
-    callbacks,
-    queriesToInvalidate
-  } = transactionStatusModal$.state.get();
-  const { data: collectible } = useCollectible({
-    collectionAddress,
-    chainId,
-    collectibleId: tokenId
-  });
-  const {
-    data: transaction,
-    isLoading: isConfirming,
-    isSuccess: isConfirmed,
-    isError: isFailed,
-    error
-  } = useTransactionReceipt({ hash });
-  const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
-  const message = getMessage2 && getMessage2({ isConfirmed, isConfirming, isFailed });
-  const { onUnknownError, onSuccess } = callbacks || {};
-  const queryClient = getQueryClient();
-  useEffect2(() => {
-    if (!transactionStatusModal$.isOpen.get()) return;
-    let isSubscribed = true;
-    if (isConfirmed && isSubscribed && onSuccess) {
-      onSuccess();
-    }
-    if (isFailed && isSubscribed && onUnknownError) {
-      onUnknownError(error);
-    }
-    if (isSubscribed && queriesToInvalidate) {
-      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
-    }
-    return () => {
-      isSubscribed = false;
-    };
-  }, [isConfirmed, isFailed, onSuccess, onUnknownError, error]);
-  return /* @__PURE__ */ jsx4(Root, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs3(Portal, { children: [
-    /* @__PURE__ */ jsx4(Overlay, { className: dialogOverlay3 }),
-    /* @__PURE__ */ jsxs3(Content, { className: transactionStatusModalContent, children: [
-      title ? /* @__PURE__ */ jsx4(
-        Text4,
-        {
-          fontSize: "large",
-          fontWeight: "bold",
-          color: "text100",
-          fontFamily: "body",
-          children: title
-        }
-      ) : /* @__PURE__ */ jsx4(Skeleton, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx4(Text4, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx4(Skeleton, { width: "20", height: "4" }),
-      collectible && /* @__PURE__ */ jsx4(
-        transactionPreview_default,
-        {
-          price,
-          collectionAddress,
-          chainId,
-          collectible,
-          currencyImageUrl: price?.currency.imageUrl,
-          isConfirming,
-          isConfirmed,
-          isFailed: isFailed || transaction?.status === "reverted"
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        TransactionFooter,
-        {
-          transactionHash: hash,
-          isConfirming,
-          isConfirmed,
-          isFailed: isFailed || transaction?.status === "reverted",
-          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;
-
-// src/react/ui/modals/Account/index.tsx
-import { Box as Box4, Button, Modal, Text as Text5 } from "@0xsequence/design-system";
-import { observable as observable2 } from "@legendapp/state";
-import { observer as observer3 } from "@legendapp/state/react";
-import { useAccount } from "wagmi";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var accountModalOpen$ = observable2(false);
-var AccountModal = observer3(function AccountModal2() {
-  const { address } = useAccount();
-  return accountModalOpen$.get() && /* @__PURE__ */ jsxs4(Modal, { children: [
-    /* @__PURE__ */ jsxs4(Box4, { children: [
-      /* @__PURE__ */ jsx5(Text5, { children: "Wallet address" }),
-      /* @__PURE__ */ jsx5(Text5, { children: address })
-    ] }),
-    /* @__PURE__ */ jsx5(Button, { label: "Sign out" })
-  ] });
-});
 
 // src/react/ui/modals/CreateListingModal/index.tsx
 import { Box as Box12 } from "@0xsequence/design-system";
-import { Show, observer as observer7 } from "@legendapp/state/react";
+import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
+import { useAccount as useAccount3 } from "wagmi";
 
 // src/react/hooks/useCreateListing.tsx
-import { useState as useState2, useCallback } from "react";
+import { useCallback, useState } from "react";
 var useCreateListing = ({
   onSuccess,
   onError,
   onTransactionSent,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState2(false);
-  const [steps, setSteps] = useState2(null);
-  const machine = useTransactionMachine(
+  const [isLoading, setIsLoading] = useState(false);
+  const [steps, setSteps] = useState(null);
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
     {
       ...config,
       type: "LISTING" /* LISTING */
@@ -523,57 +363,97 @@ var useCreateListing = ({
     async (props) => {
       if (!machine) return;
       setIsLoading(true);
-      try {
-        const generatedSteps = await machine.getTransactionSteps(props);
-        setSteps(generatedSteps);
-      } catch (error) {
-        onError?.(error);
-      } finally {
+      const generatedSteps = await machine.getTransactionSteps(props);
+      if (!generatedSteps) {
         setIsLoading(false);
+        return;
       }
+      setSteps(generatedSteps);
+      setIsLoading(false);
     },
     [machine, onError]
   );
   return {
-    createListing: (props) => machine?.start({ props }),
+    createListing: (props) => machine?.start(props),
     getListingSteps: (props) => ({
       isLoading,
       steps,
       refreshSteps: () => loadSteps(props)
     }),
-    onError,
-    onSuccess
+    isLoading: isMachineLoading
   };
 };
 
 // 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";
-var ErrorModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx6(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx6(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" }) });
+import { Box as Box3 } from "@0xsequence/design-system";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ErrorModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx4(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx4(Box3, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "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";
-var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx7(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx7(Box6, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx7(Spinner2, { size: "lg" }) }) });
+import { Box as Box4, Spinner } from "@0xsequence/design-system";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx5(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx5(Box4, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx5(Spinner, { size: "lg" }) }) });
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { useState as useState3 } from "react";
-import { Box as Box7, Text as Text6 } from "@0xsequence/design-system";
-import { observer as observer4 } from "@legendapp/state/react";
+import { useState as useState2 } from "react";
+import { Box as Box5, Text as Text2 } from "@0xsequence/design-system";
+import { observer as observer3 } from "@legendapp/state/react";
 import { addDays, isSameDay } from "date-fns";
 
+// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
+import { CheckmarkIcon, ChevronDownIcon } from "@0xsequence/design-system";
+import * as Select from "@radix-ui/react-select";
+import React from "react";
+
+// src/react/ui/components/_internals/custom-select/styles.css.ts
+var content = "fyvr11eg fyvr11es fyvr11f4 fyvr11fg fyvr11hc fyvr11i0 fyvr11g0 fyvr11go fyvr11q0 fyvr11qg fyvr12q3 fyvr12ir fyvr1243 fyvr12bf fyvr12rr fyvr12kf fyvr125r fyvr12d3 fyvr11xx fyvr11r0 fyvr11rt";
+var item = "styles_item__1ddtujk2 fyvr11h0 fyvr11ho fyvr11fo fyvr11gc fyvr1v4 fyvr1x8 fyvr1zs fyvr111g fyvr11ik fyvr12w9 fyvr11l8 fyvr11ow fyvr14g fyvr11m4 fyvr11rc fyvr12zf";
+var itemIndicator = "fyvr11lw fyvr1qk fyvr11lk fyvr11ow fyvr11no";
+var trigger = "fyvr11hk fyvr11i8 fyvr11g8 fyvr11gw fyvr1zg fyvr111k fyvr11lk fyvr11ow fyvr11no fyvr11ik fyvr14g fyvr11cg fyvr11wr fyvr12w9 fyvr12zf fyvr12s9 fyvr11a4";
+
+// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var CustomSelectItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxs3(Select.Item, { className: item, ...props, ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx6(Select.ItemText, { children }),
+    /* @__PURE__ */ jsx6(Select.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx6(CheckmarkIcon, { size: "xs" }) })
+  ] });
+});
+var CustomSelect = ({
+  items,
+  placeholder = "Select an item...",
+  onValueChange,
+  defaultValue
+}) => {
+  return /* @__PURE__ */ jsxs3(Select.Root, { onValueChange, defaultValue, children: [
+    /* @__PURE__ */ jsxs3(Select.Trigger, { className: trigger, children: [
+      /* @__PURE__ */ jsx6(Select.Value, { placeholder }),
+      /* @__PURE__ */ jsx6(Select.Icon, { children: /* @__PURE__ */ jsx6(ChevronDownIcon, { size: "xs" }) })
+    ] }),
+    /* @__PURE__ */ jsx6(Select.Portal, { children: /* @__PURE__ */ jsx6(Select.Content, { className: content, children: /* @__PURE__ */ jsx6(Select.Viewport, { children: items.map((item2, index) => /* @__PURE__ */ jsx6(
+      CustomSelectItem,
+      {
+        value: item2.value,
+        disabled: item2.disabled,
+        children: item2.label
+      },
+      index
+    )) }) }) })
+  ] });
+};
+
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
 import { Button as Button2 } from "@0xsequence/design-system";
-import { Content as Content2, Portal as Portal2, Root as Root2, Trigger } from "@radix-ui/react-popover";
+import { Content as Content2, Portal as Portal2, Root as Root2, Trigger as Trigger2 } 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: {
@@ -621,13 +501,13 @@ 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(
+  return /* @__PURE__ */ jsxs4(Root2, { children: [
+    /* @__PURE__ */ jsx8(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx8(
       Button2,
       {
         leftIcon: CalendarIcon_default,
@@ -637,7 +517,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,
@@ -648,50 +528,8 @@ function CalendarPopover({
   ] });
 }
 
-// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
-import React from "react";
-import * as Select from "@radix-ui/react-select";
-import { CheckmarkIcon, ChevronDownIcon } from "@0xsequence/design-system";
-
-// src/react/ui/components/_internals/custom-select/styles.css.ts
-var content = "fyvr11eg fyvr11es fyvr11f4 fyvr11fg fyvr11hc fyvr11i0 fyvr11g0 fyvr11go fyvr11q0 fyvr11qg fyvr12q3 fyvr12ir fyvr1243 fyvr12bf fyvr12rr fyvr12kf fyvr125r fyvr12d3 fyvr11xx fyvr11r0 fyvr11rt";
-var item = "styles_item__1ddtujk2 fyvr11h0 fyvr11ho fyvr11fo fyvr11gc fyvr1v4 fyvr1x8 fyvr1zs fyvr111g fyvr11ik fyvr12w9 fyvr11l8 fyvr11ow fyvr14g fyvr11m4 fyvr11rc fyvr12zf";
-var itemIndicator = "fyvr11lw fyvr1qk fyvr11lk fyvr11ow fyvr11no";
-var trigger = "fyvr11hk fyvr11i8 fyvr11g8 fyvr11gw fyvr1zg fyvr111k fyvr11lk fyvr11ow fyvr11no fyvr11ik fyvr14g fyvr11cg fyvr11wr fyvr12w9 fyvr12zf fyvr12s9 fyvr11a4";
-
-// src/react/ui/components/_internals/custom-select/CustomSelect.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var CustomSelectItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxs6(Select.Item, { className: item, ...props, ref: forwardedRef, children: [
-    /* @__PURE__ */ jsx10(Select.ItemText, { children }),
-    /* @__PURE__ */ jsx10(Select.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx10(CheckmarkIcon, { size: "xs" }) })
-  ] });
-});
-var CustomSelect = ({
-  items,
-  placeholder = "Select an item...",
-  onValueChange,
-  defaultValue
-}) => {
-  return /* @__PURE__ */ jsxs6(Select.Root, { onValueChange, defaultValue, children: [
-    /* @__PURE__ */ jsxs6(Select.Trigger, { className: trigger, children: [
-      /* @__PURE__ */ jsx10(Select.Value, { placeholder }),
-      /* @__PURE__ */ jsx10(Select.Icon, { children: /* @__PURE__ */ jsx10(ChevronDownIcon, { size: "xs" }) })
-    ] }),
-    /* @__PURE__ */ jsx10(Select.Portal, { children: /* @__PURE__ */ jsx10(Select.Content, { className: content, children: /* @__PURE__ */ jsx10(Select.Viewport, { children: items.map((item2, index) => /* @__PURE__ */ jsx10(
-      CustomSelectItem,
-      {
-        value: item2.value,
-        disabled: item2.disabled,
-        children: item2.label
-      },
-      index
-    )) }) }) })
-  ] });
-};
-
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -719,11 +557,11 @@ var PRESET_RANGES = {
     offset: 30
   }
 };
-var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
+var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
   className,
   $date
 }) {
-  const [_, setRange] = useState3("1_week");
+  const [_, setRange] = useState2("1_week");
   function handleSelectPresetRange(range) {
     setRange(range);
     const presetRange = Object.values(PRESET_RANGES).find(
@@ -744,9 +582,9 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
     }
     $date.set(date);
   }
-  return /* @__PURE__ */ jsxs7(Box7, { width: "full", position: "relative", children: [
-    /* @__PURE__ */ jsx11(
-      Text6,
+  return /* @__PURE__ */ jsxs5(Box5, { width: "full", position: "relative", children: [
+    /* @__PURE__ */ jsx9(
+      Text2,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -757,8 +595,8 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
         children: "Set expiry"
       }
     ),
-    /* @__PURE__ */ jsxs7(
-      Box7,
+    /* @__PURE__ */ jsxs5(
+      Box5,
       {
         className,
         width: "full",
@@ -767,14 +605,14 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
         gap: "2",
         marginTop: "0.5",
         children: [
-          /* @__PURE__ */ jsx11(
-            Box7,
+          /* @__PURE__ */ jsx9(
+            Box5,
             {
               position: "absolute",
               right: "0",
               onClick: (e) => e.stopPropagation(),
               zIndex: "10",
-              children: /* @__PURE__ */ jsx11(
+              children: /* @__PURE__ */ jsx9(
                 CustomSelect,
                 {
                   items: Object.values(PRESET_RANGES).map((preset) => ({
@@ -798,7 +636,7 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
               )
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx9(
             CalendarPopover,
             {
               selectedDate: $date.get(),
@@ -813,8 +651,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 jsx12 } from "react/jsx-runtime";
+import { Text as Text3 } from "@0xsequence/design-system";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
   collectionAddress,
@@ -839,8 +677,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__ */ jsx12(
-    Text7,
+  return /* @__PURE__ */ jsx10(
+    Text3,
     {
       fontSize: "small",
       fontWeight: "medium",
@@ -854,18 +692,18 @@ function FloorPriceText({
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box8, NumericInput, TokenImage } from "@0xsequence/design-system";
-import { observer as observer6 } from "@legendapp/state/react";
-import { useState as useState4 } from "react";
+import { Box as Box6, NumericInput as NumericInput2, TokenImage } from "@0xsequence/design-system";
+import { observer as observer5 } from "@legendapp/state/react";
+import { useState as useState3 } from "react";
 import { erc20Abi, parseUnits } from "viem";
 import { useAccount as useAccount2, useReadContract } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
-import { Skeleton as Skeleton2 } from "@0xsequence/design-system";
-import { observer as observer5 } from "@legendapp/state/react";
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
+import { Skeleton } from "@0xsequence/design-system";
+import { observer as observer4 } from "@legendapp/state/react";
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   $selectedCurrency
@@ -874,13 +712,13 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
     collectionAddress,
     chainId
   });
-  useEffect3(() => {
+  useEffect2(() => {
     if (currencies && currencies.length > 0 && !$selectedCurrency.contractAddress.get()) {
       $selectedCurrency.set(currencies[0]);
     }
   }, [currencies]);
   if (!currencies || currenciesLoading) {
-    return /* @__PURE__ */ jsx13(Skeleton2, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
+    return /* @__PURE__ */ jsx11(Skeleton, { borderRadius: "lg", width: "20", height: "7", marginRight: "3" });
   }
   const options = currencies.map(
     (currency) => ({
@@ -894,19 +732,19 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
     );
     $selectedCurrency.set(c);
   };
-  return /* @__PURE__ */ jsx13(CustomSelect, { items: options, onValueChange: onChange, placeholder: "" });
+  return /* @__PURE__ */ jsx11(CustomSelect, { items: options, onValueChange: onChange, placeholder: "" });
 });
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var PriceInput = observer6(function PriceInput2({
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var PriceInput = observer5(function PriceInput2({
   chainId,
   collectionAddress,
   $listingPrice,
   checkBalance
 }) {
-  const [balanceError, setBalanceError] = useState4("");
+  const [balanceError, setBalanceError] = useState3("");
   const { address: accountAddress } = useAccount2();
   const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
     address: $listingPrice.currency.contractAddress.get(),
@@ -918,7 +756,7 @@ var PriceInput = observer6(function PriceInput2({
     }
   });
   const currencyDecimals = $listingPrice.currency.decimals.get();
-  const [value, setValue] = useState4("");
+  const [value, setValue] = useState3("");
   const checkInsufficientBalance = (priceAmountRaw) => {
     const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance || 0);
     if (!checkBalance) return;
@@ -936,26 +774,26 @@ var PriceInput = observer6(function PriceInput2({
     $listingPrice.amountRaw.set(parsedAmount.toString());
     checkBalance && checkInsufficientBalance(parsedAmount.toString());
   };
-  return /* @__PURE__ */ jsxs8(Box8, { className: priceInputWrapper, position: "relative", children: [
-    /* @__PURE__ */ jsx14(
-      Box8,
+  return /* @__PURE__ */ jsxs6(Box6, { className: priceInputWrapper, position: "relative", children: [
+    /* @__PURE__ */ jsx12(
+      Box6,
       {
         className: priceInputCurrencyImage,
         position: "absolute",
         left: "2",
         display: "flex",
         alignItems: "center",
-        children: /* @__PURE__ */ jsx14(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
+        children: /* @__PURE__ */ jsx12(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
       }
     ),
-    /* @__PURE__ */ jsx14(
-      NumericInput,
+    /* @__PURE__ */ jsx12(
+      NumericInput2,
       {
         name: "listingPrice",
         decimals: currencyDecimals,
         label: "Enter price",
         labelLocation: "top",
-        controls: /* @__PURE__ */ jsx14(
+        controls: /* @__PURE__ */ jsx12(
           currencyOptionsSelect_default,
           {
             $selectedCurrency: $listingPrice?.currency,
@@ -968,141 +806,19 @@ var PriceInput = observer6(function PriceInput2({
         width: "full"
       }
     ),
-    balanceError && /* @__PURE__ */ jsx14(Box8, { color: "negative", fontSize: "small", children: balanceError })
+    balanceError && /* @__PURE__ */ jsx12(Box6, { color: "negative", fontSize: "small", children: balanceError })
   ] });
 });
 var priceInput_default = PriceInput;
 
-// src/react/ui/modals/_internal/components/quantityInput/index.tsx
-import { Box as Box9, IconButton as IconButton2, NumericInput as NumericInput2 } from "@0xsequence/design-system";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function QuantityInput({
-  $quantity,
-  chainId,
-  collectionAddress,
-  collectibleId
-}) {
-  const { data: collectable, isLoading: collectableLoading } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  const quantityDecimals = collectable && (collectable.decimals || 0);
-  function handleChangeQuantity(value) {
-    if (!isValidInput(value)) return;
-    const formattedValue = formatQuantity(value);
-    if (formattedValue !== null) {
-      $quantity.set(formattedValue);
-    }
-  }
-  function handleIncrement() {
-    if (!isValidInput()) return;
-    const newQuantity = incrementQuantity();
-    if (newQuantity !== null) {
-      $quantity.set(newQuantity);
-    }
-  }
-  function handleDecrement() {
-    if (!isValidInput()) return;
-    const newQuantity = decrementQuantity();
-    if (newQuantity !== null) {
-      $quantity.set(newQuantity);
-    }
-  }
-  function isValidInput(value) {
-    return collectable !== void 0 && quantityDecimals !== void 0 && (value === void 0 || value !== "");
-  }
-  function formatQuantity(value) {
-    if (quantityDecimals === 0 && value.includes(".")) {
-      return null;
-    }
-    if (quantityDecimals && quantityDecimals > 0) {
-      const decimalIndex = value.indexOf(".");
-      if (decimalIndex !== -1 && value.length - decimalIndex > quantityDecimals + 1) {
-        return null;
-      }
-    }
-    return value;
-  }
-  const quantity = $quantity.get();
-  function incrementQuantity() {
-    if (!isValidInput()) return null;
-    if (!quantity) {
-      return quantityDecimals === 0 ? "1" : `1.${"0".repeat(quantityDecimals)}`;
-    }
-    const newValue = quantityDecimals === 0 ? (Number.parseInt(quantity) + 1).toString() : (Number.parseFloat(quantity) + 1).toFixed(quantityDecimals);
-    return newValue;
-  }
-  function decrementQuantity() {
-    if (!quantity) {
-      return "1";
-    }
-    const newValue = Number.parseFloat(quantity) - 1;
-    if (newValue < 0) {
-      return null;
-    }
-    return quantityDecimals === 0 ? newValue.toString() : newValue.toFixed(quantityDecimals);
-  }
-  function getPlaceholder(decimals) {
-    if (decimals === 0) {
-      return "0";
-    } else {
-      return "0." + "0".repeat(decimals);
-    }
-  }
-  if (collectableLoading) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx15(Box9, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx15(
-    NumericInput2,
-    {
-      name: "quantity",
-      decimals: quantityDecimals || 0,
-      paddingLeft: "1",
-      label: "Enter quantity",
-      labelLocation: "top",
-      placeholder: getPlaceholder(quantityDecimals || 0),
-      controls: /* @__PURE__ */ jsxs9(
-        Box9,
-        {
-          display: "flex",
-          alignItems: "center",
-          gap: "1",
-          marginRight: "2",
-          children: [
-            /* @__PURE__ */ jsx15(
-              IconButton2,
-              {
-                disabled: Number.parseFloat(quantity) === 0 || !quantity,
-                onClick: handleDecrement,
-                background: "buttonGlass",
-                size: "xs",
-                icon: MinusIcon_default
-              }
-            ),
-            /* @__PURE__ */ jsx15(
-              IconButton2,
-              {
-                onClick: handleIncrement,
-                background: "buttonGlass",
-                size: "xs",
-                icon: PlusIcon_default
-              }
-            )
-          ]
-        }
-      ),
-      numeric: true,
-      value: $quantity.get(),
-      onChange: (e) => handleChangeQuantity(e.target.value),
-      width: "full"
-    }
-  ) });
-}
+// src/react/ui/modals/_internal/components/tokenPreview/index.tsx
+import { Box as Box7, Image, Skeleton as Skeleton2, Text as Text4 } from "@0xsequence/design-system";
+
+// 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/tokenPreview/index.tsx
-import { Box as Box10, Image as Image2, Skeleton as Skeleton3, Text as Text8 } from "@0xsequence/design-system";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
   collectionAddress,
@@ -1115,17 +831,17 @@ function TokenPreview({
     collectibleId
   });
   if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs10(Box10, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx16(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
-      /* @__PURE__ */ jsxs10(Box10, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx16(Skeleton3, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx16(Skeleton3, { width: "1/2", height: "3" })
+    return /* @__PURE__ */ jsxs7(Box7, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+      /* @__PURE__ */ jsx13(Skeleton2, { width: "9", height: "9", borderRadius: "xs" }),
+      /* @__PURE__ */ jsxs7(Box7, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
+        /* @__PURE__ */ jsx13(Skeleton2, { width: "1/3", height: "3" }),
+        /* @__PURE__ */ jsx13(Skeleton2, { width: "1/2", height: "3" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs10(Box10, { className: tokenPreview, children: [
-    /* @__PURE__ */ jsx16(
-      Image2,
+  return /* @__PURE__ */ jsxs7(Box7, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx13(
+      Image,
       {
         src: collectable?.image || chess_tile_default,
         alt: collectable?.name,
@@ -1134,9 +850,9 @@ function TokenPreview({
         borderRadius: "xs"
       }
     ),
-    /* @__PURE__ */ jsxs10(Box10, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
-      /* @__PURE__ */ jsx16(
-        Text8,
+    /* @__PURE__ */ jsxs7(Box7, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx13(
+        Text4,
         {
           fontSize: "small",
           color: "text80",
@@ -1145,8 +861,8 @@ function TokenPreview({
           children: collectionName
         }
       ),
-      /* @__PURE__ */ jsx16(
-        Text8,
+      /* @__PURE__ */ jsx13(
+        Text4,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -1160,9 +876,9 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box11, Image as Image3, Skeleton as Skeleton4, Text as Text9 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Box as Box8, Image as Image2, Skeleton as Skeleton3, Text as Text5 } from "@0xsequence/design-system";
+import { formatUnits } from "viem";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
   collectibleId,
@@ -1181,25 +897,25 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits(BigInt(price.amountRaw), price.currency.decimals);
   if (royaltyPercentage !== void 0 && formattedAmount) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toString();
   }
   if (marketplaceFeePercentage !== void 0 && formattedAmount) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toString();
   }
-  return /* @__PURE__ */ jsxs11(
-    Box11,
+  return /* @__PURE__ */ jsxs8(
+    Box8,
     {
       width: "full",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsx17(Text9, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs11(Box11, { display: "flex", alignItems: "center", gap: "2", children: [
-          /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx17(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs11(Text9, { fontSize: "small", color: "text100", fontFamily: "body", children: [
+        /* @__PURE__ */ jsx14(Text5, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs8(Box8, { display: "flex", alignItems: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx14(Image2, { src: currencyImageUrl, width: "3", height: "3" }),
+          priceLoading ? /* @__PURE__ */ jsx14(Skeleton3, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs8(Text5, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             formattedAmount,
             " ",
             price.currency.symbol
@@ -1210,10 +926,421 @@ function TransactionDetails({
   );
 }
 
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import {
+  CloseIcon,
+  IconButton as IconButton2,
+  Skeleton as Skeleton4,
+  Text as Text9
+} from "@0xsequence/design-system";
+import { observer as observer7 } from "@legendapp/state/react";
+import { Close, Content as Content3, Overlay, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
+import { useEffect as useEffect4 } from "react";
+import { useTransactionReceipt } from "wagmi";
+
+// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
+import { Box as Box9, Spinner as Spinner2, Text as Text6 } from "@0xsequence/design-system";
+import { networks } from "@0xsequence/network";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function TransactionFooter({
+  transactionHash,
+  isConfirming,
+  isConfirmed,
+  isFailed,
+  chainId
+}) {
+  const icon = isConfirming && /* @__PURE__ */ jsx15(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx15(PositiveCircleIcon_default, { size: "md" });
+  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
+  const transactionUrl = `${networks[chainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
+  return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", children: [
+    icon,
+    /* @__PURE__ */ jsx15(
+      Text6,
+      {
+        color: "text50",
+        fontSize: "normal",
+        fontWeight: "medium",
+        marginLeft: "2",
+        fontFamily: "body",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      Box9,
+      {
+        as: "a",
+        flexGrow: "1",
+        marginLeft: "2",
+        href: transactionUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        textAlign: "right",
+        textDecoration: "none",
+        children: /* @__PURE__ */ jsx15(
+          Text6,
+          {
+            color: "polygonLight",
+            textAlign: "right",
+            fontSize: "normal",
+            fontWeight: "medium",
+            fontFamily: "body",
+            children: truncateMiddle(transactionHash, 4, 4)
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { Box as Box11, Image as Image3, NetworkImage, Text as Text8 } from "@0xsequence/design-system";
+import { observer as observer6 } from "@legendapp/state/react";
+import { formatUnits as formatUnits2 } from "viem";
+
+// src/react/ui/modals/_internal/components/timeAgo/index.tsx
+import { Box as Box10, Text as Text7 } from "@0xsequence/design-system";
+import { formatDistanceToNow } from "date-fns";
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function TimeAgo({ date }) {
+  const [timeAgo, setTimeAgo] = useState4("");
+  useEffect3(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(formatDistanceToNow(date));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [date]);
+  return /* @__PURE__ */ jsx16(
+    Box10,
+    {
+      flexGrow: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */ jsx16(Text7, { color: "text50", fontSize: "small", children: timeAgo })
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
+import { observable as observable3 } from "@legendapp/state";
+var initialState2 = {
+  isOpen: false,
+  open: ({
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    type,
+    callbacks,
+    queriesToInvalidate
+  }) => {
+    transactionStatusModal$.state.set({
+      ...transactionStatusModal$.state.get(),
+      hash,
+      price,
+      collectionAddress,
+      chainId,
+      tokenId,
+      getTitle,
+      getMessage: getMessage2,
+      type,
+      callbacks,
+      queriesToInvalidate
+    });
+    transactionStatusModal$.isOpen.set(true);
+  },
+  close: () => {
+    transactionStatusModal$.isOpen.set(false);
+    transactionStatusModal$.state.set({
+      ...initialState2.state
+    });
+  },
+  state: {
+    hash: void 0,
+    status: "PENDING",
+    price: void 0,
+    collectionAddress: "",
+    chainId: "",
+    tokenId: "",
+    getTitle: void 0,
+    getMessage: void 0,
+    type: void 0
+  }
+};
+var transactionStatusModal$ = observable3(initialState2);
+
+// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
+import { useMemo } from "react";
+
+// src/react/ui/modals/_internal/components/transactionPreview/consts.ts
+var TRANSACTION_TITLES = {
+  sell: {
+    confirming: "Selling",
+    confirmed: "Sold",
+    failed: "Sale failed"
+  },
+  createListing: {
+    confirming: "Creating listing",
+    confirmed: "Listed",
+    failed: "Listing failed"
+  },
+  createOffer: {
+    confirming: "Creating offer",
+    confirmed: "Offer created",
+    failed: "Offer failed"
+  },
+  buy: {
+    confirming: "Buying",
+    confirmed: "Bought",
+    failed: "Purchase failed"
+  },
+  transfer: {
+    confirming: "Transferring",
+    confirmed: "Transferred",
+    failed: "Transfer failed"
+  }
+};
+
+// src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
+function useTransactionPreviewTitle(status, type) {
+  return useMemo(() => {
+    if (!type) return "";
+    const { isConfirming, isConfirmed, isFailed } = status;
+    const titles = TRANSACTION_TITLES[type];
+    if (isConfirming) return titles.confirming;
+    if (isConfirmed) return titles.confirmed;
+    if (isFailed) return titles.failed;
+    return "";
+  }, [status, type]);
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var TransactionPreview = observer6(
+  ({
+    price,
+    collectionAddress,
+    chainId,
+    collectible,
+    currencyImageUrl,
+    isConfirming,
+    isConfirmed,
+    isFailed
+  }) => {
+    const { type } = transactionStatusModal$.state.get();
+    const title = useTransactionPreviewTitle(
+      { isConfirmed, isConfirming, isFailed },
+      type
+    );
+    const { data: collection } = useCollection({
+      collectionAddress,
+      chainId
+    });
+    const collectibleImage2 = collectible.image;
+    const collectibleName = collectible.name;
+    const collectionName = collection?.name;
+    const priceFormatted = price ? formatUnits2(BigInt(price.amountRaw), price.currency.decimals) : void 0;
+    return /* @__PURE__ */ jsxs10(Box11, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx17(
+          Text8,
+          {
+            color: "text50",
+            fontSize: "small",
+            fontWeight: "medium",
+            marginRight: "1",
+            fontFamily: "body",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx17(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx17(TimeAgo, { date: /* @__PURE__ */ new Date() })
+      ] }),
+      /* @__PURE__ */ jsxs10(Box11, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx17(
+          Image3,
+          {
+            src: collectibleImage2 || chess_tile_default,
+            alt: collectibleName,
+            width: "9",
+            height: "9",
+            borderRadius: "xs",
+            marginRight: "3"
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          Box11,
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "0.5",
+            children: [
+              /* @__PURE__ */ jsx17(
+                Text8,
+                {
+                  color: "text80",
+                  fontSize: "small",
+                  fontWeight: "medium",
+                  fontFamily: "body",
+                  children: collectibleName
+                }
+              ),
+              /* @__PURE__ */ jsx17(Text8, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
+            ]
+          }
+        ),
+        price && /* @__PURE__ */ jsxs10(
+          Box11,
+          {
+            flexGrow: "1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: "1",
+            children: [
+              /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
+              /* @__PURE__ */ jsxs10(
+                Text8,
+                {
+                  color: "text80",
+                  fontSize: "small",
+                  fontWeight: "medium",
+                  fontFamily: "body",
+                  children: [
+                    priceFormatted,
+                    " ",
+                    price.currency.symbol
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var transactionPreview_default = TransactionPreview;
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
+var closeButton3 = "fyvr11lw fyvr1tc fyvr1mo";
+var dialogOverlay3 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
+var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var useTransactionStatusModal = () => {
+  return {
+    show: (args) => transactionStatusModal$.open(args),
+    close: () => transactionStatusModal$.close()
+  };
+};
+var TransactionStatusModal = observer7(() => {
+  const {
+    hash,
+    price,
+    collectionAddress,
+    chainId,
+    tokenId,
+    getTitle,
+    getMessage: getMessage2,
+    callbacks,
+    queriesToInvalidate
+  } = transactionStatusModal$.state.get();
+  const { data: collectible } = useCollectible({
+    collectionAddress,
+    chainId,
+    collectibleId: tokenId
+  });
+  const {
+    data: transaction,
+    isLoading: isConfirming,
+    isSuccess: isConfirmed,
+    isError: isFailed,
+    error
+  } = useTransactionReceipt({ hash });
+  const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
+  const message = getMessage2 && getMessage2({ isConfirmed, isConfirming, isFailed });
+  const { onUnknownError, onSuccess } = callbacks || {};
+  const queryClient = getQueryClient();
+  useEffect4(() => {
+    if (!transactionStatusModal$.isOpen.get()) return;
+    let isSubscribed = true;
+    if (isConfirmed && isSubscribed && onSuccess) {
+      onSuccess();
+    }
+    if (isFailed && isSubscribed && onUnknownError) {
+      onUnknownError(error);
+    }
+    if (isSubscribed && queriesToInvalidate) {
+      queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [isConfirmed, isFailed, onSuccess, onUnknownError, error]);
+  return /* @__PURE__ */ jsx18(Root3, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs11(Portal3, { children: [
+    /* @__PURE__ */ jsx18(Overlay, { className: dialogOverlay3 }),
+    /* @__PURE__ */ jsxs11(Content3, { className: transactionStatusModalContent, children: [
+      title ? /* @__PURE__ */ jsx18(
+        Text9,
+        {
+          fontSize: "large",
+          fontWeight: "bold",
+          color: "text100",
+          fontFamily: "body",
+          children: title
+        }
+      ) : /* @__PURE__ */ jsx18(Skeleton4, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx18(Text9, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx18(Skeleton4, { width: "20", height: "4" }),
+      collectible && /* @__PURE__ */ jsx18(
+        transactionPreview_default,
+        {
+          price,
+          collectionAddress,
+          chainId,
+          collectible,
+          currencyImageUrl: price?.currency.imageUrl,
+          isConfirming,
+          isConfirmed,
+          isFailed: isFailed || transaction?.status === "reverted"
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        TransactionFooter,
+        {
+          transactionHash: hash,
+          isConfirming,
+          isConfirmed,
+          isFailed: isFailed || transaction?.status === "reverted",
+          chainId
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        Close,
+        {
+          onClick: () => {
+            transactionStatusModal$.close();
+          },
+          className: closeButton3,
+          asChild: true,
+          children: /* @__PURE__ */ jsx18(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+        }
+      )
+    ] })
+  ] }) });
+});
+var transactionStatusModal_default = TransactionStatusModal;
+
 // src/react/ui/modals/CreateListingModal/_store.ts
-import { observable as observable3 } from "@legendapp/state";
+import { observable as observable4 } from "@legendapp/state";
 import { addDays as addDays2 } from "date-fns/addDays";
-var initialState2 = {
+var initialState3 = {
   isOpen: false,
   collectionAddress: "",
   chainId: "",
@@ -1225,6 +1352,7 @@ var initialState2 = {
     currency: {}
   },
   quantity: "1",
+  invalidQuantity: false,
   expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
   callbacks: void 0,
   onError: void 0,
@@ -1243,7 +1371,7 @@ var initialState2 = {
     createListingModal$.callbacks.set(void 0);
   }
 };
-var createListingModal$ = observable3(initialState2);
+var createListingModal$ = observable4(initialState3);
 
 // src/react/ui/modals/CreateListingModal/_utils/getCreateListingTransactionTitleMessage.ts
 var getCreateListingTransactionTitle = (params) => {
@@ -1266,7 +1394,7 @@ var getCreateListingTransactionMessage = (params, collectibleName) => {
 };
 
 // src/react/ui/modals/CreateListingModal/index.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var useCreateListingModal = (callbacks) => {
   return {
     show: (args) => createListingModal$.open({ ...args, defaultCallbacks: callbacks }),
@@ -1275,9 +1403,9 @@ var useCreateListingModal = (callbacks) => {
 };
 var CreateListingModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx18(Show, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx18(Modal2, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx19(Show2, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx19(Modal2, { showTransactionStatusModal }) });
 };
-var Modal2 = observer7(
+var Modal2 = observer8(
   ({
     showTransactionStatusModal
   }) => {
@@ -1300,7 +1428,14 @@ var Modal2 = observer7(
       chainId,
       collectionAddress
     });
-    const { getListingSteps } = useCreateListing({
+    const { address } = useAccount3();
+    const { data: balance } = useBalanceOfCollectible({
+      chainId,
+      collectionAddress,
+      collectableId: collectibleId,
+      userAddress: address
+    });
+    const { getListingSteps, isLoading: machineLoading } = useCreateListing({
       chainId,
       collectionAddress,
       onTransactionSent: (hash) => {
@@ -1335,8 +1470,8 @@ var Modal2 = observer7(
         createListingModal$.onError?.(error);
       }
     };
-    if (collectableIsLoading || collectionIsLoading) {
-      return /* @__PURE__ */ jsx18(
+    if (collectableIsLoading || collectionIsLoading || machineLoading) {
+      return /* @__PURE__ */ jsx19(
         LoadingModal,
         {
           store: createListingModal$,
@@ -1346,7 +1481,7 @@ var Modal2 = observer7(
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx19(
         ErrorModal,
         {
           store: createListingModal$,
@@ -1373,13 +1508,14 @@ var Modal2 = observer7(
         onClick: () => handleStepExecution(() => steps?.approval.execute()),
         hidden: !steps?.approval.isPending,
         pending: steps?.approval.isExecuting,
-        variant: "glass"
+        variant: "glass",
+        disabled: createListingModal$.invalidQuantity.get()
       },
       {
         label: "List item for sale",
         onClick: () => handleStepExecution(() => steps?.transaction.execute()),
         pending: steps?.transaction.isExecuting || isLoading,
-        disabled: steps?.approval.isPending || listingPrice.amountRaw === "0" || isLoading
+        disabled: steps?.approval.isPending || listingPrice.amountRaw === "0" || isLoading || createListingModal$.invalidQuantity.get()
       }
     ];
     return /* @__PURE__ */ jsxs12(
@@ -1390,7 +1526,7 @@ var Modal2 = observer7(
         title: "List item for sale",
         ctas,
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1400,7 +1536,7 @@ var Modal2 = observer7(
             }
           ),
           /* @__PURE__ */ jsxs12(Box12, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19(
               priceInput_default,
               {
                 chainId,
@@ -1408,7 +1544,7 @@ var Modal2 = observer7(
                 $listingPrice: createListingModal$.listingPrice
               }
             ),
-            !!listingPrice && /* @__PURE__ */ jsx18(
+            !!listingPrice && /* @__PURE__ */ jsx19(
               FloorPriceText,
               {
                 tokenId: collectibleId,
@@ -1418,17 +1554,17 @@ var Modal2 = observer7(
               }
             )
           ] }),
-          collection?.type === "ERC1155" && /* @__PURE__ */ jsx18(
+          collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx19(
             QuantityInput,
             {
-              chainId,
-              collectionAddress,
-              collectibleId,
-              $quantity: createListingModal$.quantity
+              $quantity: createListingModal$.quantity,
+              $invalidQuantity: createListingModal$.invalidQuantity,
+              decimals: collectible?.decimals || 0,
+              maxQuantity: balance?.balance
             }
           ),
-          /* @__PURE__ */ jsx18(expirationDateSelect_default, { $date: createListingModal$.expiry }),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: createListingModal$.expiry }),
+          /* @__PURE__ */ jsx19(
             TransactionDetails,
             {
               collectibleId,
@@ -1445,11 +1581,11 @@ var Modal2 = observer7(
 );
 
 // src/react/ui/modals/MakeOfferModal/index.tsx
-import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/react/hooks/useMakeOffer.tsx
-import { useState as useState5, useCallback as useCallback2 } from "react";
+import { useCallback as useCallback2, useState as useState5 } from "react";
 var useMakeOffer = ({
   onSuccess,
   onError,
@@ -1458,7 +1594,7 @@ var useMakeOffer = ({
 }) => {
   const [isLoading, setIsLoading] = useState5(false);
   const [steps, setSteps] = useState5(null);
-  const machine = useTransactionMachine(
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
     {
       ...config,
       type: "OFFER" /* OFFER */
@@ -1471,31 +1607,31 @@ var useMakeOffer = ({
     async (props) => {
       if (!machine) return;
       setIsLoading(true);
-      try {
-        const generatedSteps = await machine.getTransactionSteps(props);
-        setSteps(generatedSteps);
-      } catch (error) {
-        onError?.(error);
-      } finally {
+      const generatedSteps = await machine.getTransactionSteps(props);
+      if (!generatedSteps) {
         setIsLoading(false);
+        return;
       }
+      setSteps(generatedSteps);
+      setIsLoading(false);
     },
     [machine, onError]
   );
   return {
-    makeOffer: (props) => machine?.start({ props }),
+    makeOffer: (props) => machine?.start(props),
     getMakeOfferSteps: (props) => ({
       isLoading,
       steps,
       refreshSteps: () => loadSteps(props)
-    })
+    }),
+    isLoading: isMachineLoading
   };
 };
 
 // src/react/ui/modals/MakeOfferModal/_store.ts
-import { observable as observable4 } from "@legendapp/state";
+import { observable as observable5 } from "@legendapp/state";
 import { addDays as addDays3 } from "date-fns/addDays";
-var initialState3 = {
+var initialState4 = {
   isOpen: false,
   collectionAddress: "",
   chainId: "",
@@ -1506,6 +1642,7 @@ var initialState3 = {
     currency: {}
   },
   quantity: "1",
+  invalidQuantity: false,
   expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
   open: (args) => {
     makeOfferModal$.collectionAddress.set(args.collectionAddress);
@@ -1519,7 +1656,7 @@ var initialState3 = {
     makeOfferModal$.callbacks.set(void 0);
   }
 };
-var makeOfferModal$ = observable4(initialState3);
+var makeOfferModal$ = observable5(initialState4);
 
 // src/react/ui/modals/MakeOfferModal/_utils/getMakeOfferTransactionTitleMessage.ts
 var getMakeOfferTransactionTitle = (params) => {
@@ -1542,16 +1679,16 @@ var getMakeOfferTransactionMessage = (params, collectibleName) => {
 };
 
 // src/react/ui/modals/MakeOfferModal/index.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var useMakeOfferModal = (defaultCallbacks) => ({
   show: (args) => makeOfferModal$.open({ ...args, callbacks: defaultCallbacks }),
   close: makeOfferModal$.close
 });
 var MakeOfferModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx19(Show2, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx19(ModalContent, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx20(Show3, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx20(ModalContent, { showTransactionStatusModal }) });
 };
-var ModalContent = observer8(
+var ModalContent = observer9(
   ({
     showTransactionStatusModal
   }) => {
@@ -1624,12 +1761,12 @@ var ModalContent = observer8(
         pricePerToken: offerPrice.amountRaw
       }
     });
-    useEffect4(() => {
+    useEffect5(() => {
       if (!currencyAddress) return;
       refreshSteps();
     }, [currencyAddress]);
     if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         LoadingModal,
         {
           store: makeOfferModal$,
@@ -1639,7 +1776,7 @@ var ModalContent = observer8(
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         ErrorModal,
         {
           store: makeOfferModal$,
@@ -1663,13 +1800,14 @@ var ModalContent = observer8(
         onClick: () => handleStepExecution(() => steps?.approval.execute()),
         hidden: !steps?.approval.isPending,
         pending: steps?.approval.isExecuting,
-        variant: "glass"
+        variant: "glass",
+        disabled: makeOfferModal$.invalidQuantity.get()
       },
       {
         label: "Make offer",
         onClick: () => handleStepExecution(() => steps?.transaction.execute()),
         pending: steps?.transaction.isExecuting || isLoading,
-        disabled: steps?.approval.isPending || offerPrice.amountRaw === "0" || insufficientBalance || isLoading
+        disabled: steps?.approval.isPending || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || makeOfferModal$.invalidQuantity.get()
       }
     ];
     return /* @__PURE__ */ jsxs13(
@@ -1680,7 +1818,7 @@ var ModalContent = observer8(
         title: "Make an offer",
         ctas,
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1689,7 +1827,7 @@ var ModalContent = observer8(
               chainId
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             priceInput_default,
             {
               chainId,
@@ -1701,16 +1839,16 @@ var ModalContent = observer8(
               }
             }
           ),
-          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx19(
+          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx20(
             QuantityInput,
             {
-              chainId,
               $quantity: makeOfferModal$.quantity,
-              collectionAddress,
-              collectibleId
+              $invalidQuantity: makeOfferModal$.invalidQuantity,
+              decimals: collectible?.decimals || 0,
+              maxQuantity: String(Number.MAX_SAFE_INTEGER)
             }
           ),
-          !!offerPrice && /* @__PURE__ */ jsx19(
+          !!offerPrice && /* @__PURE__ */ jsx20(
             FloorPriceText,
             {
               tokenId: collectibleId,
@@ -1719,7 +1857,7 @@ var ModalContent = observer8(
               price: offerPrice
             }
           ),
-          /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+          /* @__PURE__ */ jsx20(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
         ]
       }
     );
@@ -1727,19 +1865,63 @@ var ModalContent = observer8(
 );
 
 // src/react/ui/modals/SellModal/index.tsx
-import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
+import { Show as Show4, observer as observer10 } from "@legendapp/state/react";
+
+// src/react/hooks/useSell.tsx
+import { useCallback as useCallback3, useState as useState7 } from "react";
+var useSell = ({
+  onSuccess,
+  onError,
+  onTransactionSent,
+  ...config
+}) => {
+  const [isLoading, setIsLoading] = useState7(false);
+  const [steps, setSteps] = useState7(null);
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
+    {
+      ...config,
+      type: "SELL" /* SELL */
+    },
+    onSuccess,
+    onError,
+    onTransactionSent
+  );
+  const loadSteps = useCallback3(
+    async (props) => {
+      if (!machine) return;
+      setIsLoading(true);
+      const generatedSteps = await machine.getTransactionSteps(props);
+      if (!generatedSteps) {
+        setIsLoading(false);
+        return;
+      }
+      setSteps(generatedSteps);
+      setIsLoading(false);
+    },
+    [machine, onError]
+  );
+  return {
+    sell: (props) => machine?.start(props),
+    getSellSteps: (props) => ({
+      isLoading,
+      steps,
+      refreshSteps: () => loadSteps(props)
+    }),
+    isLoading: isMachineLoading
+  };
+};
 
 // src/react/ui/modals/_internal/components/transactionHeader/index.tsx
 import { Box as Box13, Image as Image4, Skeleton as Skeleton5, Text as Text10 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function TransactionHeader({
   title,
   currencyImageUrl,
   date
 }) {
   return /* @__PURE__ */ jsxs14(Box13, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       Text10,
       {
         fontSize: "small",
@@ -1750,7 +1932,7 @@ function TransactionHeader({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx20(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
+    /* @__PURE__ */ jsx21(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
     date && /* @__PURE__ */ jsxs14(
       Text10,
       {
@@ -1764,13 +1946,13 @@ function TransactionHeader({
           " ago"
         ]
       }
-    ) || /* @__PURE__ */ jsx20(Skeleton5, { width: "8", height: "4" })
+    ) || /* @__PURE__ */ jsx21(Skeleton5, { width: "8", height: "4" })
   ] });
 }
 
 // src/react/ui/modals/SellModal/_store.ts
-import { observable as observable5 } from "@legendapp/state";
-var initialState4 = {
+import { observable as observable6 } from "@legendapp/state";
+var initialState5 = {
   isOpen: false,
   collectionAddress: "",
   chainId: "",
@@ -1790,51 +1972,7 @@ var initialState4 = {
     sellModal$.callbacks.set(void 0);
   }
 };
-var sellModal$ = observable5(initialState4);
-
-// src/react/hooks/useSell.tsx
-import { useState as useState7, useCallback as useCallback3 } from "react";
-var useSell = ({
-  onSuccess,
-  onError,
-  onTransactionSent,
-  ...config
-}) => {
-  const [isLoading, setIsLoading] = useState7(false);
-  const [steps, setSteps] = useState7(null);
-  const machine = useTransactionMachine(
-    {
-      ...config,
-      type: "SELL" /* SELL */
-    },
-    onSuccess,
-    onError,
-    onTransactionSent
-  );
-  const loadSteps = useCallback3(
-    async (props) => {
-      if (!machine) return;
-      setIsLoading(true);
-      try {
-        const generatedSteps = await machine.getTransactionSteps(props);
-        setSteps(generatedSteps);
-      } catch (error) {
-        onError?.(error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [machine, onError]
-  );
-  return {
-    sell: (props) => machine?.start({ props }),
-    getSellSteps: (props) => ({
-      isLoading,
-      steps,
-      refreshSteps: () => loadSteps(props)
-    })
-  };
-};
+var sellModal$ = observable6(initialState5);
 
 // src/react/ui/modals/SellModal/_utils/getSellTransactionTitleMessage.ts
 var getSellTransactionTitle = (params) => {
@@ -1857,16 +1995,16 @@ var getSellTransactionMessage = (params, collectibleName) => {
 };
 
 // src/react/ui/modals/SellModal/index.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var useSellModal = (defaultCallbacks) => ({
   show: (args) => sellModal$.open({ ...args, callbacks: defaultCallbacks }),
   close: sellModal$.close
 });
 var SellModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx21(Show3, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx21(ModalContent2, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx22(Show4, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx22(ModalContent2, { showTransactionStatusModal }) });
 };
-var ModalContent2 = observer9(
+var ModalContent2 = observer10(
   ({
     showTransactionStatusModal
   }) => {
@@ -1929,7 +2067,7 @@ var ModalContent2 = observer9(
       collectionAddress
     });
     if (collectionLoading || currenciesLoading) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         LoadingModal,
         {
           store: sellModal$,
@@ -1939,7 +2077,7 @@ var ModalContent2 = observer9(
       );
     }
     if (collectionError || order === void 0) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         ErrorModal,
         {
           store: sellModal$,
@@ -1967,7 +2105,7 @@ var ModalContent2 = observer9(
           }
         ],
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             TransactionHeader,
             {
               title: "Offer received",
@@ -1975,7 +2113,7 @@ var ModalContent2 = observer9(
               date: order && new Date(order.createdAt)
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1984,7 +2122,7 @@ var ModalContent2 = observer9(
               chainId
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             TransactionDetails,
             {
               collectibleId: tokenId,
@@ -2013,12 +2151,12 @@ import {
   Image as Image5,
   Text as Text11
 } from "@0xsequence/design-system";
-import { observer as observer10 } from "@legendapp/state/react";
+import { observer as observer11 } from "@legendapp/state/react";
 import { Close as Close2, Content as Content4, Overlay as Overlay2, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
 
 // src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
-import { observable as observable6 } from "@legendapp/state";
-var initialState5 = {
+import { observable as observable7 } from "@legendapp/state";
+var initialState6 = {
   isOpen: false,
   open: ({
     collectibles,
@@ -2044,7 +2182,7 @@ var initialState5 = {
     successfulPurchaseModal$.isOpen.set(false);
     successfulPurchaseModal$.callbacks.set(void 0);
     successfulPurchaseModal$.state.set({
-      ...initialState5.state
+      ...initialState6.state
     });
   },
   state: {
@@ -2056,22 +2194,22 @@ var initialState5 = {
   },
   callbacks: void 0
 };
-var successfulPurchaseModal$ = observable6(initialState5);
+var successfulPurchaseModal$ = observable7(initialState6);
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var useSuccessfulPurchaseModal = (callbacks) => {
   return {
     show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
     close: () => successfulPurchaseModal$.close()
   };
 };
-var SuccessfulPurchaseModal = observer10(() => {
-  return /* @__PURE__ */ jsx22(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs16(Portal4, { children: [
-    /* @__PURE__ */ jsx22(Overlay2, { className: dialogOverlay }),
+var SuccessfulPurchaseModal = observer11(() => {
+  return /* @__PURE__ */ jsx23(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs16(Portal4, { children: [
+    /* @__PURE__ */ jsx23(Overlay2, { className: dialogOverlay }),
     /* @__PURE__ */ jsxs16(Content4, { className: dialogContent.narrow, children: [
       /* @__PURE__ */ jsxs16(Box14, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           Text11,
           {
             textAlign: "center",
@@ -2081,21 +2219,21 @@ var SuccessfulPurchaseModal = observer10(() => {
             children: "Successful purchase!"
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           CollectiblesGrid,
           {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
         /* @__PURE__ */ jsxs16(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx22(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+          /* @__PURE__ */ jsx23(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx23(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx23(Text11, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx23(Text11, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
-        /* @__PURE__ */ jsx22(SuccessfulPurchaseActions, {})
+        /* @__PURE__ */ jsx23(SuccessfulPurchaseActions, {})
       ] }),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         Close2,
         {
           onClick: () => {
@@ -2103,7 +2241,7 @@ var SuccessfulPurchaseModal = observer10(() => {
           },
           className: closeButton,
           asChild: true,
-          children: /* @__PURE__ */ jsx22(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+          children: /* @__PURE__ */ jsx23(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
         }
       )
     ] })
@@ -2111,7 +2249,7 @@ var SuccessfulPurchaseModal = observer10(() => {
 });
 function SuccessfulPurchaseActions() {
   return /* @__PURE__ */ jsxs16(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
-    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx22(
+    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx23(
       Button3,
       {
         shape: "square",
@@ -2121,7 +2259,7 @@ function SuccessfulPurchaseActions() {
         onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       Button3,
       {
         as: "a",
@@ -2139,7 +2277,7 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx22(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx23(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
     return /* @__PURE__ */ jsxs16(
       Box14,
@@ -2147,7 +2285,7 @@ function CollectiblesGrid({ collectibles }) {
         className: collectiblesGridItem,
         position: "relative",
         children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Image5,
             {
               src: collectible.image,
@@ -2158,7 +2296,7 @@ function CollectiblesGrid({ collectibles }) {
               borderRadius: "sm"
             }
           ),
-          showPlus && /* @__PURE__ */ jsx22(
+          showPlus && /* @__PURE__ */ jsx23(
             Box14,
             {
               position: "absolute",
@@ -2200,13 +2338,13 @@ 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 Show4, observer as observer12 } from "@legendapp/state/react";
+import { Show as Show5, observer as observer13 } from "@legendapp/state/react";
 import { Close as Close3, Content as Content5, Overlay as Overlay3, Portal as Portal5, Root as Root5 } from "@radix-ui/react-dialog";
-import { useAccount as useAccount4 } from "wagmi";
+import { useAccount as useAccount5 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/_store.ts
-import { observable as observable7 } from "@legendapp/state";
-var initialState6 = {
+import { observable as observable8 } from "@legendapp/state";
+var initialState7 = {
   isOpen: false,
   open: ({ chainId, collectionAddress, tokenId }) => {
     transferModal$.state.set({
@@ -2220,7 +2358,7 @@ var initialState6 = {
   close: () => {
     transferModal$.isOpen.set(false);
     transferModal$.state.set({
-      ...initialState6.state
+      ...initialState7.state
     });
     transferModal$.view.set("enterReceiverAddress");
     transferModal$.hash.set(void 0);
@@ -2235,12 +2373,13 @@ var initialState6 = {
   view: "enterReceiverAddress",
   hash: void 0
 };
-var transferModal$ = observable7(initialState6);
+var transferModal$ = observable8(initialState7);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
 import { Box as Box15, Button as Button4, Text as Text12, TextInput } from "@0xsequence/design-system";
+import { observable as observable9 } from "@legendapp/state";
 import { isAddress } from "viem";
-import { useAccount as useAccount3 } from "wagmi";
+import { useAccount as useAccount4 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/messages.ts
 var baseMessages = {
@@ -2292,7 +2431,7 @@ var useHandleTransfer = () => {
   });
   async function transfer() {
     if (collectionType !== "ERC721" /* ERC721 */ && collectionType !== "ERC1155" /* ERC1155 */) {
-      throw new Error("Invalid contract type");
+      throw new InvalidContractTypeError(collectionType);
     }
     if (collectionType === "ERC721" /* ERC721 */) {
       try {
@@ -2360,11 +2499,12 @@ var useHandleTransfer = () => {
 var useHandleTransfer_default = useHandleTransfer;
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var EnterWalletAddressView = () => {
-  const { address } = useAccount3();
+  const { address } = useAccount4();
   const { collectionAddress, tokenId, chainId, collectionType } = transferModal$.state.get();
   const $quantity = transferModal$.state.quantity;
+  const $invalidQuantity = observable9(false);
   const isWalletAddressValid = isAddress(
     transferModal$.state.receiverAddress.get()
   );
@@ -2393,16 +2533,16 @@ var EnterWalletAddressView = () => {
     transferModal$.view.set("followWalletInstructions");
   }
   return /* @__PURE__ */ jsxs17(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx23(Text12, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx24(Text12, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
     /* @__PURE__ */ jsxs17(Box15, { display: "flex", flexDirection: "column", gap: "3", children: [
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         AlertMessage,
         {
           message: getMessage("enterReceiverAddress"),
           type: "warning"
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         TextInput,
         {
           label: "Wallet address",
@@ -2414,16 +2554,16 @@ var EnterWalletAddressView = () => {
         }
       ),
       collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs17(Fragment, { children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           QuantityInput,
           {
             $quantity,
-            chainId,
-            collectionAddress,
-            collectibleId: tokenId
+            $invalidQuantity,
+            decimals: collection?.decimals || 0,
+            maxQuantity: balanceAmount
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           Text12,
           {
             color: insufficientBalance ? "negative" : "text50",
@@ -2435,11 +2575,11 @@ var EnterWalletAddressView = () => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Button4,
       {
         onClick: handleChangeView,
-        disabled: !isWalletAddressValid || insufficientBalance,
+        disabled: !isWalletAddressValid || insufficientBalance || !$quantity.get(),
         title: "Transfer",
         label: "Transfer",
         variant: "primary",
@@ -2454,20 +2594,20 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { observer as observer11 } from "@legendapp/state/react";
 import { Box as Box16, Button as Button5, Text as Text13 } from "@0xsequence/design-system";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var FollowWalletInstructionsView = observer11(() => {
+import { observer as observer12 } from "@legendapp/state/react";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var FollowWalletInstructionsView = observer12(() => {
   return /* @__PURE__ */ jsxs18(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx24(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx24(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx25(Box16, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx25(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
         type: "info"
       }
     ) }),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       Button5,
       {
         disabled: true,
@@ -2485,9 +2625,9 @@ var FollowWalletInstructionsView = observer11(() => {
 var followWalletInstructions_default = FollowWalletInstructionsView;
 
 // src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var useTransferModal = () => {
-  const { chainId: accountChainId } = useAccount4();
+  const { chainId: accountChainId } = useAccount5();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
   const openModal = (args) => {
     transferModal$.open(args);
@@ -2521,174 +2661,36 @@ var useTransferModal = () => {
   };
 };
 var TransferModal = () => {
-  return /* @__PURE__ */ jsx25(Show4, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx25(Modal3, {}) });
+  return /* @__PURE__ */ jsx26(Show5, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx26(Modal3, {}) });
 };
 var Modal3 = () => {
-  return /* @__PURE__ */ jsx25(ModalContent3, {});
+  return /* @__PURE__ */ jsx26(ModalContent3, {});
 };
-var ModalContent3 = observer12(() => {
-  return /* @__PURE__ */ jsx25(Root5, { open: true, children: /* @__PURE__ */ jsxs19(Portal5, { children: [
-    /* @__PURE__ */ jsx25(Overlay3, { className: dialogOverlay2 }),
+var ModalContent3 = observer13(() => {
+  return /* @__PURE__ */ jsx26(Root5, { open: true, children: /* @__PURE__ */ jsxs19(Portal5, { children: [
+    /* @__PURE__ */ jsx26(Overlay3, { className: dialogOverlay2 }),
     /* @__PURE__ */ jsxs19(Content5, { className: transferModalContent, children: [
-      /* @__PURE__ */ jsx25(TransactionModalView, {}),
-      /* @__PURE__ */ jsx25(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx25(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
+      /* @__PURE__ */ jsx26(TransactionModalView, {}),
+      /* @__PURE__ */ jsx26(Close3, { onClick: transferModal$.close, className: closeButton2, asChild: true, children: /* @__PURE__ */ jsx26(IconButton4, { size: "xs", "aria-label": "Close modal", icon: CloseIcon3 }) })
     ] })
   ] }) });
 });
-var TransactionModalView = observer12(() => {
+var TransactionModalView = observer13(() => {
   const { view } = transferModal$.get();
   switch (view) {
     case "enterReceiverAddress":
-      return /* @__PURE__ */ jsx25(enterWalletAddress_default, {});
+      return /* @__PURE__ */ jsx26(enterWalletAddress_default, {});
     case "followWalletInstructions":
-      return /* @__PURE__ */ jsx25(followWalletInstructions_default, {});
+      return /* @__PURE__ */ jsx26(followWalletInstructions_default, {});
     default:
       return null;
   }
 });
 
-// src/react/ui/modals/BuyModal/_store.ts
-import { observable as observable8 } from "@legendapp/state";
-var initialState7 = {
-  isOpen: false,
-  open: ({
-    callbacks,
-    defaultCallbacks,
-    ...args
-  }) => {
-    buyModal$.state.set({
-      quantity: args.order.quantityAvailableFormatted,
-      order: args.order,
-      modalId: buyModal$.state.modalId.get() + 1
-    });
-    buyModal$.callbacks.set(callbacks || defaultCallbacks);
-    buyModal$.isOpen.set(true);
-  },
-  close: () => {
-    buyModal$.isOpen.set(false);
-    buyModal$.callbacks.set(void 0);
-    buyModal$.state.set({
-      ...initialState7.state
-    });
-  },
-  state: {
-    order: void 0,
-    quantity: "1",
-    modalId: 0
-  },
-  callbacks: void 0
-};
-var buyModal$ = observable8(initialState7);
-
-// src/react/ui/modals/BuyModal/index.tsx
-import { observer as observer13, Show as Show5, useSelector } from "@legendapp/state/react";
-import { useEffect as useEffect5 } from "react";
-import { Fragment as Fragment2, jsx as jsx26 } from "react/jsx-runtime";
-var useBuyModal = (callbacks) => {
-  return {
-    show: (args) => buyModal$.open({ ...args, defaultCallbacks: callbacks }),
-    close: () => buyModal$.close()
-  };
-};
-var BuyModal = () => /* @__PURE__ */ jsx26(Show5, { if: buyModal$.isOpen, children: /* @__PURE__ */ jsx26(BuyModalContent, {}) });
-var BuyModalContent = () => {
-  const chainId = String(useSelector(buyModal$.state.order.chainId));
-  const collectionAddress = useSelector(buyModal$.state.order.collectionContractAddress);
-  const collectibleId = useSelector(buyModal$.state.order.tokenId);
-  const modalId = useSelector(buyModal$.state.modalId);
-  const { data: collection } = useCollection({
-    chainId,
-    collectionAddress
-  });
-  const { buy } = useBuyCollectable({
-    chainId,
-    collectionAddress
-  });
-  const { data: collectable } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  if (modalId == 0 || !collection || !collectable || !buy) return null;
-  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx26(
-    CheckoutModal,
-    {
-      buy,
-      collectable,
-      order: buyModal$.state.order.get()
-    },
-    modalId
-  ) : /* @__PURE__ */ jsx26(
-    ERC1155QuantityModal,
-    {
-      buy,
-      collectable,
-      order: buyModal$.state.order.get(),
-      chainId,
-      collectionAddress,
-      collectibleId
-    }
-  );
-};
-function CheckoutModal({ buy, collectable, order }) {
-  useEffect5(() => {
-    const executeBuy = () => {
-      console.log("executeBuy");
-      if (!collectable) return;
-      buy({
-        orderId: order.orderId,
-        collectableDecimals: collectable.decimals || 0,
-        quantity: "1",
-        marketplace: order.marketplace
-      });
-      buyModal$.close();
-    };
-    executeBuy();
-  }, []);
-  return /* @__PURE__ */ jsx26(Fragment2, {});
-}
-var ERC1155QuantityModal = observer13(({
-  buy,
-  collectable,
-  order,
-  chainId,
-  collectionAddress,
-  collectibleId
-}) => {
-  return /* @__PURE__ */ jsx26(
-    ActionModal,
-    {
-      store: buyModal$,
-      onClose: () => buyModal$.close(),
-      title: "Select Quantity",
-      ctas: [
-        {
-          label: "Select Quantity",
-          onClick: () => buy({
-            quantity: buyModal$.state.quantity.get(),
-            orderId: order.orderId,
-            collectableDecimals: collectable.decimals || 0,
-            marketplace: order.marketplace
-          })
-        }
-      ],
-      children: /* @__PURE__ */ jsx26(
-        QuantityInput,
-        {
-          chainId,
-          collectionAddress,
-          collectibleId,
-          $quantity: buyModal$.state.quantity
-        }
-      )
-    }
-  );
-});
-
 // src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var ModalProvider = observer14(() => {
-  return /* @__PURE__ */ jsxs20(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment2, { children: [
     /* @__PURE__ */ jsx27(AccountModal, {}),
     /* @__PURE__ */ jsx27(CreateListingModal, {}),
     /* @__PURE__ */ jsx27(MakeOfferModal, {}),
@@ -2704,7 +2706,7 @@ var ModalProvider = observer14(() => {
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
 import { useState as useState8 } from "react";
 import { Box as Box20, IconButton as IconButton6, Skeleton as Skeleton6 } from "@0xsequence/design-system";
-import { useAccount as useAccount6 } from "wagmi";
+import { useAccount as useAccount7 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
 import { Box as Box17 } from "@0xsequence/design-system";
@@ -2760,7 +2762,7 @@ var ActionButton = observer15(
     const { show: showBuyModal } = useBuyModal();
     if (action === "Buy" /* BUY */) {
       if (!lowestListing)
-        throw new Error("lowestListing is required for BUY action");
+        throw new InvalidStepError("BUY", "lowestListing is required");
       return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
@@ -2776,7 +2778,7 @@ var ActionButton = observer15(
     }
     if (action === "Sell" /* SELL */) {
       if (!highestOffer)
-        throw new Error("highestOffer is required for SELL action");
+        throw new InvalidStepError("SELL", "highestOffer is required");
       return /* @__PURE__ */ jsx29(
         ActionButtonBody,
         {
@@ -2853,7 +2855,7 @@ function ActionButtonBody({ label, onClick }) {
 // src/react/ui/components/collectible-card/Footer.tsx
 import { Box as Box19, IconButton as IconButton5, Image as Image6, Text as Text14 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits3 } from "viem";
-import { useAccount as useAccount5 } from "wagmi";
+import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
 import { Box as Box18 } from "@0xsequence/design-system";
@@ -2901,7 +2903,7 @@ var Footer = ({
   balance,
   isAnimated
 }) => {
-  const { address } = useAccount5();
+  const { address } = useAccount6();
   if (name.length > 15 && highestOffer) {
     name = name.substring(0, 13) + "...";
   }
@@ -3053,7 +3055,7 @@ function CollectibleCard({
   balance,
   cardLoading
 }) {
-  const { address: accountAddress } = useAccount6();
+  const { address: accountAddress } = useAccount7();
   const collectibleMetadata = lowestListing?.metadata;
   const [imageLoadingError, setImageLoadingError] = useState8(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
@@ -3165,13 +3167,13 @@ function CollectibleCard({
 }
 
 export {
+  useBuyModal,
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
   useSuccessfulPurchaseModal,
   useTransferModal,
-  useBuyModal,
   ModalProvider,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-ZZMM3IVS.js.map
+//# sourceMappingURL=chunk-PMDJARYX.js.map