@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

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

@@ -2,9 +2,9 @@ import { cleanup, render, screen, waitFor } from '@test';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TransactionType } from '../../../../../../_internal/types';
-import TransactionStatusModal from '../index';
 import type { ShowTransactionStatusModalArgs } from '../index';
-import { transactionStatusModal$ } from '../store';
+import TransactionStatusModal from '../index';
+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

@@ -27,7 +27,6 @@ const useTransactionStatus = (
 				: skipToken,
 	});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (!hash) {
 			setStatus('SUCCESS');

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;
@@ -46,20 +49,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 +78,7 @@ function TransactionStatusModalContent() {
 		collectibleId,
 		callbacks,
 		queriesToInvalidate,
-	} = use$(transactionStatusModal$.state);
+	} = useTransactionModalState();
 
 	const { data: collectible, isLoading: collectibleLoading } = useCollectible({
 		collectionAddress,
@@ -84,21 +94,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,10 +1,11 @@
-import { observable } from '@legendapp/state';
 import type { QueryKey } from '@tanstack/react-query';
-import type { Hex } from 'viem';
-import type { ShowTransactionStatusModalArgs } from '.';
+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';
+import type { ShowTransactionStatusModalArgs } from '.';
 
 export type ConfirmationStatus = {
 	isConfirming: boolean;
@@ -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 { 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 feeOptions = options.map((option) => {
-			const value = option.token.contractAddress ?? '';
+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 ?? '';
 
-			return FeeOptionSelectItem({ value, option });
-		});
+		return FeeOptionSelectItem({ value, option });
+	});
 
-		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-		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,

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

@@ -1,4 +1,4 @@
-import type { Hash, Hex } from 'viem';
+import type { Address, Hash } from 'viem';
 
 export type ModalCallbacks = {
 	onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
@@ -9,6 +9,6 @@ export type ModalCallbacks = {
 export type BaseModalState = {
 	isOpen: boolean;
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	callbacks?: ModalCallbacks;
 };

package/src/react/ui/modals/modal-provider.tsx

@@ -1,13 +1,12 @@
 import { observer } from '@legendapp/state/react';
+import SwitchChainModal from './_internal/components/switchChainModal';
+import TransactionStatusModal from './_internal/components/transactionStatusModal';
 import { BuyModal } from './BuyModal/components/Modal';
 import { CreateListingModal } from './CreateListingModal/Modal';
 import { MakeOfferModal } from './MakeOfferModal/Modal';
 import { SellModal } from './SellModal/Modal';
 import SuccessfulPurchaseModal from './SuccessfulPurchaseModal';
 import { TransferModal } from './TransferModal';
-import SwitchChainModal from './_internal/components/switchChainModal';
-import TransactionStatusModal from './_internal/components/transactionStatusModal';
-import { _accountModalOpen$ } from './_internal/stores/accountModal';
 
 export const ModalProvider = observer(() => {
 	return (

package/src/types/api-types.ts

@@ -1,47 +1,47 @@
-export {
-	SortOrder,
-	PropertyType,
-	MarketplaceKind,
-	OrderbookKind,
-	SourceKind,
-	OrderSide,
-	OrderStatus,
-	ContractType,
-	CollectionStatus,
-	ProjectStatus,
-	CollectibleStatus,
-	WalletKind,
-	StepType,
-	TransactionCrypto,
-} from '../react/_internal';
 export type {
-	TokenMetadata,
+	Activity,
+	AdditionalFee,
 	Asset,
-	Page,
-	SortBy,
-	Filter,
-	Order,
-	PropertyFilter,
-	CollectiblesFilter,
-	FeeBreakdown,
+	CheckoutOptions,
+	CheckoutOptionsItem,
+	CheckoutOptionsMarketplaceOrder,
+	Collectible,
 	CollectibleOrder,
-	OrderFilter,
-	Activity,
+	CollectiblesFilter,
 	Collection,
 	CollectionConfig,
 	CollectionLastSynced,
-	Project,
-	Collectible,
+	CreateReq,
 	Currency,
+	Domain,
+	FeeBreakdown,
+	Filter,
+	GetOrdersInput,
+	Order,
 	OrderData,
-	AdditionalFee,
-	Step,
+	OrderFilter,
+	Page,
 	PostRequest,
-	CreateReq,
-	GetOrdersInput,
+	Project,
+	PropertyFilter,
 	Signature,
-	Domain,
-	CheckoutOptionsMarketplaceOrder,
-	CheckoutOptionsItem,
-	CheckoutOptions,
+	SortBy,
+	Step,
+	TokenMetadata,
+} from '../react/_internal';
+export {
+	CollectibleStatus,
+	CollectionStatus,
+	ContractType,
+	MarketplaceKind,
+	OrderbookKind,
+	OrderSide,
+	OrderStatus,
+	ProjectStatus,
+	PropertyType,
+	SortOrder,
+	SourceKind,
+	StepType,
+	TransactionCrypto,
+	WalletKind,
 } from '../react/_internal';

package/src/types/buyModalErrors.ts

@@ -97,7 +97,7 @@ export interface StateError {
 	timestamp: number;
 }
 
-// biome-ignore lint/complexity/noStaticOnlyClass:
+// biome-ignore lint/complexity/noStaticOnlyClass: provides better organization and type safety for error creation methods
 export class BuyModalErrorFactory {
 	static priceOverflow(
 		maxSafeValue: string,

package/src/types/index.ts

@@ -1,8 +1,8 @@
-export * from './api-types';
-export * from './sdk-config';
-export * from './types';
-export type * from './../react/queries/marketplaceConfig';
 export {
-	type MarketplaceWallet,
 	FilterCondition,
+	type MarketplaceWallet,
 } from '../react/_internal/api/builder.gen';
+export type * from './../react/queries/marketplaceConfig';
+export * from './api-types';
+export * from './sdk-config';
+export * from './types';

package/src/types/new-marketplace-types.ts

@@ -59,7 +59,7 @@ interface MarketplaceCollection {
 
 export interface MarketCollection extends MarketplaceCollection {
 	marketplaceType: MarketplaceType;
-	contractType: ContractType; //TODO: This should be added to the shop collection too
+	contractType: ContractType; //TODO: This should be added to the shop collection too in builder.gen.ts. Then update shop collections map from prefetchedMarketplaceSettings in "sdk/src/react/queries/marketplaceConfig.ts"
 	feePercentage: number;
 	destinationMarketplace: OrderbookKind;
 	currencyOptions: Array<string>;

package/src/types/sdk-config.ts

@@ -1,10 +1,12 @@
 import type { LookupMarketplaceReturn } from '../react/_internal/api/builder.gen';
+import type { DatabeatAnalytics } from '../react/_internal/databeat';
 import type { MarketplaceConfig } from './types';
 
 export type Env = 'development' | 'production' | 'next';
 
 export type ApiConfig = {
-	env: Env;
+	env?: Env;
+	url?: string;
 	accessKey?: string;
 };
 
@@ -16,7 +18,6 @@ export type SdkConfig = {
 		prefetchedMarketplaceSettings?: LookupMarketplaceReturn;
 		overrides?: {
 			marketplaceConfig?: Partial<MarketplaceConfig>;
-
 			api?: {
 				builder?: ApiConfig;
 				marketplace?: ApiConfig;
@@ -29,3 +30,8 @@ export type SdkConfig = {
 		};
 	};
 };
+
+export type MarketplaceSdkContext = {
+	openConnectModal: () => void;
+	analytics: DatabeatAnalytics;
+} & SdkConfig;