@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.test.tsx

@@ -1,9 +1,9 @@
+'use client';
+
 import { fireEvent, render, screen, waitFor } from '@test';
-import { type Address, custom, type PublicClient, zeroAddress } from 'viem';
 import { mainnet, polygon } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { WalletKind } from '../../../../../_internal';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { useAccount } from 'wagmi';
 import { ActionModal } from './ActionModal';
 
 const mockShowSwitchChainModal = vi.fn();
@@ -30,158 +30,121 @@ describe('ActionModal', () => {
 				testid: 'test-button',
 			},
 		],
-		chainId: polygon.id,
+		chainId: mainnet.id,
 	};
 
 	beforeEach(() => {
 		vi.clearAllMocks();
 	});
 
-	describe('Loading states', () => {
-		it('should show a loading spinner when modalLoading prop is true', async () => {
-			render(<ActionModal {...defaultProps} modalLoading={true} />);
+	describe('Basic Rendering', () => {
+		it('should render modal content when account is connected', async () => {
+			render(<ActionModal {...defaultProps} />);
 
-			expect(screen.getByTestId('spinner')).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByText('Modal Content')).toBeInTheDocument();
+				expect(screen.getByTestId('test-button')).toBeInTheDocument();
+			});
 		});
 
-		it('should show a loading spinner when isLoading from useWallet is true', async () => {
-			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-				wallet: null,
-				isLoading: true,
-				isError: false,
-			});
+		it('should not render when isOpen is false', () => {
+			render(<ActionModal {...defaultProps} isOpen={false} />);
+			expect(screen.queryByText('Test Modal')).not.toBeInTheDocument();
+		});
 
+		it('should render title correctly', async () => {
 			render(<ActionModal {...defaultProps} />);
 
-			expect(screen.getByTestId('spinner')).toBeInTheDocument();
-		});
-
-		it('should show error message when useWallet returns an error', () => {
-			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-				wallet: null,
-				isLoading: false,
-				isError: true,
+			await waitFor(() => {
+				expect(screen.getByText('Test Modal')).toBeInTheDocument();
 			});
+		});
+	});
 
-			render(<ActionModal {...defaultProps} />);
+	describe('Loading States', () => {
+		it('should show a loading spinner when modalLoading prop is true', async () => {
+			render(<ActionModal {...defaultProps} modalLoading={true} />);
 
-			expect(screen.getByTestId('error-loading-text')).toBeInTheDocument();
-			expect(screen.getByText('Error loading modal')).toBeInTheDocument();
-			expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('test-button')).not.toBeInTheDocument();
+			expect(screen.getByTestId('spinner')).toBeInTheDocument();
 		});
 
-		it('should show modal content if loading states is false and no error', async () => {
-			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-				wallet: null,
-				isLoading: false,
-				isError: false,
-			});
-
+		it('should show modal content when not loading', async () => {
 			render(<ActionModal {...defaultProps} modalLoading={false} />);
 
-			expect(screen.getByText('Modal Content')).toBeInTheDocument();
-			expect(screen.getByTestId('test-button')).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByText('Modal Content')).toBeInTheDocument();
+				expect(screen.getByTestId('test-button')).toBeInTheDocument();
+			});
 		});
 	});
 
-	describe('Chain switching', () => {
-		it('should automatically switch chain for Sequence WaaS wallets', async () => {
-			const switchChainMock = vi.fn();
-
-			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-				wallet: {
-					address: () => Promise.resolve(zeroAddress as Address),
-					getChainId: vi.fn().mockResolvedValue(mainnet.id),
-					switchChain: switchChainMock,
-					transport: custom({ request: vi.fn() }),
-					walletKind: WalletKind.sequence,
-					isWaaS: true,
-					handleConfirmTransactionStep: vi.fn(),
-					handleSendTransactionStep: vi.fn(),
-					handleSignMessageStep: vi.fn(),
-					hasTokenApproval: vi.fn(),
-					// @ts-expect-error
-					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
-				},
-				isLoading: false,
-				isError: false,
-			});
-
-			render(<ActionModal {...defaultProps} />);
-
-			expect(switchChainMock).toHaveBeenCalledWith(polygon.id);
-		});
+	describe('Chain Switching Integration', () => {
+		it('should directly execute onClick when chain matches', async () => {
+			const onClick = vi.fn();
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[{ label: 'Test', onClick, testid: 'test-btn' }]}
+				/>,
+			);
 
-		it('should show switch chain modal when CTA is clicked with chain mismatch', async () => {
-			mockShowSwitchChainModal.mockClear();
-
-			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-				wallet: {
-					address: () => Promise.resolve(zeroAddress as Address),
-					getChainId: vi.fn().mockResolvedValue(mainnet.id), // different from defaultProps.chainId
-					switchChain: vi.fn(),
-					transport: custom({ request: vi.fn() }),
-					walletKind: WalletKind.sequence,
-					isWaaS: false,
-					handleConfirmTransactionStep: vi.fn(),
-					handleSendTransactionStep: vi.fn(),
-					handleSignMessageStep: vi.fn(),
-					hasTokenApproval: vi.fn(),
-					// @ts-expect-error
-					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
-				},
-				isLoading: false,
-				isError: false,
+			await waitFor(() => {
+				const button = screen.getByTestId('test-btn');
+				fireEvent.click(button);
 			});
 
-			render(<ActionModal {...defaultProps} />);
+			expect(onClick).toHaveBeenCalled();
+		});
 
-			const button = screen.getByTestId('test-button');
-			fireEvent.click(button);
+		it('should show switch chain modal when chain mismatch', async () => {
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[{ label: 'Test', onClick: vi.fn(), testid: 'test-btn' }]}
+					chainId={polygon.id}
+				/>,
+			);
 
 			await waitFor(() => {
-				expect(mockShowSwitchChainModal).toHaveBeenCalledWith({
-					chainIdToSwitchTo: polygon.id,
-					onSuccess: expect.any(Function),
-				});
+				const button = screen.getByTestId('test-btn');
+				fireEvent.click(button);
 			});
-		});
 
-		it('should directly execute callback when chain already matches', async () => {
-			mockOnClick.mockClear();
-
-			vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-				wallet: {
-					address: () => Promise.resolve(zeroAddress as Address),
-					getChainId: vi.fn().mockResolvedValue(polygon.id), // Same as defaultProps.chainId
-					switchChain: vi.fn(),
-					transport: custom({ request: vi.fn() }),
-					walletKind: WalletKind.sequence,
-					isWaaS: false,
-					handleConfirmTransactionStep: vi.fn(),
-					handleSendTransactionStep: vi.fn(),
-					handleSignMessageStep: vi.fn(),
-					hasTokenApproval: vi.fn(),
-					// @ts-expect-error
-					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
-				},
-				isLoading: false,
-				isError: false,
+			expect(mockShowSwitchChainModal).toHaveBeenCalledWith({
+				chainIdToSwitchTo: polygon.id,
+				onSuccess: expect.any(Function),
 			});
+		});
 
-			render(<ActionModal {...defaultProps} />);
-
-			const button = screen.getByTestId('test-button');
-			fireEvent.click(button);
+		it('should handle chain switching for WaaS wallets', async () => {
+			function ChainStatus() {
+				const { chainId } = useAccount();
+				return <div>{chainId}</div>;
+			}
+			render(
+				<>
+					<ChainStatus />
+					<ActionModal
+						{...defaultProps}
+						ctas={[{ label: 'Test', onClick: vi.fn(), testid: 'test-btn' }]}
+						chainId={polygon.id}
+					/>
+				</>,
+				{
+					useEmbeddedWallet: true,
+				},
+			);
 
 			await waitFor(() => {
-				expect(mockOnClick).toHaveBeenCalled();
+				const button = screen.getByTestId('test-btn');
+				fireEvent.click(button);
 			});
+
+			expect(screen.getByText(polygon.id)).toBeInTheDocument();
 		});
 	});
 
-	describe('CTA buttons', () => {
+	describe('CTA Buttons', () => {
 		it('should call onClick when CTA button is clicked', async () => {
 			const onClick = vi.fn();
 			render(
@@ -191,15 +154,15 @@ describe('ActionModal', () => {
 				/>,
 			);
 
-			const button = screen.getByTestId('cta-button');
-			fireEvent.click(button);
-
 			await waitFor(() => {
-				expect(onClick).toHaveBeenCalled();
+				const button = screen.getByTestId('cta-button');
+				fireEvent.click(button);
 			});
+
+			expect(onClick).toHaveBeenCalled();
 		});
 
-		it('should disable the button when disabled prop is true', () => {
+		it('should disable the button when disabled prop is true', async () => {
 			render(
 				<ActionModal
 					{...defaultProps}
@@ -214,14 +177,13 @@ describe('ActionModal', () => {
 				/>,
 			);
 
-			const button = screen.getByTestId('disabled-button');
-			expect(button).toBeDisabled();
-
-			fireEvent.click(button);
-			expect(mockOnClick).not.toHaveBeenCalled();
+			await waitFor(() => {
+				const button = screen.getByTestId('disabled-button');
+				expect(button).toBeDisabled();
+			});
 		});
 
-		it('should show spinner when pending prop is true', () => {
+		it('should show spinner when pending prop is true', async () => {
 			render(
 				<ActionModal
 					{...defaultProps}
@@ -236,11 +198,15 @@ describe('ActionModal', () => {
 				/>,
 			);
 
-			expect(screen.getByTestId('pending-button')).toBeInTheDocument();
-			expect(screen.getByTestId('pending-button-spinner')).toBeInTheDocument(); // wrapper of spinner has data-testid of {testid}-spinner
+			await waitFor(() => {
+				expect(screen.getByTestId('pending-button')).toBeInTheDocument();
+				expect(
+					screen.getByTestId('pending-button-spinner'),
+				).toBeInTheDocument();
+			});
 		});
 
-		it('should not render hidden buttons', () => {
+		it('should not render hidden buttons', async () => {
 			render(
 				<ActionModal
 					{...defaultProps}
@@ -260,11 +226,13 @@ describe('ActionModal', () => {
 				/>,
 			);
 
-			expect(screen.getByTestId('visible-button')).toBeInTheDocument();
-			expect(screen.queryByTestId('hidden-button')).not.toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByTestId('visible-button')).toBeInTheDocument();
+				expect(screen.queryByTestId('hidden-button')).not.toBeInTheDocument();
+			});
 		});
 
-		it('should render multiple CTA buttons', () => {
+		it('should render multiple CTA buttons', async () => {
 			render(
 				<ActionModal
 					{...defaultProps}
@@ -283,8 +251,20 @@ describe('ActionModal', () => {
 				/>,
 			);
 
-			expect(screen.getByTestId('primary-cta')).toBeInTheDocument();
-			expect(screen.getByTestId('secondary-cta')).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByTestId('primary-cta')).toBeInTheDocument();
+				expect(screen.getByTestId('secondary-cta')).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Modal Behavior', () => {
+		it('should hide CTAs when hideCtas is true', async () => {
+			render(<ActionModal {...defaultProps} hideCtas={true} />);
+
+			await waitFor(() => {
+				expect(screen.queryByTestId('test-button')).not.toBeInTheDocument();
+			});
 		});
 	});
 });

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

@@ -3,9 +3,9 @@
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 import type React from 'react';
 import type { ComponentProps } from 'react';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useAccount } from 'wagmi';
+import { useEnsureCorrectChain } from '../../../../../hooks';
 import { MODAL_CONTENT_PROPS, MODAL_OVERLAY_PROPS } from '../consts';
-import { useSwitchChainModal } from '../switchChainModal';
 
 export interface ActionModalProps {
 	isOpen: boolean;
@@ -40,27 +40,10 @@ export const ActionModal = ({
 	spinnerContainerClassname,
 	hideCtas,
 }: ActionModalProps) => {
-	const { show: showSwitchChainModal } = useSwitchChainModal();
-	const { wallet, isLoading, isError } = useWallet();
+	const { status } = useAccount();
+	const { ensureCorrectChain } = useEnsureCorrectChain();
 
-	const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
-		const walletChainId = await wallet?.getChainId();
-		const chainMismatch = walletChainId !== Number(chainId);
-		if (chainMismatch) {
-			showSwitchChainModal({
-				chainIdToSwitchTo: chainId,
-				onSuccess,
-			});
-		} else {
-			onSuccess();
-		}
-	};
-
-	if (wallet?.isWaaS) {
-		wallet.switchChain(Number(chainId));
-	}
-
-	if (!isOpen || !chainId) {
+	if (!isOpen) {
 		return null;
 	}
 
@@ -77,30 +60,20 @@ export const ActionModal = ({
 					{title}
 				</Text>
 
-				{modalLoading || isLoading || isError ? (
+				{modalLoading || status !== 'connected' ? (
 					<div
 						className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
 						data-testid="error-loading-wrapper"
 					>
-						{isError && (
-							<Text
-								data-testid="error-loading-text"
-								className="text-center font-body text-error100 text-small"
-							>
-								Error loading modal
-							</Text>
-						)}
-						{(isLoading || modalLoading) && (
-							<div data-testid="spinner">
-								<Spinner size="lg" />
-							</div>
-						)}
+						<div data-testid="spinner">
+							<Spinner size="lg" />
+						</div>
 					</div>
 				) : (
 					children
 				)}
 
-				{!hideCtas && !isLoading && !isError && (
+				{!hideCtas && status === 'connected' && (
 					<div className="flex w-full flex-col gap-2">
 						{ctas.map(
 							(cta) =>
@@ -108,13 +81,11 @@ export const ActionModal = ({
 									<Button
 										className="w-full rounded-[12px] [&>div]:justify-center"
 										key={cta.onClick.toString()}
-										onClick={async () => {
-											await checkChain({
-												onSuccess: () => {
-													cta.onClick();
-												},
-											});
-										}}
+										onClick={() =>
+											ensureCorrectChain(Number(chainId), {
+												onSuccess: cta.onClick,
+											})
+										}
 										variant={cta.variant || 'primary'}
 										pending={cta.pending}
 										disabled={cta.disabled}

package/src/react/ui/modals/_internal/components/actionModal/index.ts

@@ -1,2 +1 @@
 export * from './ActionModal';
-export * from './store';

package/src/react/ui/modals/_internal/components/calendar/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { DayPicker, type PropsSingle } from 'react-day-picker';
-import 'react-day-picker/style.css';
 
 export type CalendarProps = React.PropsWithChildren<PropsSingle> & {
 	selectedDate?: Date;

package/src/react/ui/modals/_internal/components/currencyImage/index.tsx

@@ -1,18 +1,21 @@
 'use client';
 
 import { TokenImage } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
 import { useState } from 'react';
 import type { Address } from 'viem';
 import type { Price } from '../../../../../../types';
 
-function CurrencyImage({ price$ }: { price$: Observable<Price | undefined> }) {
+function CurrencyImage({ price }: { price: Price | undefined }) {
 	const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] =
 		useState<Address[] | null>(null);
 
+	if (!price?.currency) {
+		return <div className="h-3 w-3 rounded-full bg-background-secondary" />;
+	}
+
 	if (
 		imageLoadErrorCurrencyAddresses?.includes(
-			price$.currency.contractAddress.get() as Address,
+			price.currency.contractAddress as Address,
 		)
 	) {
 		return <div className="h-3 w-3 rounded-full bg-background-secondary" />;
@@ -20,20 +23,13 @@ function CurrencyImage({ price$ }: { price$: Observable<Price | undefined> }) {
 
 	return (
 		<TokenImage
-			src={price$.currency.imageUrl.get()}
+			src={price.currency.imageUrl}
 			onError={() => {
-				const price = price$?.get();
 				if (price) {
 					setImageLoadErrorCurrencyAddresses((prev) => {
-						if (!prev)
-							return [price$.currency.contractAddress.get() as Address];
-						if (
-							!prev.includes(price$.currency.contractAddress.get() as Address)
-						) {
-							return [
-								...prev,
-								price$.currency.contractAddress.get() as Address,
-							];
+						if (!prev) return [price.currency.contractAddress as Address];
+						if (!prev.includes(price.currency.contractAddress as Address)) {
+							return [...prev, price.currency.contractAddress as Address];
 						}
 						return prev;
 					});

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/__tests__/index.test.tsx

@@ -1,4 +1,3 @@
-import { observable } from '@legendapp/state';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { render } from '@test';
 import { TEST_CURRENCIES, TEST_CURRENCY } from '@test/const';
@@ -6,13 +5,16 @@ import { screen } from '@testing-library/react';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Currency } from '../../../../../../_internal';
-import * as hooks from '../../../../../../hooks';
+import * as marketCurrenciesFn from '../../../../../../hooks/data/market/useMarketCurrencies';
 import CurrencyOptionsSelect from '..';
 
+const mockOnCurrencyChange = vi.fn();
+
 const defaultProps = {
 	collectionAddress: zeroAddress,
 	chainId: 1,
-	selectedCurrency$: observable<Currency | null | undefined>(TEST_CURRENCY),
+	selectedCurrency: TEST_CURRENCY,
+	onCurrencyChange: mockOnCurrencyChange,
 	secondCurrencyAsDefault: false,
 	includeNativeCurrency: false,
 };
@@ -20,10 +22,14 @@ const defaultProps = {
 describe('CurrencyOptionsSelect', () => {
 	beforeEach(() => {
 		vi.restoreAllMocks();
+		mockOnCurrencyChange.mockClear();
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
+		const useCurrenciesSpy = vi.spyOn(
+			marketCurrenciesFn,
+			'useMarketCurrencies',
+		);
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: true,
 			data: undefined,
@@ -38,7 +44,10 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should set first currency as default when currencies load', async () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
+		const useCurrenciesSpy = vi.spyOn(
+			marketCurrenciesFn,
+			'useMarketCurrencies',
+		);
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: false,
 			data: TEST_CURRENCIES,

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx

@@ -1,33 +1,32 @@
 'use client';
 
 import { Skeleton } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
 import { useEffect } from 'react';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Currency } from '../../../../../_internal';
-import { useMarketCurrencies } from '../../../../../hooks';
+import { useMarketCurrencies } from '../../../../../hooks/data/market/useMarketCurrencies';
 import {
 	CustomSelect,
 	type SelectItem,
 } from '../../../../components/_internals/custom-select/CustomSelect';
 
 type CurrencyOptionsSelectProps = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
-	selectedCurrency$: Observable<Currency | null | undefined>;
+	selectedCurrency?: Currency | null;
+	onCurrencyChange: (currency: Currency) => void;
 	secondCurrencyAsDefault?: boolean;
 	includeNativeCurrency?: boolean;
 };
 
-const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
+function CurrencyOptionsSelect({
 	chainId,
 	collectionAddress,
 	secondCurrencyAsDefault,
-	selectedCurrency$,
+	selectedCurrency,
+	onCurrencyChange,
 	includeNativeCurrency,
 }: CurrencyOptionsSelectProps) {
-	const currency = selectedCurrency$.get();
 	const { data: currencies, isLoading: currenciesLoading } =
 		useMarketCurrencies({
 			chainId,
@@ -40,19 +39,24 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 		if (
 			currencies &&
 			currencies.length > 0 &&
-			!selectedCurrency$.get()?.contractAddress
+			!selectedCurrency?.contractAddress
 		) {
 			// We dont support native currency listings for any marketplace other than Sequence Marketplace v2
 			// So we need to set the set another currency as the default
 			if (secondCurrencyAsDefault) {
-				selectedCurrency$.set(currencies[1]);
+				onCurrencyChange(currencies[1]);
 			} else {
-				selectedCurrency$.set(currencies[0]);
+				onCurrencyChange(currencies[0]);
 			}
 		}
-	}, [currencies]);
+	}, [
+		currencies,
+		selectedCurrency?.contractAddress,
+		secondCurrencyAsDefault,
+		onCurrencyChange,
+	]);
 
-	if (!currencies || currenciesLoading || !currency?.symbol) {
+	if (!currencies || currenciesLoading || !selectedCurrency?.symbol) {
 		return <Skeleton className="mr-3 h-7 w-20 rounded-2xl" />;
 	}
 
@@ -69,7 +73,9 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 		const selectedCurrency = currencies.find(
 			(currency) => currency.contractAddress === value,
 		);
-		selectedCurrency$.set(selectedCurrency);
+		if (selectedCurrency) {
+			onCurrencyChange(selectedCurrency);
+		}
 	};
 
 	return (
@@ -77,12 +83,12 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 			items={options}
 			onValueChange={onChange}
 			defaultValue={{
-				value: currency.contractAddress,
-				content: currency.symbol,
+				value: selectedCurrency.contractAddress,
+				content: selectedCurrency.symbol,
 			}}
 			testId="currency-select"
 		/>
 	);
-});
+}
 
 export default CurrencyOptionsSelect;