@0xsequence/marketplace-sdk 0.3.11 → 0.4.1

package/src/react/_internal/transaction-machine/useTransactionMachine.ts

@@ -21,15 +21,31 @@ export type UseTransactionMachineConfig = Omit<
 	'sdkConfig' | 'marketplaceConfig' | 'walletKind' | 'chains' | 'isWaaS'
 >;
 
-export const useTransactionMachine = (
-	config: UseTransactionMachineConfig,
-	onSuccess?: (hash: Hash) => void,
-	onError?: (error: TransactionError) => void,
-	onTransactionSent?: (hash: Hash) => void,
-) => {
+export const useTransactionMachine = ({
+	config,
+	enabled,
+	onSuccess,
+	onError,
+	onTransactionSent,
+	onApprovalSuccess,
+	onSwitchChainRefused,
+}: {
+	config: UseTransactionMachineConfig;
+	enabled: boolean;
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: TransactionError) => void;
+	onTransactionSent?: (
+		hash?: Hash,
+		orderId?: string,
+		isApproval?: boolean,
+	) => void;
+	onApprovalSuccess?: (hash: Hash) => void;
+	onSwitchChainRefused: () => void;
+}) => {
 	const { data: walletClient, isLoading: walletClientIsLoading } =
 		useWalletClient();
-	const { show: showSwitchChainModal } = useSwitchChainModal();
+	const { show: showSwitchChainModal, close: closeSwitchChainModal } =
+		useSwitchChainModal();
 	const sdkConfig = useConfig();
 	const {
 		data: marketplaceConfig,
@@ -39,13 +55,15 @@ export const useTransactionMachine = (
 	const { openSelectPaymentModal } = useSelectPaymentModal();
 	const { chains } = useSwitchChain();
 
-	const { connector, isConnected } = useAccount();
+	const { connector, isConnected, chainId: accountChainId } = useAccount();
 	const walletKind =
 		connector?.id === 'sequence' ? WalletKind.sequence : WalletKind.unknown;
 
 	// TODO: remove this once we have a better way to check if the wallet is a WAAS wallet
 	const isWaaS = connector?.id.endsWith('waas') || false;
 
+	if (!enabled) return { machine: null, error: null, isLoading: false };
+
 	if (!isConnected) {
 		// No wallet connected, TODO: add some sort of state for this
 		return { machine: null, error: null, isLoading: false };
@@ -75,6 +93,22 @@ export const useTransactionMachine = (
 		return { machine: null, error };
 	}
 
+	if (accountChainId !== Number(config.chainId)) {
+		showSwitchChainModal({
+			chainIdToSwitchTo: Number(config.chainId),
+			onSuccess: () => {
+				closeSwitchChainModal();
+			},
+			onError: (err) => {
+				throw err;
+			},
+			onClose: () => {
+				onSwitchChainRefused();
+			},
+		});
+		return { machine: null, error: null, isLoading: false };
+	}
+
 	const machine = new TransactionMachine(
 		{
 			config: {
@@ -87,6 +121,7 @@ export const useTransactionMachine = (
 			},
 			onSuccess,
 			onTransactionSent,
+			onApprovalSuccess,
 		},
 		walletClient,
 		getPublicRpcClient(config.chainId),

package/src/react/hooks/useBuyCollectable.tsx

@@ -1,4 +1,4 @@
-import type { Hash } from 'viem';
+import type { Hash, Hex } from 'viem';
 import type { TransactionErrorTypes } from '../../utils/_internal/error/transaction';
 import {
 	type BuyInput,
@@ -15,24 +15,31 @@ interface UseBuyOrderArgs
 	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: UseBuyOrderError) => void;
-	onTransactionSent?: (hash: string) => void;
+	onTransactionSent?: (hash?: Hex) => void;
+	onSwitchChainRefused: () => void;
+	enabled: boolean;
 }
 
 export const useBuyCollectable = ({
 	onSuccess,
 	onError,
 	onTransactionSent,
+	onSwitchChainRefused,
+	enabled,
 	...config
 }: UseBuyOrderArgs) => {
-	const { machine, error, isLoading } = useTransactionMachine(
-		{
-			...config,
-			type: TransactionType.BUY,
-		},
+	const machineConfig = {
+		...config,
+		type: TransactionType.BUY,
+	};
+	const { machine, error, isLoading } = useTransactionMachine({
+		config: machineConfig,
+		enabled,
+		onSwitchChainRefused,
 		onSuccess,
 		onError,
 		onTransactionSent,
-	);
+	});
 
 	return {
 		buy: (props: BuyInput) => {

package/src/react/hooks/useCancelOrder.tsx

@@ -1,3 +1,4 @@
+import type { Hex } from 'viem';
 import {
 	type CancelInput,
 	TransactionType,
@@ -11,24 +12,31 @@ interface UseCancelOrderArgs
 	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
 	onSuccess?: (hash: string) => void;
 	onError?: (error: Error) => void;
-	onTransactionSent?: (hash: string) => void;
+	onTransactionSent?: (hash?: Hex) => void;
+	onSwitchChainRefused: () => void;
+	enabled: boolean;
 }
 
 export const useCancelOrder = ({
 	onSuccess,
 	onError,
 	onTransactionSent,
+	onSwitchChainRefused,
+	enabled,
 	...config
 }: UseCancelOrderArgs) => {
-	const { machine, isLoading } = useTransactionMachine(
-		{
-			...config,
-			type: TransactionType.CANCEL,
-		},
+	const machineConfig = {
+		...config,
+		type: TransactionType.CANCEL,
+	};
+	const { machine, isLoading } = useTransactionMachine({
+		config: machineConfig,
+		enabled,
+		onSwitchChainRefused,
 		onSuccess,
 		onError,
 		onTransactionSent,
-	);
+	});
 
 	return {
 		cancel: (props: CancelInput) => machine?.start(props),

package/src/react/hooks/useCreateListing.tsx

@@ -15,27 +15,49 @@ interface UseCreateListingArgs
 	extends Omit<UseTransactionMachineConfig, 'type'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: TransactionError) => void;
-	onTransactionSent?: (hash: Hash) => void;
+	onTransactionSent?: (hash?: Hash, orderId?: string) => void;
+	onApprovalSuccess?: (hash: Hash) => void;
+	onSwitchChainRefused: () => void;
+	enabled: boolean;
 }
 
+type ExecutionState = 'approval' | 'listing' | null;
+
 export const useCreateListing = ({
 	onSuccess,
 	onError,
 	onTransactionSent,
+	onApprovalSuccess,
+	onSwitchChainRefused,
+	enabled,
 	...config
 }: UseCreateListingArgs) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [steps, setSteps] = useState<TransactionSteps | null>(null);
+	const [executionState, setExecutionState] = useState<ExecutionState>(null);
+	const machineConfig = {
+		...config,
+		type: TransactionType.LISTING,
+	};
 
-	const { machine, isLoading: isMachineLoading } = useTransactionMachine(
-		{
-			...config,
-			type: TransactionType.LISTING,
+	const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+		config: machineConfig,
+		enabled,
+		onSuccess: (hash) => {
+			setExecutionState(null);
+			onSuccess?.(hash);
+		},
+		onError: (error) => {
+			setExecutionState(null);
+			onError?.(error);
 		},
-		onSuccess,
-		onError,
 		onTransactionSent,
-	);
+		onApprovalSuccess: (hash) => {
+			setExecutionState(null);
+			onApprovalSuccess?.(hash);
+		},
+		onSwitchChainRefused,
+	});
 
 	const loadSteps = useCallback(
 		async (props: ListingInput) => {
@@ -46,17 +68,59 @@ export const useCreateListing = ({
 				setIsLoading(false);
 				return;
 			}
-			setSteps(generatedSteps);
+			setSteps({
+				...generatedSteps,
+				approval: {
+					...generatedSteps.approval,
+					isExecuting: executionState === 'approval',
+				},
+				transaction: {
+					...generatedSteps.transaction,
+					isExecuting: executionState === 'listing',
+				},
+			});
 			setIsLoading(false);
 		},
-		[machine, onError],
+		[machine, executionState],
+	);
+
+	const handleStepExecution = useCallback(
+		async (type: ExecutionState, execute: () => Promise<any> | undefined) => {
+			if (!type) return;
+			setExecutionState(type);
+			try {
+				await execute();
+			} catch (error) {
+				setExecutionState(null);
+				throw error;
+			}
+		},
+		[],
 	);
 
 	return {
 		createListing: (props: ListingInput) => machine?.start(props),
 		getListingSteps: (props: ListingInput) => ({
 			isLoading,
-			steps,
+			steps: steps
+				? {
+						...steps,
+						approval: {
+							...steps.approval,
+							isExecuting: executionState === 'approval',
+							execute: () =>
+								handleStepExecution('approval', () => steps.approval.execute()),
+						},
+						transaction: {
+							...steps.transaction,
+							isExecuting: executionState === 'listing',
+							execute: () =>
+								handleStepExecution('listing', () =>
+									steps.transaction.execute(),
+								),
+						},
+					}
+				: null,
 			refreshSteps: () => loadSteps(props),
 		}),
 		isLoading: isMachineLoading,

package/src/react/hooks/useCurrencies.tsx

@@ -1,4 +1,5 @@
 import { queryOptions, useQuery } from '@tanstack/react-query';
+import { toHex, zeroAddress } from 'viem';
 import { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import { InvalidCurrencyOptionsError } from '../../utils/_internal/error/transaction';
@@ -12,7 +13,6 @@ import {
 	getMarketplaceClient,
 } from '../_internal';
 import { useConfig } from './useConfig';
-import { toHex, zeroAddress } from 'viem';
 
 const ChainIdCoerce = ChainIdSchema.transform((val) => val.toString());
 
@@ -40,7 +40,6 @@ const fetchCurrencies = async (chainId: ChainId, config: SdkConfig) => {
 };
 
 const selectCurrencies = (data: Currency[], args: UseCurrenciesArgs) => {
-	console.debug('[selectCurrencies]: Select Currencies Input:', { data, args });
 	const argsParsed = UseCurrenciesArgsSchema.parse(args);
 	// if collectionAddress is passed, filter currencies based on collection currency options
 	if (argsParsed.currencyOptions) {

package/src/react/hooks/useCurrencyBalance.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { Address, erc20Abi, formatUnits, zeroAddress } from 'viem';
+import { type Address, erc20Abi, formatUnits, zeroAddress } from 'viem';
 import { getPublicRpcClient } from '../../utils';
 
 export function useCurrencyBalance({

package/src/react/hooks/useCurrencyOptions.tsx

@@ -1,4 +1,4 @@
-import { Address } from 'viem';
+import type { Address } from 'viem';
 import { useMarketplaceConfig } from './useMarketplaceConfig';
 
 export const useCurrencyOptions = ({

package/src/react/hooks/useMakeOffer.tsx

@@ -14,27 +14,49 @@ import {
 interface UseMakeOfferArgs extends Omit<UseTransactionMachineConfig, 'type'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: TransactionError) => void;
-	onTransactionSent?: (hash: Hash) => void;
+	onTransactionSent?: (hash?: Hash, orderId?: string) => void;
+	onApprovalSuccess?: (hash: Hash) => void;
+	onSwitchChainRefused: () => void;
+	enabled: boolean;
 }
 
+type ExecutionState = 'approval' | 'offer' | null;
+
 export const useMakeOffer = ({
 	onSuccess,
 	onError,
 	onTransactionSent,
+	onApprovalSuccess,
+	onSwitchChainRefused,
+	enabled,
 	...config
 }: UseMakeOfferArgs) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [steps, setSteps] = useState<TransactionSteps | null>(null);
+	const [executionState, setExecutionState] = useState<ExecutionState>(null);
+	const machineConfig = {
+		...config,
+		type: TransactionType.OFFER,
+	};
 
-	const { machine, isLoading: isMachineLoading } = useTransactionMachine(
-		{
-			...config,
-			type: TransactionType.OFFER,
+	const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+		config: machineConfig,
+		enabled,
+		onSuccess: (hash) => {
+			setExecutionState(null);
+			onSuccess?.(hash);
+		},
+		onError: (error) => {
+			setExecutionState(null);
+			onError?.(error);
 		},
-		onSuccess,
-		onError,
 		onTransactionSent,
-	);
+		onApprovalSuccess: (hash) => {
+			setExecutionState(null);
+			onApprovalSuccess?.(hash);
+		},
+		onSwitchChainRefused,
+	});
 
 	const loadSteps = useCallback(
 		async (props: OfferInput) => {
@@ -45,17 +67,57 @@ export const useMakeOffer = ({
 				setIsLoading(false);
 				return;
 			}
-			setSteps(generatedSteps);
+			setSteps({
+				...generatedSteps,
+				approval: {
+					...generatedSteps.approval,
+					isExecuting: executionState === 'approval',
+				},
+				transaction: {
+					...generatedSteps.transaction,
+					isExecuting: executionState === 'offer',
+				},
+			});
 			setIsLoading(false);
 		},
-		[machine, onError],
+		[machine, executionState],
+	);
+
+	const handleStepExecution = useCallback(
+		async (type: ExecutionState, execute: () => Promise<any> | undefined) => {
+			if (!type) return;
+			setExecutionState(type);
+			try {
+				await execute();
+			} catch (error) {
+				setExecutionState(null);
+				throw error;
+			}
+		},
+		[],
 	);
 
 	return {
 		makeOffer: (props: OfferInput) => machine?.start(props),
 		getMakeOfferSteps: (props: OfferInput) => ({
-			isLoading: isLoading,
-			steps,
+			isLoading,
+			steps: steps
+				? {
+						...steps,
+						approval: {
+							...steps.approval,
+							isExecuting: executionState === 'approval',
+							execute: () =>
+								handleStepExecution('approval', () => steps.approval.execute()),
+						},
+						transaction: {
+							...steps.transaction,
+							isExecuting: executionState === 'offer',
+							execute: () =>
+								handleStepExecution('offer', () => steps.transaction.execute()),
+						},
+					}
+				: null,
 			refreshSteps: () => loadSteps(props),
 		}),
 		isLoading: isMachineLoading,

package/src/react/hooks/useSell.tsx

@@ -10,31 +10,52 @@ import {
 	useTransactionMachine,
 } from '../_internal/transaction-machine/useTransactionMachine';
 
+type ExecutionState = 'approval' | 'sell' | null;
 interface UseSellArgs
 	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: Error) => void;
-	onTransactionSent?: (hash: Hash) => void;
+	onTransactionSent?: (hash?: Hash) => void;
+	onApprovalSuccess?: (hash: Hash) => void;
+	onSwitchChainRefused: () => void;
+	enabled: boolean;
 }
 
 export const useSell = ({
 	onSuccess,
 	onError,
 	onTransactionSent,
+	onApprovalSuccess,
+	onSwitchChainRefused,
+	enabled,
 	...config
 }: UseSellArgs) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [steps, setSteps] = useState<TransactionSteps | null>(null);
+	const [executionState, setExecutionState] = useState<ExecutionState>(null);
+	const machineConfig = {
+		...config,
+		type: TransactionType.SELL,
+	};
 
-	const { machine, isLoading: isMachineLoading } = useTransactionMachine(
-		{
-			...config,
-			type: TransactionType.SELL,
+	const { machine, isLoading: isMachineLoading } = useTransactionMachine({
+		config: machineConfig,
+		enabled,
+		onSwitchChainRefused,
+		onSuccess: (hash) => {
+			setExecutionState(null);
+			onSuccess?.(hash);
+		},
+		onError: (error) => {
+			setExecutionState(null);
+			onError?.(error);
 		},
-		onSuccess,
-		onError,
 		onTransactionSent,
-	);
+		onApprovalSuccess: (hash) => {
+			setExecutionState(null);
+			onApprovalSuccess?.(hash);
+		},
+	});
 
 	const loadSteps = useCallback(
 		async (props: SellInput) => {
@@ -45,17 +66,57 @@ export const useSell = ({
 				setIsLoading(false);
 				return;
 			}
-			setSteps(generatedSteps);
+			setSteps({
+				...generatedSteps,
+				approval: {
+					...generatedSteps.approval,
+					isExecuting: executionState === 'approval',
+				},
+				transaction: {
+					...generatedSteps.transaction,
+					isExecuting: executionState === 'sell',
+				},
+			});
 			setIsLoading(false);
 		},
-		[machine, onError],
+		[machine, executionState],
+	);
+
+	const handleStepExecution = useCallback(
+		async (type: ExecutionState, execute: () => Promise<any> | undefined) => {
+			if (!type) return;
+			setExecutionState(type);
+			try {
+				await execute();
+			} catch (error) {
+				setExecutionState(null);
+				throw error;
+			}
+		},
+		[],
 	);
 
 	return {
 		sell: (props: SellInput) => machine?.start(props),
 		getSellSteps: (props: SellInput) => ({
-			isLoading: isLoading,
-			steps,
+			isLoading,
+			steps: steps
+				? {
+						...steps,
+						approval: {
+							...steps.approval,
+							isExecuting: executionState === 'approval',
+							execute: () =>
+								handleStepExecution('approval', () => steps.approval.execute()),
+						},
+						transaction: {
+							...steps.transaction,
+							isExecuting: executionState === 'sell',
+							execute: () =>
+								handleStepExecution('sell', () => steps.transaction.execute()),
+						},
+					}
+				: null,
 			refreshSteps: () => loadSteps(props),
 		}),
 		isLoading: isMachineLoading,

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -11,13 +11,7 @@ import { useMakeOfferModal } from '../../../modals/MakeOfferModal';
 import { useSellModal } from '../../../modals/SellModal';
 import { useTransferModal } from '../../../modals/TransferModal';
 
-export enum CollectibleCardAction {
-	BUY = 'Buy',
-	SELL = 'Sell',
-	LIST = 'Create listing',
-	OFFER = 'Make an offer',
-	TRANSFER = 'Transfer',
-}
+import { CollectibleCardAction } from './types';
 
 type ActionButtonProps = {
 	chainId: string;

package/src/react/ui/components/_internals/action-button/types.ts

@@ -0,0 +1,7 @@
+export enum CollectibleCardAction {
+	BUY = 'Buy',
+	SELL = 'Sell',
+	LIST = 'Create listing',
+	OFFER = 'Make an offer',
+	TRANSFER = 'Transfer',
+}

package/src/react/ui/components/_internals/custom-select/CustomSelect.tsx

@@ -1,22 +1,23 @@
 import { CheckmarkIcon, ChevronDownIcon } from '@0xsequence/design-system';
 import * as Select from '@radix-ui/react-select';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { content, item, itemIndicator, trigger } from './styles.css';
 
-interface CustomSelectProps {
-	items: Array<{
-		value: string;
-		label: string;
-		disabled?: boolean;
-	}>;
+export interface SelectItem {
 	value: string;
+	content: ReactNode;
+	disabled?: boolean;
+}
+
+interface CustomSelectProps {
+	items: SelectItem[];
 	onValueChange?: (value: string) => void;
-	defaultValue?: string;
+	defaultValue?: SelectItem;
 }
 
 const CustomSelectItem = React.forwardRef<
 	HTMLDivElement,
-	Select.SelectItemProps
+	Select.SelectItemProps & { children: ReactNode }
 >(({ children, ...props }, forwardedRef) => {
 	return (
 		<Select.Item className={item} {...props} ref={forwardedRef}>
@@ -30,13 +31,15 @@ const CustomSelectItem = React.forwardRef<
 
 export const CustomSelect: React.FC<CustomSelectProps> = ({
 	items,
-	value,
 	onValueChange,
 	defaultValue,
 }) => {
 	return (
-		<Select.Root onValueChange={onValueChange} defaultValue={defaultValue}>
-			<Select.Trigger className={trigger} value={value}>
+		<Select.Root
+			onValueChange={onValueChange}
+			defaultValue={defaultValue?.value}
+		>
+			<Select.Trigger className={trigger}>
 				<Select.Value />
 				<Select.Icon>
 					<ChevronDownIcon size="xs" />
@@ -46,13 +49,13 @@ export const CustomSelect: React.FC<CustomSelectProps> = ({
 			<Select.Portal>
 				<Select.Content className={content}>
 					<Select.Viewport>
-						{items.map((item, index) => (
+						{items.map((item) => (
 							<CustomSelectItem
-								key={index}
+								key={item.value}
 								value={item.value}
 								disabled={item.disabled}
 							>
-								{item.label}
+								{item.content}
 							</CustomSelectItem>
 						))}
 					</Select.Viewport>