@0xsequence/marketplace-sdk 0.8.3 → 0.8.5

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { renderHook, waitFor } from '@test';
+import { createMockWallet } from '@test/mocks/wallet';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { useActionButtonLogic } from '../hooks/useActionButtonLogic';
+import { actionButtonStore, setPendingAction } from '../store';
+import { CollectibleCardAction } from '../types';
+
+describe('useActionButtonLogic', () => {
+	const onCannotPerformActionMock = vi.fn();
+	const defaultProps = {
+		tokenId: '123',
+		action:
+			(CollectibleCardAction.BUY as CollectibleCardAction.BUY) ||
+			CollectibleCardAction.OFFER,
+		owned: false,
+		onCannotPerformAction: onCannotPerformActionMock,
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.clearAllMocks();
+		vi.restoreAllMocks();
+		actionButtonStore.pendingAction.set(null);
+
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: createMockWallet(),
+			isError: false,
+			isLoading: false,
+		});
+	});
+
+	it('restricts owners from performing buy/offer actions', async () => {
+		setPendingAction(defaultProps.action, vi.fn(), '123');
+
+		const { result } = renderHook(() =>
+			useActionButtonLogic({
+				...defaultProps,
+				owned: true,
+			}),
+		);
+
+		// Callback should be called with the action
+		expect(result.current.isOwnerAction).toBe(false);
+		expect(onCannotPerformActionMock).toHaveBeenCalledWith(
+			CollectibleCardAction.BUY,
+		);
+	});
+
+	it('executes pending action when user becomes connected', async () => {
+		const executePendingActionMock = vi.fn();
+
+		setPendingAction(
+			CollectibleCardAction.BUY,
+			executePendingActionMock,
+			defaultProps.tokenId,
+		);
+
+		renderHook(() =>
+			useActionButtonLogic({
+				...defaultProps,
+				owned: false,
+			}),
+		);
+
+		waitFor(
+			() => {
+				expect(executePendingActionMock).toHaveBeenCalled();
+			},
+			{
+				timeout: 1000,
+			},
+		);
+	});
+});

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { useAccount } from 'wagmi';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import {
 	actionButtonStore,
 	clearPendingAction,
@@ -24,7 +24,8 @@ export const useActionButtonLogic = ({
 	action,
 	onCannotPerformAction,
 }: UseActionButtonLogicProps) => {
-	const { address } = useAccount();
+	const { wallet } = useWallet();
+	const address = wallet?.address;
 	const actionsThatOwnersCannotPerform = [
 		CollectibleCardAction.BUY,
 		CollectibleCardAction.OFFER,
@@ -38,7 +39,7 @@ export const useActionButtonLogic = ({
 			owned &&
 			actionButtonStore.pendingAction.get() &&
 			address &&
-			!actionsThatOwnersCannotPerform.includes(action) &&
+			actionsThatOwnersCannotPerform.includes(action) &&
 			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
 		) {
 			onCannotPerformAction?.(

package/src/react/ui/components/collectible-card/CollectibleAsset.tsx

@@ -9,6 +9,7 @@ import ChessTileImage from '../../images/chess-tile.png';
 export function CollectibleAssetSkeleton() {
 	return (
 		<Skeleton
+			data-testid="collectible-asset-skeleton"
 			size="lg"
 			className="absolute inset-0 h-full w-full animate-shimmer"
 			style={{

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

@@ -16,7 +16,10 @@ import { Footer } from './Footer';
 
 function CollectibleSkeleton() {
 	return (
-		<div className="w-card-width overflow-hidden rounded-xl border border-border-base focus-visible:border-border-focus focus-visible:shadow-none focus-visible:outline-focus active:border-border-focus active:shadow-none">
+		<div
+			data-testid="collectible-card-skeleton"
+			className="w-card-width overflow-hidden rounded-xl border border-border-base focus-visible:border-border-focus focus-visible:shadow-none focus-visible:outline-focus active:border-border-focus active:shadow-none"
+		>
 			<div className="relative aspect-square overflow-hidden bg-background-secondary">
 				<Skeleton
 					size="lg"
@@ -40,7 +43,7 @@ type CollectibleCardProps = {
 	collectionAddress: Hex;
 	orderbookKind?: OrderbookKind;
 	collectionType?: ContractType;
-	lowestListing: CollectibleOrder | undefined;
+	collectible: CollectibleOrder | undefined;
 	onCollectibleClick?: (tokenId: string) => void;
 	onOfferClick?: ({
 		order,
@@ -51,6 +54,7 @@ type CollectibleCardProps = {
 	}) => void;
 	assetSrcPrefixUrl?: string;
 	balance?: string;
+	balanceIsLoading: boolean;
 	cardLoading?: boolean;
 	/**
 	 * Callback function that is called when the user attempts to perform an action
@@ -77,22 +81,23 @@ export function CollectibleCard({
 	collectionAddress,
 	orderbookKind,
 	collectionType,
-	lowestListing,
+	collectible,
 	onCollectibleClick,
 	onOfferClick,
 	balance,
+	balanceIsLoading,
 	cardLoading,
 	onCannotPerformAction,
 	assetSrcPrefixUrl,
 }: CollectibleCardProps) {
-	const collectibleMetadata = lowestListing?.metadata;
-	const highestOffer = lowestListing?.offer;
+	const collectibleMetadata = collectible?.metadata;
+	const highestOffer = collectible?.offer;
 
 	const { data: lowestListingCurrency } = useCurrency({
 		chainId,
-		currencyAddress: lowestListing?.order?.priceCurrencyAddress,
+		currencyAddress: collectible?.listing?.priceCurrencyAddress,
 		query: {
-			enabled: !!lowestListing?.order?.priceCurrencyAddress,
+			enabled: !!collectible?.listing?.priceCurrencyAddress,
 		},
 	});
 
@@ -103,14 +108,15 @@ export function CollectibleCard({
 	const action = (
 		balance
 			? (highestOffer && CollectibleCardAction.SELL) ||
-				(!lowestListing?.order && CollectibleCardAction.LIST) ||
+				(!collectible?.listing && CollectibleCardAction.LIST) ||
 				CollectibleCardAction.TRANSFER
-			: (lowestListing?.order && CollectibleCardAction.BUY) ||
+			: (collectible?.listing && CollectibleCardAction.BUY) ||
 				CollectibleCardAction.OFFER
 	) as CollectibleCardAction;
 
 	return (
 		<div
+			data-testid="collectible-card"
 			className="w-card-width overflow-hidden rounded-xl border border-border-base bg-background-primary focus-visible:border-border-focus focus-visible:shadow-focus-ring focus-visible:outline-focus active:border-border-focus active:shadow-active-ring"
 			onClick={() => onCollectibleClick?.(collectibleId)}
 			onKeyDown={(e) => {
@@ -132,13 +138,13 @@ export function CollectibleCard({
 						type={collectionType}
 						onOfferClick={(e) => onOfferClick?.({ order: highestOffer, e })}
 						highestOffer={highestOffer}
-						lowestListingPriceAmount={lowestListing?.order?.priceAmount}
+						lowestListingPriceAmount={collectible?.listing?.priceAmount}
 						lowestListingCurrency={lowestListingCurrency}
 						balance={balance}
 						decimals={collectibleMetadata?.decimals}
 					/>
 
-					{(highestOffer || lowestListing) && (
+					{(highestOffer || collectible) && !balanceIsLoading && (
 						<div className="-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]">
 							<ActionButton
 								chainId={chainId}
@@ -147,7 +153,7 @@ export function CollectibleCard({
 								orderbookKind={orderbookKind}
 								action={action}
 								highestOffer={highestOffer}
-								lowestListing={lowestListing?.order}
+								lowestListing={collectible?.listing}
 								owned={!!balance}
 								onCannotPerformAction={onCannotPerformAction}
 							/>

package/src/react/ui/components/collectible-card/__tests__/CollectibleAsset.test.tsx

@@ -0,0 +1,200 @@
+import { render, screen } from '@test/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import type { TokenMetadata } from '../../../../_internal';
+import { CollectibleAsset } from '../CollectibleAsset';
+
+describe('CollectibleAsset', () => {
+	it('renders image content correctly with proper loading states and fallback', async () => {
+		const originalImage = window.Image;
+
+		// We need to use a proper constructor function to match the Image interface
+		const MockImage = function (this: HTMLImageElement) {
+			this.src = '';
+			this.alt = '';
+			this.className = '';
+			this.onload = null;
+			this.onerror = null;
+			return this;
+		} as unknown as typeof Image;
+
+		window.Image = MockImage;
+
+		const mockMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Test Collectible',
+			image: 'https://example.com/test-image.png',
+			attributes: [],
+		};
+
+		// Initial render should show the loading skeleton
+		const { rerender } = render(
+			<CollectibleAsset
+				name="Test Collectible"
+				collectibleMetadata={mockMetadata as TokenMetadata}
+			/>,
+		);
+
+		// check if skeleton is rendered during loading
+		const skeleton = screen.getByTestId('collectible-asset-skeleton');
+		expect(skeleton).toBeInTheDocument();
+
+		// trigger the image load event to simulate successful loading
+		const imgElement = document.querySelector('img');
+		expect(imgElement).not.toBeNull();
+
+		if (imgElement) {
+			expect(imgElement.getAttribute('src')).toBe(
+				'https://example.com/test-image.png',
+			);
+			expect(imgElement.getAttribute('alt')).toBe('Test Collectible');
+
+			// initial state should be invisible due to loading
+			expect(imgElement.className).toContain('invisible');
+
+			// successful image load
+			imgElement.dispatchEvent(new Event('load'));
+
+			// after loading, the image should be visible
+			expect(imgElement.className).toContain('visible');
+		}
+
+		// failing image that should use fallback
+		const mockMetadataWithBadImage: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Test Collectible',
+			image: 'https://example.com/bad-image.png',
+			attributes: [],
+		};
+
+		rerender(
+			<CollectibleAsset
+				name="Test Collectible"
+				collectibleMetadata={mockMetadataWithBadImage as TokenMetadata}
+			/>,
+		);
+
+		const updatedImgElement = document.querySelector('img');
+		if (updatedImgElement) {
+			// simulate image load error
+			updatedImgElement.dispatchEvent(new Event('error'));
+
+			// after error, the src should be changed to the placeholder
+			expect(updatedImgElement.className).toContain('visible');
+		}
+
+		// restore the original Image implementation
+		window.Image = originalImage;
+	});
+
+	it('handles video content with appropriate controls and loading states', () => {
+		// Create a mock for the HTMLVideoElement addEventListener
+		const originalAddEventListener =
+			HTMLVideoElement.prototype.addEventListener;
+		HTMLVideoElement.prototype.addEventListener = vi.fn(
+			(event: string, handler: EventListenerOrEventListenerObject) => {
+				// Immediately call the loadedmetadata handler to simulate video loaded
+				if (event === 'loadedmetadata' && typeof handler === 'function') {
+					handler(new Event('loadedmetadata'));
+				}
+			},
+		);
+
+		// Mock browser detection for Safari
+		const originalUserAgent = navigator.userAgent;
+		Object.defineProperty(navigator, 'userAgent', {
+			value:
+				'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15',
+			configurable: true,
+		});
+
+		// Mock video metadata
+		const mockVideoMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'Video Collectible',
+			video: 'https://example.com/video.mp4',
+			attributes: [],
+		};
+
+		render(
+			<CollectibleAsset
+				name="Video Collectible"
+				collectibleMetadata={mockVideoMetadata as TokenMetadata}
+			/>,
+		);
+
+		// Check that video element is present with correct attributes
+		const videoElement = document.querySelector('video');
+		expect(videoElement).not.toBeNull();
+
+		if (videoElement) {
+			// Video source should be set correctly
+			const sourceElement = videoElement.querySelector('source');
+			expect(sourceElement).not.toBeNull();
+			expect(sourceElement?.getAttribute('src')).toBe(
+				'https://example.com/video.mp4',
+			);
+
+			// Video should have correct attributes for NFT display
+			expect(videoElement.autoplay).toBe(true);
+			expect(videoElement.loop).toBe(true);
+			expect(videoElement.controls).toBe(true);
+			expect(videoElement.playsInline).toBe(true);
+			expect(videoElement.muted).toBe(true);
+
+			// In Safari, pointer-events-none should be applied
+			expect(videoElement.className).toContain('pointer-events-none');
+
+			// After metadata loaded, video should be visible
+			expect(videoElement.className).toContain('visible');
+			expect(videoElement.className).not.toContain('invisible');
+		}
+
+		// Clean up mocks
+		HTMLVideoElement.prototype.addEventListener = originalAddEventListener;
+		Object.defineProperty(navigator, 'userAgent', {
+			value: originalUserAgent,
+			configurable: true,
+		});
+	});
+
+	it('handles HTML content in iframes with proper sandboxing', () => {
+		// Mock HTML content metadata
+		const mockHtmlMetadata: Partial<TokenMetadata> = {
+			tokenId: '1',
+			name: 'HTML Collectible',
+			animation_url: 'https://example.com/interactive.html',
+			attributes: [],
+		};
+
+		render(
+			<CollectibleAsset
+				name="HTML Collectible"
+				collectibleMetadata={mockHtmlMetadata as TokenMetadata}
+			/>,
+		);
+
+		// Check that iframe element is present with correct attributes
+		const iframeElement = document.querySelector('iframe');
+		expect(iframeElement).not.toBeNull();
+
+		if (iframeElement) {
+			// iframe source should be set correctly
+			expect(iframeElement.getAttribute('src')).toBe(
+				'https://example.com/interactive.html',
+			);
+
+			// iframe should have appropriate attributes for security
+			expect(iframeElement.getAttribute('sandbox')).toBe('allow-scripts');
+
+			// iframe should have title for accessibility
+			expect(iframeElement.getAttribute('title')).toBe('HTML Collectible');
+
+			// iframe should have proper styling
+			expect(iframeElement.className).toContain('aspect-square');
+			expect(iframeElement.className).toContain('w-full');
+
+			// Verify border styling
+			expect(iframeElement.style.border).toBe('0px');
+		}
+	});
+});

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

@@ -1,125 +1,94 @@
-import { describe } from 'vitest';
+import { TEST_COLLECTIBLE, TEST_CURRENCY } from '@test/const';
+import { fireEvent, render, screen } from '@test/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+	type CollectibleOrder,
+	ContractType,
+	OrderSide,
+	OrderbookKind,
+} from '../../../../_internal';
+import { mockTokenMetadata } from '../../../../_internal/api/__mocks__/indexer.msw';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as hooks from '../../../../hooks';
+import { CollectibleCard } from '../CollectibleCard';
 
-describe.skip('CollectibleCard', () => {
-	// // Create a mock order that follows the Order interface
-	// const mockOrder: Order = {
-	// 	orderId: '1',
-	// 	marketplace: MarketplaceKind.sequence_marketplace_v2,
-	// 	side: OrderSide.listing,
-	// 	status: OrderStatus.active,
-	// 	chainId: 1,
-	// 	originName: 'test marketplace',
-	// 	collectionContractAddress: '0x1234567890123456789012345678901234567890',
-	// 	tokenId: '123',
-	// 	createdBy: '0x0000000000000000000000000000000000000000',
-	// 	priceAmount: '1000000',
-	// 	priceAmountFormatted: '1',
-	// 	priceAmountNet: '1000000',
-	// 	priceAmountNetFormatted: '1',
-	// 	priceCurrencyAddress: USDC_ADDRESS,
-	// 	priceDecimals: 6,
-	// 	priceUSD: 1,
-	// 	priceUSDFormatted: '1',
-	// 	quantityInitial: '1',
-	// 	quantityInitialFormatted: '1',
-	// 	quantityRemaining: '1',
-	// 	quantityRemainingFormatted: '1',
-	// 	quantityAvailable: '1',
-	// 	quantityAvailableFormatted: '1',
-	// 	quantityDecimals: 0,
-	// 	feeBps: 250,
-	// 	feeBreakdown: [],
-	// 	validFrom: new Date().toISOString(),
-	// 	validUntil: new Date(Date.now() + 86400000).toISOString(),
-	// 	blockNumber: 1,
-	// 	createdAt: new Date().toISOString(),
-	// 	updatedAt: new Date().toISOString(),
-	// };
-	// const defaultProps = {
-	// 	collectibleId: '123',
-	// 	chainId: 1,
-	// 	collectionAddress:
-	// 		'0x1234567890123456789012345678901234567890' as `0x${string}`,
-	// 	lowestListing: {
-	// 		metadata: {
-	// 			tokenId: '123',
-	// 			name: 'Test Collectible',
-	// 			description: 'Test Description',
-	// 			image: 'https://example.com/image.png',
-	// 			external_url: 'https://example.com',
-	// 			decimals: 0,
-	// 			attributes: [],
-	// 		} as TokenMetadata,
-	// 		order: mockOrder,
-	// 	},
-	// 	orderbookKind: OrderbookKind.sequence_marketplace_v2,
-	// 	collectionType: ContractType.ERC721,
-	// };
-	// it('should render loading state when cardLoading is true', () => {
-	// 	render(<CollectibleCard {...defaultProps} cardLoading={true} />);
-	// 	expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
-	// });
-	// it('should render collectible with image and metadata', async () => {
-	// 	render(<CollectibleCard {...defaultProps} />);
-	// 	// Check if name is displayed
-	// 	expect(screen.getByText('Test Collectible')).toBeInTheDocument();
-	// 	// Check price
-	// 	expect(screen.getByText(/1 USDC/)).toBeInTheDocument();
-	// 	// Check if token type is displayed
-	// 	expect(screen.getByText('ERC-721')).toBeInTheDocument();
-	// });
-	// it('should call onCollectibleClick when clicked', () => {
-	// 	const onCollectibleClick = vi.fn();
-	// 	render(
-	// 		<CollectibleCard
-	// 			{...defaultProps}
-	// 			onCollectibleClick={onCollectibleClick}
-	// 		/>,
-	// 	);
-	// 	// Click on the collectible
-	// 	const collectibleElement = screen
-	// 		.getByText('Test Collectible')
-	// 		.closest('article');
-	// 	if (collectibleElement) {
-	// 		fireEvent.click(collectibleElement);
-	// 	}
-	// 	expect(onCollectibleClick).toHaveBeenCalledWith(defaultProps.collectibleId);
-	// });
-	// it('should open external url in new tab when external link is clicked', () => {
-	// 	render(<CollectibleCard {...defaultProps} />);
-	// 	const externalLink = screen.getByRole('link');
-	// 	expect(externalLink).toHaveAttribute('href', 'https://example.com');
-	// 	expect(externalLink).toHaveAttribute('target', '_blank');
-	// 	expect(externalLink).toHaveAttribute('rel', 'noopener noreferrer');
-	// });
-	// it('should use fallback image when image load fails', async () => {
-	// 	render(<CollectibleCard {...defaultProps} />);
-	// 	const image = screen.getByAltText('Test Collectible');
-	// 	// Trigger error
-	// 	fireEvent.error(image);
-	// 	// Check if image source is changed to fallback
-	// 	expect(image).toHaveAttribute('src', expect.stringContaining('chess-tile'));
-	// });
-	// it('should show balance for ERC-1155 tokens', () => {
-	// 	const erc1155Props = {
-	// 		...defaultProps,
-	// 		collectionType: ContractType.ERC1155,
-	// 		balance: '5',
-	// 	};
-	// 	render(<CollectibleCard {...erc1155Props} />);
-	// 	expect(screen.getByText('Owned: 5')).toBeInTheDocument();
-	// });
-	// it('should call onCannotPerformAction when action cannot be performed', async () => {
-	// 	const onCannotPerformAction = vi.fn();
-	// 	render(
-	// 		<CollectibleCard
-	// 			{...defaultProps}
-	// 			onCannotPerformAction={onCannotPerformAction}
-	// 			balance="1" // Make it owned to test owner actions
-	// 		/>,
-	// 	);
-	// 	// We can't directly test this without mocking the useActionButtonLogic hook
-	// 	// Just testing the prop passes through
-	// 	expect(onCannotPerformAction).not.toHaveBeenCalled();
-	// });
+const defaultProps = {
+	collectibleId: '1',
+	chainId: 1,
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	collectible: {
+		order: mockOrder,
+		listing: { ...mockOrder, side: OrderSide.listing },
+		offer: { ...mockOrder, side: OrderSide.offer },
+		metadata: {
+			...mockTokenMetadata,
+			tokenId: mockTokenMetadata.tokenId as string,
+			assets: mockTokenMetadata.assets
+				? mockTokenMetadata.assets.map((asset) => ({
+						...asset,
+						tokenId: asset.tokenId || '',
+					}))
+				: undefined,
+		},
+	} as CollectibleOrder,
+	balance: '100',
+	balanceIsLoading: false,
+	cardLoading: false,
+	onCannotPerformAction: vi.fn(),
+	assetSrcPrefixUrl: 'https://example.com/',
+	orderbookKind: OrderbookKind.sequence_marketplace_v2,
+	collectionType: ContractType.ERC721,
+};
+
+describe('CollectibleCard', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.restoreAllMocks();
+
+		const useCurrencySpy = vi.spyOn(hooks, 'useCurrency');
+		useCurrencySpy.mockReturnValue({
+			data: TEST_CURRENCY,
+		} as ReturnType<typeof hooks.useCurrency>);
+	});
+
+	it('Renders correctly with valid props and shows proper collectible details', () => {
+		render(<CollectibleCard {...defaultProps} />);
+
+		expect(screen.getByText('Mock NFT')).toBeInTheDocument();
+		expect(screen.getByText('1 TEST')).toBeInTheDocument();
+		// there is an offer
+		expect(screen.getByTitle('Notification Bell')).toBeInTheDocument();
+		expect(screen.getByRole('img', { name: 'Mock NFT' })).toHaveAttribute(
+			'src',
+			defaultProps.assetSrcPrefixUrl + defaultProps.collectible.metadata.image,
+		);
+	});
+
+	it('Handles loading state by showing skeleton component', () => {
+		render(<CollectibleCard {...defaultProps} cardLoading={true} />);
+		expect(screen.getByTestId('collectible-card-skeleton')).toBeInTheDocument();
+	});
+
+	it('Triggers appropriate callbacks when collectible or action buttons are clicked', () => {
+		const onCollectibleClick = vi.fn();
+		const onOfferClick = vi.fn();
+
+		render(
+			<CollectibleCard
+				{...defaultProps}
+				onCollectibleClick={onCollectibleClick}
+				onOfferClick={onOfferClick}
+			/>,
+		);
+
+		const notificationBell = screen.getByRole('button', {
+			name: 'Notification Bell',
+		});
+		fireEvent.click(notificationBell);
+		expect(onOfferClick).toHaveBeenCalled();
+
+		const collectibleCard = screen.getByTestId('collectible-card');
+		fireEvent.click(collectibleCard);
+		expect(onCollectibleClick).toHaveBeenCalled();
+	});
 });