@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

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

@@ -1,19 +1,76 @@
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import type { Address, Hash } from 'viem';
-import type { MarketplaceKind, Step } from '../../../_internal';
+import type { MarketplaceType } from '../../../../types';
+import type {
+	CheckoutOptionsItem,
+	MarketplaceKind,
+	Step,
+} from '../../../_internal';
 
-export type BuyModalProps = {
-	orderId: string;
+export type CheckoutOptionsSalesContractProps = {
 	chainId: number;
+	salesContractAddress: Address;
 	collectionAddress: Address;
+	items: Array<CheckoutOptionsItem>;
+	customProviderCallback?: (
+		onSuccess: (txHash: string) => void,
+		onError: (error: Error) => void,
+		onClose: () => void,
+	) => void;
+};
+
+export type PaymentModalProps = {
 	collectibleId: string;
 	marketplace: MarketplaceKind;
+	orderId: string;
 	customCreditCardProviderCallback?: (buyStep: Step) => void;
+};
+
+export type BuyModalBaseProps = {
+	chainId: number;
+	collectionAddress: Address;
 	skipNativeBalanceCheck?: boolean;
 	nativeTokenAddress?: Address;
+	marketplaceType?: MarketplaceType;
+	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
+};
+
+// Shop type modal props
+export type ShopBuyModalProps = BuyModalBaseProps & {
+	marketplaceType: 'shop';
+	salesContractAddress: Address;
+	items: Array<Partial<CheckoutOptionsItem> & { tokenId?: string }>;
+	quantityDecimals: number;
+	quantityRemaining: number;
+	salePrice: {
+		amount: string;
+		currencyAddress: Address;
+	};
 };
 
+// Marketplace type modal props
+export type MarketplaceBuyModalProps = BuyModalBaseProps & {
+	marketplaceType?: 'market';
+	collectibleId: string;
+	marketplace: MarketplaceKind;
+	orderId: string;
+};
+
+export type BuyModalProps = ShopBuyModalProps | MarketplaceBuyModalProps;
+
+// Type guard functions
+export function isShopProps(props: BuyModalProps): props is ShopBuyModalProps {
+	return props.marketplaceType === 'shop';
+}
+
+export function isMarketProps(
+	props: BuyModalProps,
+): props is MarketplaceBuyModalProps {
+	// Default to MARKET type for backward compatibility
+	return !props.marketplaceType || props.marketplaceType === 'market';
+}
+
 export type onSuccessCallback = ({
 	hash,
 	orderId,
@@ -23,12 +80,18 @@ export type onSuccessCallback = ({
 }) => void;
 export type onErrorCallback = (error: Error) => void;
 
+type ModalState = 'idle' | 'opening' | 'open' | 'processing' | 'closing';
+type SubModalState = 'idle' | 'opening' | 'open' | 'closed';
+
 const initialContext = {
 	isOpen: false,
-	props: null as unknown as BuyModalProps,
+	props: null as BuyModalProps | null,
 	onError: (() => {}) as onErrorCallback,
 	onSuccess: (() => {}) as onSuccessCallback,
-	quantity: undefined as number | undefined,
+	quantity: null as number | null,
+	modalState: 'idle' as ModalState,
+	paymentModalState: 'idle' as SubModalState,
+	checkoutModalState: 'idle' as SubModalState,
 };
 
 export const buyModalStore = createStore({
@@ -41,32 +104,94 @@ export const buyModalStore = createStore({
 				onError?: onErrorCallback;
 				onSuccess?: onSuccessCallback;
 			},
-		) => ({
+		) => {
+			// Prevent duplicate opens
+			if (context.modalState !== 'idle') {
+				return context;
+			}
+			return {
+				...context,
+				props: event.props,
+				onError: event.onError ?? context.onError,
+				onSuccess: event.onSuccess ?? context.onSuccess,
+				isOpen: true,
+				modalState: 'opening' as const,
+			};
+		},
+
+		modalOpened: (context) => ({
 			...context,
-			props: event.props,
-			onError: event.onError ?? context.onError,
-			onSuccess: event.onSuccess ?? context.onSuccess,
-			isOpen: true,
+			modalState: 'open' as const,
 		}),
 
 		close: (context) => ({
 			...context,
 			isOpen: false,
-			quantity: undefined,
+			quantity: null,
+			modalState: 'idle' as const,
+			paymentModalState: 'idle' as const,
+			checkoutModalState: 'idle' as const,
 		}),
 
 		setQuantity: (context, event: { quantity: number }) => ({
 			...context,
 			quantity: event.quantity,
 		}),
+
+		openPaymentModal: (context) => {
+			if (context.paymentModalState !== 'idle') {
+				return context; // Prevent duplicate opens
+			}
+			return {
+				...context,
+				paymentModalState: 'opening' as const,
+			};
+		},
+
+		paymentModalOpened: (context) => ({
+			...context,
+			paymentModalState: 'open' as const,
+		}),
+
+		paymentModalClosed: (context) => ({
+			...context,
+			paymentModalState: 'closed' as const,
+		}),
+
+		openCheckoutModal: (context) => {
+			if (context.checkoutModalState !== 'idle') {
+				return context;
+			}
+			return {
+				...context,
+				checkoutModalState: 'opening' as const,
+			};
+		},
+
+		checkoutModalOpened: (context) => ({
+			...context,
+			checkoutModalState: 'open' as const,
+		}),
+
+		checkoutModalClosed: (context) => ({
+			...context,
+			checkoutModalState: 'closed' as const,
+		}),
 	},
 });
 
 export const useIsOpen = () =>
 	useSelector(buyModalStore, (state) => state.context.isOpen);
 
-export const useBuyModalProps = () =>
-	useSelector(buyModalStore, (state) => state.context.props);
+export const useBuyModalProps = () => {
+	const props = useSelector(buyModalStore, (state) => state.context.props);
+	if (!props) {
+		throw new Error(
+			'BuyModal props not initialized. Make sure to call show() first.',
+		);
+	}
+	return props;
+};
 
 export const useOnError = () =>
 	useSelector(buyModalStore, (state) => state.context.onError);
@@ -76,3 +201,12 @@ export const useOnSuccess = () =>
 
 export const useQuantity = () =>
 	useSelector(buyModalStore, (state) => state.context.quantity);
+
+export const useModalState = () =>
+	useSelector(buyModalStore, (state) => state.context.modalState);
+
+export const usePaymentModalState = () =>
+	useSelector(buyModalStore, (state) => state.context.paymentModalState);
+
+export const useCheckoutModalState = () =>
+	useSelector(buyModalStore, (state) => state.context.checkoutModalState);

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -31,7 +31,7 @@ export const useGetTokenApprovalData = (
 	const config = useConfig();
 	const { wallet } = useWallet();
 	const { address } = useAccount();
-	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
 	const listing = {
 		tokenId: params.tokenId,
@@ -52,6 +52,7 @@ export const useGetTokenApprovalData = (
 		queryFn: isEnabled
 			? async () => {
 					const args = {
+						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
 						owner: await wallet.address(),
 						walletType: wallet.walletKind,

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -3,6 +3,7 @@ import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	ExecuteType,
 	type Step,
 	StepType,
 	type TransactionSteps,
@@ -45,7 +46,6 @@ export const useTransactionSteps = ({
 	steps$,
 }: UseTransactionStepsArgs) => {
 	const { wallet } = useWallet();
-	const expiry = new Date(Number(listingInput.listing.expiry) * 1000);
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const { data: currencies } = useMarketCurrencies({
@@ -55,7 +55,7 @@ export const useTransactionSteps = ({
 		(currency) =>
 			currency.contractAddress === listingInput.listing.currencyAddress,
 	);
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const analytics = useAnalytics();
 	const { generateListingTransactionAsync, isPending: generatingSteps } =
 		useGenerateListingTransaction({
@@ -79,7 +79,7 @@ export const useTransactionSteps = ({
 				orderbook: orderbookKind,
 				listing: {
 					...listingInput.listing,
-					expiry,
+					expiry: new Date(Number(listingInput.listing.expiry) * 1000),
 				},
 			});
 
@@ -265,10 +265,12 @@ export const useTransactionSteps = ({
 		);
 
 		const result = await marketplaceClient.execute({
+			chainId: String(chainId),
 			signature: signature as string,
 			method: signatureStep.post?.method as string,
 			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
+			executeType: ExecuteType.order,
 		});
 
 		return result.orderId;

package/src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx

@@ -29,7 +29,7 @@ export const useGetTokenApprovalData = (
 ) => {
 	const config = useConfig();
 	const { wallet } = useWallet();
-	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
 	const offer = {
 		tokenId: params.tokenId,
@@ -46,6 +46,7 @@ export const useGetTokenApprovalData = (
 		queryFn: isEnabled
 			? async () => {
 					const args = {
+						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
 						maker: await wallet.address(),
 						walletType: wallet.walletKind,

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -3,6 +3,7 @@ import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	ExecuteType,
 	type Step,
 	StepType,
 	type TransactionSteps,
@@ -44,11 +45,10 @@ export const useTransactionSteps = ({
 	steps$,
 }: UseTransactionStepsArgs) => {
 	const { wallet } = useWallet();
-	const expiry = new Date(Number(offerInput.offer.expiry) * 1000);
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const analytics = useAnalytics();
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const { generateOfferTransactionAsync, isPending: generatingSteps } =
 		useGenerateOfferTransaction({
 			chainId,
@@ -75,7 +75,7 @@ export const useTransactionSteps = ({
 				orderbook: orderbookKind,
 				offer: {
 					...offerInput.offer,
-					expiry,
+					expiry: new Date(Number(offerInput.offer.expiry) * 1000),
 				},
 			});
 
@@ -256,10 +256,12 @@ export const useTransactionSteps = ({
 		);
 
 		const result = await marketplaceClient.execute({
+			chainId: String(chainId),
 			signature: signature as string,
 			method: signatureStep.post?.method as string,
 			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
+			executeType: ExecuteType.order,
 		});
 
 		return result.orderId;

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';
-import { useFees } from '../../BuyModal/hooks/useFees';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
@@ -22,8 +22,8 @@ export const useGetTokenApprovalData = (
 ) => {
 	const config = useConfig();
 	const { wallet } = useWallet();
-	const marketplaceClient = getMarketplaceClient(params.chainId, config);
-	const { amount, receiver } = useFees({
+	const marketplaceClient = getMarketplaceClient(config);
+	const { amount, receiver } = useMarketPlatformFee({
 		chainId: Number(params.chainId),
 		collectionAddress: params.collectionAddress,
 	});
@@ -34,6 +34,7 @@ export const useGetTokenApprovalData = (
 			? async () => {
 					const address = await wallet.address();
 					const args = {
+						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
 						walletType: wallet.walletKind,
 						seller: address,

package/src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx

@@ -2,6 +2,7 @@ import type { Observable } from '@legendapp/state';
 import { formatUnits } from 'viem';
 import type { Address, Hex } from 'viem';
 import {
+	ExecuteType,
 	type MarketplaceKind,
 	type Step,
 	StepType,
@@ -22,7 +23,7 @@ import {
 	useGenerateSellTransaction,
 	useMarketCurrencies,
 } from '../../../../hooks';
-import { useFees } from '../../BuyModal/hooks/useFees';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
 import type { SellOrder } from './useSell';
@@ -52,10 +53,10 @@ export const useTransactionSteps = ({
 	const { wallet } = useWallet();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const analytics = useAnalytics();
 
-	const { amount, receiver } = useFees({
+	const { amount, receiver } = useMarketPlatformFee({
 		chainId,
 		collectionAddress: collectionAddress,
 	});
@@ -248,10 +249,12 @@ export const useTransactionSteps = ({
 		);
 
 		const result = await marketplaceClient.execute({
+			chainId: String(chainId),
 			signature: signature as string,
 			method: signatureStep.post?.method as string,
 			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
+			executeType: ExecuteType.order,
 		});
 
 		return result.orderId;

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/_internal/components/actionModal/ActionModal.test.tsx

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