@0xsequence/marketplace-sdk 1.2.1 → 2.0.0

package/src/react/ui/components/_internals/ErrorLogBox.tsx

@@ -29,7 +29,7 @@ export const ErrorLogBox = ({
 	};
 
 	return (
-		<div className="relative max-h-96 w-full overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-3">
+		<div className="wrap-anywhere relative max-h-96 overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-3">
 			<div className="flex items-start gap-3">
 				<WarningIcon
 					className="absolute mt-0.5 flex-shrink-0 text-red-500"
@@ -61,6 +61,13 @@ export const ErrorLogBox = ({
 							{showFullError && (
 								<div className="mt-2 overflow-auto rounded-md bg-red-950 p-2">
 									<Text className="whitespace-pre-wrap break-words font-mono text-red-100 text-xs">
+										{error.message}
+										{error.stack && (
+											<>
+												{'\n\nStack trace:\n'}
+												{error.stack}
+											</>
+										)}
 										{JSON.stringify(error, null, 2)}
 									</Text>
 								</div>

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

@@ -3,10 +3,10 @@
 import {
 	Button,
 	ChevronDownIcon,
+	DropdownMenu,
 	DropdownMenuCheckboxItem,
 	DropdownMenuContent,
 	DropdownMenuPortal,
-	DropdownMenuRoot,
 	DropdownMenuTrigger,
 	Text,
 } from '@0xsequence/design-system';
@@ -48,23 +48,22 @@ export const CustomSelect = ({
 	};
 
 	return (
-		<DropdownMenuRoot>
+		<DropdownMenu>
 			<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 || ''}`}
+					className={`py-1.5 pl-3 hover:bg-overlay-light ${className || ''}`}
 					data-testid={`${testId}-trigger`}
-				/>
+				>
+					<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>
+				</Button>
 			</DropdownMenuTrigger>
 
 			<DropdownMenuPortal>
@@ -117,6 +116,6 @@ export const CustomSelect = ({
 					</div>
 				</DropdownMenuContent>
 			</DropdownMenuPortal>
-		</DropdownMenuRoot>
+		</DropdownMenu>
 	);
 };

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

@@ -10,13 +10,17 @@ describe('Pill', () => {
 
 		expect(pillElement).toMatchInlineSnapshot(`
 			<div
-			  class="flex w-max items-center justify-center rounded-lg bg-background-raised px-2 py-1"
+			  id="sdk-provider"
 			>
-			  <span
-			    class="leading-inherit tracking-inherit font-inherit font-medium text-secondary text-sm"
+			  <div
+			    class="flex w-max items-center justify-center rounded-lg bg-background-raised px-2 py-1"
 			  >
-			    Test Pill
-			  </span>
+			    <span
+			      class="leading-inherit tracking-inherit font-inherit font-medium text-secondary text-sm"
+			    >
+			      Test Pill
+			    </span>
+			  </div>
 			</div>
 		`);
 	});

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/ActionButton.stories.tsx

@@ -1,13 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, within } from 'storybook/test';
-import { defaultHandlers } from '../../../../../../test/handlers';
 import {
-	CollectibleCardAction,
 	MarketplaceKind,
-	OrderbookKind,
 	OrderSide,
 	OrderStatus,
-} from '../../../../../types';
+} from '@0xsequence/api-client';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { defaultHandlers } from '../../../../../../test/handlers';
+import { CollectibleCardAction } from '../../../../../types';
 import { ActionButton } from './ActionButton';
 
 const meta: Meta<typeof ActionButton> = {
@@ -97,22 +96,24 @@ const MOCK_ORDER = {
 	status: OrderStatus.active,
 	chainId: 1,
 	originName: 'Mock Origin',
+	slug: 'test-order',
 	collectionContractAddress: MOCK_ADDRESS,
-	tokenId: '123',
+	tokenId: 123n,
 	createdBy: MOCK_ADDRESS,
-	priceAmount: '1000000000000000000',
+	priceAmount: 1000000000000000000n,
 	priceAmountFormatted: '1.0',
-	priceAmountNet: '950000000000000000',
+	priceAmountNet: 950000000000000000n,
 	priceAmountNetFormatted: '0.95',
-	priceCurrencyAddress: '0x0000000000000000000000000000000000000000',
+	priceCurrencyAddress:
+		'0x0000000000000000000000000000000000000000' as `0x${string}`,
 	priceDecimals: 18,
 	priceUSD: 1000,
 	priceUSDFormatted: '$1,000.00',
-	quantityInitial: '1',
+	quantityInitial: 1n,
 	quantityInitialFormatted: '1',
-	quantityRemaining: '1',
+	quantityRemaining: 1n,
 	quantityRemainingFormatted: '1',
-	quantityAvailable: '1',
+	quantityAvailable: 1n,
 	quantityAvailableFormatted: '1',
 	quantityDecimals: 0,
 	feeBps: 500,
@@ -130,11 +131,10 @@ export const OfferAction: Story = {
 	args: {
 		chainId: 1,
 		collectionAddress: MOCK_ADDRESS,
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.OFFER,
 		owned: false,
 		cardType: 'market',
-		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 		onCannotPerformAction: fn(),
 	},
 	play: async ({ canvasElement }) => {
@@ -156,7 +156,7 @@ export const SellAction: Story = {
 	args: {
 		chainId: 1,
 		collectionAddress: MOCK_ADDRESS,
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.SELL,
 		owned: true,
 		cardType: 'market',
@@ -164,9 +164,7 @@ export const SellAction: Story = {
 			...MOCK_ORDER,
 			side: OrderSide.offer,
 			status: OrderStatus.active,
-			slug: 'test-order',
 		},
-		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -187,11 +185,10 @@ export const ListAction: Story = {
 	args: {
 		chainId: 1,
 		collectionAddress: MOCK_ADDRESS,
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.LIST,
 		owned: true,
 		cardType: 'market',
-		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -212,7 +209,7 @@ export const TransferAction: Story = {
 	args: {
 		chainId: 1,
 		collectionAddress: MOCK_ADDRESS,
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.TRANSFER,
 		owned: true,
 		cardType: 'market',
@@ -236,17 +233,17 @@ export const ShopBuyAction: Story = {
 	args: {
 		chainId: 1,
 		collectionAddress: MOCK_ADDRESS,
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.BUY,
 		owned: false,
 		cardType: 'shop',
 		salesContractAddress: MOCK_ADDRESS,
 		salePrice: {
-			amount: '1000000000000000000',
-			currencyAddress: '0x0000000000000000000000000000000000000000',
+			amount: 1000000000000000000n,
+			currencyAddress:
+				'0x0000000000000000000000000000000000000000' as `0x${string}`,
 		},
-		quantityDecimals: 0,
-		quantityRemaining: 100,
+		quantityRemaining: 100n,
 		unlimitedSupply: false,
 		onCannotPerformAction: fn(),
 	},
@@ -269,7 +266,7 @@ export const MarketBuyAction: Story = {
 	args: {
 		chainId: 1,
 		collectionAddress: MOCK_ADDRESS,
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.BUY,
 		owned: false,
 		cardType: 'market',
@@ -277,9 +274,7 @@ export const MarketBuyAction: Story = {
 			...MOCK_ORDER,
 			side: OrderSide.listing,
 			status: OrderStatus.active,
-			slug: 'test-order',
 		},
-		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 		onCannotPerformAction: fn(),
 	},
 	play: async ({ canvasElement }) => {

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/ActionButton.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { Address } from 'viem';
+import type { Address } from '@0xsequence/api-client';
 import type { CardType, CollectibleCardAction } from '../../../../../types';
-import type { Order, OrderbookKind } from '../../../../_internal';
+import type { Order } from '../../../../_internal';
 import { NonOwnerActions } from './components/NonOwnerActions';
 import { OwnerActions } from './components/OwnerActions';
 import { useActionButtonLogic } from './hooks/useActionButtonLogic';
@@ -10,8 +10,7 @@ import { useActionButtonLogic } from './hooks/useActionButtonLogic';
 type ActionButtonProps = {
 	chainId: number;
 	collectionAddress: Address;
-	tokenId: string;
-	orderbookKind?: OrderbookKind;
+	tokenId: bigint;
 	isTransfer?: boolean;
 	action: CollectibleCardAction;
 	owned?: boolean;
@@ -24,20 +23,26 @@ type ActionButtonProps = {
 	salesContractAddress?: Address;
 	prioritizeOwnerActions?: boolean;
 	salePrice?: {
-		amount: string;
+		amount: bigint;
 		currencyAddress: Address;
 	};
-	quantityDecimals?: number;
-	quantityRemaining?: number;
+	quantityRemaining?: bigint;
 	unlimitedSupply?: boolean;
 	hideQuantitySelector?: boolean;
+	labelOverride?: {
+		listing?: string;
+		offer?: string;
+		buy?: string;
+		sell?: string;
+		transfer?: string;
+	};
+	className?: string;
 };
 
 export function ActionButton({
 	collectionAddress,
 	chainId,
 	tokenId,
-	orderbookKind,
 	action,
 	owned,
 	highestOffer,
@@ -47,10 +52,11 @@ export function ActionButton({
 	salesContractAddress,
 	prioritizeOwnerActions,
 	salePrice,
-	quantityDecimals,
 	quantityRemaining,
 	unlimitedSupply,
 	hideQuantitySelector,
+	labelOverride,
+	className,
 }: ActionButtonProps) {
 	const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 		tokenId,
@@ -70,8 +76,9 @@ export function ActionButton({
 				tokenId={tokenId}
 				collectionAddress={collectionAddress}
 				chainId={chainId}
-				orderbookKind={orderbookKind}
 				highestOffer={highestOffer}
+				labelOverride={labelOverride}
+				className={className}
 			/>
 		);
 	}
@@ -86,23 +93,22 @@ export function ActionButton({
 					tokenId,
 					collectionAddress,
 					chainId,
-					quantityDecimals,
 					quantityRemaining,
 					unlimitedSupply,
 					hideQuantitySelector,
+					labelOverride,
 				}
 			: {
 					cardType: 'market' as const,
-					orderbookKind,
 					lowestListing,
 					action,
 					tokenId,
 					collectionAddress,
 					chainId,
-					quantityDecimals,
 					quantityRemaining,
 					hideQuantitySelector,
+					labelOverride,
 				};
 
-	return <NonOwnerActions {...nonOwnerProps} />;
+	return <NonOwnerActions {...nonOwnerProps} className={className} />;
 }

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/__tests__/ActionButtonBody.test.tsx

@@ -14,7 +14,7 @@ vi.mock('../store', () => ({
 	})),
 }));
 
-vi.mock('../../../../../hooks', () => ({
+vi.mock('../../../../../hooks/ui/useOpenConnectModal', () => ({
 	useOpenConnectModal: vi.fn(),
 }));
 
@@ -32,7 +32,7 @@ describe('ActionButtonBody', () => {
 	const mockSetPendingAction = vi.fn();
 	const defaultProps = {
 		label: 'Buy now' as const,
-		tokenId: '123',
+		tokenId: 123n,
 		onClick: mockOnClick,
 		action: CollectibleCardAction.BUY as CollectibleCardAction.BUY,
 	};
@@ -42,8 +42,10 @@ describe('ActionButtonBody', () => {
 
 		// Default to connected state
 		vi.mocked(wagmi.useAccount).mockReturnValue({
-			address: '0x1234567890123456789012345678901234567890',
-			addresses: ['0x1234567890123456789012345678901234567890'],
+			address: '0x1234567890123456789012345678901234567890' as `0x${string}`,
+			addresses: [
+				'0x1234567890123456789012345678901234567890' as `0x${string}`,
+			],
 			chain: undefined,
 			chainId: 1,
 			connector: {} as any,
@@ -54,7 +56,7 @@ describe('ActionButtonBody', () => {
 			status: 'connected',
 		});
 
-		vi.spyOn(hooksModule, 'useOpenConnectModal').mockReturnValue({
+		vi.mocked(hooksModule.useOpenConnectModal).mockReturnValue({
 			openConnectModal: mockOpenConnectModal,
 		});
 

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/__tests__/NonOwnerActions.test.tsx

@@ -1,18 +1,20 @@
 'use client';
 
+import { OrderSide } from '@0xsequence/api-client';
+import * as MarketplaceMocks from '@0xsequence/api-client/mocks/marketplace';
 import { render, screen } from '@test';
-
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { mockOrder } from '../../../../../../react/_internal/api/__mocks__/marketplace.msw';
 
-import { CollectibleCardAction, OrderSide } from '../../../../../../types';
+const { mockOrder } = MarketplaceMocks;
+
+import { CollectibleCardAction } from '../../../../../../types';
 import { NonOwnerActions } from '../components/NonOwnerActions';
 
 describe('NonOwnerActions', () => {
 	const baseProps = {
 		action: CollectibleCardAction.BUY,
-		tokenId: '1',
+		tokenId: 1n,
 		collectionAddress: zeroAddress,
 		chainId: 1,
 	};
@@ -20,7 +22,7 @@ describe('NonOwnerActions', () => {
 	const marketProps = {
 		...baseProps,
 		cardType: 'market' as const,
-		lowestListing: { ...mockOrder, side: OrderSide.listing },
+		lowestListing: { ...mockOrder, side: OrderSide.listing } as any,
 	};
 
 	beforeEach(() => {
@@ -40,7 +42,10 @@ describe('NonOwnerActions', () => {
 				{...baseProps}
 				cardType="shop"
 				salesContractAddress="0x123"
-				salePrice={{ amount: '0.1', currencyAddress: zeroAddress }}
+				salePrice={{
+					amount: 100000000000000000n,
+					currencyAddress: zeroAddress,
+				}}
 			/>,
 		);
 		expect(screen.getByText('Buy now')).toBeInTheDocument();

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/__tests__/OwnerActions.test.tsx

@@ -1,22 +1,24 @@
 'use client';
 
+import { OrderSide } from '@0xsequence/api-client';
+import * as MarketplaceMocks from '@0xsequence/api-client/mocks/marketplace';
 import { render, screen } from '@test';
-
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { mockOrder } from '../../../../../../react/_internal/api/__mocks__/marketplace.msw';
 
-import { CollectibleCardAction, OrderSide } from '../../../../../../types';
+const { mockOrder } = MarketplaceMocks;
+
+import { CollectibleCardAction } from '../../../../../../types';
 import { OwnerActions } from '../components/OwnerActions';
 
 describe('OwnerActions', () => {
 	const defaultProps = {
 		action: CollectibleCardAction.BUY,
-		tokenId: '1',
+		tokenId: 1n,
 		collectionAddress: zeroAddress,
 		chainId: 1,
-		lowestListing: { ...mockOrder, side: OrderSide.listing },
-		highestOffer: { ...mockOrder, side: OrderSide.offer },
+		lowestListing: { ...mockOrder, side: OrderSide.listing } as any,
+		highestOffer: { ...mockOrder, side: OrderSide.offer } as any,
 	};
 
 	beforeEach(() => {

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/__tests__/useActionButtonLogic.test.tsx

@@ -18,7 +18,7 @@ vi.mock('wagmi', async () => {
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();
 	const defaultProps = {
-		tokenId: '123',
+		tokenId: 123n,
 		action: CollectibleCardAction.BUY as CollectibleCardAction.BUY,
 		owned: false,
 		onCannotPerformAction: onCannotPerformActionMock,
@@ -30,8 +30,10 @@ describe('useActionButtonLogic', () => {
 
 		// Default to connected state
 		vi.mocked(wagmi.useAccount).mockReturnValue({
-			address: '0x1234567890123456789012345678901234567890',
-			addresses: ['0x1234567890123456789012345678901234567890'],
+			address: '0x1234567890123456789012345678901234567890' as `0x${string}`,
+			addresses: [
+				'0x1234567890123456789012345678901234567890' as `0x${string}`,
+			],
 			chain: undefined,
 			chainId: 1,
 			connector: {} as any,
@@ -48,7 +50,7 @@ describe('useActionButtonLogic', () => {
 			type: 'setPendingAction',
 			action: defaultProps.action,
 			onPendingActionExecuted: vi.fn(),
-			tokenId: '123',
+			tokenId: 123n,
 		});
 
 		const { result } = renderHook(() =>

package/src/react/ui/components/{_internals/action-button → marketplace-collectible-card/ActionButton}/components/ActionButtonBody.tsx

@@ -1,18 +1,20 @@
 'use client';
 
-import { Button, type IconProps } from '@0xsequence/design-system';
-import type { ComponentType } from 'react';
+import { Button } from '@0xsequence/design-system';
+import type { JSX } from 'react';
 import { useAccount } from 'wagmi';
 import type { CollectibleCardAction } from '../../../../../../types';
+import { cn } from '../../../../../../utils';
 import { useOpenConnectModal } from '../../../../../hooks';
 import { useActionButtonStore } from '../store';
 
 type ActionButtonBodyProps = {
-	label: 'Buy now' | 'Sell' | 'Make an offer' | 'Create listing' | 'Transfer';
-	tokenId: string;
+	label: string;
+	tokenId: bigint;
 	onClick: () => void;
-	icon?: ComponentType<IconProps>;
+	icon?: JSX.Element;
 	action?: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+	className?: string;
 };
 
 export function ActionButtonBody({
@@ -21,6 +23,7 @@ export function ActionButtonBody({
 	onClick,
 	icon,
 	action,
+	className,
 }: ActionButtonBodyProps) {
 	const { openConnectModal } = useOpenConnectModal();
 	const { setPendingAction } = useActionButtonStore();
@@ -40,13 +43,15 @@ export function ActionButtonBody({
 
 	return (
 		<Button
-			className="flex w-full items-center justify-center"
+			className={cn('flex w-full items-center justify-center', className ?? '')}
 			variant="primary"
-			label={label}
 			onClick={handleClick}
-			leftIcon={icon}
 			size="xs"
 			shape="square"
-		/>
+		>
+			{icon && icon}
+
+			{label}
+		</Button>
 	);
 }