@0xsequence/marketplace-sdk 0.0.1

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

@@ -0,0 +1,274 @@
+import { observable, when } from '@legendapp/state';
+import {
+	MarketplaceKind,
+	StepType,
+	type Order,
+	type Step,
+	type WalletKind,
+} from '@types';
+import { useMount, useSelector } from '@legendapp/state/react';
+import { useGenerateSellTransaction } from '@react-hooks/useGenerateSellTransaction';
+import { useAccount, useSendTransaction } from 'wagmi';
+import type { Hex } from 'viem';
+import type { ShowSellModalArgs } from '.';
+import type { Messages } from '../../../../types/messages';
+import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import {
+	getSellTransactionMessage,
+	getSellTransactionTitle,
+} from './_utils/getSellTransactionTitleMessage';
+import { useCollectible } from '@react-hooks/useCollectible';
+import { useCurrencies } from '@react-hooks/useCurrencies';
+
+export interface SellModalState {
+	isOpen: boolean;
+	open: (args: ShowSellModalArgs) => void;
+	close: () => void;
+	state: {
+		collectionAddress: string;
+		chainId: string;
+		tokenId: string;
+		order: Order | undefined;
+		messages?: Messages;
+	};
+	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 = {
+	isOpen: false,
+	open: ({
+		collectionAddress,
+		chainId,
+		tokenId,
+		order,
+		messages,
+	}: ShowSellModalArgs) => {
+		sellModal$.state.set({
+			...sellModal$.state.get(),
+			collectionAddress,
+			chainId,
+			tokenId,
+			order,
+			messages,
+		});
+		sellModal$.isOpen.set(true);
+	},
+	close: () => {
+		sellModal$.isOpen.set(false);
+		sellModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		collectionAddress: '',
+		chainId: '',
+		tokenId: '',
+		order: 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.steps);
+		};
+
+		when(() => !!order && !!connector, setSteps);
+	});
+};
+
+const useTokenApprovalHandler = (chainId: string) => {
+	const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
+	const {
+		onUnknownError,
+		onSuccess,
+	}: { onUnknownError?: Function; onSuccess?: Function } =
+		sellModal$.state.get().messages?.approveToken || {};
+
+	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'),
+				});
+				onSuccess && onSuccess();
+			} catch (error) {
+				onUnknownError && onUnknownError(error);
+			}
+		},
+	});
+
+	if (isSuccess && sellModal$.steps._currentStep.get() === 'tokenApproval') {
+		sellModal$.steps._currentStep.set(null);
+	}
+};
+
+const useSellHandler = (chainId: string) => {
+	const { address } = useAccount();
+	const { tokenId, collectionAddress } = sellModal$.state.get();
+	const {
+		generateSellTransactionAsync,
+		isPending: generateSellTransactionPending,
+		error: generateSellTransactionError,
+	} = useGenerateSellTransaction({
+		chainId,
+	});
+	const { data: collectible } = useCollectible({
+		chainId,
+		collectibleId: tokenId,
+		collectionAddress,
+	});
+	const { data: currencies } = useCurrencies({ chainId });
+	const {
+		onUnknownError,
+		onSuccess,
+	}: { onUnknownError?: Function; onSuccess?: Function } =
+		sellModal$.state.get().messages?.sellCollectible || {};
+
+	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: [
+						{
+							amount: String(order!.feeBps),
+							receiver: order!.feeBreakdown[0].recipientAddress,
+						},
+					],
+				})
+					.then(async (response) => {
+						const step = response.steps.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);
+
+							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,
+							});
+
+							sellModal$.close();
+
+							onSuccess && onSuccess();
+						} catch (error) {}
+					})
+					.catch((error) => {
+						onUnknownError && onUnknownError(error);
+					});
+			},
+		});
+	}
+
+	when(currencies && collectible, setSellStep);
+
+	if (generateSellTransactionError) {
+		onUnknownError && onUnknownError(generateSellTransactionError);
+	}
+};

package/src/react/ui/modals/SellModal/_utils/getSellTransactionTitleMessage.ts

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

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

@@ -0,0 +1,126 @@
+import {
+	ActionModal,
+	type ActionModalProps,
+} from '../_internal/components/actionModal/ActionModal';
+import { sellModal$, useHydrate } from './_store';
+import { observer, Show } from '@legendapp/state/react';
+import { useCollection } from '@react-hooks/useCollection';
+import type { Order, Price } from '@types';
+import TransactionHeader from '../_internal/components/transactionHeader';
+import TokenPreview from '../_internal/components/tokenPreview';
+import TransactionDetails from '../_internal/components/transactionDetails';
+import { useCurrencies } from '@react-hooks/useCurrencies';
+import { useAccount } from 'wagmi';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import type { Messages } from '../../../../types/messages';
+
+export type ShowSellModalArgs = {
+	chainId: string;
+	collectionAddress: string;
+	tokenId: string;
+	order: Order;
+	collectibleName: string | undefined;
+	messages?: Messages;
+};
+
+export const useSellModal = () => {
+	const { chainId: accountChainId } = useAccount();
+	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+
+	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),
+				messages: args.messages?.switchChain,
+			});
+			return;
+		}
+
+		openModal(args);
+	};
+
+	return {
+		show: handleShowModal,
+		close: () => sellModal$.close(),
+	};
+};
+
+export const SellModal = () => {
+	return (
+		<Show if={sellModal$.isOpen}>
+			<Modal />
+		</Show>
+	);
+};
+
+const Modal = () => {
+	useHydrate();
+	return <ModalContent />;
+};
+
+const ModalContent = observer(() => {
+	const modalState = sellModal$.state.get();
+	const { collectionAddress, chainId, tokenId, order } = modalState;
+
+	const { steps } = sellModal$.get();
+
+	const { data: collection } = useCollection({ chainId, collectionAddress });
+	const { data: currencies } = useCurrencies({ chainId, collectionAddress });
+	const currency = currencies?.find(
+		(currency) => currency.contractAddress === order?.priceCurrencyAddress,
+	);
+
+	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'];
+
+	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>
+	);
+});

package/src/react/ui/modals/SellModal/utils.ts

@@ -0,0 +1,38 @@
+import type { ConfirmationStatus } from '../_internal/components/transactionStatusModal/store';
+
+export const getSellModalTitle = ({
+	isConfirming,
+	isConfirmed,
+	isFailed,
+}: ConfirmationStatus): string => {
+	if (isConfirming) {
+		return 'Your sale is processing';
+	}
+	if (isConfirmed) {
+		return 'Your sale has processed';
+	}
+	if (isFailed) {
+		return 'Your sale has failed';
+	}
+
+	return 'Unknown status'; // Default return
+};
+
+export const getSellModalMessage = ({
+	isConfirming,
+	isConfirmed,
+	isFailed,
+	collectibleName,
+}: ConfirmationStatus & { collectibleName?: string }) => {
+	if (isConfirming) {
+		return `You just sold ${collectibleName}. It should be confirmed on the blockchain shortly.`;
+	}
+	if (isConfirmed) {
+		return `You just sold ${collectibleName}. It’s been confirmed on the blockchain!`;
+	}
+	if (isFailed) {
+		return `${collectibleName} could not be sold. Please try again.`;
+	}
+
+	return 'Unknown status'; // Default return
+};

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

@@ -0,0 +1,58 @@
+import type { ComponentType } from 'react';
+
+import type { IconProps } from '@0xsequence/design-system';
+import type { TokenMetadata } from '@internal';
+import { observable } from '@legendapp/state';
+
+export interface SuccessfulPurchaseModalState {
+	isOpen: boolean;
+	open: (args: SuccessfulPurchaseModalState['state']) => void;
+	close: () => void;
+	state: {
+		collectibles: TokenMetadata[];
+		totalPrice: string;
+		explorerName: string;
+		explorerUrl: string;
+		ctaOptions?: {
+			ctaLabel: string;
+			ctaOnClick: () => void;
+			ctaIcon?: ComponentType<IconProps>;
+		};
+	};
+}
+
+const initialState: SuccessfulPurchaseModalState = {
+	isOpen: false,
+	open: ({
+		collectibles,
+		totalPrice,
+		explorerName,
+		explorerUrl,
+		ctaOptions,
+	}: SuccessfulPurchaseModalState['state']) => {
+		successfulPurchaseModal$.state.set({
+			...successfulPurchaseModal$.state.get(),
+			collectibles,
+			totalPrice,
+			explorerName,
+			explorerUrl: explorerUrl,
+			ctaOptions,
+		});
+		successfulPurchaseModal$.isOpen.set(true);
+	},
+	close: () => {
+		successfulPurchaseModal$.isOpen.set(false);
+		successfulPurchaseModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		collectibles: [],
+		totalPrice: '0',
+		explorerName: '',
+		explorerUrl: '',
+		ctaOptions: undefined,
+	},
+};
+
+export const successfulPurchaseModal$ = observable(initialState);

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

@@ -0,0 +1,186 @@
+'use client';
+
+import {
+	successfulPurchaseModal$,
+	type SuccessfulPurchaseModalState,
+} from './_store';
+import {
+	closeButton,
+	collectiblesGrid,
+	collectiblesGridItem,
+	collectiblesGridImage,
+	collectiblesGridImagePale,
+	dialogContent,
+	dialogOverlay,
+} from './styles.css';
+import {
+	Box,
+	Button,
+	CloseIcon,
+	ExternalLinkIcon,
+	IconButton,
+	Image,
+	Text,
+} from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import type { TokenMetadata } from '@types';
+
+export const useSuccessfulPurchaseModal = () => {
+	return {
+		show: (args: SuccessfulPurchaseModalState['state']) =>
+			successfulPurchaseModal$.open(args),
+		close: () => successfulPurchaseModal$.close(),
+	};
+};
+
+const SuccessfulPurchaseModal = observer(() => {
+	return (
+		<Root open={successfulPurchaseModal$.isOpen.get()}>
+			<Portal>
+				<Overlay className={dialogOverlay} />
+
+				<Content className={dialogContent.narrow}>
+					<Box display="flex" flexDirection="column" gap="4" width="full">
+						<Text
+							textAlign="center"
+							fontSize="medium"
+							fontWeight="bold"
+							color="text100"
+						>
+							Successful purchase!
+						</Text>
+
+						<CollectiblesGrid
+							collectibles={successfulPurchaseModal$.state.get().collectibles}
+						/>
+
+						<Box display="flex" alignItems="center" gap="1">
+							<Text fontSize="normal" fontWeight="medium" color="text80">
+								You bought
+							</Text>
+
+							<Text fontSize="normal" fontWeight="medium" color="text100">
+								{successfulPurchaseModal$.state.get().collectibles.length}
+							</Text>
+
+							<Text fontSize="normal" fontWeight="medium" color="text80">
+								items for
+							</Text>
+
+							<Text fontSize="normal" fontWeight="medium" color="text100">
+								{successfulPurchaseModal$.state.get().totalPrice}
+							</Text>
+						</Box>
+
+						<SuccessfulPurchaseActions />
+					</Box>
+
+					<Close
+						onClick={() => {
+							successfulPurchaseModal$.close();
+						}}
+						className={closeButton}
+						asChild
+					>
+						<IconButton size="xs" aria-label="Close modal" icon={CloseIcon} />
+					</Close>
+				</Content>
+			</Portal>
+		</Root>
+	);
+});
+
+function SuccessfulPurchaseActions() {
+	return (
+		<Box display="flex" flexDirection="column" gap="2">
+			{successfulPurchaseModal$.state.ctaOptions.get() && (
+				<Button
+					shape="square"
+					leftIcon={
+						successfulPurchaseModal$.state.ctaOptions.ctaIcon.get() || undefined
+					}
+					label={successfulPurchaseModal$.state.ctaOptions.ctaLabel.get()}
+					width="full"
+					onClick={
+						successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() ||
+						undefined
+					}
+				/>
+			)}
+
+			<Button
+				as={'a'}
+				href={successfulPurchaseModal$.state.explorerUrl.get()}
+				target="_blank"
+				rel="noopener noreferrer"
+				shape="square"
+				leftIcon={ExternalLinkIcon}
+				label={`View on ${successfulPurchaseModal$.state.explorerName.get()}`}
+				width="full"
+			/>
+		</Box>
+	);
+}
+
+function CollectiblesGrid({ collectibles }: { collectibles: TokenMetadata[] }) {
+	const total = collectibles.length;
+	const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
+
+	return (
+		<Box className={collectiblesGrid} display={'grid'} gap={'2'}>
+			{shownCollectibles.map((collectible) => {
+				const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
+
+				return (
+					<Box
+						key={collectible.tokenId}
+						className={collectiblesGridItem}
+						position="relative"
+					>
+						<Image
+							src={collectible.image}
+							alt={collectible.name}
+							className={
+								showPlus ? collectiblesGridImagePale : collectiblesGridImage
+							}
+							aspectRatio="1/1"
+							background="backgroundSecondary"
+							borderRadius="sm"
+						/>
+
+						{showPlus && (
+							<Box
+								position="absolute"
+								top="0"
+								left="0"
+								right="0"
+								bottom="0"
+								display="flex"
+								alignItems="center"
+								justifyContent="center"
+								background="backgroundOverlay"
+								backdropFilter="blur"
+							>
+								<Text
+									fontSize="small"
+									fontWeight="medium"
+									color="text80"
+									paddingX="2"
+									paddingY="1.5"
+									borderRadius="sm"
+									background="backgroundSecondary"
+									backdropFilter="blur"
+								>
+									{total} TOTAL
+								</Text>
+							</Box>
+						)}
+					</Box>
+				);
+			})}
+		</Box>
+	);
+}
+
+export default SuccessfulPurchaseModal;