@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,149 @@
+import { cleanup, render, renderHook, waitFor } from '@test';
+import { TEST_COLLECTIBLE } from '@test/const';
+import { createMockWallet } from '@test/mocks/wallet';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useMakeOfferModal } from '..';
+import { CurrencyStatus, WalletKind } from '../../../../_internal';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
+import { MakeOfferModal } from '../Modal';
+import { makeOfferModal$ } from '../store';
+
+const defaultArgs = {
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	collectibleId: TEST_COLLECTIBLE.collectibleId,
+};
+
+// Mock currency object with all required properties
+const mockCurrency = {
+	chainId: 1,
+	contractAddress: '0x123',
+	status: CurrencyStatus.active,
+	name: 'Test Token',
+	symbol: 'TEST',
+	decimals: 18,
+	imageUrl: 'https://example.com/test.png',
+	exchangeRate: 1,
+	defaultChainCurrency: false,
+	nativeCurrency: false,
+	createdAt: new Date().toISOString(),
+	updatedAt: new Date().toISOString(),
+};
+
+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,
+		});
+
+		// Render the modal
+		const { result } = renderHook(() => useMakeOfferModal());
+		result.current.show(defaultArgs);
+
+		const { queryByText } = render(<MakeOfferModal />);
+
+		// Wait for the component to update
+		await waitFor(() => {
+			// The Approve TOKEN button should not exist
+			const approveButton = queryByText('Approve TOKEN');
+			expect(approveButton).toBeNull();
+
+			const makeOfferButton = queryByText('Make offer');
+			expect(makeOfferButton).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,
+		});
+
+		// Render the modal
+		const { result } = renderHook(() => useMakeOfferModal());
+		result.current.show(defaultArgs);
+
+		const { getByText } = render(<MakeOfferModal />);
+
+		await waitFor(() => {
+			// find the Approve TOKEN button
+			const approveButton = getByText('Approve TOKEN');
+			expect(approveButton).toBeDefined();
+
+			// main button is disabled when approval step exists
+			const makeOfferButton = getByText('Make offer');
+			expect(makeOfferButton.closest('button')).toHaveAttribute('disabled');
+		});
+	});
+
+	it('should show/hide CTAs based on approval step existence in store', async () => {
+		// test case 1: approval.exist = true
+		makeOfferModal$.open(defaultArgs);
+		makeOfferModal$.offerPrice.set({
+			amountRaw: '1000000000000000000',
+			currency: mockCurrency,
+		});
+		makeOfferModal$.offerPriceChanged.set(true);
+		makeOfferModal$.steps.approval.exist.set(true);
+
+		const { getByText, unmount } = render(<MakeOfferModal />);
+
+		await waitFor(() => {
+			// Approve TOKEN button should be visible
+			const approveButton = getByText('Approve TOKEN');
+			expect(approveButton).toBeDefined();
+
+			// Make offer button should be disabled
+			const makeOfferButton = getByText('Make offer');
+			expect(makeOfferButton.closest('button')).toHaveAttribute('disabled');
+		});
+
+		unmount();
+		cleanup();
+
+		// test case 2: approval.exist = false
+		makeOfferModal$.open(defaultArgs);
+		makeOfferModal$.offerPrice.set({
+			amountRaw: '1000000000000000000',
+			currency: mockCurrency,
+		});
+		makeOfferModal$.offerPriceChanged.set(true);
+		makeOfferModal$.steps.approval.exist.set(false);
+
+		const { queryByText, getByText: getByText2 } = render(<MakeOfferModal />);
+
+		await waitFor(() => {
+			// Approve TOKEN button should not exist or be hidden
+			const approveButton = queryByText('Approve TOKEN');
+			expect(approveButton).toBeNull();
+
+			// Make offer button should be enabled
+			const makeOfferButton = getByText2('Make offer');
+			expect(makeOfferButton.closest('button')).not.toHaveAttribute('disabled');
+		});
+
+		makeOfferModal$.close();
+	});
+});

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

@@ -0,0 +1,82 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
+import { dateToUnixTime } from '../../../../../utils/date';
+import {
+	type ContractType,
+	type CreateReq,
+	type GenerateOfferTransactionArgs,
+	type OrderbookKind,
+	type QueryArg,
+	StepType,
+	getMarketplaceClient,
+} from '../../../../_internal';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../hooks/useConfig';
+
+export interface UseGetTokenApprovalDataArgs {
+	chainId: number;
+	tokenId: string;
+	collectionAddress: string;
+	currencyAddress: string;
+	contractType: ContractType;
+	orderbook: OrderbookKind;
+	query?: QueryArg;
+}
+
+const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
+
+export const useGetTokenApprovalData = (
+	params: UseGetTokenApprovalDataArgs,
+) => {
+	const config = useConfig();
+	const { wallet } = useWallet();
+	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+
+	const offer = {
+		tokenId: params.tokenId,
+		quantity: '1',
+		currencyAddress: params.currencyAddress,
+		pricePerToken: '1',
+		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
+	} satisfies CreateReq;
+
+	const isEnabled = wallet && params.query?.enabled !== false;
+
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['token-approval-data', params.currencyAddress],
+		queryFn: isEnabled
+			? async () => {
+					const args = {
+						collectionAddress: params.collectionAddress,
+						maker: await wallet.address(),
+						walletType: wallet.walletKind,
+						contractType: params.contractType,
+						orderbook: params.orderbook,
+						offer,
+					} satisfies GenerateOfferTransactionArgs;
+					const steps = await marketplaceClient
+						.generateOfferTransaction(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 && !!params.currencyAddress,
+	});
+
+	return {
+		data,
+		isLoading,
+		isSuccess,
+	};
+};

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import type { Observable } from '@legendapp/state';
+import { useEffect } from 'react';
+import { OrderbookKind } from '../../../../../types';
+import type { TransactionSteps } from '../../../../_internal';
+import type { OfferInput } from '../../../../_internal/types';
+import { useMarketplaceConfig } from '../../../../hooks';
+import type { ModalCallbacks } from '../../_internal/types';
+import { useGetTokenApprovalData } from './useGetTokenApproval';
+import { useTransactionSteps } from './useTransactionSteps';
+
+interface UseMakeOfferArgs {
+	offerInput: OfferInput;
+	chainId: number;
+	collectionAddress: string;
+	orderbookKind?: OrderbookKind;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useMakeOffer = ({
+	offerInput,
+	chainId,
+	collectionAddress,
+	orderbookKind,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseMakeOfferArgs) => {
+	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
+		useMarketplaceConfig();
+
+	const collectionConfig = marketplaceConfig?.collections.find(
+		(c) => c.address === collectionAddress,
+	);
+
+	orderbookKind =
+		orderbookKind ??
+		collectionConfig?.destinationMarketplace ??
+		OrderbookKind.sequence_marketplace_v2;
+
+	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
+		useGetTokenApprovalData({
+			chainId,
+			tokenId: offerInput.offer.tokenId,
+			collectionAddress,
+			currencyAddress: offerInput.offer.currencyAddress,
+			contractType: offerInput.contractType,
+			orderbook: orderbookKind,
+			query: {
+				enabled: !marketplaceIsLoading,
+			},
+		});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (tokenApproval?.step && !tokenApprovalIsLoading) {
+			steps$.approval.exist.set(true);
+		}
+	}, [tokenApproval?.step, tokenApprovalIsLoading]);
+
+	const { generatingSteps, executeApproval, makeOffer } = useTransactionSteps({
+		offerInput,
+		chainId,
+		collectionAddress,
+		orderbookKind,
+		callbacks,
+		closeMainModal,
+		steps$,
+	});
+
+	return {
+		isLoading: generatingSteps,
+		executeApproval,
+		makeOffer,
+		tokenApprovalStepExists: tokenApproval?.step !== null,
+		tokenApprovalIsLoading,
+	};
+};

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -0,0 +1,273 @@
+import type { Observable } from '@legendapp/state';
+import { type Address, type Hex, formatUnits } from 'viem';
+import { OrderbookKind, type Price } from '../../../../../types';
+import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
+import {
+	type Step,
+	StepType,
+	type TransactionSteps,
+	balanceQueries,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../../../../_internal';
+import { useAnalytics } from '../../../../_internal/databeat';
+import { TransactionType } from '../../../../_internal/types';
+import type { OfferInput } from '../../../../_internal/types';
+import type {
+	SignatureStep,
+	TransactionStep,
+} from '../../../../_internal/utils';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConfig, useCurrency } from '../../../../hooks';
+import { useGenerateOfferTransaction } from '../../../../hooks/useGenerateOfferTransaction';
+import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
+import type { ModalCallbacks } from '../../_internal/types';
+export type ExecutionState = 'approval' | 'offer' | null;
+
+interface UseTransactionStepsArgs {
+	offerInput: OfferInput;
+	chainId: number;
+	collectionAddress: string;
+	orderbookKind?: OrderbookKind;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useTransactionSteps = ({
+	offerInput,
+	chainId,
+	collectionAddress,
+	orderbookKind = OrderbookKind.sequence_marketplace_v2,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseTransactionStepsArgs) => {
+	const { wallet } = useWallet();
+	const expiry = new Date(Number(offerInput.offer.expiry) * 1000);
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	const sdkConfig = useConfig();
+	const analytics = useAnalytics();
+	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const { generateOfferTransactionAsync, isPending: generatingSteps } =
+		useGenerateOfferTransaction({
+			chainId,
+			onSuccess: (steps) => {
+				if (!steps) return;
+			},
+		});
+	const { data: currency } = useCurrency({
+		chainId,
+		currencyAddress: offerInput.offer.currencyAddress,
+	});
+
+	const getOfferSteps = async () => {
+		if (!wallet) return;
+
+		try {
+			const address = await wallet.address();
+
+			const steps = await generateOfferTransactionAsync({
+				collectionAddress,
+				maker: address,
+				walletType: wallet.walletKind,
+				contractType: offerInput.contractType,
+				orderbook: orderbookKind,
+				offer: {
+					...offerInput.offer,
+					expiry,
+				},
+			});
+
+			return steps;
+		} catch (error) {
+			if (callbacks?.onError) {
+				callbacks.onError(error as Error);
+			} else {
+				console.debug('onError callback not provided:', error);
+			}
+		}
+	};
+
+	const executeApproval = async () => {
+		if (!wallet) return;
+
+		try {
+			steps$.approval.isExecuting.set(true);
+			const approvalStep = await getOfferSteps().then((steps) =>
+				steps?.find((step) => step.id === StepType.tokenApproval),
+			);
+
+			const hash = await wallet.handleSendTransactionStep(
+				Number(chainId),
+				approvalStep as TransactionStep,
+			);
+
+			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+			steps$.approval.isExecuting.set(false);
+			steps$.approval.exist.set(false);
+		} catch (error) {
+			steps$.approval.isExecuting.set(false);
+		}
+	};
+
+	const makeOffer = async ({
+		isTransactionExecuting,
+	}: {
+		isTransactionExecuting: boolean;
+	}) => {
+		if (!wallet) return;
+
+		try {
+			steps$.transaction.isExecuting.set(isTransactionExecuting);
+			const steps = await getOfferSteps();
+			const transactionStep = steps?.find(
+				(step) => step.id === StepType.createOffer,
+			);
+			const signatureStep = steps?.find(
+				(step) => step.id === StepType.signEIP712,
+			);
+
+			console.debug('transactionStep', transactionStep);
+			console.debug('signatureStep', signatureStep);
+
+			if (!transactionStep && !signatureStep) {
+				throw new Error('No transaction or signature step found');
+			}
+
+			let hash: Hex | undefined;
+			let orderId: string | undefined;
+
+			if (transactionStep) {
+				hash = await executeTransaction({ transactionStep });
+			}
+
+			if (signatureStep) {
+				orderId = await executeSignature({ signatureStep });
+			}
+
+			closeMainModal();
+
+			showTransactionStatusModal({
+				type: TransactionType.OFFER,
+				collectionAddress: collectionAddress as Address,
+				chainId,
+				collectibleId: offerInput.offer.tokenId,
+				hash,
+				orderId,
+				callbacks,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					collectableKeys.highestOffers,
+					collectableKeys.offers,
+					collectableKeys.offersCount,
+					collectableKeys.userBalances,
+				],
+				price: {
+					amountRaw: offerInput.offer.pricePerToken,
+					currency,
+				} as Price,
+			});
+
+			if (hash) {
+				await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+			}
+
+			if (orderId) {
+				// no need to wait for receipt, because the order is already created
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+			}
+
+			if (hash || orderId) {
+				const currencyDecimal = currency?.decimals || 0;
+				const currencyValueRaw = Number(offerInput.offer.pricePerToken);
+				const currencyValueDecimal = Number(
+					formatUnits(BigInt(currencyValueRaw), currencyDecimal),
+				);
+
+				let requestId = orderId;
+
+				if (
+					hash &&
+					(orderbookKind === OrderbookKind.sequence_marketplace_v1 ||
+						orderbookKind === OrderbookKind.sequence_marketplace_v2)
+				) {
+					requestId = await getSequenceMarketplaceRequestId(
+						hash,
+						wallet.publicClient,
+						await wallet.address(),
+					);
+				}
+
+				analytics.trackCreateOffer({
+					props: {
+						orderbookKind,
+						collectionAddress,
+						currencyAddress: offerInput.offer.currencyAddress,
+						currencySymbol: currency?.symbol || '',
+						chainId: chainId.toString(),
+						requestId: requestId || '',
+						txnHash: hash || '',
+					},
+					nums: {
+						currencyValueDecimal,
+						currencyValueRaw,
+					},
+				});
+			}
+		} catch (error) {
+			steps$.transaction.isExecuting.set(false);
+			steps$.transaction.exist.set(false);
+
+			if (callbacks?.onError && typeof callbacks.onError === 'function') {
+				callbacks.onError(error as Error);
+			}
+		}
+	};
+
+	const executeTransaction = async ({
+		transactionStep,
+	}: {
+		transactionStep: Step;
+	}) => {
+		if (!wallet) return;
+
+		const hash = await wallet.handleSendTransactionStep(
+			Number(chainId),
+			transactionStep as TransactionStep,
+		);
+
+		return hash;
+	};
+
+	const executeSignature = async ({
+		signatureStep,
+	}: {
+		signatureStep: Step;
+	}) => {
+		if (!wallet) return;
+
+		const signature = await wallet.handleSignMessageStep(
+			signatureStep as SignatureStep,
+		);
+
+		const result = await marketplaceClient.execute({
+			signature: signature as string,
+			method: signatureStep.post?.method as string,
+			endpoint: signatureStep.post?.endpoint as string,
+			body: signatureStep.post?.body,
+		});
+
+		return result.orderId;
+	};
+
+	return {
+		generatingSteps,
+		executeApproval,
+		makeOffer,
+	};
+};

package/src/react/ui/modals/MakeOfferModal/index.tsx

@@ -0,0 +1,13 @@
+import type { ModalCallbacks } from '../_internal/types';
+import { type OpenMakeOfferModalArgs, makeOfferModal$ } from './store';
+
+export type ShowMakeOfferModalArgs = Exclude<
+	OpenMakeOfferModalArgs,
+	'callbacks'
+>;
+
+export const useMakeOfferModal = (callbacks?: ModalCallbacks) => ({
+	show: (args: ShowMakeOfferModalArgs) =>
+		makeOfferModal$.open({ ...args, callbacks }),
+	close: () => makeOfferModal$.close(),
+});

package/src/react/ui/modals/MakeOfferModal/store.ts

@@ -0,0 +1,94 @@
+import { observable } from '@legendapp/state';
+import { addDays } from 'date-fns/addDays';
+import type { Hex } from 'viem';
+import type { Currency, OrderbookKind, Price } from '../../../../types';
+import type { CollectionType, TransactionSteps } from '../../../_internal';
+import type { BaseModalState, ModalCallbacks } from '../_internal/types';
+
+type MakeOfferState = BaseModalState & {
+	orderbookKind?: OrderbookKind;
+	collectibleId: string;
+	offerPrice: Price;
+	offerPriceChanged: boolean;
+	quantity: string;
+	expiry: Date;
+	invalidQuantity: boolean;
+	collectionType?: CollectionType;
+	steps: TransactionSteps;
+	offerIsBeingProcessed: boolean;
+};
+
+export type OpenMakeOfferModalArgs = {
+	collectionAddress: Hex;
+	chainId: number;
+	collectibleId: string;
+	orderbookKind?: OrderbookKind;
+	callbacks?: ModalCallbacks;
+};
+
+type Actions = {
+	open: (args: OpenMakeOfferModalArgs) => void;
+	close: () => void;
+};
+
+const offerPrice = {
+	amountRaw: '0',
+	currency: {} as Currency,
+};
+
+const approval = {
+	exist: false,
+	isExecuting: false,
+	execute: () => Promise.resolve(),
+};
+
+const transaction = {
+	exist: false,
+	isExecuting: false,
+	execute: () => Promise.resolve(),
+};
+
+const steps = {
+	approval: { ...approval },
+	transaction: { ...transaction },
+};
+
+const initialState: MakeOfferState = {
+	isOpen: false,
+	collectionAddress: '' as Hex,
+	chainId: 0,
+	collectibleId: '',
+	orderbookKind: undefined,
+	callbacks: undefined,
+	offerPrice: { ...offerPrice },
+	offerPriceChanged: false,
+	quantity: '1',
+	invalidQuantity: false,
+	expiry: new Date(addDays(new Date(), 7).toJSON()),
+	collectionType: undefined,
+	steps: { ...steps },
+	offerIsBeingProcessed: false,
+};
+
+const actions: Actions = {
+	open: (args) => {
+		makeOfferModal$.collectionAddress.set(args.collectionAddress);
+		makeOfferModal$.chainId.set(args.chainId);
+		makeOfferModal$.collectibleId.set(args.collectibleId);
+		makeOfferModal$.orderbookKind.set(args.orderbookKind);
+		makeOfferModal$.callbacks.set(args.callbacks);
+		makeOfferModal$.isOpen.set(true);
+	},
+	close: () => {
+		makeOfferModal$.isOpen.set(false);
+		makeOfferModal$.set({ ...initialState, ...actions });
+		makeOfferModal$.steps.set({ ...steps });
+		makeOfferModal$.offerPrice.set({ ...offerPrice });
+		makeOfferModal$.offerIsBeingProcessed.set(false);
+	},
+};
+
+export const makeOfferModal$ = observable<MakeOfferState & Actions>({
+	...initialState,
+	...actions,
+});