@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

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

@@ -3,10 +3,10 @@
 import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
+	cn,
 	IconButton,
 	Image,
 	Text,
-	cn,
 } from '@0xsequence/design-system';
 import { formatUnits } from 'viem';
 import type { MarketplaceType } from '../../../../types';
@@ -19,6 +19,11 @@ const formatPrice = (amount: string, currency: Currency): React.ReactNode => {
 		amount,
 		currency.decimals,
 	);
+	const isFree = amount === '0';
+
+	if (isFree) {
+		return <Text>Free</Text>;
+	}
 
 	if (isUnderflow) {
 		return (
@@ -58,6 +63,7 @@ type FooterProps = {
 	balance?: string;
 	quantityInitial: string | undefined;
 	quantityRemaining: string | undefined;
+	unlimitedSupply?: boolean;
 	marketplaceType: MarketplaceType;
 	salePriceAmount?: string;
 	salePriceCurrency?: Currency;
@@ -74,6 +80,7 @@ export const Footer = ({
 	balance,
 	quantityInitial,
 	quantityRemaining,
+	unlimitedSupply,
 	marketplaceType,
 	salePriceAmount,
 	salePriceCurrency,
@@ -166,9 +173,9 @@ export const Footer = ({
 
 			{isShop && (
 				<SaleDetailsPill
-					quantityInitial={quantityInitial}
 					quantityRemaining={quantityRemaining}
 					collectionType={type as ContractType}
+					unlimitedSupply={unlimitedSupply}
 				/>
 			)}
 
@@ -209,18 +216,18 @@ const TokenTypeBalancePill = ({
 };
 
 const SaleDetailsPill = ({
-	quantityInitial,
 	quantityRemaining,
 	collectionType,
+	unlimitedSupply,
 }: {
-	quantityInitial: string | undefined;
 	quantityRemaining: string | undefined;
 	collectionType: ContractType;
+	unlimitedSupply?: boolean;
 }) => {
 	const supplyText = getSupplyStatusText({
-		quantityInitial,
 		quantityRemaining,
 		collectionType,
+		unlimitedSupply,
 	});
 
 	return (

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

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type {
 	CollectibleCardAction,
 	MarketplaceType,
@@ -11,7 +11,7 @@ import { ActionButton } from '../../_internals/action-button/ActionButton';
 interface ActionButtonWrapperProps {
 	show: boolean;
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	tokenId: string;
 	orderbookKind?: OrderbookKind;
 	action: CollectibleCardAction;
@@ -22,14 +22,15 @@ interface ActionButtonWrapperProps {
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
 	marketplaceType: MarketplaceType;
-	salesContractAddress?: Hex;
+	salesContractAddress?: Address;
 	prioritizeOwnerActions?: boolean;
 	salePrice?: {
 		amount: string;
-		currencyAddress: Hex;
+		currencyAddress: Address;
 	};
 	quantityDecimals?: number;
 	quantityRemaining?: number;
+	unlimitedSupply?: boolean;
 }
 
 export function ActionButtonWrapper({
@@ -49,6 +50,7 @@ export function ActionButtonWrapper({
 	salePrice,
 	quantityDecimals,
 	quantityRemaining,
+	unlimitedSupply,
 }: ActionButtonWrapperProps) {
 	if (!show) return null;
 
@@ -70,6 +72,7 @@ export function ActionButtonWrapper({
 				salePrice={salePrice}
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 			/>
 		</div>
 	);

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

@@ -33,11 +33,14 @@ export function BaseCard({
 	}
 
 	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: div used as interactive card with proper role and keyboard support
 		<div
 			data-testid="collectible-card"
 			className="w-card-width min-w-card-min-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={onClick}
 			onKeyDown={onKeyDown}
+			role={onClick ? 'button' : undefined}
+			tabIndex={onClick ? 0 : undefined}
 		>
 			<div className="group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]">
 				<article className="w-full rounded-xl">

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

@@ -1,3 +1,3 @@
+export * from './CollectibleCard';
 export * from './types';
 export * from './utils';
-export * from './CollectibleCard';

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

@@ -1,15 +1,18 @@
-import type { Address, Hex } from 'viem';
+import type { Address } from 'viem';
 import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
-import type { ContractType, TokenMetadata } from '../../../_internal';
-import type { CollectibleOrder } from '../../../_internal';
-import type { Order } from '../../../_internal';
-import type { OrderbookKind } from '../../../_internal';
+import type {
+	CollectibleOrder,
+	ContractType,
+	Order,
+	OrderbookKind,
+	TokenMetadata,
+} from '../../../_internal';
 
 // Base properties shared by all collectible card types
 type MarketplaceCardBaseProps = {
 	collectibleId: string;
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	collectionType?: ContractType;
 	assetSrcPrefixUrl?: string;
 	cardLoading?: boolean;
@@ -18,7 +21,7 @@ type MarketplaceCardBaseProps = {
 
 // Properties specific to Shop card
 type ShopCardSpecificProps = {
-	salesContractAddress: Hex;
+	salesContractAddress: Address;
 	tokenMetadata: TokenMetadata;
 	salePrice:
 		| {
@@ -31,6 +34,7 @@ type ShopCardSpecificProps = {
 	quantityDecimals: number | undefined;
 	quantityInitial: string | undefined;
 	quantityRemaining: string | undefined;
+	unlimitedSupply?: boolean; // it's useful for 1155 tokens
 };
 
 // Properties specific to marketplace and inventory cards

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

@@ -1,18 +1,15 @@
 import { ContractType } from '../../../../_internal';
 
 export const getSupplyStatusText = ({
-	quantityInitial,
 	quantityRemaining,
 	collectionType,
+	unlimitedSupply,
 }: {
-	quantityInitial: string | undefined;
 	quantityRemaining: string | undefined;
 	collectionType: ContractType;
+	unlimitedSupply?: boolean;
 }): string => {
-	const hasUnlimitedSupplyCap =
-		quantityInitial === Number.POSITIVE_INFINITY.toString();
-
-	if (hasUnlimitedSupplyCap) {
+	if (unlimitedSupply) {
 		return 'Unlimited Supply';
 	}
 
@@ -25,7 +22,7 @@ export const getSupplyStatusText = ({
 
 	if (
 		collectionType === ContractType.ERC1155 &&
-		!hasUnlimitedSupplyCap &&
+		!unlimitedSupply &&
 		quantityRemaining === '0'
 	) {
 		return 'Out of stock';

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

@@ -1,10 +1,11 @@
 'use client';
 
+import type { Address } from 'viem';
 import { CollectibleCardAction } from '../../../../../types';
 import { useCurrency } from '../../../../hooks';
-import { Footer } from '../Footer';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
+import { Footer } from '../Footer';
 import type { MarketCollectibleCardProps } from '../types';
 
 export function MarketCard({
@@ -31,7 +32,7 @@ export function MarketCard({
 		isLoading: lowestListingCurrencyLoading,
 	} = useCurrency({
 		chainId,
-		currencyAddress: collectible?.listing?.priceCurrencyAddress,
+		currencyAddress: collectible?.listing?.priceCurrencyAddress as Address,
 		query: {
 			enabled: !!collectible?.listing?.priceCurrencyAddress,
 		},

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

@@ -3,9 +3,9 @@
 import { CollectibleCardAction } from '../../../../../types';
 import { ContractType } from '../../../../_internal';
 import { useCurrency } from '../../../../hooks';
-import { Footer } from '../Footer';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
+import { Footer } from '../Footer';
 import type { ShopCollectibleCardProps } from '../types';
 
 export function ShopCard({
@@ -22,6 +22,7 @@ export function ShopCard({
 	quantityDecimals,
 	quantityInitial,
 	quantityRemaining,
+	unlimitedSupply,
 }: ShopCollectibleCardProps) {
 	const { data: saleCurrency, isLoading: saleCurrencyLoading } = useCurrency({
 		chainId,
@@ -47,14 +48,12 @@ export function ShopCard({
 	const showActionButton =
 		salesContractAddress &&
 		collectionType === ContractType.ERC1155 &&
-		quantityRemaining !== undefined;
+		(unlimitedSupply ||
+			(quantityRemaining !== undefined && Number(quantityRemaining) > 0));
 
 	const action = CollectibleCardAction.BUY;
 
-	const mediaClassName =
-		collectionType === ContractType.ERC721 && !quantityRemaining
-			? 'opacity-50'
-			: 'opacity-100';
+	const mediaClassName = !quantityRemaining ? 'opacity-50' : 'opacity-100';
 
 	return (
 		<BaseCard
@@ -78,6 +77,7 @@ export function ShopCard({
 				decimals={tokenMetadata.decimals}
 				quantityInitial={quantityInitial}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				marketplaceType={marketplaceType}
 				salePriceAmount={salePrice?.amount}
 				salePriceCurrency={saleCurrency}
@@ -99,6 +99,7 @@ export function ShopCard({
 						? Number(quantityRemaining)
 						: undefined
 				}
+				unlimitedSupply={unlimitedSupply}
 			/>
 		</BaseCard>
 	);

package/src/react/ui/components/marketplace-logos/marketplace-logos.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+	AlienSwapLogo,
+	AquaXyzLogo,
+	AuraLogo,
+	BlurLogo,
+	CoinbaseLogo,
+	ElementLogo,
+	FoundationLogo,
+	LooksRareLogo,
+	MagicEdenLogo,
+	ManifoldLogo,
+	MintifyLogo,
+	NftxLogo,
+	OkxLogo,
+	OpenSeaLogo,
+	RaribleLogo,
+	SequenceLogo,
+	SudoSwapLogo,
+	SuperRareLogo,
+	X2y2Logo,
+	ZoraLogo,
+} from './marketplace-logos';
+
+const meta: Meta<typeof OpenSeaLogo> = {
+	title: 'Components/Marketplace Logos',
+	component: OpenSeaLogo,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component: `
+Marketplace logo components that lazy-load marketplace brand images. Each logo is optimized for performance with lazy loading and proper fallbacks.
+				`,
+			},
+		},
+	},
+	argTypes: {
+		width: {
+			control: 'number',
+			description: 'Logo width',
+		},
+		height: {
+			control: 'number',
+			description: 'Logo height',
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ padding: '1rem' }}>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof OpenSeaLogo>;
+
+export const OpenSea: Story = {
+	args: {
+		width: 64,
+		height: 64,
+	},
+};
+
+export const Sequence: Story = {
+	render: (args) => <SequenceLogo {...args} />,
+	args: {
+		width: 64,
+		height: 64,
+	},
+};
+
+export const Blur: Story = {
+	render: (args) => <BlurLogo {...args} />,
+	args: {
+		width: 64,
+		height: 64,
+	},
+};
+
+export const MagicEden: Story = {
+	render: (args) => <MagicEdenLogo {...args} />,
+	args: {
+		width: 64,
+		height: 64,
+	},
+};
+
+export const LooksRare: Story = {
+	render: (args) => <LooksRareLogo {...args} />,
+	args: {
+		width: 64,
+		height: 64,
+	},
+};
+
+export const SmallSize: Story = {
+	args: {
+		width: 32,
+		height: 32,
+	},
+};
+
+export const LargeSize: Story = {
+	args: {
+		width: 128,
+		height: 128,
+	},
+};
+
+// Showcase all marketplace logos
+export const AllMarketplaceLogos: Story = {
+	render: () => (
+		<div className="grid grid-cols-5 gap-4 p-4">
+			<div className="flex flex-col items-center gap-2">
+				<AlienSwapLogo width={48} height={48} />
+				<span className="text-xs">AlienSwap</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<AquaXyzLogo width={48} height={48} />
+				<span className="text-xs">AquaXyz</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<AuraLogo width={48} height={48} />
+				<span className="text-xs">Aura</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<BlurLogo width={48} height={48} />
+				<span className="text-xs">Blur</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<CoinbaseLogo width={48} height={48} />
+				<span className="text-xs">Coinbase</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<ElementLogo width={48} height={48} />
+				<span className="text-xs">Element</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<FoundationLogo width={48} height={48} />
+				<span className="text-xs">Foundation</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<LooksRareLogo width={48} height={48} />
+				<span className="text-xs">LooksRare</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<MagicEdenLogo width={48} height={48} />
+				<span className="text-xs">MagicEden</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<ManifoldLogo width={48} height={48} />
+				<span className="text-xs">Manifold</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<MintifyLogo width={48} height={48} />
+				<span className="text-xs">Mintify</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<NftxLogo width={48} height={48} />
+				<span className="text-xs">NFTX</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<OkxLogo width={48} height={48} />
+				<span className="text-xs">OKX</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<OpenSeaLogo width={48} height={48} />
+				<span className="text-xs">OpenSea</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<RaribleLogo width={48} height={48} />
+				<span className="text-xs">Rarible</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<SequenceLogo width={48} height={48} />
+				<span className="text-xs">Sequence</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<SudoSwapLogo width={48} height={48} />
+				<span className="text-xs">SudoSwap</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<SuperRareLogo width={48} height={48} />
+				<span className="text-xs">SuperRare</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<X2y2Logo width={48} height={48} />
+				<span className="text-xs">X2Y2</span>
+			</div>
+			<div className="flex flex-col items-center gap-2">
+				<ZoraLogo width={48} height={48} />
+				<span className="text-xs">Zora</span>
+			</div>
+		</div>
+	),
+};

package/src/react/ui/components/marketplace-logos/marketplace-logos.tsx

@@ -1,5 +1,5 @@
 import { Image } from '@0xsequence/design-system';
-import { type ComponentProps, Suspense, lazy } from 'react';
+import { type ComponentProps, lazy, Suspense } from 'react';
 
 /* @__PURE__ */
 const createMarketplaceLogo = (