@0xsequence/marketplace-sdk 0.4.1 → 0.4.3

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

@@ -1,293 +1,15 @@
-import { Box } from '@0xsequence/design-system';
-import { Show, observer } from '@legendapp/state/react';
-import type { QueryKey } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import type { Hash, Hex } from 'viem';
-import { parseUnits } from 'viem';
-import { useAccount } from 'wagmi';
-import {
-	type ContractType,
-	type OrderbookKind,
-	collectableKeys,
-} from '../../../_internal';
-import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
-import {
-	useBalanceOfCollectible,
-	useCollectible,
-	useCollection,
-} from '../../../hooks';
-import { useCreateListing } from '../../../hooks/useCreateListing';
-import {
-	ActionModal,
-	type ActionModalProps,
-} from '../_internal/components/actionModal/ActionModal';
-import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
-import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
-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 TokenPreview from '../_internal/components/tokenPreview';
-import TransactionDetails from '../_internal/components/transactionDetails';
-import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
-import { createListingModal$ } from './_store';
+import { createListingModal$, type OpenCreateListingModalArgs } from './store';
 
-export type ShowCreateListingModalArgs = {
-	collectionAddress: Hex;
-	chainId: string;
-	collectibleId: string;
-	orderbookKind: OrderbookKind;
-	onSuccess?: (hash?: Hash) => void;
-	onError?: (error: Error) => void;
-};
+type ShowCreateListingModalArgs = Exclude<
+	OpenCreateListingModalArgs,
+	'callbacks'
+>;
 
 export const useCreateListingModal = (callbacks?: ModalCallbacks) => {
 	return {
 		show: (args: ShowCreateListingModalArgs) =>
-			createListingModal$.open({ ...args, defaultCallbacks: callbacks }),
+			createListingModal$.open({ ...args, callbacks }),
 		close: () => createListingModal$.close(),
 	};
 };
-
-export const CreateListingModal = () => {
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
-	return (
-		<Show if={createListingModal$.isOpen}>
-			<Modal showTransactionStatusModal={showTransactionStatusModal} />
-		</Show>
-	);
-};
-
-type TransactionStatusModalReturn = ReturnType<
-	typeof useTransactionStatusModal
->;
-
-export const Modal = observer(
-	({
-		showTransactionStatusModal,
-	}: {
-		showTransactionStatusModal: TransactionStatusModalReturn['show'];
-	}) => {
-		const state = createListingModal$.get();
-		const {
-			collectionAddress,
-			chainId,
-			listingPrice,
-			listingPriceChanged,
-			collectibleId,
-			orderbookKind,
-			callbacks,
-		} = state;
-		const currencyAddress = listingPrice.currency.contractAddress;
-		const {
-			data: collectible,
-			isLoading: collectableIsLoading,
-			isError: collectableIsError,
-		} = useCollectible({
-			chainId,
-			collectionAddress,
-			collectibleId,
-		});
-
-		const {
-			data: collection,
-			isLoading: collectionIsLoading,
-			isError: collectionIsError,
-		} = useCollection({
-			chainId,
-			collectionAddress,
-		});
-		const [approvalExecutedSuccess, setApprovalExecutedSuccess] =
-			useState(false);
-
-		const { address } = useAccount();
-
-		const { data: balance } = useBalanceOfCollectible({
-			chainId,
-			collectionAddress,
-			collectableId: collectibleId,
-			userAddress: address ?? undefined,
-		});
-
-		const { getListingSteps, isLoading: machineLoading, createListing} = useCreateListing({
-			orderbookKind,
-			chainId,
-			collectionAddress,
-			enabled: createListingModal$.isOpen.get(),
-			onSwitchChainRefused: () => createListingModal$.close(),
-			onApprovalSuccess: () => setApprovalExecutedSuccess(true),
-			onTransactionSent: (hash, orderId) => {
-				if (!hash && !orderId) return;
-
-				showTransactionStatusModal({
-					hash,
-					orderId,
-					collectionAddress,
-					chainId,
-					price: createListingModal$.listingPrice.get(),
-					collectibleId,
-					type: TransactionType.LISTING,
-					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
-					callbacks,
-				});
-				createListingModal$.close();
-			},
-		});
-
-		useEffect(() => {
-			if (!currencyAddress) return;
-
-			refreshSteps();
-		}, [currencyAddress]);
-
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		const handleStepExecution = async (execute?: any) => {
-			if (!execute) return;
-			try {
-				await refreshSteps();
-				await execute();
-			} catch (error) {
-				if (callbacks?.onError) {
-					callbacks.onError(error as Error);
-				} else {
-					console.debug('onError callback not provided:', error);
-				}
-			}
-		};
-
-		if (collectableIsLoading || collectionIsLoading || machineLoading) {
-			return (
-				<LoadingModal
-					isOpen={createListingModal$.isOpen.get()}
-					chainId={Number(chainId)}
-					onClose={createListingModal$.close}
-					title="List item for sale"
-				/>
-			);
-		}
-
-		if (collectableIsError || collectionIsError) {
-			return (
-				<ErrorModal
-					isOpen={createListingModal$.isOpen.get()}
-					chainId={Number(chainId)}
-					onClose={createListingModal$.close}
-					title="List item for sale"
-				/>
-			);
-		}
-
-		const dateToUnixTime = (date: Date) =>
-			Math.floor(date.getTime() / 1000).toString();
-
-		const { isLoading, steps, refreshSteps } = getListingSteps({
-			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,
-			},
-		});
-		const approvalNeeded = steps?.approval.isPending;
-
-		const ctas = [
-			{
-				label: 'Approve TOKEN',
-				onClick: () => handleStepExecution(() => steps?.approval.execute()),
-				hidden: !approvalNeeded || approvalExecutedSuccess,
-				pending: steps?.approval.isExecuting || isLoading,
-				variant: 'glass' as const,
-				disabled:
-					createListingModal$.invalidQuantity.get() ||
-					isLoading ||
-					!listingPriceChanged ||
-					listingPrice.amountRaw === '0' ||
-					steps?.transaction.isExecuting,
-			},
-			{
-				label: 'List item for sale',
-				onClick: () => createListing({
-					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,
-					},
-				}),
-				pending: steps?.transaction.isExecuting || isLoading,
-				disabled:
-					(!approvalExecutedSuccess && approvalNeeded) ||
-					listingPrice.amountRaw === '0' ||
-					isLoading ||
-					createListingModal$.invalidQuantity.get() ||
-					!listingPriceChanged,
-			},
-		] satisfies ActionModalProps['ctas'];
-
-		return (
-			<ActionModal
-				isOpen={createListingModal$.isOpen.get()}
-				chainId={Number(chainId)}
-				onClose={() => createListingModal$.close()}
-				title="List item for sale"
-				ctas={ctas}
-			>
-				<TokenPreview
-					collectionName={collection?.name}
-					collectionAddress={collectionAddress}
-					collectibleId={collectibleId}
-					chainId={chainId}
-				/>
-
-				<Box display="flex" flexDirection="column" width="full" gap="1">
-					<PriceInput
-						chainId={chainId}
-						collectionAddress={collectionAddress}
-						$listingPrice={createListingModal$.listingPrice}
-						onPriceChange={() => createListingModal$.listingPriceChanged.set(true)}
-					/>
-
-					{listingPrice.amountRaw !== '0' && listingPriceChanged && (
-						<FloorPriceText
-							tokenId={collectibleId}
-							chainId={chainId}
-							collectionAddress={collectionAddress}
-							price={listingPrice}
-						/>
-					)}
-				</Box>
-
-				{collection?.type === 'ERC1155' && balance && (
-					<QuantityInput
-						$quantity={createListingModal$.quantity}
-						$invalidQuantity={createListingModal$.invalidQuantity}
-						decimals={collectible?.decimals || 0}
-						maxQuantity={balance?.balance}
-					/>
-				)}
-
-				<ExpirationDateSelect $date={createListingModal$.expiry} />
-
-				<TransactionDetails
-					collectibleId={collectibleId}
-					collectionAddress={collectionAddress}
-					chainId={chainId}
-					price={createListingModal$.listingPrice.get()}
-					showPlaceholderPrice={!listingPriceChanged}
-					currencyImageUrl={listingPrice.currency.imageUrl}
-				/>
-			</ActionModal>
-		);
-	},
-);

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

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

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

@@ -0,0 +1,178 @@
+import { Show, observer } from '@legendapp/state/react';
+import { useState } from 'react';
+import { parseUnits } from 'viem';
+import { dateToUnixTime } from '../../../../utils/date';
+import { ContractType } from '../../../_internal';
+import { useCollectible, useCollection } from '../../../hooks';
+import { useMakeOffer } from './hooks/useMakeOffer';
+import { ActionModal } from '../_internal/components/actionModal/ActionModal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+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 TokenPreview from '../_internal/components/tokenPreview';
+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 {
+		data: collection,
+		isLoading: collectionIsLoading,
+		isError: collectionIsError,
+	} = useCollection({
+		chainId,
+		collectionAddress,
+	});
+	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$,
+	});
+
+	if (collectableIsLoading || collectionIsLoading) {
+		return (
+			<LoadingModal
+				isOpen={makeOfferModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={makeOfferModal$.close}
+				title="Make an offer"
+			/>
+		);
+	}
+
+	if (collectableIsError || collectionIsError) {
+		return (
+			<ErrorModal
+				isOpen={makeOfferModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={makeOfferModal$.close}
+				title="Make an 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: 'Make offer',
+			onClick: () => makeOffer(),
+			pending: steps$.transaction.isExecuting.get(),
+			disabled:
+				steps$.approval.isExecuting.get() ||
+				steps$.approval.exist.get() ||
+				offerPrice.amountRaw === '0' ||
+				insufficientBalance ||
+				isLoading ||
+				invalidQuantity ||
+				offerPrice.amountRaw === '0',
+		},
+	];
+
+	return (
+		<>
+			<ActionModal
+				isOpen={makeOfferModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={() => makeOfferModal$.close()}
+				title="Make an offer"
+				ctas={ctas}
+			>
+				<TokenPreview
+					collectionName={collection?.name}
+					collectionAddress={collectionAddress}
+					collectibleId={collectibleId}
+					chainId={chainId}
+				/>
+
+				<PriceInput
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					$listingPrice={makeOfferModal$.offerPrice}
+					onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+					checkBalance={{
+						enabled: true,
+						callback: (state) => setInsufficientBalance(state),
+					}}
+				/>
+
+				{collection?.type === ContractType.ERC1155 && (
+					<QuantityInput
+						$quantity={makeOfferModal$.quantity}
+						$invalidQuantity={makeOfferModal$.invalidQuantity}
+						decimals={collectible?.decimals || 0}
+						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
+					/>
+				)}
+
+				{offerPrice.amountRaw !== '0' &&
+					offerPriceChanged &&
+					!insufficientBalance && (
+						<FloorPriceText
+							tokenId={collectibleId}
+							chainId={chainId}
+							collectionAddress={collectionAddress}
+							price={offerPrice}
+						/>
+					)}
+
+				<ExpirationDateSelect $date={makeOfferModal$.expiry} />
+			</ActionModal>
+		</>
+	);
+});

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

@@ -0,0 +1,76 @@
+import {
+	type ContractType,
+	type CreateReq,
+	GenerateOfferTransactionArgs,
+	getMarketplaceClient,
+	type OrderbookKind,
+	StepType,
+} from '../../../../_internal';
+import { useQuery } from '@tanstack/react-query';
+import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
+import { useConfig } from '../../../../hooks/useConfig';
+import { dateToUnixTime } from '../../../../../utils/date';
+
+export interface UseGetTokenApprovalDataArgs {
+	chainId: string;
+	tokenId: string;
+	collectionAddress: string;
+	currencyAddress: string;
+	contractType: ContractType;
+	orderbook: OrderbookKind;
+}
+
+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: '100000',
+		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
+	} satisfies CreateReq;
+
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['token-approval-data', params.currencyAddress],
+		queryFn: 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,
+			};
+		},
+		enabled: !!wallet && !!params.collectionAddress && !!params.currencyAddress,
+	});
+
+	return {
+		data,
+		isLoading,
+		isSuccess,
+	};
+};

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

@@ -0,0 +1,62 @@
+import { Observable } from '@legendapp/state';
+import { OrderbookKind } from '../../../../../types';
+import { OfferInput } from '../../../../_internal/transaction-machine/execute-transaction';
+import { ModalCallbacks } from '../../_internal/types';
+import { useGetTokenApprovalData } from './useGetTokenApproval';
+import { useTransactionSteps } from './useTransactionSteps';
+import { useEffect } from 'react';
+import { TransactionSteps } from '../../../../_internal';
+
+interface UseMakeOfferArgs {
+	offerInput: OfferInput;
+	chainId: string;
+	collectionAddress: string;
+	orderbookKind?: OrderbookKind;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useMakeOffer = ({
+	offerInput,
+	chainId,
+	collectionAddress,
+	orderbookKind = OrderbookKind.sequence_marketplace_v2,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseMakeOfferArgs) => {
+	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
+		useGetTokenApprovalData({
+			chainId,
+			tokenId: offerInput.offer.tokenId,
+			collectionAddress,
+			currencyAddress: offerInput.offer.currencyAddress,
+			contractType: offerInput.contractType,
+			orderbook: orderbookKind,
+		});
+
+	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,
+	};
+};