@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

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

@@ -1,42 +1,71 @@
-import { observable } from '@legendapp/state';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
 import type { SwitchChainError } from 'viem';
 import type { ShowSwitchChainModalArgs } from '.';
 
 export interface SwitchChainModalState {
 	isOpen: boolean;
-	open: (args: ShowSwitchChainModalArgs) => void;
-	close: () => void;
-	state: {
-		chainIdToSwitchTo: number | undefined;
-		isSwitching: boolean;
-		onSuccess: (() => void) | undefined;
-		onError: undefined | ((error: SwitchChainError) => void);
-		onClose: (() => void) | undefined;
-	};
+	chainIdToSwitchTo: number | undefined;
+	isSwitching: boolean;
+	onSuccess: (() => void) | undefined;
+	onError: undefined | ((error: SwitchChainError) => void);
+	onClose: (() => void) | undefined;
 }
 
-export const initialState: SwitchChainModalState = {
+const initialContext: SwitchChainModalState = {
 	isOpen: false,
-	open: ({ chainIdToSwitchTo, onError, onSuccess, onClose }) => {
-		switchChainModal$.state.set({
-			...switchChainModal$.state.get(),
-			chainIdToSwitchTo,
-			onError,
-			onSuccess,
-			onClose,
-		});
-		switchChainModal$.isOpen.set(true);
-	},
-	close: () => {
-		switchChainModal$.isOpen.set(false);
-	},
-	state: {
-		chainIdToSwitchTo: undefined,
-		onError: undefined,
-		onSuccess: undefined,
-		onClose: undefined,
-		isSwitching: false,
-	},
+	chainIdToSwitchTo: undefined,
+	isSwitching: false,
+	onSuccess: undefined,
+	onError: undefined,
+	onClose: undefined,
 };
 
-export const switchChainModal$ = observable(initialState);
+export const switchChainModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (context, event: ShowSwitchChainModalArgs) => ({
+			...context,
+			isOpen: true,
+			chainIdToSwitchTo: event.chainIdToSwitchTo,
+			onSuccess: event.onSuccess,
+			onError: event.onError,
+			onClose: event.onClose,
+		}),
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			chainIdToSwitchTo: undefined,
+			isSwitching: false,
+			onSuccess: undefined,
+			onError: undefined,
+			onClose: undefined,
+		}),
+		setSwitching: (context, event: { isSwitching: boolean }) => ({
+			...context,
+			isSwitching: event.isSwitching,
+		}),
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(switchChainModalStore, (state) => state.context.isOpen);
+
+export const useChainIdToSwitchTo = () =>
+	useSelector(
+		switchChainModalStore,
+		(state) => state.context.chainIdToSwitchTo,
+	);
+
+export const useIsSwitching = () =>
+	useSelector(switchChainModalStore, (state) => state.context.isSwitching);
+
+export const useOnSuccess = () =>
+	useSelector(switchChainModalStore, (state) => state.context.onSuccess);
+
+export const useOnError = () =>
+	useSelector(switchChainModalStore, (state) => state.context.onError);
+
+export const useOnClose = () =>
+	useSelector(switchChainModalStore, (state) => state.context.onClose);

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

@@ -1,7 +1,7 @@
 import { Image, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
 import type { TokenMetadata } from '@0xsequence/metadata';
 import { observer } from '@legendapp/state/react';
-import { type Hex, formatUnits } from 'viem';
+import { formatUnits, type Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useCollection } from '../../../../../hooks';
 import ChessTileImage from '../../../../images/chess-tile.png';

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

@@ -2,8 +2,8 @@ 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 '../index';
 import { transactionStatusModal$ } from '../store';
 
 const mockTransactionArgs: ShowTransactionStatusModalArgs = {

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/store.ts

@@ -1,10 +1,10 @@
 import { observable } from '@legendapp/state';
 import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
-import type { ShowTransactionStatusModalArgs } from '.';
 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;

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

@@ -7,6 +7,7 @@ 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,
@@ -29,7 +30,6 @@ const WaasFeeOptionsSelect = observer(
 			return FeeOptionSelectItem({ value, option });
 		});
 
-		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 		useEffect(() => {
 			if (options.length > 0 && !selectedFeeOption$.get())
 				selectedFeeOption$.set(options[0]);

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

@@ -1,13 +1,12 @@
 import { observer } from '@legendapp/state/react';
-import { BuyModal } from './BuyModal/Modal';
+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

@@ -0,0 +1,438 @@
+// Enhanced error types with price context and better debugging information
+export type BuyModalError =
+	| PriceOverflowError
+	| PriceCalculationError
+	| InvalidPriceFormatError
+	| InvalidQuantityError
+	| NetworkError
+	| ContractError
+	| CheckoutError
+	| ValidationError
+	| StateError;
+
+export interface PriceOverflowError {
+	type: 'PRICE_OVERFLOW';
+	maxSafeValue: string;
+	attemptedValue: string;
+	operation: string;
+	timestamp: number;
+}
+
+export interface PriceCalculationError {
+	type: 'PRICE_CALCULATION_ERROR';
+	operation: string;
+	inputs: string[];
+	originalError?: string;
+	timestamp: number;
+}
+
+// export interface InsufficientFundsError {
+//   type: "INSUFFICIENT_FUNDS";
+//   required: Price;
+//   available: Price;
+//   currency: string;
+//   shortfall: Price;
+//   timestamp: number;
+// }
+
+export interface InvalidPriceFormatError {
+	type: 'INVALID_PRICE_FORMAT';
+	providedPrice: string;
+	expectedFormat: string;
+	suggestions?: string[];
+	timestamp: number;
+}
+
+export interface InvalidQuantityError {
+	type: 'INVALID_QUANTITY';
+	provided: number;
+	min: number;
+	max: number;
+	available?: number;
+	timestamp: number;
+}
+
+export interface NetworkError {
+	type: 'NETWORK_ERROR';
+	message: string;
+	retryable: boolean;
+	chainId?: number;
+	endpoint?: string;
+	timestamp: number;
+}
+
+export interface ContractError {
+	type: 'CONTRACT_ERROR';
+	contractAddress: string;
+	message: string;
+	method?: string;
+	chainId?: number;
+	blockNumber?: number;
+	timestamp: number;
+}
+
+export interface CheckoutError {
+	type: 'CHECKOUT_ERROR';
+	provider: string;
+	message: string;
+	code?: string;
+	retryable: boolean;
+	timestamp: number;
+}
+
+export interface ValidationError {
+	type: 'VALIDATION_ERROR';
+	field: string;
+	message: string;
+	value?: unknown;
+	constraints?: Record<string, unknown>;
+	timestamp: number;
+}
+
+export interface StateError {
+	type: 'STATE_ERROR';
+	currentState: string;
+	attemptedAction: string;
+	message: string;
+	timestamp: number;
+}
+
+// biome-ignore lint/complexity/noStaticOnlyClass: provides better organization and type safety for error creation methods
+export class BuyModalErrorFactory {
+	static priceOverflow(
+		maxSafeValue: string,
+		attemptedValue: string,
+		operation: string,
+	): PriceOverflowError {
+		return {
+			type: 'PRICE_OVERFLOW',
+			maxSafeValue,
+			attemptedValue,
+			operation,
+			timestamp: Date.now(),
+		};
+	}
+
+	static priceCalculation(
+		operation: string,
+		inputs: string[],
+		originalError?: string,
+	): PriceCalculationError {
+		return {
+			type: 'PRICE_CALCULATION_ERROR',
+			operation,
+			inputs,
+			originalError,
+			timestamp: Date.now(),
+		};
+	}
+
+	//   static insufficientFunds(
+	//     required: Price,
+	//     available: Price,
+	//     currency: string,
+	//     shortfall: Price
+	//   ): InsufficientFundsError {
+	//     return {
+	//       type: "INSUFFICIENT_FUNDS",
+	//       required,
+	//       available,
+	//       currency,
+	//       shortfall,
+	//       timestamp: Date.now(),
+	//     };
+	//   }
+
+	static invalidPriceFormat(
+		providedPrice: string,
+		expectedFormat: string,
+		suggestions?: string[],
+	): InvalidPriceFormatError {
+		return {
+			type: 'INVALID_PRICE_FORMAT',
+			providedPrice,
+			expectedFormat,
+			suggestions,
+			timestamp: Date.now(),
+		};
+	}
+
+	static invalidQuantity(
+		provided: number,
+		min: number,
+		max: number,
+		available?: number,
+	): InvalidQuantityError {
+		return {
+			type: 'INVALID_QUANTITY',
+			provided,
+			min,
+			max,
+			available,
+			timestamp: Date.now(),
+		};
+	}
+
+	static networkError(
+		message: string,
+		retryable: boolean,
+		chainId?: number,
+		endpoint?: string,
+	): NetworkError {
+		return {
+			type: 'NETWORK_ERROR',
+			message,
+			retryable,
+			chainId,
+			endpoint,
+			timestamp: Date.now(),
+		};
+	}
+
+	static contractError(
+		contractAddress: string,
+		message: string,
+		method?: string,
+		chainId?: number,
+		blockNumber?: number,
+	): ContractError {
+		return {
+			type: 'CONTRACT_ERROR',
+			contractAddress,
+			message,
+			method,
+			chainId,
+			blockNumber,
+			timestamp: Date.now(),
+		};
+	}
+
+	static checkoutError(
+		provider: string,
+		message: string,
+		code?: string,
+		retryable = false,
+	): CheckoutError {
+		return {
+			type: 'CHECKOUT_ERROR',
+			provider,
+			message,
+			code,
+			retryable,
+			timestamp: Date.now(),
+		};
+	}
+
+	static validationError(
+		field: string,
+		message: string,
+		value?: unknown,
+		constraints?: Record<string, unknown>,
+	): ValidationError {
+		return {
+			type: 'VALIDATION_ERROR',
+			field,
+			message,
+			value,
+			constraints,
+			timestamp: Date.now(),
+		};
+	}
+
+	static stateError(
+		currentState: string,
+		attemptedAction: string,
+		message: string,
+	): StateError {
+		return {
+			type: 'STATE_ERROR',
+			currentState,
+			attemptedAction,
+			message,
+			timestamp: Date.now(),
+		};
+	}
+}
+
+// Error message formatters for user-friendly display
+// biome-ignore lint/complexity/noStaticOnlyClass: Formatter provides good namespacing for error formatting
+export class BuyModalErrorFormatter {
+	static format(error: BuyModalError): string {
+		switch (error.type) {
+			case 'PRICE_OVERFLOW':
+				return 'Price calculation exceeded safe limits. Please reduce quantity or contact support.';
+
+			case 'PRICE_CALCULATION_ERROR':
+				return 'Price calculation failed. Please refresh and try again.';
+
+			//   case "INSUFFICIENT_FUNDS":
+			//     return `Insufficient funds. You need ${error.currency} but only have available.`;
+
+			case 'INVALID_PRICE_FORMAT':
+				return `Invalid price format. Expected: ${error.expectedFormat}`;
+
+			case 'INVALID_QUANTITY':
+				return `Invalid quantity. Must be between ${error.min} and ${error.max}.`;
+
+			case 'NETWORK_ERROR':
+				return error.retryable
+					? `Network error. ${error.message} Please try again.`
+					: `Network unavailable. ${error.message}`;
+
+			case 'CONTRACT_ERROR':
+				return `Blockchain error at ${error.contractAddress}. Please refresh and try again.`;
+
+			case 'CHECKOUT_ERROR':
+				return error.retryable
+					? `Checkout failed with ${error.provider}. Please try again.`
+					: `Checkout unavailable with ${error.provider}.`;
+
+			case 'VALIDATION_ERROR':
+				return `${error.field}: ${error.message}`;
+
+			case 'STATE_ERROR':
+				return `Invalid operation: ${error.message}`;
+
+			default:
+				return 'An unexpected error occurred. Please try again.';
+		}
+	}
+
+	static isRetryable(error: BuyModalError): boolean {
+		switch (error.type) {
+			case 'NETWORK_ERROR':
+			case 'CHECKOUT_ERROR':
+				return error.retryable;
+
+			case 'PRICE_CALCULATION_ERROR':
+			case 'CONTRACT_ERROR':
+				return true;
+
+			default:
+				return false;
+		}
+	}
+
+	static getRecoveryAction(error: BuyModalError): string {
+		switch (error.type) {
+			//   case "INSUFFICIENT_FUNDS":
+			//     return "Add funds to your wallet";
+
+			case 'INVALID_QUANTITY':
+				return 'Adjust quantity';
+
+			case 'INVALID_PRICE_FORMAT':
+				return 'Enter valid price';
+
+			case 'NETWORK_ERROR':
+			case 'CONTRACT_ERROR':
+				return 'Retry transaction';
+
+			case 'CHECKOUT_ERROR':
+				return 'Try different payment method';
+
+			default:
+				return 'Refresh and try again';
+		}
+	}
+
+	/**
+	 * Transform class-based errors (BaseError/TransactionError) to user-friendly BuyModalError
+	 * This bridges the internal error system with the modal error system
+	 */
+	static fromTransactionError(error: Error): BuyModalError {
+		// Import transaction errors
+		const errorName = error.name || error.constructor.name;
+
+		switch (errorName) {
+			case 'PriceCalculationError':
+				return BuyModalErrorFactory.priceCalculation(
+					'price calculation',
+					[],
+					error.message,
+				);
+
+			case 'SalesContractError': {
+				// Extract contract address from error message if available
+				const addressMatch = error.message.match(/0x[a-fA-F0-9]{40}/);
+				return BuyModalErrorFactory.contractError(
+					addressMatch?.[0] || 'unknown',
+					error.message,
+				);
+			}
+
+			case 'QuantityValidationError': {
+				// Parse quantity from error message
+				const quantityMatch = error.message.match(/Invalid quantity: (\d+)/);
+				const availableMatch = error.message.match(
+					/available supply \((\d+)\)/,
+				);
+				return BuyModalErrorFactory.invalidQuantity(
+					Number(quantityMatch?.[1] || 0),
+					0,
+					Number(availableMatch?.[1] || 0),
+				);
+			}
+
+			case 'UserRejectedRequestError':
+				return BuyModalErrorFactory.checkoutError(
+					'user',
+					'User cancelled the transaction',
+					'USER_REJECTED',
+					false,
+				);
+
+			case 'NoWalletConnectedError':
+				return BuyModalErrorFactory.stateError(
+					'disconnected',
+					'purchase',
+					'Please connect your wallet to continue',
+				);
+
+			case 'ChainSwitchError':
+			case 'NetworkError':
+				return BuyModalErrorFactory.networkError(
+					error.message,
+					true, // retryable
+				);
+
+			case 'ShopDataValidationError':
+				return BuyModalErrorFactory.validationError(
+					'shop-config',
+					error.message,
+				);
+
+			default:
+				// Generic error for unknown types
+				return BuyModalErrorFactory.stateError(
+					'unknown',
+					'operation',
+					error.message || 'An unexpected error occurred',
+				);
+		}
+	}
+
+	/**
+	 * Enhanced error wrapper that catches and transforms errors consistently
+	 */
+	static async withErrorHandling<T>(
+		operation: () => Promise<T>,
+		_context: string, // Prefixed with underscore to indicate intentionally unused
+	): Promise<T> {
+		try {
+			return await operation();
+		} catch (error) {
+			// Transform the error to user-friendly format
+			const buyModalError = BuyModalErrorFormatter.fromTransactionError(
+				error as Error,
+			);
+
+			// Re-throw as the original error for error boundaries to catch
+			// but attach the transformed error for UI consumption
+			const enhancedError = error as Error & { buyModalError?: BuyModalError };
+			enhancedError.buyModalError = buyModalError;
+
+			throw enhancedError;
+		}
+	}
+}