@0xsequence/marketplace-sdk 0.4.1 → 0.4.2

package/dist/{chunk-IOTKCWOB.js → chunk-MTFS5SED.js}

@@ -3,7 +3,7 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-UPLTM63S.js";
+} from "./chunk-MQ5WSFDH.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
@@ -33,9 +33,10 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-RZSZNVEH.js";
+} from "./chunk-2OJB35FS.js";
 import {
   AlertMessage,
+  dateToUnixTime,
   switchChainModal_default,
   useBalanceOfCollectible,
   useBuyCollectable,
@@ -51,7 +52,7 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-MIYMMP2K.js";
+} from "./chunk-WBJKZOQ7.js";
 import {
   iconVariants
 } from "./chunk-LF44FCG5.js";
@@ -59,16 +60,16 @@ import {
   calculatePriceDifferencePercentage,
   getPublicRpcClient,
   truncateMiddle
-} from "./chunk-KNX2LER4.js";
+} from "./chunk-ZWIRTV7A.js";
 import {
   balanceQueries,
   collectableKeys,
   getQueryClient
-} from "./chunk-5GDO4ZBC.js";
+} from "./chunk-S5IPE7TH.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
-} from "./chunk-EVRILXOH.js";
+} from "./chunk-OPMDGQFB.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer14 } from "@legendapp/state/react";
@@ -92,9 +93,9 @@ 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 { Box as Box4, Text as Text2, TokenImage } from "@0xsequence/design-system";
 import { Show, observer as observer2, useSelector } from "@legendapp/state/react";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { formatUnits, parseUnits } from "viem";
 
 // src/react/ui/modals/_internal/components/quantityInput/index.tsx
@@ -240,15 +241,35 @@ var initialState = {
 };
 var buyModal$ = observable2(initialState);
 
+// src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx
+import { Box as Box3, Spinner } from "@0xsequence/design-system";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LoadingModal = ({
+  isOpen,
+  chainId,
+  onClose,
+  title
+}) => /* @__PURE__ */ jsx3(
+  ActionModal,
+  {
+    isOpen,
+    chainId,
+    onClose,
+    title,
+    ctas: [],
+    children: /* @__PURE__ */ jsx3(Box3, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx3(Spinner, { size: "lg" }) })
+  }
+);
+
 // src/react/ui/modals/BuyModal/index.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } 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 BuyModal = () => /* @__PURE__ */ jsx4(Show, { if: buyModal$.isOpen, children: /* @__PURE__ */ jsx4(BuyModalContent, {}) });
 var BuyModalContent = () => {
   const chainId = String(useSelector(buyModal$.state.order.chainId));
   const collectionAddress = useSelector(
@@ -257,17 +278,21 @@ var BuyModalContent = () => {
   const collectibleId = useSelector(buyModal$.state.order.tokenId);
   const modalId = useSelector(buyModal$.state.modalId);
   const callbacks = useSelector(buyModal$.callbacks);
+  const [paymentLoadingModalOpen, setPaymentLoadingModalOpen] = useState(false);
   const { data: collection } = useCollection({
     chainId,
     collectionAddress
   });
+  const onPaymentModalLoaded = useCallback(() => {
+    buyModal$.close();
+    setPaymentLoadingModalOpen(false);
+  }, [setPaymentLoadingModalOpen]);
   const { buy, isLoading } = useBuyCollectable({
     chainId,
     collectionAddress,
     enabled: buyModal$.isOpen.get(),
-    onSwitchChainRefused: () => {
-      buyModal$.close();
-    },
+    setPaymentLoadingModalOpen,
+    onPaymentModalLoaded,
     onError: (error) => {
       if (callbacks?.onError) {
         callbacks.onError(error);
@@ -290,7 +315,18 @@ var BuyModalContent = () => {
     collectibleId
   });
   if (modalId === 0 || !collection || !collectable || !buy) return null;
-  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx3(
+  if (paymentLoadingModalOpen) {
+    return /* @__PURE__ */ jsx4(
+      LoadingModal,
+      {
+        isOpen: buyModal$.isOpen.get(),
+        chainId: Number(chainId),
+        onClose: buyModal$.close,
+        title: "Loading Sequence Pay"
+      }
+    );
+  }
+  return collection.type === "ERC721" /* ERC721 */ ? /* @__PURE__ */ jsx4(
     CheckoutModal,
     {
       buy,
@@ -299,7 +335,7 @@ var BuyModalContent = () => {
       isLoading
     },
     modalId
-  ) : /* @__PURE__ */ jsx3(
+  ) : /* @__PURE__ */ jsx4(
     ERC1155QuantityModal,
     {
       buy,
@@ -350,7 +386,7 @@ var ERC1155QuantityModal = observer2(
     const quantity = Number(buyModal$.state.quantity.get());
     const pricePerToken = order.priceAmount;
     const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       ActionModal,
       {
         isOpen: buyModal$.isOpen.get(),
@@ -370,12 +406,11 @@ var ERC1155QuantityModal = observer2(
                 collectableDecimals: collectable.decimals || 0,
                 marketplace: order.marketplace
               });
-              buyModal$.close();
             }
           }
         ],
-        children: /* @__PURE__ */ jsxs3(Box3, { display: "flex", flexDirection: "column", gap: "4", children: [
-          /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsxs3(Box4, { display: "flex", flexDirection: "column", gap: "4", children: [
+          /* @__PURE__ */ jsx4(
             QuantityInput,
             {
               $quantity: buyModal$.state.quantity,
@@ -384,11 +419,11 @@ var ERC1155QuantityModal = observer2(
               maxQuantity: order.quantityRemaining
             }
           ),
-          /* @__PURE__ */ jsxs3(Box3, { display: "flex", justifyContent: "space-between", 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: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits(BigInt(totalPrice), currency?.decimals || 0) })
+          /* @__PURE__ */ jsxs3(Box4, { display: "flex", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx4(Text2, { color: "text50", fontSize: "small", children: "Total Price" }),
+            /* @__PURE__ */ jsxs3(Box4, { display: "flex", alignItems: "center", gap: "2", children: [
+              /* @__PURE__ */ jsx4(TokenImage, { src: currency?.imageUrl, size: "xs" }),
+              /* @__PURE__ */ jsx4(Text2, { color: "text100", fontSize: "small", fontWeight: "bold", children: formatUnits(BigInt(totalPrice), currency?.decimals || 0) })
             ] })
           ] })
         ] })
@@ -397,30 +432,27 @@ var ERC1155QuantityModal = observer2(
   }
 );
 
-// src/react/ui/modals/CreateListingModal/index.tsx
-import { Box as Box14 } from "@0xsequence/design-system";
+// src/react/ui/modals/MakeOfferModal/Modal.tsx
 import { Show as Show2, observer as observer8 } from "@legendapp/state/react";
-import { useEffect as useEffect6, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 import { parseUnits as parseUnits3 } from "viem";
-import { useAccount as useAccount3 } from "wagmi";
 
-// src/react/hooks/useCreateListing.tsx
-import { useCallback, useState } from "react";
-var useCreateListing = ({
+// src/react/hooks/useMakeOffer.tsx
+import { useCallback as useCallback2, useState as useState2 } from "react";
+var useMakeOffer = ({
   onSuccess,
   onError,
   onTransactionSent,
   onApprovalSuccess,
-  onSwitchChainRefused,
   enabled,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [steps, setSteps] = useState(null);
-  const [executionState, setExecutionState] = useState(null);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [steps, setSteps] = useState2(null);
+  const [executionState, setExecutionState] = useState2(null);
   const machineConfig = {
     ...config,
-    type: "LISTING" /* LISTING */
+    type: "OFFER" /* OFFER */
   };
   const { machine, isLoading: isMachineLoading } = useTransactionMachine({
     config: machineConfig,
@@ -437,10 +469,9 @@ var useCreateListing = ({
     onApprovalSuccess: (hash) => {
       setExecutionState(null);
       onApprovalSuccess?.(hash);
-    },
-    onSwitchChainRefused
+    }
   });
-  const loadSteps = useCallback(
+  const loadSteps = useCallback2(
     async (props) => {
       if (!machine) return;
       setIsLoading(true);
@@ -457,14 +488,14 @@ var useCreateListing = ({
         },
         transaction: {
           ...generatedSteps.transaction,
-          isExecuting: executionState === "listing"
+          isExecuting: executionState === "offer"
         }
       });
       setIsLoading(false);
     },
     [machine, executionState]
   );
-  const handleStepExecution = useCallback(
+  const handleStepExecution = useCallback2(
     async (type, execute) => {
       if (!type) return;
       setExecutionState(type);
@@ -478,8 +509,8 @@ var useCreateListing = ({
     []
   );
   return {
-    createListing: (props) => machine?.start(props),
-    getListingSteps: (props) => ({
+    makeOffer: (props) => machine?.start(props),
+    getMakeOfferSteps: (props) => ({
       isLoading,
       steps: steps ? {
         ...steps,
@@ -490,11 +521,8 @@ var useCreateListing = ({
         },
         transaction: {
           ...steps.transaction,
-          isExecuting: executionState === "listing",
-          execute: () => handleStepExecution(
-            "listing",
-            () => steps.transaction.execute()
-          )
+          isExecuting: executionState === "offer",
+          execute: () => handleStepExecution("offer", () => steps.transaction.execute())
         }
       } : null,
       refreshSteps: () => loadSteps(props)
@@ -504,29 +532,9 @@ var useCreateListing = ({
 };
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
-import { Box as Box4 } from "@0xsequence/design-system";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ErrorModal = ({
-  isOpen,
-  chainId,
-  onClose,
-  title
-}) => /* @__PURE__ */ jsx4(
-  ActionModal,
-  {
-    isOpen,
-    chainId,
-    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 Box5, Spinner } from "@0xsequence/design-system";
+import { Box as Box5 } from "@0xsequence/design-system";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var LoadingModal = ({
+var ErrorModal = ({
   isOpen,
   chainId,
   onClose,
@@ -539,7 +547,7 @@ var LoadingModal = ({
     onClose,
     title,
     ctas: [],
-    children: /* @__PURE__ */ jsx5(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: /* @__PURE__ */ jsx5(Spinner, { size: "lg" }) })
+    children: /* @__PURE__ */ jsx5(Box5, { display: "flex", justifyContent: "center", alignItems: "center", padding: "4", children: "Error loading item details" })
   }
 );
 
@@ -635,7 +643,7 @@ function CalendarPopover({
 }
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var PRESET_RANGES = {
   TODAY: {
@@ -669,7 +677,7 @@ var ExpirationDateSelect = observer3(function ExpirationDateSelect2({
   $date
 }) {
   const defaultRange = "1_week";
-  const [selectedRange, setSelectedRange] = useState2(defaultRange);
+  const [selectedRange, setSelectedRange] = useState3(defaultRange);
   function handleSelectPresetRange(range) {
     const presetRange = Object.values(PRESET_RANGES).find(
       (preset) => preset.value === range
@@ -792,18 +800,18 @@ function FloorPriceText({
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
 import { Box as Box8, NumericInput as NumericInput2, Text as Text5 } from "@0xsequence/design-system";
 import { observer as observer5 } from "@legendapp/state/react";
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import { parseUnits as parseUnits2 } from "viem";
 import { useAccount as useAccount2 } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyImage/index.tsx
 import { Box as Box7, TokenImage as TokenImage2 } from "@0xsequence/design-system";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function CurrencyImage({
   $listingPrice
 }) {
-  const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] = useState3(null);
+  const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] = useState4(null);
   if (imageLoadErrorCurrencyAddresses?.includes(
     $listingPrice.currency.contractAddress.get()
   )) {
@@ -903,7 +911,7 @@ var PriceInput = observer5(function PriceInput2({
   onPriceChange,
   checkBalance
 }) {
-  const [balanceError, setBalanceError] = useState4("");
+  const [balanceError, setBalanceError] = useState5("");
   const { address: accountAddress } = useAccount2();
   const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
     currencyAddress: $listingPrice.currency.contractAddress.get(),
@@ -911,7 +919,7 @@ var PriceInput = observer5(function PriceInput2({
     userAddress: accountAddress
   });
   const currencyDecimals = $listingPrice.currency.decimals.get();
-  const [value, setValue] = useState4("");
+  const [value, setValue] = useState5("");
   const changeListingPrice = (value2) => {
     setValue(value2);
     try {
@@ -1052,75 +1060,23 @@ function TokenPreview({
   ] });
 }
 
-// src/react/ui/modals/_internal/components/transactionDetails/index.tsx
-import { Box as Box10, Image as Image2, Skeleton as Skeleton4, Text as Text7 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
-function TransactionDetails({
-  collectibleId,
-  collectionAddress,
-  chainId,
-  price,
-  showPlaceholderPrice,
-  currencyImageUrl
-}) {
-  const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
-  const marketplaceFeePercentage = data?.collections.find(
-    (collection) => collection.collectionAddress === collectionAddress
-  )?.marketplaceFeePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-  const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } = useRoyaltyPercentage({
-    chainId,
-    collectionAddress,
-    collectibleId
-  });
-  const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
-  if (royaltyPercentage !== void 0 && formattedAmount && price) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toFixed(price.currency.decimals);
-  }
-  if (marketplaceFeePercentage !== void 0 && formattedAmount && price) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
-  }
-  return /* @__PURE__ */ jsxs8(
-    Box10,
-    {
-      width: "full",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: [
-        /* @__PURE__ */ jsx14(Text7, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
-        /* @__PURE__ */ jsxs8(Box10, { display: "flex", alignItems: "center", gap: "2", children: [
-          /* @__PURE__ */ jsx14(Image2, { src: currencyImageUrl, width: "3", height: "3" }),
-          priceLoading ? /* @__PURE__ */ jsx14(Skeleton4, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs8(Text7, { fontSize: "small", color: "text100", fontFamily: "body", children: [
-            showPlaceholderPrice ? "0" : formattedAmount,
-            " ",
-            price.currency.symbol
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import {
   CloseIcon,
   IconButton as IconButton2,
-  Skeleton as Skeleton6,
-  Text as Text11
+  Skeleton as Skeleton5,
+  Text as Text10
 } from "@0xsequence/design-system";
 import { TRANSACTION_CONFIRMATIONS_DEFAULT } from "@0xsequence/kit";
 import { observer as observer7 } from "@legendapp/state/react";
 import { Close, Content as Content2, Overlay, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 import { WaitForTransactionReceiptTimeoutError } from "viem";
 
 // src/react/ui/modals/_internal/components/transaction-footer/index.tsx
 import { networks } from "@0xsequence/network";
-import { Box as Box11, Text as Text8, Spinner as Spinner2 } from "@0xsequence/design-system";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box10, Text as Text7, Spinner as Spinner2 } from "@0xsequence/design-system";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function TransactionFooter({
   transactionHash,
   orderId,
@@ -1130,13 +1086,13 @@ function TransactionFooter({
   isTimeout,
   chainId
 }) {
-  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx15(PositiveCircleIcon_default, { size: "md" }) || isConfirming && /* @__PURE__ */ jsx15(Spinner2, { size: "md" });
+  const icon = (isConfirmed || orderId) && /* @__PURE__ */ jsx14(PositiveCircleIcon_default, { size: "md" }) || isConfirming && /* @__PURE__ */ jsx14(Spinner2, { size: "md" });
   const title = (isConfirmed || orderId) && "Transaction complete" || isConfirming && "Processing transaction" || isFailed && "Transaction failed" || isTimeout && "Transaction took longer than expected";
   const transactionUrl = `${networks[chainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
-  return /* @__PURE__ */ jsxs9(Box11, { display: "flex", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs8(Box10, { display: "flex", alignItems: "center", children: [
     icon,
-    /* @__PURE__ */ jsx15(
-      Text8,
+    /* @__PURE__ */ jsx14(
+      Text7,
       {
         color: "text50",
         fontSize: "normal",
@@ -1146,8 +1102,8 @@ function TransactionFooter({
         children: title
       }
     ),
-    /* @__PURE__ */ jsx15(
-      Box11,
+    /* @__PURE__ */ jsx14(
+      Box10,
       {
         as: "a",
         flexGrow: "1",
@@ -1157,14 +1113,16 @@ function TransactionFooter({
         rel: "noopener noreferrer",
         textAlign: "right",
         textDecoration: "none",
-        children: /* @__PURE__ */ jsx15(
-          Text8,
+        children: /* @__PURE__ */ jsx14(
+          Text7,
           {
-            color: "polygonLight",
             textAlign: "right",
             fontSize: "normal",
             fontWeight: "medium",
             fontFamily: "body",
+            style: {
+              color: "hsla(247, 100%, 75%, 1)"
+            },
             children: transactionHash && truncateMiddle(transactionHash, 4, 4)
           }
         )
@@ -1175,36 +1133,36 @@ function TransactionFooter({
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
 import {
-  Box as Box13,
-  Image as Image3,
+  Box as Box12,
+  Image as Image2,
   NetworkImage,
-  Skeleton as Skeleton5,
-  Text as Text10
+  Skeleton as Skeleton4,
+  Text as Text9
 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
-import { formatUnits as formatUnits3 } from "viem";
+import { formatUnits as formatUnits2 } from "viem";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box12, Text as Text9 } from "@0xsequence/design-system";
+import { Box as Box11, Text as Text8 } from "@0xsequence/design-system";
 import { formatDistanceToNow } from "date-fns";
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function TimeAgo({ date }) {
-  const [timeAgo, setTimeAgo] = useState5("");
+  const [timeAgo, setTimeAgo] = useState6("");
   useEffect4(() => {
     const interval = setInterval(() => {
       setTimeAgo(formatDistanceToNow(date));
     }, 1e3);
     return () => clearInterval(interval);
   }, [date]);
-  return /* @__PURE__ */ jsx16(
-    Box12,
+  return /* @__PURE__ */ jsx15(
+    Box11,
     {
       flexGrow: "1",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx16(Text9, { color: "text50", fontSize: "small", children: timeAgo })
+      children: /* @__PURE__ */ jsx15(Text8, { color: "text50", fontSize: "small", children: timeAgo })
     }
   );
 }
@@ -1311,7 +1269,7 @@ function useTransactionPreviewTitle(orderId, 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 jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var TransactionPreview = observer6(
   ({
     orderId,
@@ -1339,14 +1297,14 @@ var TransactionPreview = observer6(
     const collectibleImage2 = collectible?.image;
     const collectibleName = collectible?.name;
     const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits3(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
+    const priceFormatted = price ? formatUnits2(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
-      return /* @__PURE__ */ jsx17(Box13, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx17(Skeleton5, { style: { width: "100%", height: "100%" } }) });
+      return /* @__PURE__ */ jsx16(Box12, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx16(Skeleton4, { style: { width: "100%", height: "100%" } }) });
     }
-    return /* @__PURE__ */ jsxs10(Box13, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs10(Box13, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx17(
-          Text10,
+    return /* @__PURE__ */ jsxs9(Box12, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs9(Box12, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx16(
+          Text9,
           {
             color: "text50",
             fontSize: "small",
@@ -1356,12 +1314,12 @@ var TransactionPreview = observer6(
             children: title
           }
         ),
-        /* @__PURE__ */ jsx17(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-        isConfirming && /* @__PURE__ */ jsx17(TimeAgo, { date: /* @__PURE__ */ new Date() })
+        /* @__PURE__ */ jsx16(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx16(TimeAgo, { date: /* @__PURE__ */ new Date() })
       ] }),
-      /* @__PURE__ */ jsxs10(Box13, { display: "flex", alignItems: "center", marginTop: "2", children: [
-        /* @__PURE__ */ jsx17(
-          Image3,
+      /* @__PURE__ */ jsxs9(Box12, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx16(
+          Image2,
           {
             src: collectibleImage2 || chess_tile_default,
             alt: collectibleName,
@@ -1372,16 +1330,16 @@ var TransactionPreview = observer6(
             style: { objectFit: "cover" }
           }
         ),
-        /* @__PURE__ */ jsxs10(
-          Box13,
+        /* @__PURE__ */ jsxs9(
+          Box12,
           {
             display: "flex",
             flexDirection: "column",
             alignItems: "flex-start",
             gap: "0.5",
             children: [
-              /* @__PURE__ */ jsx17(
-                Text10,
+              /* @__PURE__ */ jsx16(
+                Text9,
                 {
                   color: "text80",
                   fontSize: "small",
@@ -1390,12 +1348,12 @@ var TransactionPreview = observer6(
                   children: collectibleName
                 }
               ),
-              /* @__PURE__ */ jsx17(Text10, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
+              /* @__PURE__ */ jsx16(Text9, { color: "text100", fontSize: "small", fontFamily: "body", children: collectionName })
             ]
           }
         ),
-        price && /* @__PURE__ */ jsxs10(
-          Box13,
+        price && /* @__PURE__ */ jsxs9(
+          Box12,
           {
             flexGrow: "1",
             display: "flex",
@@ -1403,9 +1361,9 @@ var TransactionPreview = observer6(
             justifyContent: "flex-end",
             gap: "1",
             children: [
-              /* @__PURE__ */ jsx17(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
-              /* @__PURE__ */ jsxs10(
-                Text10,
+              /* @__PURE__ */ jsx16(Image2, { src: currencyImageUrl, width: "3", height: "3" }),
+              /* @__PURE__ */ jsxs9(
+                Text9,
                 {
                   color: "text80",
                   fontSize: "small",
@@ -1429,8 +1387,8 @@ 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";
+var dialogOverlay3 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11vl fyvr11m0 fyvr11rs";
+var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11ul fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts
 function getFormattedType(transactionType, verb = false) {
@@ -1504,7 +1462,7 @@ function getTransactionStatusModalTitle({
 }
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var useTransactionStatusModal = () => {
   return {
     show: (args) => {
@@ -1532,11 +1490,11 @@ var TransactionStatusModal = observer7(() => {
     chainId,
     collectibleId
   });
-  const [transactionStatus, setTransactionStatus] = useState6(
+  const [transactionStatus, setTransactionStatus] = useState7(
     orderId ? "SUCCESS" : "PENDING"
   );
   useEffect5(() => {
-    if (!transactionStatusModal$.isOpen.get()) return;
+    if (!transactionStatusModal$.isOpen.get() || orderId) return;
     console.log("Waiting for transaction receipt ...");
     waitForTransactionReceiptPromise?.then((receipt) => {
       if (receipt.status === "success") {
@@ -1591,11 +1549,11 @@ var TransactionStatusModal = observer7(() => {
     confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
     hash: hash || "0x"
   });
-  return /* @__PURE__ */ jsx18(Root2, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs11(Portal2, { children: [
-    /* @__PURE__ */ jsx18(Overlay, { className: dialogOverlay3 }),
-    /* @__PURE__ */ jsxs11(Content2, { className: transactionStatusModalContent, children: [
-      title ? /* @__PURE__ */ jsx18(
-        Text11,
+  return /* @__PURE__ */ jsx17(Root2, { open: transactionStatusModal$.isOpen.get(), children: /* @__PURE__ */ jsxs10(Portal2, { children: [
+    /* @__PURE__ */ jsx17(Overlay, { className: dialogOverlay3 }),
+    /* @__PURE__ */ jsxs10(Content2, { className: transactionStatusModalContent, children: [
+      title ? /* @__PURE__ */ jsx17(
+        Text10,
         {
           fontSize: "large",
           fontWeight: "bold",
@@ -1603,9 +1561,9 @@ var TransactionStatusModal = observer7(() => {
           fontFamily: "body",
           children: title
         }
-      ) : /* @__PURE__ */ jsx18(Skeleton6, { width: "16", height: "6" }),
-      message ? /* @__PURE__ */ jsx18(Text11, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx18(Skeleton6, { width: "20", height: "4" }),
-      /* @__PURE__ */ jsx18(
+      ) : /* @__PURE__ */ jsx17(Skeleton5, { width: "16", height: "6" }),
+      message ? /* @__PURE__ */ jsx17(Text10, { fontSize: "small", color: "text80", fontFamily: "body", children: message }) : /* @__PURE__ */ jsx17(Skeleton5, { width: "20", height: "4" }),
+      /* @__PURE__ */ jsx17(
         transactionPreview_default,
         {
           orderId,
@@ -1621,7 +1579,7 @@ var TransactionStatusModal = observer7(() => {
           isTimeout: transactionStatus === "TIMEOUT"
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx17(
         TransactionFooter,
         {
           transactionHash: hash,
@@ -1633,7 +1591,7 @@ var TransactionStatusModal = observer7(() => {
           chainId
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx17(
         Close,
         {
           onClick: () => {
@@ -1641,7 +1599,7 @@ var TransactionStatusModal = observer7(() => {
           },
           className: closeButton3,
           asChild: true,
-          children: /* @__PURE__ */ jsx18(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
+          children: /* @__PURE__ */ jsx17(IconButton2, { size: "xs", "aria-label": "Close modal", icon: CloseIcon })
         }
       )
     ] })
@@ -1649,7 +1607,7 @@ var TransactionStatusModal = observer7(() => {
 });
 var transactionStatusModal_default = TransactionStatusModal;
 
-// src/react/ui/modals/CreateListingModal/_store.ts
+// src/react/ui/modals/MakeOfferModal/store.ts
 import { observable as observable4 } from "@legendapp/state";
 import { addDays as addDays2 } from "date-fns/addDays";
 var initialState3 = {
@@ -1657,66 +1615,60 @@ var initialState3 = {
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
-  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
-  collectionName: "",
-  collectionType: void 0,
-  listingPrice: {
-    // to see if approval is needed when modal opens
+  orderbookKind: "reservoir" /* reservoir */,
+  callbacks: void 0,
+  offerPrice: {
     amountRaw: "1",
     currency: {}
   },
-  // to track if the user has changed the price, so we know if it's 1 default or user input
-  listingPriceChanged: false,
+  offerPriceChanged: false,
   quantity: "1",
   invalidQuantity: false,
   expiry: new Date(addDays2(/* @__PURE__ */ new Date(), 7).toJSON()),
-  callbacks: void 0,
-  onError: void 0,
-  onSuccess: void 0,
+  collectionType: void 0
+};
+var actions = {
   open: (args) => {
-    createListingModal$.collectionAddress.set(args.collectionAddress);
-    createListingModal$.chainId.set(args.chainId);
-    createListingModal$.collectibleId.set(args.collectibleId);
-    createListingModal$.orderbookKind.set(args.orderbookKind);
-    createListingModal$.callbacks.set(args.callbacks || args.defaultCallbacks);
-    createListingModal$.onSuccess.set(args.onSuccess);
-    createListingModal$.onError.set(args.onError);
-    createListingModal$.isOpen.set(true);
+    makeOfferModal$.collectionAddress.set(args.collectionAddress);
+    makeOfferModal$.chainId.set(args.chainId);
+    makeOfferModal$.collectibleId.set(args.collectibleId);
+    makeOfferModal$.orderbookKind.set(args.orderbookKind);
+    makeOfferModal$.callbacks.set(args.callbacks);
+    makeOfferModal$.isOpen.set(true);
   },
   close: () => {
-    createListingModal$.isOpen.set(false);
-    createListingModal$.callbacks.set(void 0);
+    makeOfferModal$.isOpen.set(false);
+    makeOfferModal$.set({ ...initialState3, ...actions });
   }
 };
-var createListingModal$ = observable4(initialState3);
+var makeOfferModal$ = observable4({
+  ...initialState3,
+  ...actions
+});
 
-// src/react/ui/modals/CreateListingModal/index.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-var useCreateListingModal = (callbacks) => {
-  return {
-    show: (args) => createListingModal$.open({ ...args, defaultCallbacks: callbacks }),
-    close: () => createListingModal$.close()
-  };
-};
-var CreateListingModal = () => {
+// src/react/ui/modals/MakeOfferModal/Modal.tsx
+import { Fragment, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var MakeOfferModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx19(Show2, { if: createListingModal$.isOpen, children: /* @__PURE__ */ jsx19(Modal2, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx18(Show2, { if: makeOfferModal$.isOpen, children: () => /* @__PURE__ */ jsx18(Modal2, { showTransactionStatusModal }) });
 };
 var Modal2 = observer8(
   ({
     showTransactionStatusModal
   }) => {
-    const state = createListingModal$.get();
+    const state = makeOfferModal$.get();
     const {
       collectionAddress,
       chainId,
-      listingPrice,
-      listingPriceChanged,
+      offerPrice,
+      offerPriceChanged,
+      invalidQuantity,
       collectibleId,
       orderbookKind,
       callbacks
     } = state;
-    const currencyAddress = listingPrice.currency.contractAddress;
+    const [insufficientBalance, setInsufficientBalance] = useState8(false);
+    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState8(false);
     const {
       data: collectible,
       isLoading: collectableIsLoading,
@@ -1734,91 +1686,87 @@ var Modal2 = observer8(
       chainId,
       collectionAddress
     });
-    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState7(false);
-    const { address } = useAccount3();
-    const { data: balance } = useBalanceOfCollectible({
+    const currencyOptions = useCurrencyOptions({ collectionAddress });
+    const { isLoading: currenciesIsLoading } = useCurrencies({
       chainId,
-      collectionAddress,
-      collectableId: collectibleId,
-      userAddress: address ?? void 0
+      currencyOptions
     });
-    const { getListingSteps, isLoading: machineLoading, createListing } = useCreateListing({
-      orderbookKind,
+    const { getMakeOfferSteps, isLoading: machineLoading } = useMakeOffer({
       chainId,
       collectionAddress,
-      enabled: createListingModal$.isOpen.get(),
-      onSwitchChainRefused: () => createListingModal$.close(),
+      orderbookKind,
+      enabled: makeOfferModal$.isOpen.get(),
       onApprovalSuccess: () => setApprovalExecutedSuccess(true),
       onTransactionSent: (hash, orderId) => {
         if (!hash && !orderId) return;
         showTransactionStatusModal({
           hash,
           orderId,
+          price: makeOfferModal$.offerPrice.get(),
           collectionAddress,
           chainId,
-          price: createListingModal$.listingPrice.get(),
           collectibleId,
-          type: "LISTING" /* LISTING */,
+          type: "OFFER" /* OFFER */,
           queriesToInvalidate: collectableKeys.all,
           callbacks
         });
-        createListingModal$.close();
+        makeOfferModal$.close();
+      }
+    });
+    const currencyAddress = offerPrice.currency.contractAddress;
+    const { isLoading, steps, refreshSteps } = getMakeOfferSteps({
+      contractType: collection?.type,
+      offer: {
+        tokenId: collectibleId,
+        quantity: parseUnits3(
+          makeOfferModal$.quantity.get(),
+          collectible?.decimals || 0
+        ).toString(),
+        expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
+        currencyAddress,
+        pricePerToken: offerPrice.amountRaw
       }
     });
+    const approvalNeeded = steps?.approval.isPending;
     useEffect6(() => {
       if (!currencyAddress) return;
       refreshSteps();
-    }, [currencyAddress]);
-    const handleStepExecution = async (execute) => {
-      if (!execute) return;
-      try {
-        await refreshSteps();
-        await execute();
-      } catch (error) {
-        if (callbacks?.onError) {
-          callbacks.onError(error);
-        } else {
-          console.debug("onError callback not provided:", error);
-        }
-      }
-    };
-    if (collectableIsLoading || collectionIsLoading || machineLoading) {
-      return /* @__PURE__ */ jsx19(
+    }, [currencyAddress, machineLoading]);
+    if (collectableIsLoading || collectionIsLoading || currenciesIsLoading || machineLoading) {
+      return /* @__PURE__ */ jsx18(
         LoadingModal,
         {
-          isOpen: createListingModal$.isOpen.get(),
+          isOpen: makeOfferModal$.isOpen.get(),
           chainId: Number(chainId),
-          onClose: createListingModal$.close,
-          title: "List item for sale"
+          onClose: makeOfferModal$.close,
+          title: "Make an offer"
         }
       );
     }
     if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx18(
         ErrorModal,
         {
-          isOpen: createListingModal$.isOpen.get(),
+          isOpen: makeOfferModal$.isOpen.get(),
           chainId: Number(chainId),
-          onClose: createListingModal$.close,
-          title: "List item for sale"
+          onClose: makeOfferModal$.close,
+          title: "Make an offer"
         }
       );
     }
-    const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
-    const { isLoading, steps, refreshSteps } = getListingSteps({
-      contractType: collection?.type,
-      listing: {
-        tokenId: collectibleId,
-        quantity: parseUnits3(
-          createListingModal$.quantity.get(),
-          collectible?.decimals || 0
-        ).toString(),
-        expiry: dateToUnixTime(createListingModal$.expiry.get()),
-        currencyAddress: listingPrice.currency.contractAddress,
-        pricePerToken: listingPrice.amountRaw
+    const handleStepExecution = async (execute) => {
+      if (!execute) return;
+      try {
+        await refreshSteps();
+        await execute();
+      } catch (error) {
+        if (callbacks?.onError) {
+          callbacks.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
       }
-    });
-    const approvalNeeded = steps?.approval.isPending;
+    };
     const ctas = [
       {
         label: "Approve TOKEN",
@@ -1826,37 +1774,25 @@ var Modal2 = observer8(
         hidden: !approvalNeeded || approvalExecutedSuccess,
         pending: steps?.approval.isExecuting || isLoading,
         variant: "glass",
-        disabled: createListingModal$.invalidQuantity.get() || isLoading || !listingPriceChanged || listingPrice.amountRaw === "0" || steps?.transaction.isExecuting
+        disabled: invalidQuantity || isLoading || steps?.transaction.isExecuting || insufficientBalance || offerPrice.amountRaw === "0" || !offerPriceChanged
       },
       {
-        label: "List item for sale",
-        onClick: () => createListing({
-          contractType: collection?.type,
-          listing: {
-            tokenId: collectibleId,
-            quantity: parseUnits3(
-              createListingModal$.quantity.get(),
-              collectible?.decimals || 0
-            ).toString(),
-            expiry: dateToUnixTime(createListingModal$.expiry.get()),
-            currencyAddress: listingPrice.currency.contractAddress,
-            pricePerToken: listingPrice.amountRaw
-          }
-        }),
+        label: "Make offer",
+        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
         pending: steps?.transaction.isExecuting || isLoading,
-        disabled: !approvalExecutedSuccess && approvalNeeded || listingPrice.amountRaw === "0" || isLoading || createListingModal$.invalidQuantity.get() || !listingPriceChanged
+        disabled: !approvalExecutedSuccess && approvalNeeded || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity || offerPrice.amountRaw === "0"
       }
     ];
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsx18(Fragment, { children: /* @__PURE__ */ jsxs11(
       ActionModal,
       {
-        isOpen: createListingModal$.isOpen.get(),
+        isOpen: makeOfferModal$.isOpen.get(),
         chainId: Number(chainId),
-        onClose: () => createListingModal$.close(),
-        title: "List item for sale",
+        onClose: () => makeOfferModal$.close(),
+        title: "Make an offer",
         ctas,
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx18(
             TokenPreview,
             {
               collectionName: collection?.name,
@@ -1865,75 +1801,65 @@ var Modal2 = observer8(
               chainId
             }
           ),
-          /* @__PURE__ */ jsxs12(Box14, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
-            /* @__PURE__ */ jsx19(
-              priceInput_default,
-              {
-                chainId,
-                collectionAddress,
-                $listingPrice: createListingModal$.listingPrice,
-                onPriceChange: () => createListingModal$.listingPriceChanged.set(true)
-              }
-            ),
-            listingPrice.amountRaw !== "0" && listingPriceChanged && /* @__PURE__ */ jsx19(
-              FloorPriceText,
-              {
-                tokenId: collectibleId,
-                chainId,
-                collectionAddress,
-                price: listingPrice
+          /* @__PURE__ */ jsx18(
+            priceInput_default,
+            {
+              chainId,
+              collectionAddress,
+              $listingPrice: makeOfferModal$.offerPrice,
+              onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
+              checkBalance: {
+                enabled: true,
+                callback: (state2) => setInsufficientBalance(state2)
               }
-            )
-          ] }),
-          collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx19(
+            }
+          ),
+          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx18(
             QuantityInput,
             {
-              $quantity: createListingModal$.quantity,
-              $invalidQuantity: createListingModal$.invalidQuantity,
+              $quantity: makeOfferModal$.quantity,
+              $invalidQuantity: makeOfferModal$.invalidQuantity,
               decimals: collectible?.decimals || 0,
-              maxQuantity: balance?.balance
+              maxQuantity: String(Number.MAX_SAFE_INTEGER)
             }
           ),
-          /* @__PURE__ */ jsx19(expirationDateSelect_default, { $date: createListingModal$.expiry }),
-          /* @__PURE__ */ jsx19(
-            TransactionDetails,
+          offerPrice.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx18(
+            FloorPriceText,
             {
-              collectibleId,
-              collectionAddress,
+              tokenId: collectibleId,
               chainId,
-              price: createListingModal$.listingPrice.get(),
-              showPlaceholderPrice: !listingPriceChanged,
-              currencyImageUrl: listingPrice.currency.imageUrl
+              collectionAddress,
+              price: offerPrice
             }
-          )
+          ),
+          /* @__PURE__ */ jsx18(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
         ]
       }
-    );
+    ) });
   }
 );
 
-// src/react/ui/modals/MakeOfferModal/index.tsx
+// src/react/ui/modals/SellModal/Modal.tsx
 import { Show as Show3, observer as observer9 } from "@legendapp/state/react";
-import { useEffect as useEffect7, useState as useState9 } from "react";
+import { useEffect as useEffect7, useState as useState10 } from "react";
 import { parseUnits as parseUnits4 } from "viem";
 
-// src/react/hooks/useMakeOffer.tsx
-import { useCallback as useCallback2, useState as useState8 } from "react";
-var useMakeOffer = ({
+// src/react/hooks/useSell.tsx
+import { useCallback as useCallback3, useState as useState9 } from "react";
+var useSell = ({
   onSuccess,
   onError,
   onTransactionSent,
   onApprovalSuccess,
-  onSwitchChainRefused,
   enabled,
   ...config
 }) => {
-  const [isLoading, setIsLoading] = useState8(false);
-  const [steps, setSteps] = useState8(null);
-  const [executionState, setExecutionState] = useState8(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [steps, setSteps] = useState9(null);
+  const [executionState, setExecutionState] = useState9(null);
   const machineConfig = {
     ...config,
-    type: "OFFER" /* OFFER */
+    type: "SELL" /* SELL */
   };
   const { machine, isLoading: isMachineLoading } = useTransactionMachine({
     config: machineConfig,
@@ -1950,10 +1876,9 @@ var useMakeOffer = ({
     onApprovalSuccess: (hash) => {
       setExecutionState(null);
       onApprovalSuccess?.(hash);
-    },
-    onSwitchChainRefused
+    }
   });
-  const loadSteps = useCallback2(
+  const loadSteps = useCallback3(
     async (props) => {
       if (!machine) return;
       setIsLoading(true);
@@ -1970,14 +1895,14 @@ var useMakeOffer = ({
         },
         transaction: {
           ...generatedSteps.transaction,
-          isExecuting: executionState === "offer"
+          isExecuting: executionState === "sell"
         }
       });
       setIsLoading(false);
     },
     [machine, executionState]
   );
-  const handleStepExecution = useCallback2(
+  const handleStepExecution = useCallback3(
     async (type, execute) => {
       if (!type) return;
       setExecutionState(type);
@@ -1991,8 +1916,8 @@ var useMakeOffer = ({
     []
   );
   return {
-    makeOffer: (props) => machine?.start(props),
-    getMakeOfferSteps: (props) => ({
+    sell: (props) => machine?.start(props),
+    getSellSteps: (props) => ({
       isLoading,
       steps: steps ? {
         ...steps,
@@ -2003,8 +1928,8 @@ var useMakeOffer = ({
         },
         transaction: {
           ...steps.transaction,
-          isExecuting: executionState === "offer",
-          execute: () => handleStepExecution("offer", () => steps.transaction.execute())
+          isExecuting: executionState === "sell",
+          execute: () => handleStepExecution("sell", () => steps.transaction.execute())
         }
       } : null,
       refreshSteps: () => loadSteps(props)
@@ -2013,154 +1938,201 @@ var useMakeOffer = ({
   };
 };
 
-// src/react/ui/modals/MakeOfferModal/_store.ts
+// src/react/ui/modals/_internal/components/transactionDetails/index.tsx
+import { Box as Box13, Image as Image3, Skeleton as Skeleton6, Text as Text11 } from "@0xsequence/design-system";
+import { formatUnits as formatUnits3 } from "viem";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
+function TransactionDetails({
+  collectibleId,
+  collectionAddress,
+  chainId,
+  price,
+  showPlaceholderPrice,
+  currencyImageUrl
+}) {
+  const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
+  const marketplaceFeePercentage = data?.collections.find(
+    (collection) => collection.collectionAddress === collectionAddress
+  )?.marketplaceFeePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+  const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } = useRoyaltyPercentage({
+    chainId,
+    collectionAddress,
+    collectibleId
+  });
+  const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
+  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
+  if (royaltyPercentage !== void 0 && formattedAmount && price) {
+    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toFixed(price.currency.decimals);
+  }
+  if (marketplaceFeePercentage !== void 0 && formattedAmount && price) {
+    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
+  }
+  return /* @__PURE__ */ jsxs12(
+    Box13,
+    {
+      width: "full",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsx19(Text11, { fontSize: "small", color: "text50", fontFamily: "body", children: "Total earnings" }),
+        /* @__PURE__ */ jsxs12(Box13, { display: "flex", alignItems: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx19(Image3, { src: currencyImageUrl, width: "3", height: "3" }),
+          priceLoading ? /* @__PURE__ */ jsx19(Skeleton6, { width: "16", height: "4" }) : /* @__PURE__ */ jsxs12(Text11, { fontSize: "small", color: "text100", fontFamily: "body", children: [
+            showPlaceholderPrice ? "0" : formattedAmount,
+            " ",
+            price.currency.symbol
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/ui/modals/_internal/components/transactionHeader/index.tsx
+import { Box as Box14, Image as Image4, Skeleton as Skeleton7, Text as Text12 } from "@0xsequence/design-system";
+import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function TransactionHeader({
+  title,
+  currencyImageUrl,
+  date
+}) {
+  return /* @__PURE__ */ jsxs13(Box14, { display: "flex", alignItems: "center", width: "full", children: [
+    /* @__PURE__ */ jsx20(
+      Text12,
+      {
+        fontSize: "small",
+        fontWeight: "medium",
+        color: "text80",
+        marginRight: "1",
+        fontFamily: "body",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx20(Image4, { src: currencyImageUrl, width: "3", height: "3", marginRight: "1" }),
+    date && /* @__PURE__ */ jsxs13(
+      Text12,
+      {
+        fontSize: "small",
+        color: "text50",
+        flexGrow: "1",
+        textAlign: "right",
+        fontFamily: "body",
+        children: [
+          formatDistanceToNow2(date),
+          " ago"
+        ]
+      }
+    ) || /* @__PURE__ */ jsx20(Skeleton7, { width: "8", height: "4" })
+  ] });
+}
+
+// src/react/ui/modals/SellModal/store.ts
 import { observable as observable5 } from "@legendapp/state";
-import { addDays as addDays3 } from "date-fns/addDays";
 var initialState4 = {
   isOpen: false,
   collectionAddress: "",
   chainId: "",
-  collectibleId: "",
-  orderbookKind: "reservoir" /* reservoir */,
+  tokenId: "",
+  order: void 0,
   callbacks: void 0,
-  offerPrice: {
-    amountRaw: "1",
-    currency: {}
-  },
-  // to track if the user has changed the price, so we know if it's 1 default or user input
-  offerPriceChanged: false,
-  quantity: "1",
-  invalidQuantity: false,
-  expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
   open: (args) => {
-    makeOfferModal$.collectionAddress.set(args.collectionAddress);
-    makeOfferModal$.chainId.set(args.chainId);
-    makeOfferModal$.collectibleId.set(args.collectibleId);
-    makeOfferModal$.orderbookKind.set(args.orderbookKind);
-    makeOfferModal$.callbacks.set(args.callbacks);
-    makeOfferModal$.isOpen.set(true);
+    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: () => {
-    makeOfferModal$.isOpen.set(false);
-    makeOfferModal$.callbacks.set(void 0);
+    sellModal$.isOpen.set(false);
+    sellModal$.callbacks.set(void 0);
   }
 };
-var makeOfferModal$ = observable5(initialState4);
+var sellModal$ = observable5(initialState4);
 
-// src/react/ui/modals/MakeOfferModal/index.tsx
-import { Fragment, 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 = () => {
+// src/react/ui/modals/SellModal/Modal.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var SellModal = () => {
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
-  return /* @__PURE__ */ jsx20(Show3, { if: makeOfferModal$.isOpen, children: /* @__PURE__ */ jsx20(ModalContent, { showTransactionStatusModal }) });
+  return /* @__PURE__ */ jsx21(Show3, { if: sellModal$.isOpen, children: () => /* @__PURE__ */ jsx21(Modal3, { showTransactionStatusModal }) });
 };
-var ModalContent = observer9(
+var Modal3 = observer9(
   ({
     showTransactionStatusModal
   }) => {
-    const state = makeOfferModal$.get();
-    const {
-      collectionAddress,
-      chainId,
-      offerPrice,
-      offerPriceChanged,
-      invalidQuantity,
-      collectibleId,
-      orderbookKind,
-      callbacks
-    } = state;
-    const [insufficientBalance, setInsufficientBalance] = useState9(false);
-    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState9(false);
-    const {
-      data: collectible,
-      isLoading: collectableIsLoading,
-      isError: collectableIsError
-    } = useCollectible({
+    const { tokenId, collectionAddress, chainId, order, callbacks } = sellModal$.get();
+    const { data: collectible } = useCollection({
       chainId,
-      collectionAddress,
-      collectibleId
+      collectionAddress
     });
+    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState10(false);
     const {
       data: collection,
-      isLoading: collectionIsLoading,
-      isError: collectionIsError
+      isLoading: collectionLoading,
+      isError: collectionError
     } = useCollection({
       chainId,
       collectionAddress
     });
     const currencyOptions = useCurrencyOptions({ collectionAddress });
-    const { isLoading: currenciesIsLoading } = useCurrencies({
+    const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
       chainId,
       currencyOptions
     });
-    const { getMakeOfferSteps } = useMakeOffer({
-      chainId,
+    const { getSellSteps, isLoading: machineLoading } = useSell({
       collectionAddress,
-      orderbookKind,
-      enabled: makeOfferModal$.isOpen.get(),
-      onSwitchChainRefused: () => makeOfferModal$.close(),
+      chainId,
+      enabled: sellModal$.isOpen.get(),
       onApprovalSuccess: () => setApprovalExecutedSuccess(true),
-      onTransactionSent: (hash, orderId) => {
-        if (!hash && !orderId) return;
+      onTransactionSent: (hash) => {
+        if (!hash) return;
         showTransactionStatusModal({
           hash,
-          orderId,
-          price: makeOfferModal$.offerPrice.get(),
+          price: order ? {
+            amountRaw: order.priceAmount,
+            currency: currencies?.find(
+              (currency2) => currency2.contractAddress === order.priceCurrencyAddress
+            ) ?? {
+              chainId: Number(chainId),
+              contractAddress: order.priceCurrencyAddress,
+              name: "Unknown",
+              symbol: "UNK",
+              decimals: 18,
+              imageUrl: "",
+              exchangeRate: 0,
+              defaultChainCurrency: false,
+              nativeCurrency: false,
+              createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+              updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+            }
+          } : void 0,
           collectionAddress,
           chainId,
-          collectibleId,
-          type: "OFFER" /* OFFER */,
-          queriesToInvalidate: collectableKeys.all,
+          collectibleId: tokenId,
+          type: "SELL" /* SELL */,
+          queriesToInvalidate: [
+            ...collectableKeys.all,
+            balanceQueries.all
+          ],
           callbacks
         });
-        makeOfferModal$.close();
+        sellModal$.close();
       }
     });
-    const dateToUnixTime = (date) => Math.floor(date.getTime() / 1e3).toString();
-    const currencyAddress = offerPrice.currency.contractAddress;
-    const { isLoading, steps, refreshSteps } = getMakeOfferSteps({
-      contractType: collection?.type,
-      offer: {
-        tokenId: collectibleId,
-        quantity: parseUnits4(
-          makeOfferModal$.quantity.get(),
-          collectible?.decimals || 0
-        ).toString(),
-        expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
-        currencyAddress,
-        pricePerToken: offerPrice.amountRaw
-      }
+    const { isLoading, steps, refreshSteps } = getSellSteps({
+      orderId: order?.orderId ?? "",
+      marketplace: order?.marketplace,
+      quantity: order?.quantityRemaining ? parseUnits4(
+        order.quantityRemaining,
+        collectible?.decimals || 0
+      ).toString() : "1"
     });
-    const approvalNeeded = steps?.approval.isPending;
     useEffect7(() => {
-      if (!currencyAddress) return;
       refreshSteps();
-    }, [currencyAddress]);
-    if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
-      return /* @__PURE__ */ jsx20(
-        LoadingModal,
-        {
-          isOpen: makeOfferModal$.isOpen.get(),
-          chainId: Number(chainId),
-          onClose: makeOfferModal$.close,
-          title: "Make an offer"
-        }
-      );
-    }
-    if (collectableIsError || collectionIsError) {
-      return /* @__PURE__ */ jsx20(
-        ErrorModal,
-        {
-          isOpen: makeOfferModal$.isOpen.get(),
-          chainId: Number(chainId),
-          onClose: makeOfferModal$.close,
-          title: "Make an offer"
-        }
-      );
-    }
+    }, [order, machineLoading]);
     const handleStepExecution = async (execute) => {
       if (!execute) return;
       try {
@@ -2174,6 +2146,32 @@ var ModalContent = observer9(
         }
       }
     };
+    if (collectionLoading || currenciesLoading || machineLoading) {
+      return /* @__PURE__ */ jsx21(
+        LoadingModal,
+        {
+          isOpen: sellModal$.isOpen.get(),
+          chainId: Number(chainId),
+          onClose: sellModal$.close,
+          title: "You have an offer"
+        }
+      );
+    }
+    if (collectionError || order === void 0) {
+      return /* @__PURE__ */ jsx21(
+        ErrorModal,
+        {
+          isOpen: sellModal$.isOpen.get(),
+          chainId: Number(chainId),
+          onClose: sellModal$.close,
+          title: "You have an offer"
+        }
+      );
+    }
+    const approvalNeeded = steps?.approval.isPending;
+    const currency = currencies?.find(
+      (c) => c.contractAddress === order?.priceCurrencyAddress
+    );
     const ctas = [
       {
         label: "Approve TOKEN",
@@ -2181,438 +2179,76 @@ var ModalContent = observer9(
         hidden: !approvalNeeded || approvalExecutedSuccess,
         pending: steps?.approval.isExecuting || isLoading,
         variant: "glass",
-        disabled: invalidQuantity || isLoading || steps?.transaction.isExecuting || insufficientBalance || offerPrice.amountRaw === "0" || !offerPriceChanged
+        disabled: isLoading || steps?.transaction.isExecuting
       },
       {
-        label: "Make offer",
+        label: "Accept",
         onClick: () => handleStepExecution(() => steps?.transaction.execute()),
         pending: steps?.transaction.isExecuting || isLoading,
-        disabled: !approvalExecutedSuccess && approvalNeeded || offerPrice.amountRaw === "0" || insufficientBalance || isLoading || invalidQuantity || offerPrice.amountRaw === "0"
+        disabled: !approvalExecutedSuccess && approvalNeeded || isLoading
       }
     ];
-    return /* @__PURE__ */ jsx20(Fragment, { children: /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       ActionModal,
       {
-        isOpen: makeOfferModal$.isOpen.get(),
+        isOpen: sellModal$.isOpen.get(),
         chainId: Number(chainId),
-        onClose: () => makeOfferModal$.close(),
-        title: "Make an offer",
+        onClose: sellModal$.close,
+        title: "You have an offer",
         ctas,
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
+            TransactionHeader,
+            {
+              title: "Offer received",
+              currencyImageUrl: currency?.imageUrl,
+              date: order && new Date(order.createdAt)
+            }
+          ),
+          /* @__PURE__ */ jsx21(
             TokenPreview,
             {
               collectionName: collection?.name,
               collectionAddress,
-              collectibleId,
+              collectibleId: tokenId,
               chainId
             }
           ),
-          /* @__PURE__ */ jsx20(
-            priceInput_default,
+          /* @__PURE__ */ jsx21(
+            TransactionDetails,
             {
-              chainId,
+              collectibleId: tokenId,
               collectionAddress,
-              $listingPrice: makeOfferModal$.offerPrice,
-              onPriceChange: () => makeOfferModal$.offerPriceChanged.set(true),
-              checkBalance: {
-                enabled: true,
-                callback: (state2) => setInsufficientBalance(state2)
-              }
-            }
-          ),
-          collection?.type === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx20(
-            QuantityInput,
-            {
-              $quantity: makeOfferModal$.quantity,
-              $invalidQuantity: makeOfferModal$.invalidQuantity,
-              decimals: collectible?.decimals || 0,
-              maxQuantity: String(Number.MAX_SAFE_INTEGER)
-            }
-          ),
-          offerPrice.amountRaw !== "0" && offerPriceChanged && !insufficientBalance && /* @__PURE__ */ jsx20(
-            FloorPriceText,
-            {
-              tokenId: collectibleId,
               chainId,
-              collectionAddress,
-              price: offerPrice
+              price: currency ? {
+                amountRaw: order?.priceAmount,
+                currency
+              } : void 0,
+              currencyImageUrl: currency?.imageUrl
             }
-          ),
-          /* @__PURE__ */ jsx20(expirationDateSelect_default, { $date: makeOfferModal$.expiry })
+          )
         ]
       }
-    ) });
+    );
   }
 );
 
-// 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 useState10 } from "react";
-var useSell = ({
-  onSuccess,
-  onError,
-  onTransactionSent,
-  onApprovalSuccess,
-  onSwitchChainRefused,
-  enabled,
-  ...config
-}) => {
-  const [isLoading, setIsLoading] = useState10(false);
-  const [steps, setSteps] = useState10(null);
-  const [executionState, setExecutionState] = useState10(null);
-  const machineConfig = {
-    ...config,
-    type: "SELL" /* SELL */
-  };
-  const { machine, isLoading: isMachineLoading } = useTransactionMachine({
-    config: machineConfig,
-    enabled,
-    onSwitchChainRefused,
-    onSuccess: (hash) => {
-      setExecutionState(null);
-      onSuccess?.(hash);
-    },
-    onError: (error) => {
-      setExecutionState(null);
-      onError?.(error);
-    },
-    onTransactionSent,
-    onApprovalSuccess: (hash) => {
-      setExecutionState(null);
-      onApprovalSuccess?.(hash);
-    }
-  });
-  const loadSteps = useCallback3(
-    async (props) => {
-      if (!machine) return;
-      setIsLoading(true);
-      const generatedSteps = await machine.getTransactionSteps(props);
-      if (!generatedSteps) {
-        setIsLoading(false);
-        return;
-      }
-      setSteps({
-        ...generatedSteps,
-        approval: {
-          ...generatedSteps.approval,
-          isExecuting: executionState === "approval"
-        },
-        transaction: {
-          ...generatedSteps.transaction,
-          isExecuting: executionState === "sell"
-        }
-      });
-      setIsLoading(false);
-    },
-    [machine, executionState]
-  );
-  const handleStepExecution = useCallback3(
-    async (type, execute) => {
-      if (!type) return;
-      setExecutionState(type);
-      try {
-        await execute();
-      } catch (error) {
-        setExecutionState(null);
-        throw error;
-      }
-    },
-    []
-  );
-  return {
-    sell: (props) => machine?.start(props),
-    getSellSteps: (props) => ({
-      isLoading,
-      steps: steps ? {
-        ...steps,
-        approval: {
-          ...steps.approval,
-          isExecuting: executionState === "approval",
-          execute: () => handleStepExecution("approval", () => steps.approval.execute())
-        },
-        transaction: {
-          ...steps.transaction,
-          isExecuting: executionState === "sell",
-          execute: () => handleStepExecution("sell", () => steps.transaction.execute())
-        }
-      } : null,
-      refreshSteps: () => loadSteps(props)
-    }),
-    isLoading: isMachineLoading
-  };
-};
-
-// src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box15, Image as Image4, Skeleton as Skeleton7, Text as Text12 } 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(Box15, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx21(
-      Text12,
-      {
-        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(
-      Text12,
-      {
-        fontSize: "small",
-        color: "text50",
-        flexGrow: "1",
-        textAlign: "right",
-        fontFamily: "body",
-        children: [
-          formatDistanceToNow2(date),
-          " ago"
-        ]
-      }
-    ) || /* @__PURE__ */ jsx21(Skeleton7, { width: "8", height: "4" })
-  ] });
-}
+// src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
+import {
+  Box as Box15,
+  Button as Button3,
+  CloseIcon as CloseIcon2,
+  ExternalLinkIcon,
+  IconButton as IconButton3,
+  Image as Image5,
+  Text as Text13
+} from "@0xsequence/design-system";
+import { observer as observer10 } from "@legendapp/state/react";
+import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
 
-// src/react/ui/modals/SellModal/_store.ts
+// src/react/ui/modals/SuccessfulPurchaseModal/_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/index.tsx
-import { useEffect as useEffect8, useState as useState11 } from "react";
-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__ */ jsx22(Show4, { if: sellModal$.isOpen, children: /* @__PURE__ */ jsx22(ModalContent2, { showTransactionStatusModal }) });
-};
-var ModalContent2 = observer10(
-  ({
-    showTransactionStatusModal
-  }) => {
-    const { tokenId, collectionAddress, chainId, order, callbacks } = sellModal$.get();
-    const { data: collectible } = useCollection({
-      chainId,
-      collectionAddress
-    });
-    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState11(false);
-    const {
-      data: collection,
-      isLoading: collectionLoading,
-      isError: collectionError
-    } = useCollection({
-      chainId,
-      collectionAddress
-    });
-    const currencyOptions = useCurrencyOptions({ collectionAddress });
-    const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
-      chainId,
-      currencyOptions
-    });
-    const { getSellSteps, isLoading: machineLoading } = useSell({
-      collectionAddress,
-      chainId,
-      enabled: sellModal$.isOpen.get(),
-      onSwitchChainRefused: () => {
-        sellModal$.close();
-      },
-      onApprovalSuccess: () => setApprovalExecutedSuccess(true),
-      onTransactionSent: (hash) => {
-        if (!hash) return;
-        showTransactionStatusModal({
-          hash,
-          price: order ? {
-            amountRaw: order.priceAmount,
-            currency: currencies?.find(
-              (currency2) => currency2.contractAddress === order.priceCurrencyAddress
-            ) ?? {
-              chainId: Number(chainId),
-              contractAddress: order.priceCurrencyAddress,
-              name: "Unknown",
-              symbol: "UNK",
-              decimals: 18,
-              imageUrl: "",
-              exchangeRate: 0,
-              defaultChainCurrency: false,
-              nativeCurrency: false,
-              createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-              updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-            }
-          } : void 0,
-          collectionAddress,
-          chainId,
-          collectibleId: tokenId,
-          type: "SELL" /* SELL */,
-          queriesToInvalidate: [
-            ...collectableKeys.all,
-            balanceQueries.all
-          ],
-          callbacks
-        });
-        sellModal$.close();
-      }
-    });
-    const { isLoading, steps, refreshSteps } = getSellSteps({
-      orderId: order?.orderId ?? "",
-      marketplace: order?.marketplace,
-      quantity: order?.quantityRemaining ? parseUnits5(
-        order.quantityRemaining,
-        collectible?.decimals || 0
-      ).toString() : "1"
-    });
-    useEffect8(() => {
-      refreshSteps();
-    }, [order, machineLoading]);
-    const handleStepExecution = async (execute) => {
-      if (!execute) return;
-      try {
-        await refreshSteps();
-        await execute();
-      } catch (error) {
-        if (callbacks?.onError) {
-          callbacks.onError(error);
-        } else {
-          console.debug("onError callback not provided:", error);
-        }
-      }
-    };
-    if (collectionLoading || currenciesLoading || machineLoading) {
-      return /* @__PURE__ */ jsx22(
-        LoadingModal,
-        {
-          isOpen: sellModal$.isOpen.get(),
-          chainId: Number(chainId),
-          onClose: sellModal$.close,
-          title: "You have an offer"
-        }
-      );
-    }
-    if (collectionError || order === void 0) {
-      return /* @__PURE__ */ jsx22(
-        ErrorModal,
-        {
-          isOpen: sellModal$.isOpen.get(),
-          chainId: Number(chainId),
-          onClose: sellModal$.close,
-          title: "You have an offer"
-        }
-      );
-    }
-    const approvalNeeded = steps?.approval.isPending;
-    const currency = currencies?.find(
-      (c) => c.contractAddress === order?.priceCurrencyAddress
-    );
-    const ctas = [
-      {
-        label: "Approve TOKEN",
-        onClick: () => handleStepExecution(() => steps?.approval.execute()),
-        hidden: !approvalNeeded || approvalExecutedSuccess,
-        pending: steps?.approval.isExecuting || isLoading,
-        variant: "glass",
-        disabled: isLoading || steps?.transaction.isExecuting
-      },
-      {
-        label: "Accept",
-        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
-        pending: steps?.transaction.isExecuting || isLoading,
-        disabled: !approvalExecutedSuccess && approvalNeeded || isLoading
-      }
-    ];
-    return /* @__PURE__ */ jsxs15(
-      ActionModal,
-      {
-        isOpen: sellModal$.isOpen.get(),
-        chainId: Number(chainId),
-        onClose: sellModal$.close,
-        title: "You have an offer",
-        ctas,
-        children: [
-          /* @__PURE__ */ jsx22(
-            TransactionHeader,
-            {
-              title: "Offer received",
-              currencyImageUrl: currency?.imageUrl,
-              date: order && new Date(order.createdAt)
-            }
-          ),
-          /* @__PURE__ */ jsx22(
-            TokenPreview,
-            {
-              collectionName: collection?.name,
-              collectionAddress,
-              collectibleId: tokenId,
-              chainId
-            }
-          ),
-          /* @__PURE__ */ jsx22(
-            TransactionDetails,
-            {
-              collectibleId: tokenId,
-              collectionAddress,
-              chainId,
-              price: currency ? {
-                amountRaw: order?.priceAmount,
-                currency
-              } : void 0,
-              currencyImageUrl: currency?.imageUrl
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-
-// src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import {
-  Box as Box16,
-  Button as Button3,
-  CloseIcon as CloseIcon2,
-  ExternalLinkIcon,
-  IconButton as IconButton3,
-  Image as Image5,
-  Text as Text13
-} from "@0xsequence/design-system";
-import { observer as observer11 } from "@legendapp/state/react";
-import { Close as Close2, Content as Content3, Overlay as Overlay2, Portal as Portal3, Root as Root3 } from "@radix-ui/react-dialog";
-
-// src/react/ui/modals/SuccessfulPurchaseModal/_store.ts
-import { observable as observable7 } from "@legendapp/state";
-var initialState6 = {
   isOpen: false,
   open: ({
     collectibles,
@@ -2638,7 +2274,7 @@ var initialState6 = {
     successfulPurchaseModal$.isOpen.set(false);
     successfulPurchaseModal$.callbacks.set(void 0);
     successfulPurchaseModal$.state.set({
-      ...initialState6.state
+      ...initialState5.state
     });
   },
   state: {
@@ -2650,22 +2286,22 @@ var initialState6 = {
   },
   callbacks: void 0
 };
-var successfulPurchaseModal$ = observable7(initialState6);
+var successfulPurchaseModal$ = observable6(initialState5);
 
 // src/react/ui/modals/SuccessfulPurchaseModal/index.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var useSuccessfulPurchaseModal = (callbacks) => {
   return {
     show: (args) => successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
     close: () => successfulPurchaseModal$.close()
   };
 };
-var SuccessfulPurchaseModal = observer11(() => {
-  return /* @__PURE__ */ jsx23(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs16(Portal3, { children: [
-    /* @__PURE__ */ jsx23(Overlay2, { className: dialogOverlay }),
-    /* @__PURE__ */ jsxs16(Content3, { className: dialogContent.narrow, children: [
-      /* @__PURE__ */ jsxs16(Box16, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
-        /* @__PURE__ */ jsx23(
+var SuccessfulPurchaseModal = observer10(() => {
+  return /* @__PURE__ */ jsx22(Root3, { open: successfulPurchaseModal$.isOpen.get(), children: /* @__PURE__ */ jsxs15(Portal3, { children: [
+    /* @__PURE__ */ jsx22(Overlay2, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs15(Content3, { className: dialogContent.narrow, children: [
+      /* @__PURE__ */ jsxs15(Box15, { display: "flex", flexDirection: "column", gap: "4", width: "full", children: [
+        /* @__PURE__ */ jsx22(
           Text13,
           {
             textAlign: "center",
@@ -2675,21 +2311,21 @@ var SuccessfulPurchaseModal = observer11(() => {
             children: "Successful purchase!"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx22(
           CollectiblesGrid,
           {
             collectibles: successfulPurchaseModal$.state.get().collectibles
           }
         ),
-        /* @__PURE__ */ jsxs16(Box16, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
-          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
-          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
-          /* @__PURE__ */ jsx23(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
+        /* @__PURE__ */ jsxs15(Box15, { display: "flex", alignItems: "center", gap: "1", children: [
+          /* @__PURE__ */ jsx22(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "You bought" }),
+          /* @__PURE__ */ jsx22(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().collectibles.length }),
+          /* @__PURE__ */ jsx22(Text13, { fontSize: "normal", fontWeight: "medium", color: "text80", children: "items for" }),
+          /* @__PURE__ */ jsx22(Text13, { fontSize: "normal", fontWeight: "medium", color: "text100", children: successfulPurchaseModal$.state.get().totalPrice })
         ] }),
-        /* @__PURE__ */ jsx23(SuccessfulPurchaseActions, {})
+        /* @__PURE__ */ jsx22(SuccessfulPurchaseActions, {})
       ] }),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx22(
         Close2,
         {
           onClick: () => {
@@ -2697,15 +2333,15 @@ var SuccessfulPurchaseModal = observer11(() => {
           },
           className: closeButton,
           asChild: true,
-          children: /* @__PURE__ */ jsx23(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
+          children: /* @__PURE__ */ jsx22(IconButton3, { size: "xs", "aria-label": "Close modal", icon: CloseIcon2 })
         }
       )
     ] })
   ] }) });
 });
 function SuccessfulPurchaseActions() {
-  return /* @__PURE__ */ jsxs16(Box16, { display: "flex", flexDirection: "column", gap: "2", children: [
-    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs15(Box15, { display: "flex", flexDirection: "column", gap: "2", children: [
+    successfulPurchaseModal$.state.ctaOptions.get() && /* @__PURE__ */ jsx22(
       Button3,
       {
         shape: "square",
@@ -2715,7 +2351,7 @@ function SuccessfulPurchaseActions() {
         onClick: successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() || void 0
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx22(
       Button3,
       {
         as: "a",
@@ -2733,15 +2369,15 @@ function SuccessfulPurchaseActions() {
 function CollectiblesGrid({ collectibles }) {
   const total = collectibles.length;
   const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
-  return /* @__PURE__ */ jsx23(Box16, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
+  return /* @__PURE__ */ jsx22(Box15, { className: collectiblesGrid, display: "grid", gap: "2", children: shownCollectibles.map((collectible) => {
     const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
-    return /* @__PURE__ */ jsxs16(
-      Box16,
+    return /* @__PURE__ */ jsxs15(
+      Box15,
       {
         className: collectiblesGridItem,
         position: "relative",
         children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx22(
             Image5,
             {
               src: collectible.image,
@@ -2752,8 +2388,8 @@ function CollectiblesGrid({ collectibles }) {
               borderRadius: "sm"
             }
           ),
-          showPlus && /* @__PURE__ */ jsx23(
-            Box16,
+          showPlus && /* @__PURE__ */ jsx22(
+            Box15,
             {
               position: "absolute",
               top: "0",
@@ -2765,7 +2401,7 @@ function CollectiblesGrid({ collectibles }) {
               justifyContent: "center",
               background: "backgroundOverlay",
               backdropFilter: "blur",
-              children: /* @__PURE__ */ jsxs16(
+              children: /* @__PURE__ */ jsxs15(
                 Text13,
                 {
                   fontSize: "small",
@@ -2794,13 +2430,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 Show5, observer as observer13 } from "@legendapp/state/react";
+import { Show as Show4, observer as observer12 } from "@legendapp/state/react";
 import { Close as Close3, Content as Content4, Overlay as Overlay3, Portal as Portal4, Root as Root4 } from "@radix-ui/react-dialog";
-import { useAccount as useAccount5 } from "wagmi";
+import { useAccount as useAccount4 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/_store.ts
-import { observable as observable8 } from "@legendapp/state";
-var initialState7 = {
+import { observable as observable7 } from "@legendapp/state";
+var initialState6 = {
   isOpen: false,
   open: ({
     chainId,
@@ -2820,7 +2456,7 @@ var initialState7 = {
   close: () => {
     transferModal$.isOpen.set(false);
     transferModal$.state.set({
-      ...initialState7.state
+      ...initialState6.state
     });
     transferModal$.view.set("enterReceiverAddress");
     transferModal$.hash.set(void 0);
@@ -2835,13 +2471,13 @@ var initialState7 = {
   view: "enterReceiverAddress",
   hash: void 0
 };
-var transferModal$ = observable8(initialState7);
+var transferModal$ = observable7(initialState6);
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box17, Button as Button4, Text as Text14, TextInput } from "@0xsequence/design-system";
-import { observable as observable9 } from "@legendapp/state";
+import { Box as Box16, Button as Button4, Text as Text14, TextInput } from "@0xsequence/design-system";
+import { observable as observable8 } from "@legendapp/state";
 import { isAddress } from "viem";
-import { useAccount as useAccount4 } from "wagmi";
+import { useAccount as useAccount3 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/messages.ts
 var baseMessages = {
@@ -2917,200 +2553,543 @@ var useHandleTransfer = () => {
         transferModal$.view.set("enterReceiverAddress");
         callbacks?.onError?.(error);
       }
-    }
-  }
-  return { transfer };
-};
-var useHandleTransfer_default = useHandleTransfer;
-
-// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var EnterWalletAddressView = () => {
-  const { address } = useAccount4();
-  const { collectionAddress, collectibleId, chainId, collectionType } = transferModal$.state.get();
-  const $quantity = transferModal$.state.quantity;
-  const $invalidQuantity = observable9(false);
-  const isWalletAddressValid = isAddress(
-    transferModal$.state.receiverAddress.get()
-  );
-  const { data: tokenBalance } = useListBalances({
-    chainId,
-    contractAddress: collectionAddress,
-    tokenId: collectibleId,
-    accountAddress: address ?? "",
-    query: { enabled: !!address }
-  });
-  const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
-  const insufficientBalance = balanceAmount ? $quantity.get() > balanceAmount : true;
-  const { data: collection } = useCollection({
-    collectionAddress,
-    chainId
-  });
-  transferModal$.state.collectionType.set(
-    collection?.type
-  );
-  const { transfer } = useHandleTransfer_default();
-  function handleChangeWalletAddress(event) {
-    transferModal$.state.receiverAddress.set(event.target.value);
-  }
-  function handleChangeView() {
-    transfer();
-    transferModal$.view.set("followWalletInstructions");
-  }
-  return /* @__PURE__ */ jsxs17(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx24(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsxs17(Box17, { display: "flex", flexDirection: "column", gap: "3", children: [
-      /* @__PURE__ */ jsx24(
-        AlertMessage,
+    }
+  }
+  return { transfer };
+};
+var useHandleTransfer_default = useHandleTransfer;
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var EnterWalletAddressView = () => {
+  const { address } = useAccount3();
+  const { collectionAddress, collectibleId, chainId, collectionType } = transferModal$.state.get();
+  const $quantity = transferModal$.state.quantity;
+  const $invalidQuantity = observable8(false);
+  const isWalletAddressValid = isAddress(
+    transferModal$.state.receiverAddress.get()
+  );
+  const { data: tokenBalance } = useListBalances({
+    chainId,
+    contractAddress: collectionAddress,
+    tokenId: collectibleId,
+    accountAddress: address ?? "",
+    query: { enabled: !!address }
+  });
+  const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
+  const insufficientBalance = balanceAmount ? $quantity.get() > balanceAmount : true;
+  const { data: collection } = useCollection({
+    collectionAddress,
+    chainId
+  });
+  transferModal$.state.collectionType.set(
+    collection?.type
+  );
+  const { transfer } = useHandleTransfer_default();
+  function handleChangeWalletAddress(event) {
+    transferModal$.state.receiverAddress.set(event.target.value);
+  }
+  function handleChangeView() {
+    transfer();
+    transferModal$.view.set("followWalletInstructions");
+  }
+  return /* @__PURE__ */ jsxs16(Box16, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx23(Text14, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsxs16(Box16, { display: "flex", flexDirection: "column", gap: "3", children: [
+      /* @__PURE__ */ jsx23(
+        AlertMessage,
+        {
+          message: getMessage("enterReceiverAddress"),
+          type: "warning"
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        TextInput,
+        {
+          label: "Wallet address",
+          labelLocation: "top",
+          value: transferModal$.state.receiverAddress.get(),
+          onChange: handleChangeWalletAddress,
+          name: "walletAddress",
+          placeholder: "Enter wallet address of recipient"
+        }
+      ),
+      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs16(Fragment2, { children: [
+        /* @__PURE__ */ jsx23(
+          QuantityInput,
+          {
+            $quantity,
+            $invalidQuantity,
+            decimals: collection?.decimals || 0,
+            maxQuantity: balanceAmount
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          Text14,
+          {
+            color: insufficientBalance ? "negative" : "text50",
+            fontSize: "small",
+            fontWeight: "medium",
+            fontFamily: "body",
+            children: `You have ${balanceAmount} of this item`
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      Button4,
+      {
+        onClick: handleChangeView,
+        disabled: !isWalletAddressValid || insufficientBalance || !$quantity.get(),
+        title: "Transfer",
+        label: "Transfer",
+        variant: "primary",
+        shape: "square",
+        size: "sm",
+        justifySelf: "flex-end",
+        paddingX: "10"
+      }
+    )
+  ] });
+};
+var enterWalletAddress_default = EnterWalletAddressView;
+
+// src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
+import { Box as Box17, Button as Button5, Text as Text15 } from "@0xsequence/design-system";
+import { observer as observer11 } from "@legendapp/state/react";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var FollowWalletInstructionsView = observer11(() => {
+  return /* @__PURE__ */ jsxs17(Box17, { display: "grid", gap: "6", flexGrow: "1", children: [
+    /* @__PURE__ */ jsx24(Text15, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
+    /* @__PURE__ */ jsx24(Box17, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx24(
+      AlertMessage,
+      {
+        message: getMessage("followWalletInstructions"),
+        type: "info"
+      }
+    ) }),
+    /* @__PURE__ */ jsx24(
+      Button5,
+      {
+        disabled: true,
+        title: "Transfer",
+        label: "Transfer",
+        variant: "primary",
+        shape: "square",
+        size: "sm",
+        justifySelf: "flex-end",
+        paddingX: "10"
+      }
+    )
+  ] });
+});
+var followWalletInstructions_default = FollowWalletInstructionsView;
+
+// src/react/ui/modals/TransferModal/index.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var useTransferModal = () => {
+  const { chainId: accountChainId } = useAccount4();
+  const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  const openModal = (args) => {
+    transferModal$.open(args);
+  };
+  const handleShowModal = (args) => {
+    const isSameChain = accountChainId === Number(args.chainId);
+    if (!isSameChain) {
+      showSwitchNetworkModal({
+        chainIdToSwitchTo: Number(args.chainId),
+        onSuccess: () => openModal(args)
+      });
+      return;
+    }
+    openModal(args);
+  };
+  return {
+    show: handleShowModal,
+    close: () => transferModal$.close(),
+    onError: (callbacks) => {
+      transferModal$.state.set({
+        ...transferModal$.state.get(),
+        callbacks
+      });
+    },
+    onSuccess: (callbacks) => {
+      transferModal$.state.set({
+        ...transferModal$.state.get(),
+        callbacks
+      });
+    }
+  };
+};
+var TransferModal = () => {
+  return /* @__PURE__ */ jsx25(Show4, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx25(Modal4, {}) });
+};
+var Modal4 = () => {
+  return /* @__PURE__ */ jsx25(ModalContent, {});
+};
+var ModalContent = observer12(() => {
+  return /* @__PURE__ */ jsx25(Root4, { open: true, children: /* @__PURE__ */ jsxs18(Portal4, { children: [
+    /* @__PURE__ */ jsx25(Overlay3, { className: dialogOverlay2 }),
+    /* @__PURE__ */ jsxs18(Content4, { 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 }) })
+    ] })
+  ] }) });
+});
+var TransactionModalView = observer12(() => {
+  const { view } = transferModal$.get();
+  switch (view) {
+    case "enterReceiverAddress":
+      return /* @__PURE__ */ jsx25(enterWalletAddress_default, {});
+    case "followWalletInstructions":
+      return /* @__PURE__ */ jsx25(followWalletInstructions_default, {});
+    default:
+      return null;
+  }
+});
+
+// src/react/ui/modals/CreateListingModal/Modal.tsx
+import { Box as Box18 } from "@0xsequence/design-system";
+import { Show as Show5, observer as observer13 } from "@legendapp/state/react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
+import { parseUnits as parseUnits5 } from "viem";
+import { useAccount as useAccount5 } from "wagmi";
+
+// src/react/hooks/useCreateListing.tsx
+import { useCallback as useCallback4, useState as useState11 } from "react";
+var useCreateListing = ({
+  onSuccess,
+  onError,
+  onTransactionSent,
+  onApprovalSuccess,
+  enabled,
+  ...config
+}) => {
+  const [isLoading, setIsLoading] = useState11(false);
+  const [steps, setSteps] = useState11(null);
+  const [executionState, setExecutionState] = useState11(null);
+  const machineConfig = {
+    ...config,
+    type: "LISTING" /* LISTING */
+  };
+  const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+    config: machineConfig,
+    enabled,
+    onSuccess: (hash) => {
+      setExecutionState(null);
+      onSuccess?.(hash);
+    },
+    onError: (error) => {
+      setExecutionState(null);
+      onError?.(error);
+    },
+    onTransactionSent,
+    onApprovalSuccess: (hash) => {
+      setExecutionState(null);
+      onApprovalSuccess?.(hash);
+    }
+  });
+  const loadSteps = useCallback4(
+    async (props) => {
+      if (!machine) return;
+      setIsLoading(true);
+      const generatedSteps = await machine.getTransactionSteps(props);
+      if (!generatedSteps) {
+        setIsLoading(false);
+        return;
+      }
+      setSteps({
+        ...generatedSteps,
+        approval: {
+          ...generatedSteps.approval,
+          isExecuting: executionState === "approval"
+        },
+        transaction: {
+          ...generatedSteps.transaction,
+          isExecuting: executionState === "listing"
+        }
+      });
+      setIsLoading(false);
+    },
+    [machine, executionState]
+  );
+  const handleStepExecution = useCallback4(
+    async (type, execute) => {
+      if (!type) return;
+      setExecutionState(type);
+      try {
+        await execute();
+      } catch (error) {
+        setExecutionState(null);
+        throw error;
+      }
+    },
+    []
+  );
+  return {
+    createListing: (props) => machine?.start(props),
+    getListingSteps: (props) => ({
+      isLoading,
+      steps: steps ? {
+        ...steps,
+        approval: {
+          ...steps.approval,
+          isExecuting: executionState === "approval",
+          execute: () => handleStepExecution("approval", () => steps.approval.execute())
+        },
+        transaction: {
+          ...steps.transaction,
+          isExecuting: executionState === "listing",
+          execute: () => handleStepExecution(
+            "listing",
+            () => steps.transaction.execute()
+          )
+        }
+      } : null,
+      refreshSteps: () => loadSteps(props)
+    }),
+    isLoading: isMachineLoading
+  };
+};
+
+// src/react/ui/modals/CreateListingModal/store.ts
+import { observable as observable9 } from "@legendapp/state";
+import { addDays as addDays3 } from "date-fns/addDays";
+var initialState7 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  collectibleId: "",
+  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  collectionName: "",
+  collectionType: void 0,
+  listingPrice: {
+    // to see if approval is needed when modal opens
+    amountRaw: "1",
+    currency: {}
+  },
+  quantity: "1",
+  invalidQuantity: false,
+  expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
+  callbacks: void 0
+};
+var actions2 = {
+  open: (args) => {
+    createListingModal$.collectionAddress.set(args.collectionAddress);
+    createListingModal$.chainId.set(args.chainId);
+    createListingModal$.collectibleId.set(args.collectibleId);
+    createListingModal$.orderbookKind.set(args.orderbookKind);
+    createListingModal$.callbacks.set(args.callbacks);
+    createListingModal$.isOpen.set(true);
+  },
+  close: () => {
+    createListingModal$.isOpen.set(false);
+    createListingModal$.set({ ...initialState7, ...actions2 });
+  }
+};
+var createListingModal$ = observable9({
+  ...initialState7,
+  ...actions2
+});
+
+// src/react/ui/modals/CreateListingModal/Modal.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var CreateListingModal = () => {
+  const { show: showTransactionStatusModal } = useTransactionStatusModal();
+  return /* @__PURE__ */ jsx26(Show5, { if: createListingModal$.isOpen, children: () => /* @__PURE__ */ jsx26(Modal5, { showTransactionStatusModal }) });
+};
+var Modal5 = observer13(
+  ({
+    showTransactionStatusModal
+  }) => {
+    const state = createListingModal$.get();
+    const {
+      collectionAddress,
+      chainId,
+      listingPrice,
+      collectibleId,
+      orderbookKind,
+      callbacks
+    } = state;
+    const currencyAddress = listingPrice.currency.contractAddress;
+    const {
+      data: collectible,
+      isLoading: collectableIsLoading,
+      isError: collectableIsError
+    } = useCollectible({
+      chainId,
+      collectionAddress,
+      collectibleId
+    });
+    const {
+      data: collection,
+      isLoading: collectionIsLoading,
+      isError: collectionIsError
+    } = useCollection({
+      chainId,
+      collectionAddress
+    });
+    const [approvalExecutedSuccess, setApprovalExecutedSuccess] = useState12(false);
+    const { address } = useAccount5();
+    const { data: balance } = useBalanceOfCollectible({
+      chainId,
+      collectionAddress,
+      collectableId: collectibleId,
+      userAddress: address ?? void 0
+    });
+    const { getListingSteps, isLoading: machineLoading } = useCreateListing({
+      orderbookKind,
+      chainId,
+      collectionAddress,
+      enabled: createListingModal$.isOpen.get(),
+      onApprovalSuccess: () => setApprovalExecutedSuccess(true),
+      onTransactionSent: (hash, orderId) => {
+        if (!hash && !orderId) return;
+        showTransactionStatusModal({
+          hash,
+          orderId,
+          collectionAddress,
+          chainId,
+          price: createListingModal$.listingPrice.get(),
+          collectibleId,
+          type: "LISTING" /* LISTING */,
+          queriesToInvalidate: collectableKeys.all,
+          callbacks
+        });
+        createListingModal$.close();
+      }
+    });
+    const { isLoading, steps, refreshSteps } = getListingSteps({
+      contractType: collection?.type,
+      listing: {
+        tokenId: collectibleId,
+        quantity: parseUnits5(
+          createListingModal$.quantity.get(),
+          collectible?.decimals || 0
+        ).toString(),
+        expiry: dateToUnixTime(createListingModal$.expiry.get()),
+        currencyAddress: listingPrice.currency.contractAddress,
+        pricePerToken: listingPrice.amountRaw
+      }
+    });
+    useEffect8(() => {
+      if (!currencyAddress) return;
+      refreshSteps();
+    }, [currencyAddress]);
+    const handleStepExecution = async (execute) => {
+      if (!execute) return;
+      try {
+        await refreshSteps();
+        await execute();
+      } catch (error) {
+        if (callbacks?.onError) {
+          callbacks.onError(error);
+        } else {
+          console.debug("onError callback not provided:", error);
+        }
+      }
+    };
+    if (collectableIsLoading || collectionIsLoading || machineLoading) {
+      return /* @__PURE__ */ jsx26(
+        LoadingModal,
         {
-          message: getMessage("enterReceiverAddress"),
-          type: "warning"
+          isOpen: createListingModal$.isOpen.get(),
+          chainId: Number(chainId),
+          onClose: createListingModal$.close,
+          title: "List item for sale"
         }
-      ),
-      /* @__PURE__ */ jsx24(
-        TextInput,
+      );
+    }
+    if (collectableIsError || collectionIsError) {
+      return /* @__PURE__ */ jsx26(
+        ErrorModal,
         {
-          label: "Wallet address",
-          labelLocation: "top",
-          value: transferModal$.state.receiverAddress.get(),
-          onChange: handleChangeWalletAddress,
-          name: "walletAddress",
-          placeholder: "Enter wallet address of recipient"
+          isOpen: createListingModal$.isOpen.get(),
+          chainId: Number(chainId),
+          onClose: createListingModal$.close,
+          title: "List item for sale"
         }
-      ),
-      collectionType === "ERC1155" /* ERC1155 */ && balanceAmount && /* @__PURE__ */ jsxs17(Fragment2, { children: [
-        /* @__PURE__ */ jsx24(
-          QuantityInput,
-          {
-            $quantity,
-            $invalidQuantity,
-            decimals: collection?.decimals || 0,
-            maxQuantity: balanceAmount
-          }
-        ),
-        /* @__PURE__ */ jsx24(
-          Text14,
-          {
-            color: insufficientBalance ? "negative" : "text50",
-            fontSize: "small",
-            fontWeight: "medium",
-            fontFamily: "body",
-            children: `You have ${balanceAmount} of this item`
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx24(
-      Button4,
+      );
+    }
+    const approvalNeeded = steps?.approval.isPending;
+    const ctas = [
       {
-        onClick: handleChangeView,
-        disabled: !isWalletAddressValid || insufficientBalance || !$quantity.get(),
-        title: "Transfer",
-        label: "Transfer",
-        variant: "primary",
-        shape: "square",
-        size: "sm",
-        justifySelf: "flex-end",
-        paddingX: "10"
-      }
-    )
-  ] });
-};
-var enterWalletAddress_default = EnterWalletAddressView;
-
-// src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx
-import { Box as Box18, Button as Button5, Text as Text15 } from "@0xsequence/design-system";
-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(Box18, { display: "grid", gap: "6", flexGrow: "1", children: [
-    /* @__PURE__ */ jsx25(Text15, { color: "white", fontSize: "large", fontWeight: "bold", fontFamily: "body", children: "Transfer your item" }),
-    /* @__PURE__ */ jsx25(Box18, { display: "flex", flexDirection: "column", gap: "3", children: /* @__PURE__ */ jsx25(
-      AlertMessage,
+        label: "Approve TOKEN",
+        onClick: () => handleStepExecution(() => steps?.approval.execute()),
+        hidden: !approvalNeeded || approvalExecutedSuccess,
+        pending: steps?.approval.isExecuting || isLoading,
+        variant: "glass",
+        disabled: createListingModal$.invalidQuantity.get() || isLoading || listingPrice.amountRaw === "0" || steps?.transaction.isExecuting
+      },
       {
-        message: getMessage("followWalletInstructions"),
-        type: "info"
+        label: "List item for sale",
+        onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+        pending: steps?.transaction.isExecuting || isLoading,
+        disabled: !approvalExecutedSuccess && approvalNeeded || listingPrice.amountRaw === "0" || isLoading || createListingModal$.invalidQuantity.get()
       }
-    ) }),
-    /* @__PURE__ */ jsx25(
-      Button5,
+    ];
+    return /* @__PURE__ */ jsxs19(
+      ActionModal,
       {
-        disabled: true,
-        title: "Transfer",
-        label: "Transfer",
-        variant: "primary",
-        shape: "square",
-        size: "sm",
-        justifySelf: "flex-end",
-        paddingX: "10"
+        isOpen: createListingModal$.isOpen.get(),
+        chainId: Number(chainId),
+        onClose: () => createListingModal$.close(),
+        title: "List item for sale",
+        ctas,
+        children: [
+          /* @__PURE__ */ jsx26(
+            TokenPreview,
+            {
+              collectionName: collection?.name,
+              collectionAddress,
+              collectibleId,
+              chainId
+            }
+          ),
+          /* @__PURE__ */ jsxs19(Box18, { display: "flex", flexDirection: "column", width: "full", gap: "1", children: [
+            /* @__PURE__ */ jsx26(
+              priceInput_default,
+              {
+                chainId,
+                collectionAddress,
+                $listingPrice: createListingModal$.listingPrice
+              }
+            ),
+            listingPrice.amountRaw !== "0" && /* @__PURE__ */ jsx26(
+              FloorPriceText,
+              {
+                tokenId: collectibleId,
+                chainId,
+                collectionAddress,
+                price: listingPrice
+              }
+            )
+          ] }),
+          collection?.type === "ERC1155" && balance && /* @__PURE__ */ jsx26(
+            QuantityInput,
+            {
+              $quantity: createListingModal$.quantity,
+              $invalidQuantity: createListingModal$.invalidQuantity,
+              decimals: collectible?.decimals || 0,
+              maxQuantity: balance?.balance
+            }
+          ),
+          /* @__PURE__ */ jsx26(expirationDateSelect_default, { $date: createListingModal$.expiry }),
+          /* @__PURE__ */ jsx26(
+            TransactionDetails,
+            {
+              collectibleId,
+              collectionAddress,
+              chainId,
+              price: createListingModal$.listingPrice.get(),
+              currencyImageUrl: listingPrice.currency.imageUrl
+            }
+          )
+        ]
       }
-    )
-  ] });
-});
-var followWalletInstructions_default = FollowWalletInstructionsView;
-
-// src/react/ui/modals/TransferModal/index.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var useTransferModal = () => {
-  const { chainId: accountChainId } = useAccount5();
-  const { show: showSwitchNetworkModal } = useSwitchChainModal();
-  const openModal = (args) => {
-    transferModal$.open(args);
-  };
-  const handleShowModal = (args) => {
-    const isSameChain = accountChainId === Number(args.chainId);
-    if (!isSameChain) {
-      showSwitchNetworkModal({
-        chainIdToSwitchTo: Number(args.chainId),
-        onSuccess: () => openModal(args)
-      });
-      return;
-    }
-    openModal(args);
-  };
-  return {
-    show: handleShowModal,
-    close: () => transferModal$.close(),
-    onError: (callbacks) => {
-      transferModal$.state.set({
-        ...transferModal$.state.get(),
-        callbacks
-      });
-    },
-    onSuccess: (callbacks) => {
-      transferModal$.state.set({
-        ...transferModal$.state.get(),
-        callbacks
-      });
-    }
-  };
-};
-var TransferModal = () => {
-  return /* @__PURE__ */ jsx26(Show5, { if: transferModal$.isOpen, children: /* @__PURE__ */ jsx26(Modal3, {}) });
-};
-var Modal3 = () => {
-  return /* @__PURE__ */ jsx26(ModalContent3, {});
-};
-var ModalContent3 = observer13(() => {
-  return /* @__PURE__ */ jsx26(Root4, { open: true, children: /* @__PURE__ */ jsxs19(Portal4, { children: [
-    /* @__PURE__ */ jsx26(Overlay3, { className: dialogOverlay2 }),
-    /* @__PURE__ */ jsxs19(Content4, { 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 }) })
-    ] })
-  ] }) });
-});
-var TransactionModalView = observer13(() => {
-  const { view } = transferModal$.get();
-  switch (view) {
-    case "enterReceiverAddress":
-      return /* @__PURE__ */ jsx26(enterWalletAddress_default, {});
-    case "followWalletInstructions":
-      return /* @__PURE__ */ jsx26(followWalletInstructions_default, {});
-    default:
-      return null;
+    );
   }
-});
+);
 
 // src/react/ui/modals/modal-provider.tsx
 import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -3128,8 +3107,30 @@ var ModalProvider = observer14(() => {
   ] });
 });
 
+// src/react/ui/modals/CreateListingModal/index.tsx
+var useCreateListingModal = (callbacks) => {
+  return {
+    show: (args) => createListingModal$.open({ ...args, callbacks }),
+    close: () => createListingModal$.close()
+  };
+};
+
+// src/react/ui/modals/MakeOfferModal/index.tsx
+var useMakeOfferModal = (callbacks) => ({
+  show: (args) => makeOfferModal$.open({ ...args, callbacks }),
+  close: () => makeOfferModal$.close()
+});
+
+// src/react/ui/modals/SellModal/index.tsx
+var useSellModal = (callbacks) => {
+  return {
+    show: (args) => sellModal$.open({ ...args, callbacks }),
+    close: () => sellModal$.close()
+  };
+};
+
 // src/react/ui/components/collectible-card/CollectibleCard.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { Box as Box22, IconButton as IconButton6, Skeleton as Skeleton8 } from "@0xsequence/design-system";
 import { useAccount as useAccount7 } from "wagmi";
 
@@ -3497,7 +3498,7 @@ function CollectibleCard({
 }) {
   const { address: accountAddress } = useAccount7();
   const collectibleMetadata = lowestListing?.metadata;
-  const [imageLoadingError, setImageLoadingError] = useState12(false);
+  const [imageLoadingError, setImageLoadingError] = useState13(false);
   const { data: highestOffer, isLoading: highestOfferLoading } = useHighestOffer({
     chainId: String(chainId),
     collectionAddress,
@@ -3610,12 +3611,12 @@ function CollectibleCard({
 
 export {
   useBuyModal,
-  useCreateListingModal,
-  useMakeOfferModal,
-  useSellModal,
   useSuccessfulPurchaseModal,
   useTransferModal,
   ModalProvider,
+  useCreateListingModal,
+  useMakeOfferModal,
+  useSellModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-IOTKCWOB.js.map
+//# sourceMappingURL=chunk-MTFS5SED.js.map