@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

package/src/react/ui/modals/_internal/components/transactionStatusModal/__tests__/TransactionStatusModal.test.tsx

@@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TransactionType } from '../../../../../../_internal/types';
 import type { ShowTransactionStatusModalArgs } from '../index';
 import TransactionStatusModal from '../index';
-import { transactionStatusModal$ } from '../store';
+import { transactionStatusModalStore } from '../store';
 
 const mockTransactionArgs: ShowTransactionStatusModalArgs = {
 	hash: '0x123' as `0x${string}`,
@@ -26,7 +26,7 @@ describe('TransactionStatusModal', () => {
 	});
 
 	beforeEach(() => {
-		transactionStatusModal$.close();
+		transactionStatusModalStore.send({ type: 'close' });
 		vi.clearAllMocks();
 		vi.mocked(useTransactionStatus).mockReturnValue('PENDING');
 	});
@@ -40,7 +40,12 @@ describe('TransactionStatusModal', () => {
 
 	it('should show processing state when transaction is processing', async () => {
 		vi.mocked(useTransactionStatus).mockReturnValue('PENDING');
-		transactionStatusModal$.open(mockTransactionArgs);
+		const { type: transactionType, ...rest } = mockTransactionArgs;
+		transactionStatusModalStore.send({
+			type: 'open',
+			transactionType,
+			...rest,
+		});
 		render(<TransactionStatusModal />);
 
 		await waitFor(() => {
@@ -56,7 +61,12 @@ describe('TransactionStatusModal', () => {
 
 	it('should show success state when transaction is successful', async () => {
 		vi.mocked(useTransactionStatus).mockReturnValue('SUCCESS');
-		transactionStatusModal$.open(mockTransactionArgs);
+		const { type: transactionType, ...rest } = mockTransactionArgs;
+		transactionStatusModalStore.send({
+			type: 'open',
+			transactionType,
+			...rest,
+		});
 		render(<TransactionStatusModal />);
 
 		await waitFor(() => {
@@ -72,7 +82,12 @@ describe('TransactionStatusModal', () => {
 
 	it('should show failed state when transaction fails', async () => {
 		vi.mocked(useTransactionStatus).mockReturnValue('FAILED');
-		transactionStatusModal$.open(mockTransactionArgs);
+		const { type: transactionType, ...rest } = mockTransactionArgs;
+		transactionStatusModalStore.send({
+			type: 'open',
+			transactionType,
+			...rest,
+		});
 		render(<TransactionStatusModal />);
 
 		await waitFor(() => {
@@ -86,7 +101,12 @@ describe('TransactionStatusModal', () => {
 
 	it('should show timeout state when transaction times out', async () => {
 		vi.mocked(useTransactionStatus).mockReturnValue('TIMEOUT');
-		transactionStatusModal$.open(mockTransactionArgs);
+		const { type: transactionType, ...rest } = mockTransactionArgs;
+		transactionStatusModalStore.send({
+			type: 'open',
+			transactionType,
+			...rest,
+		});
 		render(<TransactionStatusModal />);
 
 		await waitFor(() => {
@@ -107,8 +127,11 @@ describe('TransactionStatusModal', () => {
 			return 'SUCCESS';
 		});
 
-		transactionStatusModal$.open({
-			...mockTransactionArgs,
+		const { type: transactionType, ...rest } = mockTransactionArgs;
+		transactionStatusModalStore.send({
+			type: 'open',
+			transactionType,
+			...rest,
 			callbacks: { onSuccess },
 		});
 		render(<TransactionStatusModal />);
@@ -128,8 +151,11 @@ describe('TransactionStatusModal', () => {
 			return 'FAILED';
 		});
 
-		transactionStatusModal$.open({
-			...mockTransactionArgs,
+		const { type: transactionType, ...rest } = mockTransactionArgs;
+		transactionStatusModalStore.send({
+			type: 'open',
+			transactionType,
+			...rest,
 			callbacks: { onError },
 		});
 		render(<TransactionStatusModal />);

package/src/react/ui/modals/_internal/components/transactionStatusModal/hooks/useTransactionStatus.ts

@@ -4,7 +4,8 @@ import { TransactionStatus as IndexerTransactionStatus } from '@0xsequence/index
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { type Hex, WaitForTransactionReceiptTimeoutError } from 'viem';
-import { useWallet } from '../../../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../../../hooks/config';
+import { waitForTransactionReceipt } from '../../../../../../utils/waitForTransactionReceipt';
 import type { ModalCallbacks } from '../../../types';
 import type { TransactionStatus } from '../store';
 
@@ -13,18 +14,17 @@ const useTransactionStatus = (
 	chainId: number,
 	callbacks?: ModalCallbacks,
 ) => {
-	const { wallet } = useWallet();
+	const sdkConfig = useConfig();
 	const [status, setStatus] = useState<TransactionStatus>(
 		hash ? 'PENDING' : 'SUCCESS',
 	);
 
-	const { data: confirmationResult } = useQuery({
-		queryKey: ['transaction-confirmation', hash, chainId, !!wallet],
-		queryFn:
-			!!wallet && hash
-				? async () =>
-						await wallet.handleConfirmTransactionStep(hash, Number(chainId))
-				: skipToken,
+	const { data: confirmationResult, error } = useQuery({
+		queryKey: ['transaction-confirmation', hash, chainId],
+		queryFn: hash
+			? async () =>
+					await waitForTransactionReceipt({ txHash: hash, chainId, sdkConfig })
+			: skipToken,
 	});
 
 	useEffect(() => {
@@ -33,30 +33,29 @@ const useTransactionStatus = (
 			return;
 		}
 
-		if (!confirmationResult) {
-			setStatus('PENDING');
-			return;
-		}
-
-		try {
-			if (
-				confirmationResult.txnStatus === IndexerTransactionStatus.SUCCESSFUL
-			) {
-				setStatus('SUCCESS');
-				callbacks?.onSuccess?.({ hash: hash || '0x0' });
-				return;
-			}
-			setStatus('FAILED');
-			callbacks?.onError?.(new Error('Transaction failed'));
-		} catch (error) {
+		if (error) {
 			setStatus(
 				error instanceof WaitForTransactionReceiptTimeoutError
 					? 'TIMEOUT'
 					: 'FAILED',
 			);
 			callbacks?.onError?.(error as Error);
+			return;
+		}
+
+		if (!confirmationResult) {
+			setStatus('PENDING');
+			return;
+		}
+
+		if (confirmationResult.txnStatus === IndexerTransactionStatus.SUCCESSFUL) {
+			setStatus('SUCCESS');
+			callbacks?.onSuccess?.({ hash: hash || '0x0' });
+			return;
 		}
-	}, [confirmationResult, hash]);
+		setStatus('FAILED');
+		callbacks?.onError?.(new Error('Transaction failed'));
+	}, [confirmationResult, error, hash]);
 
 	return status;
 };

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

@@ -2,20 +2,23 @@
 
 import { Modal, Skeleton, Text } from '@0xsequence/design-system';
 import type { ChainId } from '@0xsequence/network';
-import { use$ } from '@legendapp/state/react';
 import type { QueryKey } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import { getQueryClient } from '../../../../../_internal';
 import type { TransactionType } from '../../../../../_internal/types';
 import { useCollectible } from '../../../../../hooks';
 import type { ModalCallbacks } from '../../types';
 import { MODAL_OVERLAY_PROPS } from '../consts';
-import { selectWaasFeeOptions$ } from '../selectWaasFeeOptions/store';
+import { selectWaasFeeOptionsStore } from '../selectWaasFeeOptions/store';
 import TransactionFooter from '../transaction-footer';
 import TransactionPreview from '../transactionPreview';
 import useTransactionStatus from './hooks/useTransactionStatus';
-import { transactionStatusModal$ } from './store';
+import {
+	transactionStatusModalStore,
+	useIsOpen,
+	useTransactionModalState,
+} from './store';
 import { getTransactionStatusModalMessage } from './util/getMessage';
 import { getTransactionStatusModalTitle } from './util/getTitle';
 
@@ -23,7 +26,7 @@ export type ShowTransactionStatusModalArgs = {
 	hash?: Hex;
 	orderId?: string;
 	price?: Price;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	type: TransactionType;
@@ -35,7 +38,9 @@ const invalidateQueries = async (queriesToInvalidate?: QueryKey[]) => {
 	const queryClient = getQueryClient();
 	if (!queriesToInvalidate) {
 		// Invalidate everything by default
-		queryClient.invalidateQueries();
+		queryClient.invalidateQueries({
+			predicate: (query) => !query.meta?.persistent,
+		});
 		return;
 	}
 	for (const queryKey of queriesToInvalidate) {
@@ -46,20 +51,27 @@ const invalidateQueries = async (queriesToInvalidate?: QueryKey[]) => {
 export const useTransactionStatusModal = () => {
 	return {
 		show: (args: ShowTransactionStatusModalArgs) => {
-			transactionStatusModal$.open(args);
+			const { type: transactionType, ...rest } = args;
+			transactionStatusModalStore.send({
+				type: 'open',
+				transactionType,
+				...rest,
+			});
+		},
+		close: () => {
+			transactionStatusModalStore.send({ type: 'close' });
 		},
-		close: () => transactionStatusModal$.close(),
 	};
 };
 
 const TransactionStatusModal = () => {
-	const isOpen = use$(transactionStatusModal$.isOpen);
+	const isOpen = useIsOpen();
 	return isOpen ? <TransactionStatusModalContent /> : null;
 };
 
 function TransactionStatusModalContent() {
 	const {
-		type,
+		transactionType: type,
 		hash,
 		orderId,
 		price,
@@ -68,7 +80,7 @@ function TransactionStatusModalContent() {
 		collectibleId,
 		callbacks,
 		queriesToInvalidate,
-	} = use$(transactionStatusModal$.state);
+	} = useTransactionModalState();
 
 	const { data: collectible, isLoading: collectibleLoading } = useCollectible({
 		collectionAddress,
@@ -84,21 +96,23 @@ function TransactionStatusModalContent() {
 		orderId,
 	});
 
-	const message = getTransactionStatusModalMessage({
-		transactionStatus,
-		transactionType: type,
-		collectibleName: collectible?.name || '',
-		orderId,
-		price,
-	});
+	const message = type
+		? getTransactionStatusModalMessage({
+				transactionStatus,
+				transactionType: type,
+				collectibleName: collectible?.name || '',
+				orderId,
+				price,
+			})
+		: '';
 
 	const handleClose = () => {
 		invalidateQueries(queriesToInvalidate);
-		if (selectWaasFeeOptions$.isVisible.get()) {
-			selectWaasFeeOptions$.hide();
+		if (selectWaasFeeOptionsStore.getSnapshot().context.isVisible) {
+			selectWaasFeeOptionsStore.send({ type: 'hide' });
 		}
 
-		transactionStatusModal$.close();
+		transactionStatusModalStore.send({ type: 'close' });
 	};
 
 	return (

package/src/react/ui/modals/_internal/components/transactionStatusModal/store.ts

@@ -1,6 +1,7 @@
-import { observable } from '@legendapp/state';
 import type { QueryKey } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { Address, Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import type { TransactionType } from '../../../../../_internal/types';
 import type { ModalCallbacks } from '../../types';
@@ -15,69 +16,97 @@ export type ConfirmationStatus = {
 
 export type TransactionStatus = 'PENDING' | 'SUCCESS' | 'FAILED' | 'TIMEOUT';
 
-export interface TransactionStatusModalState {
+interface TransactionStatusModalContext {
 	isOpen: boolean;
-	open: (args: ShowTransactionStatusModalArgs) => void;
-	close: () => void;
-	state: {
-		hash: Hex | undefined;
-		orderId: string | undefined;
-		status: TransactionStatus;
-		type: TransactionType;
-		price: Price | undefined;
-		collectionAddress: Hex;
-		chainId: number;
-		collectibleId: string;
-		callbacks?: ModalCallbacks;
-		queriesToInvalidate?: QueryKey[];
-	};
+	hash: Hex | undefined;
+	orderId: string | undefined;
+	status: TransactionStatus;
+	transactionType: TransactionType | undefined;
+	price: Price | undefined;
+	collectionAddress: Address;
+	chainId: number;
+	collectibleId: string;
+	callbacks?: ModalCallbacks;
+	queriesToInvalidate?: QueryKey[];
 }
 
-export const initialState: TransactionStatusModalState = {
+const initialContext: TransactionStatusModalContext = {
 	isOpen: false,
-	open: ({
-		hash,
-		orderId,
-		price,
-		collectionAddress,
-		chainId,
-		collectibleId,
-		type,
-		callbacks,
-		queriesToInvalidate,
-	}) => {
-		transactionStatusModal$.state.set({
-			...transactionStatusModal$.state.get(),
-			hash,
-			orderId,
-			price,
-			collectionAddress,
-			chainId,
-			collectibleId,
-			type,
-			callbacks,
-			queriesToInvalidate,
-		});
-		transactionStatusModal$.isOpen.set(true);
-	},
-	close: () => {
-		transactionStatusModal$.isOpen.set(false);
-		transactionStatusModal$.state.set({
-			...initialState.state,
-		});
-	},
-	state: {
-		hash: undefined,
-		orderId: undefined,
-		status: 'PENDING',
-		price: undefined,
-		collectionAddress: '' as Hex,
-		chainId: 0,
-		collectibleId: '',
-		type: undefined as unknown as TransactionType,
-		callbacks: undefined,
-		queriesToInvalidate: [],
-	},
+	hash: undefined,
+	orderId: undefined,
+	status: 'PENDING',
+	transactionType: undefined,
+	price: undefined,
+	collectionAddress: '' as Address,
+	chainId: 0,
+	collectibleId: '',
+	callbacks: undefined,
+	queriesToInvalidate: [],
 };
 
-export const transactionStatusModal$ = observable(initialState);
+export const transactionStatusModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (
+			context,
+			event: Omit<ShowTransactionStatusModalArgs, 'type'> & {
+				transactionType: TransactionType;
+			},
+		) => ({
+			...context,
+			isOpen: true,
+			hash: event.hash,
+			orderId: event.orderId,
+			price: event.price,
+			collectionAddress: event.collectionAddress,
+			chainId: event.chainId,
+			collectibleId: event.collectibleId,
+			transactionType: event.transactionType,
+			callbacks: event.callbacks,
+			queriesToInvalidate: event.queriesToInvalidate,
+			status: 'PENDING' as TransactionStatus,
+		}),
+
+		close: () => ({
+			...initialContext,
+		}),
+
+		updateStatus: (context, event: { status: TransactionStatus }) => ({
+			...context,
+			status: event.status,
+		}),
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(transactionStatusModalStore, (state) => state.context.isOpen);
+
+export const useTransactionModalState = () =>
+	useSelector(transactionStatusModalStore, (state) => state.context);
+
+export const useTransactionHash = () =>
+	useSelector(transactionStatusModalStore, (state) => state.context.hash);
+
+export const useTransactionType = () =>
+	useSelector(
+		transactionStatusModalStore,
+		(state) => state.context.transactionType,
+	);
+
+export const useTransactionDetails = () =>
+	useSelector(transactionStatusModalStore, (state) => ({
+		hash: state.context.hash,
+		orderId: state.context.orderId,
+		transactionType: state.context.transactionType,
+		status: state.context.status,
+		chainId: state.context.chainId,
+	}));
+
+export const useCollectibleInfo = () =>
+	useSelector(transactionStatusModalStore, (state) => ({
+		collectionAddress: state.context.collectionAddress,
+		collectibleId: state.context.collectibleId,
+		chainId: state.context.chainId,
+		price: state.context.price,
+	}));

package/src/react/ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect.tsx

@@ -1,61 +1,60 @@
 'use client';
 
-import { Image, Select, Text } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
+import { Image, Select, Text, Tooltip } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import { formatUnits, zeroAddress } from 'viem';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import type { SelectItem } from '../../../../components/_internals/custom-select/CustomSelect';
 
-const WaasFeeOptionsSelect = observer(
-	({
-		options,
-		selectedFeeOption$,
-	}: {
-		options: FeeOption[];
-		selectedFeeOption$: Observable<FeeOption | undefined>;
-	}) => {
-		options = options.map((option) => ({
-			...option,
-			token: {
-				...option.token,
-				contractAddress: option.token.contractAddress || zeroAddress,
-			},
-		}));
+const WaasFeeOptionsSelect = ({
+	options,
+	selectedFeeOption,
+	onSelectedFeeOptionChange,
+}: {
+	options: FeeOption[];
+	selectedFeeOption: FeeOption | undefined;
+	onSelectedFeeOptionChange: (option: FeeOption | undefined) => void;
+}) => {
+	options = options.map((option) => ({
+		...option,
+		token: {
+			...option.token,
+			contractAddress: option.token.contractAddress || zeroAddress,
+		},
+	}));
 
-		const feeOptions = options.map((option) => {
-			const value = option.token.contractAddress ?? '';
+	const feeOptions = options.map((option) => {
+		const value = option.token.contractAddress ?? '';
 
-			return FeeOptionSelectItem({ value, option });
-		});
+		return FeeOptionSelectItem({ value, option });
+	});
 
-		useEffect(() => {
-			if (options.length > 0 && !selectedFeeOption$.get())
-				selectedFeeOption$.set(options[0]);
-		}, [options]);
+	useEffect(() => {
+		if (options.length > 0 && !selectedFeeOption) {
+			onSelectedFeeOptionChange(options[0]);
+		}
+	}, [options, selectedFeeOption, onSelectedFeeOptionChange]);
 
-		if (options.length === 0 || !selectedFeeOption$.get()?.token) return null;
+	if (options.length === 0 || !selectedFeeOption?.token) return null;
 
-		return (
-			<Select
-				name="fee-option"
-				options={feeOptions.map((option) => ({
-					label: option.content,
-					value: option.value,
-				}))}
-				onValueChange={(value) => {
-					const selectedOption = options.find(
-						(option) => option.token.contractAddress === value,
-					);
+	return (
+		<Select
+			name="fee-option"
+			options={feeOptions.map((option) => ({
+				label: option.content,
+				value: option.value,
+			}))}
+			onValueChange={(value) => {
+				const selectedOption = options.find(
+					(option) => option.token.contractAddress === value,
+				);
 
-					selectedFeeOption$.set(selectedOption);
-				}}
-				defaultValue={options[0].token.contractAddress ?? undefined}
-			/>
-		);
-	},
-);
+				onSelectedFeeOptionChange(selectedOption);
+			}}
+			defaultValue={options[0].token.contractAddress ?? undefined}
+		/>
+	);
+};
 
 function FeeOptionSelectItem({
 	value,
@@ -64,6 +63,23 @@ function FeeOptionSelectItem({
 	value: string;
 	option: FeeOption;
 }) {
+	const formattedFee = formatUnits(
+		BigInt(option.value),
+		option.token.decimals || 0,
+	);
+	const isTruncated = formattedFee.length > 11;
+	const truncatedFee = isTruncated
+		? `${formattedFee.slice(0, 11)}...`
+		: formattedFee;
+
+	const feeDisplay = isTruncated ? (
+		<Tooltip message={formattedFee}>
+			<Text className="font-body text-sm">{truncatedFee}</Text>
+		</Tooltip>
+	) : (
+		<Text className="font-body text-sm">{truncatedFee}</Text>
+	);
+
 	return {
 		value,
 		content: (
@@ -91,9 +107,7 @@ function FeeOptionSelectItem({
 					</Text>
 				</div>
 
-				<Text className="font-body text-sm">
-					{formatUnits(BigInt(option.value), option.token.decimals || 0)}
-				</Text>
+				{feeDisplay}
 			</div>
 		),
 	} as SelectItem;

package/src/react/ui/modals/_internal/hooks/useSelectWaasFeeOptions.ts

@@ -1,5 +1,5 @@
 import type { FeeOption } from '../../../../../types/waas-types';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConnectorMetadata } from '../../../../hooks/config/useConnectorMetadata';
 
 interface UseSelectWaasFeeOptionsProps {
 	isProcessing: boolean;
@@ -12,15 +12,13 @@ export const useSelectWaasFeeOptions = ({
 	feeOptionsVisible,
 	selectedFeeOption,
 }: UseSelectWaasFeeOptionsProps) => {
-	const { wallet } = useWallet();
-	const isWaaS = wallet?.isWaaS;
+	const { isWaaS } = useConnectorMetadata();
 	const isProcessingWithWaaS = isProcessing && isWaaS;
 
 	const shouldHideActionButton =
 		isProcessingWithWaaS && feeOptionsVisible === true && !!selectedFeeOption;
 
-	const waasFeeOptionsShown =
-		wallet?.isWaaS && isProcessing && feeOptionsVisible;
+	const waasFeeOptionsShown = isWaaS && isProcessing && feeOptionsVisible;
 
 	const getActionLabel = (
 		defaultLabel: string,

package/src/react/ui/modals/_internal/types.ts

@@ -1,14 +1,20 @@
-import type { Hash, Hex } from 'viem';
+import type { Address, Hash } from 'viem';
+
+export interface ActionButton {
+	label: string;
+	action: () => void;
+}
 
 export type ModalCallbacks = {
 	onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
 	onError?: (error: Error) => void;
 	onBuyAtFloorPrice?: () => void;
+	successActionButtons?: ActionButton[];
 };
 
 export type BaseModalState = {
 	isOpen: boolean;
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	callbacks?: ModalCallbacks;
 };

package/src/react/utils/index.ts

@@ -0,0 +1 @@
+export * from './waitForTransactionReceipt';