@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -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

@@ -1,5 +1,6 @@
 'use client';
 
+import { cn } from '@0xsequence/design-system';
 import { Media } from '../../media/Media';
 import { MarketplaceCollectibleCardSkeleton } from '../CollectibleCardSkeleton';
 import type { MarketplaceCardBaseProps } from '../types';
@@ -12,8 +13,8 @@ export interface BaseCardProps extends MarketplaceCardBaseProps {
 	animationUrl?: string;
 	onClick?: () => void;
 	onKeyDown?: (e: React.KeyboardEvent) => void;
-	className?: string;
 	children: React.ReactNode;
+	mediaClassName?: string;
 }
 
 export function BaseCard({
@@ -24,9 +25,9 @@ export function BaseCard({
 	animationUrl,
 	onClick,
 	onKeyDown,
-	className,
 	assetSrcPrefixUrl,
 	children,
+	mediaClassName,
 }: BaseCardProps) {
 	if (isLoading) {
 		return <MarketplaceCollectibleCardSkeleton />;
@@ -48,7 +49,7 @@ export function BaseCard({
 						name={name || ''}
 						assets={[image, video, animationUrl]}
 						assetSrcPrefixUrl={assetSrcPrefixUrl}
-						className={className}
+						mediaClassname={cn('object-contain', mediaClassName)}
 					/>
 					{children}
 				</article>

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

@@ -1,18 +1,19 @@
-import type { Address, Hex } from 'viem';
+import type { TokenMetadata as MetadataTokenMetadataType } from '@0xsequence/metadata';
+import type { Address } from 'viem';
 import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
 import type {
 	CollectibleOrder,
 	ContractType,
+	TokenMetadata as MarketplaceTokenMetadataType,
 	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;
@@ -21,8 +22,8 @@ type MarketplaceCardBaseProps = {
 
 // Properties specific to Shop card
 type ShopCardSpecificProps = {
-	salesContractAddress: Hex;
-	tokenMetadata: TokenMetadata;
+	salesContractAddress: Address;
+	tokenMetadata: MarketplaceTokenMetadataType | MetadataTokenMetadataType;
 	salePrice:
 		| {
 				amount: string;
@@ -34,6 +35,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

@@ -2,7 +2,7 @@
 
 import type { Address } from 'viem';
 import { CollectibleCardAction } from '../../../../../types';
-import { useCurrency } from '../../../../hooks';
+import { useCurrency } from '../../../../hooks/data/market/useCurrency';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
 import { Footer } from '../Footer';

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

@@ -2,7 +2,7 @@
 
 import { CollectibleCardAction } from '../../../../../types';
 import { ContractType } from '../../../../_internal';
-import { useCurrency } from '../../../../hooks';
+import { useCurrency } from '../../../../hooks/data/market/useCurrency';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
 import { Footer } from '../Footer';
@@ -22,6 +22,7 @@ export function ShopCard({
 	quantityDecimals,
 	quantityInitial,
 	quantityRemaining,
+	unlimitedSupply,
 }: ShopCollectibleCardProps) {
 	const { data: saleCurrency, isLoading: saleCurrencyLoading } = useCurrency({
 		chainId,
@@ -47,11 +48,15 @@ export function ShopCard({
 	const showActionButton =
 		salesContractAddress &&
 		collectionType === ContractType.ERC1155 &&
-		quantityRemaining !== undefined;
+		(unlimitedSupply ||
+			(quantityRemaining !== undefined && Number(quantityRemaining) > 0));
 
 	const action = CollectibleCardAction.BUY;
 
-	const mediaClassName = !quantityRemaining ? 'opacity-50' : 'opacity-100';
+	const mediaClassName =
+		quantityRemaining === '0' || quantityRemaining === undefined
+			? 'opacity-50'
+			: 'opacity-100';
 
 	return (
 		<BaseCard
@@ -67,7 +72,7 @@ export function ShopCard({
 			image={tokenMetadata.image}
 			video={tokenMetadata.video}
 			animationUrl={tokenMetadata.animation_url}
-			className={mediaClassName}
+			mediaClassName={mediaClassName}
 		>
 			<Footer
 				name={tokenMetadata.name || ''}
@@ -75,6 +80,7 @@ export function ShopCard({
 				decimals={tokenMetadata.decimals}
 				quantityInitial={quantityInitial}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				marketplaceType={marketplaceType}
 				salePriceAmount={salePrice?.amount}
 				salePriceCurrency={saleCurrency}
@@ -96,6 +102,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>
+	),
+};