@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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

@@ -0,0 +1,179 @@
+'use client';
+
+import { Skeleton, Text } from '@0xsequence/design-system';
+import type { Address } from 'viem';
+import type { CardType } from '../../../../../../types';
+import { cn } from '../../../../../../utils';
+import {
+	ContractType,
+	type Currency,
+	type Order,
+} from '../../../../../_internal';
+import { useCurrency, useLowestListing } from '../../../../../hooks';
+import {
+	FooterName,
+	PriceDisplay,
+	SaleDetailsPill,
+	TokenTypeBalancePill,
+} from './components';
+
+type FooterProps = {
+	chainId: number;
+	collectionAddress: Address;
+	collectibleId: string;
+	name: string;
+	type?: ContractType;
+	decimals?: number;
+	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+	highestOffer?: Order;
+	balance?: string;
+	quantityInitial?: string | undefined;
+	quantityRemaining?: string | undefined;
+	unlimitedSupply?: boolean;
+	cardType: CardType;
+	salePriceAmount?: string;
+	salePriceCurrency?: Currency;
+};
+
+export const Footer = ({
+	chainId,
+	collectionAddress,
+	collectibleId,
+	name,
+	type,
+	decimals,
+	onOfferClick,
+	highestOffer,
+	balance,
+	quantityInitial,
+	quantityRemaining,
+	unlimitedSupply,
+	cardType,
+	salePriceAmount,
+	salePriceCurrency,
+}: FooterProps) => {
+	const isShop = cardType === 'shop';
+	const isMarket = cardType === 'market';
+	const isInventoryNonTradable = cardType === 'inventory-non-tradable';
+
+	const { data: lowestListing, isLoading: isLowestListingLoading } =
+		useLowestListing({
+			chainId,
+			collectionAddress,
+			tokenId: collectibleId,
+			query: {
+				enabled: isMarket, // Only fetch for market cards
+			},
+		});
+
+	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
+		chainId,
+		currencyAddress: lowestListing?.priceCurrencyAddress as Address,
+		query: {
+			enabled: isMarket && !!lowestListing?.priceCurrencyAddress, // Only fetch when we have lowest listing data
+		},
+	});
+
+	const listed =
+		!!lowestListing?.priceAmount && !!lowestListing?.priceCurrencyAddress;
+
+	// Show loading state when listing is loading, or when listing exists but currency is still loading
+	const isPriceLoading =
+		isMarket &&
+		(isLowestListingLoading ||
+			(!!lowestListing?.priceCurrencyAddress && isCurrencyLoading));
+
+	return (
+		<div className="relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4">
+			<FooterName
+				name={name}
+				isShop={isShop}
+				highestOffer={highestOffer}
+				onOfferClick={onOfferClick}
+				quantityInitial={quantityInitial}
+				quantityRemaining={quantityRemaining}
+				balance={balance}
+			/>
+
+			<div
+				className={cn(
+					'flex items-center gap-1',
+					isShop && type === ContractType.ERC721 && 'hidden',
+				)}
+			>
+				{isPriceLoading && (
+					<Skeleton size="sm" className="h-5 w-20 animate-shimmer" />
+				)}
+
+				{!isPriceLoading && listed && isMarket && lowestListing && currency && (
+					<PriceDisplay
+						amount={lowestListing.priceAmount}
+						currency={currency}
+						className="text-text-100"
+					/>
+				)}
+
+				{!isPriceLoading && !listed && isMarket && (
+					<Text className="text-left font-body font-bold text-sm text-text-50">
+						Not listed yet
+					</Text>
+				)}
+
+				{isShop &&
+					salePriceAmount &&
+					salePriceCurrency &&
+					type === ContractType.ERC1155 && (
+						<PriceDisplay
+							amount={salePriceAmount}
+							currency={salePriceCurrency}
+							className="text-text-100"
+						/>
+					)}
+			</div>
+
+			{isShop && (
+				<SaleDetailsPill
+					quantityRemaining={quantityRemaining}
+					collectionType={type as ContractType}
+					unlimitedSupply={unlimitedSupply}
+				/>
+			)}
+
+			{isShop && !salePriceAmount && <div className="h-5 w-full" />}
+
+			{(isMarket || isInventoryNonTradable) && (
+				<TokenTypeBalancePill
+					balance={balance}
+					type={type as ContractType}
+					decimals={decimals}
+				/>
+			)}
+		</div>
+	);
+};
+
+export const NonTradableInventoryFooter = ({
+	name,
+	balance,
+	decimals,
+	type,
+}: {
+	name: string;
+	balance?: string;
+	decimals?: number;
+	type: ContractType;
+}) => {
+	return (
+		<div className="relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4">
+			<FooterName name={name} />
+
+			<div className="flex items-center gap-1">
+				<Text className="text-left font-body font-bold text-sm text-text-50">
+					Not listed yet
+				</Text>
+			</div>
+
+			<TokenTypeBalancePill balance={balance} type={type} decimals={decimals} />
+		</div>
+	);
+};

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { cn, IconButton, Text } from '@0xsequence/design-system';
+import { useAccount } from 'wagmi';
+import { compareAddress } from '../../../../../../../utils/address';
+import type { Order } from '../../../../../../_internal';
+import SvgBellIcon from '../../../../../icons/BellIcon';
+
+interface FooterNameProps {
+	name: string;
+	isShop?: boolean;
+	highestOffer?: Order;
+	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+	quantityInitial?: string;
+	quantityRemaining?: string;
+	balance?: string;
+}
+
+export const FooterName = ({
+	name,
+	isShop,
+	highestOffer,
+	onOfferClick,
+	quantityInitial,
+	quantityRemaining,
+	balance,
+}: FooterNameProps) => {
+	const { address: currentUserAddress } = useAccount();
+	const displayName = (() => {
+		if (name.length > 15 && highestOffer && !isShop) {
+			return `${name.substring(0, 13)}...`;
+		}
+		if (name.length > 17 && !highestOffer && !isShop) {
+			return `${name.substring(0, 17)}...`;
+		}
+		if (name.length > 17) {
+			return `${name.substring(0, 17)}...`;
+		}
+		return name;
+	})();
+
+	return (
+		<div className="relative flex w-full items-center justify-between">
+			<Text
+				className={cn(
+					'overflow-hidden text-ellipsis text-left font-body font-bold text-sm text-text-100',
+					isShop &&
+						(quantityInitial === undefined ||
+							quantityRemaining === undefined) &&
+						'text-text-50',
+				)}
+			>
+				{displayName || 'Untitled'}
+			</Text>
+
+			{highestOffer &&
+				onOfferClick &&
+				!isShop &&
+				(() => {
+					// Check if the current user made the offer
+					const isOfferMadeBySelf =
+						currentUserAddress &&
+						highestOffer.createdBy &&
+						compareAddress(highestOffer.createdBy, currentUserAddress);
+
+					// Check if user owns the token (has balance > 0)
+					const userOwnsToken = balance && Number(balance) > 0;
+
+					// Can accept offer: didn't make the offer AND owns the token
+					const canAcceptOffer = !isOfferMadeBySelf && userOwnsToken;
+
+					// Should show disabled styling: can't accept offer
+					const shouldDisable = !canAcceptOffer;
+
+					return (
+						<IconButton
+							className={`absolute top-0 right-0 z-10 h-[22px] w-[22px] ${shouldDisable ? 'opacity-50 hover:animate-none hover:opacity-50' : 'hover:animate-bell-ring'}`}
+							size="xs"
+							variant="primary"
+							onClick={(e) => {
+								if (!canAcceptOffer) {
+									// For cases where user can't accept offer (offer maker or non-owner), allow normal wrapper behavior
+									return;
+								}
+
+								// Only stop propagation and open offer modal if user can accept the offer
+								e.stopPropagation();
+								e.preventDefault();
+								onOfferClick?.(e);
+							}}
+							onMouseEnter={(e) => {
+								if (canAcceptOffer) {
+									// Only prevent parent hover effects when user can accept offer
+									e.stopPropagation();
+								}
+							}}
+							icon={(props) => <SvgBellIcon {...props} size="xs" />}
+						/>
+					);
+				})()}
+		</div>
+	);
+};

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

@@ -0,0 +1,80 @@
+'use client';
+
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	cn,
+	Image,
+	Text,
+} from '@0xsequence/design-system';
+import type { Currency } from '../../../../../../_internal';
+import { formatPriceNumber } from '../../../utils';
+
+interface PriceDisplayProps {
+	amount: string;
+	currency: Currency;
+	showCurrencyIcon?: boolean;
+	className?: string;
+}
+
+export const formatPrice = (
+	amount: string,
+	currency: Currency,
+): React.ReactNode => {
+	const { formattedNumber, isUnderflow, isOverflow } = formatPriceNumber(
+		amount,
+		currency.decimals,
+	);
+	const isFree = amount === '0';
+
+	if (isFree) {
+		return <Text className="font-bold text-sm text-text-100">Free</Text>;
+	}
+
+	if (isUnderflow) {
+		return (
+			<div className="flex items-center">
+				<ChevronLeftIcon className="h-3 w-3 text-text-100" />
+				<Text className="font-bold text-sm text-text-100">{`${formattedNumber} ${currency.symbol}`}</Text>
+			</div>
+		);
+	}
+
+	if (isOverflow) {
+		return (
+			<div className="flex items-center">
+				<ChevronRightIcon className="h-3 w-3 text-text-100" />
+				<Text className="font-bold text-sm text-text-100">{`${formattedNumber} ${currency.symbol}`}</Text>
+			</div>
+		);
+	}
+
+	return (
+		<Text className="font-bold text-sm text-text-100">
+			{formattedNumber} {currency.symbol}
+		</Text>
+	);
+};
+
+export const PriceDisplay = ({
+	amount,
+	currency,
+	showCurrencyIcon = true,
+	className,
+}: PriceDisplayProps) => {
+	return (
+		<div className={cn('flex items-center gap-1', className)}>
+			{showCurrencyIcon && currency.imageUrl && (
+				<Image
+					alt={currency.symbol}
+					className="h-3 w-3"
+					src={currency.imageUrl}
+					onError={(e) => {
+						e.currentTarget.style.display = 'none';
+					}}
+				/>
+			)}
+			{formatPrice(amount, currency)}
+		</div>
+	);
+};

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { Text } from '@0xsequence/design-system';
+import type { ContractType } from '../../../../../../_internal';
+import { getSupplyStatusText } from '../../../utils';
+
+interface SaleDetailsPillProps {
+	quantityRemaining: string | undefined;
+	collectionType: ContractType;
+	unlimitedSupply?: boolean;
+}
+
+export const SaleDetailsPill = ({
+	quantityRemaining,
+	collectionType,
+	unlimitedSupply,
+}: SaleDetailsPillProps) => {
+	const supplyText = getSupplyStatusText({
+		quantityRemaining,
+		collectionType,
+		unlimitedSupply,
+	});
+
+	return (
+		<Text className="rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs">
+			{supplyText}
+		</Text>
+	);
+};

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

@@ -0,0 +1,30 @@
+'use client';
+
+import { Text } from '@0xsequence/design-system';
+import { formatUnits } from 'viem';
+import { ContractType } from '../../../../../../_internal';
+
+interface TokenTypeBalancePillProps {
+	balance?: string;
+	type: ContractType;
+	decimals?: number;
+}
+
+export const TokenTypeBalancePill = ({
+	balance,
+	type,
+	decimals,
+}: TokenTypeBalancePillProps) => {
+	const displayText =
+		type === ContractType.ERC1155
+			? balance
+				? `Owned: ${formatUnits(BigInt(balance), decimals ?? 0)}`
+				: 'ERC-1155'
+			: 'ERC-721';
+
+	return (
+		<Text className="rounded-lg bg-background-secondary px-2 py-1 text-left font-medium text-text-80 text-xs">
+			{displayText}
+		</Text>
+	);
+};

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

@@ -0,0 +1,4 @@
+export * from './FooterName';
+export * from './PriceDisplay';
+export * from './SaleDetailsPill';
+export * from './TokenTypeBalancePill';

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './Footer.tsx';

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

@@ -1,11 +1,12 @@
+import type { TokenMetadata as MetadataTokenMetadataType } from '@0xsequence/metadata';
 import type { Address } from 'viem';
-import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
+import type { CardType, CollectibleCardAction } from '../../../../types';
 import type {
 	CollectibleOrder,
 	ContractType,
+	TokenMetadata as MarketplaceTokenMetadataType,
 	Order,
 	OrderbookKind,
-	TokenMetadata,
 } from '../../../_internal';
 
 // Base properties shared by all collectible card types
@@ -15,14 +16,14 @@ type MarketplaceCardBaseProps = {
 	collectionAddress: Address;
 	collectionType?: ContractType;
 	assetSrcPrefixUrl?: string;
-	cardLoading?: boolean;
-	marketplaceType?: MarketplaceType;
+	cardLoading: boolean;
+	cardType?: CardType;
 };
 
 // Properties specific to Shop card
 type ShopCardSpecificProps = {
 	salesContractAddress: Address;
-	tokenMetadata: TokenMetadata;
+	tokenMetadata: MarketplaceTokenMetadataType | MetadataTokenMetadataType;
 	salePrice:
 		| {
 				amount: string;
@@ -71,22 +72,33 @@ type MarketCardSpecificProps = {
 	prioritizeOwnerActions?: boolean;
 };
 
+type NonTradableInventoryCardSpecificProps = {
+	balance: string;
+	balanceIsLoading: boolean;
+	collectibleMetadata: MarketplaceTokenMetadataType | MetadataTokenMetadataType;
+};
+
 // Complete CollectibleCardProps with all possible properties and card type
 type MarketplaceCollectibleCardProps = MarketplaceCardBaseProps &
 	Partial<MarketCardSpecificProps & ShopCardSpecificProps>;
 
 type ShopCollectibleCardProps = MarketplaceCardBaseProps &
 	ShopCardSpecificProps & {
-		marketplaceType: 'shop';
+		cardType?: 'shop';
 	};
 type MarketCollectibleCardProps = MarketplaceCardBaseProps &
 	MarketCardSpecificProps & {
-		marketplaceType?: 'market';
+		cardType?: 'market';
+	};
+type NonTradableInventoryCardProps = MarketplaceCardBaseProps &
+	NonTradableInventoryCardSpecificProps & {
+		cardType?: 'inventory-non-tradable';
 	};
 
 type CollectibleCardProps =
 	| ShopCollectibleCardProps
-	| MarketCollectibleCardProps;
+	| MarketCollectibleCardProps
+	| NonTradableInventoryCardProps;
 
 export type {
 	MarketplaceCardBaseProps,
@@ -95,5 +107,6 @@ export type {
 	MarketplaceCollectibleCardProps,
 	ShopCollectibleCardProps,
 	MarketCollectibleCardProps,
+	NonTradableInventoryCardProps,
 	CollectibleCardProps,
 };

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

@@ -1,11 +1,10 @@
 'use client';
 
-import type { Address } from 'viem';
 import { CollectibleCardAction } from '../../../../../types';
-import { useCurrency } from '../../../../hooks';
+import type { ContractType } from '../../../../_internal';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
-import { Footer } from '../Footer';
+import { Footer } from '../components/footer';
 import type { MarketCollectibleCardProps } from '../types';
 
 export function MarketCard({
@@ -27,19 +26,6 @@ export function MarketCard({
 	const collectibleMetadata = collectible?.metadata;
 	const highestOffer = collectible?.offer;
 
-	const {
-		data: lowestListingCurrency,
-		isLoading: lowestListingCurrencyLoading,
-	} = useCurrency({
-		chainId,
-		currencyAddress: collectible?.listing?.priceCurrencyAddress as Address,
-		query: {
-			enabled: !!collectible?.listing?.priceCurrencyAddress,
-		},
-	});
-
-	const isLoading = cardLoading || lowestListingCurrencyLoading;
-
 	if (!collectibleMetadata) {
 		console.error('Collectible metadata is undefined');
 		return null;
@@ -71,22 +57,24 @@ export function MarketCard({
 			collectionType={collectionType}
 			assetSrcPrefixUrl={assetSrcPrefixUrl}
 			cardLoading={cardLoading}
-			marketplaceType="market"
-			isLoading={isLoading}
+			cardType="market"
 			name={collectibleMetadata.name || ''}
 			image={collectibleMetadata.image}
 			video={collectibleMetadata.video}
 			animationUrl={collectibleMetadata.animation_url}
+			contractType={collectionType as ContractType}
+			isShop={false}
 			onClick={() => onCollectibleClick?.(collectibleId)}
 			onKeyDown={handleKeyDown}
 		>
 			<Footer
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
 				name={collectibleMetadata.name || ''}
 				type={collectionType}
 				onOfferClick={(e) => onOfferClick?.({ order: highestOffer, e })}
 				highestOffer={highestOffer}
-				lowestListingPriceAmount={collectible?.listing?.priceAmount}
-				lowestListingCurrency={lowestListingCurrency}
 				balance={balance}
 				decimals={collectibleMetadata.decimals}
 				quantityInitial={
@@ -103,11 +91,11 @@ export function MarketCard({
 							? collectible.listing.quantityRemaining
 							: undefined
 				}
-				marketplaceType="market"
+				cardType="market"
 			/>
 
 			<ActionButtonWrapper
-				show={showActionButton}
+				show={showActionButton ?? false}
 				chainId={chainId}
 				collectionAddress={collectionAddress}
 				tokenId={collectibleId}
@@ -117,7 +105,7 @@ export function MarketCard({
 				lowestListing={collectible?.listing}
 				owned={!!balance}
 				onCannotPerformAction={onCannotPerformAction}
-				marketplaceType="market"
+				cardType="market"
 				prioritizeOwnerActions={prioritizeOwnerActions}
 			/>
 		</BaseCard>

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

@@ -0,0 +1,42 @@
+'use client';
+
+import type { ContractType } from '../../../../_internal';
+import { BaseCard } from '../components/BaseCard';
+import { NonTradableInventoryFooter } from '../components/footer';
+import type { NonTradableInventoryCardProps } from '../types';
+
+export function NonTradableInventoryCard({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	collectionType,
+	assetSrcPrefixUrl,
+	cardLoading,
+	balance,
+	balanceIsLoading,
+	collectibleMetadata,
+}: NonTradableInventoryCardProps) {
+	return (
+		<BaseCard
+			collectibleId={collectibleId}
+			image={collectibleMetadata.image}
+			video={collectibleMetadata.video}
+			animationUrl={collectibleMetadata.animation_url}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectionType={collectionType}
+			assetSrcPrefixUrl={assetSrcPrefixUrl}
+			cardLoading={cardLoading || balanceIsLoading}
+			contractType={collectionType as ContractType}
+			isShop={false}
+			name={collectibleMetadata.name}
+		>
+			<NonTradableInventoryFooter
+				name={collectibleMetadata.name || ''}
+				type={collectionType as ContractType}
+				balance={balance}
+				decimals={collectibleMetadata.decimals}
+			/>
+		</BaseCard>
+	);
+}