@0xsequence/marketplace-sdk 0.9.0 → 0.10.0

package/src/react/ui/components/_internals/pill/Pill.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Pill from './Pill';
+
+const meta: Meta<typeof Pill> = {
+	title: 'Internals/Pill',
+	component: Pill,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component: `
+The Pill component displays text in a rounded, styled container. Commonly used for tags, labels, and status indicators.
+				`,
+			},
+		},
+	},
+	argTypes: {
+		text: {
+			control: 'text',
+			description: 'The text content to display inside the pill',
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ padding: '1rem' }}>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof Pill>;
+
+export const Default: Story = {
+	args: {
+		text: 'Default Pill',
+	},
+};
+
+export const Short: Story = {
+	args: {
+		text: 'Tag',
+	},
+};
+
+export const Long: Story = {
+	args: {
+		text: 'This is a longer pill text',
+	},
+};
+
+export const WithNumbers: Story = {
+	args: {
+		text: '123',
+	},
+};
+
+export const Status: Story = {
+	args: {
+		text: 'Active',
+	},
+};
+
+export const WithEmoji: Story = {
+	args: {
+		text: '🎮 Gaming',
+	},
+};
+
+// Showcase multiple pills
+export const PillShowcase: Story = {
+	render: () => (
+		<div className="flex flex-wrap gap-2">
+			<Pill text="Short" />
+			<Pill text="Medium Length" />
+			<Pill text="Active" />
+			<Pill text="123" />
+			<Pill text="🎮 Gaming" />
+			<Pill text="Web3" />
+		</div>
+	),
+};

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/types.ts

@@ -1,4 +1,4 @@
-import type { Address, Hex } from 'viem';
+import type { Address } from 'viem';
 import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
 import type {
 	CollectibleOrder,
@@ -12,7 +12,7 @@ import type {
 type MarketplaceCardBaseProps = {
 	collectibleId: string;
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	collectionType?: ContractType;
 	assetSrcPrefixUrl?: string;
 	cardLoading?: boolean;
@@ -21,7 +21,7 @@ type MarketplaceCardBaseProps = {
 
 // Properties specific to Shop card
 type ShopCardSpecificProps = {
-	salesContractAddress: Hex;
+	salesContractAddress: Address;
 	tokenMetadata: TokenMetadata;
 	salePrice:
 		| {
@@ -34,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/ShopCard.tsx

@@ -22,6 +22,7 @@ export function ShopCard({
 	quantityDecimals,
 	quantityInitial,
 	quantityRemaining,
+	unlimitedSupply,
 }: ShopCollectibleCardProps) {
 	const { data: saleCurrency, isLoading: saleCurrencyLoading } = useCurrency({
 		chainId,
@@ -47,7 +48,8 @@ export function ShopCard({
 	const showActionButton =
 		salesContractAddress &&
 		collectionType === ContractType.ERC1155 &&
-		quantityRemaining !== undefined;
+		(unlimitedSupply ||
+			(quantityRemaining !== undefined && Number(quantityRemaining) > 0));
 
 	const action = CollectibleCardAction.BUY;
 
@@ -75,6 +77,7 @@ export function ShopCard({
 				decimals={tokenMetadata.decimals}
 				quantityInitial={quantityInitial}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				marketplaceType={marketplaceType}
 				salePriceAmount={salePrice?.amount}
 				salePriceCurrency={saleCurrency}
@@ -96,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>
+	),
+};