@0xsequence/marketplace-sdk 0.3.0 → 0.3.1

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

@@ -0,0 +1,119 @@
+import type { Hex } from 'viem';
+import { buyModal$ } from './_store';
+import { ContractType, type Order } from '../../../_internal';
+import { observer, useSelector } from '@legendapp/state/react';
+import { useCollectible, useCollection } from '../../../hooks';
+import { ActionModal } from '../_internal/components/actionModal';
+import { useEffect } from 'react';
+import QuantityInput from '..//_internal/components/quantityInput';
+import { useBuyCollectable } from '../../../hooks/useBuyCollectable';
+import type { ModalCallbacks } from '../_internal/types';
+
+export type ShowBuyModalArgs = {
+	chainId: string;
+	collectionAddress: Hex;
+	tokenId: string;
+	order: Order;
+};
+
+export const useBuyModal = (callbacks?: ModalCallbacks) => {
+	return {
+		show: (args: ShowBuyModalArgs) =>
+			buyModal$.open({ ...args, defaultCallbacks: callbacks }),
+		close: () => buyModal$.close(),
+	};
+};
+
+export const BuyModal = () => {
+	const isOpen = useSelector(buyModal$.isOpen);
+	const { data: collection } = useCollection({
+		chainId: buyModal$.state.order.chainId.get(),
+		collectionAddress: buyModal$.state.order.collectionContractAddress.get(),
+	});
+
+	if (!isOpen || !collection) return null;
+
+	return collection.type === ContractType.ERC721 ? (
+		<CheckoutModal />
+	) : (
+		<ERC1155QuantityModal />
+	);
+};
+
+const CheckoutModal = observer(() => {
+	const order = buyModal$.state.order.get();
+	const chainId = String(order.chainId);
+	const collectionAddress = order.collectionContractAddress as Hex;
+	const collectibleId = order.tokenId;
+
+	const { buy } = useBuyCollectable({
+		chainId,
+		collectionAddress,
+	});
+
+	const { data: collectable } = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (!collectable) return;
+		buy({
+			orderId: order.orderId,
+			collectableDecimals: collectable.decimals || 0,
+			quantity: '1',
+			marketplace: order.marketplace,
+		});
+	}, [order, collectable]);
+
+	return <></>;
+});
+
+const ERC1155QuantityModal = observer(() => {
+	const order = buyModal$.state.order.get();
+	const chainId = String(order.chainId);
+	const collectionAddress = order.collectionContractAddress as Hex;
+	const collectibleId = order.tokenId;
+
+	const { buy } = useBuyCollectable({
+		chainId,
+		collectionAddress,
+	});
+
+	const { data: collectable } = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
+	if (!order || !collectable) return null;
+
+	return (
+		<ActionModal
+			store={buyModal$}
+			onClose={() => buyModal$.close()}
+			title="Select Quantity"
+			ctas={[
+				{
+					label: 'Select Quantity',
+					onClick: () =>
+						buy({
+							quantity: buyModal$.state.quantity.get(),
+							orderId: order.orderId,
+							collectableDecimals: collectable.decimals || 0,
+							marketplace: order.marketplace,
+						}),
+				},
+			]}
+		>
+			<QuantityInput
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
+				$quantity={buyModal$.state.quantity}
+			/>
+		</ActionModal>
+	);
+});

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

@@ -1,325 +1,48 @@
-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 { addDays } from 'date-fns/addDays';
-import type { Hex } from 'viem';
-import { useAccount, useSendTransaction } from 'wagmi';
-import type { ShowCreateListingModalArgs } from '.';
-import type { Price } from '../../../../types';
-import type {
-	CreateListingErrorCallbacks,
-	CreateListingSuccessCallbacks,
-} from '../../../../types/callbacks';
-import {
-	type CollectionType,
-	type Currency,
-	OrderbookKind,
-	type Step,
-	StepType,
-	type WalletKind,
-	collectableKeys,
-} from '../../../_internal';
-import {
-	useCollectible,
-	useCollection,
-	useGenerateListingTransaction,
-} from '../../../hooks';
-import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
-import {
-	getCreateListingTransactionMessage,
-	getCreateListingTransactionTitle,
-} from './_utils/getCreateListingTransactionTitleMessage';
+import type { Hash, Hex } from 'viem';
+import type { Currency } from '../../../../types';
+import type { ModalCallbacks } from '../_internal/types';
 
-export interface CreateListingModalState {
-	isOpen: boolean;
-	open: (args: ShowCreateListingModalArgs) => void;
-	close: () => void;
-	state: {
-		collectionName: string;
-		collectionType: CollectionType | undefined;
-		listingPrice: Price;
-		quantity: string;
+const initialState = {
+	isOpen: false,
+	collectionAddress: '' as Hex,
+	chainId: '',
+	collectibleId: '',
+	collectionName: '',
+	collectionType: undefined,
+	listingPrice: {
+		amountRaw: '0',
+		currency: {} as Currency,
+	},
+	quantity: '1',
+	expiry: new Date(addDays(new Date(), 7).toJSON()),
+	callbacks: undefined as ModalCallbacks | undefined,
+
+	onError: undefined as undefined | ((error: Error) => void),
+	onSuccess: undefined as undefined | ((hash: Hash) => void),
+
+	open: (args: {
 		collectionAddress: Hex;
 		chainId: string;
 		collectibleId: string;
-		expiry: Date;
-		errorCallbacks?: CreateListingErrorCallbacks;
-		successCallbacks?: CreateListingSuccessCallbacks;
-	};
-	steps: {
-		isLoading: () => boolean;
-		stepsData: Step[] | undefined;
-		_currentStep: null | 'tokenApproval' | 'createListing';
-		tokenApproval: {
-			isNeeded: () => boolean;
-			pending: boolean;
-			getStep: () => Step | undefined;
-			execute: () => void;
-		};
-		createListing: {
-			pending: boolean;
-			execute: () => void;
-		};
-	};
-	hash: Hex | undefined;
-}
-
-export const initialState: CreateListingModalState = {
-	isOpen: false,
-	open: ({
-		collectionAddress,
-		chainId,
-		collectibleId,
-	}: ShowCreateListingModalArgs) => {
-		createListingModal$.state.set({
-			...createListingModal$.state.get(),
-			collectionAddress,
-			chainId,
-			collectibleId,
-		});
+		callbacks?: ModalCallbacks;
+		defaultCallbacks?: ModalCallbacks;
+		onSuccess?: (hash?: Hash) => void;
+		onError?: (error: Error) => void;
+	}) => {
+		createListingModal$.collectionAddress.set(args.collectionAddress);
+		createListingModal$.chainId.set(args.chainId);
+		createListingModal$.collectibleId.set(args.collectibleId);
+		createListingModal$.callbacks.set(args.callbacks || args.defaultCallbacks);
+		createListingModal$.onSuccess.set(args.onSuccess);
+		createListingModal$.onError.set(args.onError);
 		createListingModal$.isOpen.set(true);
 	},
 	close: () => {
 		createListingModal$.isOpen.set(false);
+		createListingModal$.callbacks.set(undefined);
 	},
-	state: {
-		collectionName: '',
-		listingPrice: {
-			amountRaw: '0',
-			currency: {} as Currency,
-		},
-		quantity: '1',
-		expiry: new Date(addDays(new Date(), 7).toJSON()),
-		collectionType: undefined,
-		collectionAddress: '' as Hex,
-		chainId: '',
-		collectibleId: '',
-	},
-	steps: {
-		isLoading: () => !!createListingModal$.steps.stepsData.get(),
-		stepsData: undefined,
-		_currentStep: null,
-		tokenApproval: {} as CreateListingModalState['steps']['tokenApproval'],
-		createListing: {} as CreateListingModalState['steps']['createListing'],
-	},
-	hash: undefined,
 };
 
 export const createListingModal$ = observable(initialState);
-
-const exp = new Date(addDays(new Date(), 7).toJSON());
-
-export const useHydrate = () => {
-	const chainId = useSelector(createListingModal$.state.chainId);
-	const collectionAddress = useSelector(
-		createListingModal$.state.collectionAddress,
-	);
-	const collectionType = useSelector(createListingModal$.state.collectionType);
-	const { data: collection, isSuccess: isSuccessCollection } = useCollection({
-		chainId,
-		collectionAddress,
-	});
-
-	when(isSuccessCollection, () => {
-		createListingModal$.state.collectionName.set(collection!.name);
-		createListingModal$.state.collectionType.set(
-			collection!.type as CollectionType,
-		);
-	});
-
-	useTokenApprovalHandler(chainId);
-	useCreateListingHandler(chainId);
-	useShowTransactionStatusModal();
-
-	const onListingSuccess = (data?: Step[]) => {
-		createListingModal$.steps.stepsData.set(data);
-	};
-
-	const { generateListingTransactionAsync } = useGenerateListingTransaction({
-		chainId,
-		onSuccess: onListingSuccess,
-	});
-
-	const { connector, address: userAddress } = useAccount();
-
-	useMount(() => {
-		const setSteps = async () => {
-			const createListingTransactionSteps =
-				await generateListingTransactionAsync({
-					collectionAddress,
-					orderbook: OrderbookKind.sequence_marketplace_v1,
-					listing: {
-						tokenId: '1',
-						quantity: '1',
-						expiry: exp,
-						currencyAddress:
-							createListingModal$.state.listingPrice.currency.contractAddress.get(),
-						pricePerToken:
-							createListingModal$.state.listingPrice.amountRaw.get() || '1',
-					},
-					contractType: collectionType!,
-					walletType: connector?.id as WalletKind,
-					owner: userAddress!,
-				});
-
-			createListingModal$.steps.stepsData.set(createListingTransactionSteps);
-		};
-
-		when(isSuccessCollection && collectionType, setSteps);
-	});
-};
-
-const useTokenApprovalHandler = (chainId: string) => {
-	const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
-	const onError =
-		createListingModal$.state.get().errorCallbacks?.onApproveTokenError;
-	const onSuccess: (() => void) | undefined =
-		createListingModal$.state.get().successCallbacks?.onApproveTokenSuccess;
-
-	createListingModal$.steps.tokenApproval.set({
-		isNeeded: () => !!createListingModal$.steps.tokenApproval.getStep(),
-		getStep: () =>
-			createListingModal$.steps.stepsData
-				?.get()
-				?.find((s) => s.id === StepType.tokenApproval),
-		pending:
-			createListingModal$.steps._currentStep.get() === 'tokenApproval' &&
-			isPending,
-		execute: async () => {
-			const step = createListingModal$.steps.tokenApproval.getStep();
-			if (!step) return;
-			createListingModal$.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'),
-				});
-
-				onSuccess && onSuccess();
-			} catch (error) {
-				onError && onError(error);
-			}
-		},
-	});
-
-	if (
-		isSuccess &&
-		createListingModal$.steps._currentStep.get() === 'tokenApproval'
-	) {
-		createListingModal$.steps._currentStep.set(null);
-	}
-};
-
-const useCreateListingHandler = (chainId: string) => {
-	const { collectibleId, collectionAddress, errorCallbacks, successCallbacks } =
-		createListingModal$.state.get();
-	const { connector, address } = useAccount();
-	const {
-		generateListingTransactionAsync,
-		isPending: generateListingTransactionPending,
-	} = useGenerateListingTransaction({ chainId });
-	const { data: collectible } = useCollectible({
-		chainId,
-		collectionAddress,
-		collectibleId,
-	});
-
-	const { sendTransactionAsync, isPending: sendTransactionPending } =
-		useSendTransaction();
-
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
-
-	createListingModal$.steps.createListing.set({
-		pending:
-			createListingModal$.steps._currentStep.get() === 'createListing' &&
-			(generateListingTransactionPending || sendTransactionPending),
-		execute: () => {
-			createListingModal$.steps._currentStep.set('createListing');
-			generateListingTransactionAsync({
-				collectionAddress: createListingModal$.state.collectionAddress.get(),
-				contractType: createListingModal$.state.collectionType.get()!,
-				orderbook: OrderbookKind.sequence_marketplace_v1,
-				walletType: connector?.id as WalletKind,
-				listing: {
-					tokenId: createListingModal$.state.collectibleId.get(),
-					quantity: createListingModal$.state.quantity.get(),
-					expiry: createListingModal$.state.expiry.get(),
-					currencyAddress:
-						createListingModal$.state.listingPrice.currency.contractAddress.get(),
-					pricePerToken:
-						createListingModal$.state.listingPrice.amountRaw.get() || '1',
-				},
-				owner: address!,
-			})
-				.then(async (steps) => {
-					const step = steps.find((s) => s.id === StepType.createListing);
-					if (!step) throw new Error('No steps found');
-					const hash = await sendTransactionAsync({
-						to: step.to as Hex,
-						chainId: Number(chainId),
-						data: step.data as Hex,
-						value: BigInt(step.value || '0'),
-					});
-
-					createListingModal$.hash.set(hash);
-
-					createListingModal$.steps._currentStep.set(null);
-
-					createListingModal$.close();
-
-					showTransactionStatusModal({
-						hash: hash!,
-						price: createListingModal$.state.listingPrice.get(),
-						collectionAddress,
-						chainId,
-						tokenId: collectibleId,
-						getTitle: getCreateListingTransactionTitle,
-						getMessage: (params) =>
-							getCreateListingTransactionMessage(
-								params,
-								collectible?.name || '',
-							),
-						type: 'transfer',
-						callbacks: {
-							onSuccess: successCallbacks?.onCreateListingSuccess,
-							onUnknownError: errorCallbacks?.onCreateListingError,
-						},
-						queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
-					});
-				})
-				.catch((error) => {
-					errorCallbacks?.onCreateListingError?.(error);
-				});
-		},
-	});
-};
-
-const useShowTransactionStatusModal = () => {
-	const { hash } = createListingModal$.get();
-	const { collectibleId, chainId, collectionAddress } =
-		createListingModal$.state.get();
-	const { data: collectible } = useCollectible({
-		collectionAddress,
-		chainId,
-		collectibleId,
-	});
-
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
-
-	when(!!hash, () => {
-		showTransactionStatusModal({
-			hash: hash!,
-			collectionAddress,
-			chainId,
-			price: createListingModal$.state.listingPrice.get(),
-			tokenId: collectibleId,
-			getTitle: getCreateListingTransactionTitle,
-			getMessage: (params) =>
-				getCreateListingTransactionMessage(params, collectible?.name || ''),
-			type: StepType.createListing,
-		});
-	});
-};