@0xsequence/marketplace-sdk 0.3.5 → 0.3.6

package/dist/{chunk-URTXTVOU.js → chunk-F42XMKDS.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   ActionModal
-} from "./chunk-Q57TEA3Z.js";
+} from "./chunk-NMCGA2TB.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -48,12 +48,13 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-6LQST3KZ.js";
+} from "./chunk-Z3VR2KMP.js";
 import {
   iconVariants
 } from "./chunk-SBVLWSRZ.js";
 import {
   calculatePriceDifferencePercentage,
+  getPublicRpcClient,
   truncateMiddle
 } from "./chunk-OUZ42I6B.js";
 import {
@@ -88,6 +89,7 @@ var AccountModal = observer(function AccountModal2() {
 });
 
 // src/react/ui/modals/BuyModal/index.tsx
+import { Box as Box3, Text as Text2, TokenImage } from "@0xsequence/design-system";
 import { Show, observer as observer2, useSelector } from "@legendapp/state/react";
 import { useEffect } from "react";
 
@@ -101,9 +103,15 @@ function QuantityInput({
   maxQuantity
 }) {
   function handleChangeQuantity(value) {
-    const formattedValue = formatQuantity(value);
-    $quantity.set(formattedValue);
-    validateQuantity(formattedValue);
+    const sanitizedValue = value.replace(/[^\d.]/g, "");
+    const decimalParts = sanitizedValue.split(".");
+    let formattedValue = sanitizedValue;
+    if (decimalParts.length > 2) {
+      formattedValue = decimalParts[0] + "." + decimalParts[1];
+    }
+    const finalValue = formatQuantity(formattedValue);
+    $quantity.set(finalValue);
+    validateQuantity(finalValue);
   }
   function validateQuantity(value) {
     if (!value || value.trim() === "" || isNaN(Number(value))) {
@@ -111,12 +119,21 @@ function QuantityInput({
       return;
     }
     const numValue = Number(value);
+    const decimalParts = value.split(".");
+    if (decimalParts.length > 1 && decimalParts[1].length > decimals) {
+      $invalidQuantity.set(true);
+      return;
+    }
     $invalidQuantity.set(numValue <= 0 || numValue > Number(maxQuantity));
   }
   function formatQuantity(value) {
     if (!value || isNaN(Number(value))) {
       return "0";
     }
+    const decimalParts = value.split(".");
+    if (decimalParts.length > 1 && decimalParts[1].length > decimals) {
+      return Number(value).toFixed(decimals);
+    }
     if (Number(value) > Number(maxQuantity)) {
       return maxQuantity;
     }
@@ -220,7 +237,8 @@ var initialState = {
 var buyModal$ = observable2(initialState);
 
 // src/react/ui/modals/BuyModal/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { formatUnits, parseUnits } from "viem";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var useBuyModal = (callbacks) => {
   return {
     show: (args) => buyModal$.open({ ...args, defaultCallbacks: callbacks }),
@@ -288,7 +306,7 @@ function CheckoutModal({
       buy({
         orderId: order.orderId,
         collectableDecimals: collectable.decimals || 0,
-        quantity: "1",
+        quantity: parseUnits("1", collectable.decimals || 0).toString(),
         marketplace: order.marketplace
       });
     };
@@ -299,8 +317,18 @@ function CheckoutModal({
 var ERC1155QuantityModal = observer2(
   ({ buy, collectable, order }) => {
     buyModal$.state.quantity.set(
-      Math.max(Number(order.quantityRemaining), 1).toString()
+      Math.min(Number(order.quantityRemaining), 1).toString()
     );
+    const { data: currencies } = useCurrencies({
+      chainId: order.chainId,
+      collectionAddress: order.collectionContractAddress
+    });
+    const currency = currencies?.find(
+      (currency2) => currency2.contractAddress === order.priceCurrencyAddress
+    );
+    const quantity = Number(buyModal$.state.quantity.get());
+    const pricePerToken = order.priceAmount;
+    const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
     return /* @__PURE__ */ jsx3(
       ActionModal,
       {
@@ -309,10 +337,13 @@ var ERC1155QuantityModal = observer2(
         title: "Select Quantity",
         ctas: [
           {
-            label: "Select Quantity",
+            label: "Buy now",
             onClick: () => {
               buy({
-                quantity: buyModal$.state.quantity.get(),
+                quantity: parseUnits(
+                  buyModal$.state.quantity.get(),
+                  collectable.decimals || 0
+                ).toString(),
                 orderId: order.orderId,
                 collectableDecimals: collectable.decimals || 0,
                 marketplace: order.marketplace
@@ -321,23 +352,33 @@ var ERC1155QuantityModal = observer2(
             }
           }
         ],
-        children: /* @__PURE__ */ jsx3(
-          QuantityInput,
-          {
-            $quantity: buyModal$.state.quantity,
-            $invalidQuantity: buyModal$.state.invalidQuantity,
-            decimals: order.quantityDecimals,
-            maxQuantity: order.quantityRemaining
-          }
-        )
+        children: /* @__PURE__ */ jsxs3(Box3, { display: "flex", flexDirection: "column", gap: "4", children: [
+          /* @__PURE__ */ jsx3(
+            QuantityInput,
+            {
+              $quantity: buyModal$.state.quantity,
+              $invalidQuantity: buyModal$.state.invalidQuantity,
+              decimals: order.quantityDecimals,
+              maxQuantity: order.quantityRemaining
+            }
+          ),
+          /* @__PURE__ */ jsxs3(Box3, { display: "flex", flexDirection: "column", gap: "2", children: [
+            /* @__PURE__ */ jsx3(Text2, { color: "text50", fontSize: "small", children: "Total Price" }),
+            /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", gap: "2", children: [
+              /* @__PURE__ */ jsx3(TokenImage, { src: currency?.imageUrl, size: "xs" }),
+              /* @__PURE__ */ jsx3(Text2, { color: "text", fontSize: "large", fontWeight: "bold", children: formatUnits(BigInt(totalPrice), currency?.decimals || 0) })
+            ] })
+          ] })
+        ] })
       }
     );
   }
 );
 
 // src/react/ui/modals/CreateListingModal/index.tsx
-import { Box as Box12 } from "@0xsequence/design-system";
+import { Box as Box13 } from "@0xsequence/design-system";
 import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
+import { parseUnits as parseUnits3 } from "viem";
 import { useAccount as useAccount3 } from "wagmi";
 
 // src/react/hooks/useCreateListing.tsx
@@ -385,18 +426,18 @@ var useCreateListing = ({
 };
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
-import { Box as Box3 } from "@0xsequence/design-system";
+import { Box as Box4 } 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" }) });
+var ErrorModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx4(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx4(Box4, { 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 { Box as Box5, 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" }) }) });
+var LoadingModal = ({ store, onClose, title }) => /* @__PURE__ */ jsx5(ActionModal, { store, onClose, title, ctas: [], children: /* @__PURE__ */ jsx5(Box5, { 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 useState2 } from "react";
-import { Box as Box5, Text as Text2 } from "@0xsequence/design-system";
+import { Box as Box6, Text as Text3 } from "@0xsequence/design-system";
 import { observer as observer3 } from "@legendapp/state/react";
 import { addDays, isSameDay } from "date-fns";
 
@@ -412,9 +453,9 @@ 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";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var CustomSelectItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxs3(Select.Item, { className: item, ...props, ref: forwardedRef, children: [
+  return /* @__PURE__ */ jsxs4(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" }) })
   ] });
@@ -425,8 +466,8 @@ var CustomSelect = ({
   onValueChange,
   defaultValue
 }) => {
-  return /* @__PURE__ */ jsxs3(Select.Root, { onValueChange, defaultValue, children: [
-    /* @__PURE__ */ jsxs3(Select.Trigger, { className: trigger, children: [
+  return /* @__PURE__ */ jsxs4(Select.Root, { onValueChange, defaultValue, children: [
+    /* @__PURE__ */ jsxs4(Select.Trigger, { className: trigger, children: [
       /* @__PURE__ */ jsx6(Select.Value, { placeholder }),
       /* @__PURE__ */ jsx6(Select.Icon, { children: /* @__PURE__ */ jsx6(ChevronDownIcon, { size: "xs" }) })
     ] }),
@@ -501,12 +542,12 @@ Calendar.displayName = "Calendar";
 var calendar_default = Calendar;
 
 // src/react/ui/modals/_internal/components/calendarPopover/index.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function CalendarPopover({
   selectedDate,
   setSelectedDate
 }) {
-  return /* @__PURE__ */ jsxs4(Root2, { children: [
+  return /* @__PURE__ */ jsxs5(Root2, { children: [
     /* @__PURE__ */ jsx8(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx8(
       Button2,
       {
@@ -529,7 +570,7 @@ function CalendarPopover({
 }
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var PRESET_RANGES = {
   TODAY: {
     label: "Today",
@@ -582,9 +623,9 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
     }
     $date.set(date);
   }
-  return /* @__PURE__ */ jsxs5(Box5, { width: "full", position: "relative", children: [
+  return /* @__PURE__ */ jsxs6(Box6, { width: "full", position: "relative", children: [
     /* @__PURE__ */ jsx9(
-      Text2,
+      Text3,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -595,8 +636,8 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
         children: "Set expiry"
       }
     ),
-    /* @__PURE__ */ jsxs5(
-      Box5,
+    /* @__PURE__ */ jsxs6(
+      Box6,
       {
         className,
         width: "full",
@@ -606,7 +647,7 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
         marginTop: "0.5",
         children: [
           /* @__PURE__ */ jsx9(
-            Box5,
+            Box6,
             {
               position: "absolute",
               right: "0",
@@ -651,7 +692,7 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
 var expirationDateSelect_default = ExpirationDateSelect;
 
 // src/react/ui/modals/_internal/components/floorPriceText/index.tsx
-import { Text as Text3 } from "@0xsequence/design-system";
+import { Text as Text4 } from "@0xsequence/design-system";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function FloorPriceText({
   chainId,
@@ -678,7 +719,7 @@ function FloorPriceText({
   });
   const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
   return /* @__PURE__ */ jsx10(
-    Text3,
+    Text4,
     {
       fontSize: "small",
       fontWeight: "medium",
@@ -692,10 +733,10 @@ function FloorPriceText({
 }
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box6, NumericInput as NumericInput2, TokenImage } from "@0xsequence/design-system";
+import { Box as Box7, NumericInput as NumericInput2, TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { observer as observer5 } from "@legendapp/state/react";
 import { useState as useState3 } from "react";
-import { erc20Abi, parseUnits } from "viem";
+import { erc20Abi, parseUnits as parseUnits2 } from "viem";
 import { useAccount as useAccount2, useReadContract } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
@@ -737,7 +778,7 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var PriceInput = observer5(function PriceInput2({
   chainId,
   collectionAddress,
@@ -770,20 +811,20 @@ var PriceInput = observer5(function PriceInput2({
   };
   const changeListingPrice = (value2) => {
     setValue(value2);
-    const parsedAmount = parseUnits(value2, Number(currencyDecimals));
+    const parsedAmount = parseUnits2(value2, Number(currencyDecimals));
     $listingPrice.amountRaw.set(parsedAmount.toString());
     checkBalance && checkInsufficientBalance(parsedAmount.toString());
   };
-  return /* @__PURE__ */ jsxs6(Box6, { className: priceInputWrapper, position: "relative", children: [
+  return /* @__PURE__ */ jsxs7(Box7, { className: priceInputWrapper, position: "relative", children: [
     /* @__PURE__ */ jsx12(
-      Box6,
+      Box7,
       {
         className: priceInputCurrencyImage,
         position: "absolute",
         left: "2",
         display: "flex",
         alignItems: "center",
-        children: /* @__PURE__ */ jsx12(TokenImage, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
+        children: /* @__PURE__ */ jsx12(TokenImage2, { src: $listingPrice.currency.imageUrl.get(), size: "xs" })
       }
     ),
     /* @__PURE__ */ jsx12(
@@ -806,19 +847,19 @@ var PriceInput = observer5(function PriceInput2({
         width: "full"
       }
     ),
-    balanceError && /* @__PURE__ */ jsx12(Box6, { color: "negative", fontSize: "small", children: balanceError })
+    balanceError && /* @__PURE__ */ jsx12(Box7, { color: "negative", fontSize: "small", children: balanceError })
   ] });
 });
 var priceInput_default = PriceInput;
 
 // src/react/ui/modals/_internal/components/tokenPreview/index.tsx
-import { Box as Box7, Image, Skeleton as Skeleton2, Text as Text4 } from "@0xsequence/design-system";
+import { Box as Box8, Image, Skeleton as Skeleton2, Text as Text5 } 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";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function TokenPreview({
   collectionName,
   collectionAddress,
@@ -831,15 +872,15 @@ function TokenPreview({
     collectibleId
   });
   if (collectibleLoading) {
-    return /* @__PURE__ */ jsxs7(Box7, { display: "flex", alignItems: "center", gap: "3", width: "full", children: [
+    return /* @__PURE__ */ jsxs8(Box8, { 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__ */ jsxs8(Box8, { display: "flex", flexGrow: "1", gap: "1", flexDirection: "column", children: [
         /* @__PURE__ */ jsx13(Skeleton2, { width: "1/3", height: "3" }),
         /* @__PURE__ */ jsx13(Skeleton2, { width: "1/2", height: "3" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs7(Box7, { className: tokenPreview, children: [
+  return /* @__PURE__ */ jsxs8(Box8, { className: tokenPreview, children: [
     /* @__PURE__ */ jsx13(
       Image,
       {
@@ -850,9 +891,9 @@ function TokenPreview({
         borderRadius: "xs"
       }
     ),
-    /* @__PURE__ */ jsxs7(Box7, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
+    /* @__PURE__ */ jsxs8(Box8, { display: "flex", flexDirection: "column", marginLeft: "3", children: [
       /* @__PURE__ */ jsx13(
-        Text4,
+        Text5,
         {
           fontSize: "small",
           color: "text80",
@@ -862,7 +903,7 @@ function TokenPreview({
         }
       ),
       /* @__PURE__ */ jsx13(
-        Text4,
+        Text5,
         {
           fontSize: "small",
           fontWeight: "bold",
@@ -876,9 +917,9 @@ function TokenPreview({
 }
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-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";
+import { Box as Box9, Image as Image2, Skeleton as Skeleton3, Text as Text6 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits2 } from "viem";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
   collectibleId,
@@ -897,25 +938,25 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits2(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__ */ jsxs8(
-    Box8,
+  return /* @__PURE__ */ jsxs9(
+    Box9,
     {
       width: "full",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       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(Text6, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs9(Box9, { 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: [
+          priceLoading ? /* @__PURE__ */ jsx14(Skeleton3, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs9(Text6, { fontSize: "small", color: "text100", fontFamily: "body", children: [
             formattedAmount,
             " ",
             price.currency.symbol
@@ -930,32 +971,33 @@ function TransactionDetails({
 import {
   CloseIcon,
   IconButton as IconButton2,
-  Skeleton as Skeleton4,
-  Text as Text9
+  Skeleton as Skeleton5,
+  Text as Text10
 } 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";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { WaitForTransactionReceiptTimeoutError } from "viem";
 
 // 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";
+import { Box as Box10, Spinner as Spinner2, Text as Text7 } from "@0xsequence/design-system";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function TransactionFooter({
   transactionHash,
   isConfirming,
   isConfirmed,
   isFailed,
+  isTimeout,
   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 title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed" || isTimeout && "Transaction took longer than expected";
   const transactionUrl = `${networks[chainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
-  return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs10(Box10, { display: "flex", alignItems: "center", children: [
     icon,
     /* @__PURE__ */ jsx15(
-      Text6,
+      Text7,
       {
         color: "text50",
         fontSize: "normal",
@@ -966,7 +1008,7 @@ function TransactionFooter({
       }
     ),
     /* @__PURE__ */ jsx15(
-      Box9,
+      Box10,
       {
         as: "a",
         flexGrow: "1",
@@ -977,7 +1019,7 @@ function TransactionFooter({
         textAlign: "right",
         textDecoration: "none",
         children: /* @__PURE__ */ jsx15(
-          Text6,
+          Text7,
           {
             color: "polygonLight",
             textAlign: "right",
@@ -993,12 +1035,18 @@ function TransactionFooter({
 }
 
 // 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 {
+  Box as Box12,
+  Image as Image3,
+  NetworkImage,
+  Skeleton as Skeleton4,
+  Text as Text9
+} from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
-import { formatUnits as formatUnits2 } from "viem";
+import { formatUnits as formatUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box10, Text as Text7 } from "@0xsequence/design-system";
+import { Box as Box11, Text as Text8 } 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";
@@ -1011,13 +1059,13 @@ function TimeAgo({ date }) {
     return () => clearInterval(interval);
   }, [date]);
   return /* @__PURE__ */ jsx16(
-    Box10,
+    Box11,
     {
       flexGrow: "1",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx16(Text7, { color: "text50", fontSize: "small", children: timeAgo })
+      children: /* @__PURE__ */ jsx16(Text8, { color: "text50", fontSize: "small", children: timeAgo })
     }
   );
 }
@@ -1031,12 +1079,12 @@ var initialState2 = {
     price,
     collectionAddress,
     chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
+    collectibleId,
     type,
     callbacks,
-    queriesToInvalidate
+    queriesToInvalidate,
+    confirmations,
+    blocked
   }) => {
     transactionStatusModal$.state.set({
       ...transactionStatusModal$.state.get(),
@@ -1044,12 +1092,12 @@ var initialState2 = {
       price,
       collectionAddress,
       chainId,
-      tokenId,
-      getTitle,
-      getMessage: getMessage2,
+      collectibleId,
       type,
       callbacks,
-      queriesToInvalidate
+      queriesToInvalidate,
+      confirmations,
+      blocked
     });
     transactionStatusModal$.isOpen.set(true);
   },
@@ -1065,10 +1113,12 @@ var initialState2 = {
     price: void 0,
     collectionAddress: "",
     chainId: "",
-    tokenId: "",
-    getTitle: void 0,
-    getMessage: void 0,
-    type: void 0
+    collectibleId: "",
+    type: void 0,
+    callbacks: void 0,
+    queriesToInvalidate: [],
+    confirmations: -1,
+    blocked: false
   }
 };
 var transactionStatusModal$ = observable3(initialState2);
@@ -1078,30 +1128,35 @@ import { useMemo } from "react";
 
 // src/react/ui/modals/_internal/components/transactionPreview/consts.ts
 var TRANSACTION_TITLES = {
-  sell: {
+  SELL: {
     confirming: "Selling",
     confirmed: "Sold",
     failed: "Sale failed"
   },
-  createListing: {
+  LISTING: {
     confirming: "Creating listing",
     confirmed: "Listed",
     failed: "Listing failed"
   },
-  createOffer: {
+  OFFER: {
     confirming: "Creating offer",
     confirmed: "Offer created",
     failed: "Offer failed"
   },
-  buy: {
+  BUY: {
     confirming: "Buying",
     confirmed: "Bought",
     failed: "Purchase failed"
   },
-  transfer: {
+  TRANSFER: {
     confirming: "Transferring",
     confirmed: "Transferred",
     failed: "Transfer failed"
+  },
+  CANCEL: {
+    confirming: "Cancelling",
+    confirmed: "Cancelled",
+    failed: "Cancellation failed"
   }
 };
 
@@ -1119,35 +1174,40 @@ function useTransactionPreviewTitle(status, type) {
 }
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var TransactionPreview = observer6(
   ({
     price,
     collectionAddress,
     chainId,
     collectible,
+    collectibleLoading,
     currencyImageUrl,
     isConfirming,
     isConfirmed,
-    isFailed
+    isFailed,
+    isTimeout
   }) => {
     const { type } = transactionStatusModal$.state.get();
     const title = useTransactionPreviewTitle(
-      { isConfirmed, isConfirming, isFailed },
+      { isConfirmed, isConfirming, isFailed, isTimeout },
       type
     );
-    const { data: collection } = useCollection({
+    const { data: collection, isLoading: collectionLoading } = useCollection({
       collectionAddress,
       chainId
     });
-    const collectibleImage2 = collectible.image;
-    const collectibleName = collectible.name;
+    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: [
+    const priceFormatted = price ? formatUnits3(BigInt(price.amountRaw), price.currency.decimals) : void 0;
+    if (collectibleLoading || collectionLoading) {
+      return /* @__PURE__ */ jsx17(Box12, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx17(Skeleton4, { style: { width: "100%", height: "100%" } }) });
+    }
+    return /* @__PURE__ */ jsxs11(Box12, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs11(Box12, { display: "flex", alignItems: "center", children: [
         /* @__PURE__ */ jsx17(
-          Text8,
+          Text9,
           {
             color: "text50",
             fontSize: "small",
@@ -1160,7 +1220,7 @@ var TransactionPreview = observer6(
         /* @__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__ */ jsxs11(Box12, { display: "flex", alignItems: "center", marginTop: "2", children: [
         /* @__PURE__ */ jsx17(
           Image3,
           {
@@ -1169,11 +1229,12 @@ var TransactionPreview = observer6(
             width: "9",
             height: "9",
             borderRadius: "xs",
-            marginRight: "3"
+            marginRight: "3",
+            style: { objectFit: "cover" }
           }
         ),
-        /* @__PURE__ */ jsxs10(
-          Box11,
+        /* @__PURE__ */ jsxs11(
+          Box12,
           {
             display: "flex",
             flexDirection: "column",
@@ -1181,7 +1242,7 @@ var TransactionPreview = observer6(
             gap: "0.5",
             children: [
               /* @__PURE__ */ jsx17(
-                Text8,
+                Text9,
                 {
                   color: "text80",
                   fontSize: "small",
@@ -1190,12 +1251,12 @@ var TransactionPreview = observer6(
                   children: collectibleName
                 }
               ),
-              /* @__PURE__ */ jsx17(Text8, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
+              /* @__PURE__ */ jsx17(Text9, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
             ]
           }
         ),
-        price && /* @__PURE__ */ jsxs10(
-          Box11,
+        price && /* @__PURE__ */ jsxs11(
+          Box12,
           {
             flexGrow: "1",
             display: "flex",
@@ -1204,8 +1265,8 @@ var TransactionPreview = observer6(
             gap: "1",
             children: [
               /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-              /* @__PURE__ */ jsxs10(
-                Text8,
+              /* @__PURE__ */ jsxs11(
+                Text9,
                 {
                   color: "text80",
                   fontSize: "small",
@@ -1233,62 +1294,140 @@ 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";
+import { TRANSACTION_CONFIRMATIONS_DEFAULT } from "@0xsequence/kit";
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts
+function getFormattedType(transactionType, verb = false) {
+  switch (transactionType) {
+    case "TRANSFER" /* TRANSFER */:
+      return verb ? "transferred" : "transfer";
+    case "LISTING" /* LISTING */:
+      return verb ? "listed" : "listing";
+    case "BUY" /* BUY */:
+      return verb ? "purchased" : "purchase";
+    case "SELL" /* SELL */:
+      return verb ? "sold" : "sale";
+    case "CANCEL" /* CANCEL */:
+      return verb ? "cancelled" : "cancellation";
+    case "OFFER" /* OFFER */:
+      return verb ? "offered" : "offer";
+    default:
+      return "transaction";
+  }
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/util/getTitle.ts
+function getTransactionStatusModalTitle({
+  transactionStatus,
+  transactionType
+}) {
+  switch (transactionStatus) {
+    case "PENDING":
+      return `Your ${getFormattedType(transactionType)} is processing`;
+    case "SUCCESS":
+      return `Your ${getFormattedType(transactionType)} has processed`;
+    case "FAILED":
+      return `Your ${getFormattedType(transactionType)} has failed`;
+    case "TIMEOUT":
+      return `Your ${getFormattedType(transactionType)} takes too long`;
+    default:
+      return "Your transaction is processing";
+  }
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts
+function getTransactionStatusModalMessage({
+  transactionStatus,
+  transactionType,
+  collectibleName
+}) {
+  const hideCollectibleName = transactionType === "CANCEL";
+  switch (transactionStatus) {
+    case "PENDING":
+      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It should be confirmed on the blockchain shortly.`;
+    case "SUCCESS":
+      return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It\u2019s been confirmed on the blockchain!`;
+    case "FAILED":
+      return `Your ${getFormattedType(transactionType)} has failed.`;
+    case "TIMEOUT":
+      return `Your ${getFormattedType(transactionType)} takes too long. Click the link below to track it on the explorer.`;
+    default:
+      return "Your transaction is processing";
+  }
+}
+
+// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var useTransactionStatusModal = () => {
   return {
-    show: (args) => transactionStatusModal$.open(args),
+    show: (args) => {
+      if (args.blocked) return;
+      transactionStatusModal$.open(args);
+    },
     close: () => transactionStatusModal$.close()
   };
 };
 var TransactionStatusModal = observer7(() => {
   const {
+    type,
     hash,
     price,
     collectionAddress,
     chainId,
-    tokenId,
-    getTitle,
-    getMessage: getMessage2,
+    collectibleId,
     callbacks,
-    queriesToInvalidate
+    queriesToInvalidate,
+    confirmations
   } = transactionStatusModal$.state.get();
-  const { data: collectible } = useCollectible({
+  const { data: collectible, isLoading: collectibleLoading } = useCollectible({
     collectionAddress,
     chainId,
-    collectibleId: tokenId
+    collectibleId
   });
-  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 [transactionStatus, setTransactionStatus] = useState5("PENDING");
+  const title = getTransactionStatusModalTitle({
+    transactionStatus,
+    transactionType: type
+  });
+  const message = getTransactionStatusModalMessage({
+    transactionStatus,
+    transactionType: type,
+    collectibleName: collectible?.name || ""
+  });
+  const { onError, onSuccess } = callbacks || {};
   const queryClient = getQueryClient();
+  const publicClient = chainId ? getPublicRpcClient(chainId) : null;
+  const waitForTransactionReceiptPromise = publicClient?.waitForTransactionReceipt({
+    confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
+    hash
+  });
   useEffect4(() => {
     if (!transactionStatusModal$.isOpen.get()) return;
-    let isSubscribed = true;
-    if (isConfirmed && isSubscribed && onSuccess) {
-      onSuccess();
-    }
-    if (isFailed && isSubscribed && onUnknownError) {
-      onUnknownError(error);
-    }
-    if (isSubscribed && queriesToInvalidate) {
+    console.log("Waiting for transaction receipt ...");
+    waitForTransactionReceiptPromise?.then((receipt) => {
+      if (receipt.status === "success") {
+        console.log("receipt", receipt);
+        setTransactionStatus("SUCCESS");
+      }
+    }).catch((error) => {
+      if (error instanceof WaitForTransactionReceiptTimeoutError) {
+        setTransactionStatus("TIMEOUT");
+        return;
+      }
+      setTransactionStatus("FAILED");
+    });
+    if (queriesToInvalidate) {
       queryClient.invalidateQueries({ queryKey: [...queriesToInvalidate] });
     }
     return () => {
-      isSubscribed = false;
+      setTransactionStatus("PENDING");
     };
-  }, [isConfirmed, isFailed, onSuccess, onUnknownError, error]);
-  return /* @__PURE__ */ jsx18(Root3, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs11(Portal3, { children: [
+  }, [onSuccess, onError, transactionStatusModal$.isOpen.get()]);
+  return /* @__PURE__ */ jsx18(Root3, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs12(Portal3, { children: [
     /* @__PURE__ */ jsx18(Overlay, { className: dialogOverlay3 }),
-    /* @__PURE__ */ jsxs11(Content3, { className: transactionStatusModalContent, children: [
+    /* @__PURE__ */ jsxs12(Content3, { className: transactionStatusModalContent, children: [
       title ? /* @__PURE__ */ jsx18(
-        Text9,
+        Text10,
         {
           fontSize: "large",
           fontWeight: "bold",
@@ -1296,28 +1435,31 @@ var TransactionStatusModal = observer7(() => {
           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(
+      ) : /* @__PURE__ */ jsx18(Skeleton5, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx18(Text10, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx18(Skeleton5, { width: "20", height: "4" }),
+      /* @__PURE__ */ jsx18(
         transactionPreview_default,
         {
           price,
           collectionAddress,
           chainId,
           collectible,
+          collectibleLoading,
           currencyImageUrl: price?.currency.imageUrl,
-          isConfirming,
-          isConfirmed,
-          isFailed: isFailed || transaction?.status === "reverted"
+          isConfirming: transactionStatus === "PENDING",
+          isConfirmed: transactionStatus === "SUCCESS",
+          isFailed: transactionStatus === "FAILED",
+          isTimeout: transactionStatus === "TIMEOUT"
         }
       ),
       /* @__PURE__ */ jsx18(
         TransactionFooter,
         {
           transactionHash: hash,
-          isConfirming,
-          isConfirmed,
-          isFailed: isFailed || transaction?.status === "reverted",
+          isConfirming: transactionStatus === "PENDING",
+          isConfirmed: transactionStatus === "SUCCESS",
+          isFailed: transactionStatus === "FAILED",
+          isTimeout: transactionStatus === "TIMEOUT",
           chainId
         }
       ),
@@ -1373,28 +1515,8 @@ var initialState3 = {
 };
 var createListingModal$ = observable4(initialState3);
 
-// src/react/ui/modals/CreateListingModal/_utils/getCreateListingTransactionTitleMessage.ts
-var getCreateListingTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Listing has processed";
-  }
-  if (params.isFailed) {
-    return "Listing has failed";
-  }
-  return "Listing is processing";
-};
-var getCreateListingTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just listed ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Your listing of ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just listed ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
 // src/react/ui/modals/CreateListingModal/index.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var useCreateListingModal = (callbacks) => {
   return {
     show: (args) => createListingModal$.open({ ...args, defaultCallbacks: callbacks }),
@@ -1445,10 +1567,8 @@ var Modal2 = observer8(
           collectionAddress,
           chainId,
           price: createListingModal$.listingPrice.get(),
-          tokenId: collectibleId,
-          getTitle: getCreateListingTransactionTitle,
-          getMessage: (params) => getCreateListingTransactionMessage(params, collectible?.name || ""),
-          type: "createListing" /* createListing */,
+          collectibleId,
+          type: "LISTING" /* LISTING */,
           queriesToInvalidate: collectableKeys.all
         });
         createListingModal$.close();
@@ -1492,11 +1612,13 @@ var Modal2 = observer8(
     }
     const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
     const { isLoading, steps, refreshSteps } = getListingSteps({
-      // biome-ignore lint/style/noNonNullAssertion: <explanation>
       contractType: collection.type,
       listing: {
         tokenId: collectibleId,
-        quantity: createListingModal$.quantity.get(),
+        quantity: parseUnits3(
+          createListingModal$.quantity.get(),
+          collectible?.decimals || 0
+        ).toString(),
         expiry: dateToUnixTime(createListingModal$.expiry.get()),
         currencyAddress: listingPrice.currency.contractAddress,
         pricePerToken: listingPrice.amountRaw
@@ -1518,7 +1640,7 @@ var Modal2 = observer8(
         disabled: steps?.approval.isPending || listingPrice.amountRaw === "0" || isLoading || createListingModal$.invalidQuantity.get()
       }
     ];
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       ActionModal,
       {
         store: createListingModal$,
@@ -1535,7 +1657,7 @@ var Modal2 = observer8(
               chainId
             }
           ),
-          /* @__PURE__ */ jsxs12(Box12, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+          /* @__PURE__ */ jsxs13(Box13, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
             /* @__PURE__ */ jsx19(
               priceInput_default,
               {
@@ -1582,18 +1704,19 @@ var Modal2 = observer8(
 
 // src/react/ui/modals/MakeOfferModal/index.tsx
 import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { parseUnits as parseUnits4 } from "viem";
 
 // src/react/hooks/useMakeOffer.tsx
-import { useCallback as useCallback2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useState as useState6 } from "react";
 var useMakeOffer = ({
   onSuccess,
   onError,
   onTransactionSent,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState5(false);
-  const [steps, setSteps] = useState5(null);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [steps, setSteps] = useState6(null);
   const { machine, isLoading: isMachineLoading } = useTransactionMachine(
     {
       ...config,
@@ -1638,7 +1761,7 @@ var initialState4 = {
   collectibleId: "",
   callbacks: void 0,
   offerPrice: {
-    amountRaw: "0",
+    amountRaw: "1",
     currency: {}
   },
   quantity: "1",
@@ -1658,28 +1781,8 @@ var initialState4 = {
 };
 var makeOfferModal$ = observable5(initialState4);
 
-// src/react/ui/modals/MakeOfferModal/_utils/getMakeOfferTransactionTitleMessage.ts
-var getMakeOfferTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Your offer has processed";
-  }
-  if (params.isFailed) {
-    return "Your offer has failed";
-  }
-  return "Your offer is processing";
-};
-var getMakeOfferTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just made offer for ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Your offer for ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just made offer for ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
 // src/react/ui/modals/MakeOfferModal/index.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var useMakeOfferModal = (defaultCallbacks) => ({
   show: (args) => makeOfferModal$.open({ ...args, callbacks: defaultCallbacks }),
   close: makeOfferModal$.close
@@ -1694,7 +1797,7 @@ var ModalContent = observer9(
   }) => {
     const state = makeOfferModal$.get();
     const { collectionAddress, chainId, offerPrice, collectibleId } = state;
-    const [insufficientBalance, setInsufficientBalance] = useState6(false);
+    const [insufficientBalance, setInsufficientBalance] = useState7(false);
     const {
       data: collectible,
       isLoading: collectableIsLoading,
@@ -1726,10 +1829,8 @@ var ModalContent = observer9(
           price: makeOfferModal$.offerPrice.get(),
           collectionAddress,
           chainId,
-          tokenId: collectibleId,
-          getTitle: getMakeOfferTransactionTitle,
-          getMessage: (params) => getMakeOfferTransactionMessage(params, collectible?.name || ""),
-          type: "createOffer" /* createOffer */,
+          collectibleId,
+          type: "OFFER" /* OFFER */,
           queriesToInvalidate: collectableKeys.all
         });
         makeOfferModal$.close();
@@ -1755,7 +1856,10 @@ var ModalContent = observer9(
       contractType: collection.type,
       offer: {
         tokenId: collectibleId,
-        quantity: makeOfferModal$.quantity.get(),
+        quantity: parseUnits4(
+          makeOfferModal$.quantity.get(),
+          collectible?.decimals || 0
+        ).toString(),
         expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
         currencyAddress,
         pricePerToken: offerPrice.amountRaw
@@ -1810,7 +1914,7 @@ var ModalContent = observer9(
         disabled: steps?.approval.isPending || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || makeOfferModal$.invalidQuantity.get()
       }
     ];
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       ActionModal,
       {
         store: makeOfferModal$,
@@ -1866,17 +1970,18 @@ var ModalContent = observer9(
 
 // src/react/ui/modals/SellModal/index.tsx
 import { Show as Show4, observer as observer10 } from "@legendapp/state/react";
+import { parseUnits as parseUnits5 } from "viem";
 
 // src/react/hooks/useSell.tsx
-import { useCallback as useCallback3, useState as useState7 } from "react";
+import { useCallback as useCallback3, useState as useState8 } from "react";
 var useSell = ({
   onSuccess,
   onError,
   onTransactionSent,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState7(false);
-  const [steps, setSteps] = useState7(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [steps, setSteps] = useState8(null);
   const { machine, isLoading: isMachineLoading } = useTransactionMachine(
     {
       ...config,
@@ -1912,17 +2017,17 @@ var useSell = ({
 };
 
 // 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 { Box as Box14, Image as Image4, Skeleton as Skeleton6, Text as Text11 } from "@0xsequence/design-system";
 import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function TransactionHeader({
   title,
   currencyImageUrl,
   date
 }) {
-  return /* @__PURE__ */ jsxs14(Box13, { display: "flex", alignItems: "center", width: "full", children: [
+  return /* @__PURE__ */ jsxs15(Box14, { display: "flex", alignItems: "center", width: "full", children: [
     /* @__PURE__ */ jsx21(
-      Text10,
+      Text11,
       {
         fontSize: "small",
         fontWeight: "medium",
@@ -1933,8 +2038,8 @@ function TransactionHeader({
       }
     ),
     /* @__PURE__ */ jsx21(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
-    date && /* @__PURE__ */ jsxs14(
-      Text10,
+    date && /* @__PURE__ */ jsxs15(
+      Text11,
       {
         fontSize: "small",
         color: "text50",
@@ -1946,7 +2051,7 @@ function TransactionHeader({
           " ago"
         ]
       }
-    ) || /* @__PURE__ */ jsx21(Skeleton5, { width: "8", height: "4" })
+    ) || /* @__PURE__ */ jsx21(Skeleton6, { width: "8", height: "4" })
   ] });
 }
 
@@ -1974,28 +2079,8 @@ var initialState5 = {
 };
 var sellModal$ = observable6(initialState5);
 
-// src/react/ui/modals/SellModal/_utils/getSellTransactionTitleMessage.ts
-var getSellTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Your sale has processed";
-  }
-  if (params.isFailed) {
-    return "Your sale has failed";
-  }
-  return "Your sale is processing";
-};
-var getSellTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just sold ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Your sale of ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just sold ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
 // src/react/ui/modals/SellModal/index.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var useSellModal = (defaultCallbacks) => ({
   show: (args) => sellModal$.open({ ...args, callbacks: defaultCallbacks }),
   close: sellModal$.close
@@ -2028,10 +2113,8 @@ var ModalContent2 = observer10(
           },
           collectionAddress,
           chainId,
-          tokenId,
-          getTitle: getSellTransactionTitle,
-          getMessage: (params) => getSellTransactionMessage(params, collectible?.name || ""),
-          type: "sell" /* sell */,
+          collectibleId: tokenId,
+          type: "SELL" /* SELL */,
           queriesToInvalidate: [
             ...collectableKeys.all,
             balanceQueries.all
@@ -2089,7 +2172,7 @@ var ModalContent2 = observer10(
     const currency = currencies?.find(
       (c) => c.contractAddress === order?.priceCurrencyAddress
     );
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       ActionModal,
       {
         store: sellModal$,
@@ -2100,7 +2183,11 @@ var ModalContent2 = observer10(
             label: "Accept",
             onClick: () => sell({
               orderId: order?.orderId,
-              marketplace: order?.marketplace
+              marketplace: order?.marketplace,
+              quantity: order?.quantityRemaining ? parseUnits5(
+                order.quantityRemaining,
+                collectible?.decimals || 0
+              ).toString() : "1"
             })
           }
         ],
@@ -2143,13 +2230,13 @@ var ModalContent2 = observer10(
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
 import {
-  Box as Box14,
+  Box as Box15,
   Button as Button3,
   CloseIcon as CloseIcon2,
   ExternalLinkIcon,
   IconButton as IconButton3,
   Image as Image5,
-  Text as Text11
+  Text as Text12
 } from "@0xsequence/design-system";
 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";
@@ -2197,7 +2284,7 @@ var initialState6 = {
 var successfulPurchaseModal$ = observable7(initialState6);
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var useSuccessfulPurchaseModal = (callbacks) => {
   return {
     show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
@@ -2205,12 +2292,12 @@ var useSuccessfulPurchaseModal = (callbacks) => {
   };
 };
 var SuccessfulPurchaseModal = observer11(() => {
-  return /* @__PURE__ */ jsx23(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs16(Portal4, { children: [
+  return /* @__PURE__ */ jsx23(Root4, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs17(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__ */ jsxs17(Content4, { className: dialogContent.narrow, children: [
+      /* @__PURE__ */ jsxs17(Box15, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
         /* @__PURE__ */ jsx23(
-          Text11,
+          Text12,
           {
             textAlign: "center",
             fontSize: "medium",
@@ -2225,11 +2312,11 @@ var SuccessfulPurchaseModal = observer11(() => {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs16(Box14, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__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__ */ jsxs17(Box15, { display: "flex", alignItems: "center", gap: "1", children: [
+          /* @__PURE__ */ jsx23(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx23(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx23(Text12, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx23(Text12, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
         /* @__PURE__ */ jsx23(SuccessfulPurchaseActions, {})
       ] }),
@@ -2248,7 +2335,7 @@ var SuccessfulPurchaseModal = observer11(() => {
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs16(Box14, { display: "flex", flexDirection: "column", gap: "2", children: [
+  return /* @__PURE__ */ jsxs17(Box15, { display: "flex", flexDirection: "column", gap: "2", children: [
     successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx23(
       Button3,
       {
@@ -2277,10 +2364,10 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx23(Box14, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx23(Box15, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
-    return /* @__PURE__ */ jsxs16(
-      Box14,
+    return /* @__PURE__ */ jsxs17(
+      Box15,
       {
         className: collectiblesGridItem,
         position: "relative",
@@ -2297,7 +2384,7 @@ function CollectiblesGrid({ collectibles }) {
             }
           ),
           showPlus && /* @__PURE__ */ jsx23(
-            Box14,
+            Box15,
             {
               position: "absolute",
               top: "0",
@@ -2309,8 +2396,8 @@ function CollectiblesGrid({ collectibles }) {
               justifyContent: "center",
               background: "backgroundOverlay",
               backdropFilter: "blur",
-              children: /* @__PURE__ */ jsxs16(
-                Text11,
+              children: /* @__PURE__ */ jsxs17(
+                Text12,
                 {
                   fontSize: "small",
                   fontWeight: "medium",
@@ -2346,12 +2433,18 @@ import { useAccount as useAccount5 } from "wagmi";
 import { observable as observable8 } from "@legendapp/state";
 var initialState7 = {
   isOpen: false,
-  open: ({ chainId, collectionAddress, tokenId }) => {
+  open: ({
+    chainId,
+    collectionAddress,
+    collectibleId,
+    callbacks
+  }) => {
     transferModal$.state.set({
       ...transferModal$.state.get(),
       chainId,
       collectionAddress,
-      tokenId
+      collectibleId,
+      callbacks
     });
     transferModal$.isOpen.set(true);
   },
@@ -2367,7 +2460,7 @@ var initialState7 = {
     receiverAddress: "",
     collectionAddress: "0x",
     chainId: "",
-    tokenId: "",
+    collectibleId: "",
     quantity: "1"
   },
   view: "enterReceiverAddress",
@@ -2376,7 +2469,7 @@ var initialState7 = {
 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 { Box as Box16, Button as Button4, Text as Text13, TextInput } from "@0xsequence/design-system";
 import { observable as observable9 } from "@legendapp/state";
 import { isAddress } from "viem";
 import { useAccount as useAccount4 } from "wagmi";
@@ -2390,45 +2483,19 @@ function getMessage(key) {
   return baseMessages[key];
 }
 
-// src/react/ui/modals/TransferModal/_utils/getTransferTransactionTitleMessage.ts
-var getTransferTransactionTitle = (params) => {
-  if (params.isConfirmed) {
-    return "Transfer has processed";
-  }
-  if (params.isFailed) {
-    return "Transfer has failed";
-  }
-  return "Transfer is processing";
-};
-var getTransferTransactionMessage = (params, collectibleName) => {
-  if (params.isConfirmed) {
-    return `You just tranferred ${collectibleName}. It\u2019s been confirmed on the blockchain!`;
-  }
-  if (params.isFailed) {
-    return `Transferring ${collectibleName} has failed. Please try again.`;
-  }
-  return `You just transferred ${collectibleName}. It should be confirmed on the blockchain shortly.`;
-};
-
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx
 var useHandleTransfer = () => {
   const {
     receiverAddress,
     collectionAddress,
-    tokenId,
+    collectibleId,
     quantity,
     chainId,
     collectionType,
-    successCallbacks,
-    errorCallbacks
+    callbacks
   } = transferModal$.state.get();
   const { transferTokensAsync } = useTransferTokens();
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  const { data: collectible } = useCollectible({
-    collectionAddress,
-    collectibleId: tokenId,
-    chainId
-  });
   async function transfer() {
     if (collectionType !== "ERC721" /* ERC721 */ && collectionType !== "ERC1155" /* ERC1155 */) {
       throw new InvalidContractTypeError(collectionType);
@@ -2438,7 +2505,7 @@ var useHandleTransfer = () => {
         const hash = await transferTokensAsync({
           receiverAddress,
           collectionAddress,
-          tokenId,
+          tokenId: collectibleId,
           chainId,
           contractType: "ERC721" /* ERC721 */
         });
@@ -2447,20 +2514,14 @@ var useHandleTransfer = () => {
           hash,
           collectionAddress,
           chainId,
-          tokenId,
+          collectibleId,
           price: void 0,
-          getTitle: getTransferTransactionTitle,
-          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
-          type: "transfer",
-          callbacks: {
-            onSuccess: successCallbacks?.onTransferSuccess,
-            onUnknownError: errorCallbacks?.onTransferError
-          },
+          type: "TRANSFER" /* TRANSFER */,
           queriesToInvalidate: balanceQueries.all
         });
       } catch (error) {
         transferModal$.view.set("enterReceiverAddress");
-        errorCallbacks?.onTransferError?.(error);
+        callbacks?.onError?.(error);
       }
     }
     if (collectionType === "ERC1155" /* ERC1155 */) {
@@ -2468,7 +2529,7 @@ var useHandleTransfer = () => {
         const hash = await transferTokensAsync({
           receiverAddress,
           collectionAddress,
-          tokenId,
+          tokenId: collectibleId,
           chainId,
           contractType: "ERC1155" /* ERC1155 */,
           quantity: String(quantity)
@@ -2478,19 +2539,14 @@ var useHandleTransfer = () => {
           hash,
           collectionAddress,
           chainId,
-          tokenId,
+          collectibleId,
           price: void 0,
-          getTitle: getTransferTransactionTitle,
-          getMessage: (params) => getTransferTransactionMessage(params, collectible.name),
-          type: "transfer",
-          callbacks: {
-            onSuccess: successCallbacks?.onTransferSuccess,
-            onUnknownError: errorCallbacks?.onTransferError
-          }
+          type: "TRANSFER" /* TRANSFER */,
+          queriesToInvalidate: balanceQueries.all
         });
       } catch (error) {
         transferModal$.view.set("enterReceiverAddress");
-        errorCallbacks?.onTransferError?.(error);
+        callbacks?.onError?.(error);
       }
     }
   }
@@ -2499,10 +2555,10 @@ var useHandleTransfer = () => {
 var useHandleTransfer_default = useHandleTransfer;
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var EnterWalletAddressView = () => {
   const { address } = useAccount4();
-  const { collectionAddress, tokenId, chainId, collectionType } = transferModal$.state.get();
+  const { collectionAddress, collectibleId, chainId, collectionType } = transferModal$.state.get();
   const $quantity = transferModal$.state.quantity;
   const $invalidQuantity = observable9(false);
   const isWalletAddressValid = isAddress(
@@ -2511,7 +2567,7 @@ var EnterWalletAddressView = () => {
   const { data: tokenBalance } = useListBalances({
     chainId,
     contractAddress: collectionAddress,
-    tokenId,
+    tokenId: collectibleId,
     accountAddress: address,
     query: { enabled: !!address }
   });
@@ -2532,9 +2588,9 @@ var EnterWalletAddressView = () => {
     transfer();
     transferModal$.view.set("followWalletInstructions");
   }
-  return /* @__PURE__ */ jsxs17(Box15, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__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: [
+  return /* @__PURE__ */ jsxs18(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx24(Text13, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsxs18(Box16, { display: "flex", flexDirection: "column", gap: "3", children: [
       /* @__PURE__ */ jsx24(
         AlertMessage,
         {
@@ -2553,7 +2609,7 @@ var EnterWalletAddressView = () => {
           placeholder: "Enter wallet address of recipient"
         }
       ),
-      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs17(Fragment, { children: [
+      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs18(Fragment, { children: [
         /* @__PURE__ */ jsx24(
           QuantityInput,
           {
@@ -2564,7 +2620,7 @@ var EnterWalletAddressView = () => {
           }
         ),
         /* @__PURE__ */ jsx24(
-          Text12,
+          Text13,
           {
             color: insufficientBalance ? "negative" : "text50",
             fontSize: "small",
@@ -2594,13 +2650,13 @@ var EnterWalletAddressView = () => {
 var enterWalletAddress_default = EnterWalletAddressView;
 
 // src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box16, Button as Button5, Text as Text13 } from "@0xsequence/design-system";
+import { Box as Box17, Button as Button5, Text as Text14 } from "@0xsequence/design-system";
 import { observer as observer12 } from "@legendapp/state/react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var FollowWalletInstructionsView = observer12(() => {
-  return /* @__PURE__ */ jsxs18(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs19(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx25(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx25(Box17, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx25(
       AlertMessage,
       {
         message: getMessage("followWalletInstructions"),
@@ -2625,7 +2681,7 @@ var FollowWalletInstructionsView = observer12(() => {
 var followWalletInstructions_default = FollowWalletInstructionsView;
 
 // src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var useTransferModal = () => {
   const { chainId: accountChainId } = useAccount5();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
@@ -2649,13 +2705,13 @@ var useTransferModal = () => {
     onError: (callbacks) => {
       transferModal$.state.set({
         ...transferModal$.state.get(),
-        errorCallbacks: callbacks
+        callbacks
       });
     },
     onSuccess: (callbacks) => {
       transferModal$.state.set({
         ...transferModal$.state.get(),
-        successCallbacks: callbacks
+        callbacks
       });
     }
   };
@@ -2667,9 +2723,9 @@ var Modal3 = () => {
   return /* @__PURE__ */ jsx26(ModalContent3, {});
 };
 var ModalContent3 = observer13(() => {
-  return /* @__PURE__ */ jsx26(Root5, { open: true, children: /* @__PURE__ */ jsxs19(Portal5, { children: [
+  return /* @__PURE__ */ jsx26(Root5, { open: true, children: /* @__PURE__ */ jsxs20(Portal5, { children: [
     /* @__PURE__ */ jsx26(Overlay3, { className: dialogOverlay2 }),
-    /* @__PURE__ */ jsxs19(Content5, { className: transferModalContent, children: [
+    /* @__PURE__ */ jsxs20(Content5, { className: transferModalContent, children: [
       /* @__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 }) })
     ] })
@@ -2688,9 +2744,9 @@ var TransactionModalView = observer13(() => {
 });
 
 // src/react/ui/modals/modal-provider.tsx
-import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var ModalProvider = observer14(() => {
-  return /* @__PURE__ */ jsxs20(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
     /* @__PURE__ */ jsx27(AccountModal, {}),
     /* @__PURE__ */ jsx27(CreateListingModal, {}),
     /* @__PURE__ */ jsx27(MakeOfferModal, {}),
@@ -2704,12 +2760,12 @@ 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 { useState as useState9 } from "react";
+import { Box as Box21, IconButton as IconButton6, Skeleton as Skeleton7 } from "@0xsequence/design-system";
 import { useAccount as useAccount7 } from "wagmi";
 
 // src/react/ui/icons/DiamondEye.tsx
-import { Box as Box17 } from "@0xsequence/design-system";
+import { Box as Box18 } from "@0xsequence/design-system";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var Svg = () => /* @__PURE__ */ jsx28(
   "svg",
@@ -2731,7 +2787,7 @@ var Svg = () => /* @__PURE__ */ jsx28(
   }
 );
 var SvgDiamondEyeIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx28(
-  Box17,
+  Box18,
   {
     as: Svg,
     className: iconVariants({
@@ -2826,7 +2882,7 @@ var ActionButton = observer15(
           onClick: () => showTransferModal({
             collectionAddress,
             chainId,
-            tokenId
+            collectibleId: tokenId
           })
         }
       );
@@ -2853,12 +2909,12 @@ 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 { Box as Box20, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits4 } from "viem";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
-import { Box as Box18 } from "@0xsequence/design-system";
+import { Box as Box19 } from "@0xsequence/design-system";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Svg2 = () => /* @__PURE__ */ jsx30(
   "svg",
@@ -2880,7 +2936,7 @@ var Svg2 = () => /* @__PURE__ */ jsx30(
   }
 );
 var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
-  Box18,
+  Box19,
   {
     as: Svg2,
     className: iconVariants({
@@ -2892,7 +2948,7 @@ var SvgBellIcon = ({ size = "sm", ...props }) => /* @__PURE__ */ jsx30(
 var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var Footer = ({
   name,
   type,
@@ -2910,8 +2966,8 @@ var Footer = ({
   if (name.length > 17 && !highestOffer) {
     name = name.substring(0, 17) + "...";
   }
-  return /* @__PURE__ */ jsxs21(
-    Box19,
+  return /* @__PURE__ */ jsxs22(
+    Box20,
     {
       display: "flex",
       flexDirection: "column",
@@ -2922,8 +2978,8 @@ var Footer = ({
       position: "relative",
       className: !!address && isAnimated ? footer.animated : footer.static,
       children: [
-        /* @__PURE__ */ jsxs21(
-          Box19,
+        /* @__PURE__ */ jsxs22(
+          Box20,
           {
             display: "flex",
             alignItems: "center",
@@ -2932,7 +2988,7 @@ var Footer = ({
             width: "full",
             children: [
               /* @__PURE__ */ jsx31(
-                Text14,
+                Text15,
                 {
                   color: "text100",
                   fontSize: "normal",
@@ -2961,10 +3017,10 @@ var Footer = ({
             ]
           }
         ),
-        lowestListingPriceAmount && lowestListingCurrency && /* @__PURE__ */ jsxs21(Box19, { display: "flex", alignItems: "center", gap: "1", children: [
+        lowestListingPriceAmount && lowestListingCurrency && /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
           /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
-          /* @__PURE__ */ jsxs21(
-            Text14,
+          /* @__PURE__ */ jsxs22(
+            Text15,
             {
               color: "text100",
               fontSize: "small",
@@ -2972,7 +3028,7 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                formatUnits3(
+                formatUnits4(
                   BigInt(lowestListingPriceAmount),
                   lowestListingCurrency.decimals
                 ),
@@ -2992,7 +3048,7 @@ var TokenTypeBalancePill = ({
 }) => {
   const displayText = type === "ERC1155" /* ERC1155 */ ? !!balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
   return /* @__PURE__ */ jsx31(
-    Text14,
+    Text15,
     {
       background: "backgroundSecondary",
       color: "text80",
@@ -3008,10 +3064,10 @@ var TokenTypeBalancePill = ({
 };
 
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function CollectibleSkeleton() {
-  return /* @__PURE__ */ jsxs22(
-    Box20,
+  return /* @__PURE__ */ jsxs23(
+    Box21,
     {
       className: collectibleCard,
       borderRadius: "md",
@@ -3019,14 +3075,14 @@ function CollectibleSkeleton() {
       background: "backgroundPrimary",
       children: [
         /* @__PURE__ */ jsx32(
-          Skeleton6,
+          Skeleton7,
           {
             size: "lg",
             style: { width: "100%", height: 164, borderRadius: 0, paddingTop: 16 }
           }
         ),
-        /* @__PURE__ */ jsxs22(
-          Box20,
+        /* @__PURE__ */ jsxs23(
+          Box21,
           {
             display: "flex",
             flexDirection: "column",
@@ -3035,8 +3091,8 @@ function CollectibleSkeleton() {
             paddingBottom: "4",
             marginTop: "2",
             children: [
-              /* @__PURE__ */ jsx32(Skeleton6, { size: "lg" }),
-              /* @__PURE__ */ jsx32(Skeleton6, { size: "sm" })
+              /* @__PURE__ */ jsx32(Skeleton7, { size: "lg" }),
+              /* @__PURE__ */ jsx32(Skeleton7, { size: "sm" })
             ]
           }
         )
@@ -3057,7 +3113,7 @@ function CollectibleCard({
 }) {
   const { address: accountAddress } = useAccount7();
   const collectibleMetadata = lowestListing?.metadata;
-  const [imageLoadingError, setImageLoadingError] = useState8(false);
+  const [imageLoadingError, setImageLoadingError] = useState9(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
     chainId: String(chainId),
     collectionAddress,
@@ -3075,14 +3131,14 @@ function CollectibleCard({
   const image = collectibleMetadata?.image;
   const externalUrl = collectibleMetadata?.external_url;
   return /* @__PURE__ */ jsx32(
-    Box20,
+    Box21,
     {
       className: collectibleCard,
       borderRadius: "md",
       overflow: "hidden",
       background: "backgroundPrimary",
       children: /* @__PURE__ */ jsx32(
-        Box20,
+        Box21,
         {
           display: "flex",
           flexDirection: "column",
@@ -3097,7 +3153,7 @@ function CollectibleCard({
           cursor: "pointer",
           padding: "0",
           className: collectibleTileWrapper,
-          children: /* @__PURE__ */ jsxs22("article", { style: { width: "100%" }, children: [
+          children: /* @__PURE__ */ jsxs23("article", { style: { width: "100%" }, children: [
             externalUrl && /* @__PURE__ */ jsx32(
               IconButton6,
               {
@@ -3138,7 +3194,7 @@ function CollectibleCard({
               }
             ),
             accountAddress && (highestOffer || lowestListing) && /* @__PURE__ */ jsx32(
-              Box20,
+              Box21,
               {
                 display: "flex",
                 alignItems: "center",
@@ -3176,4 +3232,4 @@ export {
   ModalProvider,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-URTXTVOU.js.map
+//# sourceMappingURL=chunk-F42XMKDS.js.map