@0xsequence/marketplace-sdk 0.4.0 → 0.4.1

package/src/react/hooks/useBuyCollectable.tsx

@@ -16,23 +16,30 @@ interface UseBuyOrderArgs
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: UseBuyOrderError) => 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,4 +1,4 @@
-import { Hex } from 'viem';
+import type { Hex } from 'viem';
 import {
 	type CancelInput,
 	TransactionType,
@@ -13,23 +13,30 @@ interface UseCancelOrderArgs
 	onSuccess?: (hash: string) => void;
 	onError?: (error: Error) => 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

@@ -16,26 +16,48 @@ interface UseCreateListingArgs
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: TransactionError) => 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());
 

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

@@ -15,26 +15,48 @@ interface UseMakeOfferArgs extends Omit<UseTransactionMachineConfig, 'type'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: TransactionError) => 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;
+	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>

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -11,12 +11,11 @@ import type {
 	OrderbookKind,
 } from '../../../_internal';
 import { useCurrencies, useHighestOffer } from '../../../hooks';
+import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
-import {
-	ActionButton,
-	CollectibleCardAction,
-} from '../_internals/action-button/ActionButton';
+import { ActionButton } from '../_internals/action-button/ActionButton';
+import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
 import {
 	actionWrapper,
@@ -24,7 +23,6 @@ import {
 	collectibleImage,
 	collectibleTileWrapper,
 } from './styles.css';
-import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
 
 function CollectibleSkeleton() {
 	return (
@@ -101,7 +99,7 @@ export function CollectibleCard({
 	}
 
 	const action = (
-		!!balance
+		balance
 			? (highestOffer?.order && CollectibleCardAction.SELL) ||
 				(!lowestListing?.order && CollectibleCardAction.LIST) ||
 				CollectibleCardAction.TRANSFER
@@ -161,7 +159,7 @@ export function CollectibleCard({
 					/>
 
 					<Footer
-						name={name!}
+						name={name || ''}
 						type={collectionType}
 						onOfferClick={() => onOfferClick?.({ order: highestOffer?.order })}
 						highestOffer={highestOffer?.order}

package/src/react/ui/components/collectible-card/Footer.tsx

@@ -30,10 +30,10 @@ export const Footer = ({
 	const listed = !!lowestListingPriceAmount && !!lowestListingCurrency;
 
 	if (name.length > 15 && highestOffer) {
-		name = name.substring(0, 13) + '...';
+		name = `${name.substring(0, 13)}...`;
 	}
 	if (name.length > 17 && !highestOffer) {
-		name = name.substring(0, 17) + '...';
+		name = `${name.substring(0, 17)}...`;
 	}
 
 	return (
@@ -94,12 +94,10 @@ export const Footer = ({
 					fontFamily="body"
 				>
 					{listed &&
-						formatUnits(
+						`${formatUnits(
 							BigInt(lowestListingPriceAmount),
 							lowestListingCurrency.decimals,
-						) +
-							' ' +
-							lowestListingCurrency.symbol}
+						)} ${lowestListingCurrency.symbol}`}
 
 					{!listed && 'Not listed yet'}
 				</Text>
@@ -116,7 +114,7 @@ const TokenTypeBalancePill = ({
 }: { balance?: string; type: ContractType }) => {
 	const displayText =
 		type === ContractType.ERC1155
-			? !!balance
+			? balance
 				? `Owned: ${balance}`
 				: 'ERC-1155'
 			: 'ERC-721';

package/src/react/ui/components/collectible-card/styles.css.ts

@@ -21,7 +21,7 @@ export const collectibleTileWrapper = style({
 	background: 'none',
 	position: 'relative',
 	selectors: {
-		[`&:focus`]: {
+		'&:focus': {
 			outline: 'none',
 		},
 	},

package/src/react/ui/icons/ArrowUp.tsx

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 12 12"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Arrow up"
 	>
+		<title>Arrow up icon</title>
 		<path
 			d="M8.65039 6.03638L9.28679 5.39999L5.96859 2.08179L2.65039 5.39999L3.28679 6.03638L5.51859 3.80458V9.91822H6.41859V3.80458L8.65039 6.03638Z"
 			fill="#D1D1D1"

package/src/react/ui/icons/Bell.tsx

@@ -8,7 +8,10 @@ const Svg = () => (
 		viewBox="0 0 17 17"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-labelledby="bell-title"
 	>
+		<title id="bell-title">Notification Bell</title>
 		<path
 			fillRule="evenodd"
 			clipRule="evenodd"