@0xsequence/marketplace-sdk 0.5.5 → 0.5.7

package/dist/{chunk-CIPPTQDA.js → chunk-L2K4DBH2.js}

@@ -3,16 +3,16 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-P7UNMRZ5.js";
+} from "./chunk-G2T7HCWE.js";
+import {
+  useAnalytics
+} from "./chunk-YYBU45PK.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
   PlusIcon_default,
   PositiveCircleIcon_default
 } from "./chunk-6YHHCGGY.js";
-import {
-  useAnalytics
-} from "./chunk-3BLBZYQX.js";
 import {
   actionWrapper,
   closeButton,
@@ -30,13 +30,14 @@ import {
   dialogOverlay,
   dialogOverlay2,
   footer,
+  footerPriceChevron,
   offerBellButton,
   priceInputCurrencyImage,
   priceInputWrapper,
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "./chunk-UZIAX32Y.js";
+} from "./chunk-Y56IIYDF.js";
 import {
   AlertMessage,
   dateToUnixTime,
@@ -58,13 +59,18 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-AXTDPTRD.js";
+} from "./chunk-YA3DWLDC.js";
+import {
+  DEFAULT_MARKETPLACE_FEE_PERCENTAGE
+} from "./chunk-5O3ZAEEX.js";
 import {
   iconVariants
 } from "./chunk-TQWM4ER6.js";
 import {
+  compareAddress,
+  formatPrice,
   truncateMiddle
-} from "./chunk-7C7ADZ2H.js";
+} from "./chunk-OMCWTRBR.js";
 import {
   getProviderEl
 } from "./chunk-YOKGP2EQ.js";
@@ -73,7 +79,7 @@ import {
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-SA3U25NU.js";
+} from "./chunk-LNMMWV77.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
@@ -1936,19 +1942,19 @@ import { parseUnits as parseUnits3 } from "viem";
 import { Box as Box11, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
 import { formatUnits as formatUnits4 } from "viem";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
-var DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
 function TransactionDetails({
   collectibleId,
   collectionAddress,
   chainId,
+  includeMarketplaceFee,
   price,
   showPlaceholderPrice,
   currencyImageUrl
 }) {
   const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
-  const marketplaceFeePercentage = data?.collections.find(
+  const marketplaceFeePercentage = includeMarketplaceFee ? data?.collections.find(
     (collection) => collection.address === collectionAddress
-  )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+  )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE : 0;
   const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } = useRoyaltyPercentage({
     chainId,
     collectionAddress,
@@ -2474,6 +2480,7 @@ var Modal3 = observer5(() => {
             collectibleId: tokenId,
             collectionAddress,
             chainId,
+            includeMarketplaceFee: true,
             price: currency ? {
               amountRaw: order?.priceAmount,
               currency
@@ -2997,63 +3004,6 @@ import { Show as Show4, observer as observer9 } from "@legendapp/state/react";
 import { parseUnits as parseUnits4 } from "viem";
 import { useAccount as useAccount5 } from "wagmi";
 
-// src/react/ui/modals/CreateListingModal/store.ts
-import { observable as observable7 } from "@legendapp/state";
-import { addDays as addDays3 } from "date-fns/addDays";
-var listingPrice = {
-  amountRaw: "0",
-  currency: {}
-};
-var approval2 = {
-  exist: false,
-  isExecuting: false,
-  execute: () => Promise.resolve()
-};
-var transaction2 = {
-  exist: false,
-  isExecuting: false,
-  execute: () => Promise.resolve()
-};
-var steps2 = {
-  approval: { ...approval2 },
-  transaction: { ...transaction2 }
-};
-var initialState6 = {
-  isOpen: false,
-  collectionAddress: "",
-  chainId: "",
-  collectibleId: "",
-  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
-  collectionName: "",
-  collectionType: void 0,
-  listingPrice: { ...listingPrice },
-  quantity: "1",
-  invalidQuantity: false,
-  expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
-  callbacks: void 0,
-  steps: { ...steps2 }
-};
-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({ ...initialState6, ...actions2 });
-    createListingModal$.listingPrice.set({ ...listingPrice });
-    createListingModal$.steps.set({ ...steps2 });
-  }
-};
-var createListingModal$ = observable7({
-  ...initialState6,
-  ...actions2
-});
-
 // src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx
 import { useEffect as useEffect7 } from "react";
 
@@ -3335,6 +3285,63 @@ var useCreateListing = ({
   };
 };
 
+// src/react/ui/modals/CreateListingModal/store.ts
+import { observable as observable7 } from "@legendapp/state";
+import { addDays as addDays3 } from "date-fns/addDays";
+var listingPrice = {
+  amountRaw: "0",
+  currency: {}
+};
+var approval2 = {
+  exist: false,
+  isExecuting: false,
+  execute: () => Promise.resolve()
+};
+var transaction2 = {
+  exist: false,
+  isExecuting: false,
+  execute: () => Promise.resolve()
+};
+var steps2 = {
+  approval: { ...approval2 },
+  transaction: { ...transaction2 }
+};
+var initialState6 = {
+  isOpen: false,
+  collectionAddress: "",
+  chainId: "",
+  collectibleId: "",
+  orderbookKind: "sequence_marketplace_v2" /* sequence_marketplace_v2 */,
+  collectionName: "",
+  collectionType: void 0,
+  listingPrice: { ...listingPrice },
+  quantity: "1",
+  invalidQuantity: false,
+  expiry: new Date(addDays3(/* @__PURE__ */ new Date(), 7).toJSON()),
+  callbacks: void 0,
+  steps: { ...steps2 }
+};
+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({ ...initialState6, ...actions2 });
+    createListingModal$.listingPrice.set({ ...listingPrice });
+    createListingModal$.steps.set({ ...steps2 });
+  }
+};
+var createListingModal$ = observable7({
+  ...initialState6,
+  ...actions2
+});
+
 // src/react/ui/modals/CreateListingModal/Modal.tsx
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var CreateListingModal = () => {
@@ -3510,7 +3517,8 @@ var Modal5 = observer9(() => {
             collectionAddress,
             chainId,
             price: createListingModal$.listingPrice.get(),
-            currencyImageUrl: listingPrice2.currency.imageUrl
+            currencyImageUrl: listingPrice2.currency.imageUrl,
+            includeMarketplaceFee: false
           }
         )
       ]
@@ -3523,7 +3531,6 @@ import { use$ as use$3 } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts
 import { useSelectPaymentModal } from "@0xsequence/kit-checkout";
-import { zeroAddress } from "viem";
 
 // src/react/ui/modals/BuyModal/store.ts
 import { observable as observable8 } from "@legendapp/state";
@@ -3618,28 +3625,12 @@ var useBuyCollectable = ({
         additionalFees: [fees],
         walletType: "unknown" /* unknown */
       });
-      const order = await marketplaceClient.getOrders({
-        input: [
-          {
-            orderId: input.orderId,
-            contractAddress: collectionAddress,
-            marketplace: input.marketplace
-          }
-        ]
-      });
       setCheckoutModalLoaded(true);
       setCheckoutModalIsLoading(false);
       const step = steps3.find((step2) => step2.id === "buy" /* buy */);
       if (!step) {
         throw new Error("Buy step not found");
       }
-      const feesBps = BigInt(fees.amount);
-      let price = String(
-        BigInt(order.orders[0].priceAmount) * BigInt(input.quantity) * (10000n + feesBps) / 10000n
-      );
-      if (order.orders[0].priceCurrencyAddress !== zeroAddress) {
-        price = "0";
-      }
       openSelectPaymentModal({
         chain: chainId,
         collectibles: [
@@ -3650,7 +3641,7 @@ var useBuyCollectable = ({
           }
         ],
         currencyAddress: priceCurrencyAddress,
-        price,
+        price: step.price,
         targetContractAddress: step.to,
         txData: step.data,
         collectionAddress,
@@ -3781,17 +3772,22 @@ function CheckoutModal({ buy, collectable, order }) {
 // src/react/ui/modals/BuyModal/modals/Modal1155.tsx
 import { Box as Box17, Text as Text15, TokenImage as TokenImage2 } from "@0xsequence/design-system";
 import { observer as observer10 } from "@legendapp/state/react";
-import { formatUnits as formatUnits7, parseUnits as parseUnits6 } from "viem";
+import { parseUnits as parseUnits6 } from "viem";
 import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var ERC1155QuantityModal = observer10(
   ({ buy, collectable, order }) => {
+    const { data: marketplaceConfig } = useMarketplaceConfig();
     const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
       chainId: order.chainId,
       currencyAddress: order.priceCurrencyAddress
     });
     const quantity = Number(buyModal$.state.quantity.get());
     const pricePerToken = order.priceAmount;
-    const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
+    const marketplaceFeePercentage = marketplaceConfig?.collections.find(
+      (collection) => compareAddress(collection.address, order.collectionContractAddress)
+    )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+    const price = Number(quantity) * Number(pricePerToken);
+    const totalPrice = price + price * Number(marketplaceFeePercentage || 0) / 100;
     if (buyModal$.state.checkoutModalLoaded.get() && buyModal$.isOpen.get() && buyModal$.state.checkoutModalIsLoading.get() && buyModal$.state.purchaseProcessing.get()) {
       return null;
     }
@@ -3843,7 +3839,7 @@ var ERC1155QuantityModal = observer10(
                   fontSize: "small",
                   fontWeight: "bold",
                   fontFamily: "body",
-                  children: formatUnits7(BigInt(totalPrice), currency.decimals || 0)
+                  children: formatPrice(totalPrice, currency.decimals)
                 }
               ),
               /* @__PURE__ */ jsx25(Text15, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
@@ -4384,8 +4380,15 @@ var ActionButton = observer12(
 );
 
 // src/react/ui/components/collectible-card/Footer.tsx
-import { Box as Box21, IconButton as IconButton5, Image as Image6, Text as Text16 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits8 } from "viem";
+import {
+  Box as Box21,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  IconButton as IconButton5,
+  Image as Image6,
+  Text as Text16
+} from "@0xsequence/design-system";
+import { formatUnits as formatUnits7 } from "viem";
 
 // src/react/ui/icons/Bell.tsx
 import { Box as Box20 } from "@0xsequence/design-system";
@@ -4428,10 +4431,35 @@ var Bell_default = SvgBellIcon;
 
 // src/react/ui/components/collectible-card/Footer.tsx
 import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
-var formatPrice = (amount, currency) => {
-  const formattedPrice = formatUnits8(BigInt(amount), currency.decimals);
+var OVERFLOW_PRICE = 1e8;
+var UNDERFLOW_PRICE = 1e-4;
+var formatPrice2 = (amount, currency) => {
+  const formattedPrice = formatUnits7(BigInt(amount), currency.decimals);
   const numericPrice = Number.parseFloat(formattedPrice);
-  return numericPrice < 1e-4 ? `< 0.0001 ${currency.symbol}` : `${formattedPrice} ${currency.symbol}`;
+  if (numericPrice < UNDERFLOW_PRICE) {
+    return /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ jsx35(ChevronLeftIcon, { className: footerPriceChevron }),
+      /* @__PURE__ */ jsx35(Text16, { children: `${UNDERFLOW_PRICE} ${currency.symbol}` })
+    ] });
+  }
+  if (numericPrice > OVERFLOW_PRICE) {
+    return /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ jsx35(ChevronRightIcon, { className: footerPriceChevron }),
+      /* @__PURE__ */ jsx35(Text16, { children: `${OVERFLOW_PRICE.toLocaleString("en-US", {
+        maximumFractionDigits: 2
+      })} ${currency.symbol}` })
+    ] });
+  }
+  const maxDecimals = numericPrice < 0.01 ? 6 : 4;
+  const formattedNumber = numericPrice.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: maxDecimals
+  });
+  return /* @__PURE__ */ jsx35(Box21, { display: "flex", alignItems: "center", gap: "1", children: /* @__PURE__ */ jsxs23(Text16, { children: [
+    formattedNumber,
+    " ",
+    currency.symbol
+  ] }) });
 };
 var Footer = ({
   name,
@@ -4503,7 +4531,17 @@ var Footer = ({
           }
         ),
         /* @__PURE__ */ jsxs23(Box21, { display: "flex", alignItems: "center", gap: "1", children: [
-          listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx35(Image6, { src: lowestListingCurrency.imageUrl, width: "3", height: "3" }),
+          listed && lowestListingCurrency.imageUrl && /* @__PURE__ */ jsx35(
+            Image6,
+            {
+              src: lowestListingCurrency.imageUrl,
+              width: "3",
+              height: "3",
+              onError: (e) => {
+                e.currentTarget.style.display = "none";
+              }
+            }
+          ),
           /* @__PURE__ */ jsxs23(
             Text16,
             {
@@ -4513,7 +4551,7 @@ var Footer = ({
               textAlign: "left",
               fontFamily: "body",
               children: [
-                listed && formatPrice(lowestListingPriceAmount, lowestListingCurrency),
+                listed && formatPrice2(lowestListingPriceAmount, lowestListingCurrency),
                 !listed && "Not listed yet"
               ]
             }
@@ -4536,7 +4574,7 @@ var TokenTypeBalancePill = ({
   type,
   decimals
 }) => {
-  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits8(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
+  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits7(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
   return /* @__PURE__ */ jsx35(
     Text16,
     {
@@ -4606,6 +4644,7 @@ function CollectibleCard({
   const collectibleMetadata = lowestListing?.metadata;
   const highestOffer = lowestListing?.offer;
   const [imageLoadingError, setImageLoadingError] = useState7(false);
+  const [imageLoading, setImageLoading] = useState7(true);
   const { data: lowestListingCurrency } = useCurrency({
     chainId,
     // biome-ignore lint/style/noNonNullAssertion: <explanation>
@@ -4670,15 +4709,30 @@ function CollectibleCard({
                     icon: DiamondEye_default
                   }
                 ),
-                /* @__PURE__ */ jsx36(
-                  "img",
-                  {
-                    src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
-                    alt: name,
-                    className: collectibleImage,
-                    onError: () => setImageLoadingError(true)
-                  }
-                ),
+                /* @__PURE__ */ jsxs24(Box22, { position: "relative", children: [
+                  imageLoading && /* @__PURE__ */ jsx36(
+                    Skeleton8,
+                    {
+                      position: "absolute",
+                      top: "0",
+                      left: "0",
+                      width: "full",
+                      height: "full",
+                      zIndex: "10",
+                      style: { borderRadius: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    "img",
+                    {
+                      src: imageLoadingError ? chess_tile_default : image || chess_tile_default,
+                      alt: name,
+                      className: imageLoading ? collectibleImage.loading : collectibleImage.loaded,
+                      onError: () => setImageLoadingError(true),
+                      onLoad: () => setImageLoading(false)
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsx36(
                   Footer,
                   {
@@ -4735,4 +4789,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-CIPPTQDA.js.map
+//# sourceMappingURL=chunk-L2K4DBH2.js.map