@0xsequence/marketplace-sdk 1.1.0 → 1.1.1

package/src/react/queries/{listBalances.ts → tokens/listBalances.ts}

@@ -1,8 +1,8 @@
 import type { GetTokenBalancesReturn, Page } from '@0xsequence/indexer';
 import { infiniteQueryOptions } from '@tanstack/react-query';
 import type { Address, Hex } from 'viem';
-import type { SdkConfig } from '../../types';
-import { balanceQueries, getIndexerClient, LaosAPI } from '../_internal';
+import type { SdkConfig } from '../../../types';
+import { balanceQueries, getIndexerClient, LaosAPI } from '../../_internal';
 
 export type UseListBalancesArgs = {
 	chainId: number;
@@ -55,6 +55,21 @@ export async function fetchBalances(
 	});
 }
 
+export function getListBalancesQueryKey(args: UseListBalancesArgs) {
+	const apiArgs = {
+		chainId: args.chainId,
+		accountAddress: args.accountAddress,
+		contractAddress: args.contractAddress,
+		tokenID: args.tokenId,
+		includeMetadata: args.includeMetadata,
+		metadataOptions: args.metadataOptions,
+		includeCollectionTokens: args.includeCollectionTokens,
+		isLaos721: args.isLaos721,
+	};
+
+	return [...balanceQueries.lists, apiArgs] as const;
+}
+
 /**
  * Creates a tanstack infinite query options object for the balances query
  *
@@ -68,7 +83,7 @@ export function listBalancesOptions(
 ) {
 	return infiniteQueryOptions({
 		...args.query,
-		queryKey: [...balanceQueries.lists, args, config],
+		queryKey: getListBalancesQueryKey(args),
 		queryFn: ({ pageParam }) => fetchBalances(args, config, pageParam),
 		initialPageParam: { page: 1, pageSize: 30 } as Page,
 		getNextPageParam: (lastPage) => lastPage.page.after,

package/src/react/queries/{listTokenMetadata.ts → tokens/listTokenMetadata.ts}

@@ -1,11 +1,13 @@
+import type { GetTokenMetadataArgs } from '@0xsequence/metadata';
 import { queryOptions } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	getMetadataClient,
+	type QueryKeyArgs,
 	tokenKeys,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
+} from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
 
 export interface FetchListTokenMetadataParams {
 	chainId: number;
@@ -37,6 +39,18 @@ export type ListTokenMetadataQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getListTokenMetadataQueryKey(
+	params: ListTokenMetadataQueryOptions,
+) {
+	const apiArgs = {
+		chainID: String(params.chainId),
+		contractAddress: params.contractAddress,
+		tokenIDs: params.tokenIds,
+	} satisfies QueryKeyArgs<GetTokenMetadataArgs>;
+
+	return [...tokenKeys.metadata, apiArgs] as const;
+}
+
 export function listTokenMetadataQueryOptions(
 	params: ListTokenMetadataQueryOptions,
 ) {
@@ -49,7 +63,7 @@ export function listTokenMetadataQueryOptions(
 	);
 
 	return queryOptions({
-		queryKey: [...tokenKeys.metadata, params],
+		queryKey: getListTokenMetadataQueryKey(params),
 		queryFn: () =>
 			fetchListTokenMetadata({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/{searchTokenMetadata.ts → tokens/searchTokenMetadata.ts}

@@ -1,16 +1,18 @@
 import type {
 	Filter,
 	Page,
+	SearchTokenMetadataArgs,
 	SearchTokenMetadataReturn,
 } from '@0xsequence/metadata';
 import { infiniteQueryOptions } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	getMetadataClient,
+	type QueryKeyArgs,
 	tokenKeys,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
+} from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
 
 export interface FetchSearchTokenMetadataParams {
 	chainId: number;
@@ -47,6 +49,18 @@ export type SearchTokenMetadataQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getSearchTokenMetadataQueryKey(
+	params: SearchTokenMetadataQueryOptions,
+) {
+	const apiArgs = {
+		chainID: String(params.chainId!),
+		contractAddress: params.collectionAddress!,
+		filter: params.filter,
+	} satisfies QueryKeyArgs<Omit<SearchTokenMetadataArgs, 'page'>>;
+
+	return [...tokenKeys.metadata, 'search', apiArgs] as const;
+}
+
 export function searchTokenMetadataQueryOptions(
 	params: SearchTokenMetadataQueryOptions,
 ) {
@@ -60,7 +74,7 @@ export function searchTokenMetadataQueryOptions(
 	const initialPageParam = { page: 1, pageSize: 30 };
 
 	return infiniteQueryOptions({
-		queryKey: [...tokenKeys.metadata, 'search', params],
+		queryKey: getSearchTokenMetadataQueryKey(params),
 		queryFn: ({ pageParam = initialPageParam }) =>
 			fetchSearchTokenMetadata({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/{tokenSupplies.ts → tokens/tokenSupplies.ts}

@@ -1,13 +1,13 @@
 import type { GetTokenSuppliesArgs, Page } from '@0xsequence/indexer';
 import { infiniteQueryOptions } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	getIndexerClient,
 	LaosAPI,
 	tokenKeys,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardInfiniteQueryOptions } from '../types/query';
+} from '../../_internal';
+import type { StandardInfiniteQueryOptions } from '../../types/query';
 
 export interface FetchTokenSuppliesParams
 	extends Omit<GetTokenSuppliesArgs, 'contractAddress'> {
@@ -65,6 +65,18 @@ export type TokenSuppliesQueryOptions =
 		query?: StandardInfiniteQueryOptions;
 	};
 
+export function getTokenSuppliesQueryKey(params: TokenSuppliesQueryOptions) {
+	const apiArgs = {
+		chainId: params.chainId!,
+		contractAddress: params.collectionAddress!,
+		includeMetadata: params.includeMetadata,
+		metadataOptions: params.metadataOptions,
+		isLaos721: params.isLaos721,
+	};
+
+	return [...tokenKeys.supplies, apiArgs] as const;
+}
+
 export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
 	const enabled = Boolean(
 		params.chainId &&
@@ -90,7 +102,7 @@ export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
 		});
 
 	return infiniteQueryOptions({
-		queryKey: [...tokenKeys.supplies, params],
+		queryKey: getTokenSuppliesQueryKey(params),
 		queryFn,
 		initialPageParam,
 		getNextPageParam: (lastPage) =>

package/src/react/queries/{comparePrices.ts → utils/comparePrices.ts}

@@ -1,8 +1,8 @@
 import { queryOptions } from '@tanstack/react-query';
 import type { Address } from 'viem';
-import type { SdkConfig } from '../../types';
-import type { ValuesOptional } from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
+import type { SdkConfig } from '../../../types';
+import { currencyKeys, type ValuesOptional } from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
 import { fetchConvertPriceToUSD } from './convertPriceToUSD';
 
 export interface FetchComparePricesParams {
@@ -74,6 +74,18 @@ export type ComparePricesQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getComparePricesQueryKey(params: ComparePricesQueryOptions) {
+	const apiArgs = {
+		chainId: params.chainId!,
+		priceAmountRaw: params.priceAmountRaw!,
+		priceCurrencyAddress: params.priceCurrencyAddress!,
+		compareToPriceAmountRaw: params.compareToPriceAmountRaw!,
+		compareToPriceCurrencyAddress: params.compareToPriceCurrencyAddress!,
+	};
+
+	return [...currencyKeys.conversion, 'compare', apiArgs] as const;
+}
+
 export function comparePricesQueryOptions(params: ComparePricesQueryOptions) {
 	const enabled = Boolean(
 		params.chainId &&
@@ -86,7 +98,7 @@ export function comparePricesQueryOptions(params: ComparePricesQueryOptions) {
 	);
 
 	return queryOptions({
-		queryKey: ['currency', 'conversion', 'compare', params],
+		queryKey: getComparePricesQueryKey(params),
 		queryFn: () =>
 			fetchComparePrices({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/{convertPriceToUSD.ts → utils/convertPriceToUSD.ts}

@@ -1,13 +1,14 @@
 import { queryOptions } from '@tanstack/react-query';
 import { type Address, formatUnits } from 'viem';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	type Currency,
+	currencyKeys,
 	getQueryClient,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
-import { marketCurrenciesQueryOptions } from './marketCurrencies';
+} from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
+import { marketCurrenciesQueryOptions } from '../market/marketCurrencies';
 
 export interface FetchConvertPriceToUSDParams {
 	chainId: number;
@@ -62,6 +63,18 @@ export type ConvertPriceToUSDQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getConvertPriceToUSDQueryKey(
+	params: ConvertPriceToUSDQueryOptions,
+) {
+	const apiArgs = {
+		chainId: params.chainId!,
+		currencyAddress: params.currencyAddress!,
+		amountRaw: params.amountRaw!,
+	};
+
+	return [...currencyKeys.conversion, 'usd', apiArgs] as const;
+}
+
 export function convertPriceToUSDQueryOptions(
 	params: ConvertPriceToUSDQueryOptions,
 ) {
@@ -74,7 +87,7 @@ export function convertPriceToUSDQueryOptions(
 	);
 
 	return queryOptions({
-		queryKey: ['currency', 'convertPriceToUSD', params],
+		queryKey: getConvertPriceToUSDQueryKey(params),
 		queryFn: () =>
 			fetchConvertPriceToUSD({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

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

@@ -0,0 +1,2 @@
+export * from './comparePrices';
+export * from './convertPriceToUSD';

package/src/react/ssr/create-ssr-client.ts

@@ -2,7 +2,7 @@ import { cookieToInitialState, type State } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
-import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
+import { marketplaceConfigOptions } from '../queries/market/marketplaceConfig';
 
 type InitSSRClientArgs = {
 	cookie: string;

package/src/react/ui/components/_internals/ErrorLogBox.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import {
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CloseIcon,
+	Text,
+	WarningIcon,
+} from '@0xsequence/design-system';
+import { useState } from 'react';
+
+export interface ErrorLogBoxProps {
+	title: string;
+	message: string;
+	error?: Error;
+	onDismiss?: () => void;
+}
+
+export const ErrorLogBox = ({
+	title,
+	message,
+	error,
+	onDismiss,
+}: ErrorLogBoxProps) => {
+	const [showFullError, setShowFullError] = useState(false);
+
+	const toggleFullError = () => {
+		setShowFullError(!showFullError);
+	};
+
+	return (
+		<div className="relative max-h-96 w-full overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-3">
+			<div className="flex items-start gap-3">
+				<WarningIcon
+					className="absolute mt-0.5 flex-shrink-0 text-red-500"
+					size="sm"
+				/>
+				<div className="min-w-0 flex-1">
+					<div className="relative ml-10 flex flex-col">
+						<Text className="font-bold text-red-400 text-sm">{title}</Text>
+						<Text className="mt-1 text-red-300 text-xs">{message}</Text>
+					</div>
+
+					{error && (
+						<div className="mt-2">
+							<button
+								onClick={toggleFullError}
+								className="flex items-center gap-1 text-red-400 text-xs transition-colors hover:text-red-300"
+								type="button"
+							>
+								{showFullError ? 'Hide full error' : 'Show full error'}
+								{showFullError ? (
+									<ChevronUpIcon className="h-3 w-3" />
+								) : (
+									<ChevronDownIcon className="h-3 w-3" />
+								)}
+							</button>
+
+							{showFullError && <div className="mt-2 h-px bg-red-900" />}
+
+							{showFullError && (
+								<div className="mt-2 overflow-auto rounded-md bg-red-950 p-2">
+									<Text className="whitespace-pre-wrap break-words font-mono text-red-100 text-xs">
+										{JSON.stringify(error, null, 2)}
+									</Text>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+
+				{onDismiss && (
+					<button
+						onClick={onDismiss}
+						className="absolute right-4 flex-shrink-0 text-red-400 transition-colors hover:text-red-300"
+						type="button"
+						aria-label="Dismiss error"
+					>
+						<CloseIcon className="h-3 w-3" />
+					</button>
+				)}
+			</div>
+		</div>
+	);
+};

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -30,6 +30,7 @@ type ActionButtonProps = {
 	quantityDecimals?: number;
 	quantityRemaining?: number;
 	unlimitedSupply?: boolean;
+	hideQuantitySelector?: boolean;
 };
 
 export function ActionButton({
@@ -49,6 +50,7 @@ export function ActionButton({
 	quantityDecimals,
 	quantityRemaining,
 	unlimitedSupply,
+	hideQuantitySelector,
 }: ActionButtonProps) {
 	const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 		tokenId,
@@ -87,6 +89,7 @@ export function ActionButton({
 					quantityDecimals,
 					quantityRemaining,
 					unlimitedSupply,
+					hideQuantitySelector,
 				}
 			: {
 					cardType: 'market' as const,
@@ -98,6 +101,7 @@ export function ActionButton({
 					chainId,
 					quantityDecimals,
 					quantityRemaining,
+					hideQuantitySelector,
 				};
 
 	return <NonOwnerActions {...nonOwnerProps} />;

package/src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx

@@ -16,6 +16,7 @@ type NonOwnerActionsBaseProps = {
 	quantityDecimals?: number;
 	quantityRemaining?: number;
 	unlimitedSupply?: boolean;
+	hideQuantitySelector?: boolean;
 };
 
 type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
@@ -51,6 +52,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 		quantityRemaining,
 		unlimitedSupply,
 		cardType,
+		hideQuantitySelector,
 	} = props;
 
 	const { show: showBuyModal } = useBuyModal();
@@ -83,6 +85,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						quantityDecimals: quantityDecimals ?? 0,
 						quantityRemaining: quantityRemaining ?? 0,
 						unlimitedSupply,
+						hideQuantitySelector,
 					})
 				}
 				icon={SvgCartIcon}
@@ -111,6 +114,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
 						cardType: 'market',
+						hideQuantitySelector,
 					})
 				}
 				icon={SvgCartIcon}

package/src/react/ui/components/marketplace-collectible-card/components/ActionButtonWrapper.tsx

@@ -28,6 +28,7 @@ interface ActionButtonWrapperProps {
 	quantityDecimals?: number;
 	quantityRemaining?: number;
 	unlimitedSupply?: boolean;
+	hideQuantitySelector?: boolean;
 }
 
 export function ActionButtonWrapper({
@@ -48,6 +49,7 @@ export function ActionButtonWrapper({
 	quantityDecimals,
 	quantityRemaining,
 	unlimitedSupply,
+	hideQuantitySelector,
 }: ActionButtonWrapperProps) {
 	if (!show) return null;
 
@@ -70,6 +72,7 @@ export function ActionButtonWrapper({
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
 				unlimitedSupply={unlimitedSupply}
+				hideQuantitySelector={hideQuantitySelector}
 			/>
 		</div>
 	);

package/src/react/ui/components/marketplace-collectible-card/types.ts

@@ -18,6 +18,7 @@ type MarketplaceCardBaseProps = {
 	assetSrcPrefixUrl?: string;
 	cardLoading: boolean;
 	cardType?: CardType;
+	hideQuantitySelector?: boolean;
 };
 
 // Properties specific to Shop card

package/src/react/ui/components/marketplace-collectible-card/variants/MarketCard.tsx

@@ -22,6 +22,7 @@ export function MarketCard({
 	balanceIsLoading = false,
 	onCannotPerformAction,
 	prioritizeOwnerActions,
+	hideQuantitySelector,
 }: MarketCollectibleCardProps) {
 	const collectibleMetadata = collectible?.metadata;
 	const highestOffer = collectible?.offer;
@@ -66,6 +67,7 @@ export function MarketCard({
 			isShop={false}
 			onClick={() => onCollectibleClick?.(collectibleId)}
 			onKeyDown={handleKeyDown}
+			hideQuantitySelector={hideQuantitySelector}
 		>
 			<Footer
 				chainId={chainId}
@@ -107,6 +109,7 @@ export function MarketCard({
 				onCannotPerformAction={onCannotPerformAction}
 				cardType="market"
 				prioritizeOwnerActions={prioritizeOwnerActions}
+				hideQuantitySelector={hideQuantitySelector}
 			/>
 		</BaseCard>
 	);

package/src/react/ui/components/marketplace-collectible-card/variants/ShopCard.tsx

@@ -23,6 +23,7 @@ export function ShopCard({
 	quantityInitial,
 	quantityRemaining,
 	unlimitedSupply,
+	hideQuantitySelector,
 }: ShopCollectibleCardProps) {
 	const { data: saleCurrency, isLoading: saleCurrencyLoading } = useCurrency({
 		chainId,
@@ -73,6 +74,7 @@ export function ShopCard({
 			mediaClassName={mediaClassName}
 			contractType={collectionType as ContractType}
 			isShop={true}
+			hideQuantitySelector={hideQuantitySelector}
 		>
 			<Footer
 				chainId={chainId}

package/src/react/ui/modals/BuyModal/components/ERC1155BuyModal.tsx

@@ -8,6 +8,9 @@ import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
+import { ErrorLogBox } from '../../../components/_internals/ErrorLogBox';
+import { ActionModal } from '../../_internal/components/actionModal';
+import { LoadingModal } from '../../_internal/components/actionModal/LoadingModal';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import {
 	buyModalStore,
@@ -44,20 +47,43 @@ export const ERC1155BuyModal = ({
 	const quantityRemaining = isShop
 		? modalProps.quantityRemaining?.toString()
 		: order?.quantityRemaining;
+	const unlimitedSupply = isShop ? modalProps.unlimitedSupply : false;
 
-	if (!quantity) {
+	useEffect(() => {
+		if (modalProps.hideQuantitySelector && !quantity) {
+			const minQuantity = quantityDecimals > 0 ? 10 ** quantityDecimals : 1;
+
+			const autoQuantity = unlimitedSupply
+				? minQuantity
+				: Math.min(Number(quantityRemaining), minQuantity);
+
+			buyModalStore.send({
+				type: 'setQuantity',
+				quantity: autoQuantity,
+			});
+		}
+	}, [
+		modalProps.hideQuantitySelector,
+		quantity,
+		quantityDecimals,
+		unlimitedSupply,
+		quantityRemaining,
+	]);
+
+	if (!quantity && !modalProps.hideQuantitySelector) {
 		return (
 			<ERC1155QuantityModal
 				order={order}
 				cardType={cardType}
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				chainId={chainId}
 			/>
 		);
 	}
 
-	if (!checkoutOptions) {
+	if (!checkoutOptions || !quantity) {
 		return null;
 	}
 
@@ -91,6 +117,7 @@ const Modal = ({
 		data: paymentModalParams,
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
+		failureReason,
 	} = usePaymentModalParams({
 		address,
 		quantity,
@@ -101,8 +128,43 @@ const Modal = ({
 		enabled: true,
 	});
 
+	if (failureReason) {
+		return (
+			<ActionModal
+				isOpen={true}
+				onClose={() => {
+					buyModalStore.send({ type: 'close' });
+				}}
+				title={'An error occurred while purchasing'}
+				children={
+					<ErrorLogBox
+						title={failureReason.name}
+						message={failureReason.message}
+						error={failureReason}
+					/>
+				}
+				ctas={[
+					{
+						label: 'Close',
+						onClick: () => {
+							buyModalStore.send({ type: 'close' });
+						},
+					},
+				]}
+				chainId={order.chainId}
+			/>
+		);
+	}
+
 	if (isPaymentModalParamsLoading || !paymentModalParams) {
-		return null;
+		return (
+			<LoadingModal
+				isOpen={true}
+				chainId={order.chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Loading checkout"
+			/>
+		);
 	}
 
 	if (isPaymentModalParamsError) {

package/src/react/ui/modals/BuyModal/components/ERC721BuyModal.tsx

@@ -8,6 +8,8 @@ import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
+import { ErrorLogBox } from '../../../components/_internals/ErrorLogBox';
+import { ActionModal } from '../../_internal/components/actionModal';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import { buyModalStore, usePaymentModalState, useQuantity } from '../store';
 
@@ -39,6 +41,7 @@ export const ERC721BuyModal = ({
 		data: paymentModalParams,
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
+		failureReason,
 	} = usePaymentModalParams({
 		address,
 		quantity: quantity ?? undefined,
@@ -49,6 +52,34 @@ export const ERC721BuyModal = ({
 		enabled: true,
 	});
 
+	if (failureReason) {
+		return (
+			<ActionModal
+				isOpen={true}
+				onClose={() => {
+					buyModalStore.send({ type: 'close' });
+				}}
+				title={'An error occurred while purchasing'}
+				children={
+					<ErrorLogBox
+						title={failureReason.name}
+						message={failureReason.message}
+						error={failureReason}
+					/>
+				}
+				ctas={[
+					{
+						label: 'Close',
+						onClick: () => {
+							buyModalStore.send({ type: 'close' });
+						},
+					},
+				]}
+				chainId={order.chainId}
+			/>
+		);
+	}
+
 	// Show loading or error states would be handled by parent router
 	if (isPaymentModalParamsLoading || !paymentModalParams) {
 		return null;