@0xsequence/marketplace-sdk 0.0.1

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

@@ -0,0 +1,326 @@
+import { observable, when } from '@legendapp/state';
+import { useMount, useSelector } from '@legendapp/state/react';
+import { useCollection } from '@react-hooks/useCollection';
+import { useGenerateListingTransaction } from '@react-hooks/useGenerateListingTransaction';
+import {
+	type Currency,
+	OrderbookKind,
+	type Price,
+	type Step,
+	StepType,
+	type WalletKind,
+} from '@types';
+import { addDays } from 'date-fns/addDays';
+import type { Hex } from 'viem';
+import { useAccount, useSendTransaction } from 'wagmi';
+import type { ShowCreateListingModalArgs } from '.';
+import type { Messages } from '../../../../types/messages';
+import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import {
+	getCreateListingTransactionMessage,
+	getCreateListingTransactionTitle,
+} from './_utils/getCreateListingTransactionTitleMessage';
+import { useCollectible } from '@react-hooks/useCollectible';
+import type { CollectionType } from '@internal';
+
+export interface CreateListingModalState {
+	isOpen: boolean;
+	open: (args: ShowCreateListingModalArgs) => void;
+	close: () => void;
+	state: {
+		collectionName: string;
+		collectionType: CollectionType | undefined;
+		listingPrice: Price;
+		quantity: string;
+		collectionAddress: string;
+		chainId: string;
+		collectibleId: string;
+		expiry: Date;
+		messages?: Messages;
+	};
+	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,
+		messages,
+	}: ShowCreateListingModalArgs) => {
+		createListingModal$.state.set({
+			...createListingModal$.state.get(),
+			collectionAddress,
+			chainId,
+			collectibleId,
+			messages,
+		});
+		createListingModal$.isOpen.set(true);
+	},
+	close: () => {
+		createListingModal$.isOpen.set(false);
+	},
+	state: {
+		collectionName: '',
+		listingPrice: {
+			amountRaw: '0',
+			currency: {} as Currency,
+		},
+		quantity: '1',
+		expiry: new Date(addDays(new Date(), 7).toJSON()),
+		collectionType: undefined,
+		collectionAddress: '',
+		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 {
+		onUnknownError,
+		onSuccess,
+	}: { onUnknownError?: Function; onSuccess?: Function } =
+		createListingModal$.state.get().messages?.approveToken || {};
+
+	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: () => {
+			const step = createListingModal$.steps.tokenApproval.getStep();
+			if (!step) return;
+			createListingModal$.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 &&
+		createListingModal$.steps._currentStep.get() === 'tokenApproval'
+	) {
+		createListingModal$.steps._currentStep.set(null);
+	}
+};
+
+const useCreateListingHandler = (chainId: string) => {
+	const { collectibleId, collectionAddress } = createListingModal$.state.get();
+	const { connector, address } = useAccount();
+	const {
+		generateListingTransactionAsync,
+		isPending: generateListingTransactionPending,
+		error: generateListingTransactionError,
+	} = useGenerateListingTransaction({ chainId });
+	const { data: collectible } = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+	const {
+		onUnknownError,
+		onSuccess,
+	}: { onUnknownError?: Function; onSuccess?: Function } =
+		createListingModal$.state.get().messages?.sellCollectible || {};
+
+	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);
+
+					showTransactionStatusModal({
+						hash: hash!,
+						price: createListingModal$.state.listingPrice.get(),
+						collectionAddress,
+						chainId,
+						tokenId: collectibleId,
+						getTitle: getCreateListingTransactionTitle,
+						getMessage: (params) =>
+							getCreateListingTransactionMessage(
+								params,
+								collectible?.name || '',
+							),
+						type: 'transfer',
+					});
+
+					createListingModal$.close();
+
+					onSuccess && onSuccess();
+				})
+				.catch((error) => {
+					onUnknownError && onUnknownError(error);
+				});
+		},
+	});
+
+	if (generateListingTransactionError) {
+		onUnknownError && onUnknownError(generateListingTransactionError);
+	}
+};
+
+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,
+		});
+	});
+};

package/src/react/ui/modals/CreateListingModal/_utils/getCreateListingTransactionTitleMessage.ts

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

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

@@ -0,0 +1,146 @@
+import { Box } from '@0xsequence/design-system';
+import { ContractType } from '@internal';
+import { Show, observer } from '@legendapp/state/react';
+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 TransactionDetails from '../_internal/components/transactionDetails';
+import { createListingModal$, useHydrate } from './_store';
+import { useAccount } from 'wagmi';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import type { Messages } from '../../../../types/messages';
+
+export type ShowCreateListingModalArgs = {
+	collectionAddress: string;
+	chainId: string;
+	collectibleId: string;
+	messages?: Messages;
+};
+
+export const useCreateListingModal = () => {
+	const { chainId: accountChainId } = useAccount();
+	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+
+	const openModal = (args: ShowCreateListingModalArgs) => {
+		createListingModal$.open(args);
+	};
+
+	const handleShowModal = (args: ShowCreateListingModalArgs) => {
+		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: () => createListingModal$.close(),
+	};
+};
+
+export const CreateListingModal = () => {
+	return (
+		<Show if={createListingModal$.isOpen}>
+			<Modal />
+		</Show>
+	);
+};
+
+const Modal = () => {
+	useHydrate();
+	return <ModalContent />;
+};
+
+const ModalContent = observer(() => {
+	const {
+		chainId,
+		collectionAddress,
+		collectibleId,
+		collectionName,
+		collectionType,
+		listingPrice,
+	} = createListingModal$.state.get();
+
+	const { steps } = createListingModal$.get();
+
+	const ctas = [
+		{
+			label: 'Approve TOKEN',
+			onClick: steps.tokenApproval.execute,
+			hidden: !steps.tokenApproval.isNeeded(),
+			pending: steps.tokenApproval.pending,
+			variant: 'glass' as const,
+		},
+		{
+			label: 'List item for sale',
+			onClick: steps.createListing.execute,
+			pending: steps.createListing.pending,
+			disabled:
+				steps.tokenApproval.isNeeded() || listingPrice.amountRaw === '0',
+		},
+	] satisfies ActionModalProps['ctas'];
+
+	return (
+		<ActionModal
+			store={createListingModal$}
+			onClose={() => createListingModal$.close()}
+			title="List item for sale"
+			ctas={ctas}
+		>
+			<TokenPreview
+				collectionName={collectionName}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
+				chainId={chainId}
+			/>
+
+			<Box display="flex" flexDirection="column" width="full" gap="1">
+				<PriceInput
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					$listingPrice={createListingModal$.state.listingPrice}
+				/>
+				{!!listingPrice && (
+					<FloorPriceText
+						tokenId={collectibleId}
+						chainId={chainId}
+						collectionAddress={collectionAddress}
+						price={listingPrice}
+					/>
+				)}
+			</Box>
+
+			{collectionType === ContractType.ERC1155 && (
+				<QuantityInput
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					collectibleId={collectibleId}
+					$quantity={createListingModal$.state.quantity}
+				/>
+			)}
+
+			<ExpirationDateSelect $date={createListingModal$.state.expiry} />
+
+			<TransactionDetails
+				collectibleId={collectibleId}
+				collectionAddress={collectionAddress}
+				chainId={chainId}
+				price={createListingModal$.state.listingPrice.get()}
+			/>
+		</ActionModal>
+	);
+});