@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/ui/modals/SuccessfulPurchaseModal/__tests__/Modal.test.tsx

@@ -2,7 +2,7 @@ import { cleanup, render, screen } from '@test';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
 import type { ModalCallbacks } from '../../_internal/types';
-import { successfulPurchaseModal$ } from '../_store';
+import { successfulPurchaseModalStore } from '../store';
 
 describe('SuccessfulPurchaseModal', () => {
 	beforeEach(() => {
@@ -30,7 +30,7 @@ describe('SuccessfulPurchaseModal', () => {
 			explorerName: 'Etherscan',
 		};
 
-		successfulPurchaseModal$.open(mockPurchaseData);
+		successfulPurchaseModalStore.send({ type: 'open', ...mockPurchaseData });
 		render(<SuccessfulPurchaseModal />);
 
 		expect(screen.getByText('Successful purchase!')).toBeInTheDocument();
@@ -58,7 +58,7 @@ describe('SuccessfulPurchaseModal', () => {
 			},
 		};
 
-		successfulPurchaseModal$.open(mockPurchaseData);
+		successfulPurchaseModalStore.send({ type: 'open', ...mockPurchaseData });
 		render(<SuccessfulPurchaseModal />);
 
 		expect(screen.getByText('View Collection')).toBeInTheDocument();
@@ -79,7 +79,7 @@ describe('SuccessfulPurchaseModal', () => {
 			explorerName: 'Etherscan',
 		};
 
-		successfulPurchaseModal$.open(mockPurchaseData);
+		successfulPurchaseModalStore.send({ type: 'open', ...mockPurchaseData });
 		render(<SuccessfulPurchaseModal />);
 
 		expect(screen.getByText('5 TOTAL')).toBeInTheDocument();
@@ -100,13 +100,15 @@ describe('SuccessfulPurchaseModal', () => {
 			explorerName: 'Etherscan',
 		};
 
-		successfulPurchaseModal$.open(mockPurchaseData);
+		successfulPurchaseModalStore.send({ type: 'open', ...mockPurchaseData });
 		render(<SuccessfulPurchaseModal />);
 
 		const closeButton = screen.getByLabelText('Close modal');
 		closeButton.click();
 
-		expect(successfulPurchaseModal$.isOpen.get()).toBe(false);
+		expect(successfulPurchaseModalStore.getSnapshot().context.isOpen).toBe(
+			false,
+		);
 	});
 
 	describe('useSuccessfulPurchaseModal', () => {
@@ -138,7 +140,9 @@ describe('SuccessfulPurchaseModal', () => {
 			};
 
 			modal.show(mockPurchaseData);
-			expect(successfulPurchaseModal$.callbacks.get()).toBe(callbacks);
+			expect(successfulPurchaseModalStore.getSnapshot().context.callbacks).toBe(
+				callbacks,
+			);
 		});
 	});
 });

package/src/react/ui/modals/SuccessfulPurchaseModal/index.tsx

@@ -7,27 +7,34 @@ import {
 	Modal,
 	Text,
 } from '@0xsequence/design-system';
-import { observer, use$ } from '@legendapp/state/react';
 import type { TokenMetadata } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
 import {
 	type SuccessfulPurchaseModalState,
-	successfulPurchaseModal$,
-} from './_store';
+	successfulPurchaseModalStore,
+	useIsOpen,
+	useModalState,
+} from './store';
 
 export const useSuccessfulPurchaseModal = (callbacks?: ModalCallbacks) => {
 	return {
 		show: (args: SuccessfulPurchaseModalState['state']) =>
-			successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
-		close: () => successfulPurchaseModal$.close(),
+			successfulPurchaseModalStore.send({
+				type: 'open',
+				...args,
+				defaultCallbacks: callbacks,
+			}),
+		close: () => successfulPurchaseModalStore.send({ type: 'close' }),
 	};
 };
 
-const SuccessfulPurchaseModal = observer(() => {
+const SuccessfulPurchaseModal = () => {
+	const isOpen = useIsOpen();
+	const modalState = useModalState();
+
 	const handleClose = () => {
-		successfulPurchaseModal$.close();
+		successfulPurchaseModalStore.send({ type: 'close' });
 	};
-	const isOpen = use$(successfulPurchaseModal$.isOpen);
 
 	if (!isOpen) return null;
 
@@ -47,9 +54,7 @@ const SuccessfulPurchaseModal = observer(() => {
 					Successful purchase!
 				</Text>
 
-				<CollectiblesGrid
-					collectibles={successfulPurchaseModal$.state.get().collectibles}
-				/>
+				<CollectiblesGrid collectibles={modalState.collectibles} />
 
 				<div className="flex items-center gap-1">
 					<Text className="text-base" fontWeight="medium" color="text80">
@@ -57,7 +62,7 @@ const SuccessfulPurchaseModal = observer(() => {
 					</Text>
 
 					<Text className="text-base" fontWeight="medium" color="text100">
-						{successfulPurchaseModal$.state.get().collectibles.length}
+						{modalState.collectibles.length}
 					</Text>
 
 					<Text className="text-base" fontWeight="medium" color="text80">
@@ -65,35 +70,34 @@ const SuccessfulPurchaseModal = observer(() => {
 					</Text>
 
 					<Text className="text-base" fontWeight="medium" color="text100">
-						{successfulPurchaseModal$.state.get().totalPrice}
+						{modalState.totalPrice}
 					</Text>
 				</div>
 
-				<SuccessfulPurchaseActions />
+				<SuccessfulPurchaseActions modalState={modalState} />
 			</div>
 		</Modal>
 	);
-});
+};
 
-function SuccessfulPurchaseActions() {
+function SuccessfulPurchaseActions({
+	modalState,
+}: {
+	modalState: SuccessfulPurchaseModalState['state'];
+}) {
 	return (
 		<div className="flex flex-col gap-2">
-			{successfulPurchaseModal$.state.ctaOptions.get() && (
+			{modalState.ctaOptions && (
 				<Button
 					className="w-full"
 					shape="square"
-					leftIcon={
-						successfulPurchaseModal$.state.ctaOptions.ctaIcon.get() || undefined
-					}
-					label={successfulPurchaseModal$.state.ctaOptions.ctaLabel.get()}
-					onClick={
-						successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() ||
-						undefined
-					}
+					leftIcon={modalState.ctaOptions.ctaIcon || undefined}
+					label={modalState.ctaOptions.ctaLabel}
+					onClick={modalState.ctaOptions.ctaOnClick || undefined}
 				/>
 			)}
 			<a
-				href={successfulPurchaseModal$.state.explorerUrl.get()}
+				href={modalState.explorerUrl}
 				target="_blank"
 				rel="noopener noreferrer"
 				className="w-full"
@@ -101,7 +105,7 @@ function SuccessfulPurchaseActions() {
 				<Button
 					shape="square"
 					leftIcon={ExternalLinkIcon}
-					label={`View on ${successfulPurchaseModal$.state.explorerName.get()}`}
+					label={`View on ${modalState.explorerName}`}
 				/>
 			</a>
 		</div>
@@ -123,7 +127,9 @@ function CollectiblesGrid({ collectibles }: { collectibles: TokenMetadata[] }) {
 						key={collectible.tokenId}
 					>
 						<Image
-							className={`aspect-square h-full w-full rounded-lg bg-background-secondary object-contain ${showPlus ? 'opacity-[0.4_!important]' : ''}`}
+							className={`aspect-square h-full w-full rounded-lg bg-background-secondary object-contain ${
+								showPlus ? 'opacity-[0.4_!important]' : ''
+							}`}
 							src={collectible.image}
 							alt={collectible.name}
 						/>

package/src/react/ui/modals/SuccessfulPurchaseModal/store.ts

@@ -0,0 +1,71 @@
+import type { IconProps } from '@0xsequence/design-system';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { ComponentType } from 'react';
+import type { TokenMetadata } from '../../../_internal';
+import type { ModalCallbacks } from '../_internal/types';
+
+export interface SuccessfulPurchaseModalState {
+	isOpen: boolean;
+	state: {
+		collectibles: TokenMetadata[];
+		totalPrice: string;
+		explorerName: string;
+		explorerUrl: string;
+		ctaOptions?: {
+			ctaLabel: string;
+			ctaOnClick: () => void;
+			ctaIcon?: ComponentType<IconProps>;
+		};
+	};
+	callbacks?: ModalCallbacks;
+}
+
+const initialContext: SuccessfulPurchaseModalState = {
+	isOpen: false,
+	state: {
+		collectibles: [],
+		totalPrice: '0',
+		explorerName: '',
+		explorerUrl: '',
+		ctaOptions: undefined,
+	},
+	callbacks: undefined,
+};
+
+export const successfulPurchaseModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (
+			context,
+			event: SuccessfulPurchaseModalState['state'] & {
+				callbacks?: ModalCallbacks;
+				defaultCallbacks?: ModalCallbacks;
+			},
+		) => ({
+			...context,
+			isOpen: true,
+			state: {
+				collectibles: event.collectibles,
+				totalPrice: event.totalPrice,
+				explorerName: event.explorerName,
+				explorerUrl: event.explorerUrl,
+				ctaOptions: event.ctaOptions,
+			},
+			callbacks: event.callbacks || event.defaultCallbacks,
+		}),
+		close: () => ({
+			...initialContext,
+		}),
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(successfulPurchaseModalStore, (state) => state.context.isOpen);
+
+export const useModalState = () =>
+	useSelector(successfulPurchaseModalStore, (state) => state.context.state);
+
+export const useCallbacks = () =>
+	useSelector(successfulPurchaseModalStore, (state) => state.context.callbacks);

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx

@@ -30,7 +30,6 @@ const EnterWalletAddressView = observer(() => {
 		isProcessingWithWaaS,
 		shouldHideActionButton: shouldHideTransferButton,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing: transferModal$.state.transferIsBeingProcessed.get(),
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:

package/src/react/ui/modals/TransferModal/index.tsx

@@ -88,7 +88,6 @@ const TransferModal = observer(() => {
 	const isTransferBeingProcessed =
 		transferModal$.state.transferIsBeingProcessed.get();
 	const { waasFeeOptionsShown } = useSelectWaasFeeOptions({
-		chainId: chainId,
 		isProcessing: isTransferBeingProcessed,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.test.tsx

@@ -11,7 +11,6 @@ vi.mock('../switchChainModal', () => ({
 	useSwitchChainModal: () => ({
 		show: mockShowSwitchChainModal,
 		close: vi.fn(),
-		isSwitching$: { get: () => false },
 	}),
 }));
 

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -4,7 +4,6 @@ import type React from 'react';
 import type { ComponentProps } from 'react';
 
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { MODAL_OVERLAY_PROPS } from '../consts';
 import { MODAL_CONTENT_PROPS } from '../consts';
@@ -31,117 +30,115 @@ export interface ActionModalProps {
 	hideCtas?: boolean;
 }
 
-export const ActionModal = observer(
-	({
-		isOpen,
-		onClose,
-		title,
-		children,
-		ctas,
-		chainId,
-		disableAnimation,
-		modalLoading,
-		spinnerContainerClassname,
-		hideCtas,
-	}: ActionModalProps) => {
-		const { show: showSwitchChainModal } = useSwitchChainModal();
-		const { wallet, isLoading, isError } = useWallet();
+export const ActionModal = ({
+	isOpen,
+	onClose,
+	title,
+	children,
+	ctas,
+	chainId,
+	disableAnimation,
+	modalLoading,
+	spinnerContainerClassname,
+	hideCtas,
+}: ActionModalProps) => {
+	const { show: showSwitchChainModal } = useSwitchChainModal();
+	const { wallet, isLoading, isError } = useWallet();
 
-		const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
-			const walletChainId = await wallet?.getChainId();
-			const chainMismatch = walletChainId !== Number(chainId);
-			if (chainMismatch) {
-				showSwitchChainModal({
-					chainIdToSwitchTo: chainId,
-					onSuccess,
-				});
-			} else {
-				onSuccess();
-			}
-		};
-
-		if (wallet?.isWaaS) {
-			wallet.switchChain(Number(chainId));
+	const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
+		const walletChainId = await wallet?.getChainId();
+		const chainMismatch = walletChainId !== Number(chainId);
+		if (chainMismatch) {
+			showSwitchChainModal({
+				chainIdToSwitchTo: chainId,
+				onSuccess,
+			});
+		} else {
+			onSuccess();
 		}
+	};
 
-		if (!isOpen || !chainId) {
-			return null;
-		}
+	if (wallet?.isWaaS) {
+		wallet.switchChain(Number(chainId));
+	}
+
+	if (!isOpen || !chainId) {
+		return null;
+	}
 
-		return (
-			<Modal
-				isDismissible={true}
-				onClose={onClose}
-				overlayProps={MODAL_OVERLAY_PROPS}
-				contentProps={MODAL_CONTENT_PROPS}
-				disableAnimation={disableAnimation}
-			>
-				<div className="relative flex grow flex-col items-center gap-4 p-6">
-					<Text className="w-full text-center font-body font-bold text-large text-text-100">
-						{title}
-					</Text>
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={onClose}
+			overlayProps={MODAL_OVERLAY_PROPS}
+			contentProps={MODAL_CONTENT_PROPS}
+			disableAnimation={disableAnimation}
+		>
+			<div className="relative flex grow flex-col items-center gap-4 p-6">
+				<Text className="w-full text-center font-body font-bold text-large text-text-100">
+					{title}
+				</Text>
 
-					{modalLoading || isLoading || isError ? (
-						<div
-							className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
-							data-testid="error-loading-wrapper"
-						>
-							{isError && (
-								<Text
-									data-testid="error-loading-text"
-									className="text-center font-body text-error100 text-small"
-								>
-									Error loading modal
-								</Text>
-							)}
-							{(isLoading || modalLoading) && (
-								<div data-testid="spinner">
-									<Spinner size="lg" />
-								</div>
-							)}
-						</div>
-					) : (
-						children
-					)}
+				{modalLoading || isLoading || isError ? (
+					<div
+						className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
+						data-testid="error-loading-wrapper"
+					>
+						{isError && (
+							<Text
+								data-testid="error-loading-text"
+								className="text-center font-body text-error100 text-small"
+							>
+								Error loading modal
+							</Text>
+						)}
+						{(isLoading || modalLoading) && (
+							<div data-testid="spinner">
+								<Spinner size="lg" />
+							</div>
+						)}
+					</div>
+				) : (
+					children
+				)}
 
-					{!hideCtas && !isLoading && !isError && (
-						<div className="flex w-full flex-col gap-2">
-							{ctas.map(
-								(cta) =>
-									!cta.hidden && (
-										<Button
-											className="w-full rounded-[12px] [&>div]:justify-center"
-											key={cta.onClick.toString()}
-											onClick={async () => {
-												await checkChain({
-													onSuccess: () => {
-														cta.onClick();
-													},
-												});
-											}}
-											variant={cta.variant || 'primary'}
-											pending={cta.pending}
-											disabled={cta.disabled}
-											size="lg"
-											data-testid={cta.testid}
-											label={
-												<div className="flex items-center justify-center gap-2">
-													{cta.pending && (
-														<div data-testid={`${cta.testid}-spinner`}>
-															<Spinner size="sm" />
-														</div>
-													)}
+				{!hideCtas && !isLoading && !isError && (
+					<div className="flex w-full flex-col gap-2">
+						{ctas.map(
+							(cta) =>
+								!cta.hidden && (
+									<Button
+										className="w-full rounded-[12px] [&>div]:justify-center"
+										key={cta.onClick.toString()}
+										onClick={async () => {
+											await checkChain({
+												onSuccess: () => {
+													cta.onClick();
+												},
+											});
+										}}
+										variant={cta.variant || 'primary'}
+										pending={cta.pending}
+										disabled={cta.disabled}
+										size="lg"
+										data-testid={cta.testid}
+										label={
+											<div className="flex items-center justify-center gap-2">
+												{cta.pending && (
+													<div data-testid={`${cta.testid}-spinner`}>
+														<Spinner size="sm" />
+													</div>
+												)}
 
-													{cta.label}
-												</div>
-											}
-										/>
-									),
-							)}
-						</div>
-					)}
-				</div>
-			</Modal>
-		);
-	},
-);
+												{cta.label}
+											</div>
+										}
+									/>
+								),
+						)}
+					</div>
+				)}
+			</div>
+		</Modal>
+	);
+};

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

@@ -1,4 +1,5 @@
-import { type Observable, observable } from '@legendapp/state';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
 import type { Address } from 'viem';
 
 export interface ActionModalState {
@@ -7,18 +8,50 @@ export interface ActionModalState {
 	collectionAddress: Address | null;
 }
 
-export function createActionModalStore() {
-	return observable<ActionModalState>({
-		isOpen: false,
-		chainId: null,
-		collectionAddress: null,
-	});
-}
+const initialContext: ActionModalState = {
+	isOpen: false,
+	chainId: null,
+	collectionAddress: null,
+};
+
+export const actionModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (
+			context,
+			event: { chainId: number; collectionAddress: Address },
+		) => ({
+			...context,
+			isOpen: true,
+			chainId: event.chainId,
+			collectionAddress: event.collectionAddress,
+		}),
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			chainId: null,
+			collectionAddress: null,
+		}),
+	},
+});
+
+// Selector hooks
+export const useActionModalState = () =>
+	useSelector(actionModalStore, (state) => state.context);
+
+export const useIsActionModalOpen = () =>
+	useSelector(actionModalStore, (state) => state.context.isOpen);
+
+export const useActionModalChainId = () =>
+	useSelector(actionModalStore, (state) => state.context.chainId);
+
+export const useActionModalCollectionAddress = () =>
+	useSelector(actionModalStore, (state) => state.context.collectionAddress);
 
-export function openModal(store: Observable<ActionModalState>) {
-	store.isOpen.set(true);
+export function openModal(chainId: number, collectionAddress: Address) {
+	actionModalStore.send({ type: 'open', chainId, collectionAddress });
 }
 
-export function closeModal(store: Observable<ActionModalState>) {
-	store.isOpen.set(false);
+export function closeModal() {
+	actionModalStore.send({ type: 'close' });
 }

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/__tests__/index.test.tsx

@@ -23,7 +23,7 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useCurrencies');
+		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: true,
 			data: undefined,
@@ -38,7 +38,7 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should set first currency as default when currencies load', async () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useCurrencies');
+		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: false,
 			data: TEST_CURRENCIES,

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

@@ -6,7 +6,7 @@ import { observer } from '@legendapp/state/react';
 import { useEffect } from 'react';
 import type { Hex } from 'viem';
 import type { Currency } from '../../../../../_internal';
-import { useCurrencies } from '../../../../../hooks';
+import { useMarketCurrencies } from '../../../../../hooks';
 import {
 	CustomSelect,
 	type SelectItem,
@@ -28,11 +28,12 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	includeNativeCurrency,
 }: CurrencyOptionsSelectProps) {
 	const currency = selectedCurrency$.get();
-	const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
-		chainId,
-		collectionAddress,
-		includeNativeCurrency,
-	});
+	const { data: currencies, isLoading: currenciesLoading } =
+		useMarketCurrencies({
+			chainId,
+			collectionAddress,
+			includeNativeCurrency,
+		});
 
 	// set default currency
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>