@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/ui/modals/SellModal/Modal.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { getNetwork } from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
+import { Show, observer } from '@legendapp/state/react';
+import { parseUnits } from 'viem';
+import type { Price } from '../../../../types';
+import type { FeeOption } from '../../../../types/waas-types';
+import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
+import { useWallet } from '../../../_internal/wallet/useWallet';
+import { useCollection, useCurrency } from '../../../hooks';
+import {
+	ActionModal,
+	type ActionModalProps,
+} from '../_internal/components/actionModal/ActionModal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
+import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import TokenPreview from '../_internal/components/tokenPreview';
+import TransactionDetails from '../_internal/components/transactionDetails';
+import TransactionHeader from '../_internal/components/transactionHeader';
+import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
+import { useSell } from './hooks/useSell';
+import { sellModal$ } from './store';
+
+export const SellModal = () => {
+	return <Show if={sellModal$.isOpen}>{() => <Modal />}</Show>;
+};
+
+const Modal = observer(() => {
+	const { tokenId, collectionAddress, chainId, order, callbacks } =
+		sellModal$.get();
+	const steps$ = sellModal$.steps;
+	const { data: collectible } = useCollection({
+		chainId,
+		collectionAddress,
+	});
+
+	const {
+		data: collection,
+		isLoading: collectionLoading,
+		isError: collectionError,
+	} = useCollection({
+		chainId,
+		collectionAddress,
+	});
+	const {
+		data: currency,
+		isLoading: currencyLoading,
+		isError: currencyError,
+	} = useCurrency({
+		chainId,
+		currencyAddress: order?.priceCurrencyAddress ?? '',
+	});
+	const { wallet } = useWallet();
+	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();
+	const network = getNetwork(Number(chainId));
+	const isTestnet = network.type === NetworkType.TESTNET;
+	const isProcessing = sellModal$.sellIsBeingProcessed.get();
+	const isWaaS = wallet?.isWaaS;
+	const { shouldHideActionButton: shouldHideSellButton } =
+		useSelectWaasFeeOptions({
+			chainId,
+			isProcessing,
+			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+			selectedFeeOption:
+				selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		});
+
+	const { isLoading, executeApproval, sell } = useSell({
+		collectionAddress,
+		chainId,
+		collectibleId: tokenId,
+		marketplace: order?.marketplace as MarketplaceKind,
+		ordersData: [
+			{
+				orderId: order?.orderId ?? '',
+				quantity: order?.quantityRemaining
+					? parseUnits(
+							order.quantityRemaining,
+							collectible?.decimals || 0,
+						).toString()
+					: '1',
+				pricePerToken: order?.priceAmount ?? '',
+				currencyAddress: order?.priceCurrencyAddress ?? '',
+			},
+		],
+		callbacks,
+		closeMainModal: () => sellModal$.close(),
+		steps$: steps$,
+	});
+	const modalLoading = collectionLoading || currencyLoading;
+
+	if (
+		(collectionError || order === undefined || currencyError) &&
+		!modalLoading
+	) {
+		return (
+			<ErrorModal
+				isOpen={sellModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={sellModal$.close}
+				title="You have an offer"
+			/>
+		);
+	}
+
+	const handleSell = async () => {
+		sellModal$.sellIsBeingProcessed.set(true);
+
+		try {
+			if (wallet?.isWaaS) {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await sell({
+				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+			});
+		} catch (error) {
+			console.error('Sell failed:', error);
+		} finally {
+			sellModal$.sellIsBeingProcessed.set(false);
+			steps$.transaction.isExecuting.set(false);
+		}
+	};
+
+	// if it's testnet, we don't need to show the fee options
+	const sellCtaLabel = isProcessing
+		? isWaaS && !isTestnet
+			? 'Loading fee options'
+			: 'Accept'
+		: 'Accept';
+
+	const ctas = [
+		{
+			label: 'Approve TOKEN',
+			onClick: async () => await executeApproval(),
+			hidden: !steps$.approval.exist.get(),
+			pending: steps$.approval.isExecuting.get(),
+			variant: 'glass' as const,
+			disabled: isLoading || order?.quantityRemaining === '0',
+		},
+		{
+			label: sellCtaLabel,
+			onClick: () => handleSell(),
+			pending:
+				steps$?.transaction.isExecuting.get() ||
+				sellModal$.sellIsBeingProcessed.get(),
+			disabled:
+				isLoading ||
+				steps$.approval.isExecuting.get() ||
+				steps$.approval.exist.get() ||
+				order?.quantityRemaining === '0',
+		},
+	] satisfies ActionModalProps['ctas'];
+
+	const showWaasFeeOptions =
+		wallet?.isWaaS &&
+		sellModal$.sellIsBeingProcessed.get() &&
+		feeOptionsVisible;
+
+	return (
+		<ActionModal
+			isOpen={sellModal$.isOpen.get()}
+			chainId={Number(chainId)}
+			onClose={() => {
+				sellModal$.close();
+				selectWaasFeeOptions$.hide();
+				steps$.transaction.isExecuting.set(false);
+			}}
+			title="You have an offer"
+			ctas={ctas}
+			modalLoading={modalLoading}
+			spinnerContainerClassname="h-[104px]"
+			hideCtas={shouldHideSellButton}
+		>
+			<TransactionHeader
+				title="Offer received"
+				currencyImageUrl={currency?.imageUrl}
+				date={order && new Date(order.createdAt)}
+			/>
+			<TokenPreview
+				collectionName={collection?.name}
+				collectionAddress={collectionAddress}
+				collectibleId={tokenId}
+				chainId={chainId}
+			/>
+			<TransactionDetails
+				collectibleId={tokenId}
+				collectionAddress={collectionAddress}
+				chainId={chainId}
+				includeMarketplaceFee={true}
+				price={
+					currency
+						? ({
+								amountRaw: order?.priceAmount,
+								currency,
+							} as Price)
+						: undefined
+				}
+				currencyImageUrl={currency?.imageUrl}
+			/>
+
+			{showWaasFeeOptions && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						sellModal$.sellIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Accepting offer..."
+				/>
+			)}
+		</ActionModal>
+	);
+});

package/src/react/ui/modals/SellModal/__tests__/Modal.test.tsx

@@ -0,0 +1,103 @@
+import { cleanup, render, renderHook, screen, waitFor } from '@test';
+import { TEST_COLLECTIBLE } from '@test/const';
+import { createMockWallet } from '@test/mocks/wallet';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useSellModal } from '..';
+import { StepType, WalletKind } from '../../../../_internal';
+import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
+import { SellModal } from '../Modal';
+import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+
+const defaultArgs = {
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	tokenId: TEST_COLLECTIBLE.collectibleId,
+	order: mockOrder,
+};
+
+describe('MakeOfferModal', () => {
+	const mockWallet = createMockWallet();
+
+	beforeEach(() => {
+		cleanup();
+		// Reset all mocks
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+		vi.restoreAllMocks();
+	});
+
+	it('should show main button if there is no approval step', async () => {
+		// Mock sequence wallet
+		const sequenceWallet = {
+			...mockWallet,
+			walletKind: WalletKind.sequence,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: sequenceWallet,
+			isLoading: false,
+			isError: false,
+		});
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: null,
+			},
+			isLoading: false,
+			isSuccess: true,
+		});
+
+		// Render the modal
+		const { result } = renderHook(() => useSellModal());
+		result.current.show(defaultArgs);
+
+		render(<SellModal />);
+
+		// Wait for the component to update
+		await waitFor(() => {
+			// The Approve TOKEN button should not exist
+			expect(screen.queryByText('Approve TOKEN')).toBeNull();
+
+			// The Accept button should exist
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDefined();
+		});
+	});
+
+	it('(non-sequence wallets) should show approve token button if there is an approval step, disable main button', async () => {
+		const nonSequenceWallet = {
+			...mockWallet,
+			walletKind: 'unknown' as WalletKind,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: nonSequenceWallet,
+			isLoading: false,
+			isError: false,
+		});
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: createMockStep(StepType.tokenApproval),
+			},
+			isLoading: false,
+			isSuccess: true,
+		});
+
+		// Render the modal
+		const { result } = renderHook(() => useSellModal());
+		result.current.show(defaultArgs);
+
+		render(<SellModal />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Approve TOKEN')).toBeDefined();
+
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDefined();
+			expect(screen.getByRole('button', { name: 'Accept' })).toBeDisabled();
+		});
+	});
+});

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -0,0 +1,75 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
+import {
+	type GenerateSellTransactionArgs,
+	type MarketplaceKind,
+	type OrderData,
+	StepType,
+	getMarketplaceClient,
+} from '../../../../_internal';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../hooks/useConfig';
+import { useFees } from '../../BuyModal/hooks/useFees';
+
+export interface UseGetTokenApprovalDataArgs {
+	chainId: number;
+	collectionAddress: string;
+	marketplace: MarketplaceKind;
+	ordersData: Array<OrderData>;
+}
+
+export const useGetTokenApprovalData = (
+	params: UseGetTokenApprovalDataArgs,
+) => {
+	const config = useConfig();
+	const { wallet } = useWallet();
+	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+	const { amount, receiver } = useFees({
+		chainId: Number(params.chainId),
+		collectionAddress: params.collectionAddress,
+	});
+
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['token-approval-data', params.ordersData],
+		queryFn: wallet
+			? async () => {
+					const address = await wallet.address();
+					const args = {
+						collectionAddress: params.collectionAddress,
+						walletType: wallet.walletKind,
+						seller: address,
+						marketplace: params.marketplace,
+						ordersData: params.ordersData,
+						additionalFees: [
+							{
+								amount,
+								receiver,
+							},
+						],
+					} satisfies GenerateSellTransactionArgs;
+					const steps = await marketplaceClient
+						.generateSellTransaction(args)
+						.then((resp) => resp.steps);
+
+					const tokenApprovalStep = steps.find(
+						(step) => step.id === StepType.tokenApproval,
+					);
+					if (!tokenApprovalStep) {
+						return {
+							step: null,
+						};
+					}
+
+					return {
+						step: tokenApprovalStep,
+					};
+				}
+			: skipToken,
+		enabled: !!wallet && !!params.collectionAddress,
+	});
+
+	return {
+		data,
+		isLoading,
+		isSuccess,
+	};
+};

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import type { Observable } from '@legendapp/state';
+import { useEffect } from 'react';
+import type { MarketplaceKind, TransactionSteps } from '../../../../_internal';
+import type { ModalCallbacks } from '../../_internal/types';
+import { useGetTokenApprovalData } from './useGetTokenApproval';
+import { useTransactionSteps } from './useTransactionSteps';
+
+export type SellOrder = {
+	orderId: string;
+	quantity: string;
+	pricePerToken: string;
+	currencyAddress: string;
+};
+
+interface UseSellArgs {
+	collectibleId: string;
+	chainId: number;
+	collectionAddress: string;
+	marketplace: MarketplaceKind;
+	ordersData: Array<SellOrder>;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useSell = ({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	marketplace,
+	ordersData,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseSellArgs) => {
+	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
+		useGetTokenApprovalData({
+			chainId,
+			collectionAddress,
+			ordersData,
+			marketplace,
+		});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (tokenApproval?.step && !tokenApprovalIsLoading) {
+			steps$.approval.exist.set(true);
+		}
+	}, [tokenApproval?.step, tokenApprovalIsLoading]);
+
+	const { generatingSteps, executeApproval, sell } = useTransactionSteps({
+		collectibleId,
+		chainId,
+		collectionAddress,
+		marketplace,
+		ordersData,
+		callbacks,
+		closeMainModal,
+		steps$,
+	});
+
+	return {
+		isLoading: generatingSteps,
+		executeApproval,
+		sell,
+		tokenApprovalStepExists: tokenApproval?.step !== null,
+		tokenApprovalIsLoading,
+	};
+};