@0xsequence/marketplace-sdk 0.2.0 → 0.3.1

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);
-};

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

@@ -1,148 +1,182 @@
 import { Show, observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
-import type { Price } from '../../../../types';
-import type {
-	SellErrorCallbacks,
-	SellSuccessCallbacks,
-} from '../../../../types/callbacks';
-import type { Order } from '../../../_internal';
-import { useCollection, useCurrencies } from '../../../hooks';
-import {
-	ActionModal,
-	type ActionModalProps,
-} from '../_internal/components/actionModal/ActionModal';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
-import { sellModal$, useHydrate } from './_store';
+import { sellModal$ } from './_store';
+import { useCollection, useCurrencies } from '../../../hooks';
+import {
+	balanceQueries,
+	collectableKeys,
+	StepType,
+	type Order,
+} from '../../../_internal';
+import { useSell } from '../../../hooks/useSell';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+import { ErrorModal } from '..//_internal/components/actionModal/ErrorModal';
+import type { ModalCallbacks } from '..//_internal/types';
+import {
+	getSellTransactionMessage,
+	getSellTransactionTitle,
+} from './_utils/getSellTransactionTitleMessage';
+import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import type { QueryKey } from '@tanstack/react-query';
 
 export type ShowSellModalArgs = {
 	chainId: string;
 	collectionAddress: Hex;
 	tokenId: string;
 	order: Order;
-	collectibleName: string | undefined;
 };
 
-export const useSellModal = () => {
-	const { chainId: accountChainId } = useAccount();
-	const { show: showSwitchNetworkModal } = useSwitchChainModal();
-	const { errorCallbacks, successCallbacks } = sellModal$.state.get();
-
-	const openModal = (args: ShowSellModalArgs) => {
-		sellModal$.open(args);
-	};
-
-	const handleShowModal = (args: ShowSellModalArgs) => {
-		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: () => sellModal$.close(),
-		onError: (callbacks: SellErrorCallbacks) => {
-			sellModal$.state.set({
-				...sellModal$.state.get(),
-				errorCallbacks: callbacks,
-			});
-		},
-		onSuccess: (callbacks: SellSuccessCallbacks) => {
-			sellModal$.state.set({
-				...sellModal$.state.get(),
-				successCallbacks: callbacks,
-			});
-		},
-	};
-};
+export const useSellModal = (defaultCallbacks?: ModalCallbacks) => ({
+	show: (args: ShowSellModalArgs) =>
+		sellModal$.open({ ...args, callbacks: defaultCallbacks }),
+	close: sellModal$.close,
+});
 
 export const SellModal = () => {
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	return (
 		<Show if={sellModal$.isOpen}>
-			<Modal />
+			<ModalContent showTransactionStatusModal={showTransactionStatusModal} />
 		</Show>
 	);
 };
 
-const Modal = () => {
-	useHydrate();
-	return <ModalContent />;
-};
+type TransactionStatusModalReturn = ReturnType<
+	typeof useTransactionStatusModal
+>;
 
-const ModalContent = observer(() => {
-	const modalState = sellModal$.state.get();
-	const { collectionAddress, chainId, tokenId, order } = modalState;
+const ModalContent = observer(
+	({
+		showTransactionStatusModal,
+	}: {
+		showTransactionStatusModal: TransactionStatusModalReturn['show'];
+	}) => {
+		const { tokenId, collectionAddress, chainId, order } = sellModal$.get();
+		const { data: collectible } = useCollection({
+			chainId,
+			collectionAddress,
+		});
 
-	const { steps } = sellModal$.get();
+		const { sell } = useSell({
+			collectionAddress,
+			chainId,
+			onTransactionSent: (hash) => {
+				if (!hash) return;
+				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,
+					queriesToInvalidate: [
+						...collectableKeys.all,
+						balanceQueries.all,
+					] as unknown as QueryKey[],
+				});
+				sellModal$.close();
+			},
+			onSuccess: (hash) => {
+				sellModal$.callbacks?.onSuccess?.(hash);
+			},
+			onError: (error) => {
+				sellModal$.callbacks?.onError?.(error);
+			},
+		});
 
-	const { data: collection } = useCollection({ chainId, collectionAddress });
-	const { data: currencies } = useCurrencies({ chainId, collectionAddress });
-	const currency = currencies?.find(
-		(currency) => currency.contractAddress === order?.priceCurrencyAddress,
-	);
+		const {
+			data: collection,
+			isLoading: collectionLoading,
+			isError: collectionError,
+		} = useCollection({
+			chainId,
+			collectionAddress,
+		});
 
-	const ctas = [
-		{
-			label: 'Approve TOKEN',
-			onClick: steps.tokenApproval.execute,
-			hidden: !steps.tokenApproval.isNeeded(),
-			pending: steps.tokenApproval.pending,
-			variant: 'glass' as const,
-		},
-		{
-			label: 'Accept',
-			onClick: steps.sell.execute,
-			pending: steps.sell.pending,
-			disabled: steps.tokenApproval.isNeeded(),
-		},
-	] satisfies ActionModalProps['ctas'];
+		const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+			chainId,
+			collectionAddress,
+		});
 
-	return (
-		<ActionModal
-			store={sellModal$}
-			onClose={() => sellModal$.close()}
-			title="You have an offer"
-			ctas={ctas}
-		>
-			<TransactionHeader
-				title="Offer received"
-				chainId={Number(chainId)}
-				date={order && new Date(order.createdAt)}
-			/>
-			<TokenPreview
-				collectionName={collection?.name}
-				collectionAddress={collectionAddress}
-				collectibleId={tokenId}
-				chainId={chainId}
-			/>
-			<TransactionDetails
-				collectibleId={tokenId}
-				collectionAddress={collectionAddress}
-				chainId={chainId}
-				price={
-					currency
-						? ({ amountRaw: order?.priceAmount, currency } as Price)
-						: undefined
-				}
-			/>
-		</ActionModal>
-	);
-});
+		if (collectionLoading || currenciesLoading) {
+			return (
+				<LoadingModal
+					store={sellModal$}
+					onClose={sellModal$.close}
+					title="You have an offer"
+				/>
+			);
+		}
+
+		if (collectionError || order === undefined) {
+			return (
+				<ErrorModal
+					store={sellModal$}
+					onClose={sellModal$.close}
+					title="You have an offer"
+				/>
+			);
+		}
+
+		const currency = currencies?.find(
+			(c) => c.contractAddress === order?.priceCurrencyAddress,
+		);
+
+		return (
+			<ActionModal
+				store={sellModal$}
+				onClose={sellModal$.close}
+				title="You have an offer"
+				ctas={[
+					{
+						label: 'Accept',
+						onClick: () =>
+							sell({
+								orderId: order?.orderId,
+								marketplace: order?.marketplace,
+							}),
+					},
+				]}
+			>
+				<TransactionHeader
+					title="Offer received"
+					currencyImageUrl={currency?.imageUrl}
+					date={order && new Date(order.createdAt)}
+				/>
+				<TokenPreview
+					collectionName={collection?.name}
+					collectionAddress={collectionAddress}
+					collectibleId={tokenId}
+					chainId={chainId}
+				/>
+				<TransactionDetails
+					collectibleId={tokenId}
+					collectionAddress={collectionAddress}
+					chainId={chainId}
+					price={
+						currency
+							? {
+									amountRaw: order?.priceAmount,
+									currency,
+								}
+							: undefined
+					}
+					currencyImageUrl={currency?.imageUrl}
+				/>
+			</ActionModal>
+		);
+	},
+);

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

@@ -1,12 +1,17 @@
 import type { ComponentType } from 'react';
-
 import type { IconProps } from '@0xsequence/design-system';
 import { observable } from '@legendapp/state';
 import type { TokenMetadata } from '../../../_internal';
+import type { ModalCallbacks } from '../_internal/types';
 
 export interface SuccessfulPurchaseModalState {
 	isOpen: boolean;
-	open: (args: SuccessfulPurchaseModalState['state']) => void;
+	open: (
+		args: SuccessfulPurchaseModalState['state'] & {
+			callbacks?: ModalCallbacks;
+			defaultCallbacks?: ModalCallbacks;
+		},
+	) => void;
 	close: () => void;
 	state: {
 		collectibles: TokenMetadata[];
@@ -19,6 +24,7 @@ export interface SuccessfulPurchaseModalState {
 			ctaIcon?: ComponentType<IconProps>;
 		};
 	};
+	callbacks?: ModalCallbacks;
 }
 
 const initialState: SuccessfulPurchaseModalState = {
@@ -29,7 +35,12 @@ const initialState: SuccessfulPurchaseModalState = {
 		explorerName,
 		explorerUrl,
 		ctaOptions,
-	}: SuccessfulPurchaseModalState['state']) => {
+		callbacks,
+		defaultCallbacks,
+	}: SuccessfulPurchaseModalState['state'] & {
+		callbacks?: ModalCallbacks;
+		defaultCallbacks?: ModalCallbacks;
+	}) => {
 		successfulPurchaseModal$.state.set({
 			...successfulPurchaseModal$.state.get(),
 			collectibles,
@@ -38,10 +49,12 @@ const initialState: SuccessfulPurchaseModalState = {
 			explorerUrl: explorerUrl,
 			ctaOptions,
 		});
+		successfulPurchaseModal$.callbacks.set(callbacks || defaultCallbacks);
 		successfulPurchaseModal$.isOpen.set(true);
 	},
 	close: () => {
 		successfulPurchaseModal$.isOpen.set(false);
+		successfulPurchaseModal$.callbacks.set(undefined);
 		successfulPurchaseModal$.state.set({
 			...initialState.state,
 		});
@@ -53,6 +66,7 @@ const initialState: SuccessfulPurchaseModalState = {
 		explorerUrl: '',
 		ctaOptions: undefined,
 	},
+	callbacks: undefined,
 };
 
 export const successfulPurchaseModal$ = observable(initialState);

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

@@ -25,11 +25,12 @@ import {
 	dialogContent,
 	dialogOverlay,
 } from './styles.css';
+import type { ModalCallbacks } from '../_internal/types';
 
-export const useSuccessfulPurchaseModal = () => {
+export const useSuccessfulPurchaseModal = (callbacks?: ModalCallbacks) => {
 	return {
 		show: (args: SuccessfulPurchaseModalState['state']) =>
-			successfulPurchaseModal$.open(args),
+			successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
 		close: () => successfulPurchaseModal$.close(),
 	};
 };