@0xsequence/marketplace-sdk 1.2.1 → 2.0.0

package/src/react/hooks/utils/useWaasFeeOptions.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { ContractVerificationStatus } from '@0xsequence/indexer';
+import type { FeeOption } from '@0xsequence/waas';
+import { useEffect } from 'react';
+import { formatUnits } from 'viem';
+import type { Connection, Connector } from 'wagmi';
+import { useConnections } from 'wagmi';
+import type { SdkConfig } from '../../../types';
+import { getIndexerClient } from '../../_internal';
+import {
+	Deferred,
+	type FeeOptionConfirmationResult,
+	type FeeOptionExtended,
+	usePendingConfirmation,
+	type WaasFeeOptionConfirmation,
+	waasFeeOptionsStore,
+} from './waasFeeOptionsStore';
+
+// Re-export types for backward compatibility
+export type { FeeOptionExtended, WaasFeeOptionConfirmation };
+
+/**
+ * Return type for the useWaasFeeOptions hook
+ */
+export type UseWaasFeeOptionsReturnType = {
+	pendingFeeOptionConfirmation: WaasFeeOptionConfirmation | undefined;
+	confirmPendingFeeOption: (id: string, feeTokenAddress: string | null) => void;
+	rejectPendingFeeOption: (id: string) => void;
+};
+
+/**
+ * Options for the useWaasFeeOptions hook
+ *
+ * @property {boolean} skipFeeBalanceCheck - Whether to skip checking token balances (default: false)
+ */
+export interface WaasFeeOptionsConfig {
+	/** Whether to skip checking token balances (default: false) */
+	skipFeeBalanceCheck?: boolean;
+}
+
+/**
+ * Hook for handling WaaS (Wallet as a Service) fee options for unsponsored transactions
+ *
+ * This hook provides functionality to:
+ * - Get available fee options for a transaction in Native Token and ERC20's
+ * - Provide user wallet balances for each fee option
+ * - Confirm or reject fee selections
+ *
+ * @param options - Configuration options for the hook {@link WaasFeeOptionsConfig}
+ * @returns Array containing the confirmation state and control functions {@link UseWaasFeeOptionsReturnType}
+ *
+ * @example
+ * ```tsx
+ *   // Use the hook with default balance checking, this will fetch the user's wallet balances for each fee option and provide them in the UseWaasFeeOptionsReturn
+ *   const [
+ *     pendingFeeOptionConfirmation,
+ *     confirmPendingFeeOption,
+ *     rejectPendingFeeOption
+ *   ] = useWaasFeeOptions();
+ *
+ *   // Or skip balance checking if needed
+ *   // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] =
+ *   //   useWaasFeeOptions({ skipFeeBalanceCheck: true });
+ *
+ *   const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = useState<string>();
+ *   const [feeOptionAlert, setFeeOptionAlert] = useState<AlertProps>();
+ *
+ *   // Initialize with first option when fee options become available
+ *   useEffect(() => {
+ *     if (pendingFeeOptionConfirmation) {
+ *       console.log('Pending fee options: ', pendingFeeOptionConfirmation.options)
+ *     }
+ *   }, [pendingFeeOptionConfirmation]);
+ *
+ * ```
+ */
+export function useWaasFeeOptions(
+	chainId: number,
+	config: SdkConfig,
+	options?: WaasFeeOptionsConfig,
+): UseWaasFeeOptionsReturnType {
+	const { skipFeeBalanceCheck = false } = options || {};
+	const connections = useConnections();
+	const waasConnector: Connector | undefined = connections.find(
+		(c: Connection) => c.connector.id.includes('waas'),
+	)?.connector;
+	const pendingFeeOptionConfirmation = usePendingConfirmation();
+
+	const isValidChainId = chainId > 0;
+	const indexerClient = isValidChainId
+		? getIndexerClient(chainId, config)
+		: null;
+	/**
+	 * Confirms the selected fee option
+	 * @param id - The fee confirmation ID
+	 * @param feeTokenAddress - The address of the token to use for fee payment (null for native token)
+	 */
+	function confirmPendingFeeOption(id: string, feeTokenAddress: string | null) {
+		waasFeeOptionsStore.send({
+			type: 'confirmFeeOption',
+			id,
+			feeTokenAddress,
+		});
+	}
+
+	/**
+	 * Rejects the current fee option confirmation
+	 * @param id - The fee confirmation ID to reject
+	 */
+	function rejectPendingFeeOption(id: string) {
+		waasFeeOptionsStore.send({
+			type: 'rejectFeeOption',
+			id,
+		});
+	}
+
+	useEffect(() => {
+		if (!waasConnector || !indexerClient) {
+			return;
+		}
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sequenceWaasProvider is not typed on Connector
+		const waasProvider = (waasConnector as any).sequenceWaasProvider;
+		if (!waasProvider) {
+			return;
+		}
+
+		const originalHandler = waasProvider.feeConfirmationHandler;
+
+		waasProvider.feeConfirmationHandler = {
+			async confirmFeeOption(
+				id: string,
+				options: FeeOption[],
+				chainId: number,
+			): Promise<FeeOptionConfirmationResult> {
+				const pending = new Deferred<FeeOptionConfirmationResult>();
+
+				// Set the deferred in the store
+				waasFeeOptionsStore.send({
+					type: 'setDeferred',
+					deferred: pending,
+				});
+
+				// Clear any previous stale state immediately
+				waasFeeOptionsStore.send({
+					type: 'setPendingConfirmation',
+					confirmation: undefined,
+				});
+
+				const accountAddress = connections[0]?.accounts[0];
+				if (!accountAddress) {
+					throw new Error('No account address available');
+				}
+
+				if (!skipFeeBalanceCheck) {
+					const optionsWithBalances = await Promise.all(
+						options.map(async (option) => {
+							if (option.token.contractAddress) {
+								const tokenBalances =
+									await indexerClient.getTokenBalancesByContract({
+										filter: {
+											accountAddresses: [accountAddress],
+											contractStatus: ContractVerificationStatus.ALL,
+											contractAddresses: [option.token.contractAddress],
+										},
+										omitMetadata: true,
+									});
+								const tokenBalance = tokenBalances.balances[0]?.balance;
+								return {
+									...option,
+									balanceFormatted: option.token.decimals
+										? formatUnits(
+												BigInt(tokenBalances.balances[0]?.balance ?? '0'),
+												option.token.decimals,
+											)
+										: (tokenBalances.balances[0]?.balance ?? '0'),
+									balance: tokenBalances.balances[0]?.balance ?? '0',
+									hasEnoughBalanceForFee: tokenBalance
+										? BigInt(option.value) <= BigInt(tokenBalance)
+										: false,
+								};
+							}
+							const nativeBalance = await indexerClient.getNativeTokenBalance({
+								accountAddress,
+							});
+							return {
+								...option,
+								balanceFormatted: formatUnits(
+									BigInt(nativeBalance.balance.balance),
+									18,
+								),
+								balance: nativeBalance.balance.balance,
+								hasEnoughBalanceForFee:
+									BigInt(option.value) <= BigInt(nativeBalance.balance.balance),
+							};
+						}),
+					);
+
+					const confirmation: WaasFeeOptionConfirmation = {
+						id,
+						options: optionsWithBalances,
+						chainId,
+					};
+					waasFeeOptionsStore.send({
+						type: 'setPendingConfirmation',
+						confirmation,
+					});
+				} else {
+					const confirmation: WaasFeeOptionConfirmation = {
+						id,
+						options,
+						chainId,
+					};
+					waasFeeOptionsStore.send({
+						type: 'setPendingConfirmation',
+						confirmation,
+					});
+				}
+				return pending.promise;
+			},
+		};
+
+		return () => {
+			waasProvider.feeConfirmationHandler = originalHandler;
+		};
+	}, [waasConnector, indexerClient]);
+
+	return {
+		pendingFeeOptionConfirmation,
+		confirmPendingFeeOption,
+		rejectPendingFeeOption,
+	};
+}

package/src/react/hooks/utils/waasFeeOptionsStore.ts

@@ -0,0 +1,141 @@
+import type { FeeOption } from '@0xsequence/waas';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+
+export class Deferred<T> {
+	private _resolve: (value: T) => void = () => {};
+	private _reject: (value: T) => void = () => {};
+
+	private _promise: Promise<T> = new Promise<T>((resolve, reject) => {
+		this._reject = reject;
+		this._resolve = resolve;
+	});
+
+	get promise(): Promise<T> {
+		return this._promise;
+	}
+
+	resolve(value: T) {
+		this._resolve(value);
+	}
+
+	reject(value: T) {
+		this._reject(value);
+	}
+}
+
+/**
+ * Extended FeeOption type that includes balance information
+ */
+export type FeeOptionExtended = FeeOption & {
+	/** Raw balance string */
+	balance: string;
+	/** Formatted balance with proper decimals */
+	balanceFormatted: string;
+	/** Indicates if the wallet has enough balance to pay the fee */
+	hasEnoughBalanceForFee: boolean;
+};
+
+/**
+ * Fee option confirmation data structure
+ */
+export type WaasFeeOptionConfirmation = {
+	/** Unique identifier for the fee confirmation */
+	id: string;
+	/** Available fee options with balance information */
+	options: FeeOptionExtended[] | FeeOption[];
+	/** Chain ID where the transaction will be executed */
+	chainId: number;
+};
+
+/**
+ * Result type for fee option confirmation
+ */
+export type FeeOptionConfirmationResult = {
+	id: string;
+	feeTokenAddress?: string | null;
+	confirmed: boolean;
+};
+
+export type WaasFeeOptionsState = {
+	pendingConfirmation: WaasFeeOptionConfirmation | undefined;
+	deferred: Deferred<FeeOptionConfirmationResult> | undefined;
+};
+
+const initialContext: WaasFeeOptionsState = {
+	pendingConfirmation: undefined,
+	deferred: undefined,
+};
+
+export const waasFeeOptionsStore = createStore({
+	context: initialContext,
+	on: {
+		setPendingConfirmation: (
+			context,
+			event: { confirmation: WaasFeeOptionConfirmation | undefined },
+		) => ({
+			...context,
+			pendingConfirmation: event.confirmation,
+		}),
+
+		setDeferred: (
+			context,
+			event: { deferred: Deferred<FeeOptionConfirmationResult> | undefined },
+		) => ({
+			...context,
+			deferred: event.deferred,
+		}),
+
+		confirmFeeOption: (
+			context,
+			event: { id: string; feeTokenAddress: string | null },
+		) => {
+			if (context.deferred && context.pendingConfirmation?.id === event.id) {
+				context.deferred.resolve({
+					id: event.id,
+					feeTokenAddress: event.feeTokenAddress,
+					confirmed: true,
+				});
+
+				return {
+					...context,
+					deferred: undefined,
+					pendingConfirmation: undefined,
+				};
+			}
+			return context;
+		},
+
+		rejectFeeOption: (context, event: { id: string }) => {
+			if (context.deferred && context.pendingConfirmation?.id === event.id) {
+				context.deferred.resolve({
+					id: event.id,
+					feeTokenAddress: undefined,
+					confirmed: false,
+				});
+
+				return {
+					...context,
+					deferred: undefined,
+					pendingConfirmation: undefined,
+				};
+			}
+			return context;
+		},
+
+		clear: () => initialContext,
+	},
+});
+
+// Selector hooks
+export const usePendingConfirmation = () =>
+	useSelector(
+		waasFeeOptionsStore,
+		(state) => state.context.pendingConfirmation,
+	);
+
+export const useDeferred = () =>
+	useSelector(waasFeeOptionsStore, (state) => state.context.deferred);
+
+export const useWaasFeeOptionsState = () =>
+	useSelector(waasFeeOptionsStore, (state) => state.context);

package/src/react/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './_internal/api/get-query-client';
 export * from './_internal/wagmi/create-config';
 export * from './hooks';
@@ -5,3 +7,4 @@ export * from './providers';
 export * from './queries';
 export * from './types/query';
 export * from './ui/index';
+export * from './utils';

package/src/react/providers/index.tsx

@@ -14,9 +14,9 @@ import { PROVIDER_ID } from '../_internal/get-provider';
 import { AnalyticsProvider } from './analytics-provider';
 import { ThemeProvider } from './theme-provider';
 
-export const MarketplaceSdkContext = createContext(
-	{} as MarketplaceSdkContextType,
-);
+export const MarketplaceSdkContext = createContext<
+	MarketplaceSdkContextType | undefined
+>(undefined);
 
 export type MarketplaceSdkProviderProps = {
 	config: SdkConfig;

package/src/react/providers/modal-provider.tsx

@@ -1,7 +1,7 @@
+'use client';
+
 import { SequenceCheckoutProvider } from '@0xsequence/checkout';
-import { observer } from '@legendapp/state/react';
 import type { ReactNode } from 'react';
-import { marketplaceApiURL } from '../_internal';
 import { useConfig } from '../hooks';
 import SwitchChainErrorModal from '../ui/modals/_internal/components/switchChainErrorModal';
 import TransactionStatusModal from '../ui/modals/_internal/components/transactionStatusModal';
@@ -9,7 +9,6 @@ import { BuyModal } from '../ui/modals/BuyModal/components/Modal';
 import { CreateListingModal } from '../ui/modals/CreateListingModal/Modal';
 import { MakeOfferModal } from '../ui/modals/MakeOfferModal/Modal';
 import { SellModal } from '../ui/modals/SellModal/Modal';
-import SuccessfulPurchaseModal from '../ui/modals/SuccessfulPurchaseModal';
 import { TransferModal } from '../ui/modals/TransferModal';
 import { ShadowRoot } from './shadow-root';
 
@@ -17,24 +16,15 @@ interface ModalProviderProps {
 	children?: ReactNode;
 }
 
-export const ModalProvider = observer(({ children }: ModalProviderProps) => {
+export const ModalProvider = ({ children }: ModalProviderProps) => {
 	const sdkConfig = useConfig();
 	const { shadowDom, experimentalShadowDomCssOverride } = sdkConfig;
 
-	const overrides = sdkConfig._internal?.overrides?.api?.marketplace;
-	const marketplaceApiUrl =
-		overrides?.url || marketplaceApiURL(overrides?.env || 'production');
-
 	return (
 		<>
 			{children}
-			<SequenceCheckoutProvider
-				config={{
-					env: {
-						marketplaceApiUrl,
-					},
-				}}
-			>
+
+			<SequenceCheckoutProvider>
 				<ShadowRoot
 					enabled={shadowDom ?? true}
 					customCSS={experimentalShadowDomCssOverride}
@@ -44,7 +34,6 @@ export const ModalProvider = observer(({ children }: ModalProviderProps) => {
 					<TransferModal />
 					<SellModal />
 					<BuyModal />
-					<SuccessfulPurchaseModal />
 					{/* Helper modals */}
 					<SwitchChainErrorModal />
 					<TransactionStatusModal />
@@ -52,4 +41,4 @@ export const ModalProvider = observer(({ children }: ModalProviderProps) => {
 			</SequenceCheckoutProvider>
 		</>
 	);
-});
+};

package/src/react/providers/provider.test.tsx

@@ -14,7 +14,7 @@ expect.extend(matchers);
 // Test component to verify context value
 function TestComponent() {
 	const config = useContext(MarketplaceSdkContext);
-	return <div data-testid="config-value">{config.projectAccessKey}</div>;
+	return <div data-testid="config-value">{config?.projectAccessKey}</div>;
 }
 
 describe('MarketplaceProvider', () => {

package/src/react/providers/shadow-root.tsx

@@ -52,7 +52,7 @@ export const ShadowRoot = (props: ShadowRootProps) => {
 		? createPortal(
 				<div data-shadow-host ref={hostRef}>
 					{container && (
-						<ThemeProvider theme={theme} root={container}>
+						<ThemeProvider defaultTheme={theme} root={container}>
 							{children}
 						</ThemeProvider>
 					)}

package/src/react/providers/theme-provider.tsx

@@ -19,7 +19,7 @@ export const ThemeProvider = ({
 
 	if (!shadowDom) {
 		return (
-			<SequenceThemeProvider theme={theme} root={root}>
+			<SequenceThemeProvider defaultTheme={theme} root={root}>
 				{children}
 			</SequenceThemeProvider>
 		);

package/src/react/queries/checkout/index.ts

@@ -0,0 +1 @@
+export * from './primary-sale-checkout-options';

package/src/react/queries/checkout/primary-sale-checkout-options.ts

@@ -0,0 +1,118 @@
+import type {
+	Address,
+	CheckoutOptionsItem,
+	CheckoutOptionsSalesContractRequest,
+	CheckoutOptionsSalesContractResponse,
+	GetPrimarySaleCheckoutOptionsRequest,
+} from '@0xsequence/api-client';
+import { isAddress } from 'viem';
+import {
+	buildQueryOptions,
+	getMarketplaceClient,
+	type SdkQueryParams,
+	type WithOptionalParams,
+	type WithRequired,
+} from '../../_internal';
+
+export type FetchPrimarySaleCheckoutOptionsParams =
+	GetPrimarySaleCheckoutOptionsRequest;
+
+/**
+ * Fetches checkout options for primary sales contract from the Marketplace API
+ */
+export async function fetchPrimarySaleCheckoutOptions(
+	params: WithRequired<
+		PrimarySaleCheckoutOptionsQueryOptions,
+		| 'chainId'
+		| 'walletAddress'
+		| 'contractAddress'
+		| 'collectionAddress'
+		| 'items'
+		| 'config'
+	>,
+): Promise<CheckoutOptionsSalesContractResponse> {
+	const {
+		chainId,
+		walletAddress,
+		contractAddress,
+		collectionAddress,
+		items,
+		config,
+	} = params;
+
+	const client = getMarketplaceClient(config);
+
+	const apiArgs: CheckoutOptionsSalesContractRequest = {
+		chainId,
+		wallet: walletAddress,
+		contractAddress,
+		collectionAddress,
+		items,
+	};
+
+	const result = await client.checkoutOptionsSalesContract(apiArgs);
+	return result;
+}
+
+export type PrimarySaleCheckoutOptionsQueryOptions =
+	SdkQueryParams<FetchPrimarySaleCheckoutOptionsParams>;
+
+export function getPrimarySaleCheckoutOptionsQueryKey(
+	params: PrimarySaleCheckoutOptionsQueryOptions,
+): readonly [
+	'checkout',
+	'primary-sale',
+	{
+		chainId: number;
+		walletAddress: Address;
+		contractAddress: Address;
+		collectionAddress: Address;
+		items: ReadonlyArray<CheckoutOptionsItem>;
+	},
+] {
+	return [
+		'checkout',
+		'primary-sale',
+		{
+			chainId: params.chainId ?? 0,
+			walletAddress: params.walletAddress ?? ('0x' as Address),
+			contractAddress: params.contractAddress ?? ('' as Address),
+			collectionAddress: params.collectionAddress ?? ('' as Address),
+			items: params.items ?? [],
+		},
+	] as const;
+}
+
+export function primarySaleCheckoutOptionsQueryOptions(
+	params: WithOptionalParams<
+		WithRequired<
+			PrimarySaleCheckoutOptionsQueryOptions,
+			| 'chainId'
+			| 'walletAddress'
+			| 'contractAddress'
+			| 'collectionAddress'
+			| 'items'
+			| 'config'
+		>
+	>,
+) {
+	return buildQueryOptions(
+		{
+			getQueryKey: getPrimarySaleCheckoutOptionsQueryKey,
+			requiredParams: [
+				'chainId',
+				'walletAddress',
+				'contractAddress',
+				'collectionAddress',
+				'items',
+				'config',
+			] as const,
+			fetcher: fetchPrimarySaleCheckoutOptions,
+			customValidation: (params) =>
+				(params.items?.length ?? 0) > 0 &&
+				!!params.collectionAddress &&
+				isAddress(params.collectionAddress),
+		},
+		params,
+	);
+}