@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,129 @@
+'use client';
+
+import type { Address, Hex } from 'viem';
+import type { MarketplaceType } from '../../../../../../types';
+import { CollectibleCardAction } from '../../../../../../types';
+import type { Order, OrderbookKind } from '../../../../../_internal';
+import SvgCartIcon from '../../../../icons/CartIcon';
+import { useBuyModal } from '../../../../modals/BuyModal';
+import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
+import { ActionButtonBody } from './ActionButtonBody';
+
+type NonOwnerActionsProps = {
+	action: CollectibleCardAction;
+	tokenId: string;
+	collectionAddress: Hex;
+	chainId: number;
+	orderbookKind?: OrderbookKind;
+	lowestListing?: Order;
+	marketplaceType: MarketplaceType;
+	salesContractAddress?: Hex;
+	salePrice?: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	quantityDecimals?: number;
+	quantityRemaining?: string;
+};
+
+export function NonOwnerActions({
+	action,
+	tokenId,
+	collectionAddress,
+	chainId,
+	orderbookKind,
+	lowestListing,
+	marketplaceType,
+	salesContractAddress,
+	salePrice,
+	quantityDecimals,
+	quantityRemaining,
+}: NonOwnerActionsProps) {
+	const { show: showBuyModal } = useBuyModal();
+	const { show: showMakeOfferModal } = useMakeOfferModal();
+
+	if (marketplaceType === 'shop') {
+		if (!salesContractAddress) {
+			throw new Error('salesContractAddress is required for SHOP card type');
+		}
+
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.BUY}
+				tokenId={tokenId}
+				label="Buy now"
+				onClick={() =>
+					showBuyModal({
+						chainId,
+						collectionAddress,
+						salesContractAddress,
+						items: [
+							{
+								tokenId,
+								// This is overridden by quantity input state, see: sdk/src/react/ui/modals/BuyModal/hooks/useERC1155Checkout.ts
+								quantity: '1',
+							},
+						],
+						marketplaceType: 'shop',
+						salePrice: {
+							amount: salePrice?.amount ?? '',
+							currencyAddress: salePrice?.currencyAddress ?? '0x',
+						},
+						quantityDecimals: quantityDecimals ?? 0,
+						quantityRemaining: quantityRemaining ?? '',
+					})
+				}
+				icon={SvgCartIcon}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.BUY) {
+		if (!lowestListing) {
+			throw new Error(
+				'lowestListing is required for BUY action and MARKET card type',
+			);
+		}
+
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.BUY}
+				tokenId={tokenId}
+				label="Buy now"
+				onClick={() =>
+					showBuyModal({
+						collectionAddress,
+						chainId,
+						collectibleId: tokenId,
+						orderId: lowestListing.orderId,
+						marketplace: lowestListing.marketplace,
+						marketplaceType: 'market',
+						quantityDecimals: lowestListing.quantityDecimals,
+						quantityRemaining: lowestListing.quantityRemaining,
+					})
+				}
+				icon={SvgCartIcon}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.OFFER) {
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.OFFER}
+				tokenId={tokenId}
+				label="Make an offer"
+				onClick={() =>
+					showMakeOfferModal({
+						collectionAddress,
+						chainId,
+						collectibleId: tokenId,
+						orderbookKind,
+					})
+				}
+			/>
+		);
+	}
+
+	return null;
+}

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

@@ -0,0 +1,83 @@
+'use client';
+
+import type { Hex } from 'viem';
+import { CollectibleCardAction } from '../../../../../../types';
+import type { Order, OrderbookKind } from '../../../../../_internal';
+import { useCreateListingModal } from '../../../../modals/CreateListingModal';
+import { useSellModal } from '../../../../modals/SellModal';
+import { useTransferModal } from '../../../../modals/TransferModal';
+import { ActionButtonBody } from './ActionButtonBody';
+
+type OwnerActionsProps = {
+	action: CollectibleCardAction;
+	tokenId: string;
+	collectionAddress: Hex;
+	chainId: number;
+	orderbookKind?: OrderbookKind;
+	highestOffer?: Order;
+};
+
+export function OwnerActions({
+	action,
+	tokenId,
+	collectionAddress,
+	chainId,
+	orderbookKind,
+	highestOffer,
+}: OwnerActionsProps) {
+	const { show: showCreateListingModal } = useCreateListingModal();
+	const { show: showSellModal } = useSellModal();
+	const { show: showTransferModal } = useTransferModal();
+
+	if (action === CollectibleCardAction.LIST) {
+		return (
+			<ActionButtonBody
+				label="Create listing"
+				tokenId={tokenId}
+				onClick={() =>
+					showCreateListingModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId,
+						collectibleId: tokenId,
+						orderbookKind,
+					})
+				}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.SELL && highestOffer) {
+		return (
+			<ActionButtonBody
+				tokenId={tokenId}
+				label="Sell"
+				onClick={() =>
+					showSellModal({
+						collectionAddress,
+						chainId,
+						tokenId,
+						order: highestOffer,
+					})
+				}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.TRANSFER) {
+		return (
+			<ActionButtonBody
+				label="Transfer"
+				tokenId={tokenId}
+				onClick={() =>
+					showTransferModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId,
+						collectibleId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	return null;
+}

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect } from 'react';
+import { CollectibleCardAction } from '../../../../../../types';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import {
+	actionButtonStore,
+	clearPendingAction,
+	executePendingActionIfExists,
+} from '../store';
+
+type UseActionButtonLogicProps = {
+	tokenId: string;
+	owned?: boolean;
+	action: CollectibleCardAction;
+	onCannotPerformAction?: (
+		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	) => void;
+};
+
+export const useActionButtonLogic = ({
+	tokenId,
+	owned,
+	action,
+	onCannotPerformAction,
+}: UseActionButtonLogicProps) => {
+	const { wallet } = useWallet();
+	const address = wallet?.address;
+	const actionsThatOwnersCannotPerform = [
+		CollectibleCardAction.BUY,
+		CollectibleCardAction.OFFER,
+	];
+	const pendingActionType = actionButtonStore.pendingAction.type.get();
+
+	// Handle owner restrictions
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (
+			owned &&
+			actionButtonStore.pendingAction.get() &&
+			address &&
+			actionsThatOwnersCannotPerform.includes(action) &&
+			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+		) {
+			onCannotPerformAction?.(
+				pendingActionType as
+					| CollectibleCardAction.BUY
+					| CollectibleCardAction.OFFER,
+			);
+			clearPendingAction();
+		}
+	}, [
+		owned,
+		actionButtonStore.pendingAction.get(),
+		address,
+		action,
+		tokenId,
+		onCannotPerformAction,
+		pendingActionType,
+	]);
+
+	// Execute pending action when user becomes connected
+	useEffect(() => {
+		if (
+			address &&
+			!owned &&
+			actionButtonStore.pendingAction.get() &&
+			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+		) {
+			// TODO: Remove this timeout once pointer-events: none issue is fixed on Radix UI side
+			setTimeout(() => {
+				executePendingActionIfExists();
+				clearPendingAction();
+			}, 1000);
+		}
+	}, [address, owned, tokenId]);
+
+	const shouldShowAction = !address
+		? [CollectibleCardAction.BUY, CollectibleCardAction.OFFER].includes(action)
+		: true;
+
+	const isOwnerAction =
+		address &&
+		owned &&
+		[
+			CollectibleCardAction.LIST,
+			CollectibleCardAction.TRANSFER,
+			CollectibleCardAction.SELL,
+		].includes(action);
+
+	return {
+		address,
+		shouldShowAction,
+		isOwnerAction,
+	};
+};

package/src/react/ui/components/_internals/action-button/store.ts

@@ -0,0 +1,47 @@
+import { observable } from '@legendapp/state';
+import type { CollectibleCardAction } from '../../../../../types';
+
+type PendingAction = {
+	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+	collectibleId: string;
+	callback: () => void;
+	timestamp: number;
+};
+
+export const actionButtonStore = observable({
+	pendingAction: null as PendingAction | null,
+});
+
+export const setPendingAction = (
+	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	callback: () => void,
+	collectibleId: string,
+) => {
+	actionButtonStore.pendingAction.set({
+		type,
+		callback,
+		timestamp: Date.now(),
+		collectibleId,
+	});
+};
+
+export const clearPendingAction = () => {
+	actionButtonStore.pendingAction.set(null);
+};
+
+export const executePendingActionIfExists = () => {
+	const timestamp = actionButtonStore.pendingAction.get()?.timestamp;
+	const callback = actionButtonStore.pendingAction.get()?.callback as
+		| (() => void)
+		| undefined;
+
+	if (timestamp && callback) {
+		// Only execute if the pending action is less than 5 minutes old
+		if (
+			Date.now() - timestamp < 5 * 60 * 1000 &&
+			typeof callback === 'function'
+		) {
+			callback();
+		}
+	}
+};

package/src/react/ui/components/_internals/custom-select/CustomSelect.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import {
+	Button,
+	ChevronDownIcon,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuPortal,
+	DropdownMenuRoot,
+	DropdownMenuTrigger,
+	Text,
+} from '@0xsequence/design-system';
+import { type ReactNode, useState } from 'react';
+
+export interface SelectItem {
+	value: string;
+	content: ReactNode;
+	disabled?: boolean;
+}
+
+interface CustomSelectProps {
+	items: SelectItem[];
+	onValueChange?: (value: string) => void;
+	defaultValue?: SelectItem;
+	placeholder?: string;
+	disabled?: boolean;
+	backgroundColor?: string;
+	className?: string;
+	testId?: string;
+}
+
+export const CustomSelect = ({
+	items,
+	onValueChange,
+	defaultValue,
+	placeholder = 'Select an option',
+	disabled = false,
+	className,
+	testId = 'custom-select',
+}: CustomSelectProps) => {
+	const [selectedItem, setSelectedItem] = useState<SelectItem | undefined>(
+		defaultValue,
+	);
+
+	const handleValueChange = (item: SelectItem) => {
+		setSelectedItem(item);
+		onValueChange?.(item.value);
+	};
+
+	return (
+		<DropdownMenuRoot>
+			<DropdownMenuTrigger asChild disabled={disabled}>
+				<Button
+					size="xs"
+					label={
+						<div className="flex items-center justify-center gap-1 truncate pr-3">
+							<Text variant="xsmall" color="text100" fontWeight="bold">
+								{selectedItem ? selectedItem.content : placeholder}
+							</Text>
+
+							<ChevronDownIcon size="xs" />
+						</div>
+					}
+					shape="circle"
+					className={`bg-overlay-light py-1.5 pl-3 ${className || ''}`}
+					data-testid={`${testId}-trigger`}
+				/>
+			</DropdownMenuTrigger>
+
+			<DropdownMenuPortal>
+				<DropdownMenuContent
+					align="end"
+					side="bottom"
+					sideOffset={8}
+					className="z-[1000] overflow-hidden rounded-xl border border-border-base bg-color-overlay-glass shadow-lg backdrop-blur-md"
+					data-testid={`${testId}-content`}
+				>
+					<div className="max-h-[240px] overflow-auto">
+						{items.map((item) => (
+							<DropdownMenuCheckboxItem
+								key={item.value}
+								checked={selectedItem?.value === item.value}
+								onCheckedChange={() => handleValueChange(item)}
+								disabled={item.disabled}
+								className="group relative flex cursor-pointer select-none items-center rounded-lg px-2 py-1.5 outline-none transition-colors hover:bg-background-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span[data-state='checked']]:hidden"
+								data-testid={`${testId}-option-${item.value}`}
+							>
+								<div className="flex w-full items-center justify-between">
+									<div className="flex items-center gap-2 truncate">
+										{typeof item.content === 'string' ? (
+											<Text
+												variant="small"
+												color={
+													selectedItem?.value === item.value
+														? 'text100'
+														: 'text80'
+												}
+												className={`truncate ${
+													selectedItem?.value === item.value ? 'font-bold' : ''
+												}`}
+												data-testid={`${testId}-option-text-${item.value}`}
+											>
+												{item.content}
+											</Text>
+										) : (
+											<div
+												className="truncate"
+												data-testid={`${testId}-option-content-${item.value}`}
+											>
+												{item.content}
+											</div>
+										)}
+									</div>
+								</div>
+							</DropdownMenuCheckboxItem>
+						))}
+					</div>
+				</DropdownMenuContent>
+			</DropdownMenuPortal>
+		</DropdownMenuRoot>
+	);
+};

package/src/react/ui/components/_internals/custom-select/__tests__/CustomSelect.test.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { cleanup, fireEvent, render, screen } from '@test';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CustomSelect, type SelectItem } from '../CustomSelect';
+
+// Define types for the props to avoid any
+interface DropdownMenuContentProps {
+	children: ReactNode;
+	align?: string;
+	side?: string;
+	sideOffset?: number;
+	className?: string;
+	'data-testid'?: string;
+	[key: string]: unknown;
+}
+
+interface DropdownMenuCheckboxItemProps {
+	children: ReactNode;
+	checked?: boolean;
+	onCheckedChange?: () => void;
+	disabled?: boolean;
+	className?: string;
+	'data-testid'?: string;
+}
+
+// Mock the design system components
+vi.mock('@0xsequence/design-system', async (importOriginal) => {
+	const actual = await importOriginal();
+
+	// Create a mock implementation that renders all dropdown content immediately
+	return {
+		// @ts-ignore - ignore spread type error
+		...actual,
+		DropdownMenuRoot: ({ children }: { children: ReactNode }) => (
+			<div>{children}</div>
+		),
+		DropdownMenuTrigger: ({ children }: { children: ReactNode }) => (
+			<div>{children}</div>
+		),
+		DropdownMenuPortal: ({ children }: { children: ReactNode }) => (
+			<div>{children}</div>
+		),
+		DropdownMenuContent: ({ children, ...props }: DropdownMenuContentProps) => (
+			<div data-testid={props['data-testid']} className="dropdown-content-mock">
+				{children}
+			</div>
+		),
+		DropdownMenuCheckboxItem: ({
+			children,
+			onCheckedChange,
+			disabled,
+			className,
+			'data-testid': testId,
+		}: DropdownMenuCheckboxItemProps) => (
+			<button
+				type="button"
+				onClick={disabled ? undefined : onCheckedChange}
+				tabIndex={disabled ? -1 : 0}
+				data-testid={testId}
+				data-disabled={disabled ? 'true' : 'false'}
+				className={className}
+				disabled={disabled}
+			>
+				{children}
+			</button>
+		),
+	};
+});
+
+describe('CustomSelect', () => {
+	const mockItems: SelectItem[] = [
+		{ value: 'item1', content: 'Item 1' },
+		{ value: 'item2', content: 'Item 2' },
+		{ value: 'item3', content: 'Item 3', disabled: true },
+	];
+
+	const defaultValue = mockItems[0];
+
+	beforeEach(() => {
+		cleanup();
+	});
+
+	it('should render with default value', () => {
+		render(<CustomSelect items={mockItems} defaultValue={defaultValue} />);
+		// Use getByTestId instead of getByText to avoid duplicate text matches
+		expect(screen.getByTestId('custom-select-trigger')).toBeInTheDocument();
+		expect(screen.getByTestId('custom-select-trigger')).toHaveTextContent(
+			'Item 1',
+		);
+	});
+
+	it('should display dropdown content', () => {
+		render(<CustomSelect items={mockItems} defaultValue={defaultValue} />);
+
+		// With our mocks, the content should be visible without clicking
+		expect(screen.getByTestId('custom-select-content')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('custom-select-option-item2'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId('custom-select-option-item3'),
+		).toBeInTheDocument();
+	});
+
+	it('should call onValueChange when selecting an item', () => {
+		const onValueChange = vi.fn();
+		render(
+			<CustomSelect
+				items={mockItems}
+				onValueChange={onValueChange}
+				defaultValue={defaultValue}
+			/>,
+		);
+
+		const option = screen.getByTestId('custom-select-option-item2');
+		fireEvent.click(option);
+
+		expect(onValueChange).toHaveBeenCalledWith('item2');
+	});
+
+	it('should not allow selection of disabled items', () => {
+		const onValueChange = vi.fn();
+		render(
+			<CustomSelect
+				items={mockItems}
+				onValueChange={onValueChange}
+				defaultValue={defaultValue}
+			/>,
+		);
+
+		const disabledOption = screen.getByTestId('custom-select-option-item3');
+		expect(disabledOption).toHaveAttribute('data-disabled', 'true');
+
+		fireEvent.click(disabledOption);
+		expect(onValueChange).not.toHaveBeenCalled();
+	});
+
+	it('should render custom content in items', () => {
+		const customItems: SelectItem[] = [
+			{
+				value: 'custom1',
+				content: <div data-testid="custom-content-test">Custom Content</div>,
+			},
+		];
+
+		render(<CustomSelect items={customItems} defaultValue={customItems[0]} />);
+
+		// Use getAllByTestId since the content appears in both the trigger and dropdown
+		const customContentElements = screen.getAllByTestId('custom-content-test');
+		expect(customContentElements.length).toBeGreaterThan(0);
+		expect(customContentElements[0]).toHaveTextContent('Custom Content');
+	});
+});

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

@@ -0,0 +1,11 @@
+import { Text } from '@0xsequence/design-system';
+
+export default function Pill({ text }: { text: string }) {
+	return (
+		<div className="flex w-max items-center justify-center rounded-lg bg-background-raised px-2 py-1">
+			<Text className="text-sm" fontWeight="medium" color="text80">
+				{text}
+			</Text>
+		</div>
+	);
+}

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

@@ -0,0 +1,23 @@
+import { render } from '@test';
+import { describe, expect, it } from 'vitest';
+import Pill from '../Pill';
+
+describe('Pill', () => {
+	it('should render correctly', () => {
+		const testText = 'Test Pill';
+		const { container } = render(<Pill text={testText} />);
+		const pillElement = container.firstChild;
+
+		expect(pillElement).toMatchInlineSnapshot(`
+			<div
+			  class="flex w-max items-center justify-center rounded-lg bg-background-raised px-2 py-1"
+			>
+			  <span
+			    class="leading-inherit tracking-inherit font-inherit font-medium text-secondary text-sm"
+			  >
+			    Test Pill
+			  </span>
+			</div>
+		`);
+	});
+});