@0xsequence/marketplace-sdk 0.4.8 → 0.5.0

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 
 import { Box, IconButton, Skeleton } from '@0xsequence/design-system';
 import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
 import type {
 	ChainId,
 	CollectibleOrder,
@@ -10,7 +9,7 @@ import type {
 	Order,
 	OrderbookKind,
 } from '../../../_internal';
-import { useCurrency, useHighestOffer } from '../../../hooks';
+import { useCurrency } from '../../../hooks';
 import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
 import { ActionButton } from '../_internals/action-button/ActionButton';
@@ -63,6 +62,23 @@ type CollectibleCardProps = {
 	onOfferClick?: ({ order }: { order?: Order }) => void;
 	balance?: string;
 	cardLoading?: boolean;
+	/**
+	 * Callback function that is called when the user attempts to perform an action
+	 * (such as buying or making an offer) that they are not permitted to do.
+	 *
+	 * This function is invoked in the following scenario:
+	 *
+	 * - When a disconnected user clicks on "Buy Now" and is prompted to connect
+	 *   their wallet. After connecting, if it is determined that the user is
+	 *   already the owner of the collectible, this callback is triggered to inform
+	 *   them that they cannot perform the action (e.g., buying their own collectible).
+	 *
+	 * @param action - The action that the user cannot perform, which can be either
+	 * CollectibleCardAction.BUY or CollectibleCardAction.OFFER.
+	 */
+	onCannotPerformAction?: (
+		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	) => void;
 };
 
 export function CollectibleCard({
@@ -76,16 +92,11 @@ export function CollectibleCard({
 	onOfferClick,
 	balance,
 	cardLoading,
+	onCannotPerformAction,
 }: CollectibleCardProps) {
-	const { address: accountAddress } = useAccount();
 	const collectibleMetadata = lowestListing?.metadata;
+	const highestOffer = lowestListing?.offer
 	const [imageLoadingError, setImageLoadingError] = useState(false);
-	const { data: highestOffer, isLoading: highestOfferLoading } =
-		useHighestOffer({
-			chainId: String(chainId),
-			collectionAddress,
-			tokenId: collectibleId,
-		});
 
 	const { data: lowestListingCurrency } = useCurrency({
 		chainId,
@@ -95,13 +106,13 @@ export function CollectibleCard({
 			enabled: !!lowestListing?.order?.priceCurrencyAddress,
 		},
 	});
-	if (highestOfferLoading || cardLoading) {
+	if (cardLoading) {
 		return <CollectibleSkeleton />;
 	}
 
 	const action = (
 		balance
-			? (highestOffer?.order && CollectibleCardAction.SELL) ||
+			? (highestOffer && CollectibleCardAction.SELL) ||
 				(!lowestListing?.order && CollectibleCardAction.LIST) ||
 				CollectibleCardAction.TRANSFER
 			: (lowestListing?.order && CollectibleCardAction.BUY) ||
@@ -118,6 +129,7 @@ export function CollectibleCard({
 			borderRadius="md"
 			overflow="hidden"
 			background="backgroundPrimary"
+			tabIndex={0}
 		>
 			<Box
 				display="flex"
@@ -134,11 +146,15 @@ export function CollectibleCard({
 				padding="0"
 				className={collectibleTileWrapper}
 			>
-				<article style={{ width: '100%' }}>
+				<article
+					style={{ width: '100%', display: 'flex', flexDirection: 'column' }}
+				>
 					{externalUrl && (
 						<IconButton
 							as="a"
 							href={externalUrl}
+							target="_blank"
+							rel="noopener noreferrer"
 							size="sm"
 							backdropFilter="blur"
 							variant="glass"
@@ -146,6 +162,7 @@ export function CollectibleCard({
 								e.stopPropagation();
 							}}
 							position="absolute"
+							zIndex="20"
 							top="2"
 							left="2"
 							icon={SvgDiamondEyeIcon}
@@ -162,15 +179,14 @@ export function CollectibleCard({
 					<Footer
 						name={name || ''}
 						type={collectionType}
-						onOfferClick={() => onOfferClick?.({ order: highestOffer?.order })}
-						highestOffer={highestOffer?.order}
+						onOfferClick={() => onOfferClick?.({ order: highestOffer })}
+						highestOffer={highestOffer}
 						lowestListingPriceAmount={lowestListing?.order?.priceAmount}
 						lowestListingCurrency={lowestListingCurrency}
 						balance={balance}
-						isAnimated={!!action}
 					/>
 
-					{accountAddress && (highestOffer || lowestListing) && (
+					{(highestOffer || lowestListing) && (
 						<Box
 							display="flex"
 							alignItems="center"
@@ -184,9 +200,10 @@ export function CollectibleCard({
 								tokenId={collectibleId}
 								orderbookKind={orderbookKind}
 								action={action}
-								highestOffer={highestOffer?.order}
+								highestOffer={highestOffer}
 								lowestListing={lowestListing?.order}
-								isOwned={!!balance}
+								owned={!!balance}
+								onCannotPerformAction={onCannotPerformAction}
 							/>
 						</Box>
 					)}

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

@@ -1,6 +1,5 @@
 import { Box, IconButton, Image, Text } from '@0xsequence/design-system';
 import { formatUnits } from 'viem';
-import { useAccount } from 'wagmi';
 import { ContractType, type Currency, type Order } from '../../../_internal';
 import SvgBellIcon from '../../icons/Bell';
 import { footer, offerBellButton } from './styles.css';
@@ -13,7 +12,6 @@ type FooterProps = {
 	lowestListingPriceAmount?: string;
 	lowestListingCurrency?: Currency;
 	balance?: string;
-	isAnimated?: boolean;
 };
 
 export const Footer = ({
@@ -24,9 +22,7 @@ export const Footer = ({
 	lowestListingPriceAmount,
 	lowestListingCurrency,
 	balance,
-	isAnimated,
 }: FooterProps) => {
-	const { address } = useAccount();
 	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
 
 	if (name.length > 15 && highestOffer) {
@@ -45,7 +41,7 @@ export const Footer = ({
 			padding="4"
 			whiteSpace="nowrap"
 			position="relative"
-			className={!!address && isAnimated ? footer.animated : footer.static}
+			className={footer}
 		>
 			<Box
 				display="flex"
@@ -60,8 +56,9 @@ export const Footer = ({
 					fontWeight="bold"
 					textAlign="left"
 					fontFamily="body"
+					visibility={name ? 'visible' : 'hidden'}
 				>
-					{name}
+					{name || 'Untitled'}
 				</Text>
 
 				{highestOffer && onOfferClick && (
@@ -82,8 +79,8 @@ export const Footer = ({
 			</Box>
 
 			<Box display="flex" alignItems="center" gap="1">
-				{listed && (
-					<Image src={lowestListingCurrency?.imageUrl} width="3" height="3" />
+				{listed && lowestListingCurrency.imageUrl && (
+					<Image src={lowestListingCurrency.imageUrl} width="3" height="3" />
 				)}
 
 				<Text

package/src/react/ui/components/collectible-card/styles.css.ts

@@ -1,19 +1,23 @@
 import { atoms } from '@0xsequence/design-system';
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 export const collectibleCard = style([
 	{
 		width: '175px',
 		border: '1px solid hsla(0, 0%, 31%, 1)',
+		':active': {
+			border: '1px solid hsla(247, 100%, 75%, 1)',
+			boxShadow: '0px 0px 0px 1px hsla(247, 100%, 75%, 1)',
+		},
+		':focus-visible': {
+			border: '1px solid hsla(247, 100%, 75%, 1)',
+			boxShadow: '0px 0px 0px 2px hsla(247, 100%, 75%, 1)',
+			outline: '4px solid hsla(254, 100%, 57%, 1)',
+			outlineOffset: '2px',
+		},
 	},
 ]);
 
-export const collectibleImage = style({
-	width: '175px',
-	height: '175px',
-	objectFit: 'cover',
-});
-
 export const collectibleTileWrapper = style({
 	padding: 0,
 	border: 'none',
@@ -24,6 +28,24 @@ export const collectibleTileWrapper = style({
 		'&:focus': {
 			outline: 'none',
 		},
+
+		[`${collectibleCard}:focus &`]: {
+			outline: '3px solid black',
+			outlineOffset: '-3px',
+			borderRadius: 10,
+		},
+	},
+});
+
+export const collectibleImage = style({
+	width: '175px',
+	height: '175px',
+	objectFit: 'cover',
+	transition: 'transform 0.2s ease-in-out',
+	selectors: {
+		[`${collectibleTileWrapper}:hover &`]: {
+			transform: 'scale(1.165)',
+		},
 	},
 });
 
@@ -32,31 +54,22 @@ export const offerBellButton = style({
 	height: '22px',
 });
 
-const footerBase = style([atoms({ background: 'backgroundPrimary' })]);
+export const footer = style([atoms({ background: 'backgroundPrimary' })]);
 
-export const footer = styleVariants({
-	animated: [
-		footerBase,
-		{
-			transition: 'transform 0.2s ease-in-out',
-			selectors: {
-				[`${collectibleTileWrapper}:hover &`]: {
-					transform: 'translateY(-30px)',
-				},
+export const actionWrapper = style([
+	atoms({
+		backdropFilter: 'blur',
+	}),
+	{
+		background: 'hsla(0, 0%, 100%, 0.1)',
+		transition: 'transform 0.2s ease-in-out',
+		position: 'absolute',
+		width: '100%',
+		bottom: -44,
+		selectors: {
+			[`${collectibleTileWrapper}:hover &`]: {
+				transform: 'translateY(-44px)',
 			},
 		},
-	],
-	static: [footerBase],
-});
-
-export const actionWrapper = style({
-	transition: 'transform 0.2s ease-in-out',
-	position: 'absolute',
-	width: '100%',
-	bottom: -36,
-	selectors: {
-		[`${collectibleTileWrapper}:hover &`]: {
-			transform: 'translateY(-36px)',
-		},
 	},
-});
+]);

package/src/react/ui/icons/CartIcon.tsx

@@ -0,0 +1,46 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="cart-title"
+	>
+		<title id="cart-title">Cart Icon</title>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M2.5 3.46836C2.5 3.20969 2.72366 3 2.99955 3H5.16925C5.88938 3 6.5077 3.48022 6.64172 4.14359L8.33188 12.5093C8.37655 12.7304 8.58266 12.8905 8.8227 12.8905H16.987C17.2629 12.8905 17.4866 13.1002 17.4866 13.3589C17.4866 13.6175 17.2629 13.8272 16.987 13.8272H8.8227C8.10257 13.8272 7.48425 13.347 7.35023 12.6836L5.66007 4.31793C5.6154 4.0968 5.40929 3.93673 5.16925 3.93673H2.99955C2.72366 3.93673 2.5 3.72704 2.5 3.46836Z"
+			fill="white"
+		/>
+		<path
+			d="M18.0003 5.34182H6.40946L7.49564 10.8234H17.0736C17.3133 10.8234 17.5193 10.6637 17.5643 10.443L18.491 5.89813C18.5498 5.60942 18.3138 5.34182 18.0003 5.34182Z"
+			fill="white"
+		/>
+		<path
+			d="M10.0889 15.8559C10.0889 16.4878 9.54259 17 8.86866 17C8.19473 17 7.64841 16.4878 7.64841 15.8559C7.64841 15.2241 8.19473 14.7119 8.86866 14.7119C9.54259 14.7119 10.0889 15.2241 10.0889 15.8559Z"
+			fill="white"
+		/>
+		<path
+			d="M16.6268 15.8559C16.6268 16.4878 16.0804 17 15.4065 17C14.7326 17 14.1863 16.4878 14.1863 15.8559C14.1863 15.2241 14.7326 14.7119 15.4065 14.7119C16.0804 14.7119 16.6268 15.2241 16.6268 15.8559Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgCartIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgCartIcon;

package/src/react/ui/modals/BuyModal/Modal.tsx

@@ -24,7 +24,6 @@ const BuyModalContent = () => {
 		buyModal$.state.order.collectionContractAddress,
 	) as Hex;
 	const collectibleId = use$(buyModal$.state.order.tokenId);
-	const modalId = use$(buyModal$.state.modalId);
 	const callbacks = use$(buyModal$.callbacks);
 	const order = use$(buyModal$.state.order);
 	const isOpen = use$(buyModal$.isOpen);
@@ -94,7 +93,6 @@ const BuyModalContent = () => {
 
 	return collection.type === ContractType.ERC721 ? (
 		<CheckoutModal
-			key={modalId}
 			buy={buyAction}
 			collectable={collectable as TokenMetadata}
 			order={order}

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

@@ -0,0 +1,253 @@
+import '@testing-library/jest-dom/vitest';
+import {
+	render,
+	screen,
+	cleanup,
+	waitFor,
+} from '../../../../_internal/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { BuyModal } from '../Modal';
+import { buyModal$ } from '../store';
+import { useLoadData } from '../hooks/useLoadData';
+import { useBuyCollectable } from '../hooks/useBuyCollectable';
+import type { Mock } from 'vitest';
+import type { Order } from '../../../../_internal';
+import { MarketplaceKind } from '../../../../_internal';
+import { ContractType } from '../../../../_internal';
+
+const mockOrder = {
+	orderId: '1',
+	priceAmount: '1000000000000000000',
+	priceCurrencyAddress: '0x0',
+	quantityRemaining: '1',
+	createdAt: new Date().toISOString(),
+	marketplace: MarketplaceKind.sequence_marketplace_v2,
+} as Order;
+
+vi.mock('../hooks/useLoadData', () => ({
+	useLoadData: vi.fn(),
+}));
+
+vi.mock('../hooks/useBuyCollectable', () => ({
+	useBuyCollectable: vi.fn(),
+}));
+
+describe('BuyModal', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		(useLoadData as Mock).mockReturnValue({
+			collection: null,
+			collectable: null,
+			checkoutOptions: null,
+			isLoading: false,
+			isError: false,
+		});
+
+		(useBuyCollectable as Mock).mockReturnValue({
+			buy: vi.fn(),
+			isLoading: false,
+			isError: false,
+		});
+
+		buyModal$.close();
+
+		cleanup();
+	});
+
+	it('should not render when isOpen is false', () => {
+		render(<BuyModal />);
+
+		expect(screen.queryByText('Loading Sequence Pay')).not.toBeInTheDocument();
+		expect(screen.queryByText('Checkout')).not.toBeInTheDocument();
+		expect(screen.queryByText('Select Quantity')).not.toBeInTheDocument();
+	});
+
+	it('should render error modal when there is an error', async () => {
+		const mockOrderBasic = {
+			...mockOrder,
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			collectionContractAddress: '0x123',
+			tokenId: '1',
+			quantityRemaining: '1',
+			priceCurrencyAddress: '0x0',
+			chainId: 1,
+			priceAmount: '1000000000000000000',
+		};
+
+		// Test loading error
+		(useLoadData as Mock).mockReturnValue({
+			collection: { type: ContractType.ERC721 },
+			collectable: { decimals: 0 },
+			checkoutOptions: { someOption: true },
+			isLoading: false,
+			isError: true,
+		});
+
+		buyModal$.open({
+			order: mockOrderBasic,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		render(<BuyModal />);
+
+		// Should show error modal
+		await waitFor(() => {
+			expect(screen.getByTestId('error-modal')).toBeInTheDocument();
+			expect(
+				screen.getByText('Error loading item details'),
+			).toBeInTheDocument();
+		});
+
+		// Cleanup
+		cleanup();
+
+		// Test buy error
+		(useLoadData as Mock).mockReturnValue({
+			collection: { type: ContractType.ERC721 },
+			collectable: { decimals: 0 },
+			checkoutOptions: { someOption: true },
+			isLoading: false,
+			isError: false,
+		});
+
+		(useBuyCollectable as Mock).mockReturnValue({
+			buy: vi.fn(),
+			isLoading: false,
+			isError: true,
+			status: 'error',
+		});
+
+		buyModal$.open({
+			order: mockOrderBasic,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		render(<BuyModal />);
+
+		// Should show error modal for buy error too
+		expect(screen.getByText('Error')).toBeInTheDocument();
+	});
+
+	it('should render ERC1155QuantityModal when contract type is ERC1155', async () => {
+		const mockOrderERC1155 = {
+			...mockOrder,
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			collectionContractAddress: '0x123',
+			tokenId: '1',
+			quantityRemaining: '10',
+			priceCurrencyAddress: '0x0',
+			chainId: 1,
+			quantityDecimals: 0,
+			priceAmount: '1000000000000000000',
+		};
+
+		(useLoadData as Mock).mockReturnValue({
+			collection: { type: ContractType.ERC1155 },
+			collectable: { decimals: 0 },
+			checkoutOptions: { someOption: true },
+			isLoading: false,
+			isError: false,
+		});
+
+		(useBuyCollectable as Mock).mockReturnValue({
+			buy: vi.fn(),
+			isLoading: false,
+			isError: false,
+		});
+
+		buyModal$.open({
+			order: mockOrderERC1155,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		// Initialize quantity state
+		buyModal$.state.quantity.set('1');
+		buyModal$.state.checkoutModalLoaded.set(false);
+		buyModal$.state.checkoutModalIsLoading.set(false);
+
+		render(<BuyModal />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+		});
+	});
+
+	it('should not render ERC1155QuantityModal when contract type is ERC721', async () => {
+		const mockBuy = vi.fn();
+		const mockOrderERC721 = {
+			...mockOrder,
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+			collectionContractAddress: '0x123',
+			tokenId: '1',
+			quantityRemaining: '1',
+			priceCurrencyAddress: '0x0',
+			chainId: 1,
+			priceAmount: '1000000000000000000',
+		};
+
+		// First, mock loading state
+		(useLoadData as Mock).mockReturnValue({
+			collection: null,
+			collectable: null,
+			checkoutOptions: null,
+			isLoading: true,
+			isError: false,
+		});
+
+		(useBuyCollectable as Mock).mockReturnValue({
+			buy: mockBuy,
+			isLoading: false,
+			isError: false,
+			status: 'ready',
+		});
+
+		buyModal$.open({
+			order: mockOrderERC721,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		const { rerender } = render(<BuyModal />);
+
+		// Verify loading modal is shown
+		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+
+		// Then update the mock to simulate data loaded
+		(useLoadData as Mock).mockReturnValue({
+			collection: { type: ContractType.ERC721 },
+			collectable: { decimals: 0 },
+			checkoutOptions: { someOption: true },
+			isLoading: false,
+			isError: false,
+		});
+
+		// Force a re-render with the new mock values
+		rerender(<BuyModal />);
+
+		// Wait for loading to complete and verify the rest of the flow
+		await waitFor(() => {
+			expect(mockBuy).toHaveBeenCalledWith({
+				orderId: mockOrderERC721.orderId,
+				collectableDecimals: 0,
+				quantity: '1',
+				marketplace: mockOrderERC721.marketplace,
+				checkoutOptions: { someOption: true },
+			});
+		});
+
+		expect(screen.queryByText('Loading Sequence Pay')).not.toBeInTheDocument();
+		expect(screen.queryByText('Select Quantity')).not.toBeInTheDocument();
+	});
+});