@0xsequence/marketplace-sdk 0.4.0 → 0.4.2

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

@@ -1,249 +1,13 @@
-import { Show, observer } from '@legendapp/state/react';
-import type { QueryKey } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import { parseUnits, type Hex } from 'viem';
-import {
-	ContractType,
-	OrderbookKind,
-	collectableKeys,
-} from '../../../_internal';
-import { useCollectible, useCollection, useCurrencies } 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 { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
-import { makeOfferModal$ } from './_store';
-import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
-import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
+import { type OpenMakeOfferModalArgs, makeOfferModal$ } from './store';
 
-export type ShowMakeOfferModalArgs = {
-	collectionAddress: Hex;
-	chainId: string;
-	collectibleId: string;
-	orderbookKind: OrderbookKind;
-};
+export type ShowMakeOfferModalArgs = Exclude<
+	OpenMakeOfferModalArgs,
+	'callbacks'
+>;
 
-export const useMakeOfferModal = (defaultCallbacks?: ModalCallbacks) => ({
+export const useMakeOfferModal = (callbacks?: ModalCallbacks) => ({
 	show: (args: ShowMakeOfferModalArgs) =>
-		makeOfferModal$.open({ ...args, callbacks: defaultCallbacks }),
-	close: makeOfferModal$.close,
+		makeOfferModal$.open({ ...args, callbacks }),
+	close: () => makeOfferModal$.close(),
 });
-
-export const MakeOfferModal = () => {
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
-	return (
-		<Show if={makeOfferModal$.isOpen}>
-			<ModalContent showTransactionStatusModal={showTransactionStatusModal} />
-		</Show>
-	);
-};
-
-type TransactionStatusModalReturn = ReturnType<
-	typeof useTransactionStatusModal
->;
-
-const ModalContent = observer(
-	({
-		showTransactionStatusModal,
-	}: {
-		showTransactionStatusModal: TransactionStatusModalReturn['show'];
-	}) => {
-		const state = makeOfferModal$.get();
-		const {
-			collectionAddress,
-			chainId,
-			offerPrice,
-			collectibleId,
-			orderbookKind,
-		} = 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 currencyOptions = useCurrencyOptions({ collectionAddress });
-		const { isLoading: currenciesIsLoading } = useCurrencies({
-			chainId,
-			currencyOptions,
-		});
-
-		const { getMakeOfferSteps } = useMakeOffer({
-			chainId,
-			collectionAddress,
-			orderbookKind,
-			onTransactionSent: (hash, orderId) => {
-				if (!hash && !orderId) return;
-
-				showTransactionStatusModal({
-					hash,
-					orderId,
-					price: makeOfferModal$.offerPrice.get(),
-					collectionAddress,
-					chainId,
-					collectibleId,
-					type: TransactionType.OFFER,
-					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
-				});
-				makeOfferModal$.close();
-			},
-			onSuccess: (hash) => {
-				if (typeof makeOfferModal$.callbacks?.onSuccess === 'function') {
-					makeOfferModal$.callbacks.onSuccess(hash);
-				} else {
-					console.debug('onSuccess callback not provided:', hash);
-				}
-			},
-			onError: (error) => {
-				if (typeof makeOfferModal$.callbacks?.onError === 'function') {
-					makeOfferModal$.callbacks.onError(error);
-				} else {
-					console.debug('onError callback not provided:', 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: parseUnits(
-					makeOfferModal$.quantity.get(),
-					collectible?.decimals || 0,
-				).toString(),
-				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"
-				/>
-			);
-		}
-
-		if (collectableIsError || collectionIsError) {
-			return (
-				<ErrorModal
-					store={makeOfferModal$}
-					onClose={makeOfferModal$.close}
-					title="Make an offer"
-				/>
-			);
-		}
-
-		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,
-				disabled: makeOfferModal$.invalidQuantity.get(),
-			},
-			{
-				label: 'Make offer',
-				onClick: () => handleStepExecution(() => steps?.transaction.execute()),
-				pending: steps?.transaction.isExecuting || isLoading,
-				disabled:
-					steps?.approval.isPending ||
-					offerPrice.amountRaw === '0' ||
-					insufficientBalance ||
-					isLoading ||
-					makeOfferModal$.invalidQuantity.get(),
-			},
-		];
-
-		return (
-			<ActionModal
-				store={makeOfferModal$}
-				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}
-					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 && (
-					<FloorPriceText
-						tokenId={collectibleId}
-						chainId={chainId}
-						collectionAddress={collectionAddress}
-						price={offerPrice}
-					/>
-				)}
-
-				<ExpirationDateSelect $date={makeOfferModal$.expiry} />
-			</ActionModal>
-		);
-	},
-);

package/src/react/ui/modals/MakeOfferModal/{_store.ts → store.ts}

@@ -1,42 +1,53 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
 import type { Hex } from 'viem';
-import { Currency, OrderbookKind, Price } from '../../../../types';
+import { type Currency, OrderbookKind, type Price } from '../../../../types';
+import type { CollectionType } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
-type MakeOfferModalState = BaseModalState & {
+type MakeOfferState = BaseModalState & {
 	orderbookKind: OrderbookKind;
 	collectibleId: string;
 	offerPrice: Price;
+	offerPriceChanged: boolean;
 	quantity: string;
 	expiry: Date;
 	invalidQuantity: boolean;
+	collectionType?: CollectionType;
 };
 
-const initialState: MakeOfferModalState & {
-	open: (args: {
-		collectionAddress: Hex;
-		chainId: string;
-		collectibleId: string;
-		orderbookKind: OrderbookKind;
-		callbacks?: ModalCallbacks;
-	}) => void;
+export type OpenMakeOfferModalArgs = {
+	collectionAddress: Hex;
+	chainId: string;
+	collectibleId: string;
+	orderbookKind: OrderbookKind;
+	callbacks?: ModalCallbacks;
+};
+
+type Actions = {
+	open: (args: OpenMakeOfferModalArgs) => void;
 	close: () => void;
-} = {
+};
+
+const initialState: MakeOfferState = {
 	isOpen: false,
 	collectionAddress: '' as Hex,
 	chainId: '',
 	collectibleId: '',
-	orderbookKind: OrderbookKind.sequence_marketplace_v2,
+	orderbookKind: OrderbookKind.reservoir,
 	callbacks: undefined,
 	offerPrice: {
 		amountRaw: '1',
 		currency: {} as Currency,
 	},
+	offerPriceChanged: false,
 	quantity: '1',
 	invalidQuantity: false,
 	expiry: new Date(addDays(new Date(), 7).toJSON()),
+	collectionType: undefined,
+};
 
+const actions: Actions = {
 	open: (args) => {
 		makeOfferModal$.collectionAddress.set(args.collectionAddress);
 		makeOfferModal$.chainId.set(args.chainId);
@@ -45,11 +56,13 @@ const initialState: MakeOfferModalState & {
 		makeOfferModal$.callbacks.set(args.callbacks);
 		makeOfferModal$.isOpen.set(true);
 	},
-
 	close: () => {
 		makeOfferModal$.isOpen.set(false);
-		makeOfferModal$.callbacks.set(undefined);
+		makeOfferModal$.set({ ...initialState, ...actions });
 	},
 };
 
-export const makeOfferModal$ = observable(initialState);
+export const makeOfferModal$ = observable<MakeOfferState & Actions>({
+	...initialState,
+	...actions,
+});

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

@@ -0,0 +1,218 @@
+import { Show, observer } from '@legendapp/state/react';
+import type { QueryKey } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { parseUnits } from 'viem';
+import { balanceQueries, collectableKeys } from '../../../_internal';
+import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
+import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
+import { useCollection, useCurrencies } from '../../../hooks';
+import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
+import { useSell } from '../../../hooks/useSell';
+import {
+	ActionModal,
+	type ActionModalProps,
+} from '../_internal/components/actionModal/ActionModal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+import TokenPreview from '../_internal/components/tokenPreview';
+import TransactionDetails from '../_internal/components/transactionDetails';
+import TransactionHeader from '../_internal/components/transactionHeader';
+import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import { sellModal$ } from './store';
+
+type TransactionStatusModalReturn = ReturnType<
+	typeof useTransactionStatusModal
+>;
+
+export const SellModal = () => {
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	return (
+		<Show if={sellModal$.isOpen}>
+			{() => <Modal showTransactionStatusModal={showTransactionStatusModal} />}
+		</Show>
+	);
+};
+
+const Modal = observer(
+	({
+		showTransactionStatusModal,
+	}: {
+		showTransactionStatusModal: TransactionStatusModalReturn['show'];
+	}) => {
+		const { tokenId, collectionAddress, chainId, order, callbacks } =
+			sellModal$.get();
+		const { data: collectible } = useCollection({
+			chainId,
+			collectionAddress,
+		});
+		const [approvalExecutedSuccess, setApprovalExecutedSuccess] =
+			useState(false);
+		const {
+			data: collection,
+			isLoading: collectionLoading,
+			isError: collectionError,
+		} = useCollection({
+			chainId,
+			collectionAddress,
+		});
+		const currencyOptions = useCurrencyOptions({ collectionAddress });
+		const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
+			chainId,
+			currencyOptions,
+		});
+		const { getSellSteps, isLoading: machineLoading } = useSell({
+			collectionAddress,
+			chainId,
+			enabled: sellModal$.isOpen.get(),
+			onApprovalSuccess: () => setApprovalExecutedSuccess(true),
+			onTransactionSent: (hash) => {
+				if (!hash) return;
+				showTransactionStatusModal({
+					hash: hash,
+					price: order
+						? {
+								amountRaw: order.priceAmount,
+								currency: currencies?.find(
+									(currency) =>
+										currency.contractAddress === order.priceCurrencyAddress,
+								) ?? {
+									chainId: Number(chainId),
+									contractAddress: order.priceCurrencyAddress,
+									name: 'Unknown',
+									symbol: 'UNK',
+									decimals: 18,
+									imageUrl: '',
+									exchangeRate: 0,
+									defaultChainCurrency: false,
+									nativeCurrency: false,
+									createdAt: new Date().toISOString(),
+									updatedAt: new Date().toISOString(),
+								},
+							}
+						: undefined,
+					collectionAddress,
+					chainId,
+					collectibleId: tokenId,
+					type: TransactionType.SELL,
+					queriesToInvalidate: [
+						...collectableKeys.all,
+						balanceQueries.all,
+					] as unknown as QueryKey[],
+					callbacks,
+				});
+				sellModal$.close();
+			},
+		});
+
+		const { isLoading, steps, refreshSteps } = getSellSteps({
+			orderId: order?.orderId ?? '',
+			marketplace: order?.marketplace as MarketplaceKind,
+			quantity: order?.quantityRemaining
+				? parseUnits(
+						order.quantityRemaining,
+						collectible?.decimals || 0,
+					).toString()
+				: '1',
+		});
+
+		useEffect(() => {
+			refreshSteps();
+		}, [order, machineLoading]);
+
+		// 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 (collectionLoading || currenciesLoading || machineLoading) {
+			return (
+				<LoadingModal
+					isOpen={sellModal$.isOpen.get()}
+					chainId={Number(chainId)}
+					onClose={sellModal$.close}
+					title="You have an offer"
+				/>
+			);
+		}
+
+		if (collectionError || order === undefined) {
+			return (
+				<ErrorModal
+					isOpen={sellModal$.isOpen.get()}
+					chainId={Number(chainId)}
+					onClose={sellModal$.close}
+					title="You have an offer"
+				/>
+			);
+		}
+
+		const approvalNeeded = steps?.approval.isPending;
+
+		const currency = currencies?.find(
+			(c) => c.contractAddress === order?.priceCurrencyAddress,
+		);
+
+		const ctas = [
+			{
+				label: 'Approve TOKEN',
+				onClick: () => handleStepExecution(() => steps?.approval.execute()),
+				hidden: !approvalNeeded || approvalExecutedSuccess,
+				pending: steps?.approval.isExecuting || isLoading,
+				variant: 'glass' as const,
+				disabled: isLoading || steps?.transaction.isExecuting,
+			},
+			{
+				label: 'Accept',
+				onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+				pending: steps?.transaction.isExecuting || isLoading,
+				disabled: (!approvalExecutedSuccess && approvalNeeded) || isLoading,
+			},
+		] satisfies ActionModalProps['ctas'];
+
+		return (
+			<ActionModal
+				isOpen={sellModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={sellModal$.close}
+				title="You have an offer"
+				ctas={ctas}
+			>
+				<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>
+		);
+	},
+);