@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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

@@ -1,10 +1,7 @@
 'use client';
 
 import type { Address } from 'viem';
-import type {
-	CollectibleCardAction,
-	MarketplaceType,
-} from '../../../../../types';
+import type { CardType, CollectibleCardAction } from '../../../../../types';
 import type { Order, OrderbookKind } from '../../../../_internal';
 import { NonOwnerActions } from './components/NonOwnerActions';
 import { OwnerActions } from './components/OwnerActions';
@@ -23,7 +20,7 @@ type ActionButtonProps = {
 	onCannotPerformAction?: (
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	salesContractAddress?: Address;
 	prioritizeOwnerActions?: boolean;
 	salePrice?: {
@@ -45,7 +42,7 @@ export function ActionButton({
 	highestOffer,
 	lowestListing,
 	onCannotPerformAction,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	prioritizeOwnerActions,
 	salePrice,
@@ -78,9 +75,9 @@ export function ActionButton({
 	}
 
 	const nonOwnerProps =
-		marketplaceType === 'shop' && salesContractAddress && salePrice
+		cardType === 'shop' && salesContractAddress && salePrice
 			? {
-					marketplaceType: 'shop' as const,
+					cardType: 'shop' as const,
 					salesContractAddress,
 					salePrice,
 					action,
@@ -92,7 +89,7 @@ export function ActionButton({
 					unlimitedSupply,
 				}
 			: {
-					marketplaceType: 'market' as const,
+					cardType: 'market' as const,
 					orderbookKind,
 					lowestListing,
 					action,

package/src/react/ui/components/_internals/action-button/__tests__/ActionButtonBody.test.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { fireEvent, render, screen } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as wagmi from 'wagmi';
 import { CollectibleCardAction } from '../../../../../../types';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import * as hooksModule from '../../../../../hooks';
 import { ActionButtonBody } from '../components/ActionButtonBody';
 import { useActionButtonStore } from '../store';
@@ -19,6 +18,14 @@ vi.mock('../../../../../hooks', () => ({
 	useOpenConnectModal: vi.fn(),
 }));
 
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
+
 describe('ActionButtonBody', () => {
 	const mockOnClick = vi.fn();
 	const mockOpenConnectModal = vi.fn();
@@ -33,10 +40,18 @@ describe('ActionButtonBody', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isLoading: false,
-			isError: false,
+		// Default to connected state
+		vi.mocked(wagmi.useAccount).mockReturnValue({
+			address: '0x1234567890123456789012345678901234567890',
+			addresses: ['0x1234567890123456789012345678901234567890'],
+			chain: undefined,
+			chainId: 1,
+			connector: {} as any,
+			isConnected: true,
+			isConnecting: false,
+			isDisconnected: false,
+			isReconnecting: false,
+			status: 'connected',
 		});
 
 		vi.spyOn(hooksModule, 'useOpenConnectModal').mockReturnValue({
@@ -59,15 +74,20 @@ describe('ActionButtonBody', () => {
 	});
 
 	it('sets pending action and opens connect modal when user is not connected', () => {
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: {
-				...createMockWallet(),
-				// @ts-expect-error - address is undefined for testing
-				address: undefined,
-			},
-			isLoading: false,
-			isError: false,
+		// Mock disconnected state
+		vi.mocked(wagmi.useAccount).mockReturnValue({
+			address: undefined,
+			addresses: undefined,
+			chain: undefined,
+			chainId: undefined,
+			connector: undefined,
+			isConnected: false,
+			isConnecting: false,
+			isDisconnected: true,
+			isReconnecting: false,
+			status: 'disconnected',
 		});
+
 		render(<ActionButtonBody {...defaultProps} />);
 
 		const button = screen.getByRole('button', { name: defaultProps.label });

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

@@ -1,13 +1,12 @@
 'use client';
 
 import { render, screen } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
+
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { CollectibleCardAction } from '../../../../../../types';
-import { OrderSide } from '../../../../../_internal';
-import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { mockOrder } from '../../../../../../react/_internal/api/__mocks__/marketplace.msw';
+
+import { CollectibleCardAction, OrderSide } from '../../../../../../types';
 import { NonOwnerActions } from '../components/NonOwnerActions';
 
 describe('NonOwnerActions', () => {
@@ -20,7 +19,7 @@ describe('NonOwnerActions', () => {
 
 	const marketProps = {
 		...baseProps,
-		marketplaceType: 'market' as const,
+		cardType: 'market' as const,
 		lowestListing: { ...mockOrder, side: OrderSide.listing },
 	};
 
@@ -28,12 +27,6 @@ describe('NonOwnerActions', () => {
 		vi.clearAllMocks();
 		vi.resetAllMocks();
 		vi.restoreAllMocks();
-
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isLoading: false,
-			isError: false,
-		});
 	});
 
 	it('renders Buy now button for BUY action', () => {
@@ -45,7 +38,7 @@ describe('NonOwnerActions', () => {
 		render(
 			<NonOwnerActions
 				{...baseProps}
-				marketplaceType="shop"
+				cardType="shop"
 				salesContractAddress="0x123"
 				salePrice={{ amount: '0.1', currencyAddress: zeroAddress }}
 			/>,
@@ -55,7 +48,7 @@ describe('NonOwnerActions', () => {
 
 	it('throws error when lowestListing is missing for BUY action in MARKET marketplace type', () => {
 		expect(() => {
-			render(<NonOwnerActions {...baseProps} marketplaceType="market" />);
+			render(<NonOwnerActions {...baseProps} cardType="market" />);
 		}).toThrow('lowestListing is required for BUY action and MARKET card type');
 	});
 
@@ -63,7 +56,7 @@ describe('NonOwnerActions', () => {
 		render(
 			<NonOwnerActions
 				{...baseProps}
-				marketplaceType="market"
+				cardType="market"
 				action={CollectibleCardAction.OFFER}
 			/>,
 		);

package/src/react/ui/components/_internals/action-button/__tests__/OwnerActions.test.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import { render, screen } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
+
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { CollectibleCardAction } from '../../../../../../types';
-import { OrderSide } from '../../../../../_internal';
-import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { mockOrder } from '../../../../../../react/_internal/api/__mocks__/marketplace.msw';
+
+import { CollectibleCardAction, OrderSide } from '../../../../../../types';
 import { OwnerActions } from '../components/OwnerActions';
 
 describe('OwnerActions', () => {
@@ -24,12 +23,6 @@ describe('OwnerActions', () => {
 		vi.clearAllMocks();
 		vi.resetAllMocks();
 		vi.restoreAllMocks();
-
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isLoading: false,
-			isError: false,
-		});
 	});
 
 	it('renders Create listing button for LIST action', () => {
@@ -59,7 +52,7 @@ describe('OwnerActions', () => {
 		expect(screen.getByText('Sell')).toBeInTheDocument();
 	});
 
-	it('returns null for unsupported actions', () => {
+	it.skip('returns null for unsupported actions', () => {
 		const props = {
 			...defaultProps,
 			action: CollectibleCardAction.BUY,

package/src/react/ui/components/_internals/action-button/__tests__/useActionButtonLogic.test.tsx

@@ -1,34 +1,45 @@
 'use client';
 
 import { renderHook, waitFor } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as wagmi from 'wagmi';
 import { CollectibleCardAction } from '../../../../../../types';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { useActionButtonLogic } from '../hooks/useActionButtonLogic';
 import { actionButtonStore } from '../store';
 
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
+
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();
 	const defaultProps = {
 		tokenId: '123',
-		action:
-			(CollectibleCardAction.BUY as CollectibleCardAction.BUY) ||
-			CollectibleCardAction.OFFER,
+		action: CollectibleCardAction.BUY as CollectibleCardAction.BUY,
 		owned: false,
 		onCannotPerformAction: onCannotPerformActionMock,
 	};
 
 	beforeEach(() => {
 		vi.clearAllMocks();
-		vi.clearAllMocks();
-		vi.restoreAllMocks();
 		actionButtonStore.send({ type: 'clearPendingAction' });
 
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isError: false,
-			isLoading: false,
+		// Default to connected state
+		vi.mocked(wagmi.useAccount).mockReturnValue({
+			address: '0x1234567890123456789012345678901234567890',
+			addresses: ['0x1234567890123456789012345678901234567890'],
+			chain: undefined,
+			chainId: 1,
+			connector: {} as any,
+			isConnected: true,
+			isConnecting: false,
+			isDisconnected: false,
+			isReconnecting: false,
+			status: 'connected',
 		});
 	});
 
@@ -47,11 +58,16 @@ describe('useActionButtonLogic', () => {
 			}),
 		);
 
-		// Callback should be called with the action
+		// When owned is true and action is BUY, isOwnerAction should be false
+		// because BUY is not in the list of owner actions (LIST, TRANSFER, SELL)
 		expect(result.current.isOwnerAction).toBe(false);
-		expect(onCannotPerformActionMock).toHaveBeenCalledWith(
-			CollectibleCardAction.BUY,
-		);
+
+		// Wait for the effect to run
+		await waitFor(() => {
+			expect(onCannotPerformActionMock).toHaveBeenCalledWith(
+				CollectibleCardAction.BUY,
+			);
+		});
 	});
 
 	it('executes pending action when user becomes connected', async () => {
@@ -71,7 +87,7 @@ describe('useActionButtonLogic', () => {
 			}),
 		);
 
-		waitFor(
+		await waitFor(
 			() => {
 				expect(executePendingActionMock).toHaveBeenCalled();
 			},

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

@@ -2,8 +2,8 @@
 
 import { Button, type IconProps } from '@0xsequence/design-system';
 import type { ComponentType } from 'react';
+import { useAccount } from 'wagmi';
 import type { CollectibleCardAction } from '../../../../../../types';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { useOpenConnectModal } from '../../../../../hooks';
 import { useActionButtonStore } from '../store';
 
@@ -22,10 +22,9 @@ export function ActionButtonBody({
 	icon,
 	action,
 }: ActionButtonBodyProps) {
-	const { wallet } = useWallet();
-	const address = wallet?.address;
 	const { openConnectModal } = useOpenConnectModal();
 	const { setPendingAction } = useActionButtonStore();
+	const { address } = useAccount();
 
 	const handleClick = (e: React.MouseEvent) => {
 		e.preventDefault();

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

@@ -1,8 +1,8 @@
 'use client';
 
 import type { Address } from 'viem';
+import type { Order, OrderbookKind } from '../../../../../../types';
 import { CollectibleCardAction } from '../../../../../../types';
-import type { Order, OrderbookKind } from '../../../../../_internal';
 import SvgCartIcon from '../../../../icons/CartIcon';
 import { useBuyModal } from '../../../../modals/BuyModal';
 import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
@@ -19,7 +19,7 @@ type NonOwnerActionsBaseProps = {
 };
 
 type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
-	marketplaceType: 'shop';
+	cardType: 'shop';
 	salesContractAddress: Address;
 	salePrice: {
 		amount: string;
@@ -30,7 +30,7 @@ type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
 };
 
 type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
-	marketplaceType: 'market';
+	cardType: 'market';
 	lowestListing?: Order;
 	orderbookKind?: OrderbookKind;
 	salesContractAddress?: never;
@@ -50,13 +50,13 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 		quantityDecimals,
 		quantityRemaining,
 		unlimitedSupply,
-		marketplaceType,
+		cardType,
 	} = props;
 
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
-	if (marketplaceType === 'shop') {
+	if (cardType === 'shop') {
 		const { salesContractAddress, salePrice } = props;
 
 		return (
@@ -75,7 +75,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 								quantity: '1',
 							},
 						],
-						marketplaceType: 'shop',
+						cardType: 'shop',
 						salePrice: {
 							amount: salePrice.amount,
 							currencyAddress: salePrice.currencyAddress,
@@ -110,7 +110,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						collectibleId: tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
-						marketplaceType: 'market',
+						cardType: 'market',
 					})
 				}
 				icon={SvgCartIcon}

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -1,8 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
 import { CollectibleCardAction } from '../../../../../../types';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { useActionButtonStore } from '../store';
 
 type UseActionButtonLogicProps = {
@@ -20,8 +20,7 @@ export const useActionButtonLogic = ({
 	action,
 	onCannotPerformAction,
 }: UseActionButtonLogicProps) => {
-	const { wallet } = useWallet();
-	const address = wallet?.address;
+	const { address } = useAccount();
 	const actionsThatOwnersCannotPerform = [
 		CollectibleCardAction.BUY,
 		CollectibleCardAction.OFFER,

package/src/react/ui/components/_internals/custom-select/__tests__/CustomSelect.test.tsx

@@ -31,7 +31,7 @@ vi.mock('@0xsequence/design-system', async (importOriginal) => {
 
 	// Create a mock implementation that renders all dropdown content immediately
 	return {
-		// @ts-ignore - ignore spread type error
+		// @ts-expect-error - ignore spread type error
 		...actual,
 		DropdownMenuRoot: ({ children }: { children: ReactNode }) => (
 			<div>{children}</div>

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

@@ -2,16 +2,17 @@
 
 import type { CollectibleCardProps } from './types';
 import { MarketCard } from './variants/MarketCard';
+import { NonTradableInventoryCard } from './variants/NonTradableInventoryCard';
 
 import { ShopCard } from './variants/ShopCard';
 
 export function CollectibleCard(props: CollectibleCardProps) {
-	switch (props.marketplaceType) {
+	switch (props.cardType) {
 		case 'shop':
 			return <ShopCard {...props} />;
-		// biome-ignore lint/complexity/noUselessSwitchCase: explicit case makes code clearer and future-proof
 		case 'market':
-		default:
 			return <MarketCard {...props} />;
+		case 'inventory-non-tradable':
+			return <NonTradableInventoryCard {...props} />;
 	}
 }

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

@@ -1,6 +1,13 @@
 import { Skeleton } from '@0xsequence/design-system';
+import { ContractType } from '../../../_internal';
 
-export function MarketplaceCollectibleCardSkeleton() {
+export function MarketplaceCollectibleCardSkeleton({
+	contractType,
+	isShop,
+}: {
+	contractType: ContractType;
+	isShop: boolean;
+}) {
 	return (
 		<div
 			data-testid="collectible-card-skeleton"
@@ -17,7 +24,11 @@ export function MarketplaceCollectibleCardSkeleton() {
 			</div>
 			<div className="mt-2 flex flex-col gap-2 px-4 pb-4">
 				<Skeleton size="lg" className="animate-shimmer" />
-				<Skeleton size="sm" className="animate-shimmer" />
+				<Skeleton size="sm" className="h-5 w-16 animate-shimmer" />
+
+				{isShop && contractType === ContractType.ERC1155 && (
+					<Skeleton size="lg" className="h-6 w-20 animate-shimmer" />
+				)}
 			</div>
 		</div>
 	);

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

@@ -1,10 +1,7 @@
 'use client';
 
 import type { Address } from 'viem';
-import type {
-	CollectibleCardAction,
-	MarketplaceType,
-} from '../../../../../types';
+import type { CardType, CollectibleCardAction } from '../../../../../types';
 import type { Order, OrderbookKind } from '../../../../_internal';
 import { ActionButton } from '../../_internals/action-button/ActionButton';
 
@@ -21,7 +18,7 @@ interface ActionButtonWrapperProps {
 	onCannotPerformAction?: (
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	salesContractAddress?: Address;
 	prioritizeOwnerActions?: boolean;
 	salePrice?: {
@@ -44,7 +41,7 @@ export function ActionButtonWrapper({
 	lowestListing,
 	owned,
 	onCannotPerformAction,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	prioritizeOwnerActions,
 	salePrice,
@@ -66,7 +63,7 @@ export function ActionButtonWrapper({
 				lowestListing={lowestListing}
 				owned={owned}
 				onCannotPerformAction={onCannotPerformAction}
-				marketplaceType={marketplaceType}
+				cardType={cardType}
 				salesContractAddress={salesContractAddress}
 				prioritizeOwnerActions={prioritizeOwnerActions}
 				salePrice={salePrice}

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

@@ -1,35 +1,45 @@
 'use client';
 
+import { cn } from '@0xsequence/design-system';
+import type { ContractType } from '../../../../_internal';
 import { Media } from '../../media/Media';
 import { MarketplaceCollectibleCardSkeleton } from '../CollectibleCardSkeleton';
 import type { MarketplaceCardBaseProps } from '../types';
-
 export interface BaseCardProps extends MarketplaceCardBaseProps {
-	isLoading: boolean;
+	cardLoading: boolean;
 	name: string;
 	image?: string;
 	video?: string;
 	animationUrl?: string;
 	onClick?: () => void;
 	onKeyDown?: (e: React.KeyboardEvent) => void;
-	className?: string;
 	children: React.ReactNode;
+	mediaClassName?: string;
+	contractType: ContractType;
+	isShop: boolean;
 }
 
 export function BaseCard({
-	isLoading,
 	name,
 	image,
 	video,
 	animationUrl,
 	onClick,
 	onKeyDown,
-	className,
 	assetSrcPrefixUrl,
 	children,
+	mediaClassName,
+	cardLoading,
+	contractType,
+	isShop,
 }: BaseCardProps) {
-	if (isLoading) {
-		return <MarketplaceCollectibleCardSkeleton />;
+	if (cardLoading) {
+		return (
+			<MarketplaceCollectibleCardSkeleton
+				contractType={contractType}
+				isShop={isShop}
+			/>
+		);
 	}
 
 	return (
@@ -48,7 +58,7 @@ export function BaseCard({
 						name={name || ''}
 						assets={[image, video, animationUrl]}
 						assetSrcPrefixUrl={assetSrcPrefixUrl}
-						className={className}
+						mediaClassname={cn('object-contain', mediaClassName)}
 					/>
 					{children}
 				</article>