@0xsequence/marketplace-sdk 0.4.0 → 0.4.1

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

@@ -1,13 +1,15 @@
 import { Show, observer } from '@legendapp/state/react';
 import type { QueryKey } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { parseUnits, type Hex } from 'viem';
+import { type Hex, parseUnits } from 'viem';
 import {
 	ContractType,
-	OrderbookKind,
+	type OrderbookKind,
 	collectableKeys,
 } from '../../../_internal';
+import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 import { useCollectible, useCollection, useCurrencies } from '../../../hooks';
+import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 import { useMakeOffer } from '../../../hooks/useMakeOffer';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
@@ -20,8 +22,6 @@ import TokenPreview from '../_internal/components/tokenPreview';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { makeOfferModal$ } from './_store';
-import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
-import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 
 export type ShowMakeOfferModalArgs = {
 	collectionAddress: Hex;
@@ -60,11 +60,15 @@ const ModalContent = observer(
 			collectionAddress,
 			chainId,
 			offerPrice,
+			offerPriceChanged,
+			invalidQuantity,
 			collectibleId,
 			orderbookKind,
+			callbacks,
 		} = state;
 		const [insufficientBalance, setInsufficientBalance] = useState(false);
-
+		const [approvalExecutedSuccess, setApprovalExecutedSuccess] =
+			useState(false);
 		const {
 			data: collectible,
 			isLoading: collectableIsLoading,
@@ -93,6 +97,9 @@ const ModalContent = observer(
 			chainId,
 			collectionAddress,
 			orderbookKind,
+			enabled: makeOfferModal$.isOpen.get(),
+			onSwitchChainRefused: () => makeOfferModal$.close(),
+			onApprovalSuccess: () => setApprovalExecutedSuccess(true),
 			onTransactionSent: (hash, orderId) => {
 				if (!hash && !orderId) return;
 
@@ -105,23 +112,10 @@ const ModalContent = observer(
 					collectibleId,
 					type: TransactionType.OFFER,
 					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
+					callbacks,
 				});
 				makeOfferModal$.close();
 			},
-			onSuccess: (hash) => {
-				if (typeof makeOfferModal$.callbacks?.onSuccess === 'function') {
-					makeOfferModal$.callbacks.onSuccess(hash);
-				} else {
-					console.debug('onSuccess callback not provided:', hash);
-				}
-			},
-			onError: (error) => {
-				if (typeof makeOfferModal$.callbacks?.onError === 'function') {
-					makeOfferModal$.callbacks.onError(error);
-				} else {
-					console.debug('onError callback not provided:', error);
-				}
-			},
 		});
 
 		const dateToUnixTime = (date: Date) =>
@@ -130,7 +124,7 @@ const ModalContent = observer(
 		const currencyAddress = offerPrice.currency.contractAddress;
 
 		const { isLoading, steps, refreshSteps } = getMakeOfferSteps({
-			contractType: collection!.type as ContractType,
+			contractType: collection?.type as ContractType,
 			offer: {
 				tokenId: collectibleId,
 				quantity: parseUnits(
@@ -142,16 +136,20 @@ const ModalContent = observer(
 				pricePerToken: offerPrice.amountRaw,
 			},
 		});
+		const approvalNeeded = steps?.approval.isPending;
 
+		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 		useEffect(() => {
 			if (!currencyAddress) return;
+
 			refreshSteps();
 		}, [currencyAddress]);
 
 		if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
 			return (
 				<LoadingModal
-					store={makeOfferModal$}
+					isOpen={makeOfferModal$.isOpen.get()}
+					chainId={Number(chainId)}
 					onClose={makeOfferModal$.close}
 					title="Make an offer"
 				/>
@@ -161,20 +159,26 @@ const ModalContent = observer(
 		if (collectableIsError || collectionIsError) {
 			return (
 				<ErrorModal
-					store={makeOfferModal$}
+					isOpen={makeOfferModal$.isOpen.get()}
+					chainId={Number(chainId)}
 					onClose={makeOfferModal$.close}
 					title="Make an offer"
 				/>
 			);
 		}
 
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 		const handleStepExecution = async (execute?: any) => {
 			if (!execute) return;
 			try {
 				await refreshSteps();
 				await execute();
 			} catch (error) {
-				makeOfferModal$.callbacks?.onError?.(error as Error);
+				if (callbacks?.onError) {
+					callbacks.onError(error as Error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
 			}
 		};
 
@@ -182,68 +186,82 @@ const ModalContent = observer(
 			{
 				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: makeOfferModal$.invalidQuantity.get(),
+				disabled:
+					invalidQuantity ||
+					isLoading ||
+					steps?.transaction.isExecuting ||
+					insufficientBalance ||
+					offerPrice.amountRaw === '0' ||
+					!offerPriceChanged,
 			},
 			{
 				label: 'Make offer',
 				onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+
 				pending: steps?.transaction.isExecuting || isLoading,
 				disabled:
-					steps?.approval.isPending ||
+					(!approvalExecutedSuccess && approvalNeeded) ||
 					offerPrice.amountRaw === '0' ||
 					insufficientBalance ||
 					isLoading ||
-					makeOfferModal$.invalidQuantity.get(),
+					invalidQuantity ||
+					offerPrice.amountRaw === '0',
 			},
 		];
 
 		return (
-			<ActionModal
-				store={makeOfferModal$}
-				onClose={() => makeOfferModal$.close()}
-				title="Make an offer"
-				ctas={ctas}
-			>
-				<TokenPreview
-					collectionName={collection?.name}
-					collectionAddress={collectionAddress}
-					collectibleId={collectibleId}
-					chainId={chainId}
-				/>
-
-				<PriceInput
-					chainId={chainId}
-					collectionAddress={collectionAddress}
-					$listingPrice={makeOfferModal$.offerPrice}
-					checkBalance={{
-						enabled: true,
-						callback: (state) => setInsufficientBalance(state),
-					}}
-				/>
-
-				{collection?.type === ContractType.ERC1155 && (
-					<QuantityInput
-						$quantity={makeOfferModal$.quantity}
-						$invalidQuantity={makeOfferModal$.invalidQuantity}
-						decimals={collectible?.decimals || 0}
-						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
+			<>
+				<ActionModal
+					isOpen={makeOfferModal$.isOpen.get()}
+					chainId={Number(chainId)}
+					onClose={() => makeOfferModal$.close()}
+					title="Make an offer"
+					ctas={ctas}
+				>
+					<TokenPreview
+						collectionName={collection?.name}
+						collectionAddress={collectionAddress}
+						collectibleId={collectibleId}
+						chainId={chainId}
 					/>
-				)}
 
-				{!!offerPrice && (
-					<FloorPriceText
-						tokenId={collectibleId}
+					<PriceInput
 						chainId={chainId}
 						collectionAddress={collectionAddress}
-						price={offerPrice}
+						$listingPrice={makeOfferModal$.offerPrice}
+						onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+						checkBalance={{
+							enabled: true,
+							callback: (state) => setInsufficientBalance(state),
+						}}
 					/>
-				)}
 
-				<ExpirationDateSelect $date={makeOfferModal$.expiry} />
-			</ActionModal>
+					{collection?.type === ContractType.ERC1155 && (
+						<QuantityInput
+							$quantity={makeOfferModal$.quantity}
+							$invalidQuantity={makeOfferModal$.invalidQuantity}
+							decimals={collectible?.decimals || 0}
+							maxQuantity={String(Number.MAX_SAFE_INTEGER)}
+						/>
+					)}
+
+					{offerPrice.amountRaw !== '0' &&
+						offerPriceChanged &&
+						!insufficientBalance && (
+							<FloorPriceText
+								tokenId={collectibleId}
+								chainId={chainId}
+								collectionAddress={collectionAddress}
+								price={offerPrice}
+							/>
+						)}
+
+					<ExpirationDateSelect $date={makeOfferModal$.expiry} />
+				</ActionModal>
+			</>
 		);
 	},
 );

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

@@ -11,7 +11,10 @@ import { useCollection, useCurrencies } from '../../../hooks';
 import { useSell } from '../../../hooks/useSell';
 import { ErrorModal } from '..//_internal/components/actionModal/ErrorModal';
 import type { ModalCallbacks } from '..//_internal/types';
-import { ActionModal } from '../_internal/components/actionModal/ActionModal';
+import {
+	ActionModal,
+	ActionModalProps,
+} from '../_internal/components/actionModal/ActionModal';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
@@ -20,6 +23,8 @@ import { useTransactionStatusModal } from '../_internal/components/transactionSt
 import { sellModal$ } from './_store';
 import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
+import { useEffect, useState } from 'react';
+import { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
 
 export type ShowSellModalArgs = {
 	chainId: string;
@@ -53,26 +58,60 @@ const ModalContent = observer(
 	}: {
 		showTransactionStatusModal: TransactionStatusModalReturn['show'];
 	}) => {
-		const { tokenId, collectionAddress, chainId, order } = sellModal$.get();
+		const { tokenId, collectionAddress, chainId, order, callbacks } =
+			sellModal$.get();
 		const { data: collectible } = useCollection({
 			chainId,
 			collectionAddress,
 		});
-
-		const { sell } = useSell({
+		const [approvalExecutedSuccess, setApprovalExecutedSuccess] =
+			useState(false);
+		const {
+			data: collection,
+			isLoading: collectionLoading,
+			isError: collectionError,
+		} = useCollection({
+			chainId,
 			collectionAddress,
+		});
+		const currencyOptions = useCurrencyOptions({ collectionAddress });
+		const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
 			chainId,
+			currencyOptions,
+		});
+		const { getSellSteps, isLoading: machineLoading } = useSell({
+			collectionAddress,
+			chainId,
+			enabled: sellModal$.isOpen.get(),
+			onSwitchChainRefused: () => {
+				sellModal$.close();
+			},
+			onApprovalSuccess: () => setApprovalExecutedSuccess(true),
 			onTransactionSent: (hash) => {
 				if (!hash) return;
 				showTransactionStatusModal({
 					hash: hash,
-					price: {
-						amountRaw: order!.priceAmount,
-						currency: currencies!.find(
-							(currency) =>
-								currency.contractAddress === order!.priceCurrencyAddress,
-						)!,
-					},
+					price: order
+						? {
+								amountRaw: order.priceAmount,
+								currency: currencies?.find(
+									(currency) =>
+										currency.contractAddress === order.priceCurrencyAddress,
+								) ?? {
+									chainId: Number(chainId),
+									contractAddress: order.priceCurrencyAddress,
+									name: 'Unknown',
+									symbol: 'UNK',
+									decimals: 18,
+									imageUrl: '',
+									exchangeRate: 0,
+									defaultChainCurrency: false,
+									nativeCurrency: false,
+									createdAt: new Date().toISOString(),
+									updatedAt: new Date().toISOString(),
+								},
+							}
+						: undefined,
 					collectionAddress,
 					chainId,
 					collectibleId: tokenId,
@@ -81,43 +120,48 @@ const ModalContent = observer(
 						...collectableKeys.all,
 						balanceQueries.all,
 					] as unknown as QueryKey[],
+					callbacks,
 				});
 				sellModal$.close();
 			},
-			onSuccess: (hash) => {
-				if (typeof sellModal$.callbacks?.onSuccess === 'function') {
-					sellModal$.callbacks.onSuccess(hash);
-				} else {
-					console.debug('onSuccess callback not provided:', hash);
-				}
-			},
-			onError: (error) => {
-				if (typeof sellModal$.callbacks?.onError === 'function') {
-					sellModal$.callbacks.onError(error);
-				} else {
-					console.debug('onError callback not provided:', error);
-				}
-			},
 		});
 
-		const {
-			data: collection,
-			isLoading: collectionLoading,
-			isError: collectionError,
-		} = useCollection({
-			chainId,
-			collectionAddress,
-		});
-		const currencyOptions = useCurrencyOptions({ collectionAddress });
-		const { data: currencies, isLoading: currenciesLoading } = useCurrencies({
-			chainId,
-			currencyOptions,
+		const { isLoading, steps, refreshSteps } = getSellSteps({
+			orderId: order?.orderId ?? '',
+			marketplace: order?.marketplace as MarketplaceKind,
+			quantity: order?.quantityRemaining
+				? parseUnits(
+						order.quantityRemaining,
+						collectible?.decimals || 0,
+					).toString()
+				: '1',
 		});
 
-		if (collectionLoading || currenciesLoading) {
+
+		useEffect(() => {
+			refreshSteps();
+		}, [order, machineLoading]);
+
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		const handleStepExecution = async (execute?: any) => {
+			if (!execute) return;
+			try {
+				await refreshSteps();
+				await execute();
+			} catch (error) {
+				if (callbacks?.onError) {
+					callbacks.onError(error as Error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
+			}
+		};
+
+		if (collectionLoading || currenciesLoading || machineLoading) {
 			return (
 				<LoadingModal
-					store={sellModal$}
+					isOpen={sellModal$.isOpen.get()}
+					chainId={Number(chainId)}
 					onClose={sellModal$.close}
 					title="You have an offer"
 				/>
@@ -127,38 +171,44 @@ const ModalContent = observer(
 		if (collectionError || order === undefined) {
 			return (
 				<ErrorModal
-					store={sellModal$}
+					isOpen={sellModal$.isOpen.get()}
+					chainId={Number(chainId)}
 					onClose={sellModal$.close}
 					title="You have an offer"
 				/>
 			);
 		}
 
+		const approvalNeeded = steps?.approval.isPending;
+
 		const currency = currencies?.find(
 			(c) => c.contractAddress === order?.priceCurrencyAddress,
 		);
 
+		const ctas = [
+			{
+				label: 'Approve TOKEN',
+				onClick: () => handleStepExecution(() => steps?.approval.execute()),
+				hidden: !approvalNeeded || approvalExecutedSuccess,
+				pending: steps?.approval.isExecuting || isLoading,
+				variant: 'glass' as const,
+				disabled: isLoading || steps?.transaction.isExecuting,
+			},
+			{
+				label: 'Accept',
+				onClick: () => handleStepExecution(() => steps?.transaction.execute()),
+				pending: steps?.transaction.isExecuting || isLoading,
+				disabled: (!approvalExecutedSuccess && approvalNeeded) || isLoading,
+			},
+		] satisfies ActionModalProps['ctas'];
+
 		return (
 			<ActionModal
-				store={sellModal$}
+				isOpen={sellModal$.isOpen.get()}
+				chainId={Number(chainId)}
 				onClose={sellModal$.close}
 				title="You have an offer"
-				ctas={[
-					{
-						label: 'Accept',
-						onClick: () =>
-							sell({
-								orderId: order?.orderId,
-								marketplace: order?.marketplace,
-								quantity: order?.quantityRemaining
-									? parseUnits(
-											order.quantityRemaining,
-											collectible?.decimals || 0,
-										).toString()
-									: '1',
-							}),
-					},
-				]}
+				ctas={ctas}
 			>
 				<TransactionHeader
 					title="Offer received"

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

@@ -2,7 +2,7 @@ import { observable } from '@legendapp/state';
 import type { Hex } from 'viem';
 import type { ShowTransferModalArgs } from '.';
 import type { CollectionType } from '../../../_internal';
-import { ModalCallbacks } from '../_internal/types';
+import type { ModalCallbacks } from '../_internal/types';
 
 export interface TransferModalState {
 	isOpen: boolean;

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx

@@ -23,11 +23,13 @@ const EnterWalletAddressView = () => {
 		chainId,
 		contractAddress: collectionAddress,
 		tokenId: collectibleId,
-		accountAddress: address!,
+		accountAddress: address ?? '',
 		query: { enabled: !!address },
 	});
 	const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
-	const insufficientBalance: boolean = $quantity.get() > balanceAmount!;
+	const insufficientBalance: boolean = balanceAmount
+		? $quantity.get() > balanceAmount
+		: true;
 	const { data: collection } = useCollection({
 		collectionAddress,
 		chainId,

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx

@@ -1,12 +1,12 @@
+import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import { ContractType } from '../../../../../../types';
-import { useTransferTokens } from '../../../../../hooks';
-import { transferModal$ } from '../../_store';
 import { InvalidContractTypeError } from '../../../../../../utils/_internal/error/transaction';
-import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 import { balanceQueries } from '../../../../../_internal';
-import { QueryKey } from '@tanstack/react-query';
+import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
+import { useTransferTokens } from '../../../../../hooks';
+import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
+import { transferModal$ } from '../../_store';
 
 const useHandleTransfer = () => {
 	const {

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

@@ -4,11 +4,11 @@ import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
 import type { Hex } from 'viem';
 import { useAccount } from 'wagmi';
 import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import type { ModalCallbacks } from '../_internal/types';
 import { transferModal$ } from './_store';
 import EnterWalletAddressView from './_views/enterWalletAddress';
 import FollowWalletInstructionsView from './_views/followWalletInstructions';
 import { closeButton, dialogOverlay, transferModalContent } from './styles.css';
-import { ModalCallbacks } from '../_internal/types';
 
 export type ShowTransferModalArgs = {
 	collectionAddress: Hex;

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -1,29 +1,29 @@
 'use client';
 
 import type React from 'react';
-import type { ComponentProps } from 'react';
+import { useState, type ComponentProps } from 'react';
 
 import {
 	Box,
 	Button,
 	CloseIcon,
 	IconButton,
+	Spinner,
 	Text,
 } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
 import { getProviderEl } from '../../../../../_internal';
-import type { ActionModalState } from './store';
 import {
 	closeButton,
 	cta as ctaStyle,
 	dialogContent,
 	dialogOverlay,
 } from './styles.css';
+import WaasFeeOptionsBox from '../waasFeeOptionsBox';
 
 export interface ActionModalProps {
-	store: Observable<ActionModalState>;
+	isOpen: boolean;
 	onClose: () => void;
 	title: string;
 	children: React.ReactNode;
@@ -35,12 +35,15 @@ export interface ActionModalProps {
 		hidden?: boolean;
 		variant?: ComponentProps<typeof Button>['variant'];
 	}[];
+	chainId: number;
 }
 
 export const ActionModal = observer(
-	({ store, onClose, title, children, ctas }: ActionModalProps) => {
+	({ isOpen, onClose, title, children, ctas, chainId }: ActionModalProps) => {
+		const [isSelectingFees, setIsSelectingFees] = useState(false);
+
 		return (
-			<Root open={store.isOpen.get()}>
+			<Root open={isOpen && !!chainId}>
 				<Portal container={getProviderEl()}>
 					<Overlay className={dialogOverlay} />
 					<Content className={dialogContent.narrow}>
@@ -77,15 +80,33 @@ export const ActionModal = observer(
 												}}
 												variant={cta.variant || 'primary'}
 												pending={cta.pending}
-												disabled={cta.disabled}
+												disabled={cta.disabled || isSelectingFees}
 												size="lg"
 												width="full"
-												label={cta.label}
+												label={
+													<Box
+														display="flex"
+														alignItems="center"
+														gap="2"
+														justifyContent="center"
+													>
+														{cta.pending && <Spinner size="sm" />}
+
+														{cta.label}
+													</Box>
+												}
 											/>
 										),
 								)}
 							</Box>
 						</Box>
+
+						<WaasFeeOptionsBox
+							chainId={chainId}
+							onFeeOptionsLoaded={() => setIsSelectingFees(true)}
+							onFeeOptionConfirmed={() => setIsSelectingFees(false)}
+						/>
+
 						<Close className={closeButton} asChild onClick={onClose}>
 							<IconButton size="xs" aria-label="Close modal" icon={CloseIcon} />
 						</Close>

package/src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx

@@ -1,16 +1,26 @@
 import { Box } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
 import { ActionModal } from './ActionModal';
-import type { ActionModalState } from './store';
 
 interface ErrorModalProps {
-	store: Observable<ActionModalState>;
+	isOpen: boolean;
+	chainId: number;
 	onClose: () => void;
 	title: string;
 }
 
-export const ErrorModal = ({ store, onClose, title }: ErrorModalProps) => (
-	<ActionModal store={store} onClose={onClose} title={title} ctas={[]}>
+export const ErrorModal = ({
+	isOpen,
+	chainId,
+	onClose,
+	title,
+}: ErrorModalProps) => (
+	<ActionModal
+		isOpen={isOpen}
+		chainId={chainId}
+		onClose={onClose}
+		title={title}
+		ctas={[]}
+	>
 		<Box display="flex" justifyContent="center" alignItems="center" padding="4">
 			Error loading item details
 		</Box>