@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

package/src/react/hooks/useCheckoutOptions.tsx

@@ -1,65 +0,0 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
-import { z } from 'zod';
-import type { SdkConfig } from '../../types';
-import {
-	AddressSchema,
-	MarketplaceKind,
-	QueryArgSchema,
-	getMarketplaceClient,
-} from '../_internal';
-import { useConfig } from './useConfig';
-
-const UseCheckoutOptionsSchema = z.object({
-	chainId: z.number(),
-	orders: z.array(
-		z.object({
-			collectionAddress: AddressSchema,
-			orderId: z.string(),
-			marketplace: z.nativeEnum(MarketplaceKind),
-		}),
-	),
-	query: QueryArgSchema,
-});
-
-export type UseCheckoutOptionsArgs = z.infer<typeof UseCheckoutOptionsSchema>;
-
-export type UseCheckoutOptionsReturn = Awaited<
-	ReturnType<typeof fetchCheckoutOptions>
->;
-
-const fetchCheckoutOptions = async (
-	args: UseCheckoutOptionsArgs & { walletAddress: Hex },
-	config: SdkConfig,
-) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
-	return marketplaceClient.checkoutOptionsMarketplace({
-		wallet: args.walletAddress,
-		orders: args.orders.map((order) => ({
-			contractAddress: order.collectionAddress,
-			orderId: order.orderId,
-			marketplace: order.marketplace,
-		})),
-		additionalFee: 0, //TODO: add additional fee
-	});
-};
-
-export const checkoutOptionsOptions = (
-	args: UseCheckoutOptionsArgs & { walletAddress: Hex },
-	config: SdkConfig,
-) => {
-	return queryOptions({
-		queryKey: ['checkoutOptions', args],
-		queryFn: () => fetchCheckoutOptions(args, config),
-	});
-};
-
-export const useCheckoutOptions = (args: UseCheckoutOptionsArgs) => {
-	const { address } = useAccount();
-	const config = useConfig();
-	return useQuery(
-		// biome-ignore lint/style/noNonNullAssertion: <explanation>
-		checkoutOptionsOptions({ walletAddress: address!, ...args }, config),
-	);
-};

package/src/react/hooks/useCollectionDetails.tsx

@@ -1,35 +0,0 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
-import { getMarketplaceClient } from '../_internal';
-import { useConfig } from './useConfig';
-
-type UseCollectionDetails = {
-	collectionAddress: string;
-	chainId: number;
-};
-
-const fetchCollectionDetails = async (
-	args: { collectionAddress: string },
-	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
-) => {
-	const { collection } = await marketplaceClient.getCollectionDetail({
-		contractAddress: args.collectionAddress,
-	});
-	return collection;
-};
-
-export const collectionDetailsOptions = (
-	args: UseCollectionDetails,
-	config: SdkConfig,
-) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
-	return queryOptions({
-		queryKey: ['collectionDetails', args],
-		queryFn: () => fetchCollectionDetails(args, marketplaceClient),
-	});
-};
-
-export const useCollectionDetails = (args: UseCollectionDetails) => {
-	const config = useConfig();
-	return useQuery(collectionDetailsOptions(args, config));
-};

package/src/react/hooks/useGetTokenSuppliesMap.ts

@@ -1,28 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { useConfig } from '..';
-import { getIndexerClient } from '../_internal';
-
-export const useGetTokenSuppliesMap = ({
-	chainId,
-	tokenIds,
-	collectionAddress,
-}: {
-	chainId: number;
-	tokenIds: string[];
-	collectionAddress: string;
-}) => {
-	const config = useConfig();
-	const indexerClient = getIndexerClient(chainId, config);
-	return useQuery({
-		queryKey: ['indexer-tokenSupplies', tokenIds, collectionAddress, chainId],
-		queryFn: () => {
-			return indexerClient.getTokenSuppliesMap({
-				tokenMap: {
-					[collectionAddress]: tokenIds,
-				},
-				includeMetadata: false,
-			});
-		},
-	});
-};

package/src/react/hooks/useListTokenMetadata.ts

@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useConfig } from './useConfig';
-
-import {
-	type FetchTokenMetadataArgs,
-	tokenMetadataOptions,
-} from '../queries/listTokenMetadata';
-
-export const useListTokenMetadata = (args: FetchTokenMetadataArgs) => {
-	const config = useConfig();
-	const { chainId, contractAddress, tokenIds, query } = args;
-
-	return useQuery({
-		...tokenMetadataOptions(
-			{ chainId, contractAddress, tokenIds, query },
-			config,
-		),
-	});
-};

package/src/react/queries/getTokenSupplies.ts

@@ -1,38 +0,0 @@
-import { queryOptions } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
-//TODO: This is not complete, there is no hook for this,
-// add it if we need it in the future
-import { LaosAPI, getIndexerClient } from '../_internal';
-
-export type UseGetTokenSuppliesArgs = {
-	chainId: number;
-	contractAddress: string;
-	tokenId: string;
-	isLaos721?: boolean;
-};
-
-export async function getTokenSupplies(
-	args: UseGetTokenSuppliesArgs,
-	config: SdkConfig,
-) {
-	if (args.isLaos721) {
-		const laosApi = new LaosAPI();
-		return laosApi.getTokenSupplies({
-			chainId: args.chainId.toString(),
-			contractAddress: args.contractAddress,
-		});
-	}
-
-	const indexerClient = getIndexerClient(args.chainId, config);
-	return await indexerClient.getTokenSupplies(args);
-}
-
-export function getTokenSuppliesOptions(
-	args: UseGetTokenSuppliesArgs,
-	config: SdkConfig,
-) {
-	return queryOptions({
-		queryKey: ['getTokenSupplies', args],
-		queryFn: () => getTokenSupplies(args, config),
-	});
-}

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

@@ -1,170 +0,0 @@
-'use client';
-
-import { Skeleton } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
-import type {
-	CollectibleOrder,
-	ContractType,
-	Order,
-	OrderbookKind,
-} from '../../../_internal';
-import { useCurrency } from '../../../hooks';
-import { ActionButton } from '../_internals/action-button/ActionButton';
-import { CollectibleCardAction } from '../_internals/action-button/types';
-import { Footer } from './Footer';
-import { Media } from './media/Media';
-
-function CollectibleSkeleton() {
-	return (
-		<div
-			data-testid="collectible-card-skeleton"
-			className="w-card-width overflow-hidden rounded-xl border border-border-base focus-visible:border-border-focus focus-visible:shadow-none focus-visible:outline-focus active:border-border-focus active:shadow-none"
-		>
-			<div className="relative aspect-square overflow-hidden bg-background-secondary">
-				<Skeleton
-					size="lg"
-					className="absolute inset-0 h-full w-full animate-shimmer"
-					style={{
-						borderRadius: 0,
-					}}
-				/>
-			</div>
-			<div className="mt-2 flex flex-col gap-2 px-4 pb-4">
-				<Skeleton size="lg" className="animate-shimmer" />
-				<Skeleton size="sm" className="animate-shimmer" />
-			</div>
-		</div>
-	);
-}
-
-type CollectibleCardProps = {
-	collectibleId: string;
-	chainId: number;
-	collectionAddress: Hex;
-	orderbookKind?: OrderbookKind;
-	collectionType?: ContractType;
-	collectible: CollectibleOrder | undefined;
-	onCollectibleClick?: (tokenId: string) => void;
-	onOfferClick?: ({
-		order,
-		e,
-	}: {
-		order?: Order;
-		e: React.MouseEvent<HTMLButtonElement>;
-	}) => void;
-	assetSrcPrefixUrl?: string;
-	balance?: string;
-	balanceIsLoading: boolean;
-	cardLoading?: boolean;
-	/**
-	 * Callback function that is called when the user attempts to perform an action
-	 * (such as buying or making an offer) that they are not permitted to do.
-	 *
-	 * This function is invoked in the following scenario:
-	 *
-	 * - When a disconnected user clicks on "Buy Now" and is prompted to connect
-	 *   their wallet. After connecting, if it is determined that the user is
-	 *   already the owner of the collectible, this callback is triggered to inform
-	 *   them that they cannot perform the action (e.g., buying their own collectible).
-	 *
-	 * @param action - The action that the user cannot perform, which can be either
-	 * CollectibleCardAction.BUY or CollectibleCardAction.OFFER.
-	 */
-	onCannotPerformAction?: (
-		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
-	) => void;
-};
-
-export function CollectibleCard({
-	collectibleId,
-	chainId,
-	collectionAddress,
-	orderbookKind,
-	collectionType,
-	collectible,
-	onCollectibleClick,
-	onOfferClick,
-	balance,
-	balanceIsLoading,
-	cardLoading,
-	onCannotPerformAction,
-	assetSrcPrefixUrl,
-}: CollectibleCardProps) {
-	const collectibleMetadata = collectible?.metadata;
-	const highestOffer = collectible?.offer;
-
-	const { data: lowestListingCurrency } = useCurrency({
-		chainId,
-		currencyAddress: collectible?.listing?.priceCurrencyAddress,
-		query: {
-			enabled: !!collectible?.listing?.priceCurrencyAddress,
-		},
-	});
-
-	if (cardLoading) {
-		return <CollectibleSkeleton />;
-	}
-
-	const action = (
-		balance
-			? (highestOffer && CollectibleCardAction.SELL) ||
-				(!collectible?.listing && CollectibleCardAction.LIST) ||
-				CollectibleCardAction.TRANSFER
-			: (collectible?.listing && CollectibleCardAction.BUY) ||
-				CollectibleCardAction.OFFER
-	) as CollectibleCardAction;
-
-	return (
-		<div
-			data-testid="collectible-card"
-			className="w-card-width overflow-hidden rounded-xl border border-border-base bg-background-primary focus-visible:border-border-focus focus-visible:shadow-focus-ring focus-visible:outline-focus active:border-border-focus active:shadow-active-ring"
-			onClick={() => onCollectibleClick?.(collectibleId)}
-			onKeyDown={(e) => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					onCollectibleClick?.(collectibleId);
-				}
-			}}
-		>
-			<div className="group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]">
-				<article className="w-full rounded-xl">
-					<Media
-						name={collectibleMetadata?.name || ''}
-						assets={[
-							collectibleMetadata?.image,
-							collectibleMetadata?.video,
-							collectibleMetadata?.animation_url,
-						]}
-						assetSrcPrefixUrl={assetSrcPrefixUrl}
-					/>
-
-					<Footer
-						name={collectibleMetadata?.name || ''}
-						type={collectionType}
-						onOfferClick={(e) => onOfferClick?.({ order: highestOffer, e })}
-						highestOffer={highestOffer}
-						lowestListingPriceAmount={collectible?.listing?.priceAmount}
-						lowestListingCurrency={lowestListingCurrency}
-						balance={balance}
-						decimals={collectibleMetadata?.decimals}
-					/>
-
-					{(highestOffer || collectible) && !balanceIsLoading && (
-						<div className="-bottom-16 absolute flex w-full origin-bottom items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-64px]">
-							<ActionButton
-								chainId={chainId}
-								collectionAddress={collectionAddress}
-								tokenId={collectibleId}
-								orderbookKind={orderbookKind}
-								action={action}
-								highestOffer={highestOffer}
-								lowestListing={collectible?.listing}
-								owned={!!balance}
-								onCannotPerformAction={onCannotPerformAction}
-							/>
-						</div>
-					)}
-				</article>
-			</div>
-		</div>
-	);
-}

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

@@ -1,157 +0,0 @@
-'use client';
-
-import {
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	IconButton,
-	Image,
-	Text,
-} from '@0xsequence/design-system';
-import { formatUnits } from 'viem';
-import { ContractType, type Currency, type Order } from '../../../_internal';
-import SvgBellIcon from '../../icons/BellIcon';
-
-const OVERFLOW_PRICE = 100000000;
-const UNDERFLOW_PRICE = 0.0001;
-
-const formatPrice = (amount: string, currency: Currency): React.ReactNode => {
-	const formattedPrice = formatUnits(BigInt(amount), currency.decimals);
-	const numericPrice = Number.parseFloat(formattedPrice);
-
-	if (numericPrice < UNDERFLOW_PRICE) {
-		return (
-			<div className="flex items-center">
-				<ChevronLeftIcon className="h-3 w-3 text-text-100" />
-				<Text>{`${UNDERFLOW_PRICE} ${currency.symbol}`}</Text>
-			</div>
-		);
-	}
-
-	if (numericPrice > OVERFLOW_PRICE) {
-		return (
-			<div className="flex items-center">
-				<ChevronRightIcon className="h-3 w-3 text-text-100" />
-				<Text>{`${OVERFLOW_PRICE.toLocaleString('en-US', {
-					maximumFractionDigits: 2,
-				})} ${currency.symbol}`}</Text>
-			</div>
-		);
-	}
-
-	const maxDecimals = numericPrice < 0.01 ? 6 : 4;
-
-	const formattedNumber = numericPrice.toLocaleString('en-US', {
-		minimumFractionDigits: 0,
-		maximumFractionDigits: maxDecimals,
-	});
-
-	return (
-		<div className="flex items-center gap-1">
-			<Text>
-				{formattedNumber} {currency.symbol}
-			</Text>
-		</div>
-	);
-};
-
-type FooterProps = {
-	name: string;
-	type?: ContractType;
-	decimals?: number;
-	onOfferClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-	highestOffer?: Order;
-	lowestListingPriceAmount?: string;
-	lowestListingCurrency?: Currency;
-	balance?: string;
-};
-
-export const Footer = ({
-	name,
-	type,
-	decimals,
-	onOfferClick,
-	highestOffer,
-	lowestListingPriceAmount,
-	lowestListingCurrency,
-	balance,
-}: FooterProps) => {
-	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
-
-	if (name.length > 15 && highestOffer) {
-		name = `${name.substring(0, 13)}...`;
-	}
-	if (name.length > 17 && !highestOffer) {
-		name = `${name.substring(0, 17)}...`;
-	}
-
-	return (
-		<div className="relative flex flex-col items-start gap-2 whitespace-nowrap bg-background-primary p-4">
-			<div className="relative flex w-full items-center justify-between">
-				<Text className="text-left font-body font-bold text-sm text-text-100">
-					{name || 'Untitled'}
-				</Text>
-
-				{highestOffer && onOfferClick && (
-					<IconButton
-						className="absolute top-0 right-0 h-[22px] w-[22px] hover:animate-bell-ring"
-						size="xs"
-						variant="primary"
-						onClick={(e) => {
-							onOfferClick?.(e);
-						}}
-						icon={(props) => <SvgBellIcon {...props} size="xs" />}
-					/>
-				)}
-			</div>
-			<div className="flex items-center gap-1">
-				{listed && lowestListingCurrency.imageUrl && (
-					<Image
-						className="h-3 w-3"
-						src={lowestListingCurrency.imageUrl}
-						onError={(e) => {
-							e.currentTarget.style.display = 'none';
-						}}
-					/>
-				)}
-
-				<Text
-					className={`text-left font-body font-bold text-sm ${
-						listed ? 'text-text-100' : 'text-text-50'
-					}`}
-				>
-					{listed &&
-						formatPrice(lowestListingPriceAmount, lowestListingCurrency)}
-					{!listed && 'Not listed yet'}
-				</Text>
-			</div>
-			<TokenTypeBalancePill
-				balance={balance}
-				type={type as ContractType}
-				decimals={decimals}
-			/>
-		</div>
-	);
-};
-
-const TokenTypeBalancePill = ({
-	balance,
-	type,
-	decimals,
-}: {
-	balance?: string;
-	type: ContractType;
-	decimals?: number;
-}) => {
-	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/collectible-card/__tests__/CollectibleCard.test.tsx

@@ -1,94 +0,0 @@
-import { TEST_COLLECTIBLE, TEST_CURRENCY } from '@test/const';
-import { fireEvent, render, screen } from '@test/test-utils';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import {
-	type CollectibleOrder,
-	ContractType,
-	OrderSide,
-	OrderbookKind,
-} from '../../../../_internal';
-import { mockTokenMetadata } from '../../../../_internal/api/__mocks__/indexer.msw';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import * as hooks from '../../../../hooks';
-import { CollectibleCard } from '../CollectibleCard';
-
-const defaultProps = {
-	collectibleId: '1',
-	chainId: 1,
-	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
-	collectible: {
-		order: mockOrder,
-		listing: { ...mockOrder, side: OrderSide.listing },
-		offer: { ...mockOrder, side: OrderSide.offer },
-		metadata: {
-			...mockTokenMetadata,
-			tokenId: mockTokenMetadata.tokenId as string,
-			assets: mockTokenMetadata.assets
-				? mockTokenMetadata.assets.map((asset) => ({
-						...asset,
-						tokenId: asset.tokenId || '',
-					}))
-				: undefined,
-		},
-	} as CollectibleOrder,
-	balance: '100',
-	balanceIsLoading: false,
-	cardLoading: false,
-	onCannotPerformAction: vi.fn(),
-	assetSrcPrefixUrl: 'https://example.com/',
-	orderbookKind: OrderbookKind.sequence_marketplace_v2,
-	collectionType: ContractType.ERC721,
-};
-
-describe('CollectibleCard', () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		vi.restoreAllMocks();
-
-		const useCurrencySpy = vi.spyOn(hooks, 'useCurrency');
-		useCurrencySpy.mockReturnValue({
-			data: TEST_CURRENCY,
-		} as ReturnType<typeof hooks.useCurrency>);
-	});
-
-	it('Renders correctly with valid props and shows proper collectible details', () => {
-		render(<CollectibleCard {...defaultProps} />);
-
-		expect(screen.getByText('Mock NFT')).toBeInTheDocument();
-		expect(screen.getByText('1 TEST')).toBeInTheDocument();
-		// there is an offer
-		expect(screen.getByTitle('Notification Bell')).toBeInTheDocument();
-		expect(screen.getByRole('img', { name: 'Mock NFT' })).toHaveAttribute(
-			'src',
-			defaultProps.assetSrcPrefixUrl + defaultProps.collectible.metadata.image,
-		);
-	});
-
-	it('Handles loading state by showing skeleton component', () => {
-		render(<CollectibleCard {...defaultProps} cardLoading={true} />);
-		expect(screen.getByTestId('collectible-card-skeleton')).toBeInTheDocument();
-	});
-
-	it('Triggers appropriate callbacks when collectible or action buttons are clicked', () => {
-		const onCollectibleClick = vi.fn();
-		const onOfferClick = vi.fn();
-
-		render(
-			<CollectibleCard
-				{...defaultProps}
-				onCollectibleClick={onCollectibleClick}
-				onOfferClick={onOfferClick}
-			/>,
-		);
-
-		const notificationBell = screen.getByRole('button', {
-			name: 'Notification Bell',
-		});
-		fireEvent.click(notificationBell);
-		expect(onOfferClick).toHaveBeenCalled();
-
-		const collectibleCard = screen.getByTestId('collectible-card');
-		fireEvent.click(collectibleCard);
-		expect(onCollectibleClick).toHaveBeenCalled();
-	});
-});