@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/__tests__/SelectWaasFeeOptions.test.tsx

@@ -84,12 +84,18 @@ describe('SelectWaasFeeOptions', () => {
 		expect(container.firstChild).toBeNull();
 	});
 
-	it('should not render on testnet', () => {
+	it('should not render when fees are sponsored (empty options array)', () => {
+		const sponsoredFeeOptionConfirmation: WaasFeeOptionConfirmation = {
+			id: 'fee-confirmation-id',
+			options: [], // Empty array indicates sponsored fees
+			chainId: 1,
+		};
+
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
-			selectedFeeOption$: observable<FeeOption | undefined>(mockFeeOption),
-			selectedFeeOption: mockFeeOption,
+			selectedFeeOption$: observable<FeeOption | undefined>(undefined),
+			selectedFeeOption: undefined,
 			// @ts-expect-error - types are not compatible
-			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation,
+			pendingFeeOptionConfirmation: sponsoredFeeOptionConfirmation,
 			currencyBalance: mockCurrencyBalance,
 			currencyBalanceLoading: false,
 			insufficientBalance: false,
@@ -98,14 +104,14 @@ describe('SelectWaasFeeOptions', () => {
 		});
 
 		vi.spyOn(useNetworkModule, 'getNetwork').mockReturnValue({
-			type: NetworkType.TESTNET,
+			type: NetworkType.MAINNET,
 			chainId: 1,
-			name: 'Testnet',
+			name: 'Mainnet',
 			nativeToken: TEST_CURRENCY,
 		});
 		vi.spyOn(useWaasFeeOptionsModule, 'useWaasFeeOptions').mockReturnValue([
 			// @ts-expect-error - types are not compatible
-			mockPendingFeeOptionConfirmation,
+			sponsoredFeeOptionConfirmation,
 			vi.fn(),
 		]);
 

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

@@ -1,8 +1,6 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { Divider, Skeleton, Text } from '@0xsequence/design-system';
-import { NetworkType } from '@0xsequence/network';
 import { observer } from '@legendapp/state/react';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import { cn } from '../../../../../../utils';
@@ -26,8 +24,6 @@ const SelectWaasFeeOptions = observer(
 		titleOnConfirm,
 		className,
 	}: SelectWaasFeeOptionsProps) => {
-		const network = getNetwork(chainId);
-		const isTestnet = network.type === NetworkType.TESTNET;
 		const {
 			selectedFeeOption$,
 			selectedFeeOption,
@@ -47,9 +43,11 @@ const SelectWaasFeeOptions = observer(
 			onCancel?.();
 		};
 
+		const isSponsored = pendingFeeOptionConfirmation?.options?.length === 0;
+
 		if (
 			!selectWaasFeeOptions$.isVisible.get() ||
-			isTestnet ||
+			isSponsored ||
 			!selectedFeeOption
 		) {
 			return null;

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

@@ -25,9 +25,11 @@ const useWaasFeeOptionManager = (chainId: number) => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: it causes a loop
 	useEffect(() => {
 		if (!selectedFeeOption && pendingFeeOptionConfirmation) {
-			selectedFeeOption$.set(
-				pendingFeeOptionConfirmation.options[0] as FeeOption,
-			);
+			if (pendingFeeOptionConfirmation.options.length > 0) {
+				selectedFeeOption$.set(
+					pendingFeeOptionConfirmation.options[0] as FeeOption,
+				);
+			}
 		}
 	}, [pendingFeeOptionConfirmation]);
 

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/_internal/components/transactionDetails/index.tsx

@@ -30,8 +30,8 @@ export default function TransactionDetails({
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
 
 	const marketplaceFeePercentage = includeMarketplaceFee
-		? data?.collections.find(
-				(collection) => collection.address === collectionAddress,
+		? data?.market.collections.find(
+				(collection) => collection.itemsAddress === collectionAddress,
 			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 		: 0;
 	// royaltyPercentage is an array of [recipient, percentage]

package/src/react/ui/modals/_internal/hooks/useSelectWaasFeeOptions.ts

@@ -1,32 +1,23 @@
-import { getNetwork } from '@0xsequence/connect';
-import { NetworkType } from '@0xsequence/network';
 import type { FeeOption } from '../../../../../types/waas-types';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 
 interface UseSelectWaasFeeOptionsProps {
-	chainId: string | number;
 	isProcessing: boolean;
 	feeOptionsVisible: boolean;
 	selectedFeeOption: FeeOption;
 }
 
 export const useSelectWaasFeeOptions = ({
-	chainId,
 	isProcessing,
 	feeOptionsVisible,
 	selectedFeeOption,
 }: UseSelectWaasFeeOptionsProps) => {
 	const { wallet } = useWallet();
-	const network = chainId ? getNetwork(Number(chainId)) : undefined;
-	const isTestnet = network?.type === NetworkType.TESTNET;
 	const isWaaS = wallet?.isWaaS;
 	const isProcessingWithWaaS = isProcessing && isWaaS;
 
 	const shouldHideActionButton =
-		!isTestnet &&
-		isProcessingWithWaaS &&
-		feeOptionsVisible === true &&
-		!!selectedFeeOption;
+		isProcessingWithWaaS && feeOptionsVisible === true && !!selectedFeeOption;
 
 	const waasFeeOptionsShown =
 		wallet?.isWaaS && isProcessing && feeOptionsVisible;
@@ -36,14 +27,13 @@ export const useSelectWaasFeeOptions = ({
 		loadingLabel = 'Loading fee options',
 	) => {
 		if (isProcessing) {
-			return isWaaS && !isTestnet ? loadingLabel : defaultLabel;
+			return isWaaS ? loadingLabel : defaultLabel;
 		}
 		return defaultLabel;
 	};
 
 	return {
 		isWaaS,
-		isTestnet,
 		feeOptionsVisible,
 		shouldHideActionButton,
 		waasFeeOptionsShown,

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';