@0xsequence/marketplace-sdk 0.2.0 → 0.3.0

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { Button } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import type { Hex } from 'viem';
+import { useAccount } from 'wagmi';
+import {
+	useBalanceOfCollectible,
+	useHighestOffer,
+	useLowestListing,
+} from '../../../../hooks';
+import { useCreateListingModal } from '../../../modals/CreateListingModal';
+import { useMakeOfferModal } from '../../../modals/MakeOfferModal';
+import { useSellModal } from '../../../modals/SellModal';
+import { useTransferModal } from '../../../modals/TransferModal';
+
+type ActionButtonProps = {
+	chainId: string;
+	collectionAddress: string;
+	tokenId: string;
+	isTransfer?: boolean;
+};
+
+export const ActionButton = observer(function AddToCartButton({
+	collectionAddress,
+	chainId,
+	tokenId,
+	isTransfer,
+}: ActionButtonProps) {
+	const { address: accountAddress } = useAccount();
+	//TODO: this should not call all of these endpoints on every card
+	const { data: balance, isLoading: balanceLoading } = useBalanceOfCollectible({
+		chainId,
+		collectionAddress,
+		collectableId: tokenId,
+		// biome-ignore lint/style/noNonNullAssertion: <explanation>
+		userAddress: accountAddress!,
+	});
+	const { data: highestOffer, isLoading: highestOfferLoading } =
+		useHighestOffer({
+			collectionAddress: collectionAddress as Hex,
+			chainId: String(chainId),
+			tokenId: tokenId,
+		});
+	const { data: lowestListing, isLoading: lowestListingLoading } =
+		useLowestListing({
+			collectionAddress: collectionAddress as Hex,
+			chainId: String(chainId),
+			tokenId: tokenId,
+		});
+	const collectibleOwned = balance?.balance ?? 0;
+
+	const { show: showCreateListingModal } = useCreateListingModal();
+	const { show: showMakeOfferModal } = useMakeOfferModal();
+	const { show: showSellModal } = useSellModal();
+	const { show: showTransferModal } = useTransferModal();
+
+	if (
+		balanceLoading ||
+		highestOfferLoading ||
+		lowestListingLoading ||
+		!accountAddress
+	) {
+		return null;
+	}
+
+	if (isTransfer && collectibleOwned) {
+		return (
+			<ActionButtonBody
+				label="Transfer"
+				onClick={() =>
+					showTransferModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						tokenId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	if (!collectibleOwned) {
+		return (
+			<ActionButtonBody
+				label="Make an offer"
+				onClick={() =>
+					showMakeOfferModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						collectibleId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	if (!collectibleOwned && lowestListing?.order) {
+		return (
+			<ActionButtonBody
+				label="Add to cart"
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				onClick={() => {}}
+			/>
+		);
+	}
+
+	if (collectibleOwned && !lowestListing?.order) {
+		return (
+			<ActionButtonBody
+				label="Create listing"
+				onClick={() =>
+					showCreateListingModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						collectibleId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	if (collectibleOwned && highestOffer?.order) {
+		return (
+			<ActionButtonBody
+				label="Sell"
+				onClick={() =>
+					showSellModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						tokenId: tokenId,
+						// biome-ignore lint/style/noNonNullAssertion: <explanation>
+						order: highestOffer.order!,
+					})
+				}
+			/>
+		);
+	}
+
+	return null;
+});
+
+type ActionButtonBodyProps = {
+	label: string;
+	onClick: () => void;
+};
+
+function ActionButtonBody({ label, onClick }: ActionButtonBodyProps) {
+	return (
+		<Button
+			variant="primary"
+			label={label}
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onClick();
+			}}
+			// leftIcon={leftIcon}
+			size="xs"
+			shape="square"
+			width="full"
+		/>
+	);
+}

package/src/react/ui/components/_internals/custom-network-image/CustomNetworkImage.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+import {
+	Box,
+	NetworkImage as OriginalNetworkImage,
+} from '@0xsequence/design-system';
+import { customNetworkImageRoot, originalNetworkImage } from './styles.css';
+
+type CustomSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface CustomNetworkImageProps
+	extends Omit<React.ComponentProps<typeof OriginalNetworkImage>, 'size'> {
+	size: CustomSize;
+}
+
+const CustomNetworkImage: React.FC<CustomNetworkImageProps> = ({
+	size,
+	...props
+}) => {
+	return (
+		<Box className={customNetworkImageRoot({ size })}>
+			<OriginalNetworkImage {...props} className={originalNetworkImage} />
+		</Box>
+	);
+};
+
+export default CustomNetworkImage;

package/src/react/ui/components/_internals/custom-network-image/styles.css.ts

@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const customNetworkImageRoot = recipe({
+	base: {
+		display: 'block',
+	},
+	variants: {
+		size: {
+			xxs: {
+				width: '12px',
+				height: '12px',
+			},
+			xs: {
+				width: '14px',
+				height: '14px',
+			},
+			sm: {
+				width: '16px',
+				height: '16px',
+			},
+			md: {
+				width: '20px',
+				height: '20px',
+			},
+			lg: {
+				width: '24px',
+				height: '24px',
+			},
+			xl: {
+				width: '32px',
+				height: '32px',
+			},
+		},
+		borderRadius: {
+			circle: '50%',
+			lg: '12px',
+			md: '8px',
+			sm: '4px',
+		},
+	},
+	defaultVariants: {
+		size: 'md',
+		borderRadius: 'md',
+	},
+});
+
+export const originalNetworkImage = style({
+	width: '100% !important',
+	height: '100% !important',
+});

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

@@ -0,0 +1,20 @@
+import { Box, Text } from '@0xsequence/design-system';
+
+export default function Pill({ text }: { text: string }) {
+	return (
+		<Box
+			background="backgroundRaised"
+			display="flex"
+			alignItems="center"
+			justifyContent="center"
+			paddingY="1"
+			paddingX="2"
+			borderRadius="sm"
+			width="max"
+		>
+			<Text fontSize="small" fontWeight="medium" color="text80">
+				{text}
+			</Text>
+		</Box>
+	);
+}

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

@@ -0,0 +1,194 @@
+import { useState } from 'react';
+
+import { Box, IconButton, Skeleton } from '@0xsequence/design-system';
+import type { Hex } from 'viem';
+import { useCollectible, useCollection } from '../../../hooks';
+import { ActionButton } from '../_internals/action-button/ActionButton';
+import SvgDiamondEyeIcon from '../../icons/DiamondEye';
+import { Footer } from './Footer';
+import {
+	collectibleCard,
+	collectibleTileWrapper,
+	collectibleImage,
+	actionWrapper,
+} from './styles.css';
+import ChessTileImage from '../../images/chess-tile.png';
+import type { ChainId, ContractType } from '../../../_internal';
+import { useAccount } from 'wagmi';
+
+function CollectibleSkeleton() {
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			gap="3"
+			alignItems="center"
+			overflow="hidden"
+		>
+			<Skeleton
+				size="lg"
+				style={{ width: '100%', height: 164, borderRadius: 0, paddingTop: 16 }}
+			/>
+
+			<Box
+				display="flex"
+				flexDirection="column"
+				gap="2"
+				paddingX="4"
+				paddingBottom="4"
+			>
+				<Skeleton size="lg" />
+
+				<Skeleton size="sm" />
+			</Box>
+		</Box>
+	);
+}
+
+type CollectibleCardProps = {
+	tokenId: string;
+	chainId: ChainId;
+	collectionAddress: Hex;
+	onCollectibleClick?: () => void;
+	onOfferClick?: () => void;
+};
+
+export function CollectibleCard({
+	tokenId,
+	chainId,
+	collectionAddress,
+	onCollectibleClick,
+	onOfferClick,
+}: CollectibleCardProps) {
+	const { data: collectible, isLoading: collectibleLoading } = useCollectible({
+		chainId: String(chainId),
+		collectionAddress,
+		collectibleId: tokenId,
+	});
+	const { data: collection } = useCollection({
+		chainId: String(chainId),
+		collectionAddress,
+	});
+
+	if (collectibleLoading || !collectible || !collection) {
+		return <CollectibleSkeleton />;
+	}
+
+	return (
+		<Box
+			className={collectibleCard}
+			borderRadius="md"
+			overflow="hidden"
+			background="backgroundPrimary"
+		>
+			<CardWrapper
+				name={collectible.name}
+				type={collection.type as ContractType}
+				imageSrc={collectible.image}
+				tokenId={tokenId}
+				chainId={String(chainId)}
+				collectionAddress={collectionAddress}
+				marketplaceSource={collectible.external_url}
+				onCollectibleClick={onCollectibleClick}
+				onOfferClick={onOfferClick}
+			/>
+		</Box>
+	);
+}
+
+type CardWrapperProps = {
+	name: string;
+	type: ContractType;
+	imageSrc?: string;
+	tokenId: string;
+	chainId: string;
+	collectionAddress: Hex;
+	balance?: string;
+	marketplaceSource?: string;
+	onCollectibleClick?: () => void;
+	onOfferClick?: () => void;
+};
+
+const CardWrapper = ({
+	name,
+	type,
+	imageSrc,
+	tokenId,
+	chainId,
+	collectionAddress,
+	marketplaceSource,
+	onCollectibleClick,
+	onOfferClick,
+}: CardWrapperProps) => {
+	const { address: accountAddress } = useAccount();
+	const [loadingError, setLoadingError] = useState(false);
+
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			alignItems="flex-start"
+			position="relative"
+			width="full"
+			height="full"
+			zIndex="10"
+			overflow="hidden"
+			onClick={onCollectibleClick}
+			as="button"
+			border="none"
+			padding="0"
+			className={collectibleTileWrapper}
+		>
+			<article style={{ width: '100%' }}>
+				{marketplaceSource && (
+					<IconButton
+						as="a"
+						href={marketplaceSource}
+						size="sm"
+						backdropFilter="blur"
+						variant="glass"
+						onClick={(e) => {
+							e.stopPropagation();
+						}}
+						position="absolute"
+						top="2"
+						left="2"
+						icon={SvgDiamondEyeIcon}
+					/>
+				)}
+
+				<img
+					src={loadingError ? ChessTileImage : imageSrc || ChessTileImage}
+					alt={name}
+					className={collectibleImage}
+					onError={() => setLoadingError(true)}
+				/>
+
+				<Footer
+					name={name}
+					type={type}
+					tokenId={tokenId}
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					onOfferClick={onOfferClick}
+				/>
+
+				{accountAddress && (
+					<Box
+						display="flex"
+						alignItems="center"
+						justifyContent="center"
+						padding="2"
+						className={actionWrapper}
+					>
+						<ActionButton
+							chainId={String(chainId)}
+							collectionAddress={collectionAddress}
+							tokenId={tokenId}
+						/>
+					</Box>
+				)}
+			</article>
+		</Box>
+	);
+};

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

@@ -0,0 +1,121 @@
+import { Box, IconButton, Image, Text } from '@0xsequence/design-system';
+import {
+	useBalanceOfCollectible,
+	useCurrencies,
+	useHighestOffer,
+	useLowestListing,
+} from '../../../hooks';
+import { useAccount } from 'wagmi';
+import { formatUnits, type Hex } from 'viem';
+import { ContractType } from '../../../_internal';
+import Pill from '../_internals/pill/Pill';
+import SvgBellIcon from '../../icons/Bell';
+import { footer, offerBellButton } from './styles.css';
+
+type FooterProps = {
+	name: string;
+	type: ContractType;
+	chainId: string;
+	tokenId: string;
+	collectionAddress: Hex;
+	onOfferClick?: () => void;
+};
+
+export const Footer = ({
+	name,
+	type,
+	chainId,
+	tokenId,
+	collectionAddress,
+	onOfferClick,
+}: FooterProps) => {
+	const { address: accountAddress } = useAccount();
+	const { data: balance } = useBalanceOfCollectible({
+		chainId: String(chainId),
+		collectionAddress: collectionAddress,
+		collectableId: tokenId,
+		userAddress: accountAddress!,
+	});
+	const { data: lowestListing } = useLowestListing({
+		chainId: String(chainId),
+		collectionAddress: collectionAddress,
+		tokenId: tokenId,
+	});
+	const { data: highestOffer } = useHighestOffer({
+		chainId: String(chainId),
+		collectionAddress: collectionAddress,
+		tokenId: tokenId,
+	});
+	const { data: currencies } = useCurrencies({
+		chainId: String(chainId),
+		collectionAddress,
+		query: {
+			enabled: !!lowestListing?.order,
+		},
+	});
+	const currency = currencies?.find(
+		(currency) =>
+			currency.contractAddress === lowestListing?.order?.priceCurrencyAddress,
+	);
+
+	if (name.length > 15 && highestOffer?.order) {
+		name = name.substring(0, 13) + '...';
+	}
+	if (name.length > 17 && !highestOffer?.order) {
+		name = name.substring(0, 17) + '...';
+	}
+
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			gap="2"
+			padding="4"
+			whiteSpace="nowrap"
+			position="relative"
+			className={accountAddress ? footer.animated : footer.static}
+		>
+			<Box
+				display="flex"
+				alignItems="center"
+				justifyContent="space-between"
+				position="relative"
+			>
+				<Text color='text100' fontSize="normal" fontWeight="bold" textAlign="left">
+					{name}
+				</Text>
+
+				{highestOffer?.order && onOfferClick && (
+					<IconButton
+						variant="primary"
+						className={offerBellButton}
+						onClick={(e) => {
+							e.stopPropagation();
+							onOfferClick?.();
+						}}
+						icon={SvgBellIcon}
+					/>
+				)}
+			</Box>
+
+			{lowestListing?.order && currency && (
+				<Box display="flex" alignItems="center" gap="1">
+					<Image src={currency?.imageUrl} width="3" height="3" />
+
+					<Text color='text100' fontSize="small" fontWeight="bold" textAlign="left">
+						{formatUnits(
+							BigInt(lowestListing.order.priceAmount),
+							currency.decimals,
+						)}{' '}
+					</Text>
+				</Box>
+			)}
+
+			{balance && type !== ContractType.ERC721 && (
+				<Pill text={`Owned: ${balance}`} />
+			)}
+
+			{type === ContractType.ERC721 && <Pill text="ERC-721" />}
+		</Box>
+	);
+};

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

@@ -0,0 +1,62 @@
+import { atoms } from '@0xsequence/design-system';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const collectibleCard = style([
+	{
+		width: '175px',
+		border: '1px solid hsla(0, 0%, 31%, 1)',
+	},
+]);
+
+export const collectibleImage = style({
+	width: '175px',
+	height: '175px',
+	objectFit: 'cover',
+});
+
+export const collectibleTileWrapper = style({
+	padding: 0,
+	border: 'none',
+	borderRadius: 0,
+	background: 'none',
+	position: 'relative',
+	selectors: {
+		[`&:focus`]: {
+			outline: 'none',
+		},
+	},
+});
+
+export const offerBellButton = style({
+	width: '22px',
+	height: '22px',
+});
+
+const footerBase = style([atoms({ background: 'backgroundPrimary' })]);
+
+export const footer = styleVariants({
+	animated: [
+		footerBase,
+		{
+			transition: 'transform 0.2s ease-in-out',
+			selectors: {
+				[`${collectibleTileWrapper}:hover &`]: {
+					transform: 'translateY(-30px)',
+				},
+			},
+		},
+	],
+	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/components/index.ts

@@ -0,0 +1 @@
+export * from './collectible-card/CollectibleCard';

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

@@ -0,0 +1,31 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="17"
+		height="17"
+		viewBox="0 0 17 17"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgBellIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgBellIcon;

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

@@ -0,0 +1,31 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="16"
+		height="12"
+		viewBox="0 0 16 12"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.00447 0.108826L0.611084 4.50526L7.99997 11.8911L15.3889 4.50526L10.9955 0.108826H5.00447ZM4.60507 2.90461C6.4718 1.0297 9.52815 1.02968 11.3949 2.90459L12.9925 4.50223L11.3949 6.09983C9.52815 7.97473 6.4718 7.97473 4.60507 6.09985L3.00749 4.50223L4.60507 2.90461ZM5.70321 4.50209C5.70321 5.77095 6.73193 6.79865 7.99974 6.79865C9.2676 6.79865 10.2963 5.77095 10.2963 4.50209C10.2963 3.23322 9.2676 2.20553 7.99974 2.20553C6.73193 2.20553 5.70321 3.23322 5.70321 4.50209ZM7.99974 5.50058C7.44853 5.50058 7.00125 5.05377 7.00125 4.50209C7.00125 3.9504 7.44853 3.50359 7.99974 3.50359C8.55095 3.50359 8.99825 3.9504 8.99825 4.50209C8.99825 5.05377 8.55095 5.50058 7.99974 5.50058Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgDiamondEyeIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgDiamondEyeIcon;