@0xsequence/marketplace-sdk 0.0.1 → 0.1.0

package/dist/{chunk-SM7V6ZWI.js → chunk-GNB736ZE.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-TZGLKJRF.js";
 import {
   ActionModal
-} from "./chunk-4PFMUVE4.js";
+} from "./chunk-SNOEEUPZ.js";
 import {
   alertMessageBox,
   alertMessageBoxVariants,
@@ -26,6 +26,7 @@ import {
   dialogOverlay,
   dialogOverlay2,
   dialogOverlay3,
+  priceInputCurrencyImage,
   priceInputWrapper,
   quantityInputWrapper,
   rangeSelect,
@@ -33,24 +34,28 @@ import {
   switchChainModalContent,
   tokenPreview,
   transferModalContent
-} from "./chunk-QOJXWHRZ.js";
+} from "./chunk-LFQB477Y.js";
 import {
+  stepSchema,
   useCollectible,
   useCollection,
   useConfig,
   useCurrencies,
   useGenerateListingTransaction,
   useGenerateOfferTransaction,
+  useListBalances,
   useLowestListing,
   useMarketplaceConfig,
   useRoyaltyPercentage,
-  useTokenBalances,
   useTransferTokens
-} from "./chunk-ZE2LNX65.js";
+} from "./chunk-ITJEOCDV.js";
 import {
   calculatePriceDifferencePercentage,
   truncateMiddle
 } from "./chunk-6S4FYXP6.js";
+import {
+  ChainIdSchema
+} from "./chunk-7CL54NCX.js";
 import {
   getMarketplaceClient
 } from "./chunk-HGBEC3WX.js";
@@ -212,7 +217,74 @@ var SwitchChainModal = observer(() => {
 var switchChainModal_default = SwitchChainModal;
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
+import {
+  CloseIcon as CloseIcon2,
+  IconButton as IconButton2,
+  Skeleton,
+  Text as Text6
+} from "@0xsequence/design-system";
 import { observer as observer3 } from "@legendapp/state/react";
+import { Close as Close2, Content as Content2, Overlay as Overlay2, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
+import { useTransactionReceipt } from "wagmi";
+
+// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
+import { Box as Box2, Spinner as Spinner2, Text as Text3 } from "@0xsequence/design-system";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TransactionFooter({
+  transactionHash,
+  isConfirming,
+  isConfirmed,
+  isFailed
+}) {
+  const icon = isConfirming && /* @__PURE__ */ jsx3(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx3(PositiveCircleIcon_default, { size: "md" });
+  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
+  return /* @__PURE__ */ jsxs3(Box2, { display: "flex", alignItems: "center", children: [
+    icon,
+    /* @__PURE__ */ jsx3(Text3, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
+    /* @__PURE__ */ jsx3(
+      Text3,
+      {
+        color: "polygonLight",
+        flexGrow: "1",
+        textAlign: "right",
+        fontSize: "normal",
+        fontWeight: "medium",
+        marginLeft: "2",
+        children: truncateMiddle(transactionHash, 4, 4)
+      }
+    )
+  ] });
+}
+
+// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
+import { Box as Box4, Image, NetworkImage, Text as Text5 } from "@0xsequence/design-system";
+import { observer as observer2 } from "@legendapp/state/react";
+import { formatUnits } from "viem";
+
+// src/react/ui/modals/_internal/components/timeAgo/index.tsx
+import { Box as Box3, Text as Text4 } from "@0xsequence/design-system";
+import { formatDistanceToNow } from "date-fns";
+import { useState, useEffect } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function TimeAgo({ date }) {
+  const [timeAgo, setTimeAgo] = useState("");
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(formatDistanceToNow(date));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [date]);
+  return /* @__PURE__ */ jsx4(
+    Box3,
+    {
+      flexGrow: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */ jsx4(Text4, { color: "text50", fontSize: "small", children: timeAgo })
+    }
+  );
+}
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/store.ts
 import { observable as observable2 } from "@legendapp/state";
@@ -261,53 +333,6 @@ var initialState2 = {
 };
 var transactionStatusModal$ = observable2(initialState2);
 
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { Close as Close2, Content as Content2, Overlay as Overlay2, Portal as Portal2, Root as Root2 } from "@radix-ui/react-dialog";
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
-var closeButton4 = "fyvr11lw fyvr1tc fyvr1mo";
-var dialogOverlay4 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
-var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
-
-// src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import {
-  CloseIcon as CloseIcon2,
-  IconButton as IconButton2,
-  Skeleton,
-  Text as Text6
-} from "@0xsequence/design-system";
-
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { Box as Box3, Image, NetworkImage, Text as Text4 } from "@0xsequence/design-system";
-
-// src/react/ui/modals/_internal/components/timeAgo/index.tsx
-import { Box as Box2, Text as Text3 } from "@0xsequence/design-system";
-import { formatDistanceToNow } from "date-fns";
-import { useState, useEffect } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function TimeAgo({ date }) {
-  const [timeAgo, setTimeAgo] = useState("");
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTimeAgo(formatDistanceToNow(date));
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [date]);
-  return /* @__PURE__ */ jsx3(
-    Box2,
-    {
-      flexGrow: "1",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      children: /* @__PURE__ */ jsx3(Text3, { color: "text50", fontSize: "small", children: timeAgo })
-    }
-  );
-}
-
-// src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { observer as observer2 } from "@legendapp/state/react";
-
 // src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx
 import { useMemo } from "react";
 
@@ -354,8 +379,7 @@ function useTransactionPreviewTitle(status, type) {
 }
 
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
-import { formatUnits } from "viem";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var TransactionPreview = observer2(
   ({
     price,
@@ -379,10 +403,10 @@ var TransactionPreview = observer2(
     const collectibleName = collectible.name;
     const collectionName = collection?.name;
     const priceFormatted = price ? formatUnits(BigInt(price.amountRaw), price.currency.decimals) : void 0;
-    return /* @__PURE__ */ jsxs3(Box3, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
-      /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", children: [
-        /* @__PURE__ */ jsx4(
-          Text4,
+    return /* @__PURE__ */ jsxs4(Box4, { padding: "3", background: "backgroundSecondary", borderRadius: "md", children: [
+      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx5(
+          Text5,
           {
             color: "text50",
             fontSize: "small",
@@ -391,11 +415,11 @@ var TransactionPreview = observer2(
             children: title
           }
         ),
-        /* @__PURE__ */ jsx4(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-        isConfirming && /* @__PURE__ */ jsx4(TimeAgo, { date: /* @__PURE__ */ new Date() })
+        /* @__PURE__ */ jsx5(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+        isConfirming && /* @__PURE__ */ jsx5(TimeAgo, { date: /* @__PURE__ */ new Date() })
       ] }),
-      /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", marginTop: "2", children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", marginTop: "2", children: [
+        /* @__PURE__ */ jsx5(
           Image,
           {
             src: collectibleImage,
@@ -406,21 +430,21 @@ var TransactionPreview = observer2(
             marginRight: "3"
           }
         ),
-        /* @__PURE__ */ jsxs3(
-          Box3,
+        /* @__PURE__ */ jsxs4(
+          Box4,
           {
             display: "flex",
             flexDirection: "column",
             alignItems: "flex-start",
             gap: "0.5",
             children: [
-              /* @__PURE__ */ jsx4(Text4, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
-              /* @__PURE__ */ jsx4(Text4, { color: "text100", fontSize: "small", children: collectionName })
+              /* @__PURE__ */ jsx5(Text5, { color: "text80", fontSize: "small", fontWeight: "medium", children: collectibleName }),
+              /* @__PURE__ */ jsx5(Text5, { color: "text100", fontSize: "small", children: collectionName })
             ]
           }
         ),
-        price && /* @__PURE__ */ jsxs3(
-          Box3,
+        price && /* @__PURE__ */ jsxs4(
+          Box4,
           {
             flexGrow: "1",
             display: "flex",
@@ -428,8 +452,8 @@ var TransactionPreview = observer2(
             justifyContent: "flex-end",
             gap: "1",
             children: [
-              /* @__PURE__ */ jsx4(NetworkImage, { chainId: Number(chainId), size: "xs" }),
-              /* @__PURE__ */ jsxs3(Text4, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
+              /* @__PURE__ */ jsx5(NetworkImage, { chainId: Number(chainId), size: "xs" }),
+              /* @__PURE__ */ jsxs4(Text5, { color: "text80", fontSize: "small", fontWeight: "medium", children: [
                 priceFormatted,
                 " ",
                 price.currency.symbol
@@ -443,37 +467,12 @@ var TransactionPreview = observer2(
 );
 var transactionPreview_default = TransactionPreview;
 
-// src/react/ui/modals/_internal/components/transaction-footer/index.tsx
-import { Box as Box4, Spinner as Spinner2, Text as Text5 } from "@0xsequence/design-system";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function TransactionFooter({
-  transactionHash,
-  isConfirming,
-  isConfirmed,
-  isFailed
-}) {
-  const icon = isConfirming && /* @__PURE__ */ jsx5(Spinner2, { size: "md" }) || isConfirmed && /* @__PURE__ */ jsx5(PositiveCircleIcon_default, { size: "md" });
-  const title = isConfirming && "Processing transaction" || isConfirmed && "Transaction complete" || isFailed && "Transaction failed";
-  return /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", children: [
-    icon,
-    /* @__PURE__ */ jsx5(Text5, { color: "text50", fontSize: "normal", fontWeight: "medium", marginLeft: "2", children: title }),
-    /* @__PURE__ */ jsx5(
-      Text5,
-      {
-        color: "polygonLight",
-        flexGrow: "1",
-        textAlign: "right",
-        fontSize: "normal",
-        fontWeight: "medium",
-        marginLeft: "2",
-        children: truncateMiddle(transactionHash, 4, 4)
-      }
-    )
-  ] });
-}
+// src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts
+var closeButton4 = "fyvr11lw fyvr1tc fyvr1mo";
+var dialogOverlay4 = "fyvr1m0 fyvr1o8 fyvr1qg fyvr1so fyvr11xl fyvr11m0 fyvr11rs";
+var transactionStatusModalContent = "modal_dialogContent_wide__1ypl6nt3 modal_dialogContentBase__1ypl6nt1 fyvr11hg fyvr11i4 fyvr11g4 fyvr11gs fyvr11l8 fyvr11wl fyvr11m0 fyvr11rs fyvr1vo fyvr1xs fyvr1zw fyvr1120 fyvr11lc fyvr11mc fyvr11cw";
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
-import { useTransactionReceipt } from "wagmi";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var useTransactionStatusModal = () => {
   return {
@@ -566,6 +565,7 @@ var AccountModal = observer4(function AccountModal2() {
 // src/react/ui/modals/CreateListingModal/index.tsx
 import { Box as Box12 } from "@0xsequence/design-system";
 import { Show, observer as observer8 } from "@legendapp/state/react";
+import { useAccount as useAccount4 } from "wagmi";
 
 // src/react/ui/modals/_internal/components/expirationDateSelect/index.tsx
 import { useState as useState2 } from "react";
@@ -804,11 +804,6 @@ function FloorPriceText({
   );
 }
 
-// src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { Box as Box8, NumericInput, TokenImage } from "@0xsequence/design-system";
-import { observer as observer7 } from "@legendapp/state/react";
-import { useState as useState4 } from "react";
-
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
 import { Box as Box7, Select as Select2, Skeleton as Skeleton2 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
@@ -858,29 +853,56 @@ var CurrencyOptionsSelect = observer6(function CurrencyOptionsSelect2({
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { parseUnits } from "viem";
+import { Box as Box8, NumericInput, TokenImage } from "@0xsequence/design-system";
+import { observer as observer7 } from "@legendapp/state/react";
+import { useState as useState4 } from "react";
+import { erc20Abi, formatUnits as formatUnits2, parseUnits } from "viem";
+import { useAccount as useAccount2, useReadContract } from "wagmi";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var PriceInput = observer7(function PriceInput2({
   chainId,
   collectionAddress,
   $listingPrice,
-  error
+  checkBalance
 }) {
-  const [inputPrice, setInputPrice] = useState4("");
+  const [balanceError, setBalanceError] = useState4("");
+  const { address: accountAddress } = useAccount2();
+  const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
+    address: $listingPrice.currency.contractAddress.get(),
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [accountAddress],
+    query: {
+      enabled: checkBalance?.enabled
+    }
+  });
+  const listingPriceAmountRaw = $listingPrice.amountRaw.get();
+  const currencyDecimals = $listingPrice.currency.decimals.get();
+  const checkInsufficientBalance = (priceAmountRaw) => {
+    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance || 0);
+    if (!checkBalance) return;
+    if (hasInsufficientBalance) {
+      setBalanceError("Insufficient balance");
+      checkBalance.callback(true);
+    } else {
+      setBalanceError("");
+      checkBalance.callback(false);
+    }
+  };
   const changeListingPrice = (value) => {
-    setInputPrice(value);
     const parsedAmount = parseUnits(
       value,
       Number($listingPrice.currency.decimals.get())
     );
     $listingPrice.amountRaw.set(parsedAmount.toString());
+    checkBalance && checkInsufficientBalance(parsedAmount.toString());
   };
   return /* @__PURE__ */ jsxs9(Box8, { className: priceInputWrapper, position: "relative", children: [
     /* @__PURE__ */ jsx13(
       Box8,
       {
+        className: priceInputCurrencyImage,
         position: "absolute",
-        bottom: "3",
         left: "2",
         display: "flex",
         alignItems: "center",
@@ -904,12 +926,15 @@ var PriceInput = observer7(function PriceInput2({
           }
         ),
         numeric: true,
-        value: inputPrice,
+        value: listingPriceAmountRaw ? formatUnits2(
+          BigInt(listingPriceAmountRaw),
+          Number(currencyDecimals)
+        ) : "",
         onChange: (event) => changeListingPrice(event.target.value),
         width: "full"
       }
     ),
-    error && /* @__PURE__ */ jsx13(Box8, { color: "negative", fontSize: "small", children: error })
+    balanceError && /* @__PURE__ */ jsx13(Box8, { color: "negative", fontSize: "small", children: balanceError })
   ] });
 });
 var priceInput_default = PriceInput;
@@ -1084,7 +1109,7 @@ function TokenPreview({
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
 import { Box as Box11, NetworkImage as NetworkImage2, Skeleton as Skeleton4, Text as Text11 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
+import { formatUnits as formatUnits3 } from "viem";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
@@ -1103,7 +1128,7 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits2(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
   if (royaltyPercentage !== void 0 && formattedAmount) {
     formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royaltyPercentage) / 100).toString();
   }
@@ -1136,7 +1161,7 @@ function TransactionDetails({
 import { observable as observable4, when } from "@legendapp/state";
 import { useMount, useSelector } from "@legendapp/state/react";
 import { addDays as addDays2 } from "date-fns/addDays";
-import { useAccount as useAccount2, useSendTransaction } from "wagmi";
+import { useAccount as useAccount3, useSendTransaction } from "wagmi";
 
 // src/react/ui/modals/CreateListingModal/_utils/getCreateListingTransactionTitleMessage.ts
 var getCreateListingTransactionTitle = (params) => {
@@ -1229,7 +1254,7 @@ var useHydrate = () => {
     chainId,
     onSuccess: onListingSuccess
   });
-  const { connector, address: userAddress } = useAccount2();
+  const { connector, address: userAddress } = useAccount3();
   useMount(() => {
     const setSteps = async () => {
       const createListingTransactionSteps = await generateListingTransactionAsync({
@@ -1284,7 +1309,7 @@ var useTokenApprovalHandler = (chainId) => {
 };
 var useCreateListingHandler = (chainId) => {
   const { collectibleId, collectionAddress } = createListingModal$.state.get();
-  const { connector, address } = useAccount2();
+  const { connector, address } = useAccount3();
   const {
     generateListingTransactionAsync,
     isPending: generateListingTransactionPending,
@@ -1298,7 +1323,7 @@ var useCreateListingHandler = (chainId) => {
   const {
     onUnknownError,
     onSuccess
-  } = createListingModal$.state.get().messages?.sellCollectible || {};
+  } = createListingModal$.state.get().messages?.createListing || {};
   const { sendTransactionAsync, isPending: sendTransactionPending } = useSendTransaction();
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   createListingModal$.steps.createListing.set({
@@ -1377,10 +1402,9 @@ var useShowTransactionStatusModal = () => {
 };
 
 // src/react/ui/modals/CreateListingModal/index.tsx
-import { useAccount as useAccount3 } from "wagmi";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var useCreateListingModal = () => {
-  const { chainId: accountChainId } = useAccount3();
+  const { chainId: accountChainId } = useAccount4();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
   const openModal = (args) => {
     createListingModal$.open(args);
@@ -1496,15 +1520,14 @@ var ModalContent = observer8(() => {
 
 // src/react/ui/modals/MakeOfferModal/index.tsx
 import { Show as Show2, observer as observer9 } from "@legendapp/state/react";
-import { erc20Abi, parseUnits as parseUnits3 } from "viem";
-import { useAccount as useAccount5, useReadContract } from "wagmi";
+import { useState as useState5 } from "react";
+import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/modals/MakeOfferModal/_store.ts
 import { observable as observable5, when as when2 } from "@legendapp/state";
 import { useMount as useMount2, useSelector as useSelector2 } from "@legendapp/state/react";
 import { addDays as addDays3 } from "date-fns/addDays";
-import { parseUnits as parseUnits2 } from "viem";
-import { useAccount as useAccount4, useSendTransaction as useSendTransaction2 } from "wagmi";
+import { useAccount as useAccount5, useSendTransaction as useSendTransaction2 } from "wagmi";
 
 // src/react/ui/modals/MakeOfferModal/_utils/getMakeOfferTransactionTitleMessage.ts
 var getMakeOfferTransactionTitle = (params) => {
@@ -1599,7 +1622,7 @@ var useHydrate2 = () => {
     chainId,
     onSuccess: onOfferSuccess
   });
-  const { connector, address: userAddress } = useAccount4();
+  const { connector, address: userAddress } = useAccount5();
   useMount2(() => {
     const setSteps = async () => {
       const makeOfferTransactionData = await generateOfferTransactionAsync({
@@ -1654,7 +1677,7 @@ var useTokenApprovalHandler2 = (chainId) => {
 };
 var useCreateOfferHandler = (chainId) => {
   const { collectibleId, collectionAddress } = makeOfferModal$.state.get();
-  const { connector, address } = useAccount4();
+  const { connector, address } = useAccount5();
   const {
     generateOfferTransactionAsync,
     isPending: generateOfferTransactionPending,
@@ -1686,10 +1709,7 @@ var useCreateOfferHandler = (chainId) => {
           quantity: makeOfferModal$.state.quantity.get(),
           expiry: makeOfferModal$.state.expiry.get(),
           currencyAddress: makeOfferModal$.state.offerPrice.currency.contractAddress.get(),
-          pricePerToken: parseUnits2(
-            makeOfferModal$.state.offerPrice.amountRaw.get(),
-            makeOfferModal$.state.offerPrice.currency.decimals.get()
-          ).toString()
+          pricePerToken: makeOfferModal$.state.offerPrice.amountRaw.get()
         }
       }).then(async (steps) => {
         const step = steps.find((s) => s.id === "createOffer" /* createOffer */);
@@ -1727,7 +1747,7 @@ var useCreateOfferHandler = (chainId) => {
 // src/react/ui/modals/MakeOfferModal/index.tsx
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var useMakeOfferModal = () => {
-  const { chainId: accountChainId } = useAccount5();
+  const { chainId: accountChainId } = useAccount6();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
   const openModal = (args) => {
     makeOfferModal$.open(args);
@@ -1757,6 +1777,7 @@ var Modal3 = () => {
   return /* @__PURE__ */ jsx18(ModalContent2, {});
 };
 var ModalContent2 = observer9(() => {
+  const [insufficientBalance, setInsufficientBalance] = useState5(false);
   const {
     chainId,
     collectionAddress,
@@ -1766,17 +1787,6 @@ var ModalContent2 = observer9(() => {
     offerPrice
   } = makeOfferModal$.state.get();
   const { steps } = makeOfferModal$.get();
-  const { address: accountAddress } = useAccount5();
-  const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
-    address: makeOfferModal$.state.offerPrice.currency.contractAddress.get(),
-    abi: erc20Abi,
-    functionName: "balanceOf",
-    args: [accountAddress]
-  });
-  let balanceError = "";
-  if (isBalanceSuccess && parseUnits3(offerPrice.amountRaw, offerPrice.currency.decimals) > (balance || 0)) {
-    balanceError = "Insufficient balance";
-  }
   const ctas = [
     {
       label: "Approve TOKEN",
@@ -1789,7 +1799,7 @@ var ModalContent2 = observer9(() => {
       label: "Make offer",
       onClick: steps.createOffer.execute,
       pending: steps.createOffer.pending,
-      disabled: steps.tokenApproval.isNeeded() || offerPrice.amountRaw === "0"
+      disabled: steps.tokenApproval.isNeeded() || offerPrice.amountRaw === "0" || insufficientBalance
     }
   ];
   return /* @__PURE__ */ jsxs14(
@@ -1817,7 +1827,10 @@ var ModalContent2 = observer9(() => {
             chainId,
             collectionAddress,
             $listingPrice: makeOfferModal$.state.offerPrice,
-            error: balanceError
+            checkBalance: {
+              enabled: true,
+              callback: (state) => setInsufficientBalance(state)
+            }
           }
         ),
         collectionType === "ERC1155" /* ERC1155 */ && /* @__PURE__ */ jsx18(
@@ -1844,34 +1857,28 @@ var ModalContent2 = observer9(() => {
   );
 });
 
-// src/react/ui/modals/SellModal/_store.ts
-import { observable as observable6, when as when3 } from "@legendapp/state";
-import { useMount as useMount3, useSelector as useSelector3 } from "@legendapp/state/react";
-
-// src/react/hooks/useGenerateSellTransaction.tsx
-import { useMutation } from "@tanstack/react-query";
-var generateSellTransaction = async (args, config, chainId) => {
-  console.log("generateSellTransaction");
-  console.log(args);
-  console.log(chainId);
-  const marketplaceClient = getMarketplaceClient(chainId, config);
-  return marketplaceClient.generateSellTransaction(args);
-};
-var useGenerateSellTransaction = (params) => {
-  const config = useConfig();
-  const { mutate, mutateAsync, ...result } = useMutation({
-    onSuccess: params.onSuccess,
-    mutationFn: (args) => generateSellTransaction(args, config, params.chainId)
-  });
-  return {
-    ...result,
-    generateSellTransaction: mutate,
-    generateSellTransactionAsync: mutateAsync
-  };
-};
+// src/react/ui/modals/SellModal/index.tsx
+import { Show as Show3, observer as observer10 } from "@legendapp/state/react";
+import { useAccount as useAccount8 } from "wagmi";
 
-// src/react/ui/modals/SellModal/_store.ts
-import { useAccount as useAccount6, useSendTransaction as useSendTransaction3 } from "wagmi";
+// src/react/ui/modals/_internal/components/transactionHeader/index.tsx
+import { Box as Box13, NetworkImage as NetworkImage3, Skeleton as Skeleton5, Text as Text12 } from "@0xsequence/design-system";
+import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function TransactionHeader({
+  title,
+  chainId,
+  date
+}) {
+  return /* @__PURE__ */ jsxs15(Box13, { display: "flex", alignItems: "center", width: "full", children: [
+    /* @__PURE__ */ jsx19(Text12, { fontSize: "small", fontWeight: "medium", color: "text80", marginRight: "1", children: title }),
+    /* @__PURE__ */ jsx19(NetworkImage3, { size: "xs", chainId }),
+    date && /* @__PURE__ */ jsxs15(Text12, { fontSize: "small", color: "text50", flexGrow: "1", textAlign: "right", children: [
+      formatDistanceToNow2(date),
+      " ago"
+    ] }) || /* @__PURE__ */ jsx19(Skeleton5, { width: "8", height: "4" })
+  ] });
+}
 
 // src/react/ui/modals/SellModal/_utils/getSellTransactionTitleMessage.ts
 var getSellTransactionTitle = (params) => {
@@ -1894,6 +1901,36 @@ var getSellTransactionMessage = (params, collectibleName) => {
 };
 
 // src/react/ui/modals/SellModal/_store.ts
+import { observable as observable6, when as when3 } from "@legendapp/state";
+import { useMount as useMount3, useSelector as useSelector3 } from "@legendapp/state/react";
+
+// src/react/hooks/useGenerateSellTransaction.tsx
+import { useMutation } from "@tanstack/react-query";
+import { z } from "zod";
+var UserGeneratSellTransactionArgsSchema = z.object({
+  chainId: ChainIdSchema.pipe(z.coerce.string()),
+  onSuccess: z.function().args(stepSchema.array().optional()).optional()
+});
+var generateSellTransaction = async (args, config, chainId) => {
+  const parsedChainId = ChainIdSchema.pipe(z.coerce.string()).parse(chainId);
+  const marketplaceClient = getMarketplaceClient(parsedChainId, config);
+  return marketplaceClient.generateSellTransaction(args).then((data) => data.steps);
+};
+var useGenerateSellTransaction = (params) => {
+  const config = useConfig();
+  const { mutate, mutateAsync, ...result } = useMutation({
+    onSuccess: params.onSuccess,
+    mutationFn: (args) => generateSellTransaction(args, config, params.chainId)
+  });
+  return {
+    ...result,
+    generateSellTransaction: mutate,
+    generateSellTransactionAsync: mutateAsync
+  };
+};
+
+// src/react/ui/modals/SellModal/_store.ts
+import { useAccount as useAccount7, useSendTransaction as useSendTransaction3 } from "wagmi";
 var initialState5 = {
   isOpen: false,
   open: ({
@@ -1944,7 +1981,7 @@ var useHydrate3 = () => {
   const { generateSellTransactionAsync } = useGenerateSellTransaction({
     chainId
   });
-  const { connector, address } = useAccount6();
+  const { connector, address } = useAccount7();
   useMount3(() => {
     const setSteps = async () => {
       const sellTransactionData = await generateSellTransactionAsync({
@@ -1961,7 +1998,7 @@ var useHydrate3 = () => {
         ],
         additionalFees: []
       });
-      sellModal$.steps.stepsData.set(sellTransactionData.steps);
+      sellModal$.steps.stepsData.set(sellTransactionData);
     };
     when3(() => !!order && !!connector, setSteps);
   });
@@ -1998,7 +2035,7 @@ var useTokenApprovalHandler3 = (chainId) => {
   }
 };
 var useSellHandler = (chainId) => {
-  const { address } = useAccount6();
+  const { address } = useAccount7();
   const { tokenId, collectionAddress } = sellModal$.state.get();
   const {
     generateSellTransactionAsync,
@@ -2035,14 +2072,14 @@ var useSellHandler = (chainId) => {
               quantity: "1"
             }
           ],
-          additionalFees: [
+          additionalFees: order?.feeBreakdown ? [
             {
               amount: String(order.feeBps),
-              receiver: order.feeBreakdown[0].recipientAddress
+              receiver: order.feeBreakdown?.[0]?.recipientAddress
             }
-          ]
+          ] : []
         }).then(async (response) => {
-          const step = response.steps.find((s) => s.id === "sell" /* sell */);
+          const step = response.find((s) => s.id === "sell" /* sell */);
           if (!step) throw new Error("No steps found");
           try {
             const hash = await sendTransactionAsync({
@@ -2071,6 +2108,7 @@ var useSellHandler = (chainId) => {
             sellModal$.close();
             onSuccess && onSuccess();
           } catch (error) {
+            onUnknownError && onUnknownError(error);
           }
         }).catch((error) => {
           onUnknownError && onUnknownError(error);
@@ -2085,32 +2123,9 @@ var useSellHandler = (chainId) => {
 };
 
 // src/react/ui/modals/SellModal/index.tsx
-import { observer as observer10, Show as Show3 } from "@legendapp/state/react";
-
-// src/react/ui/modals/_internal/components/transactionHeader/index.tsx
-import { Box as Box13, NetworkImage as NetworkImage3, Skeleton as Skeleton5, Text as Text12 } from "@0xsequence/design-system";
-import { formatDistanceToNow as formatDistanceToNow2 } from "date-fns";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
-function TransactionHeader({
-  title,
-  chainId,
-  date
-}) {
-  return /* @__PURE__ */ jsxs15(Box13, { display: "flex", alignItems: "center", width: "full", children: [
-    /* @__PURE__ */ jsx19(Text12, { fontSize: "small", fontWeight: "medium", color: "text80", marginRight: "1", children: title }),
-    /* @__PURE__ */ jsx19(NetworkImage3, { size: "xs", chainId }),
-    date && /* @__PURE__ */ jsxs15(Text12, { fontSize: "small", color: "text50", flexGrow: "1", textAlign: "right", children: [
-      formatDistanceToNow2(date),
-      " ago"
-    ] }) || /* @__PURE__ */ jsx19(Skeleton5, { width: "8", height: "4" })
-  ] });
-}
-
-// src/react/ui/modals/SellModal/index.tsx
-import { useAccount as useAccount7 } from "wagmi";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var useSellModal = () => {
-  const { chainId: accountChainId } = useAccount7();
+  const { chainId: accountChainId } = useAccount8();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
   const openModal = (args) => {
     sellModal$.open(args);
@@ -2431,6 +2446,11 @@ var transferModal$ = observable8(initialState7);
 import { CloseIcon as CloseIcon4, IconButton as IconButton5 } from "@0xsequence/design-system";
 import { observer as observer13, Show as Show4 } from "@legendapp/state/react";
 import { Close as Close4, Content as Content5, Overlay as Overlay4, Portal as Portal5, Root as Root5 } from "@radix-ui/react-dialog";
+import { useAccount as useAccount10 } from "wagmi";
+
+// src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
+import { Box as Box15, Button as Button5, Text as Text14, TextInput } from "@0xsequence/design-system";
+import { isAddress } from "viem";
 import { useAccount as useAccount9 } from "wagmi";
 
 // src/react/ui/modals/TransferModal/messages.ts
@@ -2443,22 +2463,20 @@ function getMessage(key) {
 }
 
 // src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx
-import { Box as Box15, Button as Button5, Text as Text14, TextInput } from "@0xsequence/design-system";
-import { isAddress } from "viem";
-import { useAccount as useAccount8 } from "wagmi";
 import { Fragment, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var EnterWalletAddressView = () => {
-  const { address } = useAccount8();
+  const { address } = useAccount9();
   const { collectionAddress, chainId, tokenId, collectionType } = transferModal$.state.get();
   const $quantity = transferModal$.state.quantity;
   const isWalletAddressValid = isAddress(
     transferModal$.state.receiverAddress.get()
   );
-  const { data: tokenBalance } = useTokenBalances({
+  const { data: tokenBalance } = useListBalances({
     chainId,
     contractAddress: collectionAddress,
     tokenId,
-    accountAddress: address
+    accountAddress: address,
+    query: { enabled: !!address }
   });
   const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
   const { data: collection } = useCollection({
@@ -2665,7 +2683,7 @@ var followWalletInstructions_default = FollowWalletInstructionsView;
 // src/react/ui/modals/TransferModal/index.tsx
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var useTransferModal = () => {
-  const { chainId: accountChainId } = useAccount9();
+  const { chainId: accountChainId } = useAccount10();
   const { show: showSwitchNetworkModal } = useSwitchChainModal();
   const openModal = (args) => {
     transferModal$.open(args);
@@ -2737,4 +2755,4 @@ export {
   useTransferModal,
   ModalProvider
 };
-//# sourceMappingURL=chunk-SM7V6ZWI.js.map
+//# sourceMappingURL=chunk-GNB736ZE.js.map