@0xsequence/marketplace-sdk 0.5.1 → 0.5.3

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/useGetTokenApproval.ts

@@ -11,6 +11,7 @@ import {
 	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useAccount } from 'wagmi';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: string;
@@ -29,6 +30,7 @@ export const useGetTokenApprovalData = (
 ) => {
 	const config = useConfig();
 	const { wallet } = useWallet();
+	const { address } = useAccount();
 	const marketplaceClient = getMarketplaceClient(params.chainId, config);
 
 	const listing = {
@@ -39,10 +41,14 @@ export const useGetTokenApprovalData = (
 		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
 	} satisfies CreateReq;
 
-	const isEnabled = wallet && params.query?.enabled !== false;
+	const isEnabled =
+		wallet &&
+		address &&
+		(params.query?.enabled ?? true) &&
+		!!params.currencyAddress;
 
 	const { data, isLoading, isSuccess } = useQuery({
-		queryKey: ['token-approval-data', params.currencyAddress],
+		queryKey: ['token-approval-data', params, address],
 		queryFn: isEnabled
 			? async () => {
 					const args = {

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, Hex } from 'viem';
 import type { OrderbookKind } from '../../../../../types';
 import {
 	ExecuteType,
@@ -13,7 +13,10 @@ import {
 import { TransactionType } from '../../../../_internal/types';
 import type { ListingInput } from '../../../../_internal/types';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
-import type { SignatureStep } from '../../../../_internal/utils';
+import type {
+	SignatureStep,
+	TransactionStep as WalletTransactionStep,
+} from '../../../../_internal/utils';
 import { useConfig, useGenerateListingTransaction } from '../../../../hooks';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
@@ -89,7 +92,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 +123,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 });
@@ -176,7 +180,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, Hex } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import {
 	ExecuteType,
@@ -12,7 +12,10 @@ import {
 } from '../../../../_internal';
 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';
@@ -96,7 +99,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 +130,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 });
@@ -191,7 +195,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/__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

@@ -38,6 +38,7 @@ export const useSell = ({
 			marketplace,
 		});
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

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

@@ -12,10 +12,13 @@ import {
 import type { ModalCallbacks } from '../../_internal/types';
 import { TransactionType } from '../../../../_internal/types';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
-import type { Address } from 'viem';
+import type { Address, Hex } from 'viem';
 import type { Observable } from '@legendapp/state';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
-import type { SignatureStep } from '../../../../_internal/utils';
+import type {
+	SignatureStep,
+	TransactionStep,
+} from '../../../../_internal/utils';
 import { useConfig, useGenerateSellTransaction } from '../../../../hooks';
 import { useFees } from '../../BuyModal/hooks/useFees';
 
@@ -99,7 +102,7 @@ export const useTransactionSteps = ({
 
 			const hash = await wallet.handleSendTransactionStep(
 				Number(chainId),
-				approvalStep as any,
+				approvalStep as TransactionStep,
 			);
 
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
@@ -128,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 });
@@ -179,7 +183,7 @@ export const useTransactionSteps = ({
 
 		const hash = await wallet.handleSendTransactionStep(
 			Number(chainId),
-			transactionStep as any,
+			transactionStep as TransactionStep,
 		);
 
 		return hash;

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/vitest';
 import { render, screen, cleanup } from '../../../../_internal/test-utils';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';

package/src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@0xsequence/design-system';
+import { Box, Text } from '@0xsequence/design-system';
 import { ActionModal } from './ActionModal';
 
 interface ErrorModalProps {
@@ -30,7 +30,9 @@ export const ErrorModal = ({
 			alignItems="center"
 			padding="4"
 		>
-			{message || 'Error loading item details'}
+			<Text color="text80" fontFamily="body">
+				{message || 'Error loading item details'}
+			</Text>
 		</Box>
 	</ActionModal>
 );