@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

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

@@ -1,14 +1,15 @@
 import type { Observable } from '@legendapp/state';
-import { formatUnits } from 'viem';
 import type { Address, Hex } from 'viem';
+import { formatUnits } from 'viem';
 import {
+	balanceQueries,
+	collectableKeys,
+	ExecuteType,
+	getMarketplaceClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
 	type TransactionSteps,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
 import { TransactionType } from '../../../../_internal/types';
@@ -22,9 +23,9 @@ import {
 	useGenerateSellTransaction,
 	useMarketCurrencies,
 } from '../../../../hooks';
-import { useFees } from '../../BuyModal/hooks/useFees';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import type { SellOrder } from './useSell';
 export type ExecutionState = 'approval' | 'sell' | null;
 
@@ -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,
 	});
@@ -118,7 +119,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};
@@ -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

@@ -1,8 +1,8 @@
 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 SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
+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/_store.ts

@@ -1,8 +1,8 @@
 import { observable } from '@legendapp/state';
 import type { Hex } from 'viem';
-import type { ShowTransferModalArgs } from '.';
 import type { CollectionType } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
+import type { ShowTransferModalArgs } from '.';
 
 export type TransferModalView =
 	| 'enterReceiverAddress'
@@ -46,12 +46,6 @@ export const initialState: TransferModalState = {
 	},
 	close: () => {
 		transferModal$.isOpen.set(false);
-
-		// TODO: this doesn't work as expected
-		transferModal$.state.set({
-			...initialState.state,
-		});
-
 		transferModal$.state.receiverAddress.set('');
 		transferModal$.state.transferIsBeingProcessed.set(false);
 		transferModal$.view.set('enterReceiverAddress');

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TokenQuantityInput.tsx

@@ -1,5 +1,4 @@
-import { cn } from '@0xsequence/design-system';
-import { Text } from '@0xsequence/design-system';
+import { cn, Text } from '@0xsequence/design-system';
 import { observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import QuantityInput from '../../../../_internal/components/quantityInput';
@@ -23,7 +22,7 @@ const TokenQuantityInput = observer(
 			try {
 				const quantityBigInt = BigInt($quantity.get());
 				insufficientBalance = quantityBigInt > balanceAmount;
-			} catch (e) {
+			} catch (_e) {
 				insufficientBalance = true;
 			}
 		}

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

@@ -4,9 +4,9 @@ import { Text } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import { isAddress } from 'viem';
 import { useAccount } from 'wagmi';
-import { useCollection, useListBalances } from '../../../../..';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import { compareAddress } from '../../../../../../utils';
+import { useCollection, useListBalances } from '../../../../..';
 import { type CollectionType, ContractType } from '../../../../../_internal';
 import AlertMessage from '../../../_internal/components/alertMessage';
 import { selectWaasFeeOptions$ } from '../../../_internal/components/selectWaasFeeOptions/store';
@@ -56,7 +56,7 @@ const EnterWalletAddressView = observer(() => {
 		try {
 			const quantityBigInt = BigInt($quantity.get());
 			insufficientBalance = quantityBigInt > BigInt(balanceAmount);
-		} catch (e) {
+		} catch (_e) {
 			insufficientBalance = true;
 		}
 	}

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

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@test';
-import { type Address, type PublicClient, custom, zeroAddress } from 'viem';
+import { type Address, custom, type PublicClient, zeroAddress } from 'viem';
 import { mainnet, polygon } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { WalletKind } from '../../../../../_internal';
@@ -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

@@ -1,13 +1,10 @@
 'use client';
 
+import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 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';
+import { MODAL_CONTENT_PROPS, MODAL_OVERLAY_PROPS } from '../consts';
 import { useSwitchChainModal } from '../switchChainModal';
 
 export interface ActionModalProps {
@@ -31,117 +28,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>
+	);
+};