@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

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

@@ -7,14 +7,16 @@ import { parseUnits } from 'viem';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
 import { getNetwork } from '../../../../utils/network';
-import { ContractType } from '../../../_internal';
+import { ContractType, OrderbookKind } from '../../../_internal';
 import {
 	useCollectible,
 	useCollection,
 	useLowestListing,
 	useMarketCurrencies,
+	useMarketplaceConfig,
 } from '../../../hooks';
 import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
+import { ErrorLogBox } from '../../components/_internals/ErrorLogBox';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
@@ -45,11 +47,21 @@ const Modal = observer(() => {
 		offerPriceChanged,
 		invalidQuantity,
 		collectibleId,
-		orderbookKind,
+		orderbookKind: orderbookKindProp,
 		callbacks,
 	} = state;
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+	const [error, setError] = useState<Error | undefined>(undefined);
+
+	const collectionConfig = marketplaceConfig?.market.collections.find(
+		(c) => c.itemsAddress === collectionAddress,
+	);
+	const orderbookKind =
+		orderbookKindProp ?? collectionConfig?.destinationMarketplace;
 	const steps$ = makeOfferModal$.steps;
 	const [insufficientBalance, setInsufficientBalance] = useState(false);
+	const [openseaLowestPriceCriteriaMet, setOpenseaLowestPriceCriteriaMet] =
+		useState(true);
 	const {
 		data: collectible,
 		isLoading: collectableIsLoading,
@@ -93,7 +105,12 @@ const Modal = observer(() => {
 	const modalLoading =
 		collectableIsLoading || collectionIsLoading || currenciesLoading;
 
-	const { isLoading, executeApproval, makeOffer } = useMakeOffer({
+	const {
+		isLoading,
+		executeApproval,
+		makeOffer,
+		isError: approvalIsError,
+	} = useMakeOffer({
 		offerInput: {
 			contractType: collection?.type as ContractType,
 			offer: {
@@ -109,8 +126,8 @@ const Modal = observer(() => {
 		},
 		chainId,
 		collectionAddress,
-		orderbookKind,
 		callbacks,
+		orderbookKind,
 		closeMainModal: () => makeOfferModal$.close(),
 		steps$: steps$,
 	});
@@ -126,7 +143,12 @@ const Modal = observer(() => {
 		},
 	});
 
-	if (collectableIsError || collectionIsError || currenciesIsError) {
+	if (
+		collectableIsError ||
+		collectionIsError ||
+		currenciesIsError ||
+		approvalIsError
+	) {
 		return (
 			<ErrorModal
 				isOpen={makeOfferModal$.isOpen.get()}
@@ -164,18 +186,26 @@ const Modal = observer(() => {
 			});
 		} catch (error) {
 			console.error('Make offer failed:', error);
+			setError(error as Error);
 		} finally {
 			makeOfferModal$.offerIsBeingProcessed.set(false);
 			steps$.transaction.isExecuting.set(false);
 		}
 	};
 
+	const handleApproveToken = async () => {
+		await executeApproval().catch((error) => {
+			console.error('Approve TOKEN failed:', error);
+			setError(error as Error);
+		});
+	};
+
 	const offerCtaLabel = getActionLabel('Make offer');
 
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
-			onClick: async () => await executeApproval(),
+			onClick: handleApproveToken,
 			hidden: !steps$.approval.exist.get(),
 			pending: steps$.approval.isExecuting.get(),
 			variant: 'glass' as const,
@@ -184,7 +214,9 @@ const Modal = observer(() => {
 				isLoading ||
 				insufficientBalance ||
 				offerPrice.amountRaw === '0' ||
-				!offerPriceChanged,
+				!offerPriceChanged ||
+				(orderbookKind === OrderbookKind.opensea &&
+					!openseaLowestPriceCriteriaMet),
 		},
 		{
 			label: offerCtaLabel,
@@ -198,108 +230,121 @@ const Modal = observer(() => {
 				offerPrice.amountRaw === '0' ||
 				insufficientBalance ||
 				isLoading ||
-				invalidQuantity,
+				invalidQuantity ||
+				(orderbookKind === OrderbookKind.opensea &&
+					!openseaLowestPriceCriteriaMet),
 		},
 	];
 
 	return (
-		<>
-			<ActionModal
-				isOpen={makeOfferModal$.isOpen.get()}
-				chainId={Number(chainId)}
-				onClose={() => {
-					makeOfferModal$.close();
-					selectWaasFeeOptionsStore.send({ type: 'hide' });
-					steps$.transaction.isExecuting.set(false);
+		<ActionModal
+			isOpen={makeOfferModal$.isOpen.get()}
+			chainId={Number(chainId)}
+			onClose={() => {
+				makeOfferModal$.close();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
+				steps$.transaction.isExecuting.set(false);
+			}}
+			title="Make an offer"
+			ctas={ctas}
+			modalLoading={modalLoading}
+			spinnerContainerClassname="h-[188px]"
+			hideCtas={shouldHideOfferButton}
+		>
+			<TokenPreview
+				collectionName={collection?.name}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
+				chainId={chainId}
+			/>
+
+			<PriceInput
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				price={offerPrice}
+				onPriceChange={(newPrice) => {
+					makeOfferModal$.offerPrice.set(newPrice);
+					makeOfferModal$.offerPriceChanged.set(true);
 				}}
-				title="Make an offer"
-				ctas={ctas}
-				modalLoading={modalLoading}
-				spinnerContainerClassname="h-[188px]"
-				hideCtas={shouldHideOfferButton}
-			>
-				<TokenPreview
-					collectionName={collection?.name}
-					collectionAddress={collectionAddress}
-					collectibleId={collectibleId}
-					chainId={chainId}
-				/>
+				onCurrencyChange={(newCurrency) => {
+					makeOfferModal$.offerPrice.currency.set(newCurrency);
+				}}
+				includeNativeCurrency={false}
+				checkBalance={{
+					enabled: true,
+					callback: (state) => setInsufficientBalance(state),
+				}}
+				setOpenseaLowestPriceCriteriaMet={(state) =>
+					setOpenseaLowestPriceCriteriaMet(state)
+				}
+				orderbookKind={orderbookKind}
+				modalType="offer"
+				disabled={shouldHideOfferButton}
+			/>
 
-				<PriceInput
-					chainId={chainId}
-					collectionAddress={collectionAddress}
-					price={offerPrice}
-					onPriceChange={(newPrice) => {
-						makeOfferModal$.offerPrice.set(newPrice);
-						makeOfferModal$.offerPriceChanged.set(true);
-					}}
-					onCurrencyChange={(newCurrency) => {
-						makeOfferModal$.offerPrice.currency.set(newCurrency);
-					}}
-					includeNativeCurrency={false}
-					checkBalance={{
-						enabled: true,
-						callback: (state) => setInsufficientBalance(state),
-					}}
+			{collection?.type === ContractType.ERC1155 && (
+				<QuantityInput
+					quantity={use$(makeOfferModal$.quantity)}
+					invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
+					onQuantityChange={(quantity) =>
+						makeOfferModal$.quantity.set(quantity)
+					}
+					onInvalidQuantityChange={(invalid) =>
+						makeOfferModal$.invalidQuantity.set(invalid)
+					}
+					decimals={collectible?.decimals || 0}
+					maxQuantity={String(Number.MAX_SAFE_INTEGER)}
 					disabled={shouldHideOfferButton}
 				/>
+			)}
+
+			{offerPrice.amountRaw !== '0' &&
+				offerPriceChanged &&
+				!insufficientBalance && (
+					<FloorPriceText
+						tokenId={collectibleId}
+						chainId={chainId}
+						collectionAddress={collectionAddress}
+						price={offerPrice}
+						onBuyNow={() => {
+							makeOfferModal$.close();
 
-				{collection?.type === ContractType.ERC1155 && (
-					<QuantityInput
-						quantity={use$(makeOfferModal$.quantity)}
-						invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
-						onQuantityChange={(quantity) =>
-							makeOfferModal$.quantity.set(quantity)
-						}
-						onInvalidQuantityChange={(invalid) =>
-							makeOfferModal$.invalidQuantity.set(invalid)
-						}
-						decimals={collectible?.decimals || 0}
-						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
-						disabled={shouldHideOfferButton}
+							if (lowestListing) {
+								buyModal.show({
+									chainId,
+									collectionAddress,
+									collectibleId,
+									orderId: lowestListing.orderId,
+									marketplace: lowestListing.marketplace,
+								});
+							}
+						}}
 					/>
 				)}
+			<ExpirationDateSelect
+				date={makeOfferModal$.expiry.get()}
+				onDateChange={(date) => makeOfferModal$.expiry.set(date)}
+				disabled={shouldHideOfferButton}
+			/>
 
-				{offerPrice.amountRaw !== '0' &&
-					offerPriceChanged &&
-					!insufficientBalance && (
-						<FloorPriceText
-							tokenId={collectibleId}
-							chainId={chainId}
-							collectionAddress={collectionAddress}
-							price={offerPrice}
-							onBuyNow={() => {
-								makeOfferModal$.close();
-
-								if (lowestListing) {
-									buyModal.show({
-										chainId,
-										collectionAddress,
-										collectibleId,
-										orderId: lowestListing.orderId,
-										marketplace: lowestListing.marketplace,
-									});
-								}
-							}}
-						/>
-					)}
-				<ExpirationDateSelect
-					date={makeOfferModal$.expiry.get()}
-					onDateChange={(date) => makeOfferModal$.expiry.set(date)}
-					disabled={shouldHideOfferButton}
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						makeOfferModal$.offerIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Processing offer..."
 				/>
+			)}
 
-				{waasFeeOptionsShown && (
-					<SelectWaasFeeOptions
-						chainId={Number(chainId)}
-						onCancel={() => {
-							makeOfferModal$.offerIsBeingProcessed.set(false);
-							steps$.transaction.isExecuting.set(false);
-						}}
-						titleOnConfirm="Processing offer..."
-					/>
-				)}
-			</ActionModal>
-		</>
+			{error && (
+				<ErrorLogBox
+					title="An error occurred while making an offer"
+					message="Please try again"
+					error={error}
+				/>
+			)}
+		</ActionModal>
 	);
 });

package/src/react/ui/modals/MakeOfferModal/__tests__/Modal.test.tsx

@@ -45,6 +45,8 @@ describe('MakeOfferModal', () => {
 			data: { step: null }, // No approval needed by default
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 	});
 
@@ -80,6 +82,8 @@ describe('MakeOfferModal', () => {
 			}, // Approval needed
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 
 		// Render the modal
@@ -107,6 +111,8 @@ describe('MakeOfferModal', () => {
 				data: { step: null },
 				isLoading: false,
 				isSuccess: true,
+				isError: false,
+				error: null,
 			});
 		});
 
@@ -123,6 +129,8 @@ describe('MakeOfferModal', () => {
 				}, // Approval needed
 				isLoading: false,
 				isSuccess: true,
+				isError: false,
+				error: null,
 			});
 
 			makeOfferModal$.open(defaultArgs);
@@ -150,6 +158,8 @@ describe('MakeOfferModal', () => {
 				data: { step: null }, // No approval needed
 				isLoading: false,
 				isSuccess: true,
+				isError: false,
+				error: null,
 			});
 
 			makeOfferModal$.open(defaultArgs);

package/src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx

@@ -42,7 +42,7 @@ export const useGetTokenApprovalData = (
 
 	const isEnabled = address && params.query?.enabled !== false;
 
-	const { data, isLoading, isSuccess } = useQuery({
+	const { data, isLoading, isSuccess, isError, error } = useQuery({
 		queryKey: ['token-approval-data', params.currencyAddress],
 		queryFn: isEnabled
 			? async () => {
@@ -54,6 +54,7 @@ export const useGetTokenApprovalData = (
 						contractType: params.contractType,
 						orderbook: params.orderbook,
 						offer,
+						additionalFees: [],
 					} satisfies GenerateOfferTransactionArgs;
 					const steps = await marketplaceClient
 						.generateOfferTransaction(args)
@@ -81,5 +82,7 @@ export const useGetTokenApprovalData = (
 		data,
 		isLoading,
 		isSuccess,
+		isError,
+		error,
 	};
 };

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -2,11 +2,10 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import { OrderbookKind } from '../../../../../types';
-import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import type { TransactionSteps } from '../../../../_internal';
 import type { OfferInput } from '../../../../_internal/types';
-import { useMarketplaceConfig } from '../../../../hooks';
 import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
 import { useTransactionSteps } from './useTransactionSteps';
@@ -14,7 +13,7 @@ import { useTransactionSteps } from './useTransactionSteps';
 interface UseMakeOfferArgs {
 	offerInput: OfferInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
@@ -30,30 +29,19 @@ export const useMakeOffer = ({
 	closeMainModal,
 	steps$,
 }: UseMakeOfferArgs) => {
-	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
-		useMarketplaceConfig();
-
-	const collectionConfig = marketplaceConfig?.market.collections.find(
-		(c) => c.itemsAddress === collectionAddress,
-	) as MarketCollection;
-
-	orderbookKind =
-		orderbookKind ??
-		collectionConfig?.destinationMarketplace ??
-		OrderbookKind.sequence_marketplace_v2;
-
-	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
-		useGetTokenApprovalData({
-			chainId,
-			tokenId: offerInput.offer.tokenId,
-			collectionAddress,
-			currencyAddress: offerInput.offer.currencyAddress,
-			contractType: offerInput.contractType,
-			orderbook: orderbookKind,
-			query: {
-				enabled: !marketplaceIsLoading,
-			},
-		});
+	const {
+		data: tokenApproval,
+		isLoading: tokenApprovalIsLoading,
+		isError,
+		error,
+	} = useGetTokenApprovalData({
+		chainId,
+		tokenId: offerInput.offer.tokenId,
+		collectionAddress,
+		currencyAddress: offerInput.offer.currencyAddress,
+		contractType: offerInput.contractType,
+		orderbook: orderbookKind || OrderbookKind.sequence_marketplace_v2,
+	});
 
 	useEffect(() => {
 		if (!tokenApprovalIsLoading) {
@@ -77,5 +65,7 @@ export const useMakeOffer = ({
 		makeOffer,
 		tokenApprovalStepExists: tokenApproval?.step !== null,
 		tokenApprovalIsLoading,
+		isError,
+		error,
 	};
 };

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -28,7 +28,7 @@ export type ExecutionState = 'approval' | 'offer' | null;
 interface UseTransactionStepsArgs {
 	offerInput: OfferInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
@@ -77,6 +77,7 @@ export const useTransactionSteps = ({
 					...offerInput.offer,
 					expiry: new Date(Number(offerInput.offer.expiry) * 1000),
 				},
+				additionalFees: [],
 			});
 
 			return steps;

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

@@ -2,6 +2,7 @@
 
 import { NetworkType } from '@0xsequence/network';
 import { observer, Show } from '@legendapp/state/react';
+import { useState } from 'react';
 import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
@@ -10,6 +11,7 @@ import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
 import { useCollection } from '../../../hooks';
 import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
 import { useCurrency } from '../../../hooks/data/market/useCurrency';
+import { ErrorLogBox } from '../../components/_internals/ErrorLogBox';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -39,6 +41,7 @@ const Modal = observer(() => {
 		chainId,
 		collectionAddress,
 	});
+	const [error, setError] = useState<Error | undefined>(undefined);
 
 	const {
 		data: collection,
@@ -69,7 +72,7 @@ const Modal = observer(() => {
 			selectedFeeOption: selectedFeeOption as FeeOption,
 		});
 
-	const { isLoading, executeApproval, sell } = useSell({
+	const { isLoading, executeApproval, sell, isError } = useSell({
 		collectionAddress,
 		chainId,
 		collectibleId: tokenId,
@@ -94,7 +97,7 @@ const Modal = observer(() => {
 	const modalLoading = collectionLoading || currencyLoading;
 
 	if (
-		(collectionError || order === undefined || currencyError) &&
+		(collectionError || order === undefined || currencyError || isError) &&
 		!modalLoading
 	) {
 		return (
@@ -126,6 +129,13 @@ const Modal = observer(() => {
 		}
 	};
 
+	const handleApproveToken = async () => {
+		await executeApproval().catch((error) => {
+			console.error('Approve TOKEN failed:', error);
+			setError(error as Error);
+		});
+	};
+
 	// if it's testnet, we don't need to show the fee options
 	const sellCtaLabel = isProcessing
 		? isWaaS && !isTestnet
@@ -136,7 +146,7 @@ const Modal = observer(() => {
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
-			onClick: async () => await executeApproval(),
+			onClick: handleApproveToken,
 			hidden: !steps$.approval.exist.get(),
 			pending: steps$.approval.isExecuting.get(),
 			variant: 'glass' as const,
@@ -211,6 +221,14 @@ const Modal = observer(() => {
 					titleOnConfirm="Accepting offer..."
 				/>
 			)}
+
+			{error && (
+				<ErrorLogBox
+					title="An error occurred while selling"
+					message={error.message}
+					error={error}
+				/>
+			)}
 		</ActionModal>
 	);
 });

package/src/react/ui/modals/SellModal/__tests__/Modal.test.tsx

@@ -65,6 +65,8 @@ describe('MakeOfferModal', () => {
 			},
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 
 		// Render the modal

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -1,4 +1,5 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
+import type { Address } from 'viem';
 import { useAccount } from 'wagmi';
 import {
 	type GenerateSellTransactionArgs,
@@ -12,7 +13,7 @@ import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee'
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	marketplace: MarketplaceKind;
 	ordersData: Array<OrderData>;
 }
@@ -29,7 +30,7 @@ export const useGetTokenApprovalData = (
 		collectionAddress: params.collectionAddress,
 	});
 
-	const { data, isLoading, isSuccess } = useQuery({
+	const { data, isLoading, isSuccess, isError, error } = useQuery({
 		queryKey: ['token-approval-data', params.ordersData],
 		queryFn: address
 			? async () => {
@@ -72,5 +73,7 @@ export const useGetTokenApprovalData = (
 		data,
 		isLoading,
 		isSuccess,
+		isError,
+		error,
 	};
 };

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { MarketplaceKind, TransactionSteps } from '../../../../_internal';
 import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
@@ -17,7 +18,7 @@ export type SellOrder = {
 interface UseSellArgs {
 	collectibleId: string;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	marketplace: MarketplaceKind;
 	ordersData: Array<SellOrder>;
 	callbacks?: ModalCallbacks;
@@ -35,13 +36,17 @@ export const useSell = ({
 	closeMainModal,
 	steps$,
 }: UseSellArgs) => {
-	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
-		useGetTokenApprovalData({
-			chainId,
-			collectionAddress,
-			ordersData,
-			marketplace,
-		});
+	const {
+		data: tokenApproval,
+		isLoading: tokenApprovalIsLoading,
+		isError,
+		error,
+	} = useGetTokenApprovalData({
+		chainId,
+		collectionAddress,
+		ordersData,
+		marketplace,
+	});
 
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
@@ -66,5 +71,7 @@ export const useSell = ({
 		sell,
 		tokenApprovalStepExists: tokenApproval?.step !== null,
 		tokenApprovalIsLoading,
+		isError,
+		error,
 	};
 };