@0xsequence/marketplace-sdk 0.3.7 → 0.3.8

package/dist/{chunk-3LGNSRBR.js → chunk-PPSIO23Z.js}

@@ -48,7 +48,7 @@ import {
   useSwitchChainModal,
   useTransactionMachine,
   useTransferTokens
-} from "./chunk-QGELCUYG.js";
+} from "./chunk-5BPDO2U3.js";
 import {
   iconVariants
 } from "./chunk-SBVLWSRZ.js";
@@ -730,8 +730,8 @@ function FloorPriceText({
 import { Box as Box7, NumericInput as NumericInput2, TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { observer as observer5 } from "@legendapp/state/react";
 import { useState as useState3 } from "react";
-import { erc20Abi, parseUnits as parseUnits2 } from "viem";
-import { useAccount as useAccount2, useReadContract } from "wagmi";
+import { parseUnits as parseUnits2 } from "viem";
+import { useAccount as useAccount2 } from "wagmi";
 
 // src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
 import { Skeleton as Skeleton2 } from "@0xsequence/design-system";
@@ -768,7 +768,6 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
     );
     selectedCurrency$.set(c);
   };
-  console.log("currency", currency);
   return /* @__PURE__ */ jsx11(
     CustomSelect,
     {
@@ -780,6 +779,50 @@ var CurrencyOptionsSelect = observer4(function CurrencyOptionsSelect2({
 });
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
+// src/react/hooks/useCurrencyBalance.tsx
+import { useQuery } from "@tanstack/react-query";
+import { erc20Abi, formatUnits as formatUnits2, zeroAddress } from "viem";
+function useCurrencyBalance({
+  currencyAddress,
+  chainId,
+  userAddress
+}) {
+  const publicClient = getPublicRpcClient(chainId);
+  return useQuery({
+    queryKey: ["balance", currencyAddress, chainId, userAddress],
+    queryFn: async () => {
+      if (!userAddress) return null;
+      if (currencyAddress === zeroAddress) {
+        const balance2 = await publicClient.getBalance({
+          address: userAddress
+        });
+        return {
+          value: balance2,
+          formatted: formatUnits2(balance2, 18)
+        };
+      }
+      const [balance, decimals] = await Promise.all([
+        publicClient.readContract({
+          address: currencyAddress,
+          abi: erc20Abi,
+          functionName: "balanceOf",
+          args: [userAddress]
+        }),
+        publicClient.readContract({
+          address: currencyAddress,
+          abi: erc20Abi,
+          functionName: "decimals"
+        })
+      ]);
+      return {
+        value: balance,
+        formatted: formatUnits2(balance, decimals)
+      };
+    },
+    enabled: !!userAddress && !!chainId && !!currencyAddress
+  });
+}
+
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var PriceInput = observer5(function PriceInput2({
@@ -790,19 +833,15 @@ var PriceInput = observer5(function PriceInput2({
 }) {
   const [balanceError, setBalanceError] = useState3("");
   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 { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
+    currencyAddress: $listingPrice.currency.contractAddress.get(),
+    chainId: Number(chainId),
+    userAddress: accountAddress
   });
   const currencyDecimals = $listingPrice.currency.decimals.get();
   const [value, setValue] = useState3("");
   const checkInsufficientBalance = (priceAmountRaw) => {
-    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance || 0);
+    const hasInsufficientBalance = isBalanceSuccess && priceAmountRaw && currencyDecimals && BigInt(priceAmountRaw) > (balance?.value || 0);
     if (!checkBalance) return;
     if (hasInsufficientBalance) {
       setBalanceError("Insufficient balance");
@@ -921,7 +960,7 @@ function TokenPreview({
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
 import { Box as Box9, Image as Image2, Skeleton as Skeleton4, Text as Text6 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits2 } from "viem";
+import { formatUnits as formatUnits3 } from "viem";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
@@ -941,7 +980,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();
   }
@@ -1046,7 +1085,7 @@ import {
   Text as Text9
 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
-import { formatUnits as formatUnits3 } from "viem";
+import { formatUnits as formatUnits4 } from "viem";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
 import { Box as Box11, Text as Text8 } from "@0xsequence/design-system";
@@ -1203,7 +1242,7 @@ 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 ? formatUnits4(BigInt(price.amountRaw), price.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
       return /* @__PURE__ */ jsx17(Box12, { style: { height: 83 }, width: "full", borderRadius: "md", children: /* @__PURE__ */ jsx17(Skeleton5, { style: { width: "100%", height: "100%" } }) });
     }
@@ -1490,6 +1529,7 @@ var initialState3 = {
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
+  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
   collectionName: "",
   collectionType: void 0,
   listingPrice: {
@@ -1506,6 +1546,7 @@ var initialState3 = {
     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);
@@ -1535,7 +1576,7 @@ var Modal2 = observer8(
     showTransactionStatusModal
   }) => {
     const state = createListingModal$.get();
-    const { collectionAddress, chainId, listingPrice, collectibleId } = state;
+    const { collectionAddress, chainId, listingPrice, collectibleId, orderbookKind } = state;
     const {
       data: collectible,
       isLoading: collectableIsLoading,
@@ -1561,6 +1602,7 @@ var Modal2 = observer8(
       userAddress: address
     });
     const { getListingSteps, isLoading: machineLoading } = useCreateListing({
+      orderbookKind,
       chainId,
       collectionAddress,
       onTransactionSent: (hash) => {
@@ -1762,6 +1804,7 @@ var initialState4 = {
   collectionAddress: "",
   chainId: "",
   collectibleId: "",
+  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
   callbacks: void 0,
   offerPrice: {
     amountRaw: "1",
@@ -1774,6 +1817,7 @@ var initialState4 = {
     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);
   },
@@ -1799,7 +1843,7 @@ var ModalContent = observer9(
     showTransactionStatusModal
   }) => {
     const state = makeOfferModal$.get();
-    const { collectionAddress, chainId, offerPrice, collectibleId } = state;
+    const { collectionAddress, chainId, offerPrice, collectibleId, orderbookKind } = state;
     const [insufficientBalance, setInsufficientBalance] = useState7(false);
     const {
       data: collectible,
@@ -1825,6 +1869,7 @@ var ModalContent = observer9(
     const { getMakeOfferSteps } = useMakeOffer({
       chainId,
       collectionAddress,
+      orderbookKind,
       onTransactionSent: (hash) => {
         if (!hash) return;
         showTransactionStatusModal({
@@ -2810,6 +2855,7 @@ var ActionButton = observer15(
     collectionAddress,
     chainId,
     tokenId,
+    orderbookKind,
     action,
     highestOffer,
     lowestListing
@@ -2859,7 +2905,8 @@ var ActionButton = observer15(
           onClick: () => showCreateListingModal({
             collectionAddress,
             chainId,
-            collectibleId: tokenId
+            collectibleId: tokenId,
+            orderbookKind
           })
         }
       );
@@ -2872,7 +2919,8 @@ var ActionButton = observer15(
           onClick: () => showMakeOfferModal({
             collectionAddress,
             chainId,
-            collectibleId: tokenId
+            collectibleId: tokenId,
+            orderbookKind
           })
         }
       );
@@ -2913,7 +2961,7 @@ function ActionButtonBody({ label, onClick }) {
 
 // src/react/ui/components/collectible-card/Footer.tsx
 import { Box as Box20, IconButton as IconButton5, Image as Image6, Text as Text15 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits4 } from "viem";
+import { formatUnits as formatUnits5 } from "viem";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/icons/Bell.tsx
@@ -2963,6 +3011,7 @@ var Footer = ({
   isAnimated
 }) => {
   const { address } = useAccount6();
+  const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
   if (name.length > 15 && highestOffer) {
     name = name.substring(0, 13) + "...";
   }
@@ -3020,22 +3069,22 @@ var Footer = ({
             ]
           }
         ),
-        lowestListingPriceAmount && lowestListingCurrency && /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
-          /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
+        /* @__PURE__ */ jsxs22(Box20, { display: "flex", alignItems: "center", gap: "1", children: [
+          listed && /* @__PURE__ */ jsx31(Image6, { src: lowestListingCurrency?.imageUrl, width: "3", height: "3" }),
           /* @__PURE__ */ jsxs22(
             Text15,
             {
-              color: "text100",
+              color: listed ? "text100" : "text50",
               fontSize: "small",
               fontWeight: "bold",
               textAlign: "left",
               fontFamily: "body",
               children: [
-                formatUnits4(
+                listed && formatUnits5(
                   BigInt(lowestListingPriceAmount),
                   lowestListingCurrency.decimals
                 ),
-                " "
+                !listed && "Not listed yet"
               ]
             }
           )
@@ -3107,6 +3156,7 @@ function CollectibleCard({
   collectibleId,
   chainId,
   collectionAddress,
+  orderbookKind,
   collectionType,
   lowestListing,
   onCollectibleClick,
@@ -3210,6 +3260,7 @@ function CollectibleCard({
                     chainId: String(chainId),
                     collectionAddress,
                     tokenId: collectibleId,
+                    orderbookKind,
                     action,
                     highestOffer: highestOffer?.order,
                     lowestListing: lowestListing?.order,
@@ -3235,4 +3286,4 @@ export {
   ModalProvider,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-3LGNSRBR.js.map
+//# sourceMappingURL=chunk-PPSIO23Z.js.map