@0xsequence/marketplace-sdk 0.0.1

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

@@ -0,0 +1,296 @@
+import { observable, when } from '@legendapp/state';
+import { useMount, useSelector } from '@legendapp/state/react';
+import { useCollection } from '@react-hooks/useCollection';
+import { useGenerateOfferTransaction } from '@react-hooks/useGenerateOfferTransaction';
+import {
+	type Currency,
+	OrderbookKind,
+	type Price,
+	type Step,
+	StepType,
+	type WalletKind,
+} from '@types';
+import { addDays } from 'date-fns/addDays';
+import { parseUnits, type Hex } from 'viem';
+import { useAccount, useSendTransaction } from 'wagmi';
+import type { ShowMakeOfferModalArgs } from '.';
+import type { Messages } from '../../../../types/messages';
+import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import {
+	getMakeOfferTransactionMessage,
+	getMakeOfferTransactionTitle,
+} from './_utils/getMakeOfferTransactionTitleMessage';
+import { useCollectible } from '@react-hooks/useCollectible';
+import type { CollectionType } from '@internal';
+
+export interface MakeOfferModalState {
+	isOpen: boolean;
+	open: (args: ShowMakeOfferModalArgs) => void;
+	close: () => void;
+	state: {
+		collectionName: string;
+		collectionType: CollectionType | undefined;
+		offerPrice: Price;
+		quantity: string;
+		collectionAddress: string;
+		chainId: string;
+		collectibleId: string;
+		expiry: Date;
+		messages?: Messages;
+	};
+	steps: {
+		isLoading: () => boolean;
+		stepsData: Step[] | undefined;
+		_currentStep: null | 'tokenApproval' | 'createOffer';
+		tokenApproval: {
+			isNeeded: () => boolean;
+			pending: boolean;
+			getStep: () => Step | undefined;
+			execute: () => void;
+		};
+		createOffer: {
+			pending: boolean;
+			execute: () => void;
+		};
+	};
+	hash: Hex | undefined;
+}
+
+export const initialState: MakeOfferModalState = {
+	isOpen: false,
+	open: ({
+		collectionAddress,
+		chainId,
+		collectibleId,
+		messages,
+	}: ShowMakeOfferModalArgs) => {
+		makeOfferModal$.state.set({
+			...makeOfferModal$.state.get(),
+			collectionAddress,
+			chainId,
+			collectibleId,
+			messages,
+		});
+		makeOfferModal$.isOpen.set(true);
+	},
+	close: () => {
+		makeOfferModal$.isOpen.set(false);
+	},
+	state: {
+		collectionName: '',
+		offerPrice: {
+			amountRaw: '0',
+			currency: {} as Currency,
+		},
+		quantity: '1',
+		expiry: new Date(addDays(new Date(), 7).toJSON()),
+		collectionType: undefined,
+		collectionAddress: '',
+		chainId: '',
+		collectibleId: '',
+	},
+	steps: {
+		isLoading: () => !!makeOfferModal$.steps.stepsData.get(),
+		stepsData: undefined,
+		_currentStep: null,
+		tokenApproval: {} as MakeOfferModalState['steps']['tokenApproval'],
+		createOffer: {} as MakeOfferModalState['steps']['createOffer'],
+	},
+	hash: undefined,
+};
+
+export const makeOfferModal$ = observable(initialState);
+
+const exp = new Date(addDays(new Date(), 7).toJSON());
+
+export const useHydrate = () => {
+	const chainId = useSelector(makeOfferModal$.state.chainId);
+	const collectionAddress = useSelector(
+		makeOfferModal$.state.collectionAddress,
+	);
+	const currencyAddress = useSelector(
+		makeOfferModal$.state.offerPrice.currency.contractAddress,
+	);
+	const collectionType = useSelector(makeOfferModal$.state.collectionType);
+	const { data: collection, isSuccess: isSuccessCollection } = useCollection({
+		chainId,
+		collectionAddress,
+	});
+
+	when(isSuccessCollection, () => {
+		makeOfferModal$.state.collectionName.set(collection!.name);
+		makeOfferModal$.state.collectionType.set(
+			collection!.type as CollectionType,
+		);
+	});
+
+	useTokenApprovalHandler(chainId);
+	useCreateOfferHandler(chainId);
+
+	const onOfferSuccess = (data?: Step[]) => {
+		makeOfferModal$.steps.stepsData.set(data);
+	};
+
+	const { generateOfferTransactionAsync } = useGenerateOfferTransaction({
+		chainId,
+		onSuccess: onOfferSuccess,
+	});
+
+	const { connector, address: userAddress } = useAccount();
+
+	useMount(() => {
+		const setSteps = async () => {
+			const makeOfferTransactionData = await generateOfferTransactionAsync({
+				collectionAddress,
+				orderbook: OrderbookKind.sequence_marketplace_v1,
+				offer: {
+					tokenId: '1',
+					quantity: '1',
+					expiry: exp,
+					currencyAddress,
+					pricePerToken:
+						makeOfferModal$.state.offerPrice.amountRaw.get() || '1',
+				},
+				maker: userAddress!,
+				contractType: collectionType!,
+				walletType: connector?.id as WalletKind,
+			});
+			makeOfferModal$.steps.stepsData.set(makeOfferTransactionData);
+		};
+
+		when(isSuccessCollection && collectionType && currencyAddress, setSteps);
+	});
+};
+
+const useTokenApprovalHandler = (chainId: string) => {
+	const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
+	const {
+		onUnknownError,
+		onSuccess,
+	}: { onUnknownError?: Function; onSuccess?: Function } =
+		makeOfferModal$.state.get().messages?.approveToken || {};
+
+	makeOfferModal$.steps.tokenApproval.set({
+		isNeeded: () => !!makeOfferModal$.steps.tokenApproval.getStep(),
+		getStep: () =>
+			makeOfferModal$.steps.stepsData
+				?.get()
+				?.find((s) => s.id === StepType.tokenApproval),
+		pending:
+			makeOfferModal$.steps._currentStep.get() === 'tokenApproval' && isPending,
+		execute: () => {
+			const step = makeOfferModal$.steps.tokenApproval.getStep();
+			if (!step) return;
+			makeOfferModal$.steps._currentStep.set('tokenApproval');
+			try {
+				sendTransactionAsync({
+					to: step.to as Hex,
+					chainId: Number(chainId),
+					data: step.data as Hex,
+					value: BigInt(step.value || '0'),
+				});
+
+				onSuccess && onSuccess();
+			} catch (error) {
+				onUnknownError && onUnknownError(error);
+			}
+		},
+	});
+
+	if (
+		isSuccess &&
+		makeOfferModal$.steps._currentStep.get() === 'tokenApproval'
+	) {
+		makeOfferModal$.steps._currentStep.set(null);
+	}
+};
+
+const useCreateOfferHandler = (chainId: string) => {
+	const { collectibleId, collectionAddress } = makeOfferModal$.state.get();
+	const { connector, address } = useAccount();
+	const {
+		generateOfferTransactionAsync,
+		isPending: generateOfferTransactionPending,
+		error: generateOfferTransactionError,
+	} = useGenerateOfferTransaction({ chainId });
+	const { data: collectible } = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
+	const {
+		onUnknownError,
+		onSuccess,
+	}: { onUnknownError?: Function; onSuccess?: Function } =
+		makeOfferModal$.state.get().messages?.sellCollectible || {};
+
+	const { sendTransactionAsync, isPending: sendTransactionPending } =
+		useSendTransaction();
+
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+
+	makeOfferModal$.steps.createOffer.set({
+		pending:
+			makeOfferModal$.steps._currentStep.get() === 'createOffer' &&
+			(generateOfferTransactionPending || sendTransactionPending),
+		execute: () => {
+			makeOfferModal$.steps._currentStep.set('createOffer');
+			generateOfferTransactionAsync({
+				collectionAddress: makeOfferModal$.state.collectionAddress.get(),
+				maker: address!,
+				contractType: makeOfferModal$.state.collectionType.get()!,
+				orderbook: OrderbookKind.sequence_marketplace_v1,
+				walletType: connector?.id as WalletKind,
+				offer: {
+					tokenId: makeOfferModal$.state.collectibleId.get(),
+					quantity: makeOfferModal$.state.quantity.get(),
+					expiry: makeOfferModal$.state.expiry.get(),
+					currencyAddress:
+						makeOfferModal$.state.offerPrice.currency.contractAddress.get(),
+					pricePerToken: parseUnits(
+						makeOfferModal$.state.offerPrice.amountRaw.get(),
+						makeOfferModal$.state.offerPrice.currency.decimals.get(),
+					).toString(),
+				},
+			})
+				.then(async (steps) => {
+					const step = steps.find((s) => s.id === StepType.createOffer);
+					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'),
+					});
+
+					makeOfferModal$.hash.set(hash);
+
+					makeOfferModal$.steps._currentStep.set(null);
+
+					showTransactionStatusModal({
+						hash: hash!,
+						price: makeOfferModal$.state.offerPrice.get(),
+						collectionAddress,
+						chainId,
+						tokenId: collectibleId,
+						getTitle: getMakeOfferTransactionTitle,
+						getMessage: (params) =>
+							getMakeOfferTransactionMessage(params, collectible?.name || ''),
+						type: StepType.createOffer,
+					});
+
+					makeOfferModal$.close();
+
+					onSuccess && onSuccess();
+				})
+				.catch((error) => {
+					onUnknownError && onUnknownError(error);
+				});
+		},
+	});
+
+	if (generateOfferTransactionError) {
+		onUnknownError && onUnknownError(generateOfferTransactionError);
+	}
+};

package/src/react/ui/modals/MakeOfferModal/_utils/getMakeOfferTransactionTitleMessage.ts

@@ -0,0 +1,28 @@
+import type { ConfirmationStatus } from '../../_internal/components/transactionStatusModal/store';
+
+export const getMakeOfferTransactionTitle = (params: ConfirmationStatus) => {
+	if (params.isConfirmed) {
+		return 'Your offer has processed';
+	}
+
+	if (params.isFailed) {
+		return 'Your offer has failed';
+	}
+
+	return 'Your offer is processing';
+};
+
+export const getMakeOfferTransactionMessage = (
+	params: ConfirmationStatus,
+	collectibleName: string,
+) => {
+	if (params.isConfirmed) {
+		return `You just made offer for ${collectibleName}. It’s been confirmed on the blockchain!`;
+	}
+
+	if (params.isFailed) {
+		return `Your offer for ${collectibleName} has failed. Please try again.`;
+	}
+
+	return `You just made offer for ${collectibleName}. It should be confirmed on the blockchain shortly.`;
+};

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

@@ -0,0 +1,157 @@
+import { ContractType } from '@internal';
+import { Show, observer } from '@legendapp/state/react';
+import { type Hex, erc20Abi, parseUnits } from 'viem';
+import { useAccount, useReadContract } from 'wagmi';
+import {
+	ActionModal,
+	type ActionModalProps,
+} 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 TokenPreview from '../_internal/components/tokenPreview';
+import { makeOfferModal$, useHydrate } from './_store';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import type { Messages } from '../../../../types/messages';
+
+export type ShowMakeOfferModalArgs = {
+	collectionAddress: string;
+	chainId: string;
+	collectibleId: string;
+	messages?: Messages;
+};
+
+export const useMakeOfferModal = () => {
+	const { chainId: accountChainId } = useAccount();
+	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+
+	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),
+				messages: args.messages?.switchChain,
+			});
+			return;
+		}
+
+		openModal(args);
+	};
+
+	return {
+		show: handleShowModal,
+		close: () => makeOfferModal$.close(),
+	};
+};
+
+export const MakeOfferModal = () => {
+	return (
+		<Show if={makeOfferModal$.isOpen}>
+			<Modal />
+		</Show>
+	);
+};
+
+const Modal = () => {
+	useHydrate();
+	return <ModalContent />;
+};
+
+const ModalContent = observer(() => {
+	const {
+		chainId,
+		collectionAddress,
+		collectibleId,
+		collectionName,
+		collectionType,
+		offerPrice,
+	} = makeOfferModal$.state.get();
+
+	const { steps } = makeOfferModal$.get();
+
+	const { address: accountAddress } = useAccount();
+	const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
+		address:
+			makeOfferModal$.state.offerPrice.currency.contractAddress.get() as Hex,
+		abi: erc20Abi,
+		functionName: 'balanceOf',
+		args: [accountAddress as Hex],
+	});
+
+	let balanceError = '';
+	if (
+		isBalanceSuccess &&
+		parseUnits(offerPrice.amountRaw, offerPrice.currency.decimals) >
+			(balance || 0)
+	) {
+		balanceError = 'Insufficient balance';
+	}
+
+	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',
+		},
+	] satisfies ActionModalProps['ctas'];
+
+	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}
+				error={balanceError}
+			/>
+
+			{collectionType === ContractType.ERC1155 && (
+				<QuantityInput
+					chainId={chainId}
+					$quantity={makeOfferModal$.state.quantity}
+					collectionAddress={collectionAddress}
+					collectibleId={collectibleId}
+				/>
+			)}
+
+			{!!offerPrice && (
+				<FloorPriceText
+					tokenId={collectibleId}
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					price={offerPrice}
+				/>
+			)}
+
+			<ExpirationDateSelect $date={makeOfferModal$.state.expiry} />
+		</ActionModal>
+	);
+});