@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

package/src/react/ui/modals/BuyModal/hooks/usePaymentModalParams.ts

@@ -1,25 +1,25 @@
 import type { SelectPaymentSettings } from '@0xsequence/checkout';
 import type { TokenMetadata } from '@0xsequence/metadata';
 import { skipToken, useQuery } from '@tanstack/react-query';
-import type { Hash, Hex } from 'viem';
-import type { SdkConfig, Step } from '../../../../..';
+import type { Address, Hash, Hex } from 'viem';
+import type { CheckoutOptions, SdkConfig } from '../../../../../types';
 import { decodeERC20Approval } from '../../../../../utils/decode/erc20';
 import {
 	type AdditionalFee,
-	type CheckoutOptions,
 	getMarketplaceClient,
 	getQueryClient,
 	getSequenceApiClient,
 	type MarketplaceKind,
+	type Step,
 	StepType,
 	WalletKind,
 } from '../../../../_internal';
-import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { useConfig } from '../../../../hooks';
 import type { ModalCallbacks } from '../../_internal/types';
 import {
 	buyModalStore,
 	isMarketProps,
+	useBuyAnalyticsId,
 	useBuyModalProps,
 	useOnError,
 	useOnSuccess,
@@ -29,7 +29,7 @@ import { useMarketPlatformFee } from './useMarketPlatformFee';
 interface GetBuyCollectableParams {
 	chainId: number;
 	config: SdkConfig;
-	wallet: WalletInstance;
+	address: Address;
 	collectionAddress: string;
 	collectibleId: string;
 	marketplace: MarketplaceKind;
@@ -43,6 +43,7 @@ interface GetBuyCollectableParams {
 	customCreditCardProviderCallback: ((buyStep: Step) => void) | undefined;
 	skipNativeBalanceCheck: boolean | undefined;
 	nativeTokenAddress: string | undefined;
+	buyAnalyticsId: string;
 }
 
 export const getBuyCollectableParams = async ({
@@ -53,7 +54,7 @@ export const getBuyCollectableParams = async ({
 	priceCurrencyAddress,
 	customCreditCardProviderCallback,
 	config,
-	wallet,
+	address,
 	marketplace,
 	orderId,
 	quantity,
@@ -62,12 +63,13 @@ export const getBuyCollectableParams = async ({
 	fee,
 	skipNativeBalanceCheck,
 	nativeTokenAddress,
+	buyAnalyticsId,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
 		chainId: String(chainId),
 		collectionAddress,
-		buyer: await wallet.address(),
+		buyer: address,
 		marketplace: marketplace,
 		ordersData: [
 			{
@@ -127,9 +129,7 @@ export const getBuyCollectableParams = async ({
 		approvedSpenderAddress,
 		txData: buyStep.data as Hex,
 		collectionAddress,
-		recipientAddress: await wallet.address(),
-		enableMainCurrencyPayment: true,
-		enableSwapPayments: !!checkoutOptions.swap,
+		recipientAddress: address,
 		creditCardProviders,
 		onSuccess: (hash: string) => {
 			callbacks?.onSuccess?.({ hash: hash as Hash });
@@ -137,11 +137,15 @@ export const getBuyCollectableParams = async ({
 		supplementaryAnalyticsInfo: {
 			requestId: orderId,
 			marketplaceKind: marketplace,
+			buyAnalyticsId,
+			marketplaceType: 'market',
 		},
 		onError: callbacks?.onError,
 		onClose: () => {
 			const queryClient = getQueryClient();
-			queryClient.invalidateQueries();
+			queryClient.invalidateQueries({
+				predicate: (query) => !query.meta?.persistent,
+			});
 			buyModalStore.send({ type: 'close' });
 		},
 		skipNativeBalanceCheck,
@@ -157,11 +161,12 @@ export const getBuyCollectableParams = async ({
 				contractId: transakContractId,
 			},
 		}),
+		successActionButtons: callbacks?.successActionButtons,
 	} satisfies SelectPaymentSettings;
 };
 
 interface usePaymentModalParams {
-	wallet: WalletInstance | undefined | null;
+	address: Address | undefined;
 	quantity: number | undefined;
 	marketplace: MarketplaceKind | undefined;
 	collectable: TokenMetadata | undefined;
@@ -172,7 +177,7 @@ interface usePaymentModalParams {
 
 export const usePaymentModalParams = (args: usePaymentModalParams) => {
 	const {
-		wallet,
+		address,
 		marketplace,
 		collectable,
 		checkoutOptions,
@@ -209,9 +214,10 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 	);
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const buyAnalyticsId = useBuyAnalyticsId();
 
 	const queryEnabled =
-		!!wallet &&
+		!!address &&
 		!!marketplace &&
 		!!collectable &&
 		!!checkoutOptions &&
@@ -226,7 +232,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 					getBuyCollectableParams({
 						chainId,
 						config,
-						wallet,
+						address,
 						collectionAddress,
 						collectibleId,
 						marketplace,
@@ -239,10 +245,12 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 						callbacks: {
 							onSuccess: onSuccess,
 							onError: onError,
+							successActionButtons: buyModalProps.successActionButtons,
 						},
 						customCreditCardProviderCallback,
 						skipNativeBalanceCheck,
 						nativeTokenAddress,
+						buyAnalyticsId,
 					})
 			: skipToken,
 	});

package/src/react/ui/modals/BuyModal/index.tsx

@@ -1,10 +1,18 @@
+import { useAnalytics } from '../../../_internal/databeat';
 import type { ModalCallbacks } from '../_internal/types';
 import { type BuyModalProps, buyModalStore } from './store';
 
 export const useBuyModal = (callbacks?: ModalCallbacks) => {
+	const analyticsFn = useAnalytics();
+
 	return {
 		show: (args: BuyModalProps) =>
-			buyModalStore.send({ type: 'open', props: args, ...callbacks }),
+			buyModalStore.send({
+				type: 'open',
+				props: args,
+				...callbacks,
+				analyticsFn,
+			}),
 		close: () => buyModalStore.send({ type: 'close' }),
 	};
 };

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

@@ -7,6 +7,9 @@ import type {
 	MarketplaceKind,
 	Step,
 } from '../../../_internal';
+import type { useAnalytics } from '../../../_internal/databeat';
+import { flattenAnalyticsArgs } from '../../../_internal/databeat/utils';
+import type { ActionButton } from '../_internal/types';
 
 export type CheckoutOptionsSalesContractProps = {
 	chainId: number;
@@ -34,6 +37,7 @@ export type BuyModalBaseProps = {
 	nativeTokenAddress?: Address;
 	marketplaceType?: MarketplaceType;
 	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
+	successActionButtons?: ActionButton[];
 };
 
 // Shop type modal props
@@ -47,6 +51,7 @@ export type ShopBuyModalProps = BuyModalBaseProps & {
 		amount: string;
 		currencyAddress: Address;
 	};
+	unlimitedSupply?: boolean;
 };
 
 // Marketplace type modal props
@@ -86,6 +91,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 +109,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 +235,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,18 +1,19 @@
 'use client';
 
-import { observer, Show } from '@legendapp/state/react';
+import { observer, Show, use$ } from '@legendapp/state/react';
+import * as dnum from 'dnum';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
 import type { ContractType } from '../../../_internal';
-import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
 	useMarketCurrencies,
 } from '../../../hooks';
+import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -23,7 +24,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';
@@ -46,7 +50,9 @@ const Modal = observer(() => {
 		listingIsBeingProcessed,
 	} = state;
 	const steps$ = createListingModal$.steps;
-	const { wallet } = useWallet();
+	const { isWaaS } = useConnectorMetadata();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 
 	const {
 		shouldHideActionButton: shouldHideListButton,
@@ -54,9 +60,8 @@ const Modal = observer(() => {
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
 		isProcessing: listingIsBeingProcessed,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const {
@@ -96,6 +101,11 @@ const Modal = observer(() => {
 		collectableId: collectibleId,
 		userAddress: address ?? undefined,
 	});
+	const balanceWithDecimals = balance?.balance
+		? dnum.toNumber(
+				dnum.from([BigInt(balance.balance), collectible?.decimals || 0]),
+			)
+		: 0;
 
 	const { isLoading, executeApproval, createListing, tokenApprovalIsLoading } =
 		useCreateListing({
@@ -147,12 +157,12 @@ const Modal = observer(() => {
 		createListingModal$.listingIsBeingProcessed.set(true);
 
 		try {
-			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+			if (isWaaS) {
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await createListing({
-				isTransactionExecuting: !!wallet?.isWaaS,
+				isTransactionExecuting: !!isWaaS,
 			});
 		} catch (error) {
 			console.error('Create listing failed:', error);
@@ -201,7 +211,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 +229,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 +250,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}
+					maxQuantity={balanceWithDecimals.toString()}
 					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/__tests__/Modal.test.tsx

@@ -1,10 +1,10 @@
 import { cleanup, render, renderHook, screen, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
-import { createMockWallet } from '@test/mocks/wallet';
+
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { StepType, WalletKind } from '../../../../_internal';
+import { StepType } from '../../../../_internal';
 import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../_internal/wallet/useWallet';
+
 import { useCreateListingModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 import { CreateListingModal } from '../Modal';
@@ -16,8 +16,6 @@ const defaultArgs = {
 };
 
 describe('MakeOfferModal', () => {
-	const mockWallet = createMockWallet();
-
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
@@ -27,16 +25,6 @@ describe('MakeOfferModal', () => {
 	});
 
 	it('should show main button if there is no approval step', async () => {
-		// Mock sequence wallet
-		const sequenceWallet = {
-			...mockWallet,
-			walletKind: WalletKind.sequence,
-		};
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: sequenceWallet,
-			isLoading: false,
-			isError: false,
-		});
 		vi.spyOn(
 			useGetTokenApprovalDataModule,
 			'useGetTokenApprovalData',
@@ -67,15 +55,6 @@ describe('MakeOfferModal', () => {
 	});
 
 	it('(non-sequence wallets) should show approve token button if there is an approval step, disable main button', async () => {
-		const nonSequenceWallet = {
-			...mockWallet,
-			walletKind: 'unknown' as WalletKind,
-		};
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: nonSequenceWallet,
-			isLoading: false,
-			isError: false,
-		});
 		vi.spyOn(
 			useGetTokenApprovalDataModule,
 			'useGetTokenApprovalData',

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -1,7 +1,7 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
 import { dateToUnixTime } from '../../../../../utils/date';
-import { useConfig } from '../../../..';
+import { useConfig, useConnectorMetadata } from '../../../..';
 import {
 	type ContractType,
 	type CreateReq,
@@ -11,7 +11,6 @@ import {
 	type QueryArg,
 	StepType,
 } from '../../../../_internal';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
@@ -29,7 +28,7 @@ export const useGetTokenApprovalData = (
 	params: UseGetTokenApprovalDataArgs,
 ) => {
 	const config = useConfig();
-	const { wallet } = useWallet();
+	const { walletKind } = useConnectorMetadata();
 	const { address } = useAccount();
 	const marketplaceClient = getMarketplaceClient(config);
 
@@ -42,10 +41,7 @@ export const useGetTokenApprovalData = (
 	} satisfies CreateReq;
 
 	const isEnabled =
-		wallet &&
-		address &&
-		(params.query?.enabled ?? true) &&
-		!!params.currencyAddress;
+		address && (params.query?.enabled ?? true) && !!params.currencyAddress;
 
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params, address],
@@ -54,8 +50,8 @@ export const useGetTokenApprovalData = (
 					const args = {
 						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
-						owner: await wallet.address(),
-						walletType: wallet.walletKind,
+						owner: address,
+						walletType: walletKind,
 						contractType: params.contractType,
 						orderbook: params.orderbook,
 						listing,