@0xsequence/marketplace-sdk 0.3.2 → 0.3.4

package/dist/{chunk-22NLQ3AS.js → chunk-PMDJARYX.js}

@@ -7,10 +7,14 @@ import {
   MinusIcon_default,
   PlusIcon_default,
   PositiveCircleIcon_default
-} from "./chunk-4YU2UPYH.js";
+} from "./chunk-FFCNYF3S.js";
 import {
+  actionWrapper,
   closeButton,
   closeButton2,
+  collectibleCard,
+  collectibleImage,
+  collectibleTileWrapper,
   collectiblesGrid,
   collectiblesGridImage,
   collectiblesGridImagePale,
@@ -20,15 +24,18 @@ import {
   dialogContent,
   dialogOverlay,
   dialogOverlay2,
+  footer,
+  offerBellButton,
   priceInputCurrencyImage,
   priceInputWrapper,
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-WA433WAJ.js";
+} from "./chunk-L6GSYPCR.js";
 import {
   AlertMessage,
   switchChainModal_default,
+  useBalanceOfCollectible,
   useBuyCollectable,
   useCollectible,
   useCollection,
@@ -41,412 +48,309 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-O7UQGT43.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 { 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
-}) {
-  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";
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-    icon,
-    /* @__PURE__ */ jsx(Text, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        color: "polygonLight",
-        flexGrow: "1",
-        textAlign: "right",
-        fontSize: "normal",
-        fontWeight: "medium",
-        marginLeft: "2",
-        children: truncateMiddle(transactionHash, 4, 4)
-      }
-    )
+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/_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/BuyModal/index.tsx
+import { Show, observer as observer2, useSelector } from "@legendapp/state/react";
+import { useEffect } from "react";
 
-// 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/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
+}) {
+  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,
+      {
+        name: "quantity",
+        decimals: decimals || 0,
+        paddingLeft: "1",
+        label: "Enter quantity",
+        labelLocation: "top",
+        controls: /* @__PURE__ */ jsxs2(
+          Box2,
+          {
+            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/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/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,
+    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,
-      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,
+      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: [
           {
-            color: "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            marginRight: "1",
-            children: title
+            label: "Select Quantity",
+            onClick: () => {
+              buy({
+                quantity: buyModal$.state.quantity.get(),
+                orderId: order.orderId,
+                collectableDecimals: collectable.decimals || 0,
+                marketplace: order.marketplace
+              });
+              buyModal$.close();
+            }
           }
-        ),
-        /* @__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,
+        ],
+        children: /* @__PURE__ */ jsx3(
+          QuantityInput,
           {
-            src: collectibleImage2,
-            alt: collectibleName,
-            width: "9",
-            height: "9",
-            borderRadius: "xs",
-            marginRight: "3"
-          }
-        ),
-        /* @__PURE__ */ jsxs2(
-          Box3,
-          {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "0.5",
-            children: [
-              /* @__PURE__ */ jsx3(Text3, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
-              /* @__PURE__ */ jsx3(Text3, { color: "text100", fontSize: "small", children: collectionName })
-            ]
-          }
-        ),
-        price && /* @__PURE__ */ jsxs2(
-          Box3,
-          {
-            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", 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 {
-    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", children: title }) : /* @__PURE__ */ jsx4(Skeleton, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx4(Text4, { fontSize: "small", color: "text80", 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
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        TransactionFooter,
-        {
-          transactionHash: hash,
-          isConfirming,
-          isConfirmed,
-          isFailed
-        }
-      ),
-      /* @__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 */
@@ -459,47 +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 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 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 Box5, 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 jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Calendar({ ...props }) {
   const { selectedDate, setSelectedDate } = props;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     DayPicker,
     {
       disabled: {
@@ -547,13 +501,13 @@ Calendar.displayName = "Calendar";
 var calendar_default = Calendar;
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { jsx as jsx7, 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__ */ jsx7(Trigger, { asChild: true, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(Root2, { children: [
+    /* @__PURE__ */ jsx8(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx8(
       Button2,
       {
         leftIcon: CalendarIcon_default,
@@ -563,7 +517,7 @@ function CalendarPopover({
         shape: "square"
       }
     ) }),
-    /* @__PURE__ */ jsx7(Portal2, { children: /* @__PURE__ */ jsx7(Content2, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(Portal2, { children: /* @__PURE__ */ jsx8(Content2, { className: dateSelectPopoverContent, sideOffset: 5, children: /* @__PURE__ */ jsx8(
       calendar_default,
       {
         selectedDate,
@@ -574,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 jsx8, 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__ */ jsx8(Select.ItemText, { children }),
-    /* @__PURE__ */ jsx8(Select.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx8(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__ */ jsx8(Select.Value, { placeholder }),
-      /* @__PURE__ */ jsx8(Select.Icon, { children: /* @__PURE__ */ jsx8(ChevronDownIcon, { size: "xs" }) })
-    ] }),
-    /* @__PURE__ */ jsx8(Select.Portal, { children: /* @__PURE__ */ jsx8(Select.Content, { className: content, children: /* @__PURE__ */ jsx8(Select.Viewport, { children: items.map((item2) => /* @__PURE__ */ jsx8(
-      CustomSelectItem,
-      {
-        value: item2.value,
-        disabled: item2.disabled,
-        children: item2.label
-      },
-      item2.value
-    )) }) }) })
-  ] });
-};
-
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -645,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(
@@ -670,19 +582,20 @@ var ExpirationDateSelect = observer4(function ExpirationDateSelect2({
     }
     $date.set(date);
   }
-  return /* @__PURE__ */ jsxs7(Box5, { width: "full", position: "relative", children: [
+  return /* @__PURE__ */ jsxs5(Box5, { width: "full", position: "relative", children: [
     /* @__PURE__ */ jsx9(
-      Text6,
+      Text2,
       {
         fontSize: "small",
         fontWeight: "medium",
         textAlign: "left",
         width: "full",
         color: "text100",
+        fontFamily: "body",
         children: "Set expiry"
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs5(
       Box5,
       {
         className,
@@ -738,7 +651,7 @@ 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 { Text as Text3 } from "@0xsequence/design-system";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
@@ -765,31 +678,32 @@ function FloorPriceText({
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
   return /* @__PURE__ */ jsx10(
-    Text7,
+    Text3,
     {
       fontSize: "small",
       fontWeight: "medium",
       textAlign: "left",
       width: "full",
       color: "text50",
+      fontFamily: "body",
       children: floorPriceDifferenceText
     }
   );
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box6, 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 { 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 = observer5(function CurrencyOptionsSelect2({
+var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
   chainId,
   collectionAddress,
   $selectedCurrency
@@ -798,17 +712,17 @@ 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__ */ jsx11(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) => ({
-      label: currency.name,
+      label: currency.symbol,
       value: currency.contractAddress
     })
   );
@@ -818,27 +732,19 @@ var CurrencyOptionsSelect = observer5(function CurrencyOptionsSelect2({
     );
     $selectedCurrency.set(c);
   };
-  return /* @__PURE__ */ jsx11(
-    CustomSelect,
-    {
-      items: options,
-      placeholder: options[0].label,
-      onValueChange: onChange,
-      defaultValue: options[0].value
-    }
-  );
+  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 jsx12, 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(),
@@ -850,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;
@@ -868,7 +774,7 @@ var PriceInput = observer6(function PriceInput2({
     $listingPrice.amountRaw.set(parsedAmount.toString());
     checkBalance && checkInsufficientBalance(parsedAmount.toString());
   };
-  return /* @__PURE__ */ jsxs8(Box6, { className: priceInputWrapper, position: "relative", children: [
+  return /* @__PURE__ */ jsxs6(Box6, { className: priceInputWrapper, position: "relative", children: [
     /* @__PURE__ */ jsx12(
       Box6,
       {
@@ -881,7 +787,7 @@ var PriceInput = observer6(function PriceInput2({
       }
     ),
     /* @__PURE__ */ jsx12(
-      NumericInput,
+      NumericInput2,
       {
         name: "listingPrice",
         decimals: currencyDecimals,
@@ -905,175 +811,48 @@ var PriceInput = observer6(function PriceInput2({
 });
 var priceInput_default = PriceInput;
 
-// src/react/ui/modals/_internal/components/quantityInput/index.tsx
-import { Box as Box7, IconButton as IconButton2, NumericInput as NumericInput2 } from "@0xsequence/design-system";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function QuantityInput({
-  $quantity,
-  chainId,
+// 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 { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function TokenPreview({
+  collectionName,
   collectionAddress,
-  collectibleId
+  collectibleId,
+  chainId
 }) {
-  const { data: collectable, isLoading: collectableLoading } = useCollectible({
+  const { data: collectable, isLoading: collectibleLoading } = 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 !== "");
+  if (collectibleLoading) {
+    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" })
+      ] })
+    ] });
   }
-  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__ */ jsx13(Box7, { className: quantityInputWrapper, children: /* @__PURE__ */ jsx13(
-    NumericInput2,
-    {
-      name: "quantity",
-      decimals: quantityDecimals || 0,
-      paddingLeft: "1",
-      label: "Enter quantity",
-      labelLocation: "top",
-      placeholder: getPlaceholder(quantityDecimals || 0),
-      controls: /* @__PURE__ */ jsxs9(
-        Box7,
-        {
-          display: "flex",
-          alignItems: "center",
-          gap: "1",
-          marginRight: "2",
-          children: [
-            /* @__PURE__ */ jsx13(
-              IconButton2,
-              {
-                disabled: Number.parseFloat(quantity) === 0 || !quantity,
-                onClick: handleDecrement,
-                background: "buttonGlass",
-                size: "xs",
-                icon: MinusIcon_default
-              }
-            ),
-            /* @__PURE__ */ jsx13(
-              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 Box8, Image as Image2, Skeleton as Skeleton3, Text as Text8 } from "@0xsequence/design-system";
-
-// src/react/ui/images/chess-tile.png
-var chess_tile_default = "./chess-tile-6BS5MQT5.png";
-
-// src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-function TokenPreview({
-  collectionName,
-  collectionAddress,
-  collectibleId,
-  chainId
-}) {
-  const { data: collectable, isLoading: collectibleLoading } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs10(Box8, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
-      /* @__PURE__ */ jsx14(Skeleton3, { width: "9", height: "9", borderRadius: "xs" }),
-      /* @__PURE__ */ jsxs10(Box8, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
-        /* @__PURE__ */ jsx14(Skeleton3, { width: "1/3", height: "3" }),
-        /* @__PURE__ */ jsx14(Skeleton3, { width: "1/2", height: "3" })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs10(Box8, { className: tokenPreview, children: [
-    /* @__PURE__ */ jsx14(
-      Image2,
-      {
-        src: collectable?.image || chess_tile_default,
-        alt: collectable?.name,
-        width: "9",
-        height: "9",
-        borderRadius: "xs"
+  return /* @__PURE__ */ jsxs7(Box7, { className: tokenPreview, children: [
+    /* @__PURE__ */ jsx13(
+      Image,
+      {
+        src: collectable?.image || chess_tile_default,
+        alt: collectable?.name,
+        width: "9",
+        height: "9",
+        borderRadius: "xs"
       }
     ),
-    /* @__PURE__ */ jsxs10(Box8, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
-      /* @__PURE__ */ jsx14(
-        Text8,
+    /* @__PURE__ */ jsxs7(Box7, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+      /* @__PURE__ */ jsx13(
+        Text4,
         {
           fontSize: "small",
           color: "text80",
@@ -1082,8 +861,8 @@ function TokenPreview({
           children: collectionName
         }
       ),
-      /* @__PURE__ */ jsx14(
-        Text8,
+      /* @__PURE__ */ jsx13(
+        Text4,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -1097,9 +876,9 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box9, Image as Image3, Skeleton as Skeleton4, Text as Text9 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
-import { jsx as jsx15, 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,
@@ -1118,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(
-    Box9,
+  return /* @__PURE__ */ jsxs8(
+    Box8,
     {
       width: "full",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ jsx15(Text9, { fontSize: "small", color: "text50", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs11(Box9, { display: "flex", alignItems: "center", gap: "2", children: [
-          /* @__PURE__ */ jsx15(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx15(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs11(Text9, { fontSize: "small", color: "text100", 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
@@ -1147,10 +926,421 @@ function TransactionDetails({
   );
 }
 
-// src/react/ui/modals/CreateListingModal/_store.ts
+// 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";
-import { addDays as addDays2 } from "date-fns/addDays";
 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 observable4 } from "@legendapp/state";
+import { addDays as addDays2 } from "date-fns/addDays";
+var initialState3 = {
   isOpen: false,
   collectionAddress: "",
   chainId: "",
@@ -1162,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,
@@ -1180,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) => {
@@ -1202,18 +1393,8 @@ var getCreateListingTransactionMessage = (params, collectibleName) => {
   return `You just listed ${collectibleName}. It should be confirmed on the blockchain shortly.`;
 };
 
-// src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx
-import { Box as Box10, Spinner as Spinner2 } from "@0xsequence/design-system";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx16(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx16(Box10, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx16(Spinner2, { size: "lg" }) }) });
-
-// src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
-import { Box as Box11 } from "@0xsequence/design-system";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ErrorModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx17(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx17(Box11, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" }) });
-
 // 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 }),
@@ -1222,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
   }) => {
@@ -1247,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) => {
@@ -1266,7 +1454,11 @@ var Modal2 = observer7(
         createListingModal$.close();
       },
       onError: (error) => {
-        createListingModal$.onError?.(error);
+        if (typeof createListingModal$.callbacks?.onError === "function") {
+          createListingModal$.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
       }
     });
     const handleStepExecution = async (execute) => {
@@ -1278,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$,
@@ -1289,7 +1481,7 @@ var Modal2 = observer7(
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx19(
         ErrorModal,
         {
           store: createListingModal$,
@@ -1316,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(
@@ -1333,7 +1526,7 @@ var Modal2 = observer7(
         title: "List item for sale",
         ctas,
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1343,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,
@@ -1351,7 +1544,7 @@ var Modal2 = observer7(
                 $listingPrice: createListingModal$.listingPrice
               }
             ),
-            !!listingPrice && /* @__PURE__ */ jsx18(
+            !!listingPrice && /* @__PURE__ */ jsx19(
               FloorPriceText,
               {
                 tokenId: collectibleId,
@@ -1361,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,
@@ -1388,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,
@@ -1401,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 */
@@ -1414,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: "",
@@ -1449,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);
@@ -1462,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) => {
@@ -1485,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
   }) => {
@@ -1541,10 +1735,18 @@ var ModalContent = observer8(
         makeOfferModal$.close();
       },
       onSuccess: (hash) => {
-        makeOfferModal$.callbacks?.onSuccess?.(hash);
+        if (typeof makeOfferModal$.callbacks?.onSuccess === "function") {
+          makeOfferModal$.callbacks.onSuccess(hash);
+        } else {
+          console.debug("onSuccess callback not provided:", hash);
+        }
       },
       onError: (error) => {
-        makeOfferModal$.callbacks?.onError?.(error);
+        if (typeof makeOfferModal$.callbacks?.onError === "function") {
+          makeOfferModal$.callbacks.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
       }
     });
     const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
@@ -1559,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$,
@@ -1574,7 +1776,7 @@ var ModalContent = observer8(
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         ErrorModal,
         {
           store: makeOfferModal$,
@@ -1598,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(
@@ -1615,7 +1818,7 @@ var ModalContent = observer8(
         title: "Make an offer",
         ctas,
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1624,7 +1827,7 @@ var ModalContent = observer8(
               chainId
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             priceInput_default,
             {
               chainId,
@@ -1636,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,
@@ -1654,7 +1857,7 @@ var ModalContent = observer8(
               price: offerPrice
             }
           ),
-          /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+          /* @__PURE__ */ jsx20(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
         ]
       }
     );
@@ -1662,53 +1865,10 @@ var ModalContent = observer8(
 );
 
 // src/react/ui/modals/SellModal/index.tsx
-import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
-
-// 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";
-function TransactionHeader({
-  title,
-  currencyImageUrl,
-  date
-}) {
-  return /* @__PURE__ */ jsxs14(Box13, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx20(Text10, { fontSize: "small", fontWeight: "medium", color: "text80", marginRight: "1", children: title }),
-    /* @__PURE__ */ jsx20(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
-    date && /* @__PURE__ */ jsxs14(Text10, { fontSize: "small", color: "text50", flexGrow: "1", textAlign: "right", children: [
-      formatDistanceToNow2(date),
-      " ago"
-    ] }) || /* @__PURE__ */ jsx20(Skeleton5, { width: "8", height: "4" })
-  ] });
-}
-
-// src/react/ui/modals/SellModal/_store.ts
-import { observable as observable5 } from "@legendapp/state";
-var initialState4 = {
-  isOpen: false,
-  collectionAddress: "",
-  chainId: "",
-  tokenId: "",
-  order: void 0,
-  callbacks: void 0,
-  open: (args) => {
-    sellModal$.collectionAddress.set(args.collectionAddress);
-    sellModal$.chainId.set(args.chainId);
-    sellModal$.tokenId.set(args.tokenId);
-    sellModal$.order.set(args.order);
-    sellModal$.callbacks.set(args.callbacks);
-    sellModal$.isOpen.set(true);
-  },
-  close: () => {
-    sellModal$.isOpen.set(false);
-    sellModal$.callbacks.set(void 0);
-  }
-};
-var sellModal$ = observable5(initialState4);
+import { Show as Show4, observer as observer10 } from "@legendapp/state/react";
 
 // src/react/hooks/useSell.tsx
-import { useState as useState7, useCallback as useCallback3 } from "react";
+import { useCallback as useCallback3, useState as useState7 } from "react";
 var useSell = ({
   onSuccess,
   onError,
@@ -1717,7 +1877,7 @@ var useSell = ({
 }) => {
   const [isLoading, setIsLoading] = useState7(false);
   const [steps, setSteps] = useState7(null);
-  const machine = useTransactionMachine(
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine(
     {
       ...config,
       type: "SELL" /* SELL */
@@ -1730,27 +1890,90 @@ var useSell = ({
     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 {
-    sell: (props) => machine?.start({ props }),
+    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 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__ */ jsx21(
+      Text10,
+      {
+        fontSize: "small",
+        fontWeight: "medium",
+        color: "text80",
+        marginRight: "1",
+        fontFamily: "body",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx21(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
+    date && /* @__PURE__ */ jsxs14(
+      Text10,
+      {
+        fontSize: "small",
+        color: "text50",
+        flexGrow: "1",
+        textAlign: "right",
+        fontFamily: "body",
+        children: [
+          formatDistanceToNow2(date),
+          " ago"
+        ]
+      }
+    ) || /* @__PURE__ */ jsx21(Skeleton5, { width: "8", height: "4" })
+  ] });
+}
+
+// src/react/ui/modals/SellModal/_store.ts
+import { observable as observable6 } from "@legendapp/state";
+var initialState5 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  tokenId: "",
+  order: void 0,
+  callbacks: void 0,
+  open: (args) => {
+    sellModal$.collectionAddress.set(args.collectionAddress);
+    sellModal$.chainId.set(args.chainId);
+    sellModal$.tokenId.set(args.tokenId);
+    sellModal$.order.set(args.order);
+    sellModal$.callbacks.set(args.callbacks);
+    sellModal$.isOpen.set(true);
+  },
+  close: () => {
+    sellModal$.isOpen.set(false);
+    sellModal$.callbacks.set(void 0);
+  }
+};
+var sellModal$ = observable6(initialState5);
+
 // src/react/ui/modals/SellModal/_utils/getSellTransactionTitleMessage.ts
 var getSellTransactionTitle = (params) => {
   if (params.isConfirmed) {
@@ -1772,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
   }) => {
@@ -1817,10 +2040,18 @@ var ModalContent2 = observer9(
         sellModal$.close();
       },
       onSuccess: (hash) => {
-        sellModal$.callbacks?.onSuccess?.(hash);
+        if (typeof sellModal$.callbacks?.onSuccess === "function") {
+          sellModal$.callbacks.onSuccess(hash);
+        } else {
+          console.debug("onSuccess callback not provided:", hash);
+        }
       },
       onError: (error) => {
-        sellModal$.callbacks?.onError?.(error);
+        if (typeof sellModal$.callbacks?.onError === "function") {
+          sellModal$.callbacks.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
       }
     });
     const {
@@ -1836,7 +2067,7 @@ var ModalContent2 = observer9(
       collectionAddress
     });
     if (collectionLoading || currenciesLoading) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         LoadingModal,
         {
           store: sellModal$,
@@ -1846,7 +2077,7 @@ var ModalContent2 = observer9(
       );
     }
     if (collectionError || order === void 0) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         ErrorModal,
         {
           store: sellModal$,
@@ -1874,7 +2105,7 @@ var ModalContent2 = observer9(
           }
         ],
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             TransactionHeader,
             {
               title: "Offer received",
@@ -1882,7 +2113,7 @@ var ModalContent2 = observer9(
               date: order && new Date(order.createdAt)
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1891,7 +2122,7 @@ var ModalContent2 = observer9(
               chainId
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             TransactionDetails,
             {
               collectibleId: tokenId,
@@ -1920,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,
@@ -1951,7 +2182,7 @@ var initialState5 = {
     successfulPurchaseModal$.isOpen.set(false);
     successfulPurchaseModal$.callbacks.set(void 0);
     successfulPurchaseModal$.state.set({
-      ...initialState5.state
+      ...initialState6.state
     });
   },
   state: {
@@ -1963,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",
@@ -1988,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: () => {
@@ -2010,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 })
         }
       )
     ] })
@@ -2018,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",
@@ -2028,7 +2259,7 @@ function SuccessfulPurchaseActions() {
         onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       Button3,
       {
         as: "a",
@@ -2046,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,
@@ -2054,7 +2285,7 @@ function CollectiblesGrid({ collectibles }) {
         className: collectiblesGridItem,
         position: "relative",
         children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Image5,
             {
               src: collectible.image,
@@ -2065,7 +2296,7 @@ function CollectiblesGrid({ collectibles }) {
               borderRadius: "sm"
             }
           ),
-          showPlus && /* @__PURE__ */ jsx22(
+          showPlus && /* @__PURE__ */ jsx23(
             Box14,
             {
               position: "absolute",
@@ -2107,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({
@@ -2127,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);
@@ -2142,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 = {
@@ -2199,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 {
@@ -2267,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()
   );
@@ -2300,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", 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",
@@ -2321,31 +2554,32 @@ 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",
             fontSize: "small",
             fontWeight: "medium",
+            fontFamily: "body",
             children: `You have ${balanceAmount} of this item`
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Button4,
       {
         onClick: handleChangeView,
-        disabled: !isWalletAddressValid || insufficientBalance,
+        disabled: !isWalletAddressValid || insufficientBalance || !$quantity.get(),
         title: "Transfer",
         label: "Transfer",
         variant: "primary",
@@ -2360,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", 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,
@@ -2391,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);
@@ -2427,156 +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({
-      ...buyModal$.state.get(),
-      order: args.order
-    });
-    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"
-  },
-  callbacks: void 0
-};
-var buyModal$ = observable8(initialState7);
-
-// src/react/ui/modals/BuyModal/index.tsx
-import { observer as observer13, 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 = () => {
-  const isOpen = useSelector(buyModal$.isOpen);
-  const { data: collection } = useCollection({
-    chainId: buyModal$.state.order.chainId.get(),
-    collectionAddress: buyModal$.state.order.collectionContractAddress.get()
-  });
-  if (!isOpen || !collection) return null;
-  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx26(CheckoutModal, {}) : /* @__PURE__ */ jsx26(ERC1155QuantityModal, {});
-};
-var CheckoutModal = observer13(() => {
-  const order = buyModal$.state.order.get();
-  const chainId = String(order.chainId);
-  const collectionAddress = order.collectionContractAddress;
-  const collectibleId = order.tokenId;
-  const { buy } = useBuyCollectable({
-    chainId,
-    collectionAddress
-  });
-  const { data: collectable } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  useEffect5(() => {
-    if (!collectable) return;
-    buy({
-      orderId: order.orderId,
-      collectableDecimals: collectable.decimals || 0,
-      quantity: "1",
-      marketplace: order.marketplace
-    });
-  }, [order, collectable]);
-  return /* @__PURE__ */ jsx26(Fragment2, {});
-});
-var ERC1155QuantityModal = observer13(() => {
-  const order = buyModal$.state.order.get();
-  const chainId = String(order.chainId);
-  const collectionAddress = order.collectionContractAddress;
-  const collectibleId = order.tokenId;
-  const { buy } = useBuyCollectable({
-    chainId,
-    collectionAddress
-  });
-  const { data: collectable } = useCollectible({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  if (!order || !collectable) return null;
-  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, {}),
@@ -2592,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";
@@ -2648,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,
         {
@@ -2664,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,
         {
@@ -2741,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";
@@ -2777,14 +2891,6 @@ var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
 );
 var Bell_default = SvgBellIcon;
 
-// src/react/ui/components/collectible-card/styles.css.ts
-var actionWrapper = "styles_actionWrapper__biep7a7";
-var collectibleCard = "styles_collectibleCard__biep7a0";
-var collectibleImage = "styles_collectibleImage__biep7a1";
-var collectibleTileWrapper = "styles_collectibleTileWrapper__biep7a2";
-var footer = { animated: "styles_footer_animated__biep7a5 fyvr11wl", "static": "fyvr11wl" };
-var offerBellButton = "styles_offerBellButton__biep7a3";
-
 // src/react/ui/components/collectible-card/Footer.tsx
 import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var Footer = ({
@@ -2797,7 +2903,7 @@ var Footer = ({
   balance,
   isAnimated
 }) => {
-  const { address } = useAccount5();
+  const { address } = useAccount6();
   if (name.length > 15 && highestOffer) {
     name = name.substring(0, 13) + "...";
   }
@@ -2823,6 +2929,7 @@ var Footer = ({
             alignItems: "center",
             justifyContent: "space-between",
             position: "relative",
+            width: "full",
             children: [
               /* @__PURE__ */ jsx31(
                 Text14,
@@ -2838,8 +2945,12 @@ var Footer = ({
               highestOffer && onOfferClick && /* @__PURE__ */ jsx31(
                 IconButton5,
                 {
+                  size: "xs",
                   variant: "primary",
                   className: offerBellButton,
+                  position: "absolute",
+                  right: "0",
+                  top: "0",
                   onClick: (e) => {
                     e.stopPropagation();
                     onOfferClick?.();
@@ -2870,41 +2981,31 @@ var Footer = ({
             }
           )
         ] }),
-        !!balance && type !== "ERC721" /* ERC721 */ && /* @__PURE__ */ jsxs21(
-          Text14,
-          {
-            background: "backgroundSecondary",
-            color: "text80",
-            fontSize: "small",
-            textAlign: "left",
-            fontFamily: "body",
-            paddingX: "2",
-            paddingY: "1",
-            borderRadius: "sm",
-            children: [
-              "Owned: ",
-              balance
-            ]
-          }
-        ),
-        type === "ERC721" /* ERC721 */ && /* @__PURE__ */ jsx31(
-          Text14,
-          {
-            background: "backgroundSecondary",
-            color: "text80",
-            fontSize: "small",
-            textAlign: "left",
-            fontFamily: "body",
-            paddingX: "2",
-            paddingY: "1",
-            borderRadius: "sm",
-            children: "ERC-721"
-          }
-        )
+        /* @__PURE__ */ jsx31(TokenTypeBalancePill, { balance, type })
       ]
     }
   );
 };
+var TokenTypeBalancePill = ({
+  balance,
+  type
+}) => {
+  const displayText = type === "ERC1155" /* ERC1155 */ ? !!balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
+  return /* @__PURE__ */ jsx31(
+    Text14,
+    {
+      background: "backgroundSecondary",
+      color: "text80",
+      fontSize: "small",
+      textAlign: "left",
+      fontFamily: "body",
+      paddingX: "2",
+      paddingY: "1",
+      borderRadius: "sm",
+      children: displayText
+    }
+  );
+};
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -2954,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({
@@ -2991,7 +3092,7 @@ function CollectibleCard({
           height: "full",
           zIndex: "10",
           overflow: "hidden",
-          onClick: onCollectibleClick,
+          onClick: () => onCollectibleClick?.(collectibleId),
           border: "none",
           cursor: "pointer",
           padding: "0",
@@ -3066,13 +3167,13 @@ function CollectibleCard({
 }
 
 export {
+  useBuyModal,
   useCreateListingModal,
   useMakeOfferModal,
   useSellModal,
   useSuccessfulPurchaseModal,
   useTransferModal,
-  useBuyModal,
   ModalProvider,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-22NLQ3AS.js.map
+//# sourceMappingURL=chunk-PMDJARYX.js.map