@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/ssr/create-ssr-client.ts

@@ -1,34 +1,29 @@
-import type { QueryClient } from '@tanstack/react-query';
 import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
+import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
 import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 
 type InitSSRClientArgs = {
 	cookie: string;
 	config: SdkConfig;
-	queryClient: QueryClient;
 };
 
 type InitialState = { wagmi?: State };
 
-const marketplaceConfig = async (
-	config: SdkConfig,
-	queryClient: QueryClient,
-) => {
+const marketplaceConfig = async (config: SdkConfig) => {
 	const configOptions = marketplaceConfigOptions(config);
-	return queryClient.fetchQuery(configOptions);
+	return getQueryClient().fetchQuery(configOptions);
 };
 
 const initialState = async (args: InitSSRClientArgs): Promise<InitialState> => {
-	const marketConfig = await marketplaceConfig(args.config, args.queryClient);
+	const marketConfig = await marketplaceConfig(args.config);
 	const wagmiConfig = createWagmiConfig(marketConfig, args.config, true);
 	return { wagmi: cookieToInitialState(wagmiConfig, args.cookie) };
 };
 
 export const createSSRClient = (args: InitSSRClientArgs) => {
-	const getMarketplaceConfig = async () =>
-		marketplaceConfig(args.config, args.queryClient);
+	const getMarketplaceConfig = async () => marketplaceConfig(args.config);
 	const getInitialState = async () => initialState(args);
 	const config = args.config;
 	return { getInitialState, getMarketplaceConfig, config };

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

@@ -1,12 +1,15 @@
 'use client';
 
 import { observer } from '@legendapp/state/react';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
+import type {
+	CollectibleCardAction,
+	MarketplaceType,
+} from '../../../../../types';
 import type { Order, OrderbookKind } from '../../../../_internal';
 import { NonOwnerActions } from './components/NonOwnerActions';
 import { OwnerActions } from './components/OwnerActions';
 import { useActionButtonLogic } from './hooks/useActionButtonLogic';
-import type { CollectibleCardAction } from './types';
 
 type ActionButtonProps = {
 	chainId: number;
@@ -21,6 +24,15 @@ type ActionButtonProps = {
 	onCannotPerformAction?: (
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
+	marketplaceType: MarketplaceType;
+	salesContractAddress?: Address;
+	prioritizeOwnerActions?: boolean;
+	salePrice?: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	quantityDecimals?: number;
+	quantityRemaining?: number;
 };
 
 export const ActionButton = observer(
@@ -34,6 +46,12 @@ export const ActionButton = observer(
 		highestOffer,
 		lowestListing,
 		onCannotPerformAction,
+		marketplaceType,
+		salesContractAddress,
+		prioritizeOwnerActions,
+		salePrice,
+		quantityDecimals,
+		quantityRemaining,
 	}: ActionButtonProps) => {
 		const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 			tokenId,
@@ -46,7 +64,7 @@ export const ActionButton = observer(
 			return null;
 		}
 
-		if (isOwnerAction) {
+		if (isOwnerAction || prioritizeOwnerActions) {
 			return (
 				<OwnerActions
 					action={action}
@@ -59,15 +77,31 @@ export const ActionButton = observer(
 			);
 		}
 
-		return (
-			<NonOwnerActions
-				action={action}
-				tokenId={tokenId}
-				collectionAddress={collectionAddress}
-				chainId={chainId}
-				orderbookKind={orderbookKind}
-				lowestListing={lowestListing}
-			/>
-		);
+		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,
+					};
+
+		return <NonOwnerActions {...nonOwnerProps} />;
 	},
 );

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

@@ -3,10 +3,10 @@
 import { fireEvent, render, screen } from '@test';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { ActionButtonBody } from '../components/ActionButtonBody';
 import { setPendingAction } from '../store';
-import { CollectibleCardAction } from '../types';
 
 vi.mock('../store', () => ({
 	setPendingAction: vi.fn(),

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

@@ -4,18 +4,23 @@ 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 { NonOwnerActions } from '../components/NonOwnerActions';
-import { CollectibleCardAction } from '../types';
 
 describe('NonOwnerActions', () => {
-	const defaultProps = {
+	const baseProps = {
 		action: CollectibleCardAction.BUY,
 		tokenId: '1',
 		collectionAddress: zeroAddress,
 		chainId: 1,
+	};
+
+	const marketProps = {
+		...baseProps,
+		marketplaceType: 'market' as const,
 		lowestListing: { ...mockOrder, side: OrderSide.listing },
 	};
 
@@ -32,28 +37,36 @@ describe('NonOwnerActions', () => {
 	});
 
 	it('renders Buy now button for BUY action', () => {
-		render(<NonOwnerActions {...defaultProps} />);
+		render(<NonOwnerActions {...marketProps} />);
+		expect(screen.getByText('Buy now')).toBeInTheDocument();
 	});
 
-	it('renders Make an offer button for OFFER action', () => {
+	it('renders Buy now button for SHOP marketplace type', () => {
 		render(
 			<NonOwnerActions
-				{...defaultProps}
-				action={CollectibleCardAction.OFFER}
+				{...baseProps}
+				marketplaceType="shop"
+				salesContractAddress="0x123"
+				salePrice={{ amount: '0.1', currencyAddress: zeroAddress }}
 			/>,
 		);
-		expect(screen.getByText('Make an offer')).toBeInTheDocument();
+		expect(screen.getByText('Buy now')).toBeInTheDocument();
 	});
 
-	it('returns null for unsupported actions', () => {
-		const props = {
-			...defaultProps,
-			action: CollectibleCardAction.LIST,
-		};
+	it('throws error when lowestListing is missing for BUY action in MARKET marketplace type', () => {
+		expect(() => {
+			render(<NonOwnerActions {...baseProps} marketplaceType="market" />);
+		}).toThrow('lowestListing is required for BUY action and MARKET card type');
+	});
 
-		const { container } = render(
-			<NonOwnerActions {...(props as Parameters<typeof NonOwnerActions>[0])} />,
+	it('renders Make an offer button for OFFER action', () => {
+		render(
+			<NonOwnerActions
+				{...baseProps}
+				marketplaceType="market"
+				action={CollectibleCardAction.OFFER}
+			/>,
 		);
-		expect(container).toBeEmptyDOMElement();
+		expect(screen.getByText('Make an offer')).toBeInTheDocument();
 	});
 });

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

@@ -4,11 +4,11 @@ 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 { OwnerActions } from '../components/OwnerActions';
-import { CollectibleCardAction } from '../types';
 
 describe('OwnerActions', () => {
 	const defaultProps = {

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

@@ -3,10 +3,10 @@
 import { renderHook, waitFor } from '@test';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { useActionButtonLogic } from '../hooks/useActionButtonLogic';
 import { actionButtonStore, setPendingAction } from '../store';
-import { CollectibleCardAction } from '../types';
 
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();

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

@@ -3,9 +3,9 @@
 import { useOpenConnectModal } from '@0xsequence/connect';
 import { Button, type IconProps } from '@0xsequence/design-system';
 import type { ComponentType } from 'react';
+import type { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { setPendingAction } from '../store';
-import type { CollectibleCardAction } from '../types';
 
 type ActionButtonBodyProps = {
 	label: 'Buy now' | 'Sell' | 'Make an offer' | 'Create listing' | 'Transfer';

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

@@ -1,37 +1,98 @@
 'use client';
 
-import type { Hex } from 'viem';
-import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
+import type { Address } from 'viem';
+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 { CollectibleCardAction } from '../types';
 import { ActionButtonBody } from './ActionButtonBody';
 
-type NonOwnerActionsProps = {
+type NonOwnerActionsBaseProps = {
 	action: CollectibleCardAction;
 	tokenId: string;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
-	orderbookKind?: OrderbookKind;
+	quantityDecimals?: number;
+	quantityRemaining?: number;
+};
+
+type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
+	marketplaceType: 'shop';
+	salesContractAddress: Address;
+	salePrice: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	lowestListing?: never;
+	orderbookKind?: never;
+};
+
+type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
+	marketplaceType: 'market';
 	lowestListing?: Order;
+	orderbookKind?: OrderbookKind;
+	salesContractAddress?: never;
+	salePrice?: never;
 };
 
-export function NonOwnerActions({
-	action,
-	tokenId,
-	collectionAddress,
-	chainId,
-	orderbookKind,
-	lowestListing,
-}: NonOwnerActionsProps) {
+type NonOwnerActionsProps =
+	| ShopNonOwnerActionsProps
+	| MarketNonOwnerActionsProps;
+
+export function NonOwnerActions(props: NonOwnerActionsProps) {
+	const {
+		action,
+		tokenId,
+		collectionAddress,
+		chainId,
+		quantityDecimals,
+		quantityRemaining,
+		marketplaceType,
+	} = props;
+
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
+	if (marketplaceType === 'shop') {
+		const { salesContractAddress, salePrice } = props;
+
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.BUY}
+				tokenId={tokenId}
+				label="Buy now"
+				onClick={() =>
+					showBuyModal({
+						chainId,
+						collectionAddress,
+						salesContractAddress,
+						items: [
+							{
+								tokenId,
+								quantity: '1',
+							},
+						],
+						marketplaceType: 'shop',
+						salePrice: {
+							amount: salePrice.amount,
+							currencyAddress: salePrice.currencyAddress,
+						},
+						quantityDecimals: quantityDecimals ?? 0,
+						quantityRemaining: quantityRemaining ?? 0,
+					})
+				}
+				icon={SvgCartIcon}
+			/>
+		);
+	}
+
 	if (action === CollectibleCardAction.BUY) {
+		const { lowestListing } = props;
 		if (!lowestListing) {
-			throw new InvalidStepError('BUY', 'lowestListing is required');
+			throw new Error(
+				'lowestListing is required for BUY action and MARKET card type',
+			);
 		}
 
 		return (
@@ -46,6 +107,7 @@ export function NonOwnerActions({
 						collectibleId: tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
+						marketplaceType: 'market',
 					})
 				}
 				icon={SvgCartIcon}
@@ -54,6 +116,7 @@ export function NonOwnerActions({
 	}
 
 	if (action === CollectibleCardAction.OFFER) {
+		const { orderbookKind } = props;
 		return (
 			<ActionButtonBody
 				action={CollectibleCardAction.OFFER}

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

@@ -1,11 +1,11 @@
 '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 { CollectibleCardAction } from '../types';
 import { ActionButtonBody } from './ActionButtonBody';
 
 type OwnerActionsProps = {

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

@@ -1,13 +1,13 @@
 'use client';
 
 import { useEffect } from 'react';
+import { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import {
 	actionButtonStore,
 	clearPendingAction,
 	executePendingActionIfExists,
 } from '../store';
-import { CollectibleCardAction } from '../types';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;

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

@@ -0,0 +1,17 @@
+'use client';
+
+import type { CollectibleCardProps } from './types';
+import { MarketCard } from './variants/MarketCard';
+
+import { ShopCard } from './variants/ShopCard';
+
+export function CollectibleCard(props: CollectibleCardProps) {
+	switch (props.marketplaceType) {
+		case 'shop':
+			return <ShopCard {...props} />;
+		// biome-ignore lint/complexity/noUselessSwitchCase: <explanation>
+		case 'market':
+		default:
+			return <MarketCard {...props} />;
+	}
+}

package/src/react/ui/components/marketplace-collectible-card/CollectibleCardSkeleton.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from '@0xsequence/design-system';
+
+export function MarketplaceCollectibleCardSkeleton() {
+	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>
+	);
+}