@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -0,0 +1,296 @@
+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';
+import { ActionButton } from './ActionButton';
+
+const meta: Meta<typeof ActionButton> = {
+	title: 'Internals/Action Button',
+	component: ActionButton,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component: `
+The ActionButton component handles different actions for collectibles in both marketplace and shop contexts. It automatically determines whether to show owner or non-owner actions based on ownership and other conditions.
+
+## Manual Testing
+
+**Test the modals by clicking the action buttons:**
+
+1. **Buy Action** - Opens buy modal for marketplace listings
+2. **Make Offer** - Opens offer modal for making offers on collectibles
+3. **Sell (Accept Offer)** - Opens sell modal to accept existing offers
+4. **Create Listing** - Opens listing modal to create new listings
+5. **Transfer** - Opens transfer modal to transfer collectibles
+6. **Shop Buy** - Opens buy modal for shop-based purchases
+
+Each button click should open the corresponding modal. The modals are fully functional with all providers configured.
+
+## MSW Integration
+
+All stories now use Mock Service Worker (MSW) to mock API requests, ensuring the components work with realistic data without requiring a backend server.
+				`,
+			},
+		},
+		// Use the pre-composed success handlers for all stories by default
+		msw: {
+			handlers: defaultHandlers.success,
+		},
+	},
+	argTypes: {
+		chainId: {
+			control: 'number',
+			description: 'Blockchain chain ID',
+		},
+		collectionAddress: {
+			control: 'text',
+			description: 'Collection contract address',
+		},
+		tokenId: {
+			control: 'text',
+			description: 'Token ID of the collectible',
+		},
+		action: {
+			control: 'select',
+			options: Object.values(CollectibleCardAction),
+			description: 'The action to display',
+		},
+		owned: {
+			control: 'boolean',
+			description: 'Whether the user owns this collectible',
+		},
+		marketplaceType: {
+			control: 'select',
+			options: ['market', 'shop'],
+			description: 'Type of marketplace (market or shop)',
+		},
+		onCannotPerformAction: {
+			action: 'cannot perform action',
+			description: 'Callback when user cannot perform the action',
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ padding: '1rem', width: '300px' }}>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionButton>;
+
+// Mock data
+const MOCK_ADDRESS = '0x1234567890123456789012345678901234567890' as const;
+const MOCK_ORDER = {
+	orderId: 'order-123',
+	marketplace: MarketplaceKind.sequence_marketplace_v1,
+	side: OrderSide.listing,
+	status: OrderStatus.active,
+	chainId: 1,
+	originName: 'Mock Origin',
+	collectionContractAddress: MOCK_ADDRESS,
+	tokenId: '123',
+	createdBy: MOCK_ADDRESS,
+	priceAmount: '1000000000000000000',
+	priceAmountFormatted: '1.0',
+	priceAmountNet: '950000000000000000',
+	priceAmountNetFormatted: '0.95',
+	priceCurrencyAddress: '0x0000000000000000000000000000000000000000',
+	priceDecimals: 18,
+	priceUSD: 1000,
+	priceUSDFormatted: '$1,000.00',
+	quantityInitial: '1',
+	quantityInitialFormatted: '1',
+	quantityRemaining: '1',
+	quantityRemainingFormatted: '1',
+	quantityAvailable: '1',
+	quantityAvailableFormatted: '1',
+	quantityDecimals: 0,
+	feeBps: 500,
+	feeBreakdown: [],
+	validFrom: '2024-01-01T00:00:00Z',
+	validUntil: '2024-12-31T23:59:59Z',
+	blockNumber: 12345678,
+	orderCreatedAt: '2024-01-01T00:00:00Z',
+	orderUpdatedAt: '2024-01-01T00:00:00Z',
+	createdAt: '2024-01-01T00:00:00Z',
+	updatedAt: '2024-01-01T00:00:00Z',
+};
+
+export const OfferAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.OFFER,
+		owned: false,
+		marketplaceType: 'market',
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+		onCannotPerformAction: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Make an offer');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Enter price');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const SellAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.SELL,
+		owned: true,
+		marketplaceType: 'market',
+		highestOffer: {
+			...MOCK_ORDER,
+			side: OrderSide.offer,
+			status: OrderStatus.active,
+		},
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Sell');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Offer received');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const ListAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.LIST,
+		owned: true,
+		marketplaceType: 'market',
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Create listing');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Enter price');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const TransferAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.TRANSFER,
+		owned: true,
+		marketplaceType: 'market',
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Transfer');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Wallet address');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const ShopBuyAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.BUY,
+		owned: false,
+		marketplaceType: 'shop',
+		salesContractAddress: MOCK_ADDRESS,
+		salePrice: {
+			amount: '1000000000000000000',
+			currencyAddress: '0x0000000000000000000000000000000000000000',
+		},
+		quantityDecimals: 0,
+		quantityRemaining: 100,
+		unlimitedSupply: false,
+		onCannotPerformAction: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Buy now');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Select Quantity');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const MarketBuyAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.BUY,
+		owned: false,
+		marketplaceType: 'market',
+		lowestListing: {
+			...MOCK_ORDER,
+			side: OrderSide.listing,
+			status: OrderStatus.active,
+		},
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+		onCannotPerformAction: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Buy now');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Select Quantity');
+		await expect(modal).toBeInTheDocument();
+	},
+};

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { observer } from '@legendapp/state/react';
-import type { Address, Hex } from 'viem';
+import type { Address } from 'viem';
 import type {
 	CollectibleCardAction,
 	MarketplaceType,
@@ -13,7 +12,7 @@ import { useActionButtonLogic } from './hooks/useActionButtonLogic';
 
 type ActionButtonProps = {
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	tokenId: string;
 	orderbookKind?: OrderbookKind;
 	isTransfer?: boolean;
@@ -33,75 +32,76 @@ type ActionButtonProps = {
 	};
 	quantityDecimals?: number;
 	quantityRemaining?: number;
+	unlimitedSupply?: boolean;
 };
 
-export const ActionButton = observer(
-	({
-		collectionAddress,
-		chainId,
+export function ActionButton({
+	collectionAddress,
+	chainId,
+	tokenId,
+	orderbookKind,
+	action,
+	owned,
+	highestOffer,
+	lowestListing,
+	onCannotPerformAction,
+	marketplaceType,
+	salesContractAddress,
+	prioritizeOwnerActions,
+	salePrice,
+	quantityDecimals,
+	quantityRemaining,
+	unlimitedSupply,
+}: ActionButtonProps) {
+	const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 		tokenId,
-		orderbookKind,
-		action,
 		owned,
-		highestOffer,
-		lowestListing,
+		action,
 		onCannotPerformAction,
-		marketplaceType,
-		salesContractAddress,
-		prioritizeOwnerActions,
-		salePrice,
-		quantityDecimals,
-		quantityRemaining,
-	}: ActionButtonProps) => {
-		const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
-			tokenId,
-			owned,
-			action,
-			onCannotPerformAction,
-		});
+	});
 
-		if (!shouldShowAction) {
-			return null;
-		}
+	if (!shouldShowAction) {
+		return null;
+	}
 
-		if (isOwnerAction || prioritizeOwnerActions) {
-			return (
-				<OwnerActions
-					action={action}
-					tokenId={tokenId}
-					collectionAddress={collectionAddress}
-					chainId={chainId}
-					orderbookKind={orderbookKind}
-					highestOffer={highestOffer}
-				/>
-			);
-		}
+	if (isOwnerAction || prioritizeOwnerActions) {
+		return (
+			<OwnerActions
+				action={action}
+				tokenId={tokenId}
+				collectionAddress={collectionAddress}
+				chainId={chainId}
+				orderbookKind={orderbookKind}
+				highestOffer={highestOffer}
+			/>
+		);
+	}
 
-		const nonOwnerProps =
-			marketplaceType === 'shop' && salesContractAddress && salePrice
-				? {
-						marketplaceType: 'shop' as const,
-						salesContractAddress,
-						salePrice,
-						action,
-						tokenId,
-						collectionAddress,
-						chainId,
-						quantityDecimals,
-						quantityRemaining,
-					}
-				: {
-						marketplaceType: 'market' as const,
-						orderbookKind,
-						lowestListing,
-						action,
-						tokenId,
-						collectionAddress,
-						chainId,
-						quantityDecimals,
-						quantityRemaining,
-					};
+	const nonOwnerProps =
+		marketplaceType === 'shop' && salesContractAddress && salePrice
+			? {
+					marketplaceType: 'shop' as const,
+					salesContractAddress,
+					salePrice,
+					action,
+					tokenId,
+					collectionAddress,
+					chainId,
+					quantityDecimals,
+					quantityRemaining,
+					unlimitedSupply,
+				}
+			: {
+					marketplaceType: 'market' as const,
+					orderbookKind,
+					lowestListing,
+					action,
+					tokenId,
+					collectionAddress,
+					chainId,
+					quantityDecimals,
+					quantityRemaining,
+				};
 
-		return <NonOwnerActions {...nonOwnerProps} />;
-	},
-);
+	return <NonOwnerActions {...nonOwnerProps} />;
+}

package/src/react/ui/components/_internals/action-button/__tests__/ActionButtonBody.test.tsx

@@ -1,19 +1,35 @@
 'use client';
 
 import { fireEvent, render, screen } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as wagmi from 'wagmi';
 import { CollectibleCardAction } from '../../../../../../types';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import * as hooksModule from '../../../../../hooks';
 import { ActionButtonBody } from '../components/ActionButtonBody';
-import { setPendingAction } from '../store';
+import { useActionButtonStore } from '../store';
 
 vi.mock('../store', () => ({
-	setPendingAction: vi.fn(),
+	useActionButtonStore: vi.fn(() => ({
+		setPendingAction: vi.fn(),
+	})),
 }));
 
+vi.mock('../../../../../hooks', () => ({
+	useOpenConnectModal: vi.fn(),
+}));
+
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
+
 describe('ActionButtonBody', () => {
 	const mockOnClick = vi.fn();
+	const mockOpenConnectModal = vi.fn();
+	const mockSetPendingAction = vi.fn();
 	const defaultProps = {
 		label: 'Buy now' as const,
 		tokenId: '123',
@@ -24,10 +40,26 @@ describe('ActionButtonBody', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isLoading: false,
-			isError: false,
+		// Default to connected state
+		vi.mocked(wagmi.useAccount).mockReturnValue({
+			address: '0x1234567890123456789012345678901234567890',
+			addresses: ['0x1234567890123456789012345678901234567890'],
+			chain: undefined,
+			chainId: 1,
+			connector: {} as any,
+			isConnected: true,
+			isConnecting: false,
+			isDisconnected: false,
+			isReconnecting: false,
+			status: 'connected',
+		});
+
+		vi.spyOn(hooksModule, 'useOpenConnectModal').mockReturnValue({
+			openConnectModal: mockOpenConnectModal,
+		});
+
+		(useActionButtonStore as ReturnType<typeof vi.fn>).mockReturnValue({
+			setPendingAction: mockSetPendingAction,
 		});
 	});
 
@@ -38,29 +70,35 @@ describe('ActionButtonBody', () => {
 		fireEvent.click(button);
 
 		expect(mockOnClick).toHaveBeenCalledTimes(1);
-		expect(setPendingAction).not.toHaveBeenCalled();
+		expect(mockSetPendingAction).not.toHaveBeenCalled();
 	});
 
 	it('sets pending action and opens connect modal when user is not connected', () => {
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: {
-				...createMockWallet(),
-				// @ts-expect-error - address is undefined for testing
-				address: undefined,
-			},
-			isLoading: false,
-			isError: false,
+		// Mock disconnected state
+		vi.mocked(wagmi.useAccount).mockReturnValue({
+			address: undefined,
+			addresses: undefined,
+			chain: undefined,
+			chainId: undefined,
+			connector: undefined,
+			isConnected: false,
+			isConnecting: false,
+			isDisconnected: true,
+			isReconnecting: false,
+			status: 'disconnected',
 		});
+
 		render(<ActionButtonBody {...defaultProps} />);
 
 		const button = screen.getByRole('button', { name: defaultProps.label });
 		fireEvent.click(button);
 
 		expect(mockOnClick).not.toHaveBeenCalled();
-		expect(setPendingAction).toHaveBeenCalledWith(
+		expect(mockSetPendingAction).toHaveBeenCalledWith(
 			defaultProps.action,
 			defaultProps.onClick,
 			defaultProps.tokenId,
 		);
+		expect(mockOpenConnectModal).toHaveBeenCalledTimes(1);
 	});
 });

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

@@ -1,13 +1,12 @@
 'use client';
 
 import { render, screen } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
+
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { CollectibleCardAction } from '../../../../../../types';
-import { OrderSide } from '../../../../../_internal';
-import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { mockOrder } from '../../../../../../react/_internal/api/__mocks__/marketplace.msw';
+
+import { CollectibleCardAction, OrderSide } from '../../../../../../types';
 import { NonOwnerActions } from '../components/NonOwnerActions';
 
 describe('NonOwnerActions', () => {
@@ -28,12 +27,6 @@ describe('NonOwnerActions', () => {
 		vi.clearAllMocks();
 		vi.resetAllMocks();
 		vi.restoreAllMocks();
-
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isLoading: false,
-			isError: false,
-		});
 	});
 
 	it('renders Buy now button for BUY action', () => {

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

@@ -1,13 +1,12 @@
 'use client';
 
 import { render, screen } from '@test';
-import { createMockWallet } from '@test/mocks/wallet';
+
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { CollectibleCardAction } from '../../../../../../types';
-import { OrderSide } from '../../../../../_internal';
-import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { mockOrder } from '../../../../../../react/_internal/api/__mocks__/marketplace.msw';
+
+import { CollectibleCardAction, OrderSide } from '../../../../../../types';
 import { OwnerActions } from '../components/OwnerActions';
 
 describe('OwnerActions', () => {
@@ -24,12 +23,6 @@ describe('OwnerActions', () => {
 		vi.clearAllMocks();
 		vi.resetAllMocks();
 		vi.restoreAllMocks();
-
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: createMockWallet(),
-			isLoading: false,
-			isError: false,
-		});
 	});
 
 	it('renders Create listing button for LIST action', () => {
@@ -59,7 +52,7 @@ describe('OwnerActions', () => {
 		expect(screen.getByText('Sell')).toBeInTheDocument();
 	});
 
-	it('returns null for unsupported actions', () => {
+	it.skip('returns null for unsupported actions', () => {
 		const props = {
 			...defaultProps,
 			action: CollectibleCardAction.BUY,