@0xsequence/marketplace-sdk 1.1.0 → 1.2.0

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

@@ -1,8 +1,9 @@
 import { queryOptions } from '@tanstack/react-query';
+import * as dn from 'dnum';
 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 {
@@ -62,9 +63,20 @@ export async function fetchComparePrices(
 	const isAbove = percentageDifference > 0;
 	const isSame = percentageDifference === 0;
 
+	// proper comma separators
+	const absPercentage = Math.abs(percentageDifference);
+	const formattedPercentage = dn.format(
+		[BigInt(Math.round(absPercentage * 100)), 2],
+		{
+			digits: 2,
+			trailingZeros: true,
+			locale: 'en-US',
+		},
+	);
+
 	return {
 		percentageDifference,
-		percentageDifferenceFormatted: Math.abs(percentageDifference).toFixed(2),
+		percentageDifferenceFormatted: formattedPercentage,
 		status: isAbove ? 'above' : isSame ? 'same' : 'below',
 	};
 }
@@ -74,6 +86,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 +110,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.stories.tsx

@@ -164,6 +164,7 @@ export const SellAction: Story = {
 			...MOCK_ORDER,
 			side: OrderSide.offer,
 			status: OrderStatus.active,
+			slug: 'test-order',
 		},
 		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 	},
@@ -276,6 +277,7 @@ export const MarketBuyAction: Story = {
 			...MOCK_ORDER,
 			side: OrderSide.listing,
 			status: OrderStatus.active,
+			slug: 'test-order',
 		},
 		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 		onCannotPerformAction: fn(),

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/components/footer/Footer.tsx

@@ -9,7 +9,7 @@ import {
 	type Currency,
 	type Order,
 } from '../../../../../_internal';
-import { useCurrency, useLowestListing } from '../../../../../hooks';
+import { useCurrency } from '../../../../../hooks';
 import {
 	FooterName,
 	PriceDisplay,
@@ -19,13 +19,12 @@ import {
 
 type FooterProps = {
 	chainId: number;
-	collectionAddress: Address;
-	collectibleId: string;
 	name: string;
 	type?: ContractType;
 	decimals?: number;
 	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 	highestOffer?: Order;
+	lowestListing?: Order;
 	balance?: string;
 	quantityInitial?: string | undefined;
 	quantityRemaining?: string | undefined;
@@ -37,13 +36,12 @@ type FooterProps = {
 
 export const Footer = ({
 	chainId,
-	collectionAddress,
-	collectibleId,
 	name,
 	type,
 	decimals,
 	onOfferClick,
 	highestOffer,
+	lowestListing,
 	balance,
 	quantityInitial,
 	quantityRemaining,
@@ -56,16 +54,6 @@ export const Footer = ({
 	const isMarket = cardType === 'market';
 	const isInventoryNonTradable = cardType === 'inventory-non-tradable';
 
-	const { data: lowestListing, isLoading: isLowestListingLoading } =
-		useLowestListing({
-			chainId,
-			collectionAddress,
-			tokenId: collectibleId,
-			query: {
-				enabled: isMarket, // Only fetch for market cards
-			},
-		});
-
 	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 		chainId,
 		currencyAddress: lowestListing?.priceCurrencyAddress as Address,
@@ -79,9 +67,7 @@ export const Footer = ({
 
 	// Show loading state when listing is loading, or when listing exists but currency is still loading
 	const isPriceLoading =
-		isMarket &&
-		(isLowestListingLoading ||
-			(!!lowestListing?.priceCurrencyAddress && isCurrencyLoading));
+		isMarket && !!lowestListing?.priceCurrencyAddress && isCurrencyLoading;
 
 	return (
 		<div className="relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4">

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,9 +22,11 @@ export function MarketCard({
 	balanceIsLoading = false,
 	onCannotPerformAction,
 	prioritizeOwnerActions,
+	hideQuantitySelector,
 }: MarketCollectibleCardProps) {
 	const collectibleMetadata = collectible?.metadata;
 	const highestOffer = collectible?.offer;
+	const lowestListing = collectible?.listing;
 
 	if (!collectibleMetadata) {
 		console.error('Collectible metadata is undefined');
@@ -66,15 +68,15 @@ export function MarketCard({
 			isShop={false}
 			onClick={() => onCollectibleClick?.(collectibleId)}
 			onKeyDown={handleKeyDown}
+			hideQuantitySelector={hideQuantitySelector}
 		>
 			<Footer
 				chainId={chainId}
-				collectionAddress={collectionAddress}
-				collectibleId={collectibleId}
 				name={collectibleMetadata.name || ''}
 				type={collectionType}
 				onOfferClick={(e) => onOfferClick?.({ order: highestOffer, e })}
 				highestOffer={highestOffer}
+				lowestListing={lowestListing}
 				balance={balance}
 				decimals={collectibleMetadata.decimals}
 				quantityInitial={
@@ -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,11 +74,10 @@ export function ShopCard({
 			mediaClassName={mediaClassName}
 			contractType={collectionType as ContractType}
 			isShop={true}
+			hideQuantitySelector={hideQuantitySelector}
 		>
 			<Footer
 				chainId={chainId}
-				collectionAddress={collectionAddress}
-				collectibleId={collectibleId}
 				name={tokenMetadata.name || ''}
 				type={collectionType}
 				decimals={tokenMetadata.decimals}

package/src/react/ui/modals/BuyModal/__tests__/BuyModalRouter.test.tsx

@@ -140,6 +140,7 @@ const mockOrder = {
 	blockNumber: 1234567,
 	createdAt: new Date().toISOString(),
 	updatedAt: new Date().toISOString(),
+	slug: 'test-order',
 };
 
 const mockCheckoutOptions = {
@@ -161,6 +162,8 @@ const mockCurrency = {
 	exchangeRate: 3000,
 	defaultChainCurrency: true,
 	nativeCurrency: true,
+	openseaListing: true,
+	openseaOffer: true,
 	createdAt: new Date().toISOString(),
 	updatedAt: new Date().toISOString(),
 };

package/src/react/ui/modals/BuyModal/__tests__/Modal1155.test.tsx

@@ -47,6 +47,7 @@ const testOrder: Order = {
 	validUntil: '',
 	blockNumber: 0,
 	updatedAt: '',
+	slug: 'test-order',
 };
 
 describe('ERC1155QuantityModal', () => {

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;

package/src/react/ui/modals/BuyModal/hooks/__tests__/useERC721SalePaymentParams.test.tsx

@@ -59,6 +59,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: undefined,
 			quantity: 1,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -101,6 +102,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: 'stripe',
 			quantity: 1,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -122,6 +124,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: undefined,
 			quantity: 1,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -143,6 +146,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: undefined,
 			quantity: 5,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -245,7 +249,22 @@ describe('useERC721SalePaymentParams', () => {
 		expect(result.current.data).toBeUndefined();
 	});
 
-	it('should use proper query key', () => {
+	it('should use proper query key', async () => {
+		// Ensure useAccount returns a connected address
+		const { useAccount } = vi.mocked(await import('wagmi'));
+		useAccount.mockReturnValue({
+			address: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266' as Address,
+			isConnected: true,
+			isConnecting: false,
+			isDisconnected: false,
+			isReconnecting: false,
+			connector: null,
+			addresses: undefined,
+			chain: undefined,
+			chainId: undefined,
+			status: 'connected',
+		} as never);
+
 		const args = {
 			salesContractAddress: mockSalesContractAddress,
 			collectionAddress: mockCollectionAddress,