@0xsequence/marketplace-sdk 0.3.0 → 0.3.2

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

@@ -1,23 +1,25 @@
 import { Show, observer } from '@legendapp/state/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
-import type {
-	MakeOfferErrorCallbacks,
-	MakeOfferSuccessCallbacks,
-} from '../../../../types/callbacks';
-import { ContractType } from '../../../_internal';
-import {
-	ActionModal,
-	type ActionModalProps,
-} from '../_internal/components/actionModal/ActionModal';
+import { collectableKeys, ContractType, StepType } from '../../../_internal';
+import { useCollectible, useCollection, useCurrencies } from '../../../hooks';
+import { useMakeOffer } from '../../../hooks/useMakeOffer';
+import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 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 { useSwitchChainModal } from '../_internal/components/switchChainModal';
 import TokenPreview from '../_internal/components/tokenPreview';
-import { makeOfferModal$, useHydrate } from './_store';
+import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import { makeOfferModal$ } from './_store';
+import {
+	getMakeOfferTransactionMessage,
+	getMakeOfferTransactionTitle,
+} from './_utils/getMakeOfferTransactionTitleMessage';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import type { ModalCallbacks } from '../_internal/types';
+import type { QueryKey } from '@tanstack/react-query';
 
 export type ShowMakeOfferModalArgs = {
 	collectionAddress: Hex;
@@ -25,144 +27,201 @@ export type ShowMakeOfferModalArgs = {
 	collectibleId: string;
 };
 
-export const useMakeOfferModal = () => {
-	const { chainId: accountChainId } = useAccount();
-	const { show: showSwitchNetworkModal } = useSwitchChainModal();
-	const { errorCallbacks, successCallbacks } = makeOfferModal$.state.get();
-
-	const openModal = (args: ShowMakeOfferModalArgs) => {
-		makeOfferModal$.open(args);
-	};
-
-	const handleShowModal = (args: ShowMakeOfferModalArgs) => {
-		const isSameChain = accountChainId === Number(args.chainId);
-
-		if (!isSameChain) {
-			showSwitchNetworkModal({
-				chainIdToSwitchTo: Number(args.chainId),
-				onSwitchChain: () => openModal(args),
-				callbacks: {
-					onSuccess: successCallbacks?.onSwitchChainSuccess,
-					onUnknownError: errorCallbacks?.onSwitchChainError,
-					onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
-					onUserRejectedRequest:
-						errorCallbacks?.onUserRejectedSwitchingChainRequestError,
-				},
-			});
-			return;
-		}
-
-		openModal(args);
-	};
-
-	return {
-		show: handleShowModal,
-		close: () => makeOfferModal$.close(),
-		onError: (callbacks: MakeOfferErrorCallbacks) => {
-			makeOfferModal$.state.set({
-				...makeOfferModal$.state.get(),
-				errorCallbacks: callbacks,
-			});
-		},
-		onSuccess: (callbacks: MakeOfferSuccessCallbacks) => {
-			makeOfferModal$.state.set({
-				...makeOfferModal$.state.get(),
-				successCallbacks: callbacks,
-			});
-		},
-	};
-};
+export const useMakeOfferModal = (defaultCallbacks?: ModalCallbacks) => ({
+	show: (args: ShowMakeOfferModalArgs) =>
+		makeOfferModal$.open({ ...args, callbacks: defaultCallbacks }),
+	close: makeOfferModal$.close,
+});
 
 export const MakeOfferModal = () => {
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	return (
 		<Show if={makeOfferModal$.isOpen}>
-			<Modal />
+			<ModalContent showTransactionStatusModal={showTransactionStatusModal} />
 		</Show>
 	);
 };
 
-const Modal = () => {
-	useHydrate();
-	return <ModalContent />;
-};
+type TransactionStatusModalReturn = ReturnType<
+	typeof useTransactionStatusModal
+>;
+
+const ModalContent = observer(
+	({
+		showTransactionStatusModal,
+	}: {
+		showTransactionStatusModal: TransactionStatusModalReturn['show'];
+	}) => {
+		const state = makeOfferModal$.get();
+		const { collectionAddress, chainId, offerPrice, collectibleId } = state;
+		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: currenciesIsLoading } = useCurrencies({
+			chainId,
+			collectionAddress,
+		});
+
+		const { getMakeOfferSteps } = useMakeOffer({
+			chainId,
+			collectionAddress,
+			onTransactionSent: (hash) => {
+				if (!hash) return;
+				showTransactionStatusModal({
+					hash,
+					price: makeOfferModal$.offerPrice.get(),
+					collectionAddress,
+					chainId,
+					tokenId: collectibleId,
+					getTitle: getMakeOfferTransactionTitle,
+					getMessage: (params) =>
+						getMakeOfferTransactionMessage(params, collectible?.name || ''),
+					type: StepType.createOffer,
+					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
+				});
+				makeOfferModal$.close();
+			},
+			onSuccess: (hash) => {
+				makeOfferModal$.callbacks?.onSuccess?.(hash);
+			},
+			onError: (error) => {
+				makeOfferModal$.callbacks?.onError?.(error);
+			},
+		});
+
+		const dateToUnixTime = (date: Date) =>
+			Math.floor(date.getTime() / 1000).toString();
+
+		const currencyAddress = offerPrice.currency.contractAddress;
+
+		const { isLoading, steps, refreshSteps } = getMakeOfferSteps({
+			contractType: collection!.type as ContractType,
+			offer: {
+				tokenId: collectibleId,
+				quantity: makeOfferModal$.quantity.get(),
+				expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
+				currencyAddress,
+				pricePerToken: offerPrice.amountRaw,
+			},
+		});
+
+		useEffect(() => {
+			if (!currencyAddress) return;
+			refreshSteps();
+		}, [currencyAddress]);
+
+		if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
+			return (
+				<LoadingModal
+					store={makeOfferModal$}
+					onClose={makeOfferModal$.close}
+					title="Make an offer"
+				/>
+			);
+		}
 
-const ModalContent = observer(() => {
-	const [insufficientBalance, setInsufficientBalance] = useState(false);
-	const {
-		chainId,
-		collectionAddress,
-		collectibleId,
-		collectionName,
-		collectionType,
-		offerPrice,
-	} = makeOfferModal$.state.get();
-
-	const { steps } = makeOfferModal$.get();
-
-	const ctas = [
-		{
-			label: 'Approve TOKEN',
-			onClick: steps.tokenApproval.execute,
-			hidden: !steps.tokenApproval.isNeeded(),
-			pending: steps.tokenApproval.pending,
-			variant: 'glass' as const,
-		},
-		{
-			label: 'Make offer',
-			onClick: steps.createOffer.execute,
-			pending: steps.createOffer.pending,
-			disabled:
-				steps.tokenApproval.isNeeded() ||
-				offerPrice.amountRaw === '0' ||
-				insufficientBalance,
-		},
-	] satisfies ActionModalProps['ctas'];
+		if (collectableIsError || collectionIsError) {
+			return (
+				<ErrorModal
+					store={makeOfferModal$}
+					onClose={makeOfferModal$.close}
+					title="Make an offer"
+				/>
+			);
+		}
 
-	return (
-		<ActionModal
-			store={makeOfferModal$}
-			onClose={() => {
-				makeOfferModal$.close();
-			}}
-			title="Make an offer"
-			ctas={ctas}
-		>
-			<TokenPreview
-				collectionName={collectionName}
-				collectionAddress={collectionAddress}
-				collectibleId={collectibleId}
-				chainId={chainId}
-			/>
-
-			<PriceInput
-				chainId={chainId}
-				collectionAddress={collectionAddress}
-				$listingPrice={makeOfferModal$.state.offerPrice}
-				checkBalance={{
-					enabled: true,
-					callback: (state) => setInsufficientBalance(state),
-				}}
-			/>
-
-			{collectionType === ContractType.ERC1155 && (
-				<QuantityInput
-					chainId={chainId}
-					$quantity={makeOfferModal$.state.quantity}
+		const handleStepExecution = async (execute?: any) => {
+			if (!execute) return;
+			try {
+				await refreshSteps();
+				await execute();
+			} catch (error) {
+				makeOfferModal$.callbacks?.onError?.(error as Error);
+			}
+		};
+
+		const ctas = [
+			{
+				label: 'Approve TOKEN',
+				onClick: () => handleStepExecution(() => steps?.approval.execute()),
+				hidden: !steps?.approval.isPending,
+				pending: steps?.approval.isExecuting,
+				variant: 'glass' as const,
+			},
+			{
+				label: 'Make offer',
+				onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+				pending: steps?.transaction.isExecuting || isLoading,
+				disabled:
+					steps?.approval.isPending ||
+					offerPrice.amountRaw === '0' ||
+					insufficientBalance ||
+					isLoading,
+			},
+		];
+
+		return (
+			<ActionModal
+				store={makeOfferModal$}
+				onClose={() => makeOfferModal$.close()}
+				title="Make an offer"
+				ctas={ctas}
+			>
+				<TokenPreview
+					collectionName={collection?.name}
 					collectionAddress={collectionAddress}
 					collectibleId={collectibleId}
+					chainId={chainId}
 				/>
-			)}
 
-			{!!offerPrice && (
-				<FloorPriceText
-					tokenId={collectibleId}
+				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					price={offerPrice}
+					$listingPrice={makeOfferModal$.offerPrice}
+					checkBalance={{
+						enabled: true,
+						callback: (state) => setInsufficientBalance(state),
+					}}
 				/>
-			)}
 
-			<ExpirationDateSelect $date={makeOfferModal$.state.expiry} />
-		</ActionModal>
-	);
-});
+				{collection?.type === ContractType.ERC1155 && (
+					<QuantityInput
+						chainId={chainId}
+						$quantity={makeOfferModal$.quantity}
+						collectionAddress={collectionAddress}
+						collectibleId={collectibleId}
+					/>
+				)}
+
+				{!!offerPrice && (
+					<FloorPriceText
+						tokenId={collectibleId}
+						chainId={chainId}
+						collectionAddress={collectionAddress}
+						price={offerPrice}
+					/>
+				)}
+
+				<ExpirationDateSelect $date={makeOfferModal$.expiry} />
+			</ActionModal>
+		);
+	},
+);

package/src/react/ui/modals/SellModal/_store.ts

@@ -1,276 +1,43 @@
-import { observable, when } from '@legendapp/state';
-import { useMount, useSelector } from '@legendapp/state/react';
-import type { QueryKey } from '@tanstack/react-query';
+import { observable } from '@legendapp/state';
 import type { Hex } from 'viem';
-import { useAccount, useSendTransaction } from 'wagmi';
-import type { ShowSellModalArgs } from '.';
-import type {
-	SellErrorCallbacks,
-	SellSuccessCallbacks,
-} from '../../../../types/callbacks';
-import {
-	MarketplaceKind,
-	type Order,
-	type Step,
-	StepType,
-	type WalletKind,
-	balanceQueries,
-	collectableKeys,
-} from '../../../_internal';
-import {
-	useCollectible,
-	useCurrencies,
-	useGenerateSellTransaction,
-} from '../../../hooks';
-import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
-import {
-	getSellTransactionMessage,
-	getSellTransactionTitle,
-} from './_utils/getSellTransactionTitleMessage';
+import type { Order } from '../../../_internal';
+import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
-export interface SellModalState {
-	isOpen: boolean;
-	open: (args: ShowSellModalArgs) => void;
-	close: () => void;
-	state: {
+type SellModalState = BaseModalState & {
+	tokenId: string;
+	order?: Order;
+};
+
+const initialState: SellModalState & {
+	open: (args: {
 		collectionAddress: Hex;
 		chainId: string;
 		tokenId: string;
-		order: Order | undefined;
-		errorCallbacks?: SellErrorCallbacks;
-		successCallbacks?: SellSuccessCallbacks;
-	};
-	steps: {
-		isLoading: () => boolean;
-		stepsData: Step[] | undefined;
-		_currentStep: null | 'tokenApproval' | 'sell';
-		tokenApproval: {
-			isNeeded: () => boolean;
-			pending: boolean;
-			getStep: () => Step | undefined;
-			execute: () => void;
-		};
-		sell: {
-			pending: boolean;
-			execute: () => void;
-		};
-	};
-	hash: Hex | undefined;
-}
-
-export const initialState: SellModalState = {
+		order: Order;
+		callbacks?: ModalCallbacks;
+	}) => void;
+	close: () => void;
+} = {
 	isOpen: false,
-	open: ({ collectionAddress, chainId, tokenId, order }: ShowSellModalArgs) => {
-		sellModal$.state.set({
-			...sellModal$.state.get(),
-			collectionAddress,
-			chainId,
-			tokenId,
-			order,
-		});
+	collectionAddress: '' as Hex,
+	chainId: '',
+	tokenId: '',
+	order: undefined,
+	callbacks: undefined,
+
+	open: (args) => {
+		sellModal$.collectionAddress.set(args.collectionAddress);
+		sellModal$.chainId.set(args.chainId);
+		sellModal$.tokenId.set(args.tokenId);
+		sellModal$.order.set(args.order);
+		sellModal$.callbacks.set(args.callbacks);
 		sellModal$.isOpen.set(true);
 	},
+
 	close: () => {
 		sellModal$.isOpen.set(false);
-		sellModal$.state.set({
-			...initialState.state,
-		});
-	},
-	state: {
-		collectionAddress: '' as Hex,
-		chainId: '',
-		tokenId: '',
-		order: undefined,
+		sellModal$.callbacks.set(undefined);
 	},
-	steps: {
-		isLoading: () => !!sellModal$.steps.stepsData.get(),
-		stepsData: undefined,
-		_currentStep: null,
-		tokenApproval: {} as SellModalState['steps']['tokenApproval'],
-		sell: {} as SellModalState['steps']['sell'],
-	},
-	hash: undefined,
 };
 
 export const sellModal$ = observable(initialState);
-
-export const useHydrate = () => {
-	const chainId = useSelector(sellModal$.state.chainId);
-
-	const collectionAddress = useSelector(sellModal$.state.collectionAddress);
-
-	const order = useSelector(sellModal$.state.order);
-
-	useTokenApprovalHandler(chainId);
-	useSellHandler(chainId);
-
-	const { generateSellTransactionAsync } = useGenerateSellTransaction({
-		chainId,
-	});
-
-	const { connector, address } = useAccount();
-
-	useMount(() => {
-		const setSteps = async () => {
-			const sellTransactionData = await generateSellTransactionAsync({
-				walletType: connector?.walletType as WalletKind,
-				collectionAddress: collectionAddress,
-				seller: address as string,
-				marketplace: MarketplaceKind.sequence_marketplace_v1,
-				ordersData: [
-					{
-						...order!,
-						orderId: order!.orderId,
-						quantity: '1',
-					},
-				],
-				additionalFees: [],
-			});
-			sellModal$.steps.stepsData.set(sellTransactionData);
-		};
-
-		when(() => !!order && !!connector, setSteps);
-	});
-};
-
-const useTokenApprovalHandler = (chainId: string) => {
-	const { sendTransactionAsync, isPending } = useSendTransaction();
-	const onError = sellModal$.state.get().errorCallbacks?.onApproveTokenError;
-	const onSuccess: (() => void) | undefined =
-		sellModal$.state.get().successCallbacks?.onApproveTokenSuccess;
-
-	sellModal$.steps.tokenApproval.set({
-		isNeeded: () => !!sellModal$.steps.tokenApproval.getStep(),
-		getStep: () =>
-			sellModal$.steps.stepsData
-				?.get()
-				?.find((s) => s.id === StepType.tokenApproval),
-		pending:
-			sellModal$.steps._currentStep.get() === 'tokenApproval' && isPending,
-		execute: async () => {
-			const step = sellModal$.steps.tokenApproval.getStep();
-			if (!step) return;
-			sellModal$.steps._currentStep.set('tokenApproval');
-
-			try {
-				await sendTransactionAsync({
-					to: step.to as Hex,
-					chainId: Number(chainId),
-					data: step.data as Hex,
-					value: BigInt(step.value || '0'),
-				});
-
-				sellModal$.steps._currentStep.set(null);
-
-				onSuccess && onSuccess();
-			} catch (error) {
-				onError && onError(error);
-			}
-		},
-	});
-};
-
-const useSellHandler = (chainId: string) => {
-	const { tokenId, collectionAddress, errorCallbacks, successCallbacks } =
-		sellModal$.state.get();
-	const { address } = useAccount();
-	const {
-		generateSellTransactionAsync,
-		isPending: generateSellTransactionPending,
-	} = useGenerateSellTransaction({
-		chainId,
-	});
-	const { data: collectible } = useCollectible({
-		chainId,
-		collectibleId: tokenId,
-		collectionAddress,
-	});
-	const { data: currencies } = useCurrencies({ chainId });
-
-	const { sendTransactionAsync, isPending: sendTransactionPending } =
-		useSendTransaction();
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
-
-	function setSellStep() {
-		sellModal$.steps.sell.set({
-			pending:
-				sellModal$.steps._currentStep.get() === 'sell' &&
-				(generateSellTransactionPending || sendTransactionPending),
-			execute: () => {
-				sellModal$.steps._currentStep.set('sell');
-				const { collectionAddress, order } = sellModal$.state.get();
-
-				generateSellTransactionAsync({
-					collectionAddress: collectionAddress,
-					seller: address as string,
-					marketplace: order!.marketplace,
-					ordersData: [
-						{
-							...order!,
-							quantity: '1',
-						},
-					],
-					additionalFees: order?.feeBreakdown
-						? [
-								{
-									amount: String(order!.feeBps),
-									receiver: order!.feeBreakdown?.[0]?.recipientAddress,
-								},
-							]
-						: [],
-				})
-					.then(async (response) => {
-						const step = response.find((s) => s.id === StepType.sell);
-						if (!step) throw new Error('No steps found');
-						try {
-							const hash = await sendTransactionAsync({
-								to: step.to as Hex,
-								chainId: Number(chainId),
-								data: step.data as Hex,
-								value: BigInt(step.value || '0'),
-							});
-
-							sellModal$.hash.set(hash);
-
-							sellModal$.steps._currentStep.set(null);
-
-							sellModal$.close();
-
-							showTransactionStatusModal({
-								hash: hash!,
-								price: {
-									amountRaw: order!.priceAmount,
-									currency: currencies!.find(
-										(currency) =>
-											currency.contractAddress === order!.priceCurrencyAddress,
-									)!,
-								},
-								collectionAddress,
-								chainId,
-								tokenId,
-								getTitle: getSellTransactionTitle,
-								getMessage: (params) =>
-									getSellTransactionMessage(params, collectible?.name || ''),
-								type: StepType.sell,
-								callbacks: {
-									onSuccess: successCallbacks?.onSellSuccess,
-									onUnknownError: errorCallbacks?.onSellError,
-								},
-								queriesToInvalidate: [
-									...collectableKeys.all,
-									balanceQueries.all,
-								] as unknown as QueryKey[],
-							});
-						} catch (error) {
-							errorCallbacks?.onSellError?.(error);
-						}
-					})
-					.catch((error) => {
-						errorCallbacks?.onSellError?.(error);
-					});
-			},
-		});
-	}
-
-	when(currencies && collectible, setSellStep);
-};