@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

package/src/react/hooks/transactions/useProcessStep.ts

@@ -0,0 +1,95 @@
+import { type Hex, hexToBigInt, isHex, type TypedDataDomain } from 'viem';
+import { useSendTransaction, useSignMessage, useSignTypedData } from 'wagmi';
+import {
+	ExecuteType,
+	getMarketplaceClient,
+	type Step,
+	StepType,
+} from '../../_internal/api';
+import { isSignatureStep, isTransactionStep } from '../../_internal/utils';
+import { useConfig } from '../config';
+
+type ProcessStepResult =
+	| { type: 'transaction'; hash: Hex }
+	| { type: 'signature'; orderId?: string; signature?: Hex };
+
+export const useProcessStep = () => {
+	const { sendTransactionAsync } = useSendTransaction();
+	const { signMessageAsync } = useSignMessage();
+	const { signTypedDataAsync } = useSignTypedData();
+	const config = useConfig();
+	const marketplaceClient = getMarketplaceClient(config);
+
+	const processStep = async (
+		step: Step,
+		chainId: number,
+	): Promise<ProcessStepResult> => {
+		// Transaction steps - return transaction hash
+		if (isTransactionStep(step)) {
+			const hash = await sendTransactionAsync({
+				chainId,
+				to: step.to as Hex,
+				data: step.data as Hex,
+				value: hexToBigInt((step.value as Hex) || '0x0'),
+				...(step.maxFeePerGas && {
+					maxFeePerGas: hexToBigInt(step.maxFeePerGas as Hex),
+				}),
+				...(step.maxPriorityFeePerGas && {
+					maxPriorityFeePerGas: hexToBigInt(step.maxPriorityFeePerGas as Hex),
+				}),
+				...(step.gas && {
+					gas: hexToBigInt(step.gas as Hex),
+				}),
+			});
+
+			return { type: 'transaction', hash };
+		}
+
+		// Signature steps - sign and execute API call
+		if (isSignatureStep(step)) {
+			let signature: Hex | undefined;
+
+			if (step.id === StepType.signEIP191) {
+				const message = isHex(step.data)
+					? { raw: step.data as Hex }
+					: step.data;
+				signature = await signMessageAsync({ message });
+			} else if (step.id === StepType.signEIP712) {
+				if (!step.signature) {
+					throw new Error('EIP712 step missing signature data');
+				}
+				signature = await signTypedDataAsync({
+					domain: step.signature.domain as TypedDataDomain,
+					types: step.signature.types,
+					primaryType: step.signature.primaryType,
+					message: step.signature.value,
+				});
+			}
+
+			if (!signature) {
+				throw new Error('Failed to sign message');
+			}
+
+			// Call execute endpoint with signature
+			if (step.post) {
+				const result = await marketplaceClient.execute({
+					chainId: String(chainId),
+					signature,
+					method: step.post.method,
+					endpoint: step.post.endpoint,
+					body: step.post.body,
+					executeType: ExecuteType.order,
+				});
+
+				return { type: 'signature', orderId: result.orderId };
+			}
+
+			// Some signature steps might not have post (edge case)
+			return { type: 'signature', signature };
+		}
+
+		throw new Error(`Unsupported step type: ${step.id}`);
+	};
+
+	return { processStep };
+};

package/src/react/hooks/{__tests__ → transactions}/useTransferTokens.test.tsx

@@ -3,11 +3,11 @@ import type { Address } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useAccount, useWriteContract } from 'wagmi';
 import { NoWalletConnectedError } from '../../../utils/_internal/error/transaction';
-import { ContractType } from '../../_internal';
+import { ContractType } from '../../_internal/api/marketplace.gen';
 import {
 	type TransferTokensParams,
 	useTransferTokens,
-} from '../useTransferTokens';
+} from './useTransferTokens';
 
 // Mock wagmi hooks
 vi.mock('wagmi', async () => {

package/src/react/hooks/{useTransferTokens.tsx → transactions/useTransferTokens.tsx}

@@ -1,8 +1,8 @@
 import { type Abi, type Address, erc721Abi } from 'viem';
 import { useAccount, useWriteContract } from 'wagmi';
-import { ERC1155_ABI } from '../../utils';
-import { NoWalletConnectedError } from '../../utils/_internal/error/transaction';
-import type { ContractType } from '../_internal';
+import { ERC1155_ABI } from '../../../utils';
+import { NoWalletConnectedError } from '../../../utils/_internal/error/transaction';
+import type { ContractType } from '../../_internal';
 
 interface BaseTransferParams {
 	chainId: number;

package/src/react/hooks/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './useFilterState';
+export * from './useFilters';
+export * from './useOpenConnectModal';

package/src/react/hooks/{useFilterState.tsx → ui/useFilterState.tsx}

@@ -6,7 +6,7 @@ import {
 	useQueryState,
 } from 'nuqs';
 import { useMemo } from 'react';
-import { type PropertyFilter, PropertyType } from '../_internal';
+import { type PropertyFilter, PropertyType } from '../../_internal';
 
 interface StringFilterValues {
 	type: PropertyType.STRING;

package/src/react/hooks/{__tests__ → ui}/useFilters.test.tsx

@@ -3,8 +3,7 @@ import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { describe, expect, it } from 'vitest';
 import { mockMetadataEndpoint } from '../../_internal/api/__mocks__/metadata.msw';
-import type { UseFiltersParams } from '../useFilters';
-import { useFilters } from '../useFilters';
+import { type UseFiltersParams, useFilters } from './useFilters';
 
 describe('useFilters', () => {
 	const defaultArgs: UseFiltersParams = {

package/src/react/hooks/{useFilters.tsx → ui/useFilters.tsx}

@@ -2,13 +2,13 @@
 
 import type { PropertyFilter } from '@0xsequence/metadata';
 import { useQuery } from '@tanstack/react-query';
-import type { Optional } from '../_internal';
+import type { Optional } from '../../_internal';
 import {
 	type FetchFiltersParams,
 	type FiltersQueryOptions,
 	filtersQueryOptions,
-} from '../queries/filters';
-import { useConfig } from './useConfig';
+} from '../../queries/filters';
+import { useConfig } from '../config/useConfig';
 
 export type UseFiltersParams = Optional<FiltersQueryOptions, 'config'>;
 

package/src/react/hooks/{useOpenConnectModal.tsx → ui/useOpenConnectModal.tsx}

@@ -1,4 +1,4 @@
-import { useConfig } from './useConfig';
+import { useConfig } from '../config/useConfig';
 
 export const useOpenConnectModal = () => {
 	const context = useConfig();

package/src/react/hooks/util/optimisticCancelUpdates.ts

@@ -43,6 +43,7 @@ export const updateQueriesOnCancel = ({
 		queryClient.invalidateQueries({
 			queryKey: collectableKeys.highestOffers,
 			exact: false,
+			predicate: (query) => !query.meta?.persistent,
 		});
 	}, 2 * SECOND);
 

package/src/react/hooks/utils/__tests__/useEnsureCorrectChain.test.tsx

@@ -0,0 +1,75 @@
+import { renderHook, wagmiConfig, waitFor } from '@test';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { switchChainErrorModalStore } from '../../../ui/modals/_internal/components/switchChainErrorModal/store';
+import { useEnsureCorrectChain } from '../useEnsureCorrectChain';
+
+const currentChain = wagmiConfig.chains[0]; // mainnet
+const chainToSwitchTo = wagmiConfig.chains[1]; // polygon
+
+describe('useEnsureCorrectChain', () => {
+	beforeEach(() => {
+		switchChainErrorModalStore.send({ type: 'close' });
+	});
+
+	test('returns current chain id', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+		// Wait for the account to be connected and chainId to be available
+		await waitFor(() => {
+			expect(result.current.currentChainId).toBeDefined();
+		});
+		expect(result.current.currentChainId).toBe(currentChain.id);
+	});
+
+	test('does nothing if already on correct chain', () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+		const onSuccess = vi.fn();
+
+		result.current.ensureCorrectChain(currentChain.id, { onSuccess });
+
+		expect(onSuccess).toHaveBeenCalled();
+	});
+
+	test('attempts to switch chain and shows error modal when switch fails', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+
+		result.current.ensureCorrectChain(chainToSwitchTo.id);
+
+		await waitFor(() => {
+			expect(
+				switchChainErrorModalStore.getSnapshot().context.chainIdToSwitchTo,
+			).toBe(chainToSwitchTo.id);
+		});
+	});
+
+	test('async version handles chain switch error correctly', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+
+		await result.current.ensureCorrectChainAsync(chainToSwitchTo.id);
+
+		expect(
+			switchChainErrorModalStore.getSnapshot().context.chainIdToSwitchTo,
+		).toBe(chainToSwitchTo.id);
+	});
+
+	test('closes error modal when successfully switched to target chain', async () => {
+		const { result } = renderHook(() => useEnsureCorrectChain());
+
+		await waitFor(() => {
+			expect(result.current.currentChainId).toBeDefined();
+		});
+
+		// Now open the modal for the same chain the user is already on
+		// This should trigger the effect to close it immediately
+		switchChainErrorModalStore.send({
+			type: 'open',
+			chainIdToSwitchTo: result.current.currentChainId!,
+		});
+
+		// The effect should close the modal since we're already on the target chain
+		await waitFor(() => {
+			expect(
+				switchChainErrorModalStore.getSnapshot().context.chainIdToSwitchTo,
+			).toBeUndefined();
+		});
+	});
+});

package/src/react/hooks/utils/index.ts

@@ -0,0 +1,8 @@
+export * from './useAutoSelectFeeOption';
+export * from './useCheckoutOptions';
+export * from './useCheckoutOptionsSalesContract';
+export * from './useComparePrices';
+export * from './useConvertPriceToUSD';
+export * from './useEnsureCorrectChain';
+export * from './useGetReceiptFromHash';
+export * from './useRoyalty';

package/src/react/hooks/{__tests__ → utils}/useAutoSelectFeeOption.test.tsx

@@ -9,7 +9,7 @@ import {
 	mockIndexerHandler,
 	mockTokenBalance,
 } from '../../_internal/api/__mocks__/indexer.msw';
-import { useAutoSelectFeeOption } from '../useAutoSelectFeeOption';
+import { useAutoSelectFeeOption } from './useAutoSelectFeeOption';
 
 describe('useAutoSelectFeeOption', () => {
 	const mockChainId = 1;
@@ -238,10 +238,14 @@ describe('useAutoSelectFeeOption', () => {
 	});
 
 	it('should return UserNotConnected error when wallet is not connected', async () => {
-		const { result: disconnect } = renderHook(() => useDisconnect());
+		const { result: disconnect } = renderHook(() => useDisconnect(), {
+			autoConnect: false,
+		});
 		await disconnect.current.disconnectAsync();
 
-		const { result } = renderHook(() => useAutoSelectFeeOption(defaultArgs));
+		const { result } = renderHook(() => useAutoSelectFeeOption(defaultArgs), {
+			autoConnect: false,
+		});
 
 		// Wait for the hook to complete
 		await waitFor(async () => {

package/src/react/hooks/{useAutoSelectFeeOption.tsx → utils/useAutoSelectFeeOption.tsx}

@@ -4,8 +4,8 @@ import { useChain } from '@0xsequence/connect';
 import { useCallback, useEffect } from 'react';
 import { type Address, zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
-import type { FeeOption } from '../../types/waas-types';
-import { useCollectionBalanceDetails } from './useCollectionBalanceDetails';
+import type { FeeOption } from '../../../types/waas-types';
+import { useCollectionBalanceDetails } from '../data/collections/useCollectionBalanceDetails';
 
 enum AutoSelectFeeOptionError {
 	UserNotConnected = 'User not connected',

package/src/react/hooks/{__tests__ → utils}/useCheckoutOptions.test.tsx

@@ -8,13 +8,17 @@ import {
 	mockCheckoutOptions,
 	mockMarketplaceEndpoint,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import type { UseCheckoutOptionsParams } from '../useCheckoutOptions';
-import { useCheckoutOptions } from '../useCheckoutOptions';
+import type { UseCheckoutOptionsParams } from './useCheckoutOptions';
+import { useCheckoutOptions } from './useCheckoutOptions';
 
 // Mock wagmi useAccount hook
-vi.mock('wagmi', () => ({
-	useAccount: vi.fn(),
-}));
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
 
 const mockUseAccount = vi.mocked(useAccount);
 

package/src/react/hooks/{useCheckoutOptions.tsx → utils/useCheckoutOptions.tsx}

@@ -3,13 +3,13 @@
 import { useQuery } from '@tanstack/react-query';
 import type { Address } from 'viem';
 import { useAccount } from 'wagmi';
-import type { MarketplaceKind, Optional } from '../_internal';
+import type { MarketplaceKind, Optional } from '../../_internal';
 import {
 	type CheckoutOptionsQueryOptions,
 	checkoutOptionsQueryOptions,
 	type FetchCheckoutOptionsParams,
-} from '../queries/checkoutOptions';
-import { useConfig } from './useConfig';
+} from '../../queries/checkoutOptions';
+import { useConfig } from '../config/useConfig';
 
 export type UseCheckoutOptionsParams = Optional<
 	CheckoutOptionsQueryOptions,
@@ -92,5 +92,7 @@ export type UseCheckoutOptionsArgs = {
 };
 
 export type UseCheckoutOptionsReturn = Awaited<
-	ReturnType<typeof import('../queries/checkoutOptions').fetchCheckoutOptions>
+	ReturnType<
+		typeof import('../../queries/checkoutOptions').fetchCheckoutOptions
+	>
 >;

package/src/react/hooks/{__tests__ → utils}/useCheckoutOptionsSalesContract.test.tsx

@@ -9,12 +9,16 @@ import {
 	mockCheckoutOptions,
 	mockMarketplaceEndpoint,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import { useCheckoutOptionsSalesContract } from '../useCheckoutOptionsSalesContract';
+import { useCheckoutOptionsSalesContract } from './useCheckoutOptionsSalesContract';
 
 // Mock wagmi useAccount hook
-vi.mock('wagmi', () => ({
-	useAccount: vi.fn(),
-}));
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
 
 const mockUseAccount = vi.mocked(useAccount);
 

package/src/react/hooks/{useCheckoutOptionsSalesContract.tsx → utils/useCheckoutOptionsSalesContract.tsx}

@@ -3,14 +3,14 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import type { Address } from 'viem';
 import { useAccount } from 'wagmi';
-import type { CheckoutOptionsItem, Optional } from '../_internal';
+import type { CheckoutOptionsItem, Optional } from '../../_internal';
 import {
 	type CheckoutOptionsSalesContractQueryOptions,
 	checkoutOptionsSalesContractQueryOptions,
 	type FetchCheckoutOptionsSalesContractParams,
 	type fetchCheckoutOptionsSalesContract,
-} from '../queries/checkoutOptionsSalesContract';
-import { useConfig } from './useConfig';
+} from '../../queries/checkoutOptionsSalesContract';
+import { useConfig } from '../config/useConfig';
 
 export type UseCheckoutOptionsSalesContractParams = Optional<
 	CheckoutOptionsSalesContractQueryOptions,

package/src/react/hooks/{__tests__ → utils}/useComparePrices.test.tsx

@@ -7,7 +7,7 @@ import {
 	mockCurrencies,
 	mockMarketplaceEndpoint,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import { useComparePrices } from '../useComparePrices';
+import { useComparePrices } from '../utils/useComparePrices';
 
 describe('useComparePrices', () => {
 	const defaultArgs = {

package/src/react/hooks/{useComparePrices.tsx → utils/useComparePrices.tsx}

@@ -2,13 +2,13 @@
 
 import { useQuery } from '@tanstack/react-query';
 import type { Address } from 'viem';
-import type { Optional } from '../_internal';
+import type { Optional } from '../../_internal';
 import {
 	type ComparePricesQueryOptions,
 	comparePricesQueryOptions,
 	type FetchComparePricesParams,
-} from '../queries/comparePrices';
-import { useConfig } from './useConfig';
+} from '../../queries/comparePrices';
+import { useConfig } from '../config/useConfig';
 
 export type UseComparePricesParams = Optional<
 	ComparePricesQueryOptions,
@@ -100,5 +100,3 @@ export type UseComparePricesReturn = {
 	percentageDifferenceFormatted: string;
 	status: 'above' | 'same' | 'below';
 };
-
-export type ComparePricesReturn = UseComparePricesReturn;

package/src/react/hooks/{__tests__ → utils}/useConvertPriceToUSD.test.tsx

@@ -6,8 +6,8 @@ import {
 	mockCurrencies,
 	mockMarketplaceEndpoint,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import type { UseConvertPriceToUSDParams } from '../useConvertPriceToUSD';
-import { useConvertPriceToUSD } from '../useConvertPriceToUSD';
+import type { UseConvertPriceToUSDParams } from '../utils/useConvertPriceToUSD';
+import { useConvertPriceToUSD } from '../utils/useConvertPriceToUSD';
 
 describe('useConvertPriceToUSD', () => {
 	const defaultArgs: UseConvertPriceToUSDParams = {

package/src/react/hooks/{useConvertPriceToUSD.tsx → utils/useConvertPriceToUSD.tsx}

@@ -2,14 +2,14 @@
 
 import { useQuery } from '@tanstack/react-query';
 import type { Address } from 'viem';
-import type { Optional } from '../_internal';
+import type { Optional } from '../../_internal';
 import {
 	type ConvertPriceToUSDQueryOptions,
 	type ConvertPriceToUSDReturn,
 	convertPriceToUSDQueryOptions,
 	type FetchConvertPriceToUSDParams,
-} from '../queries/convertPriceToUSD';
-import { useConfig } from './useConfig';
+} from '../../queries/convertPriceToUSD';
+import { useConfig } from '../config/useConfig';
 
 export type UseConvertPriceToUSDParams = Optional<
 	ConvertPriceToUSDQueryOptions,

package/src/react/hooks/utils/useEnsureCorrectChain.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect } from 'react';
+import { useAccount, useSwitchChain } from 'wagmi';
+import { useSwitchChainErrorModal } from '../../ui/modals/_internal/components/switchChainErrorModal';
+import { useChainIdToSwitchTo } from '../../ui/modals/_internal/components/switchChainErrorModal/store';
+import { useConnectorMetadata } from '../config/useConnectorMetadata';
+
+export const useEnsureCorrectChain = () => {
+	const { chainId: currentChainId } = useAccount();
+	const { switchChain, switchChainAsync } = useSwitchChain();
+	const { show: showSwitchChainErrorModal, close: closeSwitchChainErrorModal } =
+		useSwitchChainErrorModal();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
+	const { isWaaS } = useConnectorMetadata();
+
+	// Close the switch chain error modal when user successfully switches to the target chain
+	useEffect(() => {
+		if (
+			currentChainId &&
+			chainIdToSwitchTo &&
+			currentChainId === chainIdToSwitchTo
+		) {
+			closeSwitchChainErrorModal();
+		}
+	}, [currentChainId, chainIdToSwitchTo, closeSwitchChainErrorModal]);
+
+	const ensureCorrectChainAsync = useCallback(
+		async (targetChainId: number) => {
+			if (currentChainId === targetChainId) {
+				return Promise.resolve();
+			}
+			return switchChainAsync({ chainId: targetChainId }).catch(() => {
+				showSwitchChainErrorModal({
+					chainIdToSwitchTo: targetChainId,
+				});
+			});
+		},
+		[currentChainId, isWaaS, switchChainAsync, showSwitchChainErrorModal],
+	);
+
+	const ensureCorrectChain = useCallback(
+		(
+			targetChainId: number,
+			callbacks?: {
+				onSuccess?: () => void;
+			},
+		) => {
+			if (currentChainId === targetChainId) {
+				callbacks?.onSuccess?.();
+				return;
+			}
+
+			switchChain(
+				{ chainId: targetChainId },
+				{
+					onSuccess: callbacks?.onSuccess,
+					onError: () =>
+						showSwitchChainErrorModal({
+							chainIdToSwitchTo: targetChainId,
+						}),
+				},
+			);
+		},
+		[currentChainId, isWaaS, switchChain, showSwitchChainErrorModal],
+	);
+
+	return {
+		ensureCorrectChain,
+		ensureCorrectChainAsync,
+		currentChainId,
+	};
+};

package/src/react/hooks/{__tests__ → utils}/useRoyalty.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook, waitFor } from '@test';
 import { describe, expect, it } from 'vitest';
 import { TEST_COLLECTIBLE } from '../../../../test/const';
-import { useRoyalty } from '../useRoyalty';
+import { useRoyalty } from './useRoyalty';
 
 describe('useRoyaltyPercentage', () => {
 	it('should fetch royalty percentage successfully', async () => {

package/src/react/hooks/{useRoyalty.tsx → utils/useRoyalty.tsx}

@@ -2,9 +2,9 @@
 
 import type { Address } from 'viem';
 import { useReadContract } from 'wagmi';
-import { EIP2981_ABI } from '../../utils';
-import type { QueryArg } from '../_internal';
-import { collectableKeys } from '../_internal';
+import { EIP2981_ABI } from '../../../utils';
+import type { QueryArg } from '../../_internal';
+import { collectableKeys } from '../../_internal';
 
 export interface UseRoyaltyArgs {
 	chainId: number;

package/src/react/index.ts

@@ -1,8 +1,7 @@
 export * from './_internal/api/get-query-client';
 export * from './_internal/wagmi/create-config';
 export * from './hooks';
-export * from './hooks/options';
-export * from './provider';
+export * from './providers';
 export * from './queries';
 export * from './types/query';
 export * from './ui/index';

package/src/react/{provider.tsx → providers/index.tsx}

@@ -7,11 +7,12 @@ import { createContext, useMemo } from 'react';
 import type {
 	MarketplaceSdkContext as MarketplaceSdkContextType,
 	SdkConfig,
-} from '../types';
-import { InvalidProjectAccessKeyError } from '../utils/_internal/error/config';
-import { getQueryClient } from './_internal/api/get-query-client';
-import { DatabeatAnalytics } from './_internal/databeat';
-import { PROVIDER_ID } from './_internal/get-provider';
+} from '../../types';
+import { InvalidProjectAccessKeyError } from '../../utils/_internal/error/config';
+import { getQueryClient } from '../_internal/api/get-query-client';
+import { DatabeatAnalytics } from '../_internal/databeat';
+import { PROVIDER_ID } from '../_internal/get-provider';
+import { ThemeProvider } from './theme-provider';
 
 export const MarketplaceSdkContext = createContext(
 	{} as MarketplaceSdkContextType,
@@ -32,6 +33,8 @@ export function MarketplaceProvider({
 		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
 	}
 
+	const isWindowDefined = typeof window !== 'undefined';
+
 	const analytics = useMemo(() => {
 		const server = 'https://nodes.sequence.app';
 		const auth: Auth = {};
@@ -41,11 +44,11 @@ export function MarketplaceProvider({
 			defaultEnabled: true,
 			initProps: () => {
 				return {
-					origin: typeof window !== 'undefined' ? window.location.origin : '',
+					origin: isWindowDefined ? window.location.origin : '',
 				};
 			},
 		});
-	}, [config.projectAccessKey, window]);
+	}, [config.projectAccessKey, isWindowDefined]);
 
 	if (openConnectModal) {
 		const context: MarketplaceSdkContextType = {
@@ -55,11 +58,11 @@ export function MarketplaceProvider({
 		};
 
 		return (
-			<MarketplaceQueryClientProvider>
-				<MarketplaceSdkContext.Provider value={context}>
+			<MarketplaceSdkContext.Provider value={context}>
+				<ThemeProvider>
 					<div id={PROVIDER_ID}>{children}</div>
-				</MarketplaceSdkContext.Provider>
-			</MarketplaceQueryClientProvider>
+				</ThemeProvider>
+			</MarketplaceSdkContext.Provider>
 		);
 	}
 
@@ -68,7 +71,7 @@ export function MarketplaceProvider({
 			config={config}
 			analytics={analytics}
 		>
-			{children}
+			<ThemeProvider>{children}</ThemeProvider>
 		</MarketplaceProviderWithSequenceConnect>
 	);
 }
@@ -98,10 +101,8 @@ function MarketplaceProviderWithSequenceConnect({
 	};
 
 	return (
-		<MarketplaceQueryClientProvider>
-			<MarketplaceSdkContext.Provider value={context}>
-				<div id={PROVIDER_ID}>{children}</div>
-			</MarketplaceSdkContext.Provider>
-		</MarketplaceQueryClientProvider>
+		<MarketplaceSdkContext.Provider value={context}>
+			<div id={PROVIDER_ID}>{children}</div>
+		</MarketplaceSdkContext.Provider>
 	);
 }