@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,282 @@
+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 { ListingInput } from '../../../../_internal/types';
+import type {
+	SignatureStep,
+	TransactionStep as WalletTransactionStep,
+} from '../../../../_internal/utils';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+import {
+	useConfig,
+	useCurrencies,
+	useGenerateListingTransaction,
+} from '../../../../hooks';
+import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
+import type { ModalCallbacks } from '../../_internal/types';
+interface UseTransactionStepsArgs {
+	listingInput: ListingInput;
+	chainId: number;
+	collectionAddress: string;
+	orderbookKind: OrderbookKind;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useTransactionSteps = ({
+	listingInput,
+	chainId,
+	collectionAddress,
+	orderbookKind,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseTransactionStepsArgs) => {
+	const { wallet } = useWallet();
+	const expiry = new Date(Number(listingInput.listing.expiry) * 1000);
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	const sdkConfig = useConfig();
+	const { data: currencies } = useCurrencies({
+		chainId,
+	});
+	const currency = currencies?.find(
+		(currency) =>
+			currency.contractAddress === listingInput.listing.currencyAddress,
+	);
+	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const analytics = useAnalytics();
+	const { generateListingTransactionAsync, isPending: generatingSteps } =
+		useGenerateListingTransaction({
+			chainId,
+			onSuccess: (steps) => {
+				if (!steps) return;
+			},
+		});
+
+	const getListingSteps = async () => {
+		if (!wallet) return;
+
+		try {
+			const address = await wallet.address();
+
+			const steps = await generateListingTransactionAsync({
+				collectionAddress,
+				owner: address,
+				walletType: wallet.walletKind,
+				contractType: listingInput.contractType,
+				orderbook: orderbookKind,
+				listing: {
+					...listingInput.listing,
+					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 getListingSteps().then((steps) =>
+				steps?.find((step) => step.id === StepType.tokenApproval),
+			);
+
+			const hash = await wallet.handleSendTransactionStep(
+				Number(chainId),
+				approvalStep as WalletTransactionStep,
+			);
+
+			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+			steps$.approval.isExecuting.set(false);
+			steps$.approval.exist.set(false);
+		} catch (error) {
+			steps$.approval.isExecuting.set(false);
+		}
+	};
+
+	const createListing = async ({
+		isTransactionExecuting,
+	}: {
+		isTransactionExecuting: boolean;
+	}) => {
+		if (!wallet) return;
+
+		try {
+			steps$.transaction.isExecuting.set(isTransactionExecuting);
+			const steps = await getListingSteps();
+			const transactionStep = steps?.find(
+				(step) => step.id === StepType.createListing,
+			);
+			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.LISTING,
+				collectionAddress: collectionAddress as Address,
+				chainId,
+				collectibleId: listingInput.listing.tokenId,
+				hash,
+				orderId,
+				callbacks,
+				price: {
+					amountRaw: listingInput.listing.pricePerToken,
+					currency,
+				} as Price,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					collectableKeys.lowestListings,
+					collectableKeys.listings,
+					collectableKeys.listingsCount,
+					collectableKeys.userBalances,
+				],
+			});
+
+			if (hash) {
+				await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+			}
+
+			if (orderId) {
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+			}
+
+			if (hash || orderId) {
+				const currencyDecimal =
+					currencies?.find(
+						(currency) =>
+							currency.contractAddress === listingInput.listing.currencyAddress,
+					)?.decimals || 0;
+
+				const currencyValueRaw = Number(listingInput.listing.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.trackCreateListing({
+					props: {
+						orderbookKind,
+						collectionAddress,
+						currencyAddress: listingInput.listing.currencyAddress,
+						currencySymbol: currency?.symbol || '',
+						tokenId: listingInput.listing.tokenId,
+						requestId: requestId || '',
+						chainId: chainId.toString(),
+						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 WalletTransactionStep,
+		);
+
+		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,
+		createListing,
+	};
+};

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

@@ -0,0 +1,15 @@
+import type { ModalCallbacks } from '../_internal/types';
+import { type OpenCreateListingModalArgs, createListingModal$ } from './store';
+
+type ShowCreateListingModalArgs = Exclude<
+	OpenCreateListingModalArgs,
+	'callbacks'
+>;
+
+export const useCreateListingModal = (callbacks?: ModalCallbacks) => {
+	return {
+		show: (args: ShowCreateListingModalArgs) =>
+			createListingModal$.open({ ...args, callbacks }),
+		close: () => createListingModal$.close(),
+	};
+};

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

@@ -0,0 +1,99 @@
+import { observable } from '@legendapp/state';
+import { addDays } from 'date-fns/addDays';
+import type { Hex } from 'viem';
+import { type Currency, OrderbookKind } from '../../../../types';
+import type { CollectionType, TransactionSteps } from '../../../_internal';
+import type { BaseModalState, ModalCallbacks } from '../_internal/types';
+
+type CreateListingState = BaseModalState & {
+	collectibleId: string;
+	collectionName: string;
+	orderbookKind?: OrderbookKind;
+	collectionType: CollectionType | undefined;
+	listingPrice: {
+		amountRaw: string;
+		currency: Currency;
+	};
+	quantity: string;
+	invalidQuantity: boolean;
+	expiry: Date;
+	steps: TransactionSteps;
+	listingIsBeingProcessed: boolean;
+};
+
+export type OpenCreateListingModalArgs = {
+	collectionAddress: Hex;
+	chainId: number;
+	collectibleId: string;
+	orderbookKind?: OrderbookKind;
+	callbacks?: ModalCallbacks;
+};
+
+type Actions = {
+	open: (args: OpenCreateListingModalArgs) => void;
+	close: () => void;
+};
+
+const listingPrice = {
+	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: CreateListingState = {
+	isOpen: false,
+	collectionAddress: '' as Hex,
+	chainId: 0,
+	collectibleId: '',
+	orderbookKind: OrderbookKind.sequence_marketplace_v2,
+	collectionName: '',
+	collectionType: undefined,
+	listingPrice: { ...listingPrice },
+	quantity: '1',
+	invalidQuantity: false,
+	expiry: new Date(addDays(new Date(), 7).toJSON()),
+	callbacks: undefined as ModalCallbacks | undefined,
+	steps: { ...steps },
+	listingIsBeingProcessed: false,
+};
+
+const actions: Actions = {
+	open: (args) => {
+		createListingModal$.collectionAddress.set(args.collectionAddress);
+		createListingModal$.chainId.set(args.chainId);
+		createListingModal$.collectibleId.set(args.collectibleId);
+		createListingModal$.orderbookKind.set(args.orderbookKind);
+		createListingModal$.callbacks.set(args.callbacks);
+		createListingModal$.isOpen.set(true);
+	},
+	close: () => {
+		createListingModal$.isOpen.set(false);
+		createListingModal$.set({ ...initialState, ...actions });
+		createListingModal$.listingPrice.set({ ...listingPrice });
+		createListingModal$.steps.set({ ...steps });
+		createListingModal$.listingIsBeingProcessed.set(false);
+		createListingModal$.steps.approval.isExecuting.set(false);
+		createListingModal$.steps.transaction.isExecuting.set(false);
+	},
+};
+
+export const createListingModal$ = observable<CreateListingState & Actions>({
+	...initialState,
+	...actions,
+});

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

@@ -0,0 +1,292 @@
+'use client';
+
+import { getNetwork } from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
+import { Show, observer } from '@legendapp/state/react';
+import { useState } from 'react';
+import { parseUnits } from 'viem';
+import type { FeeOption } from '../../../../types/waas-types';
+import { dateToUnixTime } from '../../../../utils/date';
+import { ContractType } from '../../../_internal';
+import { useWallet } from '../../../_internal/wallet/useWallet';
+import {
+	useCollectible,
+	useCollection,
+	useCurrencies,
+	useLowestListing,
+} from '../../../hooks';
+import { useBuyModal } from '../BuyModal';
+import { ActionModal } 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 { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
+import { useMakeOffer } from './hooks/useMakeOffer';
+import { makeOfferModal$ } from './store';
+
+export const MakeOfferModal = () => {
+	return <Show if={makeOfferModal$.isOpen}>{() => <Modal />}</Show>;
+};
+
+const Modal = observer(() => {
+	const state = makeOfferModal$.get();
+	const {
+		collectionAddress,
+		chainId,
+		offerPrice,
+		offerPriceChanged,
+		invalidQuantity,
+		collectibleId,
+		orderbookKind,
+		callbacks,
+	} = state;
+	const steps$ = makeOfferModal$.steps;
+	const [insufficientBalance, setInsufficientBalance] = useState(false);
+	const {
+		data: collectible,
+		isLoading: collectableIsLoading,
+		isError: collectableIsError,
+	} = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+	const { wallet } = useWallet();
+	const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
+
+	const {
+		shouldHideActionButton: shouldHideOfferButton,
+		waasFeeOptionsShown,
+		getActionLabel,
+	} = useSelectWaasFeeOptions({
+		chainId,
+		isProcessing,
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
+
+	const {
+		data: collection,
+		isLoading: collectionIsLoading,
+		isError: collectionIsError,
+	} = useCollection({
+		chainId,
+		collectionAddress,
+	});
+	const {
+		data: currencies,
+		isLoading: currenciesLoading,
+		isError: currenciesIsError,
+	} = useCurrencies({
+		chainId,
+		includeNativeCurrency: false,
+	});
+	const modalLoading =
+		collectableIsLoading || collectionIsLoading || currenciesLoading;
+
+	const { isLoading, executeApproval, makeOffer } = useMakeOffer({
+		offerInput: {
+			contractType: collection?.type as ContractType,
+			offer: {
+				tokenId: collectibleId,
+				quantity: parseUnits(
+					makeOfferModal$.quantity.get(),
+					collectible?.decimals || 0,
+				).toString(),
+				expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
+				currencyAddress: offerPrice.currency.contractAddress,
+				pricePerToken: offerPrice.amountRaw,
+			},
+		},
+		chainId,
+		collectionAddress,
+		orderbookKind,
+		callbacks,
+		closeMainModal: () => makeOfferModal$.close(),
+		steps$: steps$,
+	});
+
+	const buyModal = useBuyModal(callbacks);
+
+	const { data: lowestListing } = useLowestListing({
+		tokenId: collectibleId,
+		chainId,
+		collectionAddress,
+		filter: {
+			currencies: [offerPrice.currency.contractAddress],
+		},
+	});
+
+	if (collectableIsError || collectionIsError || currenciesIsError) {
+		return (
+			<ErrorModal
+				isOpen={makeOfferModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={makeOfferModal$.close}
+				title="Make an offer"
+			/>
+		);
+	}
+
+	if (!modalLoading && (!currencies || currencies.length === 0)) {
+		return (
+			<ErrorModal
+				isOpen={makeOfferModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={makeOfferModal$.close}
+				title="Make an offer"
+				message="No ERC-20s are configured for the marketplace, contact the marketplace owners"
+			/>
+		);
+	}
+
+	const handleMakeOffer = async () => {
+		makeOfferModal$.offerIsBeingProcessed.set(true);
+
+		try {
+			if (wallet?.isWaaS) {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await makeOffer({
+				isTransactionExecuting: wallet?.isWaaS
+					? getNetwork(Number(chainId)).type !== NetworkType.TESTNET
+					: false,
+			});
+		} catch (error) {
+			console.error('Make offer failed:', error);
+		} finally {
+			makeOfferModal$.offerIsBeingProcessed.set(false);
+			steps$.transaction.isExecuting.set(false);
+		}
+	};
+
+	const offerCtaLabel = getActionLabel('Make offer');
+
+	const ctas = [
+		{
+			label: 'Approve TOKEN',
+			onClick: async () => await executeApproval(),
+			hidden: !steps$.approval.exist.get(),
+			pending: steps$.approval.isExecuting.get(),
+			variant: 'glass' as const,
+			disabled:
+				invalidQuantity ||
+				isLoading ||
+				insufficientBalance ||
+				offerPrice.amountRaw === '0' ||
+				!offerPriceChanged,
+		},
+		{
+			label: offerCtaLabel,
+			onClick: () => handleMakeOffer(),
+			pending:
+				steps$?.transaction.isExecuting.get() ||
+				makeOfferModal$.offerIsBeingProcessed.get(),
+			disabled:
+				steps$.approval.isExecuting.get() ||
+				steps$.approval.exist.get() ||
+				offerPrice.amountRaw === '0' ||
+				insufficientBalance ||
+				isLoading ||
+				invalidQuantity,
+		},
+	];
+
+	return (
+		<>
+			<ActionModal
+				isOpen={makeOfferModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={() => {
+					makeOfferModal$.close();
+					selectWaasFeeOptions$.hide();
+					steps$.transaction.isExecuting.set(false);
+				}}
+				title="Make an offer"
+				ctas={ctas}
+				modalLoading={modalLoading}
+				spinnerContainerClassname="h-[188px]"
+				hideCtas={shouldHideOfferButton}
+			>
+				<TokenPreview
+					collectionName={collection?.name}
+					collectionAddress={collectionAddress}
+					collectibleId={collectibleId}
+					chainId={chainId}
+				/>
+
+				<PriceInput
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					$price={makeOfferModal$.offerPrice}
+					onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+					includeNativeCurrency={false}
+					checkBalance={{
+						enabled: true,
+						callback: (state) => setInsufficientBalance(state),
+					}}
+					disabled={shouldHideOfferButton}
+				/>
+
+				{collection?.type === ContractType.ERC1155 && (
+					<QuantityInput
+						$quantity={makeOfferModal$.quantity}
+						$invalidQuantity={makeOfferModal$.invalidQuantity}
+						decimals={collectible?.decimals || 0}
+						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
+						disabled={shouldHideOfferButton}
+					/>
+				)}
+
+				{offerPrice.amountRaw !== '0' &&
+					offerPriceChanged &&
+					!insufficientBalance && (
+						<FloorPriceText
+							tokenId={collectibleId}
+							chainId={chainId}
+							collectionAddress={collectionAddress}
+							price={offerPrice}
+							onBuyNow={() => {
+								makeOfferModal$.close();
+
+								if (lowestListing) {
+									buyModal.show({
+										chainId,
+										collectionAddress,
+										collectibleId,
+										orderId: lowestListing.orderId,
+										marketplace: lowestListing.marketplace,
+										marketplaceType: 'market',
+										quantityDecimals: lowestListing.quantityDecimals,
+										quantityRemaining: lowestListing.quantityRemaining,
+									});
+								}
+							}}
+						/>
+					)}
+				<ExpirationDateSelect
+					$date={makeOfferModal$.expiry}
+					disabled={shouldHideOfferButton}
+				/>
+
+				{waasFeeOptionsShown && (
+					<SelectWaasFeeOptions
+						chainId={Number(chainId)}
+						onCancel={() => {
+							makeOfferModal$.offerIsBeingProcessed.set(false);
+							steps$.transaction.isExecuting.set(false);
+						}}
+						titleOnConfirm="Processing offer..."
+					/>
+				)}
+			</ActionModal>
+		</>
+	);
+});