@0xsequence/marketplace-sdk 0.1.0 → 0.3.0

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -0,0 +1,194 @@
+import { useState } from 'react';
+
+import { Box, IconButton, Skeleton } from '@0xsequence/design-system';
+import type { Hex } from 'viem';
+import { useCollectible, useCollection } from '../../../hooks';
+import { ActionButton } from '../_internals/action-button/ActionButton';
+import SvgDiamondEyeIcon from '../../icons/DiamondEye';
+import { Footer } from './Footer';
+import {
+	collectibleCard,
+	collectibleTileWrapper,
+	collectibleImage,
+	actionWrapper,
+} from './styles.css';
+import ChessTileImage from '../../images/chess-tile.png';
+import type { ChainId, ContractType } from '../../../_internal';
+import { useAccount } from 'wagmi';
+
+function CollectibleSkeleton() {
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			gap="3"
+			alignItems="center"
+			overflow="hidden"
+		>
+			<Skeleton
+				size="lg"
+				style={{ width: '100%', height: 164, borderRadius: 0, paddingTop: 16 }}
+			/>
+
+			<Box
+				display="flex"
+				flexDirection="column"
+				gap="2"
+				paddingX="4"
+				paddingBottom="4"
+			>
+				<Skeleton size="lg" />
+
+				<Skeleton size="sm" />
+			</Box>
+		</Box>
+	);
+}
+
+type CollectibleCardProps = {
+	tokenId: string;
+	chainId: ChainId;
+	collectionAddress: Hex;
+	onCollectibleClick?: () => void;
+	onOfferClick?: () => void;
+};
+
+export function CollectibleCard({
+	tokenId,
+	chainId,
+	collectionAddress,
+	onCollectibleClick,
+	onOfferClick,
+}: CollectibleCardProps) {
+	const { data: collectible, isLoading: collectibleLoading } = useCollectible({
+		chainId: String(chainId),
+		collectionAddress,
+		collectibleId: tokenId,
+	});
+	const { data: collection } = useCollection({
+		chainId: String(chainId),
+		collectionAddress,
+	});
+
+	if (collectibleLoading || !collectible || !collection) {
+		return <CollectibleSkeleton />;
+	}
+
+	return (
+		<Box
+			className={collectibleCard}
+			borderRadius="md"
+			overflow="hidden"
+			background="backgroundPrimary"
+		>
+			<CardWrapper
+				name={collectible.name}
+				type={collection.type as ContractType}
+				imageSrc={collectible.image}
+				tokenId={tokenId}
+				chainId={String(chainId)}
+				collectionAddress={collectionAddress}
+				marketplaceSource={collectible.external_url}
+				onCollectibleClick={onCollectibleClick}
+				onOfferClick={onOfferClick}
+			/>
+		</Box>
+	);
+}
+
+type CardWrapperProps = {
+	name: string;
+	type: ContractType;
+	imageSrc?: string;
+	tokenId: string;
+	chainId: string;
+	collectionAddress: Hex;
+	balance?: string;
+	marketplaceSource?: string;
+	onCollectibleClick?: () => void;
+	onOfferClick?: () => void;
+};
+
+const CardWrapper = ({
+	name,
+	type,
+	imageSrc,
+	tokenId,
+	chainId,
+	collectionAddress,
+	marketplaceSource,
+	onCollectibleClick,
+	onOfferClick,
+}: CardWrapperProps) => {
+	const { address: accountAddress } = useAccount();
+	const [loadingError, setLoadingError] = useState(false);
+
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			alignItems="flex-start"
+			position="relative"
+			width="full"
+			height="full"
+			zIndex="10"
+			overflow="hidden"
+			onClick={onCollectibleClick}
+			as="button"
+			border="none"
+			padding="0"
+			className={collectibleTileWrapper}
+		>
+			<article style={{ width: '100%' }}>
+				{marketplaceSource && (
+					<IconButton
+						as="a"
+						href={marketplaceSource}
+						size="sm"
+						backdropFilter="blur"
+						variant="glass"
+						onClick={(e) => {
+							e.stopPropagation();
+						}}
+						position="absolute"
+						top="2"
+						left="2"
+						icon={SvgDiamondEyeIcon}
+					/>
+				)}
+
+				<img
+					src={loadingError ? ChessTileImage : imageSrc || ChessTileImage}
+					alt={name}
+					className={collectibleImage}
+					onError={() => setLoadingError(true)}
+				/>
+
+				<Footer
+					name={name}
+					type={type}
+					tokenId={tokenId}
+					chainId={chainId}
+					collectionAddress={collectionAddress}
+					onOfferClick={onOfferClick}
+				/>
+
+				{accountAddress && (
+					<Box
+						display="flex"
+						alignItems="center"
+						justifyContent="center"
+						padding="2"
+						className={actionWrapper}
+					>
+						<ActionButton
+							chainId={String(chainId)}
+							collectionAddress={collectionAddress}
+							tokenId={tokenId}
+						/>
+					</Box>
+				)}
+			</article>
+		</Box>
+	);
+};

package/src/react/ui/components/collectible-card/Footer.tsx

@@ -0,0 +1,121 @@
+import { Box, IconButton, Image, Text } from '@0xsequence/design-system';
+import {
+	useBalanceOfCollectible,
+	useCurrencies,
+	useHighestOffer,
+	useLowestListing,
+} from '../../../hooks';
+import { useAccount } from 'wagmi';
+import { formatUnits, type Hex } from 'viem';
+import { ContractType } from '../../../_internal';
+import Pill from '../_internals/pill/Pill';
+import SvgBellIcon from '../../icons/Bell';
+import { footer, offerBellButton } from './styles.css';
+
+type FooterProps = {
+	name: string;
+	type: ContractType;
+	chainId: string;
+	tokenId: string;
+	collectionAddress: Hex;
+	onOfferClick?: () => void;
+};
+
+export const Footer = ({
+	name,
+	type,
+	chainId,
+	tokenId,
+	collectionAddress,
+	onOfferClick,
+}: FooterProps) => {
+	const { address: accountAddress } = useAccount();
+	const { data: balance } = useBalanceOfCollectible({
+		chainId: String(chainId),
+		collectionAddress: collectionAddress,
+		collectableId: tokenId,
+		userAddress: accountAddress!,
+	});
+	const { data: lowestListing } = useLowestListing({
+		chainId: String(chainId),
+		collectionAddress: collectionAddress,
+		tokenId: tokenId,
+	});
+	const { data: highestOffer } = useHighestOffer({
+		chainId: String(chainId),
+		collectionAddress: collectionAddress,
+		tokenId: tokenId,
+	});
+	const { data: currencies } = useCurrencies({
+		chainId: String(chainId),
+		collectionAddress,
+		query: {
+			enabled: !!lowestListing?.order,
+		},
+	});
+	const currency = currencies?.find(
+		(currency) =>
+			currency.contractAddress === lowestListing?.order?.priceCurrencyAddress,
+	);
+
+	if (name.length > 15 && highestOffer?.order) {
+		name = name.substring(0, 13) + '...';
+	}
+	if (name.length > 17 && !highestOffer?.order) {
+		name = name.substring(0, 17) + '...';
+	}
+
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			gap="2"
+			padding="4"
+			whiteSpace="nowrap"
+			position="relative"
+			className={accountAddress ? footer.animated : footer.static}
+		>
+			<Box
+				display="flex"
+				alignItems="center"
+				justifyContent="space-between"
+				position="relative"
+			>
+				<Text color='text100' fontSize="normal" fontWeight="bold" textAlign="left">
+					{name}
+				</Text>
+
+				{highestOffer?.order && onOfferClick && (
+					<IconButton
+						variant="primary"
+						className={offerBellButton}
+						onClick={(e) => {
+							e.stopPropagation();
+							onOfferClick?.();
+						}}
+						icon={SvgBellIcon}
+					/>
+				)}
+			</Box>
+
+			{lowestListing?.order && currency && (
+				<Box display="flex" alignItems="center" gap="1">
+					<Image src={currency?.imageUrl} width="3" height="3" />
+
+					<Text color='text100' fontSize="small" fontWeight="bold" textAlign="left">
+						{formatUnits(
+							BigInt(lowestListing.order.priceAmount),
+							currency.decimals,
+						)}{' '}
+					</Text>
+				</Box>
+			)}
+
+			{balance && type !== ContractType.ERC721 && (
+				<Pill text={`Owned: ${balance}`} />
+			)}
+
+			{type === ContractType.ERC721 && <Pill text="ERC-721" />}
+		</Box>
+	);
+};

package/src/react/ui/components/collectible-card/styles.css.ts

@@ -0,0 +1,62 @@
+import { atoms } from '@0xsequence/design-system';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const collectibleCard = style([
+	{
+		width: '175px',
+		border: '1px solid hsla(0, 0%, 31%, 1)',
+	},
+]);
+
+export const collectibleImage = style({
+	width: '175px',
+	height: '175px',
+	objectFit: 'cover',
+});
+
+export const collectibleTileWrapper = style({
+	padding: 0,
+	border: 'none',
+	borderRadius: 0,
+	background: 'none',
+	position: 'relative',
+	selectors: {
+		[`&:focus`]: {
+			outline: 'none',
+		},
+	},
+});
+
+export const offerBellButton = style({
+	width: '22px',
+	height: '22px',
+});
+
+const footerBase = style([atoms({ background: 'backgroundPrimary' })]);
+
+export const footer = styleVariants({
+	animated: [
+		footerBase,
+		{
+			transition: 'transform 0.2s ease-in-out',
+			selectors: {
+				[`${collectibleTileWrapper}:hover &`]: {
+					transform: 'translateY(-30px)',
+				},
+			},
+		},
+	],
+	static: [footerBase],
+});
+
+export const actionWrapper = style({
+	transition: 'transform 0.2s ease-in-out',
+	position: 'absolute',
+	width: '100%',
+	bottom: -36,
+	selectors: {
+		[`${collectibleTileWrapper}:hover &`]: {
+			transform: 'translateY(-36px)',
+		},
+	},
+});

package/src/react/ui/components/index.ts

@@ -0,0 +1 @@
+export * from './collectible-card/CollectibleCard';

package/src/react/ui/icons/Bell.tsx

@@ -0,0 +1,31 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="17"
+		height="17"
+		viewBox="0 0 17 17"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgBellIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgBellIcon;

package/src/react/ui/icons/DiamondEye.tsx

@@ -0,0 +1,31 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="16"
+		height="12"
+		viewBox="0 0 16 12"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.00447 0.108826L0.611084 4.50526L7.99997 11.8911L15.3889 4.50526L10.9955 0.108826H5.00447ZM4.60507 2.90461C6.4718 1.0297 9.52815 1.02968 11.3949 2.90459L12.9925 4.50223L11.3949 6.09983C9.52815 7.97473 6.4718 7.97473 4.60507 6.09985L3.00749 4.50223L4.60507 2.90461ZM5.70321 4.50209C5.70321 5.77095 6.73193 6.79865 7.99974 6.79865C9.2676 6.79865 10.2963 5.77095 10.2963 4.50209C10.2963 3.23322 9.2676 2.20553 7.99974 2.20553C6.73193 2.20553 5.70321 3.23322 5.70321 4.50209ZM7.99974 5.50058C7.44853 5.50058 7.00125 5.05377 7.00125 4.50209C7.00125 3.9504 7.44853 3.50359 7.99974 3.50359C8.55095 3.50359 8.99825 3.9504 8.99825 4.50209C8.99825 5.05377 8.55095 5.50058 7.99974 5.50058Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgDiamondEyeIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgDiamondEyeIcon;

package/src/react/ui/index.ts

@@ -4,3 +4,6 @@ export { useMakeOfferModal } from './modals/MakeOfferModal';
 export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
 export { useTransferModal } from './modals/TransferModal';
 export { useSellModal } from './modals/SellModal';
+
+// components
+export { CollectibleCard } from './components/collectible-card/CollectibleCard';

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

@@ -1,22 +1,29 @@
-import type { CollectionType } from '@internal';
 import { observable, when } from '@legendapp/state';
 import { useMount, useSelector } from '@legendapp/state/react';
-import { useCollectible } from '@react-hooks/useCollectible';
-import { useCollection } from '@react-hooks/useCollection';
-import { useGenerateListingTransaction } from '@react-hooks/useGenerateListingTransaction';
+import type { QueryKey } from '@tanstack/react-query';
+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 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';
+	collectableKeys,
+} from '../../../_internal';
+import {
+	useCollectible,
+	useCollection,
+	useGenerateListingTransaction,
+} from '../../../hooks';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import {
 	getCreateListingTransactionMessage,
@@ -36,7 +43,8 @@ export interface CreateListingModalState {
 		chainId: string;
 		collectibleId: string;
 		expiry: Date;
-		messages?: Messages;
+		errorCallbacks?: CreateListingErrorCallbacks;
+		successCallbacks?: CreateListingSuccessCallbacks;
 	};
 	steps: {
 		isLoading: () => boolean;
@@ -62,14 +70,12 @@ export const initialState: CreateListingModalState = {
 		collectionAddress,
 		chainId,
 		collectibleId,
-		messages,
 	}: ShowCreateListingModalArgs) => {
 		createListingModal$.state.set({
 			...createListingModal$.state.get(),
 			collectionAddress,
 			chainId,
 			collectibleId,
-			messages,
 		});
 		createListingModal$.isOpen.set(true);
 	},
@@ -165,11 +171,10 @@ export const useHydrate = () => {
 
 const useTokenApprovalHandler = (chainId: string) => {
 	const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
-	const {
-		onUnknownError,
-		onSuccess,
-	}: { onUnknownError?: Function; onSuccess?: Function } =
-		createListingModal$.state.get().messages?.approveToken || {};
+	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(),
@@ -180,13 +185,13 @@ const useTokenApprovalHandler = (chainId: string) => {
 		pending:
 			createListingModal$.steps._currentStep.get() === 'tokenApproval' &&
 			isPending,
-		execute: () => {
+		execute: async () => {
 			const step = createListingModal$.steps.tokenApproval.getStep();
 			if (!step) return;
 			createListingModal$.steps._currentStep.set('tokenApproval');
 
 			try {
-				sendTransactionAsync({
+				await sendTransactionAsync({
 					to: step.to as Hex,
 					chainId: Number(chainId),
 					data: step.data as Hex,
@@ -195,7 +200,7 @@ const useTokenApprovalHandler = (chainId: string) => {
 
 				onSuccess && onSuccess();
 			} catch (error) {
-				onUnknownError && onUnknownError(error);
+				onError && onError(error);
 			}
 		},
 	});
@@ -209,23 +214,18 @@ const useTokenApprovalHandler = (chainId: string) => {
 };
 
 const useCreateListingHandler = (chainId: string) => {
-	const { collectibleId, collectionAddress } = createListingModal$.state.get();
+	const { collectibleId, collectionAddress, errorCallbacks, successCallbacks } =
+		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?.createListing || {};
 
 	const { sendTransactionAsync, isPending: sendTransactionPending } =
 		useSendTransaction();
@@ -268,6 +268,8 @@ const useCreateListingHandler = (chainId: string) => {
 
 					createListingModal$.steps._currentStep.set(null);
 
+					createListingModal$.close();
+
 					showTransactionStatusModal({
 						hash: hash!,
 						price: createListingModal$.state.listingPrice.get(),
@@ -281,21 +283,18 @@ const useCreateListingHandler = (chainId: string) => {
 								collectible?.name || '',
 							),
 						type: 'transfer',
+						callbacks: {
+							onSuccess: successCallbacks?.onCreateListingSuccess,
+							onUnknownError: errorCallbacks?.onCreateListingError,
+						},
+						queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
 					});
-
-					createListingModal$.close();
-
-					onSuccess && onSuccess();
 				})
 				.catch((error) => {
-					onUnknownError && onUnknownError(error);
+					errorCallbacks?.onCreateListingError?.(error);
 				});
 		},
 	});
-
-	if (generateListingTransactionError) {
-		onUnknownError && onUnknownError(generateListingTransactionError);
-	}
 };
 
 const useShowTransactionStatusModal = () => {

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

@@ -1,9 +1,7 @@
 import { Box } from '@0xsequence/design-system';
-import { ContractType } from '@internal';
 import { Show, observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
 import { useAccount } from 'wagmi';
-import type { Messages } from '../../../../types/messages';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -16,17 +14,22 @@ import { useSwitchChainModal } from '../_internal/components/switchChainModal';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import { createListingModal$, useHydrate } from './_store';
+import type {
+	CreateListingErrorCallbacks,
+	CreateListingSuccessCallbacks,
+} from '../../../../types/callbacks';
+import { ContractType } from '../../../_internal';
 
 export type ShowCreateListingModalArgs = {
 	collectionAddress: Hex;
 	chainId: string;
 	collectibleId: string;
-	messages?: Messages;
 };
 
 export const useCreateListingModal = () => {
 	const { chainId: accountChainId } = useAccount();
 	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+	const { errorCallbacks, successCallbacks } = createListingModal$.state.get();
 
 	const openModal = (args: ShowCreateListingModalArgs) => {
 		createListingModal$.open(args);
@@ -39,7 +42,13 @@ export const useCreateListingModal = () => {
 			showSwitchNetworkModal({
 				chainIdToSwitchTo: Number(args.chainId),
 				onSwitchChain: () => openModal(args),
-				messages: args.messages?.switchChain,
+				callbacks: {
+					onSuccess: successCallbacks?.onSwitchChainSuccess,
+					onUnknownError: errorCallbacks?.onSwitchChainError,
+					onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
+					onUserRejectedRequest:
+						errorCallbacks?.onUserRejectedSwitchingChainRequestError,
+				},
 			});
 			return;
 		}
@@ -50,6 +59,18 @@ export const useCreateListingModal = () => {
 	return {
 		show: handleShowModal,
 		close: () => createListingModal$.close(),
+		onError: (callbacks: CreateListingErrorCallbacks) => {
+			createListingModal$.state.set({
+				...createListingModal$.state.get(),
+				errorCallbacks: callbacks,
+			});
+		},
+		onSuccess: (callbacks: CreateListingSuccessCallbacks) => {
+			createListingModal$.state.set({
+				...createListingModal$.state.get(),
+				successCallbacks: callbacks,
+			});
+		},
 	};
 };