@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

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/switchChainModal/__tests__/SwitchChainModal.test.tsx

@@ -9,17 +9,14 @@ import {
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { useChainId } from 'wagmi';
 import SwitchChainModal, { useSwitchChainModal } from '../index';
-import { switchChainModal$ } from '../store';
+import { switchChainModalStore } from '../store';
 
 const chainToSwitchTo = wagmiConfig.chains[1];
 
 describe('SwitchChainModal', () => {
 	beforeEach(() => {
-		switchChainModal$.state.isSwitching.set(false);
-		switchChainModal$.state.chainIdToSwitchTo.set(undefined);
-		switchChainModal$.state.onError.set(undefined);
-		switchChainModal$.state.onSuccess.set(undefined);
-		switchChainModal$.state.onClose.set(undefined);
+		// Reset store to initial state
+		switchChainModalStore.send({ type: 'close' });
 	});
 
 	test('opens switch chain modal with correct chain', async () => {
@@ -81,8 +78,15 @@ describe('SwitchChainModal', () => {
 	});
 
 	test('shows spinner while switching chain', async () => {
-		switchChainModal$.state.isSwitching.set(true);
-		switchChainModal$.state.chainIdToSwitchTo.set(chainToSwitchTo.id);
+		// Open modal and set isSwitching to true
+		switchChainModalStore.send({
+			type: 'open',
+			chainIdToSwitchTo: chainToSwitchTo.id,
+		});
+		switchChainModalStore.send({
+			type: 'setSwitching',
+			isSwitching: true,
+		});
 
 		render(<SwitchChainModal />);
 

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

@@ -1,13 +1,20 @@
 'use client';
 
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import type { SwitchChainError } from 'viem';
 import { useSwitchChain } from 'wagmi';
 import { getPresentableChainName } from '../../../../../../utils/network';
 import AlertMessage from '../alertMessage';
 import { MODAL_OVERLAY_PROPS } from '../consts';
-import { switchChainModal$ } from './store';
+import {
+	switchChainModalStore,
+	useChainIdToSwitchTo,
+	useIsOpen,
+	useIsSwitching,
+	useOnClose,
+	useOnError,
+	useOnSuccess,
+} from './store';
 
 export type ShowSwitchChainModalArgs = {
 	chainIdToSwitchTo: number;
@@ -18,59 +25,54 @@ export type ShowSwitchChainModalArgs = {
 
 export const useSwitchChainModal = () => {
 	return {
-		show: (args: ShowSwitchChainModalArgs) => switchChainModal$.open(args),
-		close: () => switchChainModal$.delete(),
-		isSwitching$: switchChainModal$.state.isSwitching,
+		show: (args: ShowSwitchChainModalArgs) =>
+			switchChainModalStore.send({ type: 'open', ...args }),
+		close: () => switchChainModalStore.send({ type: 'close' }),
 	};
 };
 
-const SwitchChainModal = observer(() => {
-	const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
-	const isSwitching$ = switchChainModal$.state.isSwitching;
+const SwitchChainModal = () => {
+	const isOpen = useIsOpen();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
+	const isSwitching = useIsSwitching();
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+	const onClose = useOnClose();
+
 	const chainName = chainIdToSwitchTo
 		? getPresentableChainName(chainIdToSwitchTo)
 		: '';
 	const { switchChainAsync } = useSwitchChain();
 
 	async function handleSwitchChain() {
-		isSwitching$.set(true);
+		switchChainModalStore.send({ type: 'setSwitching', isSwitching: true });
 
 		try {
 			if (!chainIdToSwitchTo) return;
 			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
 
-			if (
-				switchChainModal$.state.onSuccess.get() &&
-				typeof switchChainModal$.state.onSuccess.get() === 'function'
-			) {
-				switchChainModal$.state.onSuccess();
+			if (onSuccess && typeof onSuccess === 'function') {
+				onSuccess();
 			}
 
-			switchChainModal$.delete();
+			switchChainModalStore.send({ type: 'close' });
 		} catch (error) {
-			if (
-				error instanceof Error &&
-				switchChainModal$.state.onError.get() &&
-				typeof switchChainModal$.state.onError.get() === 'function'
-			) {
-				switchChainModal$.state.onError.get()?.(error as SwitchChainError);
+			if (error instanceof Error && onError && typeof onError === 'function') {
+				onError(error as SwitchChainError);
 			}
 		} finally {
-			isSwitching$.set(false);
+			switchChainModalStore.send({ type: 'setSwitching', isSwitching: false });
 		}
 	}
 
 	const handleClose = () => {
-		if (
-			switchChainModal$.state.onClose &&
-			typeof switchChainModal$.state.onClose === 'function'
-		) {
-			switchChainModal$.state.onClose();
+		if (onClose && typeof onClose === 'function') {
+			onClose();
 		}
-		switchChainModal$.delete();
+		switchChainModalStore.send({ type: 'close' });
 	};
 
-	if (!chainIdToSwitchTo) return null;
+	if (!isOpen || !chainIdToSwitchTo) return null;
 
 	return (
 		<Modal
@@ -92,7 +94,7 @@ const SwitchChainModal = observer(() => {
 
 				<Button
 					className={`${
-						isSwitching$.get()
+						isSwitching
 							? 'flex w-[147px] items-center justify-center [&>div]:justify-center'
 							: 'w-[147px]'
 					} flex justify-self-end`}
@@ -100,7 +102,7 @@ const SwitchChainModal = observer(() => {
 					id="switch-chain-button"
 					size="sm"
 					label={
-						isSwitching$.get() ? (
+						isSwitching ? (
 							<div data-testid="switch-chain-spinner">
 								<Spinner className="spinner" />
 							</div>
@@ -109,7 +111,7 @@ const SwitchChainModal = observer(() => {
 						)
 					}
 					variant="primary"
-					pending={isSwitching$.get()}
+					pending={isSwitching}
 					shape="square"
 					onClick={handleSwitchChain}
 					data-testid="switch-chain-button"
@@ -117,6 +119,6 @@ const SwitchChainModal = observer(() => {
 			</div>
 		</Modal>
 	);
-});
+};
 
 export default SwitchChainModal;

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/modal-provider.tsx

@@ -1,5 +1,5 @@
 import { observer } from '@legendapp/state/react';
-import { BuyModal } from './BuyModal/Modal';
+import { BuyModal } from './BuyModal/components/Modal';
 import { CreateListingModal } from './CreateListingModal/Modal';
 import { MakeOfferModal } from './MakeOfferModal/Modal';
 import { SellModal } from './SellModal/Modal';