@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,271 @@
+'use client';
+
+import { Show, observer } from '@legendapp/state/react';
+import { parseUnits } from 'viem';
+import { useAccount } from 'wagmi';
+import type { FeeOption } from '../../../../types/waas-types';
+import { dateToUnixTime } from '../../../../utils/date';
+import type { ContractType } from '../../../_internal';
+import { useWallet } from '../../../_internal/wallet/useWallet';
+import {
+	useBalanceOfCollectible,
+	useCollectible,
+	useCollection,
+	useCurrencies,
+} from '../../../hooks';
+import {
+	ActionModal,
+	type ActionModalProps,
+} from '../_internal/components/actionModal/ActionModal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
+import FloorPriceText from '../_internal/components/floorPriceText';
+import PriceInput from '../_internal/components/priceInput';
+import QuantityInput from '../_internal/components/quantityInput';
+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 { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
+import { useCreateListing } from './hooks/useCreateListing';
+import { createListingModal$ } from './store';
+
+export const CreateListingModal = () => {
+	return <Show if={createListingModal$.isOpen}>{() => <Modal />}</Show>;
+};
+
+const Modal = observer(() => {
+	const state = createListingModal$.get();
+	const {
+		collectionAddress,
+		chainId,
+		listingPrice,
+		collectibleId,
+		orderbookKind,
+		callbacks,
+		listingIsBeingProcessed,
+	} = state;
+	const steps$ = createListingModal$.steps;
+	const { wallet } = useWallet();
+
+	const {
+		shouldHideActionButton: shouldHideListButton,
+		waasFeeOptionsShown,
+		getActionLabel,
+		isTestnet,
+	} = useSelectWaasFeeOptions({
+		chainId,
+		isProcessing: listingIsBeingProcessed,
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
+
+	const {
+		data: collectible,
+		isLoading: collectableIsLoading,
+		isError: collectableIsError,
+	} = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+	const {
+		data: currencies,
+		isLoading: currenciesLoading,
+		isError: currenciesIsError,
+	} = useCurrencies({
+		chainId,
+		collectionAddress,
+		includeNativeCurrency: true,
+	});
+	const {
+		data: collection,
+		isLoading: collectionIsLoading,
+		isError: collectionIsError,
+	} = useCollection({
+		chainId,
+		collectionAddress,
+	});
+	const modalLoading =
+		collectableIsLoading || collectionIsLoading || currenciesLoading;
+
+	const { address } = useAccount();
+
+	const { data: balance } = useBalanceOfCollectible({
+		chainId,
+		collectionAddress,
+		collectableId: collectibleId,
+		userAddress: address ?? undefined,
+	});
+
+	const { isLoading, executeApproval, createListing, tokenApprovalIsLoading } =
+		useCreateListing({
+			listingInput: {
+				contractType: collection?.type as ContractType,
+				listing: {
+					tokenId: collectibleId,
+					quantity: parseUnits(
+						createListingModal$.quantity.get(),
+						collectible?.decimals || 0,
+					).toString(),
+					expiry: dateToUnixTime(createListingModal$.expiry.get()),
+					currencyAddress: listingPrice.currency.contractAddress,
+					pricePerToken: listingPrice.amountRaw,
+				},
+			},
+			chainId,
+			collectionAddress,
+			orderbookKind,
+			callbacks,
+			closeMainModal: () => createListingModal$.close(),
+			steps$: steps$,
+		});
+
+	if (collectableIsError || collectionIsError || currenciesIsError) {
+		return (
+			<ErrorModal
+				isOpen={createListingModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={createListingModal$.close}
+				title="List item for sale"
+			/>
+		);
+	}
+
+	if (!modalLoading && (!currencies || currencies.length === 0)) {
+		return (
+			<ErrorModal
+				isOpen={createListingModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={createListingModal$.close}
+				title="List item for sale"
+				message="No currencies are configured for the marketplace, contact the marketplace owners"
+			/>
+		);
+	}
+
+	const handleCreateListing = async () => {
+		createListingModal$.listingIsBeingProcessed.set(true);
+
+		try {
+			if (wallet?.isWaaS) {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await createListing({
+				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+			});
+		} catch (error) {
+			console.error('Create listing failed:', error);
+		} finally {
+			createListingModal$.listingIsBeingProcessed.set(false);
+			steps$.transaction.isExecuting.set(false);
+		}
+	};
+
+	const listCtaLabel = getActionLabel('List item for sale');
+
+	const ctas = [
+		{
+			label: 'Approve TOKEN',
+			onClick: async () => await executeApproval(),
+			hidden: !steps$.approval.exist.get(),
+			pending: steps$?.approval.isExecuting.get(),
+			variant: 'glass' as const,
+			disabled:
+				createListingModal$.invalidQuantity.get() ||
+				listingPrice.amountRaw === '0' ||
+				steps$?.approval.isExecuting.get() ||
+				tokenApprovalIsLoading ||
+				isLoading,
+		},
+		{
+			label: listCtaLabel,
+			onClick: handleCreateListing,
+			pending:
+				steps$?.transaction.isExecuting.get() ||
+				createListingModal$.listingIsBeingProcessed.get(),
+			testid: 'create-listing-submit-button',
+			disabled:
+				steps$.approval.exist.get() ||
+				tokenApprovalIsLoading ||
+				listingPrice.amountRaw === '0' ||
+				createListingModal$.invalidQuantity.get() ||
+				isLoading ||
+				listingIsBeingProcessed,
+		},
+	] satisfies ActionModalProps['ctas'];
+
+	return (
+		<ActionModal
+			isOpen={createListingModal$.isOpen.get()}
+			chainId={Number(chainId)}
+			onClose={() => {
+				createListingModal$.close();
+				selectWaasFeeOptions$.hide();
+			}}
+			title="List item for sale"
+			ctas={ctas}
+			modalLoading={modalLoading}
+			spinnerContainerClassname="h-[220px]"
+			hideCtas={shouldHideListButton}
+		>
+			<TokenPreview
+				collectionName={collection?.name}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
+				chainId={chainId}
+			/>
+			<div className="flex w-full flex-col gap-1">
+				<PriceInput
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					$price={createListingModal$.listingPrice}
+					disabled={shouldHideListButton}
+				/>
+
+				{listingPrice.amountRaw !== '0' && (
+					<FloorPriceText
+						tokenId={collectibleId}
+						chainId={chainId}
+						collectionAddress={collectionAddress}
+						price={listingPrice}
+					/>
+				)}
+			</div>
+			{collection?.type === 'ERC1155' && balance && (
+				<QuantityInput
+					$quantity={createListingModal$.quantity}
+					$invalidQuantity={createListingModal$.invalidQuantity}
+					decimals={collectible?.decimals || 0}
+					maxQuantity={balance?.balance}
+					disabled={shouldHideListButton}
+				/>
+			)}
+			<ExpirationDateSelect
+				$date={createListingModal$.expiry}
+				disabled={shouldHideListButton}
+			/>
+			<TransactionDetails
+				collectibleId={collectibleId}
+				collectionAddress={collectionAddress}
+				chainId={chainId}
+				price={createListingModal$.listingPrice.get()}
+				currencyImageUrl={listingPrice.currency.imageUrl}
+				includeMarketplaceFee={false}
+			/>
+
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						createListingModal$.listingIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Processing listing..."
+				/>
+			)}
+		</ActionModal>
+	);
+});

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

@@ -0,0 +1,107 @@
+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 { useCreateListingModal } from '..';
+import { StepType, WalletKind } from '../../../../_internal';
+import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
+import { CreateListingModal } from '../Modal';
+import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+
+const defaultArgs = {
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	collectibleId: TEST_COLLECTIBLE.collectibleId,
+};
+
+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(() => useCreateListingModal());
+		result.current.show(defaultArgs);
+
+		render(<CreateListingModal />);
+
+		// Wait for the component to update
+		await waitFor(() => {
+			// The Approve TOKEN button should not exist
+			expect(screen.queryByText('Approve TOKEN')).toBeNull();
+
+			// The List item for sale button should exist
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).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(() => useCreateListingModal());
+		result.current.show(defaultArgs);
+
+		render(<CreateListingModal />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Approve TOKEN')).toBeDefined();
+
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDefined();
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDisabled();
+		});
+	});
+});

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import type { Observable } from '@legendapp/state';
+import { useEffect } from 'react';
+import {
+	type ContractType,
+	type CreateReq,
+	OrderbookKind,
+	type TransactionSteps,
+} from '../../../../_internal';
+import { useMarketplaceConfig } from '../../../../hooks';
+import type { ModalCallbacks } from '../../_internal/types';
+import { useGetTokenApprovalData } from './useGetTokenApproval';
+import { useTransactionSteps } from './useTransactionSteps';
+
+export interface ListingInput {
+	contractType: ContractType;
+	listing: CreateReq;
+}
+
+interface UseCreateListingArgs {
+	listingInput: ListingInput;
+	chainId: number;
+	collectionAddress: string;
+	orderbookKind?: OrderbookKind;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useCreateListing = ({
+	listingInput,
+	chainId,
+	collectionAddress,
+	orderbookKind,
+	steps$,
+	callbacks,
+	closeMainModal,
+}: UseCreateListingArgs) => {
+	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: listingInput.listing.tokenId,
+			collectionAddress,
+			currencyAddress: listingInput.listing.currencyAddress,
+			contractType: listingInput.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, createListing } =
+		useTransactionSteps({
+			listingInput,
+			chainId,
+			collectionAddress,
+			orderbookKind,
+			callbacks,
+			closeMainModal,
+			steps$,
+		});
+
+	return {
+		isLoading: generatingSteps,
+		executeApproval,
+		createListing,
+		tokenApprovalStepExists: tokenApproval?.step !== null,
+		tokenApprovalIsLoading,
+	};
+};

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -0,0 +1,87 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
+import { useAccount } from 'wagmi';
+import { useConfig } from '../../../..';
+import { dateToUnixTime } from '../../../../../utils/date';
+import {
+	type ContractType,
+	type CreateReq,
+	type GenerateListingTransactionArgs,
+	type OrderbookKind,
+	type QueryArg,
+	StepType,
+	getMarketplaceClient,
+} from '../../../../_internal';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+
+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 { address } = useAccount();
+	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+
+	const listing = {
+		tokenId: params.tokenId,
+		quantity: '1',
+		currencyAddress: params.currencyAddress,
+		pricePerToken: '100000',
+		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
+	} satisfies CreateReq;
+
+	const isEnabled =
+		wallet &&
+		address &&
+		(params.query?.enabled ?? true) &&
+		!!params.currencyAddress;
+
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['token-approval-data', params, address],
+		queryFn: isEnabled
+			? async () => {
+					const args = {
+						collectionAddress: params.collectionAddress,
+						owner: await wallet.address(),
+						walletType: wallet.walletKind,
+						contractType: params.contractType,
+						orderbook: params.orderbook,
+						listing,
+					} satisfies GenerateListingTransactionArgs;
+					const steps = await marketplaceClient
+						.generateListingTransaction(args)
+						.then((resp) => resp.steps);
+
+					const tokenApprovalStep = steps.find(
+						(step) => step.id === StepType.tokenApproval,
+					);
+					if (!tokenApprovalStep) {
+						return {
+							step: null,
+						};
+					}
+
+					return {
+						step: tokenApprovalStep,
+					};
+				}
+			: skipToken,
+	});
+
+	return {
+		data,
+		isLoading,
+		isSuccess,
+	};
+};