@0xsequence/marketplace-sdk 0.8.1 → 0.8.3

package/dist/{chunk-BN36GABQ.js → chunk-QTV77W42.js}

@@ -2,15 +2,15 @@
 
 import {
   ActionModal
-} from "./chunk-ABSYNRT5.js";
+} from "./chunk-5ATGT5S4.js";
 import {
   useAnalytics
-} from "./chunk-A5ACY5YV.js";
+} from "./chunk-FH4TZRDV.js";
 import {
   BellIcon_default,
   CalendarIcon_default,
   CartIcon_default
-} from "./chunk-2VHHJNXY.js";
+} from "./chunk-WXKV5N4T.js";
 import {
   AlertMessage,
   MODAL_OVERLAY_PROPS,
@@ -33,15 +33,17 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-X3QNSQER.js";
+} from "./chunk-DFI52A2E.js";
 import {
   DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 } from "./chunk-Y63BOO6M.js";
 import {
+  calculateEarningsAfterFees,
   cn,
   compareAddress,
+  formatPriceWithFee,
   truncateMiddle
-} from "./chunk-Q5RKAMYF.js";
+} from "./chunk-BGY4WXER.js";
 import {
   InvalidContractTypeError,
   InvalidStepError,
@@ -49,14 +51,16 @@ import {
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-BNAUZXPV.js";
+} from "./chunk-ALICO7NG.js";
 
 // src/react/ui/modals/modal-provider.tsx
 import { observer as observer17 } from "@legendapp/state/react";
 
 // src/react/ui/modals/BuyModal/Modal.tsx
-import { useSelectPaymentModal } from "@0xsequence/checkout";
-import { useEffect } from "react";
+import {
+  useSelectPaymentModal
+} from "@0xsequence/checkout";
+import { useEffect, useRef } from "react";
 
 // src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx
 import { Text } from "@0xsequence/design-system";
@@ -116,7 +120,6 @@ var LoadingModal = ({
 
 // src/react/ui/modals/BuyModal/ERC1155QuantityModal.tsx
 import { use$, useObservable } from "@legendapp/state/react";
-import * as dn2 from "dnum";
 import { Text as Text2, TokenImage } from "@0xsequence/design-system";
 
 // src/react/ui/modals/_internal/components/quantityInput/index.tsx
@@ -364,17 +367,16 @@ var TotalPrice = ({
   let formattedPrice = "0";
   if (currency) {
     try {
-      const price = dn2.from(order.priceAmount, currency.decimals);
-      const totalPriceWithoutFees = dn2.multiply(quantityStr, price);
       const marketplaceFeePercentage = marketplaceConfig?.collections.find(
         (collection) => compareAddress(collection.address, order.collectionContractAddress)
       )?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-      const feeMultiplier = dn2.from(
-        1 + marketplaceFeePercentage / 100,
-        currency.decimals
+      const quantity = BigInt(quantityStr);
+      const totalPriceRaw = BigInt(order.priceAmount) * quantity;
+      formattedPrice = formatPriceWithFee(
+        totalPriceRaw,
+        currency.decimals,
+        marketplaceFeePercentage
       );
-      const totalPrice = dn2.multiply(totalPriceWithoutFees, feeMultiplier);
-      formattedPrice = dn2.format(totalPrice, { trailingZeros: false });
     } catch (e) {
       console.error("Error formatting price", e);
       error = "Unable to calculate total price";
@@ -549,7 +551,8 @@ var getBuyCollectableParams = async ({
   quantity,
   collectable,
   checkoutOptions,
-  fee
+  fee,
+  skipNativeBalanceCheck
 }) => {
   const marketplaceClient = getMarketplaceClient(chainId, config);
   const { steps: steps3 } = await marketplaceClient.generateBuyTransaction({
@@ -604,6 +607,7 @@ var getBuyCollectableParams = async ({
       queryClient.invalidateQueries();
       buyModalStore.send({ type: "close" });
     },
+    skipNativeBalanceCheck,
     ...customCreditCardProviderCallback && {
       customProviderCallback: () => {
         customCreditCardProviderCallback(buyStep);
@@ -621,6 +625,7 @@ var usePaymentModalParams = (args) => {
     priceCurrencyAddress,
     quantity
   } = args;
+  const buyModalProps = useBuyModalProps();
   const {
     chainId,
     collectionAddress,
@@ -628,7 +633,7 @@ var usePaymentModalParams = (args) => {
     orderId,
     customCreditCardProviderCallback,
     skipNativeBalanceCheck
-  } = useBuyModalProps();
+  } = buyModalProps;
   const config = useConfig();
   const fee = useFees({
     chainId,
@@ -638,7 +643,7 @@ var usePaymentModalParams = (args) => {
   const onError = useOnError();
   const enabled = !!wallet && !!marketplace && !!collectable && !!checkoutOptions && !!priceCurrencyAddress && !!quantity;
   return useQuery2({
-    queryKey: ["buyCollectableParams", args, quantity, fee],
+    queryKey: ["buyCollectableParams", buyModalProps, args, fee],
     queryFn: enabled ? () => getBuyCollectableParams({
       chainId,
       config,
@@ -672,9 +677,8 @@ var BuyModal = () => {
   return /* @__PURE__ */ jsx5(BuyModalContent, {});
 };
 var BuyModalContent = () => {
-  const { chainId, skipNativeBalanceCheck } = useBuyModalProps();
+  const { chainId } = useBuyModalProps();
   const onError = useOnError();
-  const { openSelectPaymentModal } = useSelectPaymentModal();
   const quantity = useQuantity();
   const {
     collection,
@@ -729,12 +733,22 @@ var BuyModalContent = () => {
     return /* @__PURE__ */ jsx5(ERC1155QuantityModal, { order });
   }
   if (paymentModalParams) {
-    openSelectPaymentModal({
-      ...paymentModalParams,
-      skipNativeBalanceCheck
-    });
+    return /* @__PURE__ */ jsx5(PaymentModalOpener, { paymentModalParams });
   }
 };
+var PaymentModalOpener = ({
+  paymentModalParams
+}) => {
+  const { openSelectPaymentModal } = useSelectPaymentModal();
+  const hasOpenedRef = useRef(false);
+  useEffect(() => {
+    if (!hasOpenedRef.current) {
+      hasOpenedRef.current = true;
+      openSelectPaymentModal(paymentModalParams);
+    }
+  }, []);
+  return null;
+};
 
 // src/react/ui/modals/CreateListingModal/Modal.tsx
 import { Show, observer as observer7 } from "@legendapp/state/react";
@@ -755,7 +769,7 @@ import {
   DropdownMenuRoot,
   DropdownMenuTrigger
 } from "@0xsequence/design-system";
-import { differenceInDays, format as format2, isSameDay, startOfDay } from "date-fns";
+import { differenceInDays, format, isSameDay, startOfDay } from "date-fns";
 
 // src/react/ui/modals/_internal/components/calendar/index.tsx
 import { DayPicker } from "react-day-picker";
@@ -848,7 +862,7 @@ function CalendarDropdown({
         leftIcon: CalendarIcon_default,
         className: "h-9 flex-1 rounded-sm p-2 font-medium text-xs",
         variant: "base",
-        label: format2(selectedDate, "dd/MM/yyyy HH:mm"),
+        label: format(selectedDate, "dd/MM/yyyy HH:mm"),
         shape: "square",
         onClick: () => setIsOpen(!isOpen)
       }
@@ -1002,18 +1016,18 @@ function FloorPriceText({
     tokenId,
     chainId,
     collectionAddress,
-    filters: {
+    filter: {
       currencies: [price.currency.contractAddress]
     }
   });
-  const floorPriceRaw = listing?.order?.priceAmount;
-  const floorPriceFormatted = listing?.order?.priceAmountFormatted;
+  const floorPriceRaw = listing?.priceAmount;
+  const floorPriceFormatted = listing?.priceAmountFormatted;
   const { data: priceComparison, isLoading: comparisonLoading } = useComparePrices({
     chainId,
     priceAmountRaw: price.amountRaw || "0",
     priceCurrencyAddress: price.currency.contractAddress,
     compareToPriceAmountRaw: floorPriceRaw || "0",
-    compareToPriceCurrencyAddress: listing?.order?.priceCurrencyAddress || price.currency.contractAddress,
+    compareToPriceCurrencyAddress: listing?.priceCurrencyAddress || price.currency.contractAddress,
     query: {
       enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== "0"
     }
@@ -1057,7 +1071,7 @@ function FloorPriceText({
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
 import { NumericInput as NumericInput2, Text as Text6 } from "@0xsequence/design-system";
 import { use$ as use$2 } from "@legendapp/state/react";
-import { useEffect as useEffect3, useRef, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 import { parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
@@ -1299,7 +1313,7 @@ function PriceInput({
   disabled
 }) {
   const { address: accountAddress } = useAccount();
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   const currencyDecimals = use$2($price.currency.decimals);
   const currencyAddress = use$2($price.currency.contractAddress);
   const priceAmountRaw = use$2($price.amountRaw);
@@ -1318,7 +1332,7 @@ function PriceInput({
     checkBalance.callback(balanceError);
   }
   const [value, setValue] = useState5("0");
-  const prevCurrencyDecimals = useRef(currencyDecimals);
+  const prevCurrencyDecimals = useRef2(currencyDecimals);
   useEffect3(() => {
     if (prevCurrencyDecimals.current !== currencyDecimals && value !== "0") {
       try {
@@ -1661,7 +1675,7 @@ var SelectWaasFeeOptions = observer5(
         ),
         children: [
           /* @__PURE__ */ jsx17(Divider, { className: "mt-0 mb-4" }),
-          /* @__PURE__ */ jsx17(Text9, { className: "mb-2 font-body text-large", fontWeight: "bold", children: feeOptionsConfirmed ? titleOnConfirm : "Select a fee option" }),
+          /* @__PURE__ */ jsx17(Text9, { className: "mb-2 font-body font-bold text-large text-text-100", children: feeOptionsConfirmed ? titleOnConfirm : "Select a fee option" }),
           !feeOptionsConfirmed && !pendingFeeOptionConfirmation && /* @__PURE__ */ jsx17(Skeleton4, { className: "h-[52px] w-full animate-shimmer rounded-xl" }),
           (feeOptionsConfirmed || pendingFeeOptionConfirmation) && /* @__PURE__ */ jsx17(
             "div",
@@ -1765,7 +1779,6 @@ function TokenPreview({
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
 import { 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 jsxs13 } from "react/jsx-runtime";
 function TransactionDetails({
   collectibleId,
@@ -1786,12 +1799,20 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyLoading;
-  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
-  if (royalty !== null && formattedAmount && price) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * Number(royalty.percentage) / 100).toFixed(price.currency.decimals);
-  }
-  if (marketplaceFeePercentage !== void 0 && formattedAmount && price) {
-    formattedAmount = (Number.parseFloat(formattedAmount) - Number.parseFloat(formattedAmount) * marketplaceFeePercentage / 100).toFixed(price.currency.decimals);
+  let formattedAmount = "0";
+  if (price) {
+    const fees = [];
+    if (royalty !== null) {
+      fees.push(Number(royalty.percentage));
+    }
+    if (marketplaceFeePercentage > 0) {
+      fees.push(marketplaceFeePercentage);
+    }
+    formattedAmount = calculateEarningsAfterFees(
+      BigInt(price.amountRaw),
+      price.currency.decimals,
+      fees
+    );
   }
   return /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center justify-between", children: [
     /* @__PURE__ */ jsx19(Text11, { className: "font-body font-medium text-xs", color: "text50", children: "Total earnings" }),
@@ -1892,7 +1913,7 @@ var useGetTokenApprovalData = (params) => {
 };
 
 // src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx
-import { formatUnits as formatUnits6 } from "viem";
+import { formatUnits as formatUnits5 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import { Modal, Skeleton as Skeleton8, Text as Text15 } from "@0xsequence/design-system";
@@ -1949,7 +1970,7 @@ var PositiveCircle = () => /* @__PURE__ */ jsx20("div", { className: "flex h-5 w
 // src/react/ui/modals/_internal/components/transactionPreview/index.tsx
 import { Image as Image4, NetworkImage, Skeleton as Skeleton7, Text as Text14 } from "@0xsequence/design-system";
 import { observer as observer6 } from "@legendapp/state/react";
-import { formatUnits as formatUnits4 } from "viem";
+import { formatUnits as formatUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/timeAgo/index.tsx
 import { Text as Text13 } from "@0xsequence/design-system";
@@ -2091,7 +2112,7 @@ var TransactionPreview = observer6(
     const collectibleImage = collectible?.image;
     const collectibleName = collectible?.name;
     const collectionName = collection?.name;
-    const priceFormatted = price ? formatUnits4(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
+    const priceFormatted = price ? formatUnits3(BigInt(price?.amountRaw), price?.currency.decimals) : void 0;
     if (collectibleLoading || collectionLoading) {
       return /* @__PURE__ */ jsx22("div", { className: "w-full rounded-xl", style: { height: 83 }, children: /* @__PURE__ */ jsx22(Skeleton7, { style: { width: "100%", height: "100%" } }) });
     }
@@ -2222,7 +2243,7 @@ var useTransactionStatus = (hash, chainId, callbacks) => {
 var useTransactionStatus_default = useTransactionStatus;
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts
-import { formatUnits as formatUnits5 } from "viem";
+import { formatUnits as formatUnits4 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts
 function getFormattedType(transactionType, verb = false) {
@@ -2253,7 +2274,7 @@ function getTransactionStatusModalMessage({
   price
 }) {
   const hideCollectibleName = transactionType === "CANCEL";
-  const formattedPrice = price ? formatUnits5(BigInt(price.amountRaw), price.currency.decimals) : "";
+  const formattedPrice = price ? formatUnits4(BigInt(price.amountRaw), price.currency.decimals) : "";
   if (orderId) {
     return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ""}. It's been confirmed on the blockchain!`;
   }
@@ -2567,7 +2588,7 @@ var useTransactionSteps = ({
         )?.decimals || 0;
         const currencyValueRaw = Number(listingInput.listing.pricePerToken);
         const currencyValueDecimal = Number(
-          formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
+          formatUnits5(BigInt(currencyValueRaw), currencyDecimal)
         );
         analytics.trackCreateListing({
           props: {
@@ -2611,7 +2632,8 @@ var useTransactionSteps = ({
     );
     const result = await marketplaceClient.execute({
       signature,
-      executeType: "order" /* order */,
+      method: signatureStep.post?.method,
+      endpoint: signatureStep.post?.endpoint,
       body: signatureStep.post?.body
     });
     return result.orderId;
@@ -3029,7 +3051,7 @@ var useGetTokenApprovalData2 = (params) => {
 };
 
 // src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx
-import { formatUnits as formatUnits7 } from "viem";
+import { formatUnits as formatUnits6 } from "viem";
 var useTransactionSteps2 = ({
   offerInput,
   chainId,
@@ -3157,7 +3179,7 @@ var useTransactionSteps2 = ({
         const currencyDecimal = currency?.decimals || 0;
         const currencyValueRaw = Number(offerInput.offer.pricePerToken);
         const currencyValueDecimal = Number(
-          formatUnits7(BigInt(currencyValueRaw), currencyDecimal)
+          formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
         );
         analytics.trackCreateOffer({
           props: {
@@ -3201,7 +3223,8 @@ var useTransactionSteps2 = ({
     );
     const result = await marketplaceClient.execute({
       signature,
-      executeType: "order" /* order */,
+      method: signatureStep.post?.method,
+      endpoint: signatureStep.post?.endpoint,
       body: signatureStep.post?.body
     });
     return result.orderId;
@@ -3404,7 +3427,7 @@ var Modal3 = observer8(() => {
     tokenId: collectibleId,
     chainId,
     collectionAddress,
-    filters: {
+    filter: {
       currencies: [offerPrice2.currency.contractAddress]
     }
   });
@@ -3523,13 +3546,13 @@ var Modal3 = observer8(() => {
             price: offerPrice2,
             onBuyNow: () => {
               makeOfferModal$.close();
-              if (lowestListing?.order) {
+              if (lowestListing) {
                 buyModal.show({
                   chainId,
                   collectionAddress,
                   collectibleId,
-                  orderId: lowestListing.order.orderId,
-                  marketplace: lowestListing.order.marketplace
+                  orderId: lowestListing.orderId,
+                  marketplace: lowestListing.marketplace
                 });
               }
             }
@@ -3652,7 +3675,7 @@ var useGetTokenApprovalData3 = (params) => {
 };
 
 // src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx
-import { formatUnits as formatUnits8 } from "viem";
+import { formatUnits as formatUnits7 } from "viem";
 var useTransactionSteps3 = ({
   collectibleId,
   chainId,
@@ -3777,7 +3800,7 @@ var useTransactionSteps3 = ({
         const currencySymbol = currency?.symbol || "";
         const currencyValueRaw = Number(ordersData[0].pricePerToken);
         const currencyValueDecimal = Number(
-          formatUnits8(BigInt(currencyValueRaw), currencyDecimal)
+          formatUnits7(BigInt(currencyValueRaw), currencyDecimal)
         );
         analytics.trackSellItems({
           props: {
@@ -3821,7 +3844,8 @@ var useTransactionSteps3 = ({
     );
     const result = await marketplaceClient.execute({
       signature,
-      executeType: "order" /* order */,
+      method: signatureStep.post?.method,
+      endpoint: signatureStep.post?.endpoint,
       body: signatureStep.post?.body
     });
     return result.orderId;
@@ -5056,7 +5080,7 @@ var ActionButton = observer18(
 
 // src/react/ui/components/collectible-card/CollectibleAsset.tsx
 import { Skeleton as Skeleton10 } from "@0xsequence/design-system";
-import { useEffect as useEffect12, useRef as useRef2, useState as useState10 } from "react";
+import { useEffect as useEffect12, useRef as useRef3, useState as useState10 } from "react";
 import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function CollectibleAssetSkeleton() {
   return /* @__PURE__ */ jsx40(
@@ -5085,7 +5109,7 @@ function CollectibleAsset({
 }) {
   const [assetLoadFailed, setAssetLoadFailed] = useState10(false);
   const [assetLoading, setAssetLoading] = useState10(true);
-  const videoRef = useRef2(null);
+  const videoRef = useRef3(null);
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   const placeholderImage = chess_tile_default;
   const assetUrl = collectibleMetadata?.image || collectibleMetadata?.video || collectibleMetadata?.animation_url || collectibleMetadata?.assets?.[0]?.url || placeholderImage;
@@ -5166,12 +5190,12 @@ import {
   Image as Image7,
   Text as Text21
 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits9 } from "viem";
+import { formatUnits as formatUnits8 } from "viem";
 import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 var OVERFLOW_PRICE = 1e8;
 var UNDERFLOW_PRICE = 1e-4;
 var formatPrice = (amount, currency) => {
-  const formattedPrice = formatUnits9(BigInt(amount), currency.decimals);
+  const formattedPrice = formatUnits8(BigInt(amount), currency.decimals);
   const numericPrice = Number.parseFloat(formattedPrice);
   if (numericPrice < UNDERFLOW_PRICE) {
     return /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
@@ -5268,7 +5292,7 @@ var TokenTypeBalancePill = ({
   type,
   decimals
 }) => {
-  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits9(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
+  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits8(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
   return /* @__PURE__ */ jsx41(Text21, { className: "rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs", children: displayText });
 };
 
@@ -5380,4 +5404,4 @@ export {
   useSellModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-BN36GABQ.js.map
+//# sourceMappingURL=chunk-QTV77W42.js.map