@0xsequence/marketplace-sdk 0.9.0 → 0.10.0

package/src/react/ui/modals/BuyModal/store.ts

@@ -7,6 +7,8 @@ import type {
 	MarketplaceKind,
 	Step,
 } from '../../../_internal';
+import type { useAnalytics } from '../../../_internal/databeat';
+import { flattenAnalyticsArgs } from '../../../_internal/databeat/utils';
 
 export type CheckoutOptionsSalesContractProps = {
 	chainId: number;
@@ -47,6 +49,7 @@ export type ShopBuyModalProps = BuyModalBaseProps & {
 		amount: string;
 		currencyAddress: Address;
 	};
+	unlimitedSupply?: boolean;
 };
 
 // Marketplace type modal props
@@ -86,6 +89,7 @@ type SubModalState = 'idle' | 'opening' | 'open' | 'closed';
 const initialContext = {
 	isOpen: false,
 	props: null as BuyModalProps | null,
+	buyAnalyticsId: '',
 	onError: (() => {}) as onErrorCallback,
 	onSuccess: (() => {}) as onSuccessCallback,
 	quantity: null as number | null,
@@ -103,15 +107,34 @@ export const buyModalStore = createStore({
 				props: BuyModalProps;
 				onError?: onErrorCallback;
 				onSuccess?: onSuccessCallback;
+				analyticsFn: ReturnType<typeof useAnalytics>;
 			},
 		) => {
 			// Prevent duplicate opens
 			if (context.modalState !== 'idle') {
 				return context;
 			}
+			const buyAnalyticsId = crypto.randomUUID();
+
+			const { analyticsProps, analyticsNums } = flattenAnalyticsArgs(
+				event.props,
+			);
+
+			event.analyticsFn.trackBuyModalOpened({
+				props: {
+					buyAnalyticsId,
+					collectionAddress: event.props.collectionAddress,
+					...analyticsProps,
+				},
+				nums: {
+					chainId: event.props.chainId,
+					...analyticsNums,
+				},
+			});
 			return {
 				...context,
 				props: event.props,
+				buyAnalyticsId,
 				onError: event.onError ?? context.onError,
 				onSuccess: event.onSuccess ?? context.onSuccess,
 				isOpen: true,
@@ -210,3 +233,6 @@ export const usePaymentModalState = () =>
 
 export const useCheckoutModalState = () =>
 	useSelector(buyModalStore, (state) => state.context.checkoutModalState);
+
+export const useBuyAnalyticsId = () =>
+	useSelector(buyModalStore, (state) => state.context.buyAnalyticsId);

package/src/react/ui/modals/CreateListingModal/Modal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { observer, Show } from '@legendapp/state/react';
+import { observer, Show, use$ } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
@@ -23,7 +23,10 @@ import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
@@ -47,6 +50,8 @@ const Modal = observer(() => {
 	} = state;
 	const steps$ = createListingModal$.steps;
 	const { wallet } = useWallet();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 
 	const {
 		shouldHideActionButton: shouldHideListButton,
@@ -54,9 +59,8 @@ const Modal = observer(() => {
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
 		isProcessing: listingIsBeingProcessed,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const {
@@ -148,7 +152,7 @@ const Modal = observer(() => {
 
 		try {
 			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await createListing({
@@ -201,7 +205,7 @@ const Modal = observer(() => {
 			chainId={Number(chainId)}
 			onClose={() => {
 				createListingModal$.close();
-				selectWaasFeeOptions$.hide();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
 			}}
 			title="List item for sale"
 			ctas={ctas}
@@ -219,7 +223,13 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$price={createListingModal$.listingPrice}
+					price={listingPrice}
+					onPriceChange={(newPrice) => {
+						createListingModal$.listingPrice.set(newPrice);
+					}}
+					onCurrencyChange={(newCurrency) => {
+						createListingModal$.listingPrice.currency.set(newCurrency);
+					}}
 					disabled={shouldHideListButton}
 				/>
 
@@ -234,15 +244,22 @@ const Modal = observer(() => {
 			</div>
 			{collection?.type === 'ERC1155' && balance && (
 				<QuantityInput
-					$quantity={createListingModal$.quantity}
-					$invalidQuantity={createListingModal$.invalidQuantity}
+					quantity={use$(createListingModal$.quantity)}
+					invalidQuantity={use$(createListingModal$.invalidQuantity)}
+					onQuantityChange={(quantity) =>
+						createListingModal$.quantity.set(quantity)
+					}
+					onInvalidQuantityChange={(invalid) =>
+						createListingModal$.invalidQuantity.set(invalid)
+					}
 					decimals={collectible?.decimals || 0}
 					maxQuantity={balance?.balance}
 					disabled={shouldHideListButton}
 				/>
 			)}
 			<ExpirationDateSelect
-				$date={createListingModal$.expiry}
+				date={createListingModal$.expiry.get()}
+				onDateChange={(date) => createListingModal$.expiry.set(date)}
 				disabled={shouldHideListButton}
 			/>
 			<TransactionDetails

package/src/react/ui/modals/CreateListingModal/store.ts

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { type Currency, OrderbookKind } from '../../../../types';
 import type { CollectionType, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
@@ -22,7 +22,7 @@ type CreateListingState = BaseModalState & {
 };
 
 export type OpenCreateListingModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
@@ -58,7 +58,7 @@ const steps = {
 
 const initialState: CreateListingState = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	collectibleId: '',
 	orderbookKind: OrderbookKind.sequence_marketplace_v2,

package/src/react/ui/modals/MakeOfferModal/Modal.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { observer, Show } from '@legendapp/state/react';
+import { observer, Show, use$ } from '@legendapp/state/react';
 import { useState } from 'react';
 import { parseUnits } from 'viem';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
+import { getNetwork } from '../../../../utils/network';
 import { ContractType } from '../../../_internal';
 import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
@@ -22,7 +22,10 @@ import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import { useBuyModal } from '../BuyModal';
@@ -58,6 +61,8 @@ const Modal = observer(() => {
 	});
 	const { wallet } = useWallet();
 	const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 
 	const {
 		shouldHideActionButton: shouldHideOfferButton,
@@ -65,9 +70,8 @@ const Modal = observer(() => {
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
 		isProcessing,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const {
@@ -150,7 +154,7 @@ const Modal = observer(() => {
 
 		try {
 			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await makeOffer({
@@ -205,7 +209,7 @@ const Modal = observer(() => {
 				chainId={Number(chainId)}
 				onClose={() => {
 					makeOfferModal$.close();
-					selectWaasFeeOptions$.hide();
+					selectWaasFeeOptionsStore.send({ type: 'hide' });
 					steps$.transaction.isExecuting.set(false);
 				}}
 				title="Make an offer"
@@ -224,8 +228,14 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$price={makeOfferModal$.offerPrice}
-					onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+					price={offerPrice}
+					onPriceChange={(newPrice) => {
+						makeOfferModal$.offerPrice.set(newPrice);
+						makeOfferModal$.offerPriceChanged.set(true);
+					}}
+					onCurrencyChange={(newCurrency) => {
+						makeOfferModal$.offerPrice.currency.set(newCurrency);
+					}}
 					includeNativeCurrency={false}
 					checkBalance={{
 						enabled: true,
@@ -236,8 +246,14 @@ const Modal = observer(() => {
 
 				{collection?.type === ContractType.ERC1155 && (
 					<QuantityInput
-						$quantity={makeOfferModal$.quantity}
-						$invalidQuantity={makeOfferModal$.invalidQuantity}
+						quantity={use$(makeOfferModal$.quantity)}
+						invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
+						onQuantityChange={(quantity) =>
+							makeOfferModal$.quantity.set(quantity)
+						}
+						onInvalidQuantityChange={(invalid) =>
+							makeOfferModal$.invalidQuantity.set(invalid)
+						}
 						decimals={collectible?.decimals || 0}
 						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
 						disabled={shouldHideOfferButton}
@@ -268,7 +284,8 @@ const Modal = observer(() => {
 						/>
 					)}
 				<ExpirationDateSelect
-					$date={makeOfferModal$.expiry}
+					date={makeOfferModal$.expiry.get()}
+					onDateChange={(date) => makeOfferModal$.expiry.set(date)}
 					disabled={shouldHideOfferButton}
 				/>
 

package/src/react/ui/modals/MakeOfferModal/store.ts

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Currency, OrderbookKind, Price } from '../../../../types';
 import type { CollectionType, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
@@ -19,7 +19,7 @@ type MakeOfferState = BaseModalState & {
 };
 
 export type OpenMakeOfferModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
@@ -55,7 +55,7 @@ const steps = {
 
 const initialState: MakeOfferState = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	collectibleId: '',
 	orderbookKind: undefined,

package/src/react/ui/modals/SellModal/Modal.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
 import { observer, Show } from '@legendapp/state/react';
 import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
+import { getNetwork } from '../../../../utils/network';
 import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
 import { useWallet } from '../../../_internal/wallet/useWallet';
 import { useCollection, useCurrency } from '../../../hooks';
@@ -15,7 +15,10 @@ import {
 } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
@@ -53,7 +56,8 @@ const Modal = observer(() => {
 		currencyAddress: order?.priceCurrencyAddress as Address | undefined,
 	});
 	const { wallet } = useWallet();
-	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 	const network = getNetwork(Number(chainId));
 	const isTestnet = network.type === NetworkType.TESTNET;
 	const isProcessing = sellModal$.sellIsBeingProcessed.get();
@@ -61,9 +65,8 @@ const Modal = observer(() => {
 	const { shouldHideActionButton: shouldHideSellButton } =
 		useSelectWaasFeeOptions({
 			isProcessing,
-			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-			selectedFeeOption:
-				selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+			feeOptionsVisible,
+			selectedFeeOption: selectedFeeOption as FeeOption,
 		});
 
 	const { isLoading, executeApproval, sell } = useSell({
@@ -109,7 +112,7 @@ const Modal = observer(() => {
 
 		try {
 			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await sell({
@@ -164,7 +167,7 @@ const Modal = observer(() => {
 			chainId={Number(chainId)}
 			onClose={() => {
 				sellModal$.close();
-				selectWaasFeeOptions$.hide();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
 				steps$.transaction.isExecuting.set(false);
 			}}
 			title="You have an offer"

package/src/react/ui/modals/SellModal/store.ts

@@ -1,10 +1,10 @@
 import { observable } from '@legendapp/state';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Order, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
 export type OpenSellModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	tokenId: string;
 	order: Order;
@@ -25,7 +25,7 @@ type Actions = {
 
 const initialState: SellModalState & Actions = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	tokenId: '',
 	order: undefined,

package/src/react/ui/modals/TransferModal/__tests__/__snapshots__/store.test.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TransferModal Store > Initial State > should have correct initial state > initial-store-state 1`] = `
+{
+  "chainId": 0,
+  "collectibleId": "",
+  "collectionAddress": "0x",
+  "hash": undefined,
+  "isOpen": false,
+  "onError": undefined,
+  "onSuccess": undefined,
+  "quantity": "1",
+  "receiverAddress": "",
+  "transferIsProcessing": false,
+  "view": "enterReceiverAddress",
+}
+`;