@0xsequence/marketplace-sdk 0.4.4 → 0.4.5

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/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,6 +147,13 @@ export const useTransactionSteps = ({
 				hash,
 				orderId,
 				callbacks,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					collectableKeys.lowestListings,
+					collectableKeys.listings,
+					collectableKeys.listingsCount,
+					collectableKeys.userBalances,
+				],
 			});
 
 			if (hash) {
@@ -173,7 +180,6 @@ export const useTransactionSteps = ({
 			if (callbacks?.onError && typeof callbacks.onError === 'function') {
 				callbacks.onError(error as Error);
 			}
-			throw error;
 		}
 	};
 

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

@@ -142,7 +142,7 @@ const Modal = observer(() => {
 				insufficientBalance ||
 				isLoading ||
 				invalidQuantity ||
-				invalidCurrency
+				invalidCurrency,
 		},
 	];
 

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$,

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

@@ -1,24 +1,26 @@
+import type { Observable } from '@legendapp/state';
+import type { Address } from 'viem';
+import { OrderbookKind, Price } from '../../../../../types';
 import {
 	ExecuteType,
-	getMarketplaceClient,
-	Step,
+	type Step,
 	StepType,
-	TransactionSteps,
+	type TransactionSteps,
+	balanceQueries,
+	collectableKeys,
+	getMarketplaceClient,
 } from '../../../../_internal';
-import { useGenerateOfferTransaction } from '../../../../hooks/useGenerateOfferTransaction';
-import { OrderbookKind } from '../../../../../types';
-import { ModalCallbacks } from '../../_internal/types';
 import {
-	OfferInput,
+	type OfferInput,
 	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 { useConfig } from '../../../../hooks';
+import type { SignatureStep } from '../../../../_internal/transaction-machine/utils';
+import { useConfig, useCurrency } from '../../../../hooks';
+import { useGenerateOfferTransaction } from '../../../../hooks/useGenerateOfferTransaction';
 import { useGetReceiptFromHash } from '../../../../hooks/useGetReceiptFromHash';
+import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
+import type { ModalCallbacks } from '../../_internal/types';
 
 export type ExecutionState = 'approval' | 'offer' | null;
 
@@ -54,6 +56,10 @@ export const useTransactionSteps = ({
 				if (!steps) return;
 			},
 		});
+	const { data: currency } = useCurrency({
+		chainId,
+		currencyAddress: offerInput.offer.currencyAddress,
+	});
 
 	const getOfferSteps = async () => {
 		if (!wallet) return;
@@ -80,7 +86,6 @@ export const useTransactionSteps = ({
 			} else {
 				console.debug('onError callback not provided:', error);
 			}
-			throw error;
 		}
 	};
 
@@ -106,7 +111,6 @@ export const useTransactionSteps = ({
 			}
 		} catch (error) {
 			steps$.approval.isExecuting.set(false);
-			throw error;
 		}
 	};
 
@@ -150,6 +154,17 @@ export const useTransactionSteps = ({
 				hash,
 				orderId,
 				callbacks,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					collectableKeys.highestOffers,
+					collectableKeys.offers,
+					collectableKeys.offersCount,
+					collectableKeys.userBalances,
+				],
+				price: {
+					amountRaw: offerInput.offer.pricePerToken,
+					currency,
+				} as Price,
 			});
 
 			if (hash) {
@@ -178,7 +193,6 @@ export const useTransactionSteps = ({
 			if (callbacks?.onError && typeof callbacks.onError === 'function') {
 				callbacks.onError(error as Error);
 			}
-			throw error;
 		}
 	};
 

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

@@ -1,4 +1,6 @@
 import {
+	balanceQueries,
+	collectableKeys,
 	ExecuteType,
 	getMarketplaceClient,
 	MarketplaceKind,
@@ -85,7 +87,6 @@ export const useTransactionSteps = ({
 			} else {
 				console.debug('onError callback not provided:', error);
 			}
-			throw error;
 		}
 	};
 
@@ -111,7 +112,6 @@ export const useTransactionSteps = ({
 			}
 		} catch (error) {
 			steps$.approval.isExecuting.set(false);
-			throw error;
 		}
 	};
 
@@ -153,6 +153,7 @@ export const useTransactionSteps = ({
 				hash,
 				orderId,
 				callbacks,
+				queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances],
 			});
 
 			if (hash) {
@@ -180,8 +181,6 @@ export const useTransactionSteps = ({
 			if (callbacks?.onError && typeof callbacks.onError === 'function') {
 				callbacks.onError(error as Error);
 			}
-
-			throw error;
 		}
 	};
 

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

@@ -1,8 +1,7 @@
-import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import { ContractType } from '../../../../../../types';
 import { InvalidContractTypeError } from '../../../../../../utils/_internal/error/transaction';
-import { balanceQueries } from '../../../../../_internal';
+import { balanceQueries, collectableKeys } from '../../../../../_internal';
 import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 import { useTransferTokens } from '../../../../../hooks';
 import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
@@ -21,6 +20,28 @@ const useHandleTransfer = () => {
 	const { transferTokensAsync } = useTransferTokens();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 
+	const getHash = async () => {
+		if (collectionType === ContractType.ERC721) {
+			return await transferTokensAsync({
+				receiverAddress: receiverAddress as Hex,
+				collectionAddress,
+				tokenId: collectibleId,
+				chainId,
+				contractType: ContractType.ERC721,
+			});
+		}
+
+		// For ERC1155
+		return await transferTokensAsync({
+			receiverAddress: receiverAddress as Hex,
+			collectionAddress,
+			tokenId: collectibleId,
+			chainId,
+			contractType: ContractType.ERC1155,
+			quantity: String(quantity),
+		});
+	};
+
 	async function transfer() {
 		if (
 			collectionType !== ContractType.ERC721 &&
@@ -29,61 +50,24 @@ const useHandleTransfer = () => {
 			throw new InvalidContractTypeError(collectionType);
 		}
 
-		if (collectionType === ContractType.ERC721) {
-			try {
-				const hash = await transferTokensAsync({
-					receiverAddress: receiverAddress as Hex,
-					collectionAddress,
-					tokenId: collectibleId,
-					chainId,
-					contractType: ContractType.ERC721,
-				});
-
-				transferModal$.close();
-
-				showTransactionStatusModal({
-					hash: hash,
-					collectionAddress,
-					chainId,
-					collectibleId,
-					price: undefined,
-					type: TransactionType.TRANSFER,
-					queriesToInvalidate: balanceQueries.all as unknown as QueryKey[],
-				});
-			} catch (error) {
-				transferModal$.view.set('enterReceiverAddress');
-
-				callbacks?.onError?.(error as Error);
-			}
-		}
-
-		if (collectionType === ContractType.ERC1155) {
-			try {
-				const hash = await transferTokensAsync({
-					receiverAddress: receiverAddress as Hex,
-					collectionAddress,
-					tokenId: collectibleId,
-					chainId,
-					contractType: ContractType.ERC1155,
-					quantity: String(quantity),
-				});
+		try {
+			const hash = await getHash();
 
-				transferModal$.close();
+			transferModal$.close();
 
-				showTransactionStatusModal({
-					hash: hash,
-					collectionAddress,
-					chainId,
-					collectibleId,
-					price: undefined,
-					type: TransactionType.TRANSFER,
-					queriesToInvalidate: balanceQueries.all as unknown as QueryKey[],
-				});
-			} catch (error) {
-				transferModal$.view.set('enterReceiverAddress');
+			showTransactionStatusModal({
+				hash: hash,
+				collectionAddress,
+				chainId,
+				collectibleId,
+				price: undefined,
+				type: TransactionType.TRANSFER,
+				queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances],
+			});
+		} catch (error) {
+			transferModal$.view.set('enterReceiverAddress');
 
-				callbacks?.onError?.(error as Error);
-			}
+			callbacks?.onError?.(error as Error);
 		}
 	}