@0xsequence/marketplace-sdk 0.9.0 → 0.10.0

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

@@ -1,13 +1,12 @@
 'use client';
 
 import { Divider, Skeleton, Text } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import { cn } from '../../../../../../utils';
 import WaasFeeOptionsSelect from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
 import ActionButtons from './_components/ActionButtons';
 import BalanceIndicator from './_components/BalanceIndicator';
-import { selectWaasFeeOptions$ } from './store';
+import { useSelectWaasFeeOptionsStore } from './store';
 import useWaasFeeOptionManager from './useWaasFeeOptionManager';
 
 type SelectWaasFeeOptionsProps = {
@@ -17,108 +16,103 @@ type SelectWaasFeeOptionsProps = {
 	className?: string;
 };
 
-const SelectWaasFeeOptions = observer(
-	({
-		chainId,
-		onCancel,
-		titleOnConfirm,
-		className,
-	}: SelectWaasFeeOptionsProps) => {
-		const {
-			selectedFeeOption$,
-			selectedFeeOption,
-			pendingFeeOptionConfirmation,
-			currencyBalance,
-			currencyBalanceLoading,
-			insufficientBalance,
-			feeOptionsConfirmed,
-			handleConfirmFeeOption,
-		} = useWaasFeeOptionManager(chainId);
-
-		console.log('pendingFeeOptionConfirmation', pendingFeeOptionConfirmation);
-
-		const handleCancelFeeOption = () => {
-			selectWaasFeeOptions$.hide();
-
-			onCancel?.();
-		};
-
-		const isSponsored = pendingFeeOptionConfirmation?.options?.length === 0;
-
-		if (
-			!selectWaasFeeOptions$.isVisible.get() ||
-			isSponsored ||
-			!selectedFeeOption
-		) {
-			return null;
-		}
-
-		return (
-			<div
-				className={cn(
-					'flex w-full flex-col gap-2 rounded-2xl bg-button-emphasis p-0 backdrop-blur-md',
-					className,
-				)}
-			>
-				<Divider className="mt-0 mb-4" />
-
-				<Text className="mb-2 font-body font-bold text-large text-text-100">
-					{feeOptionsConfirmed ? titleOnConfirm : 'Select a fee option'}
-				</Text>
-
-				{!feeOptionsConfirmed && !pendingFeeOptionConfirmation && (
-					<Skeleton className="h-[52px] w-full animate-shimmer rounded-xl" />
-				)}
-
-				{(feeOptionsConfirmed || pendingFeeOptionConfirmation) && (
-					<div
-						className={cn(
-							'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full',
-							feeOptionsConfirmed && 'pointer-events-none opacity-70',
-						)}
-					>
-						<WaasFeeOptionsSelect
-							options={
-								(pendingFeeOptionConfirmation?.options as FeeOption[]) || [
-									selectedFeeOption,
-								]
-							}
-							selectedFeeOption$={selectedFeeOption$}
-						/>
-					</div>
-				)}
-
-				<div className="flex w-full items-start justify-between">
-					{!feeOptionsConfirmed &&
-						(!pendingFeeOptionConfirmation || currencyBalanceLoading) && (
-							<Skeleton className="h-[20px] w-2/3 animate-shimmer rounded-xl" />
-						)}
-
-					{(feeOptionsConfirmed ||
-						(pendingFeeOptionConfirmation && !currencyBalanceLoading)) && (
-						<BalanceIndicator
-							insufficientBalance={insufficientBalance}
-							currencyBalance={currencyBalance}
-							selectedFeeOption={selectedFeeOption}
-						/>
+const SelectWaasFeeOptions = ({
+	chainId,
+	onCancel,
+	titleOnConfirm,
+	className,
+}: SelectWaasFeeOptionsProps) => {
+	const { isVisible, hide, setSelectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
+	const {
+		selectedFeeOption,
+		pendingFeeOptionConfirmation,
+		currencyBalance,
+		currencyBalanceLoading,
+		insufficientBalance,
+		feeOptionsConfirmed,
+		handleConfirmFeeOption,
+	} = useWaasFeeOptionManager(chainId);
+
+	console.log('pendingFeeOptionConfirmation', pendingFeeOptionConfirmation);
+
+	const handleCancelFeeOption = () => {
+		hide();
+		onCancel?.();
+	};
+
+	const isSponsored = pendingFeeOptionConfirmation?.options?.length === 0;
+
+	if (!isVisible || isSponsored || !selectedFeeOption) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cn(
+				'flex w-full flex-col gap-2 rounded-2xl bg-button-emphasis p-0 backdrop-blur-md',
+				className,
+			)}
+		>
+			<Divider className="mt-0 mb-4" />
+
+			<Text className="mb-2 font-body font-bold text-large text-text-100">
+				{feeOptionsConfirmed ? titleOnConfirm : 'Select a fee option'}
+			</Text>
+
+			{!feeOptionsConfirmed && !pendingFeeOptionConfirmation && (
+				<Skeleton className="h-[52px] w-full animate-shimmer rounded-xl" />
+			)}
+
+			{(feeOptionsConfirmed || pendingFeeOptionConfirmation) && (
+				<div
+					className={cn(
+						'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full',
+						feeOptionsConfirmed && 'pointer-events-none opacity-70',
 					)}
+				>
+					<WaasFeeOptionsSelect
+						options={
+							(pendingFeeOptionConfirmation?.options as FeeOption[]) || [
+								selectedFeeOption,
+							]
+						}
+						selectedFeeOption={selectedFeeOption}
+						onSelectedFeeOptionChange={setSelectedFeeOption}
+					/>
 				</div>
+			)}
 
-				<ActionButtons
-					onCancel={handleCancelFeeOption}
-					onConfirm={handleConfirmFeeOption}
-					disabled={
-						!selectedFeeOption?.token ||
-						insufficientBalance ||
-						currencyBalanceLoading
-					}
-					loading={currencyBalanceLoading}
-					confirmed={feeOptionsConfirmed}
-					tokenSymbol={selectedFeeOption?.token.symbol}
-				/>
+			<div className="flex w-full items-start justify-between">
+				{!feeOptionsConfirmed &&
+					(!pendingFeeOptionConfirmation || currencyBalanceLoading) && (
+						<Skeleton className="h-[20px] w-2/3 animate-shimmer rounded-xl" />
+					)}
+
+				{(feeOptionsConfirmed ||
+					(pendingFeeOptionConfirmation && !currencyBalanceLoading)) && (
+					<BalanceIndicator
+						insufficientBalance={insufficientBalance}
+						currencyBalance={currencyBalance}
+						selectedFeeOption={selectedFeeOption}
+					/>
+				)}
 			</div>
-		);
-	},
-);
+
+			<ActionButtons
+				onCancel={handleCancelFeeOption}
+				onConfirm={handleConfirmFeeOption}
+				disabled={
+					!selectedFeeOption?.token ||
+					insufficientBalance ||
+					currencyBalanceLoading
+				}
+				loading={currencyBalanceLoading}
+				confirmed={feeOptionsConfirmed}
+				tokenSymbol={selectedFeeOption?.token.symbol}
+			/>
+		</div>
+	);
+};
 
 export default SelectWaasFeeOptions;

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

@@ -1,25 +1,83 @@
-import { observable } from '@legendapp/state';
+'use client';
+
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
 import type {
 	FeeOption,
 	WaasFeeOptionConfirmation,
 } from '../../../../../../types/waas-types';
 
-type SelectWaasFeeOptionsState = {
+interface SelectWaasFeeOptionsContext {
 	selectedFeeOption: FeeOption | undefined;
 	pendingFeeOptionConfirmation: WaasFeeOptionConfirmation | undefined;
 	isVisible: boolean;
-	hide: () => void;
-};
+}
 
-const initialState = {
-	selectedFeeOption: undefined,
-	pendingFeeOptionConfirmation: undefined,
-	isVisible: false,
-	hide: () => {
-		selectWaasFeeOptions$.isVisible.set(false);
-		selectWaasFeeOptions$.selectedFeeOption.set(undefined);
-		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(undefined);
+export const selectWaasFeeOptionsStore = createStore({
+	context: {
+		selectedFeeOption: undefined,
+		pendingFeeOptionConfirmation: undefined,
+		isVisible: false,
+	} as SelectWaasFeeOptionsContext,
+	on: {
+		show: (context) => ({
+			...context,
+			isVisible: true,
+		}),
+		hide: () => ({
+			selectedFeeOption: undefined,
+			pendingFeeOptionConfirmation: undefined,
+			isVisible: false,
+		}),
+		setSelectedFeeOption: (
+			context,
+			event: { feeOption: FeeOption | undefined },
+		) => ({
+			...context,
+			selectedFeeOption: event.feeOption,
+		}),
+		setPendingFeeOptionConfirmation: (
+			context,
+			event: { confirmation: WaasFeeOptionConfirmation | undefined },
+		) => ({
+			...context,
+			pendingFeeOptionConfirmation: event.confirmation,
+		}),
 	},
-} as SelectWaasFeeOptionsState;
+});
 
-export const selectWaasFeeOptions$ = observable(initialState);
+// React hooks
+export const useSelectWaasFeeOptionsStore = () => {
+	const isVisible = useSelector(
+		selectWaasFeeOptionsStore,
+		(state) => state.context.isVisible,
+	);
+	const selectedFeeOption = useSelector(
+		selectWaasFeeOptionsStore,
+		(state) => state.context.selectedFeeOption,
+	);
+	const pendingFeeOptionConfirmation = useSelector(
+		selectWaasFeeOptionsStore,
+		(state) => state.context.pendingFeeOptionConfirmation,
+	);
+
+	return {
+		isVisible,
+		selectedFeeOption,
+		pendingFeeOptionConfirmation,
+		show: () => selectWaasFeeOptionsStore.send({ type: 'show' }),
+		hide: () => selectWaasFeeOptionsStore.send({ type: 'hide' }),
+		setSelectedFeeOption: (feeOption: FeeOption | undefined) =>
+			selectWaasFeeOptionsStore.send({
+				type: 'setSelectedFeeOption',
+				feeOption,
+			}),
+		setPendingFeeOptionConfirmation: (
+			confirmation: WaasFeeOptionConfirmation | undefined,
+		) =>
+			selectWaasFeeOptionsStore.send({
+				type: 'setPendingFeeOptionConfirmation',
+				confirmation,
+			}),
+	};
+};

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/useWaasFeeOptionManager.tsx

@@ -4,15 +4,27 @@ import { type Address, zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
-import { selectWaasFeeOptions$ } from './store';
+import { useSelectWaasFeeOptionsStore } from './store';
 
 const useWaasFeeOptionManager = (chainId: number) => {
 	const { address: userAddress } = useAccount();
-	const selectedFeeOption$ = selectWaasFeeOptions$.selectedFeeOption;
-	const [pendingFeeOptionConfirmation, confirmPendingFeeOption] =
+	const {
+		selectedFeeOption,
+		setSelectedFeeOption,
+		pendingFeeOptionConfirmation: storedPendingFeeOptionConfirmation,
+		setPendingFeeOptionConfirmation,
+	} = useSelectWaasFeeOptionsStore();
+
+	const [pendingFeeOptionConfirmationFromHook, confirmPendingFeeOption] =
 		useWaasFeeOptions();
 	const [feeOptionsConfirmed, setFeeOptionsConfirmed] = useState(false);
-	const selectedFeeOption = selectedFeeOption$.get();
+
+	// Update store when hook value changes
+	useEffect(() => {
+		setPendingFeeOptionConfirmation(
+			pendingFeeOptionConfirmationFromHook as any,
+		);
+	}, [pendingFeeOptionConfirmationFromHook, setPendingFeeOptionConfirmation]);
 
 	const { data: currencyBalance, isLoading: currencyBalanceLoading } =
 		useCurrencyBalance({
@@ -23,14 +35,18 @@ const useWaasFeeOptionManager = (chainId: number) => {
 		});
 
 	useEffect(() => {
-		if (!selectedFeeOption && pendingFeeOptionConfirmation) {
-			if (pendingFeeOptionConfirmation.options.length > 0) {
-				selectedFeeOption$.set(
-					pendingFeeOptionConfirmation.options[0] as FeeOption,
+		if (!selectedFeeOption && storedPendingFeeOptionConfirmation) {
+			if (storedPendingFeeOptionConfirmation.options.length > 0) {
+				setSelectedFeeOption(
+					storedPendingFeeOptionConfirmation.options[0] as FeeOption,
 				);
 			}
 		}
-	}, [pendingFeeOptionConfirmation]);
+	}, [
+		storedPendingFeeOptionConfirmation,
+		selectedFeeOption,
+		setSelectedFeeOption,
+	]);
 
 	const insufficientBalance = (() => {
 		if (!selectedFeeOption?.value || !selectedFeeOption.token.decimals) {
@@ -50,10 +66,11 @@ const useWaasFeeOptionManager = (chainId: number) => {
 	})();
 
 	const handleConfirmFeeOption = () => {
-		if (!selectedFeeOption?.token || !pendingFeeOptionConfirmation?.id) return;
+		if (!selectedFeeOption?.token || !storedPendingFeeOptionConfirmation?.id)
+			return;
 
 		confirmPendingFeeOption(
-			pendingFeeOptionConfirmation?.id,
+			storedPendingFeeOptionConfirmation?.id,
 			selectedFeeOption.token.contractAddress || zeroAddress,
 		);
 
@@ -61,9 +78,8 @@ const useWaasFeeOptionManager = (chainId: number) => {
 	};
 
 	return {
-		selectedFeeOption$,
 		selectedFeeOption,
-		pendingFeeOptionConfirmation,
+		pendingFeeOptionConfirmation: storedPendingFeeOptionConfirmation,
 		currencyBalance,
 		currencyBalanceLoading,
 		insufficientBalance,

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

@@ -1,13 +1,13 @@
 'use client';
 
 import { Image, Skeleton, Text } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { useCollectible } from '../../../../../hooks';
 import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TokenPreviewProps = {
 	collectionName?: string;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	collectibleId: string;
 	chainId: number;
 };

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Image, Skeleton, Text } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
 import type { Price } from '../../../../../../types';
 import { calculateEarningsAfterFees } from '../../../../../../utils/price';
@@ -9,7 +9,7 @@ import { useMarketplaceConfig, useRoyalty } from '../../../../../hooks';
 
 type TransactionDetailsProps = {
 	collectibleId: string;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	price?: Price;
 	currencyImageUrl?: string;

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

@@ -1,18 +1,19 @@
+'use client';
+
 import { Image, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
 import type { TokenMetadata } from '@0xsequence/metadata';
-import { observer } from '@legendapp/state/react';
-import { formatUnits, type Hex } from 'viem';
+import { type Address, formatUnits } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useCollection } from '../../../../../hooks';
 import ChessTileImage from '../../../../images/chess-tile.png';
 import TimeAgo from '../timeAgo';
-import { transactionStatusModal$ } from '../transactionStatusModal/store';
+import { useTransactionType } from '../transactionStatusModal/store';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
 
 type TransactionPreviewProps = {
 	orderId?: string;
 	price?: Price;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectible: TokenMetadata | undefined;
 	collectibleLoading: boolean;
@@ -23,114 +24,112 @@ type TransactionPreviewProps = {
 	isTimeout: boolean;
 };
 
-const TransactionPreview = observer(
-	({
+const TransactionPreview = ({
+	orderId,
+	price,
+	collectionAddress,
+	chainId,
+	collectible,
+	collectibleLoading,
+	currencyImageUrl,
+	isConfirming,
+	isConfirmed,
+	isFailed,
+	isTimeout,
+}: TransactionPreviewProps) => {
+	const transactionType = useTransactionType();
+	const title = useTransactionPreviewTitle(
 		orderId,
-		price,
+		{ isConfirmed, isConfirming, isFailed, isTimeout },
+		transactionType,
+	);
+	const { data: collection, isLoading: collectionLoading } = useCollection({
 		collectionAddress,
 		chainId,
-		collectible,
-		collectibleLoading,
-		currencyImageUrl,
-		isConfirming,
-		isConfirmed,
-		isFailed,
-		isTimeout,
-	}: TransactionPreviewProps) => {
-		const { type } = transactionStatusModal$.state.get();
-		const title = useTransactionPreviewTitle(
-			orderId,
-			{ isConfirmed, isConfirming, isFailed, isTimeout },
-			type,
+	});
+
+	const collectibleImage = collectible?.image;
+	const collectibleName = collectible?.name;
+	const collectionName = collection?.name;
+	const priceFormatted = price
+		? formatUnits(BigInt(price?.amountRaw), price?.currency.decimals)
+		: undefined;
+
+	if (collectibleLoading || collectionLoading) {
+		return (
+			<div className="w-full rounded-xl" style={{ height: 83 }}>
+				<Skeleton style={{ width: '100%', height: '100%' }} />
+			</div>
 		);
-		const { data: collection, isLoading: collectionLoading } = useCollection({
-			collectionAddress,
-			chainId,
-		});
+	}
 
-		const collectibleImage = collectible?.image;
-		const collectibleName = collectible?.name;
-		const collectionName = collection?.name;
-		const priceFormatted = price
-			? formatUnits(BigInt(price?.amountRaw), price?.currency.decimals)
-			: undefined;
+	return (
+		<div
+			className="rounded-xl bg-background-secondary p-3"
+			data-testid="transaction-preview"
+		>
+			<div className="flex items-center">
+				<Text
+					className="mr-1 font-body text-xs"
+					color="text80"
+					fontWeight="medium"
+					data-testid="transaction-preview-title"
+				>
+					{title}
+				</Text>
 
-		if (collectibleLoading || collectionLoading) {
-			return (
-				<div className="w-full rounded-xl" style={{ height: 83 }}>
-					<Skeleton style={{ width: '100%', height: '100%' }} />
-				</div>
-			);
-		}
+				<NetworkImage chainId={Number(chainId)} size="xs" />
 
-		return (
-			<div
-				className="rounded-xl bg-background-secondary p-3"
-				data-testid="transaction-preview"
-			>
-				<div className="flex items-center">
+				{isConfirming && <TimeAgo date={new Date()} />}
+			</div>
+			<div className="mt-2 flex items-center">
+				<Image
+					className="mr-3 h-9 w-9 rounded-sm"
+					src={collectibleImage || ChessTileImage}
+					alt={collectibleName}
+					style={{ objectFit: 'cover' }}
+					data-testid="transaction-preview-image"
+				/>
+
+				<div className="flex flex-col items-start gap-0.5">
 					<Text
-						className="mr-1 font-body text-xs"
+						className="font-body text-xs"
 						color="text80"
 						fontWeight="medium"
-						data-testid="transaction-preview-title"
+						data-testid="transaction-preview-collection-name"
 					>
-						{title}
+						{collectionName}
 					</Text>
 
-					<NetworkImage chainId={Number(chainId)} size="xs" />
-
-					{isConfirming && <TimeAgo date={new Date()} />}
+					<Text
+						className="font-body text-xs"
+						color="text100"
+						fontWeight="bold"
+						data-testid="transaction-preview-collectible-name"
+					>
+						{collectibleName}
+					</Text>
 				</div>
-				<div className="mt-2 flex items-center">
-					<Image
-						className="mr-3 h-9 w-9 rounded-sm"
-						src={collectibleImage || ChessTileImage}
-						alt={collectibleName}
-						style={{ objectFit: 'cover' }}
-						data-testid="transaction-preview-image"
-					/>
 
-					<div className="flex flex-col items-start gap-0.5">
-						<Text
-							className="font-body text-xs"
-							color="text80"
-							fontWeight="medium"
-							data-testid="transaction-preview-collection-name"
-						>
-							{collectionName}
-						</Text>
+				{price && (
+					<div
+						className="flex grow items-center justify-end gap-1"
+						data-testid="transaction-preview-price"
+					>
+						<Image className="h-3 w-3" src={currencyImageUrl} />
 
 						<Text
 							className="font-body text-xs"
 							color="text100"
 							fontWeight="bold"
-							data-testid="transaction-preview-collectible-name"
 						>
-							{collectibleName}
+							{priceFormatted} {price?.currency.symbol}
 						</Text>
 					</div>
-
-					{price && (
-						<div
-							className="flex grow items-center justify-end gap-1"
-							data-testid="transaction-preview-price"
-						>
-							<Image className="h-3 w-3" src={currencyImageUrl} />
-
-							<Text
-								className="font-body text-xs"
-								color="text100"
-								fontWeight="bold"
-							>
-								{priceFormatted} {price?.currency.symbol}
-							</Text>
-						</div>
-					)}
-				</div>
+				)}
 			</div>
-		);
-	},
-);
+		</div>
+	);
+};
 
 export default TransactionPreview;