@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/__tests__/useHandleTransfer.test.tsx

@@ -10,8 +10,8 @@ import {
 	collectableKeys,
 } from '../../../../../../_internal';
 import { TransactionType } from '../../../../../../_internal/types';
-import { useWallet } from '../../../../../../_internal/wallet/useWallet';
 import { useCollection, useTransferTokens } from '../../../../../../hooks';
+import { useConnectorMetadata } from '../../../../../../hooks/config/useConnectorMetadata';
 import { useTransactionStatusModal } from '../../../../_internal/components/transactionStatusModal';
 import {
 	type TransferModalState,
@@ -22,13 +22,13 @@ import useHandleTransfer from '../useHandleTransfer';
 
 // Mock dependencies
 vi.mock('@0xsequence/connect');
-vi.mock('../../../../../../_internal/wallet/useWallet');
+vi.mock('../../../../../../hooks/config/useConnectorMetadata');
 vi.mock('../../../../../../hooks');
 vi.mock('../../../../_internal/components/transactionStatusModal');
 vi.mock('../../../store');
 
 const mockUseWaasFeeOptions = vi.mocked(useWaasFeeOptions);
-const mockUseWallet = vi.mocked(useWallet);
+const mockUseConnectorMetadata = vi.mocked(useConnectorMetadata);
 const mockUseCollection = vi.mocked(useCollection);
 const mockUseTransferTokens = vi.mocked(useTransferTokens);
 const mockUseTransactionStatusModal = vi.mocked(useTransactionStatusModal);
@@ -63,9 +63,11 @@ describe('useHandleTransfer', () => {
 			null,
 			vi.fn(),
 		]);
-		mockUseWallet.mockReturnValue({
-			wallet: { isWaaS: false },
-		} as any);
+		mockUseConnectorMetadata.mockReturnValue({
+			isWaaS: false,
+			isSequence: false,
+			walletKind: 'unknown' as any,
+		});
 		mockUseCollection.mockReturnValue({
 			data: { type: ContractType.ERC721 },
 			isLoading: false,
@@ -202,9 +204,11 @@ describe('useHandleTransfer', () => {
 		});
 
 		it('should return early if WaaS wallet has pending fee confirmation', async () => {
-			mockUseWallet.mockReturnValue({
-				wallet: { isWaaS: true },
-			} as any);
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: true,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
 			mockUseWaasFeeOptions.mockReturnValue([
 				// @ts-expect-error - simplified mock
 				{ pending: true },
@@ -239,9 +243,11 @@ describe('useHandleTransfer', () => {
 			const mockHash = '0xhash789';
 			mockTransferTokensAsync.mockResolvedValue(mockHash);
 
-			mockUseWallet.mockReturnValue({
-				wallet: { isWaaS: false },
-			} as any);
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: false,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
 			mockUseWaasFeeOptions.mockReturnValue([
 				// @ts-expect-error - simplified mock
 				{ pending: true },
@@ -264,9 +270,11 @@ describe('useHandleTransfer', () => {
 			const mockHash = '0xhash101112';
 			mockTransferTokensAsync.mockResolvedValue(mockHash);
 
-			mockUseWallet.mockReturnValue({
-				wallet: { isWaaS: true },
-			} as any);
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: true,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
 			mockUseWaasFeeOptions.mockReturnValue([
 				// @ts-expect-error - simplified mock
 				null,
@@ -288,9 +296,11 @@ describe('useHandleTransfer', () => {
 
 	describe('edge cases', () => {
 		it('should handle undefined wallet', async () => {
-			mockUseWallet.mockReturnValue({
-				wallet: undefined,
-			} as any);
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: false,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
 
 			const mockHash = '0xhash131415';
 			mockTransferTokensAsync.mockResolvedValue(mockHash);

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TransferButton.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import { useWaasFeeOptions } from '@0xsequence/connect';
 import { Button, Spinner } from '@0xsequence/design-system';
-import { useWallet } from '../../../../../../_internal/wallet/useWallet';
+import { useConnectorMetadata } from '../../../../../../hooks/config/useConnectorMetadata';
 import { useModalState } from '../../../store';
 
 const TransferButton = ({
@@ -11,25 +12,42 @@ const TransferButton = ({
 	onClick: () => Promise<void>;
 	isDisabled: boolean | undefined;
 }) => {
-	const { wallet } = useWallet();
-	const isWaaS = wallet?.isWaaS;
+	const { isWaaS } = useConnectorMetadata();
 	const { transferIsProcessing } = useModalState();
+	const [pendingFeeOptionConfirmation] = useWaasFeeOptions();
 
-	const label = transferIsProcessing ? (
-		isWaaS ? (
-			<div className="flex items-center justify-center gap-2">
-				<Spinner size="sm" className="text-white" />
-				<span>Loading fee options</span>
-			</div>
-		) : (
+	const getLabel = () => {
+		if (!transferIsProcessing) return 'Transfer';
+
+		if (isWaaS) {
+			// If there are no fee options (sponsored tx) or fee options are confirmed
+			if (
+				!pendingFeeOptionConfirmation ||
+				pendingFeeOptionConfirmation.options.length === 0
+			) {
+				return (
+					<div className="flex items-center justify-center gap-2">
+						<Spinner size="sm" className="text-white" />
+						<span>Sending transaction</span>
+					</div>
+				);
+			}
+
+			return (
+				<div className="flex items-center justify-center gap-2">
+					<Spinner size="sm" className="text-white" />
+					<span>Loading fee options</span>
+				</div>
+			);
+		}
+
+		return (
 			<div className="flex items-center justify-center gap-2">
 				<Spinner size="sm" className="text-white" />
 				<span>Transferring</span>
 			</div>
-		)
-	) : (
-		'Transfer'
-	);
+		);
+	};
 
 	return (
 		<Button
@@ -37,7 +55,7 @@ const TransferButton = ({
 			onClick={onClick}
 			disabled={!!isDisabled}
 			title="Transfer"
-			label={label}
+			label={getLabel()}
 			variant="primary"
 			shape="square"
 			size="sm"

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx

@@ -4,8 +4,8 @@ import { ContractType } from '../../../../../../types';
 import { InvalidContractTypeError } from '../../../../../../utils/_internal/error/transaction';
 import { balanceQueries, collectableKeys } from '../../../../../_internal';
 import { TransactionType } from '../../../../../_internal/types';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { useCollection, useTransferTokens } from '../../../../../hooks';
+import { useConnectorMetadata } from '../../../../../hooks/config/useConnectorMetadata';
 import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
 import { transferModalStore, useModalState } from '../../store';
 
@@ -20,7 +20,7 @@ const useHandleTransfer = () => {
 
 	const { transferTokensAsync } = useTransferTokens();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
-	const { wallet } = useWallet();
+	const { isWaaS } = useConnectorMetadata();
 	const [pendingFeeOptionConfirmation] = useWaasFeeOptions();
 
 	const { data: collection } = useCollection({
@@ -61,7 +61,7 @@ const useHandleTransfer = () => {
 			throw new InvalidContractTypeError(collectionType);
 		}
 
-		if (wallet?.isWaaS && pendingFeeOptionConfirmation) {
+		if (isWaaS && pendingFeeOptionConfirmation) {
 			return;
 		}
 

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

@@ -2,17 +2,15 @@
 
 import { Modal } from '@0xsequence/design-system';
 import type { Address } from 'viem';
-import { useAccount, useSwitchChain } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
 import type { CollectionType } from '../../../_internal';
-import { useWallet } from '../../../_internal/wallet/useWallet';
+import { useConnectorMetadata, useEnsureCorrectChain } from '../../../hooks';
 import { MODAL_OVERLAY_PROPS } from '../_internal/components/consts';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
 import {
 	selectWaasFeeOptionsStore,
 	useSelectWaasFeeOptionsStore,
 } from '../_internal/components/selectWaasFeeOptions/store';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import type { ModalCallbacks } from '../_internal/types';
 import EnterWalletAddressView from './_views/enterWalletAddress';
@@ -28,10 +26,7 @@ export type ShowTransferModalArgs = {
 };
 
 export const useTransferModal = () => {
-	const { chainId: accountChainId } = useAccount();
-	const { show: showSwitchNetworkModal } = useSwitchChainModal();
-	const { wallet } = useWallet();
-	const { switchChain } = useSwitchChain();
+	const { ensureCorrectChain } = useEnsureCorrectChain();
 
 	const openModal = (args: ShowTransferModalArgs) => {
 		transferModalStore.send({ type: 'open', ...args });
@@ -39,23 +34,10 @@ export const useTransferModal = () => {
 
 	const handleShowModal = (args: ShowTransferModalArgs) => {
 		const targetChainId = Number(args.chainId);
-		const isSameChain = accountChainId === targetChainId;
 
-		if (!isSameChain) {
-			if (wallet?.isWaaS) {
-				switchChain({ chainId: targetChainId });
-
-				openModal(args);
-			} else {
-				showSwitchNetworkModal({
-					chainIdToSwitchTo: targetChainId,
-					onSuccess: () => openModal(args),
-				});
-			}
-			return;
-		}
-
-		openModal(args);
+		ensureCorrectChain(targetChainId, {
+			onSuccess: () => openModal(args),
+		});
 	};
 
 	return {
@@ -66,11 +48,15 @@ export const useTransferModal = () => {
 
 const TransactionModalView = () => {
 	const view = useView();
+	const { isWaaS } = useConnectorMetadata();
 
 	switch (view) {
 		case 'enterReceiverAddress':
 			return <EnterWalletAddressView />;
 		case 'followWalletInstructions':
+			if (isWaaS) {
+				return <EnterWalletAddressView />;
+			}
 			return <FollowWalletInstructionsView />;
 		default:
 			return null;

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

@@ -1,15 +1,15 @@
+'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();
-vi.mock('../switchChainModal', () => ({
-	useSwitchChainModal: () => ({
-		show: mockShowSwitchChainModal,
+const mockShowSwitchChainErrorModal = vi.fn();
+vi.mock('../switchChainErrorModal', () => ({
+	useSwitchChainErrorModal: () => ({
+		show: mockShowSwitchChainErrorModal,
 		close: vi.fn(),
 	}),
 }));
@@ -30,158 +30,132 @@ 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 attempt chain switching when chain mismatch occurs', async () => {
+			const onClick = vi.fn();
+			render(
+				<ActionModal
+					{...defaultProps}
+					ctas={[{ label: 'Test', onClick, 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,
+			// When there's a chain mismatch, the switch chain error modal should be shown
+			// and onClick should not be called immediately
+			expect(mockShowSwitchChainErrorModal).toHaveBeenCalledWith({
+				chainIdToSwitchTo: polygon.id,
 			});
+			expect(onClick).not.toHaveBeenCalled();
+		});
 
-			render(<ActionModal {...defaultProps} />);
+		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,
+				},
+			);
 
-			const button = screen.getByTestId('test-button');
-			fireEvent.click(button);
+			// Wait for the account to be connected and initial chainId to be shown
+			await waitFor(() => {
+				expect(screen.getByText('1')).toBeInTheDocument(); // mainnet.id
+			});
 
 			await waitFor(() => {
-				expect(mockOnClick).toHaveBeenCalled();
+				const button = screen.getByTestId('test-btn');
+				fireEvent.click(button);
+			});
+
+			// For WaaS wallets, chain switching should show error modal since mock connector fails
+			expect(mockShowSwitchChainErrorModal).toHaveBeenCalledWith({
+				chainIdToSwitchTo: polygon.id,
 			});
 		});
 	});
 
-	describe('CTA buttons', () => {
+	describe('CTA Buttons', () => {
 		it('should call onClick when CTA button is clicked', async () => {
 			const onClick = vi.fn();
 			render(
@@ -191,15 +165,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 +188,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 +209,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 +237,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 +262,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();
+			});
 		});
 	});
 });