@0xsequence/marketplace-sdk 0.3.11 → 0.4.1

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

@@ -11,12 +11,11 @@ import type {
 	OrderbookKind,
 } from '../../../_internal';
 import { useCurrencies, useHighestOffer } from '../../../hooks';
+import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
-import {
-	ActionButton,
-	CollectibleCardAction,
-} from '../_internals/action-button/ActionButton';
+import { ActionButton } from '../_internals/action-button/ActionButton';
+import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
 import {
 	actionWrapper,
@@ -24,7 +23,6 @@ import {
 	collectibleImage,
 	collectibleTileWrapper,
 } from './styles.css';
-import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 
 function CollectibleSkeleton() {
 	return (
@@ -101,7 +99,7 @@ export function CollectibleCard({
 	}
 
 	const action = (
-		!!balance
+		balance
 			? (highestOffer?.order && CollectibleCardAction.SELL) ||
 				(!lowestListing?.order && CollectibleCardAction.LIST) ||
 				CollectibleCardAction.TRANSFER
@@ -161,7 +159,7 @@ export function CollectibleCard({
 					/>
 
 					<Footer
-						name={name!}
+						name={name || ''}
 						type={collectionType}
 						onOfferClick={() => onOfferClick?.({ order: highestOffer?.order })}
 						highestOffer={highestOffer?.order}

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

@@ -30,10 +30,10 @@ export const Footer = ({
 	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
 
 	if (name.length > 15 && highestOffer) {
-		name = name.substring(0, 13) + '...';
+		name = `${name.substring(0, 13)}...`;
 	}
 	if (name.length > 17 && !highestOffer) {
-		name = name.substring(0, 17) + '...';
+		name = `${name.substring(0, 17)}...`;
 	}
 
 	return (
@@ -94,12 +94,10 @@ export const Footer = ({
 					fontFamily="body"
 				>
 					{listed &&
-						formatUnits(
+						`${formatUnits(
 							BigInt(lowestListingPriceAmount),
 							lowestListingCurrency.decimals,
-						) +
-							' ' +
-							lowestListingCurrency.symbol}
+						)} ${lowestListingCurrency.symbol}`}
 
 					{!listed && 'Not listed yet'}
 				</Text>
@@ -116,7 +114,7 @@ const TokenTypeBalancePill = ({
 }: { balance?: string; type: ContractType }) => {
 	const displayText =
 		type === ContractType.ERC1155
-			? !!balance
+			? balance
 				? `Owned: ${balance}`
 				: 'ERC-1155'
 			: 'ERC-721';

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

@@ -21,7 +21,7 @@ export const collectibleTileWrapper = style({
 	background: 'none',
 	position: 'relative',
 	selectors: {
-		[`&:focus`]: {
+		'&:focus': {
 			outline: 'none',
 		},
 	},

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 12 12"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Arrow up"
 	>
+		<title>Arrow up icon</title>
 		<path
 			d="M8.65039 6.03638L9.28679 5.39999L5.96859 2.08179L2.65039 5.39999L3.28679 6.03638L5.51859 3.80458V9.91822H6.41859V3.80458L8.65039 6.03638Z"
 			fill="#D1D1D1"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 17 17"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="bell-title"
 	>
+		<title id="bell-title">Notification Bell</title>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 20 20"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Calendar icon"
 	>
+		<title>Calendar icon</title>
 		<path
 			d="M4.57634 17.5C3.73146 17.5 3.08946 17.2816 2.65034 16.8449C2.21678 16.4081 2 15.7586 2 14.8965V5.10352C2 4.24135 2.21678 3.59189 2.65034 3.15513C3.08946 2.71838 3.73146 2.5 4.57634 2.5H15.4237C16.2741 2.5 16.9161 2.72121 17.3497 3.16364C17.7832 3.6004 18 4.24702 18 5.10352V14.8965C18 15.753 17.7832 16.3996 17.3497 16.8364C16.9161 17.2788 16.2741 17.5 15.4237 17.5H4.57634ZM4.55133 15.9515H15.4403C15.7738 15.9515 16.0295 15.8636 16.2074 15.6877C16.3908 15.5062 16.4825 15.2396 16.4825 14.888V7.44328C16.4825 7.08593 16.3908 6.81934 16.2074 6.64351C16.0295 6.46767 15.7738 6.37975 15.4403 6.37975H4.55133C4.21782 6.37975 3.96213 6.46767 3.78426 6.64351C3.61195 6.81934 3.52579 7.08593 3.52579 7.44328V14.888C3.52579 15.2396 3.61195 15.5062 3.78426 15.6877C3.96213 15.8636 4.21782 15.9515 4.55133 15.9515ZM8.48671 9.17896C8.34775 9.17896 8.25048 9.15343 8.19489 9.10238C8.13931 9.05133 8.11152 8.95207 8.11152 8.80459V8.33664C8.11152 8.19484 8.13931 8.09841 8.19489 8.04736C8.25048 7.99064 8.34775 7.96228 8.48671 7.96228H8.94528C9.0898 7.96228 9.18708 7.99064 9.2371 8.04736C9.29269 8.09841 9.32048 8.19484 9.32048 8.33664V8.80459C9.32048 8.95207 9.29269 9.05133 9.2371 9.10238C9.18708 9.15343 9.0898 9.17896 8.94528 9.17896H8.48671ZM11.0714 9.17896C10.9269 9.17896 10.8268 9.15343 10.7712 9.10238C10.7212 9.05133 10.6962 8.95207 10.6962 8.80459V8.33664C10.6962 8.19484 10.7212 8.09841 10.7712 8.04736C10.8268 7.99064 10.9269 7.96228 11.0714 7.96228H11.5383C11.6773 7.96228 11.7745 7.99064 11.8301 8.04736C11.8857 8.09841 11.9135 8.19484 11.9135 8.33664V8.80459C11.9135 8.95207 11.8857 9.05133 11.8301 9.10238C11.7745 9.15343 11.6773 9.17896 11.5383 9.17896H11.0714ZM13.6477 9.17896C13.5088 9.17896 13.4115 9.15343 13.3559 9.10238C13.3003 9.05133 13.2725 8.95207 13.2725 8.80459V8.33664C13.2725 8.19484 13.3003 8.09841 13.3559 8.04736C13.4115 7.99064 13.5088 7.96228 13.6477 7.96228H14.1146C14.2592 7.96228 14.3564 7.99064 14.4065 8.04736C14.462 8.09841 14.4898 8.19484 14.4898 8.33664V8.80459C14.4898 8.95207 14.462 9.05133 14.4065 9.10238C14.3564 9.15343 14.2592 9.17896 14.1146 9.17896H13.6477ZM5.90203 11.7825C5.75751 11.7825 5.65746 11.7541 5.60188 11.6974C5.55185 11.6407 5.52684 11.5442 5.52684 11.4081V10.9317C5.52684 10.7842 5.55185 10.6849 5.60188 10.6339C5.65746 10.5828 5.75751 10.5573 5.90203 10.5573H6.36894C6.5079 10.5573 6.60518 10.5828 6.66076 10.6339C6.71635 10.6849 6.74414 10.7842 6.74414 10.9317V11.4081C6.74414 11.5442 6.71635 11.6407 6.66076 11.6974C6.60518 11.7541 6.5079 11.7825 6.36894 11.7825H5.90203ZM8.48671 11.7825C8.34775 11.7825 8.25048 11.7541 8.19489 11.6974C8.13931 11.6407 8.11152 11.5442 8.11152 11.4081V10.9317C8.11152 10.7842 8.13931 10.6849 8.19489 10.6339C8.25048 10.5828 8.34775 10.5573 8.48671 10.5573H8.94528C9.0898 10.5573 9.18708 10.5828 9.2371 10.6339C9.29269 10.6849 9.32048 10.7842 9.32048 10.9317V11.4081C9.32048 11.5442 9.29269 11.6407 9.2371 11.6974C9.18708 11.7541 9.0898 11.7825 8.94528 11.7825H8.48671ZM11.0714 11.7825C10.9269 11.7825 10.8268 11.7541 10.7712 11.6974C10.7212 11.6407 10.6962 11.5442 10.6962 11.4081V10.9317C10.6962 10.7842 10.7212 10.6849 10.7712 10.6339C10.8268 10.5828 10.9269 10.5573 11.0714 10.5573H11.5383C11.6773 10.5573 11.7745 10.5828 11.8301 10.6339C11.8857 10.6849 11.9135 10.7842 11.9135 10.9317V11.4081C11.9135 11.5442 11.8857 11.6407 11.8301 11.6974C11.7745 11.7541 11.6773 11.7825 11.5383 11.7825H11.0714ZM13.6477 11.7825C13.5088 11.7825 13.4115 11.7541 13.3559 11.6974C13.3003 11.6407 13.2725 11.5442 13.2725 11.4081V10.9317C13.2725 10.7842 13.3003 10.6849 13.3559 10.6339C13.4115 10.5828 13.5088 10.5573 13.6477 10.5573H14.1146C14.2592 10.5573 14.3564 10.5828 14.4065 10.6339C14.462 10.6849 14.4898 10.7842 14.4898 10.9317V11.4081C14.4898 11.5442 14.462 11.6407 14.4065 11.6974C14.3564 11.7541 14.2592 11.7825 14.1146 11.7825H13.6477ZM5.90203 14.369C5.75751 14.369 5.65746 14.3434 5.60188 14.2924C5.55185 14.2414 5.52684 14.1421 5.52684 13.9946V13.5267C5.52684 13.3849 5.55185 13.2884 5.60188 13.2374C5.65746 13.1807 5.75751 13.1523 5.90203 13.1523H6.36894C6.5079 13.1523 6.60518 13.1807 6.66076 13.2374C6.71635 13.2884 6.74414 13.3849 6.74414 13.5267V13.9946C6.74414 14.1421 6.71635 14.2414 6.66076 14.2924C6.60518 14.3434 6.5079 14.369 6.36894 14.369H5.90203ZM8.48671 14.369C8.34775 14.369 8.25048 14.3434 8.19489 14.2924C8.13931 14.2414 8.11152 14.1421 8.11152 13.9946V13.5267C8.11152 13.3849 8.13931 13.2884 8.19489 13.2374C8.25048 13.1807 8.34775 13.1523 8.48671 13.1523H8.94528C9.0898 13.1523 9.18708 13.1807 9.2371 13.2374C9.29269 13.2884 9.32048 13.3849 9.32048 13.5267V13.9946C9.32048 14.1421 9.29269 14.2414 9.2371 14.2924C9.18708 14.3434 9.0898 14.369 8.94528 14.369H8.48671ZM11.0714 14.369C10.9269 14.369 10.8268 14.3434 10.7712 14.2924C10.7212 14.2414 10.6962 14.1421 10.6962 13.9946V13.5267C10.6962 13.3849 10.7212 13.2884 10.7712 13.2374C10.8268 13.1807 10.9269 13.1523 11.0714 13.1523H11.5383C11.6773 13.1523 11.7745 13.1807 11.8301 13.2374C11.8857 13.2884 11.9135 13.3849 11.9135 13.5267V13.9946C11.9135 14.1421 11.8857 14.2414 11.8301 14.2924C11.7745 14.3434 11.6773 14.369 11.5383 14.369H11.0714Z"
 			fill="white"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 16 12"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="diamond-eye-title"
 	>
+		<title id="diamond-eye-title">Diamond Eye Icon</title>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 20 20"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Information"
 	>
+		<title>Information icon</title>
 		<path d="M10.75 8.75V13.75H9.25V8.75H10.75Z" fill="white" />
 		<path
 			d="M9.37508 7.47656C9.55997 7.65885 9.78263 7.75 10.043 7.75C10.2097 7.75 10.3634 7.70833 10.504 7.625C10.6446 7.53906 10.7579 7.42578 10.8438 7.28516C10.9324 7.14193 10.9779 6.98438 10.9805 6.8125C10.9779 6.55729 10.8829 6.33854 10.6954 6.15625C10.5079 5.97396 10.2904 5.88281 10.043 5.88281C9.78263 5.88281 9.55997 5.97396 9.37508 6.15625C9.19279 6.33854 9.10294 6.55729 9.10555 6.8125C9.10294 7.07031 9.19279 7.29167 9.37508 7.47656Z"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 20 20"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Inventory"
 	>
+		<title>Inventory icon</title>
 		<path
 			d="M2 4C2 2.89543 2.85961 2 3.92 2H6.48C7.54039 2 8.4 2.89543 8.4 4V6.66667C8.4 7.77124 7.54039 8.66667 6.48 8.66667H3.92C2.85961 8.66667 2 7.77124 2 6.66667V4Z"
 			fill="white"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 16 16"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="minus-title"
 	>
+		<title id="minus-title">Minus Icon</title>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 16 16"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="plus-title"
 	>
+		<title id="plus-title">Plus Icon</title>
 		<path
 			d="M8.65529 7.45725V2.40039H7.45529V7.45724H2.39844V8.65725H7.45529V13.7141H8.65529V8.65725H13.7121V7.45725H8.65529Z"
 			fill="white"

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

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 24 24"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="positive-circle-title"
 	>
+		<title id="positive-circle-title">Positive Circle Icon</title>
 		<path
 			d="M21.6004 11.9999C21.6004 17.3018 17.3023 21.5999 12.0004 21.5999C6.69846 21.5999 2.40039 17.3018 2.40039 11.9999C2.40039 6.69797 6.69846 2.3999 12.0004 2.3999C17.3023 2.3999 21.6004 6.69797 21.6004 11.9999Z"
 			fill="#14A554"

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

@@ -1,19 +1,19 @@
-import type { TokenMetadata } from '@0xsequence/indexer';
 import { Box, Text, TokenImage } from '@0xsequence/design-system';
+import type { TokenMetadata } from '@0xsequence/indexer';
 import { Show, observer, useSelector } from '@legendapp/state/react';
 import { useEffect } from 'react';
 import type { Address, Hex } from 'viem';
+import { formatUnits, parseUnits } from 'viem';
 import { ContractType, type Order } from '../../../_internal';
 import type { BuyInput } from '../../../_internal/transaction-machine/execute-transaction';
 import { useCollectible, useCollection } from '../../../hooks';
+import { useCurrencies } from '../../../hooks';
 import { useBuyCollectable } from '../../../hooks/useBuyCollectable';
+import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 import QuantityInput from '..//_internal/components/quantityInput';
 import { ActionModal } from '../_internal/components/actionModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { buyModal$ } from './_store';
-import { formatUnits, parseUnits } from 'viem';
-import { useCurrencies } from '../../../hooks';
-import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 
 export type ShowBuyModalArgs = {
 	chainId: string;
@@ -43,6 +43,7 @@ export const BuyModalContent = () => {
 	) as Hex;
 	const collectibleId = useSelector(buyModal$.state.order.tokenId);
 	const modalId = useSelector(buyModal$.state.modalId);
+	const callbacks = useSelector(buyModal$.callbacks);
 
 	const { data: collection } = useCollection({
 		chainId,
@@ -52,9 +53,23 @@ export const BuyModalContent = () => {
 	const { buy, isLoading } = useBuyCollectable({
 		chainId,
 		collectionAddress,
-		onError: buyModal$.callbacks.get()?.onError,
+		enabled: buyModal$.isOpen.get(),
+		onSwitchChainRefused: () => {
+			buyModal$.close();
+		},
+		onError: (error) => {
+			if (callbacks?.onError) {
+				callbacks.onError(error);
+			} else {
+				console.debug('onError callback not provided', error);
+			}
+		},
 		onSuccess: (hash) => {
-			buyModal$.callbacks.get()?.onSuccess?.(hash);
+			if (callbacks?.onSuccess) {
+				callbacks.onSuccess(hash);
+			} else {
+				console.debug('onSuccess callback not provided', hash);
+			}
 			buyModal$.close();
 		},
 	});
@@ -65,7 +80,7 @@ export const BuyModalContent = () => {
 		collectibleId,
 	});
 
-	if (modalId == 0 || !collection || !collectable || !buy) return null;
+	if (modalId === 0 || !collection || !collectable || !buy) return null;
 
 	return collection.type === ContractType.ERC721 ? (
 		<CheckoutModal
@@ -101,6 +116,7 @@ function CheckoutModal({
 	order,
 	isLoading,
 }: CheckoutModalProps) {
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		const executeBuy = () => {
 			if (isLoading) return;
@@ -147,7 +163,8 @@ const ERC1155QuantityModal = observer(
 
 		return (
 			<ActionModal
-				store={buyModal$}
+				isOpen={buyModal$.isOpen.get()}
+				chainId={order.chainId}
 				onClose={() => buyModal$.close()}
 				title="Select Quantity"
 				ctas={[

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

@@ -1,7 +1,7 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
 import type { Hash, Hex } from 'viem';
-import { OrderbookKind, type Currency } from '../../../../types';
+import { type Currency, OrderbookKind } from '../../../../types';
 import type { ModalCallbacks } from '../_internal/types';
 
 const initialState = {
@@ -13,9 +13,12 @@ const initialState = {
 	collectionName: '',
 	collectionType: undefined,
 	listingPrice: {
-		amountRaw: '0',
+		// to see if approval is needed when modal opens
+		amountRaw: '1',
 		currency: {} as Currency,
 	},
+	// to track if the user has changed the price, so we know if it's 1 default or user input
+	listingPriceChanged: false,
 	quantity: '1',
 	invalidQuantity: false,
 	expiry: new Date(addDays(new Date(), 7).toJSON()),

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

@@ -1,14 +1,16 @@
 import { Box } from '@0xsequence/design-system';
 import { Show, observer } from '@legendapp/state/react';
 import type { QueryKey } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import type { Hash, Hex } from 'viem';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import {
 	type ContractType,
-	OrderbookKind,
+	type OrderbookKind,
 	collectableKeys,
 } from '../../../_internal';
+import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 import {
 	useBalanceOfCollectible,
 	useCollectible,
@@ -30,7 +32,6 @@ import TransactionDetails from '../_internal/components/transactionDetails';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { createListingModal$ } from './_store';
-import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 
 export type ShowCreateListingModalArgs = {
 	collectionAddress: Hex;
@@ -73,9 +74,12 @@ export const Modal = observer(
 			collectionAddress,
 			chainId,
 			listingPrice,
+			listingPriceChanged,
 			collectibleId,
 			orderbookKind,
+			callbacks,
 		} = state;
+		const currencyAddress = listingPrice.currency.contractAddress;
 		const {
 			data: collectible,
 			isLoading: collectableIsLoading,
@@ -85,6 +89,7 @@ export const Modal = observer(
 			collectionAddress,
 			collectibleId,
 		});
+
 		const {
 			data: collection,
 			isLoading: collectionIsLoading,
@@ -93,6 +98,8 @@ export const Modal = observer(
 			chainId,
 			collectionAddress,
 		});
+		const [approvalExecutedSuccess, setApprovalExecutedSuccess] =
+			useState(false);
 
 		const { address } = useAccount();
 
@@ -100,35 +107,40 @@ export const Modal = observer(
 			chainId,
 			collectionAddress,
 			collectableId: collectibleId,
-			userAddress: address!,
+			userAddress: address ?? undefined,
 		});
 
-		const { getListingSteps, isLoading: machineLoading } = useCreateListing({
+		const { getListingSteps, isLoading: machineLoading, createListing} = useCreateListing({
 			orderbookKind,
 			chainId,
 			collectionAddress,
-			onTransactionSent: (hash) => {
-				if (!hash) return;
+			enabled: createListingModal$.isOpen.get(),
+			onSwitchChainRefused: () => createListingModal$.close(),
+			onApprovalSuccess: () => setApprovalExecutedSuccess(true),
+			onTransactionSent: (hash, orderId) => {
+				if (!hash && !orderId) return;
+
 				showTransactionStatusModal({
 					hash,
+					orderId,
 					collectionAddress,
 					chainId,
 					price: createListingModal$.listingPrice.get(),
 					collectibleId,
 					type: TransactionType.LISTING,
 					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
+					callbacks,
 				});
 				createListingModal$.close();
 			},
-			onError: (error) => {
-				if (typeof createListingModal$.callbacks?.onError === 'function') {
-					createListingModal$.onError(error);
-				} else {
-					console.debug('onError callback not provided:', error);
-				}
-			},
 		});
 
+		useEffect(() => {
+			if (!currencyAddress) return;
+
+			refreshSteps();
+		}, [currencyAddress]);
+
 		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 		const handleStepExecution = async (execute?: any) => {
 			if (!execute) return;
@@ -136,14 +148,19 @@ export const Modal = observer(
 				await refreshSteps();
 				await execute();
 			} catch (error) {
-				createListingModal$.onError?.(error as Error);
+				if (callbacks?.onError) {
+					callbacks.onError(error as Error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
 			}
 		};
 
 		if (collectableIsLoading || collectionIsLoading || machineLoading) {
 			return (
 				<LoadingModal
-					store={createListingModal$}
+					isOpen={createListingModal$.isOpen.get()}
+					chainId={Number(chainId)}
 					onClose={createListingModal$.close}
 					title="List item for sale"
 				/>
@@ -153,7 +170,8 @@ export const Modal = observer(
 		if (collectableIsError || collectionIsError) {
 			return (
 				<ErrorModal
-					store={createListingModal$}
+					isOpen={createListingModal$.isOpen.get()}
+					chainId={Number(chainId)}
 					onClose={createListingModal$.close}
 					title="List item for sale"
 				/>
@@ -164,7 +182,7 @@ export const Modal = observer(
 			Math.floor(date.getTime() / 1000).toString();
 
 		const { isLoading, steps, refreshSteps } = getListingSteps({
-			contractType: collection!.type as ContractType,
+			contractType: collection?.type as ContractType,
 			listing: {
 				tokenId: collectibleId,
 				quantity: parseUnits(
@@ -176,31 +194,51 @@ export const Modal = observer(
 				pricePerToken: listingPrice.amountRaw,
 			},
 		});
+		const approvalNeeded = steps?.approval.isPending;
 
 		const ctas = [
 			{
 				label: 'Approve TOKEN',
 				onClick: () => handleStepExecution(() => steps?.approval.execute()),
-				hidden: !steps?.approval.isPending,
-				pending: steps?.approval.isExecuting,
+				hidden: !approvalNeeded || approvalExecutedSuccess,
+				pending: steps?.approval.isExecuting || isLoading,
 				variant: 'glass' as const,
-				disabled: createListingModal$.invalidQuantity.get(),
+				disabled:
+					createListingModal$.invalidQuantity.get() ||
+					isLoading ||
+					!listingPriceChanged ||
+					listingPrice.amountRaw === '0' ||
+					steps?.transaction.isExecuting,
 			},
 			{
 				label: 'List item for sale',
-				onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+				onClick: () => createListing({
+					contractType: collection?.type as ContractType,
+					listing: {
+						tokenId: collectibleId,
+						quantity: parseUnits(
+							createListingModal$.quantity.get(),
+							collectible?.decimals || 0,
+						).toString(),
+						expiry: dateToUnixTime(createListingModal$.expiry.get()),
+						currencyAddress: listingPrice.currency.contractAddress,
+						pricePerToken: listingPrice.amountRaw,
+					},
+				}),
 				pending: steps?.transaction.isExecuting || isLoading,
 				disabled:
-					steps?.approval.isPending ||
+					(!approvalExecutedSuccess && approvalNeeded) ||
 					listingPrice.amountRaw === '0' ||
 					isLoading ||
-					createListingModal$.invalidQuantity.get(),
+					createListingModal$.invalidQuantity.get() ||
+					!listingPriceChanged,
 			},
 		] satisfies ActionModalProps['ctas'];
 
 		return (
 			<ActionModal
-				store={createListingModal$}
+				isOpen={createListingModal$.isOpen.get()}
+				chainId={Number(chainId)}
 				onClose={() => createListingModal$.close()}
 				title="List item for sale"
 				ctas={ctas}
@@ -217,8 +255,10 @@ export const Modal = observer(
 						chainId={chainId}
 						collectionAddress={collectionAddress}
 						$listingPrice={createListingModal$.listingPrice}
+						onPriceChange={() => createListingModal$.listingPriceChanged.set(true)}
 					/>
-					{!!listingPrice && (
+
+					{listingPrice.amountRaw !== '0' && listingPriceChanged && (
 						<FloorPriceText
 							tokenId={collectibleId}
 							chainId={chainId}
@@ -244,6 +284,7 @@ export const Modal = observer(
 					collectionAddress={collectionAddress}
 					chainId={chainId}
 					price={createListingModal$.listingPrice.get()}
+					showPlaceholderPrice={!listingPriceChanged}
 					currencyImageUrl={listingPrice.currency.imageUrl}
 				/>
 			</ActionModal>

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

@@ -1,13 +1,14 @@
 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 { BaseModalState, ModalCallbacks } from '../_internal/types';
 
 type MakeOfferModalState = BaseModalState & {
 	orderbookKind: OrderbookKind;
 	collectibleId: string;
 	offerPrice: Price;
+	offerPriceChanged: boolean;
 	quantity: string;
 	expiry: Date;
 	invalidQuantity: boolean;
@@ -27,12 +28,14 @@ const initialState: MakeOfferModalState & {
 	collectionAddress: '' as Hex,
 	chainId: '',
 	collectibleId: '',
-	orderbookKind: OrderbookKind.sequence_marketplace_v2,
+	orderbookKind: OrderbookKind.reservoir,
 	callbacks: undefined,
 	offerPrice: {
 		amountRaw: '1',
 		currency: {} as Currency,
 	},
+	// to track if the user has changed the price, so we know if it's 1 default or user input
+	offerPriceChanged: false,
 	quantity: '1',
 	invalidQuantity: false,
 	expiry: new Date(addDays(new Date(), 7).toJSON()),