@0xsequence/marketplace-sdk 0.3.0 → 0.3.1

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

@@ -0,0 +1,64 @@
+import { atoms } from '@0xsequence/design-system';
+import { style } from '@vanilla-extract/css';
+
+export const trigger = style([
+	atoms({
+		display: 'inline-flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		borderRadius: 'circle',
+		paddingX: '3',
+		fontSize: 'small',
+		height: '7',
+		gap: '2',
+		background: 'backgroundSecondary',
+		color: 'text100',
+		cursor: 'pointer',
+		border: 'none',
+		marginRight: '1',
+	}),
+]);
+
+export const content = style([
+	atoms({
+		background: 'backgroundRaised',
+		borderWidth: 'thin',
+		borderColor: 'backgroundControl',
+		backdropFilter: 'blur',
+		borderStyle: 'solid',
+		borderRadius: 'md',
+		overflow: 'hidden',
+		zIndex: '30',
+	}),
+]);
+
+export const item = style([
+	atoms({
+		fontSize: 'small',
+		color: 'text100',
+		borderRadius: 'none',
+		display: 'flex',
+		alignItems: 'center',
+		height: '7',
+		padding: '2',
+		paddingLeft: '6',
+		position: 'relative',
+		userSelect: 'none',
+		cursor: 'pointer',
+	}),
+	{
+		':hover': {
+			background: 'var(--seq-colors-background-muted)',
+		},
+	},
+]);
+
+export const itemIndicator = style([
+	atoms({
+		position: 'absolute',
+		left: '1',
+		display: 'inline-flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+	}),
+]);

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

@@ -2,28 +2,35 @@ 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 { useAccount } from 'wagmi';
+import type {
+	ChainId,
+	CollectibleOrder,
+	ContractType,
+	Order,
+} from '../../../_internal';
+import { useCurrencies, useHighestOffer } from '../../../hooks';
 import SvgDiamondEyeIcon from '../../icons/DiamondEye';
+import ChessTileImage from '../../images/chess-tile.png';
+import {
+	ActionButton,
+	CollectibleCardAction,
+} from '../_internals/action-button/ActionButton';
 import { Footer } from './Footer';
 import {
+	actionWrapper,
 	collectibleCard,
-	collectibleTileWrapper,
 	collectibleImage,
-	actionWrapper,
+	collectibleTileWrapper,
 } 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"
+			className={collectibleCard}
+			borderRadius="md"
 			overflow="hidden"
+			background="backgroundPrimary"
 		>
 			<Skeleton
 				size="lg"
@@ -36,6 +43,7 @@ function CollectibleSkeleton() {
 				gap="2"
 				paddingX="4"
 				paddingBottom="4"
+				marginTop="2"
 			>
 				<Skeleton size="lg" />
 
@@ -46,34 +54,59 @@ function CollectibleSkeleton() {
 }
 
 type CollectibleCardProps = {
-	tokenId: string;
+	collectibleId: string;
 	chainId: ChainId;
 	collectionAddress: Hex;
+	collectionType?: ContractType;
+	lowestListing: CollectibleOrder | undefined;
 	onCollectibleClick?: () => void;
-	onOfferClick?: () => void;
+	onOfferClick?: ({ order }: { order?: Order }) => void;
+	balance?: string;
+	cardLoading?: boolean;
 };
 
 export function CollectibleCard({
-	tokenId,
+	collectibleId,
 	chainId,
 	collectionAddress,
+	collectionType,
+	lowestListing,
 	onCollectibleClick,
 	onOfferClick,
+	balance,
+	cardLoading,
 }: 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) {
+	const { address: accountAddress } = useAccount();
+	const collectibleMetadata = lowestListing?.metadata;
+	const [imageLoadingError, setImageLoadingError] = useState(false);
+	const { data: highestOffer, isLoading: highestOfferLoading } =
+		useHighestOffer({
+			chainId: String(chainId),
+			collectionAddress,
+			tokenId: collectibleId,
+		});
+	const { data: currencies } = useCurrencies({ chainId });
+	const lowestListingCurrency = currencies?.find(
+		(currency) =>
+			currency.contractAddress === lowestListing?.order?.priceCurrencyAddress,
+	);
+	if (highestOfferLoading || cardLoading) {
 		return <CollectibleSkeleton />;
 	}
 
+	const action = (
+		!!balance
+			? (highestOffer?.order && CollectibleCardAction.SELL) ||
+				(!lowestListing?.order && CollectibleCardAction.LIST) ||
+				CollectibleCardAction.TRANSFER
+			: (lowestListing?.order && CollectibleCardAction.BUY) ||
+				CollectibleCardAction.OFFER
+	) as CollectibleCardAction;
+
+	const name = collectibleMetadata?.name;
+	const image = collectibleMetadata?.image;
+	const externalUrl = collectibleMetadata?.external_url;
+
 	return (
 		<Box
 			className={collectibleCard}
@@ -81,114 +114,78 @@ export function CollectibleCard({
 			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);
+			<Box
+				display="flex"
+				flexDirection="column"
+				alignItems="flex-start"
+				position="relative"
+				width="full"
+				height="full"
+				zIndex="10"
+				overflow="hidden"
+				onClick={onCollectibleClick}
+				border="none"
+				cursor="pointer"
+				padding="0"
+				className={collectibleTileWrapper}
+			>
+				<article style={{ width: '100%' }}>
+					{externalUrl && (
+						<IconButton
+							as="a"
+							href={externalUrl}
+							size="sm"
+							backdropFilter="blur"
+							variant="glass"
+							onClick={(e) => {
+								e.stopPropagation();
+							}}
+							position="absolute"
+							top="2"
+							left="2"
+							icon={SvgDiamondEyeIcon}
+						/>
+					)}
 
-	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={imageLoadingError ? ChessTileImage : image || ChessTileImage}
+						alt={name}
+						className={collectibleImage}
+						onError={() => setImageLoadingError(true)}
 					/>
-				)}
 
-				<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}
-				/>
+					<Footer
+						name={name!}
+						type={collectionType}
+						onOfferClick={() => onOfferClick?.({ order: highestOffer?.order })}
+						highestOffer={highestOffer?.order}
+						lowestListingPriceAmount={lowestListing?.order?.priceAmount}
+						lowestListingCurrency={lowestListingCurrency}
+						balance={balance}
+						isAnimated={!!action}
+					/>
 
-				{accountAddress && (
-					<Box
-						display="flex"
-						alignItems="center"
-						justifyContent="center"
-						padding="2"
-						className={actionWrapper}
-					>
-						<ActionButton
-							chainId={String(chainId)}
-							collectionAddress={collectionAddress}
-							tokenId={tokenId}
-						/>
-					</Box>
-				)}
-			</article>
+					{accountAddress && (highestOffer || lowestListing) && (
+						<Box
+							display="flex"
+							alignItems="center"
+							justifyContent="center"
+							padding="2"
+							className={actionWrapper}
+						>
+							<ActionButton
+								chainId={String(chainId)}
+								collectionAddress={collectionAddress}
+								tokenId={collectibleId}
+								action={action}
+								highestOffer={highestOffer?.order}
+								lowestListing={lowestListing?.order}
+								isOwned={!!balance}
+							/>
+						</Box>
+					)}
+				</article>
+			</Box>
 		</Box>
 	);
-};
+}

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

@@ -1,67 +1,37 @@
 import { Box, IconButton, Image, Text } from '@0xsequence/design-system';
-import {
-	useBalanceOfCollectible,
-	useCurrencies,
-	useHighestOffer,
-	useLowestListing,
-} from '../../../hooks';
+import { formatUnits } from 'viem';
 import { useAccount } from 'wagmi';
-import { formatUnits, type Hex } from 'viem';
-import { ContractType } from '../../../_internal';
-import Pill from '../_internals/pill/Pill';
+import { ContractType, type Currency, type Order } from '../../../_internal';
 import SvgBellIcon from '../../icons/Bell';
 import { footer, offerBellButton } from './styles.css';
 
 type FooterProps = {
 	name: string;
-	type: ContractType;
-	chainId: string;
-	tokenId: string;
-	collectionAddress: Hex;
+	type?: ContractType;
 	onOfferClick?: () => void;
+	highestOffer?: Order;
+	lowestListingPriceAmount?: string;
+	lowestListingCurrency?: Currency;
+	balance?: string;
+	isAnimated?: boolean;
 };
 
 export const Footer = ({
 	name,
 	type,
-	chainId,
-	tokenId,
-	collectionAddress,
 	onOfferClick,
+	highestOffer,
+	lowestListingPriceAmount,
+	lowestListingCurrency,
+	balance,
+	isAnimated,
 }: 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,
-	);
+	const { address } = useAccount();
 
-	if (name.length > 15 && highestOffer?.order) {
+	if (name.length > 15 && highestOffer) {
 		name = name.substring(0, 13) + '...';
 	}
-	if (name.length > 17 && !highestOffer?.order) {
+	if (name.length > 17 && !highestOffer) {
 		name = name.substring(0, 17) + '...';
 	}
 
@@ -69,11 +39,12 @@ export const Footer = ({
 		<Box
 			display="flex"
 			flexDirection="column"
+			alignItems="flex-start"
 			gap="2"
 			padding="4"
 			whiteSpace="nowrap"
 			position="relative"
-			className={accountAddress ? footer.animated : footer.static}
+			className={!!address && isAnimated ? footer.animated : footer.static}
 		>
 			<Box
 				display="flex"
@@ -81,11 +52,17 @@ export const Footer = ({
 				justifyContent="space-between"
 				position="relative"
 			>
-				<Text color='text100' fontSize="normal" fontWeight="bold" textAlign="left">
+				<Text
+					color="text100"
+					fontSize="normal"
+					fontWeight="bold"
+					textAlign="left"
+					fontFamily="body"
+				>
 					{name}
 				</Text>
 
-				{highestOffer?.order && onOfferClick && (
+				{highestOffer && onOfferClick && (
 					<IconButton
 						variant="primary"
 						className={offerBellButton}
@@ -93,29 +70,59 @@ export const Footer = ({
 							e.stopPropagation();
 							onOfferClick?.();
 						}}
-						icon={SvgBellIcon}
+						icon={(props) => <SvgBellIcon {...props} size={'xs'} />}
 					/>
 				)}
 			</Box>
 
-			{lowestListing?.order && currency && (
+			{lowestListingPriceAmount && lowestListingCurrency && (
 				<Box display="flex" alignItems="center" gap="1">
-					<Image src={currency?.imageUrl} width="3" height="3" />
+					<Image src={lowestListingCurrency?.imageUrl} width="3" height="3" />
 
-					<Text color='text100' fontSize="small" fontWeight="bold" textAlign="left">
+					<Text
+						color="text100"
+						fontSize="small"
+						fontWeight="bold"
+						textAlign="left"
+						fontFamily="body"
+					>
 						{formatUnits(
-							BigInt(lowestListing.order.priceAmount),
-							currency.decimals,
+							BigInt(lowestListingPriceAmount),
+							lowestListingCurrency.decimals,
 						)}{' '}
 					</Text>
 				</Box>
 			)}
 
-			{balance && type !== ContractType.ERC721 && (
-				<Pill text={`Owned: ${balance}`} />
+			{!!balance && type !== ContractType.ERC721 && (
+				<Text
+					background="backgroundSecondary"
+					color="text80"
+					fontSize="small"
+					textAlign="left"
+					fontFamily="body"
+					paddingX="2"
+					paddingY="1"
+					borderRadius="sm"
+				>
+					Owned: {balance}
+				</Text>
 			)}
 
-			{type === ContractType.ERC721 && <Pill text="ERC-721" />}
+			{type === ContractType.ERC721 && (
+				<Text
+					background="backgroundSecondary"
+					color="text80"
+					fontSize="small"
+					textAlign="left"
+					fontFamily="body"
+					paddingX="2"
+					paddingY="1"
+					borderRadius="sm"
+				>
+					ERC-721
+				</Text>
+			)}
 		</Box>
 	);
 };

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

@@ -10,8 +10,8 @@ const Svg = () => (
 		xmlns="http://www.w3.org/2000/svg"
 	>
 		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
+			fillRule="evenodd"
+			clipRule="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"
 		/>

package/src/react/ui/index.ts

@@ -4,6 +4,7 @@ export { useMakeOfferModal } from './modals/MakeOfferModal';
 export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
 export { useTransferModal } from './modals/TransferModal';
 export { useSellModal } from './modals/SellModal';
+export { useBuyModal } from './modals/BuyModal';
 
 // components
 export { CollectibleCard } from './components/collectible-card/CollectibleCard';

package/src/react/ui/modals/BuyModal/_store.ts

@@ -0,0 +1,53 @@
+import { observable } from '@legendapp/state';
+import type { Order } from '../../../_internal';
+import type { ShowBuyModalArgs } from '.';
+import type { ModalCallbacks } from '../_internal/types';
+
+export interface BuyModalState {
+	isOpen: boolean;
+	open: (
+		args: ShowBuyModalArgs & {
+			callbacks?: ModalCallbacks;
+			defaultCallbacks?: ModalCallbacks;
+		},
+	) => void;
+	close: () => void;
+	state: {
+		order: Order;
+		quantity: string;
+	};
+	callbacks?: ModalCallbacks;
+}
+
+export const initialState: BuyModalState = {
+	isOpen: false,
+	open: ({
+		callbacks,
+		defaultCallbacks,
+		...args
+	}: ShowBuyModalArgs & {
+		callbacks?: ModalCallbacks;
+		defaultCallbacks?: ModalCallbacks;
+	}) => {
+		buyModal$.state.set({
+			...buyModal$.state.get(),
+			order: args.order,
+		});
+		buyModal$.callbacks.set(callbacks || defaultCallbacks);
+		buyModal$.isOpen.set(true);
+	},
+	close: () => {
+		buyModal$.isOpen.set(false);
+		buyModal$.callbacks.set(undefined);
+		buyModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		order: undefined as unknown as Order,
+		quantity: '1',
+	},
+	callbacks: undefined,
+};
+
+export const buyModal$ = observable(initialState);