@0xsequence/marketplace-sdk 1.1.1 → 1.2.1

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

@@ -0,0 +1,257 @@
+import type { SelectPaymentSettings } from '@0xsequence/checkout';
+import { skipToken, useQuery } from '@tanstack/react-query';
+import {
+	type Address,
+	encodeFunctionData,
+	type Hash,
+	type Hex,
+	toHex,
+} from 'viem';
+import { useAccount } from 'wagmi';
+import { ContractType } from '../../../../../types';
+import { BuyModalErrorFactory } from '../../../../../types/buyModalErrors';
+import {
+	getQueryClient,
+	type TransactionOnRampProvider,
+} from '../../../../_internal';
+import { useSalesContractABI } from '../../../../hooks/contracts/useSalesContractABI';
+import type { ActionButton, ModalCallbacks } from '../../_internal/types';
+import {
+	buyModalStore,
+	useBuyAnalyticsId,
+	useBuyModalProps,
+	useOnError,
+	useOnSuccess,
+	useQuantity,
+} from '../store';
+
+interface ERC1155MintArgs {
+	to: Address;
+	tokenIds: bigint[];
+	amounts: bigint[];
+	data: Hex;
+	paymentToken: Address;
+	maxTotal: bigint;
+	proof: Hex[];
+	abi: readonly unknown[];
+}
+
+const DEFAULT_PROOF = [toHex(0, { size: 32 })] as Hex[];
+
+const encodeERC1155MintData = ({
+	to,
+	tokenIds,
+	amounts,
+	data = '0x' as Hex,
+	paymentToken,
+	maxTotal,
+	proof = DEFAULT_PROOF,
+	abi,
+}: ERC1155MintArgs): Hex => {
+	return encodeFunctionData({
+		abi,
+		functionName: 'mint',
+		args: [to, tokenIds, amounts, data, paymentToken, maxTotal, proof],
+	});
+};
+
+interface GetERC1155SalePaymentParams {
+	chainId: number;
+	address: Address;
+	salesContractAddress: string;
+	collectionAddress: string;
+	tokenId: string;
+	quantity: number;
+	price: bigint;
+	currencyAddress: string;
+	callbacks: ModalCallbacks | undefined;
+	customCreditCardProviderCallback: ((price: string) => void) | undefined;
+	skipNativeBalanceCheck: boolean | undefined;
+	nativeTokenAddress: string | undefined;
+	checkoutProvider?: string;
+	successActionButtons?: ActionButton[];
+	onRampProvider: TransactionOnRampProvider | undefined;
+	saleAnalyticsId: string | undefined;
+	abi: readonly unknown[];
+}
+
+export const getERC1155SalePaymentParams = async ({
+	chainId,
+	address,
+	salesContractAddress,
+	collectionAddress,
+	tokenId,
+	quantity,
+	price,
+	currencyAddress,
+	callbacks,
+	customCreditCardProviderCallback,
+	skipNativeBalanceCheck,
+	nativeTokenAddress,
+	checkoutProvider,
+	successActionButtons,
+	onRampProvider,
+	saleAnalyticsId,
+	abi,
+}: GetERC1155SalePaymentParams) => {
+	try {
+		const totalPrice = price * BigInt(quantity);
+		const tokenIdBigInt = BigInt(tokenId);
+
+		const purchaseTransactionData = encodeERC1155MintData({
+			to: address,
+			tokenIds: [tokenIdBigInt],
+			amounts: [BigInt(quantity)],
+			data: '0x' as Hex,
+			paymentToken: currencyAddress as Address,
+			maxTotal: totalPrice,
+			proof: DEFAULT_PROOF,
+			abi,
+		});
+
+		const creditCardProviders = customCreditCardProviderCallback
+			? ['custom']
+			: checkoutProvider
+				? [checkoutProvider]
+				: [];
+
+		return {
+			chain: chainId,
+			collectibles: [
+				{
+					quantity: quantity.toString(),
+					decimals: 0,
+					tokenId: tokenId,
+				},
+			],
+			currencyAddress,
+			price: price.toString(),
+			targetContractAddress: salesContractAddress,
+			txData: purchaseTransactionData,
+			collectionAddress,
+			recipientAddress: address,
+			creditCardProviders,
+			onSuccess: (txHash?: string) => {
+				if (txHash) {
+					callbacks?.onSuccess?.({ hash: txHash as Hash });
+				}
+			},
+			onError: callbacks?.onError,
+			onClose: () => {
+				const queryClient = getQueryClient();
+				queryClient.invalidateQueries({
+					predicate: (query) => !query.meta?.persistent,
+				});
+				buyModalStore.send({ type: 'close' });
+			},
+			skipNativeBalanceCheck,
+			supplementaryAnalyticsInfo: {
+				marketplaceType: 'shop',
+				...(saleAnalyticsId && { saleAnalyticsId }),
+			},
+			nativeTokenAddress,
+			...(customCreditCardProviderCallback && {
+				customProviderCallback: () => {
+					customCreditCardProviderCallback(price.toString());
+					buyModalStore.send({ type: 'close' });
+				},
+			}),
+			successActionButtons,
+			onRampProvider,
+		} satisfies SelectPaymentSettings;
+	} catch (error) {
+		// Convert to structured error for better debugging
+		throw BuyModalErrorFactory.priceCalculation(
+			'ERC1155 payment params calculation',
+			[price.toString(), quantity.toString(), tokenId],
+			error instanceof Error ? error.message : 'Unknown error',
+		);
+	}
+};
+
+interface UseERC1155SalePaymentParams {
+	salesContractAddress: string | undefined;
+	collectionAddress: string | undefined;
+	tokenId: string | undefined;
+	price: string | undefined;
+	currencyAddress: string | undefined;
+	enabled?: boolean;
+	checkoutProvider?: string;
+	chainId: number;
+}
+
+export const useERC1155SalePaymentParams = (
+	args: UseERC1155SalePaymentParams,
+) => {
+	const {
+		salesContractAddress,
+		collectionAddress,
+		tokenId,
+		price,
+		currencyAddress,
+		enabled = true,
+		checkoutProvider,
+		chainId,
+	} = args;
+
+	const { address } = useAccount();
+	const quantity = useQuantity();
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+	const buyModalProps = useBuyModalProps();
+	const saleAnalyticsId = useBuyAnalyticsId();
+
+	const {
+		abi,
+		isLoading: isABILoading,
+		version,
+	} = useSalesContractABI({
+		contractAddress: salesContractAddress as Address,
+		contractType: ContractType.ERC1155,
+		chainId,
+		enabled: enabled && !!salesContractAddress,
+	});
+
+	const queryEnabled =
+		enabled &&
+		!!address &&
+		!!salesContractAddress &&
+		!!collectionAddress &&
+		!!tokenId &&
+		price !== undefined &&
+		!!currencyAddress &&
+		!!quantity &&
+		!!abi &&
+		!isABILoading;
+
+	return useQuery({
+		queryKey: ['erc1155SalePaymentParams', args, quantity, version],
+		queryFn:
+			queryEnabled && abi
+				? () =>
+						getERC1155SalePaymentParams({
+							chainId,
+							address,
+							salesContractAddress,
+							collectionAddress,
+							tokenId,
+							quantity,
+							price: BigInt(price!),
+							currencyAddress,
+							callbacks: {
+								onSuccess,
+								onError,
+							},
+							customCreditCardProviderCallback: undefined, // Can be added as a prop if needed
+							skipNativeBalanceCheck: false, // Can be added as a prop if needed
+							nativeTokenAddress: undefined, // Can be added as a prop if needed
+							checkoutProvider,
+							successActionButtons: buyModalProps.successActionButtons,
+							onRampProvider: buyModalProps.onRampProvider,
+							saleAnalyticsId,
+							abi,
+						})
+				: skipToken,
+		enabled: queryEnabled,
+	});
+};

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

@@ -8,7 +8,6 @@ import {
 	type AdditionalFee,
 	getMarketplaceClient,
 	getQueryClient,
-	getSequenceApiClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
@@ -100,23 +99,6 @@ export const getBuyCollectableParams = async ({
 		? ['custom']
 		: checkoutOptions.nftCheckout || [];
 
-	const isTransakSupported = creditCardProviders.includes('transak');
-
-	let transakContractId: string | undefined;
-
-	if (isTransakSupported) {
-		const sequenceApiClient = getSequenceApiClient(config);
-		const transakContractIdResponse =
-			await sequenceApiClient.checkoutOptionsGetTransakContractID({
-				chainId,
-				contractAddress: buyStep.to,
-			});
-
-		if (transakContractIdResponse.contractId !== '') {
-			transakContractId = transakContractIdResponse.contractId;
-		}
-	}
-
 	return {
 		chain: chainId,
 		collectibles: [
@@ -161,11 +143,6 @@ export const getBuyCollectableParams = async ({
 				buyModalStore.send({ type: 'close' });
 			},
 		}),
-		...(transakContractId && {
-			transakConfig: {
-				contractId: transakContractId,
-			},
-		}),
 		onRampProvider,
 		successActionButtons: callbacks?.successActionButtons,
 	} satisfies SelectPaymentSettings;

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

@@ -16,6 +16,7 @@ import {
 	useMarketplaceConfig,
 } from '../../../hooks';
 import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
+import { useRoyalty } from '../../../hooks/utils/useRoyalty';
 import { ErrorLogBox } from '../../components/_internals/ErrorLogBox';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
@@ -100,10 +101,21 @@ const Modal = observer(() => {
 		isError: currenciesIsError,
 	} = useMarketCurrencies({
 		chainId,
+		collectionAddress,
 		includeNativeCurrency: false,
 	});
+
+	const { data: royalty, isLoading: royaltyLoading } = useRoyalty({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
 	const modalLoading =
-		collectableIsLoading || collectionIsLoading || currenciesLoading;
+		collectableIsLoading ||
+		collectionIsLoading ||
+		currenciesLoading ||
+		royaltyLoading;
 
 	const {
 		isLoading,
@@ -159,7 +171,12 @@ const Modal = observer(() => {
 		);
 	}
 
-	if (!modalLoading && (!currencies || currencies.length === 0)) {
+	const shouldShowNoERC20Error =
+		!currenciesLoading &&
+		!currenciesIsError &&
+		(!currencies || currencies.length === 0);
+
+	if (shouldShowNoERC20Error) {
 		return (
 			<ErrorModal
 				isOpen={makeOfferModal$.isOpen.get()}
@@ -280,6 +297,9 @@ const Modal = observer(() => {
 				orderbookKind={orderbookKind}
 				modalType="offer"
 				disabled={shouldHideOfferButton}
+				feeData={{
+					royaltyPercentage: royalty ? Number(royalty.percentage) : 0,
+				}}
 			/>
 
 			{collection?.type === ContractType.ERC1155 && (

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

@@ -31,6 +31,8 @@ const mockCurrency = {
 	nativeCurrency: false,
 	createdAt: new Date().toISOString(),
 	updatedAt: new Date().toISOString(),
+	openseaListing: true,
+	openseaOffer: true,
 };
 
 describe('MakeOfferModal', () => {

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

@@ -6,6 +6,7 @@ import {
 	type CreateReq,
 	type GenerateOfferTransactionArgs,
 	getMarketplaceClient,
+	OfferType,
 	type OrderbookKind,
 	type QueryArg,
 	StepType,
@@ -55,6 +56,7 @@ export const useGetTokenApprovalData = (
 						orderbook: params.orderbook,
 						offer,
 						additionalFees: [],
+						offerType: OfferType.item,
 					} satisfies GenerateOfferTransactionArgs;
 					const steps = await marketplaceClient
 						.generateOfferTransaction(args)

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

@@ -6,6 +6,7 @@ import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenc
 import {
 	balanceQueries,
 	collectableKeys,
+	OfferType,
 	StepType,
 	type TransactionSteps,
 } from '../../../../_internal';
@@ -78,6 +79,7 @@ export const useTransactionSteps = ({
 					expiry: new Date(Number(offerInput.offer.expiry) * 1000),
 				},
 				additionalFees: [],
+				offerType: OfferType.item,
 			});
 
 			return steps;

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

@@ -57,7 +57,7 @@ const EnterWalletAddressView = () => {
 		query: { enabled: !!connectedAddress },
 	});
 
-	const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
+	const balanceAmount = tokenBalance?.pages[0]?.balances[0]?.balance;
 
 	let insufficientBalance = true;
 	if (balanceAmount !== undefined && quantity) {

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

@@ -2,9 +2,14 @@
 
 import { Modal } from '@0xsequence/design-system';
 import type { Address } from 'viem';
+import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
 import type { CollectionType } from '../../../_internal';
-import { useConnectorMetadata, useEnsureCorrectChain } from '../../../hooks';
+import {
+	useConnectorMetadata,
+	useEnsureCorrectChain,
+	useListBalances,
+} from '../../../hooks';
 import { MODAL_OVERLAY_PROPS } from '../_internal/components/consts';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
 import {
@@ -25,8 +30,25 @@ export type ShowTransferModalArgs = {
 	callbacks?: ModalCallbacks;
 };
 
-export const useTransferModal = () => {
+export type UseTransferModalArgs = {
+	prefetch?: {
+		collectibleId: string;
+		chainId: number;
+		collectionAddress: Address;
+	};
+};
+
+export const useTransferModal = (args?: UseTransferModalArgs) => {
 	const { ensureCorrectChain } = useEnsureCorrectChain();
+	const { address: accountAddress } = useAccount();
+	// Prefetch balances if `prefetch` is provided
+	useListBalances({
+		chainId: args?.prefetch?.chainId!,
+		contractAddress: args?.prefetch?.collectionAddress,
+		tokenId: args?.prefetch?.collectibleId,
+		accountAddress,
+		query: { enabled: !!accountAddress && !!args?.prefetch },
+	});
 
 	const openModal = (args: ShowTransferModalArgs) => {
 		transferModalStore.send({ type: 'open', ...args });

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx

@@ -3,14 +3,12 @@
 import { Skeleton } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
-import { compareAddress } from '../../../../../../utils';
 import { type Currency, OrderbookKind } from '../../../../../_internal';
 import { useMarketCurrencies } from '../../../../../hooks/data/market/useMarketCurrencies';
 import {
 	CustomSelect,
 	type SelectItem,
 } from '../../../../components/_internals/custom-select/CustomSelect';
-import { getOpenseaCurrencyForChain } from '../../constants/opensea-currencies';
 
 type CurrencyOptionsSelectProps = {
 	collectionAddress: Address;
@@ -42,17 +40,18 @@ function CurrencyOptionsSelect({
 
 	// Filter currencies for OpenSea
 	let filteredCurrencies = currencies;
+
 	if (currencies && orderbookKind === OrderbookKind.opensea && modalType) {
-		const openseaCurrency = getOpenseaCurrencyForChain(chainId, modalType);
-		if (openseaCurrency) {
-			// Filter to only show the OpenSea-supported currency
-			filteredCurrencies = currencies.filter((currency) =>
-				compareAddress(
-					currency.contractAddress,
-					openseaCurrency.address as Address,
-				),
-			);
-		}
+		// Filter currencies based on OpenSea support flags from API
+		filteredCurrencies = currencies.filter((currency) => {
+			if (modalType === 'listing') {
+				return currency.openseaListing;
+			}
+			if (modalType === 'offer') {
+				return currency.openseaOffer;
+			}
+			return false;
+		});
 	}
 
 	// set default currency
@@ -99,6 +98,9 @@ function CurrencyOptionsSelect({
 		}
 	};
 
+	// Disable dropdown for OpenSea since there's typically only one currency
+	const isDropdownDisabled = orderbookKind === OrderbookKind.opensea;
+
 	return (
 		<CustomSelect
 			items={options}
@@ -107,6 +109,7 @@ function CurrencyOptionsSelect({
 				value: selectedCurrency.contractAddress,
 				content: selectedCurrency.symbol,
 			}}
+			disabled={isDropdownDisabled}
 			testId="currency-select"
 		/>
 	);

package/src/react/ui/modals/_internal/components/floorPriceText/__tests__/FloorPriceText.test.tsx

@@ -19,6 +19,8 @@ describe('FloorPriceText', () => {
 		nativeCurrency: true,
 		createdAt: '',
 		updatedAt: '',
+		openseaListing: true,
+		openseaOffer: true,
 	};
 
 	const mockProps = {

package/src/react/ui/modals/_internal/components/floorPriceText/index.tsx

@@ -68,7 +68,7 @@ export default function FloorPriceText({
 	}
 
 	return (
-		<div className="flex w-full items-center justify-between gap-2">
+		<div className="flex w-full flex-wrap items-center justify-between gap-2">
 			<Text className="text-left font-body font-medium text-muted text-xs">
 				{floorPriceDifferenceText}
 			</Text>