@0xsequence/marketplace-sdk 0.4.3 → 0.4.5

package/src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts

@@ -2,8 +2,11 @@ import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
 import type { Hash, Hex } from 'viem';
 import type { ModalCallbacks } from '../../_internal/types';
 import {
+	balanceQueries,
 	type CheckoutOptions,
+	collectableKeys,
 	getMarketplaceClient,
+	getQueryClient,
 	type MarketplaceKind,
 	WalletKind,
 } from '../../../../_internal';
@@ -11,6 +14,7 @@ import { buyModal$ } from '../store';
 import { useFees } from './useFees';
 import { useConfig } from '../../../../hooks';
 import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
+import { QueryKey } from '@tanstack/react-query';
 
 interface UseBuyCollectableProps {
 	chainId: string;
@@ -18,6 +22,8 @@ interface UseBuyCollectableProps {
 	tokenId: string;
 	callbacks?: ModalCallbacks;
 	priceCurrencyAddress: string;
+	setCheckoutModalIsLoading: (isLoading: boolean) => void;
+	setCheckoutModalLoaded: (isLoaded: boolean) => void;
 }
 
 type BuyCollectableReturn =
@@ -42,6 +48,8 @@ export const useBuyCollectable = ({
 	tokenId,
 	callbacks,
 	priceCurrencyAddress,
+	setCheckoutModalIsLoading,
+	setCheckoutModalLoaded,
 }: UseBuyCollectableProps): BuyCollectableReturn => {
 	const { openSelectPaymentModal } = useSelectPaymentModal();
 	const config = useConfig();
@@ -57,6 +65,13 @@ export const useBuyCollectable = ({
 		return { status: 'error', buy: null, isLoading, isError: true };
 	}
 
+	const invalidateQueries = async (queriesToInvalidate: QueryKey[]) => {
+		const queryClient = getQueryClient();
+		for (const queryKey of queriesToInvalidate) {
+			await queryClient.invalidateQueries({ queryKey });
+		}
+	};
+
 	return {
 		status: 'ready',
 		isLoading,
@@ -76,6 +91,10 @@ export const useBuyCollectable = ({
 				walletType: WalletKind.unknown,
 			});
 
+			// these states are necessary to manage appearance of the quantity modal
+			setCheckoutModalLoaded(true);
+			setCheckoutModalIsLoading(false);
+
 			const step = steps[0];
 
 			openSelectPaymentModal({
@@ -96,10 +115,18 @@ export const useBuyCollectable = ({
 				enableMainCurrencyPayment: true,
 				enableSwapPayments: !!input.checkoutOptions.swap,
 				creditCardProviders: input.checkoutOptions.nftCheckout || [],
-				onSuccess: (hash: string) => callbacks?.onSuccess?.(hash as Hash),
+				onSuccess: (hash: string) => {
+					invalidateQueries([
+						collectableKeys.listings,
+						collectableKeys.listingsCount,
+						collectableKeys.lists,
+						collectableKeys.userBalances,
+						balanceQueries.all,
+					]);
+					callbacks?.onSuccess?.({ hash: hash as Hash });
+				},
 				onError: callbacks?.onError,
 				onClose: () => {
-					console.log('onClose');
 					buyModal$.close();
 				},
 			});

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

@@ -17,9 +17,6 @@ interface ERC1155QuantityModalProps extends CheckoutModalProps {
 
 export const ERC1155QuantityModal = observer(
 	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
-		buyModal$.state.quantity.set(
-			Math.min(Number(order.quantityRemaining), 1).toString(),
-		);
 		const currencyOptions = useCurrencyOptions({
 			collectionAddress: order.collectionContractAddress as Address,
 		});
@@ -36,6 +33,10 @@ export const ERC1155QuantityModal = observer(
 		const pricePerToken = order.priceAmount;
 		const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
 
+		if (buyModal$.state.checkoutModalLoaded.get()) {
+			return null;
+		}
+
 		return (
 			<ActionModal
 				isOpen={buyModal$.isOpen.get()}
@@ -46,6 +47,8 @@ export const ERC1155QuantityModal = observer(
 					{
 						label: 'Buy now',
 						onClick: () => {
+							buyModal$.state.checkoutModalIsLoading.set(true);
+
 							buy({
 								quantity: parseUnits(
 									buyModal$.state.quantity.get(),
@@ -56,6 +59,8 @@ export const ERC1155QuantityModal = observer(
 								marketplace: order.marketplace,
 							});
 						},
+						disabled: buyModal$.state.checkoutModalIsLoading.get(),
+						pending: buyModal$.state.checkoutModalIsLoading.get(),
 					},
 				]}
 			>

package/src/react/ui/modals/BuyModal/store.ts

@@ -17,7 +17,11 @@ export interface BuyModalState {
 		quantity: string;
 		modalId: number;
 		invalidQuantity: boolean;
+		checkoutModalIsLoading: boolean;
+		checkoutModalLoaded: boolean;
 	};
+	setCheckoutModalIsLoading: (isLoading: boolean) => void;
+	setCheckoutModalLoaded: (isLoaded: boolean) => void;
 	callbacks?: ModalCallbacks;
 }
 
@@ -36,6 +40,8 @@ export const initialState: BuyModalState = {
 			order: args.order,
 			modalId: buyModal$.state.modalId.get() + 1,
 			invalidQuantity: false,
+			checkoutModalIsLoading: false,
+			checkoutModalLoaded: false,
 		});
 		buyModal$.callbacks.set(callbacks || defaultCallbacks);
 		buyModal$.isOpen.set(true);
@@ -48,6 +54,14 @@ export const initialState: BuyModalState = {
 		quantity: '1',
 		modalId: 0,
 		invalidQuantity: false,
+		checkoutModalIsLoading: false,
+		checkoutModalLoaded: false,
+	},
+	setCheckoutModalIsLoading: (isLoading: boolean) => {
+		buyModal$.state.checkoutModalIsLoading.set(isLoading);
+	},
+	setCheckoutModalLoaded: (isLoaded: boolean) => {
+		buyModal$.state.checkoutModalLoaded.set(isLoaded);
 	},
 	callbacks: undefined,
 };

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

@@ -159,7 +159,7 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$listingPrice={createListingModal$.listingPrice}
+					$price={createListingModal$.listingPrice}
 				/>
 
 				{listingPrice.amountRaw !== '0' && (

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

@@ -1,9 +1,10 @@
+import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
-import { Observable } from '@legendapp/state';
+import { OrderbookKind, type TransactionSteps } from '../../../../_internal';
+import type { ListingInput } from '../../../../_internal/transaction-machine/execute-transaction';
+import { useMarketplaceConfig } from '../../../../hooks';
+import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
-import { ListingInput } from '../../../../_internal/transaction-machine/execute-transaction';
-import { OrderbookKind, TransactionSteps } from '../../../../_internal';
-import { ModalCallbacks } from '../../_internal/types';
 import { useTransactionSteps } from './useTransactionSteps';
 
 interface UseCreateListingArgs {
@@ -20,11 +21,23 @@ export const useCreateListing = ({
 	listingInput,
 	chainId,
 	collectionAddress,
-	orderbookKind = OrderbookKind.sequence_marketplace_v2,
+	orderbookKind,
 	steps$,
 	callbacks,
 	closeMainModal,
 }: UseCreateListingArgs) => {
+	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
+		useMarketplaceConfig();
+
+	const collectionConfig = marketplaceConfig?.collections.find(
+		(c) => c.collectionAddress === collectionAddress,
+	);
+
+	orderbookKind =
+		orderbookKind ??
+		collectionConfig?.destinationMarketplace ??
+		OrderbookKind.sequence_marketplace_v2;
+
 	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
 		useGetTokenApprovalData({
 			chainId,
@@ -33,6 +46,9 @@ export const useCreateListing = ({
 			currencyAddress: listingInput.listing.currencyAddress,
 			contractType: listingInput.contractType,
 			orderbook: orderbookKind,
+			query: {
+				enabled: !marketplaceIsLoading,
+			},
 		});
 
 	useEffect(() => {

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -1,15 +1,16 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
+import { useConfig } from '../../../..';
+import { dateToUnixTime } from '../../../../../utils/date';
 import {
 	type ContractType,
 	type CreateReq,
 	type GenerateListingTransactionArgs,
-	getMarketplaceClient,
 	type OrderbookKind,
+	type QueryArg,
 	StepType,
+	getMarketplaceClient,
 } from '../../../../_internal';
-import { useConfig } from '../../../..';
-import { dateToUnixTime } from '../../../../../utils/date';
 import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
-import { useQuery } from '@tanstack/react-query';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: string;
@@ -18,6 +19,7 @@ export interface UseGetTokenApprovalDataArgs {
 	currencyAddress: string;
 	contractType: ContractType;
 	orderbook: OrderbookKind;
+	query?: QueryArg;
 }
 
 const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
@@ -37,34 +39,38 @@ export const useGetTokenApprovalData = (
 		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
 	} satisfies CreateReq;
 
+	const isEnabled = wallet && params.query?.enabled !== false;
+
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params.currencyAddress],
-		queryFn: async () => {
-			const args = {
-				collectionAddress: params.collectionAddress,
-				owner: await wallet!.address(),
-				walletType: wallet!.walletKind,
-				contractType: params.contractType,
-				orderbook: params.orderbook,
-				listing,
-			} satisfies GenerateListingTransactionArgs;
-			const steps = await marketplaceClient
-				.generateListingTransaction(args)
-				.then((resp) => resp.steps);
+		queryFn: isEnabled
+			? async () => {
+					const args = {
+						collectionAddress: params.collectionAddress,
+						owner: await wallet.address(),
+						walletType: wallet.walletKind,
+						contractType: params.contractType,
+						orderbook: params.orderbook,
+						listing,
+					} satisfies GenerateListingTransactionArgs;
+					const steps = await marketplaceClient
+						.generateListingTransaction(args)
+						.then((resp) => resp.steps);
 
-			const tokenApprovalStep = steps.find(
-				(step) => step.id === StepType.tokenApproval,
-			);
-			if (!tokenApprovalStep) {
-				return {
-					step: null,
-				};
-			}
+					const tokenApprovalStep = steps.find(
+						(step) => step.id === StepType.tokenApproval,
+					);
+					if (!tokenApprovalStep) {
+						return {
+							step: null,
+						};
+					}
 
-			return {
-				step: tokenApprovalStep,
-			};
-		},
+					return {
+						step: tokenApprovalStep,
+					};
+				}
+			: skipToken,
 	});
 
 	return {

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

@@ -1,29 +1,31 @@
+import type { Observable } from '@legendapp/state';
+import type { Address } from 'viem';
+import type { OrderbookKind } from '../../../../../types';
 import {
 	ExecuteType,
-	getMarketplaceClient,
-	Step,
+	type Step,
 	StepType,
-	TransactionSteps,
+	type TransactionSteps,
+	balanceQueries,
+	collectableKeys,
+	getMarketplaceClient,
 } from '../../../../_internal';
-import { OrderbookKind } from '../../../../../types';
-import { ModalCallbacks } from '../../_internal/types';
 import {
-	ListingInput,
+	type ListingInput,
 	TransactionType,
 } from '../../../../_internal/transaction-machine/execute-transaction';
-import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
-import { Address } from 'viem';
-import { Observable } from '@legendapp/state';
 import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
-import { SignatureStep } from '../../../../_internal/transaction-machine/utils';
+import type { SignatureStep } from '../../../../_internal/transaction-machine/utils';
 import { useConfig, useGenerateListingTransaction } from '../../../../hooks';
 import { useGetReceiptFromHash } from '../../../../hooks/useGetReceiptFromHash';
+import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
+import type { ModalCallbacks } from '../../_internal/types';
 
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: string;
 	collectionAddress: string;
-	orderbookKind?: OrderbookKind;
+	orderbookKind: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
 	steps$: Observable<TransactionSteps>;
@@ -33,7 +35,7 @@ export const useTransactionSteps = ({
 	listingInput,
 	chainId,
 	collectionAddress,
-	orderbookKind = OrderbookKind.sequence_marketplace_v2,
+	orderbookKind,
 	callbacks,
 	closeMainModal,
 	steps$,
@@ -77,7 +79,6 @@ export const useTransactionSteps = ({
 			} else {
 				console.debug('onError callback not provided:', error);
 			}
-			throw error;
 		}
 	};
 
@@ -103,7 +104,6 @@ export const useTransactionSteps = ({
 			}
 		} catch (error) {
 			steps$.approval.isExecuting.set(false);
-			throw error;
 		}
 	};
 
@@ -147,12 +147,39 @@ export const useTransactionSteps = ({
 				hash,
 				orderId,
 				callbacks,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					collectableKeys.lowestListings,
+					collectableKeys.listings,
+					collectableKeys.listingsCount,
+					collectableKeys.userBalances,
+				],
 			});
 
-			steps$.transaction.isExecuting.set(false);
+			if (hash) {
+				await waitForReceipt(hash);
+
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+				if (callbacks?.onSuccess && typeof callbacks.onSuccess === 'function') {
+					callbacks.onSuccess({ hash });
+				}
+			}
+
+			if (orderId) {
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+
+				if (callbacks?.onSuccess && typeof callbacks.onSuccess === 'function') {
+					callbacks.onSuccess({ orderId });
+				}
+			}
 		} catch (error) {
 			steps$.transaction.isExecuting.set(false);
-			throw error;
+			steps$.transaction.exist.set(false);
+			if (callbacks?.onError && typeof callbacks.onError === 'function') {
+				callbacks.onError(error as Error);
+			}
 		}
 	};
 

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

@@ -1,9 +1,14 @@
-import { Show, observer } from '@legendapp/state/react';
+import { Show, observer, use$ } from '@legendapp/state/react';
 import { useState } from 'react';
-import { parseUnits } from 'viem';
+import { parseUnits, zeroAddress } from 'viem';
 import { dateToUnixTime } from '../../../../utils/date';
-import { ContractType } from '../../../_internal';
-import { useCollectible, useCollection } from '../../../hooks';
+import { ContractType, OrderbookKind } from '../../../_internal';
+import {
+	useCollectible,
+	useCollection,
+	useCurrencies,
+	useCurrencyOptions,
+} from '../../../hooks';
 import { useMakeOffer } from './hooks/useMakeOffer';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
@@ -14,6 +19,7 @@ import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import TokenPreview from '../_internal/components/tokenPreview';
 import { makeOfferModal$ } from './store';
+import { Box } from '@0xsequence/design-system';
 
 export const MakeOfferModal = () => {
 	return <Show if={makeOfferModal$.isOpen}>{() => <Modal />}</Show>;
@@ -51,6 +57,18 @@ const Modal = observer(() => {
 		chainId,
 		collectionAddress,
 	});
+	const currencyOptions = useCurrencyOptions({ collectionAddress });
+	const {
+		data: currencies,
+		isLoading: currenciesLoading,
+		isError: currenciesIsError,
+	} = useCurrencies({
+		chainId,
+		currencyOptions,
+	});
+
+	const selectedCurrency = use$(makeOfferModal$.offerPrice.currency);
+
 	const { isLoading, executeApproval, makeOffer } = useMakeOffer({
 		offerInput: {
 			contractType: collection?.type as ContractType,
@@ -73,7 +91,7 @@ const Modal = observer(() => {
 		steps$: steps$,
 	});
 
-	if (collectableIsLoading || collectionIsLoading) {
+	if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
 		return (
 			<LoadingModal
 				isOpen={makeOfferModal$.isOpen.get()}
@@ -84,7 +102,7 @@ const Modal = observer(() => {
 		);
 	}
 
-	if (collectableIsError || collectionIsError) {
+	if (collectableIsError || collectionIsError || currenciesIsError) {
 		return (
 			<ErrorModal
 				isOpen={makeOfferModal$.isOpen.get()}
@@ -95,6 +113,10 @@ const Modal = observer(() => {
 		);
 	}
 
+	const invalidCurrency =
+		selectedCurrency?.contractAddress === zeroAddress &&
+		orderbookKind !== OrderbookKind.sequence_marketplace_v2;
+
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
@@ -120,10 +142,15 @@ const Modal = observer(() => {
 				insufficientBalance ||
 				isLoading ||
 				invalidQuantity ||
-				offerPrice.amountRaw === '0',
+				invalidCurrency,
 		},
 	];
 
+	const secondCurrencyAsDefault =
+		orderbookKind !== OrderbookKind.sequence_marketplace_v2 &&
+		currencies &&
+		currencies[0]?.contractAddress === zeroAddress;
+
 	return (
 		<>
 			<ActionModal
@@ -143,8 +170,9 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$listingPrice={makeOfferModal$.offerPrice}
+					$price={makeOfferModal$.offerPrice}
 					onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+					secondCurrencyAsDefault={secondCurrencyAsDefault}
 					checkBalance={{
 						enabled: true,
 						callback: (state) => setInsufficientBalance(state),
@@ -170,8 +198,14 @@ const Modal = observer(() => {
 							price={offerPrice}
 						/>
 					)}
-
 				<ExpirationDateSelect $date={makeOfferModal$.expiry} />
+
+				{invalidCurrency && (
+					<Box color="negative" fontSize="small">
+						Native currency offers are not supported on this marketplace. Please
+						select another currency to continue
+					</Box>
+				)}
 			</ActionModal>
 		</>
 	);

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

@@ -1,15 +1,16 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
+import { dateToUnixTime } from '../../../../../utils/date';
 import {
 	type ContractType,
 	type CreateReq,
-	GenerateOfferTransactionArgs,
-	getMarketplaceClient,
+	type GenerateOfferTransactionArgs,
 	type OrderbookKind,
+	type QueryArg,
 	StepType,
+	getMarketplaceClient,
 } from '../../../../_internal';
-import { useQuery } from '@tanstack/react-query';
 import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';
-import { dateToUnixTime } from '../../../../../utils/date';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: string;
@@ -18,6 +19,7 @@ export interface UseGetTokenApprovalDataArgs {
 	currencyAddress: string;
 	contractType: ContractType;
 	orderbook: OrderbookKind;
+	query?: QueryArg;
 }
 
 const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
@@ -37,34 +39,38 @@ export const useGetTokenApprovalData = (
 		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
 	} satisfies CreateReq;
 
+	const isEnabled = wallet && params.query?.enabled !== false;
+
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params.currencyAddress],
-		queryFn: async () => {
-			const args = {
-				collectionAddress: params.collectionAddress,
-				maker: await wallet!.address(),
-				walletType: wallet!.walletKind,
-				contractType: params.contractType,
-				orderbook: params.orderbook,
-				offer,
-			} satisfies GenerateOfferTransactionArgs;
-			const steps = await marketplaceClient
-				.generateOfferTransaction(args)
-				.then((resp) => resp.steps);
+		queryFn: isEnabled
+			? async () => {
+					const args = {
+						collectionAddress: params.collectionAddress,
+						maker: await wallet.address(),
+						walletType: wallet.walletKind,
+						contractType: params.contractType,
+						orderbook: params.orderbook,
+						offer,
+					} satisfies GenerateOfferTransactionArgs;
+					const steps = await marketplaceClient
+						.generateOfferTransaction(args)
+						.then((resp) => resp.steps);
 
-			const tokenApprovalStep = steps.find(
-				(step) => step.id === StepType.tokenApproval,
-			);
-			if (!tokenApprovalStep) {
-				return {
-					step: null,
-				};
-			}
+					const tokenApprovalStep = steps.find(
+						(step) => step.id === StepType.tokenApproval,
+					);
+					if (!tokenApprovalStep) {
+						return {
+							step: null,
+						};
+					}
 
-			return {
-				step: tokenApprovalStep,
-			};
-		},
+					return {
+						step: tokenApprovalStep,
+					};
+				}
+			: skipToken,
 		enabled: !!wallet && !!params.collectionAddress && !!params.currencyAddress,
 	});
 

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

@@ -1,17 +1,17 @@
-import { Observable } from '@legendapp/state';
-import { OrderbookKind } from '../../../../../types';
-import { OfferInput } from '../../../../_internal/transaction-machine/execute-transaction';
-import { ModalCallbacks } from '../../_internal/types';
+import type { Observable } from '@legendapp/state';
+import { useEffect } from 'react';
+import type { OrderbookKind } from '../../../../../types';
+import type { TransactionSteps } from '../../../../_internal';
+import type { OfferInput } from '../../../../_internal/transaction-machine/execute-transaction';
+import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
 import { useTransactionSteps } from './useTransactionSteps';
-import { useEffect } from 'react';
-import { TransactionSteps } from '../../../../_internal';
 
 interface UseMakeOfferArgs {
 	offerInput: OfferInput;
 	chainId: string;
 	collectionAddress: string;
-	orderbookKind?: OrderbookKind;
+	orderbookKind: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
 	steps$: Observable<TransactionSteps>;
@@ -21,7 +21,7 @@ export const useMakeOffer = ({
 	offerInput,
 	chainId,
 	collectionAddress,
-	orderbookKind = OrderbookKind.sequence_marketplace_v2,
+	orderbookKind,
 	callbacks,
 	closeMainModal,
 	steps$,