@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -0,0 +1,412 @@
+import { useWaasFeeOptions } from '@0xsequence/connect';
+import { renderHook } from '@test';
+import type { Address } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ContractType } from '../../../../../../../types';
+import { InvalidContractTypeError } from '../../../../../../../utils/_internal/error/transaction';
+import {
+	balanceQueries,
+	type CollectionType,
+	collectableKeys,
+} from '../../../../../../_internal';
+import { TransactionType } from '../../../../../../_internal/types';
+import { useCollection, useTransferTokens } from '../../../../../../hooks';
+import { useConnectorMetadata } from '../../../../../../hooks/config/useConnectorMetadata';
+import { useTransactionStatusModal } from '../../../../_internal/components/transactionStatusModal';
+import {
+	type TransferModalState,
+	transferModalStore,
+	useModalState,
+} from '../../../store';
+import useHandleTransfer from '../useHandleTransfer';
+
+// Mock dependencies
+vi.mock('@0xsequence/connect');
+vi.mock('../../../../../../hooks/config/useConnectorMetadata');
+vi.mock('../../../../../../hooks');
+vi.mock('../../../../_internal/components/transactionStatusModal');
+vi.mock('../../../store');
+
+const mockUseWaasFeeOptions = vi.mocked(useWaasFeeOptions);
+const mockUseConnectorMetadata = vi.mocked(useConnectorMetadata);
+const mockUseCollection = vi.mocked(useCollection);
+const mockUseTransferTokens = vi.mocked(useTransferTokens);
+const mockUseTransactionStatusModal = vi.mocked(useTransactionStatusModal);
+const mockUseModalState = vi.mocked(useModalState);
+
+describe('useHandleTransfer', () => {
+	const mockTransferTokensAsync = vi.fn();
+	const mockShowTransactionStatusModal = vi.fn();
+	const mockOnError = vi.fn();
+
+	const defaultModalState = {
+		isOpen: true,
+		receiverAddress: '0x1234567890123456789012345678901234567890',
+		collectionAddress:
+			'0xabcdefabcdefabcdefabcdefabcdefabcdefabcdef' as Address,
+		collectibleId: '123',
+		quantity: '2',
+		chainId: 1,
+		transferIsProcessing: false,
+		view: 'enterReceiverAddress',
+		onSuccess: undefined,
+		onError: mockOnError,
+		hash: undefined,
+	} satisfies TransferModalState;
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		// Setup default mocks
+		mockUseWaasFeeOptions.mockReturnValue([
+			// @ts-expect-error - simplified mock
+			null,
+			vi.fn(),
+		]);
+		mockUseConnectorMetadata.mockReturnValue({
+			isWaaS: false,
+			isSequence: false,
+			walletKind: 'unknown' as any,
+		});
+		mockUseCollection.mockReturnValue({
+			data: { type: ContractType.ERC721 },
+			isLoading: false,
+			isError: false,
+			error: null,
+		} as any);
+		mockUseTransferTokens.mockReturnValue({
+			transferTokensAsync: mockTransferTokensAsync,
+			hash: undefined,
+			transferring: false,
+			transferFailed: false,
+			transferSuccess: false,
+		});
+		mockUseTransactionStatusModal.mockReturnValue({
+			show: mockShowTransactionStatusModal,
+			close: vi.fn(),
+		});
+
+		// Mock the useModalState hook to return our test state
+		mockUseModalState.mockReturnValue(defaultModalState);
+
+		// Mock store send method
+		vi.spyOn(transferModalStore, 'send').mockImplementation(() => {});
+	});
+
+	describe('transfer function', () => {
+		it('should successfully transfer ERC721 token', async () => {
+			const mockHash = '0xhash123';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalledWith({
+				receiverAddress: defaultModalState.receiverAddress,
+				collectionAddress: defaultModalState.collectionAddress,
+				tokenId: defaultModalState.collectibleId,
+				chainId: defaultModalState.chainId,
+				contractType: ContractType.ERC721,
+			});
+
+			expect(transferModalStore.send).toHaveBeenCalledWith({
+				type: 'completeTransfer',
+				hash: mockHash,
+			});
+			expect(transferModalStore.send).toHaveBeenCalledWith({ type: 'close' });
+
+			expect(mockShowTransactionStatusModal).toHaveBeenCalledWith({
+				hash: mockHash,
+				collectionAddress: defaultModalState.collectionAddress,
+				chainId: defaultModalState.chainId,
+				collectibleId: defaultModalState.collectibleId,
+				type: TransactionType.TRANSFER,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					balanceQueries.collectionBalanceDetails,
+					collectableKeys.userBalances,
+				],
+			});
+		});
+
+		it('should successfully transfer ERC1155 token with quantity', async () => {
+			const mockHash = '0xhash456';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			// Mock ERC1155 collection
+			mockUseCollection.mockReturnValue({
+				data: { type: ContractType.ERC1155 },
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as any);
+
+			// Mock ERC1155 state
+			const erc1155State = {
+				...defaultModalState,
+				collectionType: ContractType.ERC1155 as CollectionType,
+				quantity: '5',
+			};
+
+			mockUseModalState.mockReturnValue(erc1155State);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalledWith({
+				receiverAddress: erc1155State.receiverAddress,
+				collectionAddress: erc1155State.collectionAddress,
+				tokenId: erc1155State.collectibleId,
+				chainId: erc1155State.chainId,
+				contractType: ContractType.ERC1155,
+				quantity: '5',
+			});
+
+			expect(transferModalStore.send).toHaveBeenCalledWith({
+				type: 'completeTransfer',
+				hash: mockHash,
+			});
+			expect(transferModalStore.send).toHaveBeenCalledWith({ type: 'close' });
+			expect(mockShowTransactionStatusModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					hash: mockHash,
+					type: TransactionType.TRANSFER,
+				}),
+			);
+		});
+
+		it('should throw error for invalid contract type', async () => {
+			// Mock invalid collection type
+			mockUseCollection.mockReturnValue({
+				data: { type: 'INVALID_TYPE' },
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as any);
+
+			const invalidState = {
+				...defaultModalState,
+				collectionType: 'INVALID_TYPE' as any,
+			};
+
+			mockUseModalState.mockReturnValue(invalidState);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await expect(result.current.transfer()).rejects.toThrow(
+				InvalidContractTypeError,
+			);
+
+			expect(mockTransferTokensAsync).not.toHaveBeenCalled();
+			expect(mockShowTransactionStatusModal).not.toHaveBeenCalled();
+		});
+
+		it('should return early if WaaS wallet has pending fee confirmation', async () => {
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: true,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
+			mockUseWaasFeeOptions.mockReturnValue([
+				// @ts-expect-error - simplified mock
+				{ pending: true },
+				vi.fn(),
+			]);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).not.toHaveBeenCalled();
+			expect(mockShowTransactionStatusModal).not.toHaveBeenCalled();
+		});
+
+		it('should handle transfer error', async () => {
+			const transferError = new Error('Transfer failed');
+			mockTransferTokensAsync.mockRejectedValue(transferError);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(transferModalStore.send).toHaveBeenCalledWith({
+				type: 'failTransfer',
+				error: transferError,
+			});
+
+			expect(mockShowTransactionStatusModal).not.toHaveBeenCalled();
+		});
+
+		it('should proceed with transfer for non-WaaS wallet even with pending fee confirmation', async () => {
+			const mockHash = '0xhash789';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: false,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
+			mockUseWaasFeeOptions.mockReturnValue([
+				// @ts-expect-error - simplified mock
+				{ pending: true },
+				vi.fn(),
+			]);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalled();
+			expect(mockShowTransactionStatusModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					hash: mockHash,
+				}),
+			);
+		});
+
+		it('should proceed with transfer for WaaS wallet without pending fee confirmation', async () => {
+			const mockHash = '0xhash101112';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: true,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
+			mockUseWaasFeeOptions.mockReturnValue([
+				// @ts-expect-error - simplified mock
+				null,
+				vi.fn(),
+			]);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalled();
+			expect(mockShowTransactionStatusModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					hash: mockHash,
+				}),
+			);
+		});
+	});
+
+	describe('edge cases', () => {
+		it('should handle undefined wallet', async () => {
+			mockUseConnectorMetadata.mockReturnValue({
+				isWaaS: false,
+				isSequence: false,
+				walletKind: 'unknown' as any,
+			});
+
+			const mockHash = '0xhash131415';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalled();
+			expect(mockShowTransactionStatusModal).toHaveBeenCalled();
+		});
+
+		it('should handle ERC1155 with quantity as string "1"', async () => {
+			const mockHash = '0xhash161718';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			// Mock ERC1155 collection
+			mockUseCollection.mockReturnValue({
+				data: { type: ContractType.ERC1155 },
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as any);
+
+			const erc1155State = {
+				...defaultModalState,
+				collectionType: ContractType.ERC1155 as CollectionType,
+				quantity: '1',
+			};
+
+			mockUseModalState.mockReturnValue(erc1155State);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalledWith(
+				expect.objectContaining({
+					contractType: ContractType.ERC1155,
+					quantity: '1',
+				}),
+			);
+		});
+
+		it('should handle ERC1155 with large quantity', async () => {
+			const mockHash = '0xhash192021';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			// Mock ERC1155 collection
+			mockUseCollection.mockReturnValue({
+				data: { type: ContractType.ERC1155 },
+				isLoading: false,
+				isError: false,
+				error: null,
+			} as any);
+
+			const erc1155State = {
+				...defaultModalState,
+				collectionType: ContractType.ERC1155 as CollectionType,
+				quantity: '1000000',
+			};
+
+			mockUseModalState.mockReturnValue(erc1155State);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalledWith(
+				expect.objectContaining({
+					contractType: ContractType.ERC1155,
+					quantity: '1000000',
+				}),
+			);
+		});
+
+		it('should handle transfer with all fields populated', async () => {
+			const mockHash = '0xhash222324';
+			mockTransferTokensAsync.mockResolvedValue(mockHash);
+
+			const fullState = {
+				...defaultModalState,
+				collectibleId: '999',
+				quantity: '10',
+				receiverAddress: '0xffffffffffffffffffffffffffffffffffffffff',
+			};
+
+			mockUseModalState.mockReturnValue(fullState);
+
+			const { result } = renderHook(() => useHandleTransfer());
+
+			await result.current.transfer();
+
+			expect(mockTransferTokensAsync).toHaveBeenCalledWith({
+				receiverAddress: fullState.receiverAddress,
+				collectionAddress: fullState.collectionAddress,
+				tokenId: fullState.collectibleId,
+				chainId: fullState.chainId,
+				contractType: ContractType.ERC721,
+			});
+
+			expect(transferModalStore.send).toHaveBeenCalledWith({
+				type: 'completeTransfer',
+				hash: mockHash,
+			});
+			expect(transferModalStore.send).toHaveBeenCalledWith({ type: 'close' });
+		});
+	});
+});

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

@@ -1,57 +1,60 @@
+'use client';
+
 import { cn, Text } from '@0xsequence/design-system';
-import { observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
+import { useState } from 'react';
 import QuantityInput from '../../../../_internal/components/quantityInput';
-import { transferModal$ } from '../../../_store';
+import { transferModalStore, useModalState } from '../../../store';
 
-const TokenQuantityInput = observer(
-	({
-		balanceAmount,
-		collection,
-		isProcessingWithWaaS,
-	}: {
-		balanceAmount?: bigint;
-		collection?: { decimals?: number };
-		isProcessingWithWaaS: boolean;
-	}) => {
-		const $quantity = transferModal$.state.quantity;
-		const $invalidQuantity = observable(false);
+const TokenQuantityInput = ({
+	balanceAmount,
+	collection,
+	isProcessingWithWaaS,
+}: {
+	balanceAmount?: bigint;
+	collection?: { decimals?: number };
+	isProcessingWithWaaS: boolean;
+}) => {
+	const modalState = useModalState();
+	const [invalidQuantity, setInvalidQuantity] = useState(false);
 
-		let insufficientBalance = true;
-		if (balanceAmount !== undefined && $quantity.get()) {
-			try {
-				const quantityBigInt = BigInt($quantity.get());
-				insufficientBalance = quantityBigInt > balanceAmount;
-			} catch (_e) {
-				insufficientBalance = true;
-			}
+	let insufficientBalance = true;
+	if (balanceAmount !== undefined && modalState.quantity) {
+		try {
+			const quantityBigInt = BigInt(modalState.quantity);
+			insufficientBalance = quantityBigInt > balanceAmount;
+		} catch (_e) {
+			insufficientBalance = true;
 		}
+	}
 
-		return (
-			<div
-				className={cn(
-					'flex flex-col gap-3',
-					isProcessingWithWaaS && 'pointer-events-none opacity-50',
-				)}
-			>
-				<QuantityInput
-					$quantity={$quantity}
-					$invalidQuantity={$invalidQuantity}
-					decimals={collection?.decimals || 0}
-					maxQuantity={balanceAmount ? String(balanceAmount) : '0'}
-					className="[&>label>div>div>div>input]:text-sm [&>label>div>div>div]:h-13 [&>label>div>div>div]:rounded-xl [&>label>div>div>span]:text-sm [&>label>div>div>span]:text-text-80 [&>label]:gap-1"
-				/>
+	return (
+		<div
+			className={cn(
+				'flex flex-col gap-3',
+				isProcessingWithWaaS && 'pointer-events-none opacity-50',
+			)}
+		>
+			<QuantityInput
+				quantity={modalState.quantity}
+				invalidQuantity={invalidQuantity}
+				onQuantityChange={(quantity) =>
+					transferModalStore.send({ type: 'updateTransferDetails', quantity })
+				}
+				onInvalidQuantityChange={setInvalidQuantity}
+				decimals={collection?.decimals || 0}
+				maxQuantity={balanceAmount ? String(balanceAmount) : '0'}
+				className="[&>label>div>div>div>input]:text-sm [&>label>div>div>div]:h-13 [&>label>div>div>div]:rounded-xl [&>label>div>div>span]:text-sm [&>label>div>div>span]:text-text-80 [&>label]:gap-1"
+			/>
 
-				<Text
-					className="font-body text-xs"
-					color={insufficientBalance ? 'negative' : 'text50'}
-					fontWeight="medium"
-				>
-					{`You have ${balanceAmount?.toString() || '0'} of this item`}
-				</Text>
-			</div>
-		);
-	},
-);
+			<Text
+				className="font-body text-xs"
+				color={insufficientBalance ? 'negative' : 'text50'}
+				fontWeight="medium"
+			>
+				{`You have ${balanceAmount?.toString() || '0'} of this item`}
+			</Text>
+		</div>
+	);
+};
 
 export default TokenQuantityInput;

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

@@ -1,56 +1,66 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
+import { useWaasFeeOptions } from '@0xsequence/connect';
 import { Button, Spinner } from '@0xsequence/design-system';
-import { NetworkType } from '@0xsequence/network';
-import { observer } from '@legendapp/state/react';
-import { useWallet } from '../../../../../../_internal/wallet/useWallet';
-import { transferModal$ } from '../../../_store';
-
-const TransferButton = observer(
-	({
-		onClick,
-		isDisabled,
-		chainId,
-	}: {
-		onClick: () => Promise<void>;
-		isDisabled: boolean | undefined;
-		chainId: number;
-	}) => {
-		const { wallet } = useWallet();
-		const network = getNetwork(chainId);
-		const isWaaS = wallet?.isWaaS;
-		const isTestnet = network.type === NetworkType.TESTNET;
-		const isProcessing = transferModal$.state.transferIsBeingProcessed.get();
-		const label = isProcessing ? (
-			isWaaS && !isTestnet ? (
+import { useConnectorMetadata } from '../../../../../../hooks/config/useConnectorMetadata';
+import { useModalState } from '../../../store';
+
+const TransferButton = ({
+	onClick,
+	isDisabled,
+}: {
+	onClick: () => Promise<void>;
+	isDisabled: boolean | undefined;
+}) => {
+	const { isWaaS } = useConnectorMetadata();
+	const { transferIsProcessing } = useModalState();
+	const [pendingFeeOptionConfirmation] = useWaasFeeOptions();
+
+	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>
-			) : (
-				<div className="flex items-center justify-center gap-2">
-					<Spinner size="sm" className="text-white" />
-					<span>Transferring</span>
-				</div>
-			)
-		) : (
-			'Transfer'
-		);
+			);
+		}
 
 		return (
-			<Button
-				className="flex justify-self-end px-10"
-				onClick={onClick}
-				disabled={!!isDisabled}
-				title="Transfer"
-				label={label}
-				variant="primary"
-				shape="square"
-				size="sm"
-			/>
+			<div className="flex items-center justify-center gap-2">
+				<Spinner size="sm" className="text-white" />
+				<span>Transferring</span>
+			</div>
 		);
-	},
-);
+	};
+
+	return (
+		<Button
+			className="flex justify-self-end px-10"
+			onClick={onClick}
+			disabled={!!isDisabled}
+			title="Transfer"
+			label={getLabel()}
+			variant="primary"
+			shape="square"
+			size="sm"
+		/>
+	);
+};
 
 export default TransferButton;

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

@@ -1,18 +1,16 @@
 'use client';
 
 import { TextInput } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import { isAddress } from 'viem';
 import { useAccount } from 'wagmi';
-import { transferModal$ } from '../../../_store';
+import { transferModalStore, useModalState } from '../../../store';
 
 const MAX_WALLET_ADDRESS_LENGTH = 42;
 
-const WalletAddressInput = observer(() => {
+const WalletAddressInput = () => {
 	const { address: connectedAddress } = useAccount();
-	const receiverAddress = transferModal$.state.receiverAddress.get();
+	const { receiverAddress, transferIsProcessing } = useModalState();
 	const isWalletAddressValid = isAddress(receiverAddress);
-	const isProcessing = transferModal$.state.transferIsBeingProcessed.get();
 
 	const isSelfTransfer =
 		isWalletAddressValid &&
@@ -22,7 +20,10 @@ const WalletAddressInput = observer(() => {
 	const handleChangeWalletAddress = (
 		event: React.ChangeEvent<HTMLInputElement>,
 	) => {
-		transferModal$.state.receiverAddress.set(event.target.value);
+		transferModalStore.send({
+			type: 'updateTransferDetails',
+			receiverAddress: event.target.value,
+		});
 	};
 
 	return (
@@ -36,7 +37,7 @@ const WalletAddressInput = observer(() => {
 				onChange={handleChangeWalletAddress}
 				name="walletAddress"
 				placeholder="Enter wallet address"
-				disabled={isProcessing}
+				disabled={transferIsProcessing}
 			/>
 			{isSelfTransfer && (
 				<div className="mt-1 text-negative text-sm">
@@ -45,6 +46,6 @@ const WalletAddressInput = observer(() => {
 			)}
 		</div>
 	);
-});
+};
 
 export default WalletAddressInput;