@0xsequence/marketplace-sdk 0.5.2 → 0.5.4

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

@@ -39,7 +39,7 @@ export const useCreateListing = ({
 		useMarketplaceConfig();
 
 	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.collectionAddress === collectionAddress,
+		(c) => c.address === collectionAddress,
 	);
 
 	orderbookKind =
@@ -60,6 +60,7 @@ export const useCreateListing = ({
 			},
 		});
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -1,5 +1,5 @@
 import type { Observable } from '@legendapp/state';
-import type { Address } from 'viem';
+import { type Address, type Hex, formatUnits } from 'viem';
 import type { OrderbookKind } from '../../../../../types';
 import {
 	ExecuteType,
@@ -10,14 +10,21 @@ import {
 	collectableKeys,
 	getMarketplaceClient,
 } from '../../../../_internal';
+import { useAnalytics } from '../../../../_internal/databeat';
 import { TransactionType } from '../../../../_internal/types';
 import type { ListingInput } from '../../../../_internal/types';
+import type {
+	SignatureStep,
+	TransactionStep as WalletTransactionStep,
+} from '../../../../_internal/utils';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
-import type { SignatureStep } from '../../../../_internal/utils';
-import { useConfig, useGenerateListingTransaction } from '../../../../hooks';
+import {
+	useConfig,
+	useCurrencies,
+	useGenerateListingTransaction,
+} from '../../../../hooks';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
-
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: string;
@@ -41,7 +48,11 @@ export const useTransactionSteps = ({
 	const expiry = new Date(Number(listingInput.listing.expiry) * 1000);
 	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,
@@ -89,7 +100,7 @@ export const useTransactionSteps = ({
 
 			const hash = await wallet.handleSendTransactionStep(
 				Number(chainId),
-				approvalStep as any,
+				approvalStep as WalletTransactionStep,
 			);
 
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
@@ -120,7 +131,8 @@ export const useTransactionSteps = ({
 				throw new Error('No transaction or signature step found');
 			}
 
-			let hash, orderId: string | undefined;
+			let hash: Hex | undefined;
+			let orderId: string | undefined;
 
 			if (transactionStep) {
 				hash = await executeTransaction({ transactionStep });
@@ -160,6 +172,34 @@ export const useTransactionSteps = ({
 				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(
+					formatUnits(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);
@@ -176,7 +216,7 @@ export const useTransactionSteps = ({
 
 		const hash = await wallet.handleSendTransactionStep(
 			Number(chainId),
-			transactionStep as any,
+			transactionStep as WalletTransactionStep,
 		);
 
 		return hash;

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

@@ -3,12 +3,7 @@ import { useState } from 'react';
 import { parseUnits } from 'viem';
 import { dateToUnixTime } from '../../../../utils/date';
 import { ContractType } from '../../../_internal';
-import {
-	useCollectible,
-	useCollection,
-	useCurrencies,
-	useCurrencyOptions,
-} from '../../../hooks';
+import { useCollectible, useCollection, useCurrencies } from '../../../hooks';
 import { useMakeOffer } from './hooks/useMakeOffer';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
@@ -56,14 +51,12 @@ const Modal = observer(() => {
 		chainId,
 		collectionAddress,
 	});
-	const currencyOptions = useCurrencyOptions({ collectionAddress });
 	const {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
 	} = useCurrencies({
 		chainId,
-		currencyOptions,
 		includeNativeCurrency: false,
 	});
 

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

@@ -1,96 +1,41 @@
-import '@testing-library/jest-dom/vitest';
 import {
 	render,
 	screen,
 	cleanup,
-	fireEvent,
 	waitFor,
+	fireEvent,
 } from '../../../../_internal/test-utils';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { MakeOfferModal } from '../Modal';
 import { makeOfferModal$ } from '../store';
-import { useCollectible, useCollection } from '../../../../hooks';
-import { useMakeOffer } from '../hooks/useMakeOffer';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
-
-// Mock the hooks
-vi.mock('../../../../hooks', () => ({
-	useCollectible: vi.fn(),
-	useCollection: vi.fn(),
-	useCurrencies: vi.fn().mockReturnValue({
-		data: [{ contractAddress: '0x123', symbol: 'TEST' }],
-		isLoading: false,
-		isError: false,
-	}),
-	useCurrencyOptions: vi.fn().mockReturnValue({
-		data: [],
-		isLoading: false,
-		isError: false,
-	}),
-	useMarketplaceConfig: vi.fn().mockReturnValue({
-		data: {
-			collections: [
-				{
-					collectionAddress: '0x123',
-					marketplaceFeePercentage: 2.5,
-				},
-			],
-		},
-		isLoading: false,
-		isError: false,
-	}),
-	useLowestListing: vi.fn().mockReturnValue({
-		data: null,
-		isLoading: false,
-		isError: false,
-	}),
-}));
-
-vi.mock('../../../../_internal/wallet/useWallet', () => ({
-	useWallet: vi.fn(),
-}));
-
-vi.mock('../hooks/useMakeOffer', () => ({
-	useMakeOffer: vi.fn(),
-}));
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([false, vi.fn()]),
-}));
+import { zeroAddress } from 'viem';
+import * as hooks from '../../../../hooks';
+
+// TODO: This should be moved to a shared test file
+vi.mock(import('../../../../hooks'), async (importOriginal) => {
+	const actual = await importOriginal();
+	return {
+		...actual,
+		useCollectible: vi.fn(actual.useCollectible),
+		useCollection: vi.fn(actual.useCollection),
+		useCurrencies: vi.fn(actual.useCurrencies),
+		useMarketplaceConfig: vi.fn(actual.useMarketplaceConfig),
+		useLowestListing: vi.fn(actual.useLowestListing),
+	};
+});
+
+const defaultArgs = {
+	collectionAddress: zeroAddress,
+	chainId: '1',
+	collectibleId: '1',
+};
 
 describe('MakeOfferModal', () => {
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
-
-		// Setup default mock values
-		(useWallet as any).mockReturnValue({
-			wallet: {
-				address: () => Promise.resolve('0x123'),
-			},
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCollectible as any).mockReturnValue({
-			data: { decimals: 18, name: 'Test NFT' },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCollection as any).mockReturnValue({
-			data: { type: 'ERC721', name: 'Test Collection' },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useMakeOffer as any).mockReturnValue({
-			isLoading: false,
-			executeApproval: vi.fn(),
-			makeOffer: vi.fn(),
-			tokenApprovalIsLoading: false,
-		});
+		vi.resetAllMocks();
 	});
 
 	it('should not render when modal is closed', () => {
@@ -99,56 +44,39 @@ describe('MakeOfferModal', () => {
 	});
 
 	it('should render loading state', () => {
-		(useCollectible as any).mockReturnValue({
-			isLoading: true,
-		});
-
-		makeOfferModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		makeOfferModal$.open(defaultArgs);
 
 		render(<MakeOfferModal />);
 		const loadingModal = screen.getByTestId('loading-modal');
 		expect(loadingModal).toBeVisible();
 	});
 
-	it('should render error state', () => {
-		(useCollectible as any).mockReturnValue({
+	it('should render error state', async () => {
+		// @ts-expect-error - TODO: Add a common mock object with the correct shape
+		vi.mocked(hooks.useCollection).mockReturnValue({
+			data: undefined,
+			isLoading: false,
 			isError: true,
 		});
 
-		makeOfferModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		makeOfferModal$.open(defaultArgs);
 
 		render(<MakeOfferModal />);
-		const errorModal = screen.getByTestId('error-modal');
+		const errorModal = await screen.findByTestId('error-modal');
 		expect(errorModal).toBeVisible();
 	});
 
-	it('should render main form when data is loaded', () => {
-		makeOfferModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+	it('should render main form when data is loaded', async () => {
+		makeOfferModal$.open(defaultArgs);
 
 		render(<MakeOfferModal />);
 
-		expect(screen.getByText('Test Collection')).toBeInTheDocument();
+		expect(await screen.findByText('Enter price')).toBeInTheDocument();
 	});
 
 	it('should reset store values when modal is closed and reopened', () => {
 		// Open modal first time
-		makeOfferModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		makeOfferModal$.open(defaultArgs);
 
 		// Set some values in the store
 		makeOfferModal$.offerPrice.amountRaw.set('1000000000000000000');
@@ -162,11 +90,7 @@ describe('MakeOfferModal', () => {
 		expect(makeOfferModal$.expiry.get()).toBeDefined();
 
 		// Reopen modal
-		makeOfferModal$.open({
-			collectionAddress: '0x456',
-			chainId: '1',
-			collectibleId: '2',
-		});
+		makeOfferModal$.open(defaultArgs);
 
 		// Verify store has default values
 		expect(makeOfferModal$.offerPrice.amountRaw.get()).toBe('0');
@@ -174,11 +98,7 @@ describe('MakeOfferModal', () => {
 	});
 
 	it('should update state based on price input', async () => {
-		makeOfferModal$.open({
-			collectionAddress: '0x123',
-			chainId: '1',
-			collectibleId: '1',
-		});
+		makeOfferModal$.open(defaultArgs);
 
 		render(<MakeOfferModal />);
 
@@ -186,7 +106,10 @@ describe('MakeOfferModal', () => {
 		expect(makeOfferModal$.offerPrice.amountRaw.get()).toBe('0');
 
 		// Find and interact with price input
-		const priceInput = screen.getByRole('textbox', { name: 'Enter price' });
+
+		const priceInput = await screen.findByRole('textbox', {
+			name: 'Enter price',
+		});
 		expect(priceInput).toBeInTheDocument();
 
 		fireEvent.change(priceInput, { target: { value: '1.5' } });

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -31,7 +31,7 @@ export const useMakeOffer = ({
 		useMarketplaceConfig();
 
 	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.collectionAddress === collectionAddress,
+		(c) => c.address === collectionAddress,
 	);
 
 	orderbookKind =
@@ -52,6 +52,7 @@ export const useMakeOffer = ({
 			},
 		});
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -1,5 +1,5 @@
 import type { Observable } from '@legendapp/state';
-import type { Address } from 'viem';
+import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import {
 	ExecuteType,
@@ -10,15 +10,18 @@ import {
 	collectableKeys,
 	getMarketplaceClient,
 } from '../../../../_internal';
+import { useAnalytics } from '../../../../_internal/databeat';
 import { TransactionType } from '../../../../_internal/types';
 import type { OfferInput } from '../../../../_internal/types';
-import type { SignatureStep } from '../../../../_internal/utils';
+import type {
+	SignatureStep,
+	TransactionStep,
+} from '../../../../_internal/utils';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig, useCurrency } from '../../../../hooks';
 import { useGenerateOfferTransaction } from '../../../../hooks/useGenerateOfferTransaction';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
-
 export type ExecutionState = 'approval' | 'offer' | null;
 
 interface UseTransactionStepsArgs {
@@ -44,6 +47,7 @@ export const useTransactionSteps = ({
 	const expiry = new Date(Number(offerInput.offer.expiry) * 1000);
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
+	const analytics = useAnalytics();
 	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
 	const { generateOfferTransactionAsync, isPending: generatingSteps } =
 		useGenerateOfferTransaction({
@@ -96,7 +100,7 @@ export const useTransactionSteps = ({
 
 			const hash = await wallet.handleSendTransactionStep(
 				Number(chainId),
-				approvalStep as any,
+				approvalStep as TransactionStep,
 			);
 
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
@@ -127,7 +131,8 @@ export const useTransactionSteps = ({
 				throw new Error('No transaction or signature step found');
 			}
 
-			let hash, orderId: string | undefined;
+			let hash: Hex | undefined;
+			let orderId: string | undefined;
 
 			if (transactionStep) {
 				hash = await executeTransaction({ transactionStep });
@@ -173,6 +178,29 @@ export const 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(
+					formatUnits(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);
@@ -191,7 +219,7 @@ export const useTransactionSteps = ({
 
 		const hash = await wallet.handleSendTransactionStep(
 			Number(chainId),
-			transactionStep as any,
+			transactionStep as TransactionStep,
 		);
 
 		return hash;

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

@@ -11,8 +11,8 @@ import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
-import { sellModal$ } from './store';
 import { useSell } from './hooks/useSell';
+import { sellModal$ } from './store';
 
 export const SellModal = () => {
 	return <Show if={sellModal$.isOpen}>{() => <Modal />}</Show>;
@@ -58,6 +58,8 @@ const Modal = observer(() => {
 							collectible?.decimals || 0,
 						).toString()
 					: '1',
+				pricePerToken: order?.priceAmount ?? '',
+				currencyAddress: order?.priceCurrencyAddress ?? '',
 			},
 		],
 		callbacks,

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/vitest';
 import { render, screen, cleanup } from '../../../../_internal/test-utils';
 import {
 	describe,
@@ -104,13 +103,15 @@ describe('SellModal', () => {
 	});
 
 	it('should render main modal when data is loaded', async () => {
-		vi.mocked(useCollection as any).mockReturnValue({
+		vi.mocked(useCollection).mockReturnValue({
+			// @ts-expect-error - TODO: mock this better
 			data: {},
 			isLoading: false,
 			isError: false,
 		});
 
-		vi.mocked(useCurrency as any).mockReturnValue({
+		vi.mocked(useCurrency).mockReturnValue({
+			// @ts-expect-error - TODO: mock this better
 			data: {},
 			isLoading: false,
 			isError: false,

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -5,7 +5,7 @@ import {
 	type OrderData,
 	StepType,
 } from '../../../../_internal';
-import { useQuery } from '@tanstack/react-query';
+import { skipToken, useQuery } from '@tanstack/react-query';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';
 import { useFees } from '../../BuyModal/hooks/useFees';
@@ -30,38 +30,40 @@ export const useGetTokenApprovalData = (
 
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params.ordersData],
-		queryFn: async () => {
-			const address = await wallet!.address();
-			const args = {
-				collectionAddress: params.collectionAddress,
-				walletType: wallet!.walletKind,
-				seller: address,
-				marketplace: params.marketplace,
-				ordersData: params.ordersData,
-				additionalFees: [
-					{
-						amount,
-						receiver,
-					},
-				],
-			} satisfies GenerateSellTransactionArgs;
-			const steps = await marketplaceClient
-				.generateSellTransaction(args)
-				.then((resp) => resp.steps);
+		queryFn: wallet
+			? async () => {
+					const address = await wallet.address();
+					const args = {
+						collectionAddress: params.collectionAddress,
+						walletType: wallet.walletKind,
+						seller: address,
+						marketplace: params.marketplace,
+						ordersData: params.ordersData,
+						additionalFees: [
+							{
+								amount,
+								receiver,
+							},
+						],
+					} satisfies GenerateSellTransactionArgs;
+					const steps = await marketplaceClient
+						.generateSellTransaction(args)
+						.then((resp) => resp.steps);
 
-			const tokenApprovalStep = steps.find(
-				(step) => step.id === StepType.tokenApproval,
-			);
-			if (!tokenApprovalStep) {
-				return {
-					step: null,
-				};
-			}
+					const tokenApprovalStep = steps.find(
+						(step) => step.id === StepType.tokenApproval,
+					);
+					if (!tokenApprovalStep) {
+						return {
+							step: null,
+						};
+					}
 
-			return {
-				step: tokenApprovalStep,
-			};
-		},
+					return {
+						step: tokenApprovalStep,
+					};
+				}
+			: skipToken,
 		enabled: !!wallet && !!params.collectionAddress,
 	});
 

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -1,20 +1,23 @@
 import type { Observable } from '@legendapp/state';
+import { useEffect } from 'react';
+import type { MarketplaceKind, TransactionSteps } from '../../../../_internal';
 import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
 import { useTransactionSteps } from './useTransactionSteps';
-import { useEffect } from 'react';
-import type {
-	MarketplaceKind,
-	OrderData,
-	TransactionSteps,
-} from '../../../../_internal';
+
+export type SellOrder = {
+	orderId: string;
+	quantity: string;
+	pricePerToken: string;
+	currencyAddress: string;
+};
 
 interface UseSellArgs {
 	collectibleId: string;
 	chainId: string;
 	collectionAddress: string;
 	marketplace: MarketplaceKind;
-	ordersData: Array<OrderData>;
+	ordersData: Array<SellOrder>;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
 	steps$: Observable<TransactionSteps>;
@@ -38,6 +41,7 @@ export const useSell = ({
 			marketplace,
 		});
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);