@0xsequence/marketplace-sdk 0.5.3 → 0.5.5

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

@@ -3,13 +3,16 @@ import {
   ActionModal,
   CustomSelect,
   useCurrencyBalance
-} from "./chunk-Y7YTLAO2.js";
+} from "./chunk-P7UNMRZ5.js";
 import {
   CalendarIcon_default,
   MinusIcon_default,
   PlusIcon_default,
   PositiveCircleIcon_default
 } from "./chunk-6YHHCGGY.js";
+import {
+  useAnalytics
+} from "./chunk-3BLBZYQX.js";
 import {
   actionWrapper,
   closeButton,
@@ -41,6 +44,7 @@ import {
   useBalanceOfCollectible,
   useCollectible,
   useCollection,
+  useComparePrices,
   useConfig,
   useCurrencies,
   useCurrency,
@@ -54,14 +58,13 @@ import {
   useSwitchChainModal,
   useTransferTokens,
   useWallet
-} from "./chunk-H5YWG6WN.js";
+} from "./chunk-AXTDPTRD.js";
 import {
   iconVariants
 } from "./chunk-TQWM4ER6.js";
 import {
-  calculatePriceDifferencePercentage,
   truncateMiddle
-} from "./chunk-BZD2LDJJ.js";
+} from "./chunk-7C7ADZ2H.js";
 import {
   getProviderEl
 } from "./chunk-YOKGP2EQ.js";
@@ -70,7 +73,7 @@ import {
   collectableKeys,
   getMarketplaceClient,
   getQueryClient
-} from "./chunk-WSCUPAGR.js";
+} from "./chunk-SA3U25NU.js";
 import {
   InvalidContractTypeError,
   InvalidStepError
@@ -135,6 +138,9 @@ var useGetTokenApprovalData = (params) => {
   };
 };
 
+// src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx
+import { formatUnits as formatUnits3 } from "viem";
+
 // src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx
 import {
   CloseIcon,
@@ -767,6 +773,7 @@ var useTransactionSteps = ({
   const expiry = new Date(Number(offerInput.offer.expiry) * 1e3);
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
+  const analytics = useAnalytics();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
   const { generateOfferTransactionAsync, isPending: generatingSteps } = useGenerateOfferTransaction({
     chainId,
@@ -874,6 +881,27 @@ var useTransactionSteps = ({
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
       }
+      if (hash || orderId) {
+        const currencyDecimal = currency?.decimals || 0;
+        const currencyValueRaw = Number(offerInput.offer.pricePerToken);
+        const currencyValueDecimal = Number(
+          formatUnits3(BigInt(currencyValueRaw), currencyDecimal)
+        );
+        analytics.trackCreateOffer({
+          props: {
+            orderbookKind,
+            collectionAddress,
+            currencyAddress: offerInput.offer.currencyAddress,
+            currencySymbol: currency?.symbol || "",
+            chainId,
+            txnHash: hash || ""
+          },
+          nums: {
+            currencyValueDecimal,
+            currencyValueRaw
+          }
+        });
+      }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
       steps$.transaction.exist.set(false);
@@ -1252,15 +1280,27 @@ function FloorPriceText({
     }
   });
   const floorPriceRaw = listing?.order?.priceAmount;
-  if (!floorPriceRaw || listingLoading || price.amountRaw === "0") {
+  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,
+    query: {
+      enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== "0"
+    }
+  });
+  if (!floorPriceRaw || listingLoading || price.amountRaw === "0" || comparisonLoading) {
     return null;
   }
-  const floorPriceDifference = calculatePriceDifferencePercentage({
-    inputPriceRaw: BigInt(price.amountRaw),
-    basePriceRaw: BigInt(floorPriceRaw),
-    decimals: price.currency.decimals
-  });
-  const floorPriceDifferenceText = floorPriceRaw === price.amountRaw ? "Same as floor price" : `${floorPriceDifference}% ${floorPriceRaw > price.amountRaw ? "below" : "above"} floor price`;
+  let floorPriceDifferenceText = "Same as floor price";
+  if (priceComparison) {
+    if (priceComparison.status === "same") {
+      floorPriceDifferenceText = "Same as floor price";
+    } else {
+      floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% ${priceComparison.status === "below" ? "below" : "above"} floor price`;
+    }
+  }
   return /* @__PURE__ */ jsx10(
     Text7,
     {
@@ -1277,6 +1317,8 @@ function FloorPriceText({
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
 import { Box as Box8, NumericInput, Text as Text8 } from "@0xsequence/design-system";
+import { use$ as use$2 } from "@legendapp/state/react";
+import { useEffect as useEffect5, useRef, useState as useState5 } from "react";
 import { parseUnits } from "viem";
 import { useAccount } from "wagmi";
 
@@ -1383,8 +1425,6 @@ var CurrencyOptionsSelect = observer3(function CurrencyOptionsSelect2({
 var currencyOptionsSelect_default = CurrencyOptionsSelect;
 
 // src/react/ui/modals/_internal/components/priceInput/index.tsx
-import { use$ as use$2 } from "@legendapp/state/react";
-import { useState as useState5 } from "react";
 import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function PriceInput({
   chainId,
@@ -1409,6 +1449,21 @@ function PriceInput({
     checkBalance.callback(balanceError);
   }
   const [value, setValue] = useState5("0");
+  const prevCurrencyDecimals = useRef(currencyDecimals);
+  useEffect5(() => {
+    if (prevCurrencyDecimals.current !== currencyDecimals && value !== "0") {
+      try {
+        const parsedAmount = parseUnits(value, Number(currencyDecimals));
+        $price.amountRaw.set(parsedAmount.toString());
+        if (onPriceChange && parsedAmount !== 0n) {
+          onPriceChange();
+        }
+      } catch {
+        $price.amountRaw.set("0");
+      }
+    }
+    prevCurrencyDecimals.current = currencyDecimals;
+  }, [currencyDecimals, $price.amountRaw, value, onPriceChange]);
   const handleChange = (event) => {
     const newValue = event.target.value;
     setValue(newValue);
@@ -1879,7 +1934,7 @@ import { parseUnits as parseUnits3 } from "viem";
 
 // src/react/ui/modals/_internal/components/transactionDetails/index.tsx
 import { Box as Box11, Image as Image3, Skeleton as Skeleton6, Text as Text10 } from "@0xsequence/design-system";
-import { formatUnits as formatUnits3 } from "viem";
+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({
@@ -1900,7 +1955,7 @@ function TransactionDetails({
     collectibleId
   });
   const priceLoading = !price || marketplaceConfigLoading || royaltyPercentageLoading;
-  let formattedAmount = price && formatUnits3(BigInt(price.amountRaw), price.currency.decimals);
+  let formattedAmount = price && formatUnits4(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);
   }
@@ -1968,41 +2023,8 @@ function TransactionHeader({
   ] });
 }
 
-// src/react/ui/modals/SellModal/store.ts
-import { observable as observable3 } from "@legendapp/state";
-var initialState3 = {
-  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);
-  },
-  steps: {
-    approval: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    },
-    transaction: {
-      exist: false,
-      isExecuting: false,
-      execute: () => Promise.resolve()
-    }
-  }
-};
-var sellModal$ = observable3(initialState3);
+// src/react/ui/modals/SellModal/hooks/useSell.tsx
+import { useEffect as useEffect6 } from "react";
 
 // src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx
 import { skipToken as skipToken3, useQuery as useQuery3 } from "@tanstack/react-query";
@@ -2078,6 +2100,7 @@ var useGetTokenApprovalData2 = (params) => {
 };
 
 // src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx
+import { formatUnits as formatUnits5 } from "viem";
 var useTransactionSteps2 = ({
   collectibleId,
   chainId,
@@ -2092,10 +2115,14 @@ var useTransactionSteps2 = ({
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+  const analytics = useAnalytics();
   const { amount, receiver } = useFees({
     chainId: Number(chainId),
     collectionAddress
   });
+  const { data: currencies } = useCurrencies({
+    chainId: Number(chainId)
+  });
   const { generateSellTransactionAsync, isPending: generatingSteps } = useGenerateSellTransaction({
     chainId,
     onSuccess: (steps3) => {
@@ -2188,6 +2215,31 @@ var useTransactionSteps2 = ({
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
       }
+      if (hash || orderId) {
+        const currency = currencies?.find(
+          (currency2) => currency2.contractAddress === ordersData[0].currencyAddress
+        );
+        const currencyDecimal = currency?.decimals || 0;
+        const currencySymbol = currency?.symbol || "";
+        const currencyValueRaw = Number(ordersData[0].pricePerToken);
+        const currencyValueDecimal = Number(
+          formatUnits5(BigInt(currencyValueRaw), currencyDecimal)
+        );
+        analytics.trackSellItems({
+          props: {
+            marketplaceKind: marketplace,
+            collectionAddress,
+            currencyAddress: ordersData[0].currencyAddress,
+            currencySymbol,
+            chainId,
+            txnHash: hash || ""
+          },
+          nums: {
+            currencyValueDecimal,
+            currencyValueRaw
+          }
+        });
+      }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
       steps$.transaction.exist.set(false);
@@ -2228,7 +2280,6 @@ var useTransactionSteps2 = ({
 };
 
 // src/react/ui/modals/SellModal/hooks/useSell.tsx
-import { useEffect as useEffect5 } from "react";
 var useSell = ({
   collectibleId,
   chainId,
@@ -2245,7 +2296,7 @@ var useSell = ({
     ordersData,
     marketplace
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -2269,6 +2320,42 @@ var useSell = ({
   };
 };
 
+// src/react/ui/modals/SellModal/store.ts
+import { observable as observable3 } from "@legendapp/state";
+var initialState3 = {
+  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);
+  },
+  steps: {
+    approval: {
+      exist: false,
+      isExecuting: false,
+      execute: () => Promise.resolve()
+    },
+    transaction: {
+      exist: false,
+      isExecuting: false,
+      execute: () => Promise.resolve()
+    }
+  }
+};
+var sellModal$ = observable3(initialState3);
+
 // src/react/ui/modals/SellModal/Modal.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SellModal = () => {
@@ -2308,7 +2395,9 @@ var Modal3 = observer5(() => {
         quantity: order?.quantityRemaining ? parseUnits3(
           order.quantityRemaining,
           collectible?.decimals || 0
-        ).toString() : "1"
+        ).toString() : "1",
+        pricePerToken: order?.priceAmount ?? "",
+        currencyAddress: order?.priceCurrencyAddress ?? ""
       }
     ],
     callbacks,
@@ -2966,7 +3055,7 @@ var createListingModal$ = observable7({
 });
 
 // src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts
 import { skipToken as skipToken4, useQuery as useQuery4 } from "@tanstack/react-query";
@@ -3018,6 +3107,7 @@ var useGetTokenApprovalData3 = (params) => {
 };
 
 // src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx
+import { formatUnits as formatUnits6 } from "viem";
 var useTransactionSteps3 = ({
   listingInput,
   chainId,
@@ -3031,7 +3121,11 @@ var useTransactionSteps3 = ({
   const expiry = new Date(Number(listingInput.listing.expiry) * 1e3);
   const { show: showTransactionStatusModal } = useTransactionStatusModal();
   const sdkConfig = useConfig();
+  const { data: currencies } = useCurrencies({
+    chainId: Number(chainId)
+  });
   const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+  const analytics = useAnalytics();
   const { generateListingTransactionAsync, isPending: generatingSteps } = useGenerateListingTransaction({
     chainId,
     onSuccess: (steps3) => {
@@ -3130,6 +3224,29 @@ var useTransactionSteps3 = ({
         steps$.transaction.isExecuting.set(false);
         steps$.transaction.exist.set(false);
       }
+      if (hash || orderId) {
+        const currencyDecimal = currencies?.find(
+          (currency) => currency.contractAddress === listingInput.listing.currencyAddress
+        )?.decimals || 0;
+        const currencyValueRaw = Number(listingInput.listing.pricePerToken);
+        const currencyValueDecimal = Number(
+          formatUnits6(BigInt(currencyValueRaw), currencyDecimal)
+        );
+        analytics.trackCreateListing({
+          props: {
+            orderbookKind,
+            collectionAddress,
+            currencyAddress: listingInput.listing.currencyAddress,
+            currencySymbol: "",
+            chainId,
+            txnHash: hash || ""
+          },
+          nums: {
+            currencyValueDecimal,
+            currencyValueRaw
+          }
+        });
+      }
     } catch (error) {
       steps$.transaction.isExecuting.set(false);
       steps$.transaction.exist.set(false);
@@ -3195,7 +3312,7 @@ var useCreateListing = ({
       enabled: !marketplaceIsLoading
     }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (tokenApproval?.step && !tokenApprovalIsLoading) {
       steps$.approval.exist.set(true);
     }
@@ -3406,6 +3523,7 @@ 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";
@@ -3500,9 +3618,28 @@ 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[0];
+      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: [
@@ -3513,7 +3650,7 @@ var useBuyCollectable = ({
           }
         ],
         currencyAddress: priceCurrencyAddress,
-        price: step.value,
+        price,
         targetContractAddress: step.to,
         txData: step.data,
         collectionAddress,
@@ -3622,10 +3759,10 @@ var useLoadData = ({
 };
 
 // src/react/ui/modals/BuyModal/modals/CheckoutModal.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { parseUnits as parseUnits5 } from "viem";
 function CheckoutModal({ buy, collectable, order }) {
-  useEffect7(() => {
+  useEffect8(() => {
     if (buyModal$.state.checkoutModalIsLoading.get() || buyModal$.state.checkoutModalLoaded.get())
       return;
     const executeBuy = () => {
@@ -3644,7 +3781,7 @@ 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 formatUnits4, parseUnits as parseUnits6 } from "viem";
+import { formatUnits as formatUnits7, 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 }) => {
@@ -3706,7 +3843,7 @@ var ERC1155QuantityModal = observer10(
                   fontSize: "small",
                   fontWeight: "bold",
                   fontFamily: "body",
-                  children: formatUnits4(BigInt(totalPrice), currency.decimals || 0)
+                  children: formatUnits7(BigInt(totalPrice), currency.decimals || 0)
                 }
               ),
               /* @__PURE__ */ jsx25(Text15, { color: "text80", fontSize: "small", fontFamily: "body", children: currency?.symbol })
@@ -3902,7 +4039,7 @@ var DiamondEye_default = SvgDiamondEyeIcon;
 import { observer as observer12 } from "@legendapp/state/react";
 
 // src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/react/ui/components/_internals/action-button/store.ts
@@ -3944,7 +4081,7 @@ var useActionButtonLogic = ({
     "Make an offer" /* OFFER */
   ];
   const pendingActionType = actionButtonStore.pendingAction.type.get();
-  useEffect8(() => {
+  useEffect9(() => {
     if (owned && actionButtonStore.pendingAction.get() && address && !actionsThatOwnersCannotPerform.includes(action) && actionButtonStore.pendingAction.get()?.collectibleId === tokenId) {
       onCannotPerformAction?.(
         pendingActionType
@@ -3960,7 +4097,7 @@ var useActionButtonLogic = ({
     onCannotPerformAction,
     pendingActionType
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (address && !owned && actionButtonStore.pendingAction.get() && actionButtonStore.pendingAction.get()?.collectibleId === tokenId) {
       setTimeout(() => {
         executePendingActionIfExists();
@@ -4248,7 +4385,7 @@ 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 formatUnits5 } from "viem";
+import { formatUnits as formatUnits8 } from "viem";
 
 // src/react/ui/icons/Bell.tsx
 import { Box as Box20 } from "@0xsequence/design-system";
@@ -4292,13 +4429,14 @@ 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 = formatUnits5(BigInt(amount), currency.decimals);
+  const formattedPrice = formatUnits8(BigInt(amount), currency.decimals);
   const numericPrice = Number.parseFloat(formattedPrice);
   return numericPrice < 1e-4 ? `< 0.0001 ${currency.symbol}` : `${formattedPrice} ${currency.symbol}`;
 };
 var Footer = ({
   name,
   type,
+  decimals,
   onOfferClick,
   highestOffer,
   lowestListingPriceAmount,
@@ -4381,16 +4519,24 @@ var Footer = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx35(TokenTypeBalancePill, { balance, type })
+        /* @__PURE__ */ jsx35(
+          TokenTypeBalancePill,
+          {
+            balance,
+            type,
+            decimals
+          }
+        )
       ]
     }
   );
 };
 var TokenTypeBalancePill = ({
   balance,
-  type
+  type,
+  decimals
 }) => {
-  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${balance}` : "ERC-1155" : "ERC-721";
+  const displayText = type === "ERC1155" /* ERC1155 */ ? balance ? `Owned: ${formatUnits8(BigInt(balance), decimals ?? 0)}` : "ERC-1155" : "ERC-721";
   return /* @__PURE__ */ jsx35(
     Text16,
     {
@@ -4542,7 +4688,8 @@ function CollectibleCard({
                     highestOffer,
                     lowestListingPriceAmount: lowestListing?.order?.priceAmount,
                     lowestListingCurrency,
-                    balance
+                    balance,
+                    decimals: collectibleMetadata?.decimals
                   }
                 ),
                 (highestOffer || lowestListing) && /* @__PURE__ */ jsx36(
@@ -4588,4 +4735,4 @@ export {
   useBuyModal,
   CollectibleCard
 };
-//# sourceMappingURL=chunk-BVXIRVEC.js.map
+//# sourceMappingURL=chunk-CIPPTQDA.js.map