@0xsequence/marketplace-sdk 0.4.9 → 0.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@0xsequence/marketplace-sdk",
   "private": false,
-  "version": "0.4.9",
+  "version": "0.5.1",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -34,27 +34,27 @@
   },
   "dependencies": {
     "@legendapp/state": "^3.0.0-beta.26",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-popover": "^1.1.5",
-    "@radix-ui/react-select": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-select": "^2.1.6",
     "date-fns": "^4.1.0",
     "react-day-picker": "^9.5.1",
     "zod": "^3.24.1"
   },
   "peerDependencies": {
-    "0xsequence": "^2.2.8",
-    "@0xsequence/api": "^2.2.8",
+    "0xsequence": "^2.2.13",
+    "@0xsequence/api": "^2.2.13",
     "@0xsequence/design-system": "^1.9.0",
-    "@0xsequence/indexer": "^2.2.8",
-    "@0xsequence/kit": "^4.5.9",
-    "@0xsequence/kit-checkout": "^4.5.9",
-    "@0xsequence/metadata": "^2.2.8",
-    "@0xsequence/network": "^2.2.8",
-    "@tanstack/react-query": "^5.65.1",
+    "@0xsequence/indexer": "^2.2.13",
+    "@0xsequence/kit": "^4.6.0",
+    "@0xsequence/kit-checkout": "^4.6.0",
+    "@0xsequence/metadata": "^2.2.13",
+    "@0xsequence/network": "^2.2.13",
+    "@tanstack/react-query": "^5.66.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "viem": "^2.22.17",
-    "wagmi": "^2.14.9"
+    "viem": "^2.23.2",
+    "wagmi": "^2.14.11"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -62,8 +62,8 @@
     "@testing-library/react": "^16.2.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "@vanilla-extract/css": "^1.17.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.13",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/esbuild-plugin": "^2.3.15",
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/vite-plugin": "^4.0.19",
     "ctix": "^2.7.0",

package/src/react/_internal/api/marketplace.gen.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// marketplace-api  e84c70e41910cca2160d2377b0554dc58750c67b
+// marketplace-api  8d0cafb3a02c5db5bdd5d6b139a752349e301f0c
 // --
 // Code generated by webrpc-gen@v0.22.1 with typescript generator. DO NOT EDIT.
 //
@@ -7,7 +7,7 @@
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.22.1;gen-typescript@v0.16.2;marketplace-api@v0.0.0-e84c70e41910cca2160d2377b0554dc58750c67b"
+export const WebrpcHeaderValue = "webrpc@v0.22.1;gen-typescript@v0.16.2;marketplace-api@v0.0.0-8d0cafb3a02c5db5bdd5d6b139a752349e301f0c"
 
 // WebRPC description and code-gen version
 export const WebRPCVersion = "v1"
@@ -16,7 +16,7 @@ export const WebRPCVersion = "v1"
 export const WebRPCSchemaVersion = ""
 
 // Schema hash generated from your RIDL schema
-export const WebRPCSchemaHash = "e84c70e41910cca2160d2377b0554dc58750c67b"
+export const WebRPCSchemaHash = "8d0cafb3a02c5db5bdd5d6b139a752349e301f0c"
 
 type WebrpcGenVersions = {
   webrpcGenVersion: string;
@@ -350,6 +350,8 @@ export interface FeeBreakdown {
 export interface CollectibleOrder {
   metadata: TokenMetadata
   order?: Order
+  listing?: Order
+  offer?: Order
 }
 
 export interface OrderFilter {
@@ -2119,3 +2121,4 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 }
 
 export type Fetch = (input: RequestInfo, init?: RequestInit) => Promise<Response>
+

package/src/react/_internal/api/query-keys.ts

@@ -50,6 +50,10 @@ class CollectionKeys {
 class BalanceQueries {
 	static all = ['balances'] as const;
 	static lists = [...BalanceQueries.all, 'tokenBalances'] as const;
+	static collectionBalanceDetails = [
+		...BalanceQueries.all,
+		'collectionBalanceDetails',
+	] as const;
 }
 
 // biome-ignore lint/complexity/noStaticOnlyClass:

package/src/react/hooks/index.ts

@@ -1,7 +1,9 @@
+export * from './useAutoSelectFeeOption';
 export * from './useBalanceOfCollectible';
 export * from './useCountOfCollectables';
 export * from './useCollectible';
 export * from './useCollection';
+export * from './useCollectionBalanceDetails';
 export * from './useConfig';
 export * from './useCurrencies';
 export * from './useCurrencyOptions';

package/src/react/hooks/useAutoSelectFeeOption.tsx

@@ -0,0 +1,197 @@
+import { zeroAddress, type Address } from 'viem';
+import { useAccount } from 'wagmi';
+import type { FeeOption } from '../ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect';
+import { useCallback } from 'react';
+import { useChain } from '@0xsequence/kit';
+import { useCollectionBalanceDetails } from './useCollectionBalanceDetails';
+
+enum AutoSelectFeeOptionError {
+	UserNotConnected = 'User not connected',
+	NoOptionsProvided = 'No options provided',
+	FailedToCheckBalances = 'Failed to check balances',
+	InsufficientBalanceForAnyFeeOption = 'Insufficient balance for any fee option',
+}
+
+type UseAutoSelectFeeOptionArgs = {
+	pendingFeeOptionConfirmation: {
+		id: string;
+		options: FeeOption[] | undefined;
+		chainId: number;
+	};
+};
+
+/**
+ * A React hook that automatically selects the first fee option for which the user has sufficient balance.
+ *
+ * @param {Object} params.pendingFeeOptionConfirmation - Configuration for fee option selection
+ *
+ * @returns {Promise<{
+ *   selectedOption: FeeOption | null,
+ *   error: AutoSelectFeeOptionError | null,
+ *   isLoading?: boolean
+ * }>} A promise that resolves to an object containing:
+ *   - selectedOption: The first fee option with sufficient balance, or null if none found
+ *   - error: Error message if selection fails, null otherwise
+ *   - isLoading: True while checking balances
+ *
+ * @throws {AutoSelectFeeOptionError} Possible errors:
+ *   - UserNotConnected: When no wallet is connected
+ *   - NoOptionsProvided: When fee options array is undefined
+ *   - FailedToCheckBalances: When balance checking fails
+ *   - InsufficientBalanceForAnyFeeOption: When user has insufficient balance for all options
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [pendingFeeOptionConfirmation, confirmPendingFeeOption] = useWaasFeeOptions();
+ *
+ *   const autoSelectOptionPromise = useAutoSelectFeeOption({
+ *     pendingFeeOptionConfirmation: pendingFeeOptionConfirmation
+ *       ? {
+ *           id: pendingFeeOptionConfirmation.id,
+ *           options: pendingFeeOptionConfirmation.options,
+ *           chainId: 1
+ *         }
+ *       : {
+ *           id: '',
+ *           options: undefined,
+ *           chainId: 1
+ *         }
+ *   });
+ *
+ *   useEffect(() => {
+ *     autoSelectOptionPromise.then((result) => {
+ *       if (result.isLoading) {
+ *         console.log('Checking balances...');
+ *         return;
+ *       }
+ *
+ *       if (result.error) {
+ *         console.error('Failed to select fee option:', result.error);
+ *         return;
+ *       }
+ *
+ *       if (pendingFeeOptionConfirmation?.id && result.selectedOption) {
+ *         confirmPendingFeeOption(
+ *           pendingFeeOptionConfirmation.id,
+ *           result.selectedOption.token.contractAddress
+ *         );
+ *       }
+ *     });
+ *   }, [autoSelectOptionPromise, confirmPendingFeeOption, pendingFeeOptionConfirmation]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export function useAutoSelectFeeOption({
+	pendingFeeOptionConfirmation,
+}: UseAutoSelectFeeOptionArgs) {
+	const { address: userAddress } = useAccount();
+
+	// one token that has null contract address is native token, so we need to replace it with zero address
+	const contractWhitelist = pendingFeeOptionConfirmation.options?.map(
+		(option) =>
+			option.token.contractAddress === null
+				? zeroAddress
+				: (option.token.contractAddress as Address),
+	);
+
+	const {
+		data: balanceDetails,
+		isLoading: isBalanceDetailsLoading,
+		isError: isBalanceDetailsError,
+	} = useCollectionBalanceDetails({
+		chainId: pendingFeeOptionConfirmation.chainId,
+		filter: {
+			accountAddresses: userAddress ? [userAddress] : [],
+			contractWhitelist,
+			omitNativeBalances: false,
+		},
+		query: {
+			enabled: !!pendingFeeOptionConfirmation.options && !!userAddress,
+		},
+	});
+	const chain = useChain(pendingFeeOptionConfirmation.chainId);
+
+	// combine native balance and erc20 balances
+	const combinedBalances = balanceDetails && [
+		...balanceDetails.nativeBalances.map((b) => ({
+			chainId: pendingFeeOptionConfirmation.chainId,
+			balance: b.balance,
+			symbol: chain?.nativeCurrency.symbol,
+			contractAddress: zeroAddress,
+		})),
+		...balanceDetails.balances.map((b) => ({
+			chainId: b.chainId,
+			balance: b.balance,
+			symbol: b.contractInfo?.symbol,
+			contractAddress: b.contractAddress,
+		})),
+	];
+
+	console.debug('currency balances', combinedBalances);
+
+	const autoSelectedOption = useCallback(async () => {
+		if (!userAddress) {
+			return {
+				selectedOption: null,
+				error: AutoSelectFeeOptionError.UserNotConnected,
+			};
+		}
+
+		if (!pendingFeeOptionConfirmation.options) {
+			return {
+				selectedOption: null,
+				error: AutoSelectFeeOptionError.NoOptionsProvided,
+			};
+		}
+
+		if (isBalanceDetailsLoading) {
+			return { selectedOption: null, error: null, isLoading: true };
+		}
+
+		if (isBalanceDetailsError || !combinedBalances) {
+			return {
+				selectedOption: null,
+				error: AutoSelectFeeOptionError.FailedToCheckBalances,
+			};
+		}
+
+		const selectedOption = pendingFeeOptionConfirmation.options.find(
+			(option) => {
+				const tokenBalance = combinedBalances.find(
+					(balance) =>
+						balance.contractAddress.toLowerCase() ===
+						(option.token.contractAddress === null
+							? zeroAddress
+							: option.token.contractAddress
+						).toLowerCase(),
+				);
+
+				if (!tokenBalance) return false;
+
+				return BigInt(tokenBalance.balance) >= BigInt(option.value);
+			},
+		);
+
+		if (!selectedOption) {
+			return {
+				selectedOption: null,
+				error: AutoSelectFeeOptionError.InsufficientBalanceForAnyFeeOption,
+			};
+		}
+
+		console.debug('auto selected option', selectedOption);
+
+		return { selectedOption, error: null };
+	}, [
+		userAddress,
+		pendingFeeOptionConfirmation.options,
+		isBalanceDetailsLoading,
+		isBalanceDetailsError,
+		combinedBalances,
+	]);
+
+	return autoSelectedOption();
+}

package/src/react/hooks/useCancelOrder.tsx

@@ -1,6 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useCancelTransactionSteps } from './useCancelTransactionSteps';
 import type { MarketplaceKind } from '../../types';
+import { useWaasFeeOptions } from '@0xsequence/kit';
+import { useAutoSelectFeeOption } from './useAutoSelectFeeOption';
 
 interface UseCancelOrderArgs {
 	collectionAddress: string;
@@ -29,6 +31,44 @@ export const useCancelOrder = ({
 	const [cancellingOrderId, setCancellingOrderId] = useState<string | null>(
 		null,
 	);
+	const [pendingFeeOptionConfirmation, confirmPendingFeeOption] =
+		useWaasFeeOptions();
+	const autoSelectOptionPromise = useAutoSelectFeeOption({
+		pendingFeeOptionConfirmation: pendingFeeOptionConfirmation
+			? {
+					id: pendingFeeOptionConfirmation.id,
+					options: pendingFeeOptionConfirmation.options?.map((opt) => ({
+						...opt,
+						token: {
+							...opt.token,
+							contractAddress: opt.token.contractAddress || null,
+							decimals: opt.token.decimals || 0,
+							tokenID: opt.token.tokenID || null,
+						},
+					})),
+					chainId: Number(chainId),
+				}
+			: {
+					id: '',
+					options: undefined,
+					chainId: Number(chainId),
+				},
+	});
+
+	useEffect(() => {
+		autoSelectOptionPromise.then((res) => {
+			if (pendingFeeOptionConfirmation?.id && res.selectedOption) {
+				confirmPendingFeeOption(
+					pendingFeeOptionConfirmation.id,
+					res.selectedOption.token.contractAddress,
+				);
+			}
+		});
+	}, [
+		autoSelectOptionPromise,
+		confirmPendingFeeOption,
+		pendingFeeOptionConfirmation,
+	]);
 
 	const { cancelOrder: cancelOrderBase } = useCancelTransactionSteps({
 		collectionAddress,

package/src/react/hooks/useCollectionBalanceDetails.tsx

@@ -0,0 +1,87 @@
+import { z } from 'zod';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	balanceQueries,
+	getIndexerClient,
+} from '../_internal';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { useConfig } from './useConfig';
+import type { GetTokenBalancesDetailsReturn } from '@0xsequence/indexer';
+import type { SdkConfig } from '../../types';
+
+const filterSchema = z.object({
+	accountAddresses: z.array(AddressSchema),
+	contractWhitelist: z.array(AddressSchema).optional(),
+	omitNativeBalances: z.boolean(),
+});
+
+const useCollectionBalanceDetailsArgsSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.number()),
+	filter: filterSchema,
+	query: QueryArgSchema.optional(),
+});
+
+export type CollectionBalanceFilter = z.infer<typeof filterSchema>;
+export type UseCollectionBalanceDetailsArgs = z.input<
+	typeof useCollectionBalanceDetailsArgsSchema
+>;
+
+const fetchCollectionBalanceDetails = async (
+	args: UseCollectionBalanceDetailsArgs,
+	indexerClient: Awaited<ReturnType<typeof getIndexerClient>>,
+) => {
+	const promises = args.filter.accountAddresses.map((accountAddress) =>
+		indexerClient.getTokenBalancesDetails({
+			filter: {
+				accountAddresses: [accountAddress],
+				contractWhitelist: args.filter.contractWhitelist,
+				omitNativeBalances: args.filter.omitNativeBalances,
+			},
+		}),
+	);
+
+	const responses = await Promise.all(promises);
+	const mergedResponse = responses.reduce<GetTokenBalancesDetailsReturn>(
+		(acc, curr) => {
+			if (!curr) return acc;
+			return {
+				page: curr.page,
+				nativeBalances: [
+					...(acc.nativeBalances || []),
+					...(curr.nativeBalances || []),
+				],
+				balances: [...(acc.balances || []), ...(curr.balances || [])],
+			};
+		},
+		{ page: {}, nativeBalances: [], balances: [] },
+	);
+
+	if (!mergedResponse) {
+		throw new Error('Failed to fetch collection balance details');
+	}
+
+	return mergedResponse;
+};
+
+export const collectionBalanceDetailsOptions = (
+	args: UseCollectionBalanceDetailsArgs,
+	config: SdkConfig,
+) => {
+	const parsedArgs = useCollectionBalanceDetailsArgsSchema.parse(args);
+	const indexerClient = getIndexerClient(parsedArgs.chainId, config);
+
+	return queryOptions({
+		queryKey: [...balanceQueries.collectionBalanceDetails, args, config],
+		queryFn: () => fetchCollectionBalanceDetails(parsedArgs, indexerClient),
+		...args.query,
+	});
+};
+
+export const useCollectionBalanceDetails = (
+	args: UseCollectionBalanceDetailsArgs,
+) => {
+	const config = useConfig();
+	return useQuery(collectionBalanceDetailsOptions(args, config));
+};

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

@@ -9,7 +9,7 @@ import type {
 	Order,
 	OrderbookKind,
 } from '../../../_internal';
-import { useCurrency, useHighestOffer } from '../../../hooks';
+import { useCurrency } from '../../../hooks';
 import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
 import { ActionButton } from '../_internals/action-button/ActionButton';
@@ -95,13 +95,8 @@ export function CollectibleCard({
 	onCannotPerformAction,
 }: CollectibleCardProps) {
 	const collectibleMetadata = lowestListing?.metadata;
+	const highestOffer = lowestListing?.offer
 	const [imageLoadingError, setImageLoadingError] = useState(false);
-	const { data: highestOffer, isLoading: highestOfferLoading } =
-		useHighestOffer({
-			chainId: String(chainId),
-			collectionAddress,
-			tokenId: collectibleId,
-		});
 
 	const { data: lowestListingCurrency } = useCurrency({
 		chainId,
@@ -111,13 +106,13 @@ export function CollectibleCard({
 			enabled: !!lowestListing?.order?.priceCurrencyAddress,
 		},
 	});
-	if (highestOfferLoading || cardLoading) {
+	if (cardLoading) {
 		return <CollectibleSkeleton />;
 	}
 
 	const action = (
 		balance
-			? (highestOffer?.order && CollectibleCardAction.SELL) ||
+			? (highestOffer && CollectibleCardAction.SELL) ||
 				(!lowestListing?.order && CollectibleCardAction.LIST) ||
 				CollectibleCardAction.TRANSFER
 			: (lowestListing?.order && CollectibleCardAction.BUY) ||
@@ -158,6 +153,8 @@ export function CollectibleCard({
 						<IconButton
 							as="a"
 							href={externalUrl}
+							target="_blank"
+							rel="noopener noreferrer"
 							size="sm"
 							backdropFilter="blur"
 							variant="glass"
@@ -165,6 +162,7 @@ export function CollectibleCard({
 								e.stopPropagation();
 							}}
 							position="absolute"
+							zIndex="20"
 							top="2"
 							left="2"
 							icon={SvgDiamondEyeIcon}
@@ -181,8 +179,8 @@ export function CollectibleCard({
 					<Footer
 						name={name || ''}
 						type={collectionType}
-						onOfferClick={() => onOfferClick?.({ order: highestOffer?.order })}
-						highestOffer={highestOffer?.order}
+						onOfferClick={() => onOfferClick?.({ order: highestOffer })}
+						highestOffer={highestOffer}
 						lowestListingPriceAmount={lowestListing?.order?.priceAmount}
 						lowestListingCurrency={lowestListingCurrency}
 						balance={balance}
@@ -202,7 +200,7 @@ export function CollectibleCard({
 								tokenId={collectibleId}
 								orderbookKind={orderbookKind}
 								action={action}
-								highestOffer={highestOffer?.order}
+								highestOffer={highestOffer}
 								lowestListing={lowestListing?.order}
 								owned={!!balance}
 								onCannotPerformAction={onCannotPerformAction}

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

@@ -9,7 +9,7 @@ export const collectibleCard = style([
 			border: '1px solid hsla(247, 100%, 75%, 1)',
 			boxShadow: '0px 0px 0px 1px hsla(247, 100%, 75%, 1)',
 		},
-		':focus': {
+		':focus-visible': {
 			border: '1px solid hsla(247, 100%, 75%, 1)',
 			boxShadow: '0px 0px 0px 2px hsla(247, 100%, 75%, 1)',
 			outline: '4px solid hsla(254, 100%, 57%, 1)',

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

@@ -13,8 +13,8 @@ const Svg = () => (
 	>
 		<title id="cart-title">Cart Icon</title>
 		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
+			fillRule="evenodd"
+			clipRule="evenodd"
 			d="M2.5 3.46836C2.5 3.20969 2.72366 3 2.99955 3H5.16925C5.88938 3 6.5077 3.48022 6.64172 4.14359L8.33188 12.5093C8.37655 12.7304 8.58266 12.8905 8.8227 12.8905H16.987C17.2629 12.8905 17.4866 13.1002 17.4866 13.3589C17.4866 13.6175 17.2629 13.8272 16.987 13.8272H8.8227C8.10257 13.8272 7.48425 13.347 7.35023 12.6836L5.66007 4.31793C5.6154 4.0968 5.40929 3.93673 5.16925 3.93673H2.99955C2.72366 3.93673 2.5 3.72704 2.5 3.46836Z"
 			fill="white"
 		/>

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

@@ -117,17 +117,20 @@ export const useBuyCollectable = ({
 				enableSwapPayments: !!input.checkoutOptions.swap,
 				creditCardProviders: input.checkoutOptions.nftCheckout || [],
 				onSuccess: (hash: string) => {
+					callbacks?.onSuccess?.({ hash: hash as Hash });
+				},
+				onError: callbacks?.onError,
+				onClose: () => {
 					invalidateQueries([
 						collectableKeys.listings,
+						collectableKeys.lowestListings,
 						collectableKeys.listingsCount,
 						collectableKeys.lists,
 						collectableKeys.userBalances,
 						balanceQueries.all,
+						balanceQueries.collectionBalanceDetails,
 					]);
-					callbacks?.onSuccess?.({ hash: hash as Hash });
-				},
-				onError: callbacks?.onError,
-				onClose: () => {
+
 					buyModal$.close();
 				},
 			});

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

@@ -62,7 +62,11 @@ const useHandleTransfer = () => {
 				collectibleId,
 				price: undefined,
 				type: TransactionType.TRANSFER,
-				queriesToInvalidate: [balanceQueries.all, collectableKeys.userBalances],
+				queriesToInvalidate: [
+					balanceQueries.all,
+					balanceQueries.collectionBalanceDetails,
+					collectableKeys.userBalances,
+				],
 			});
 		} catch (error) {
 			transferModal$.view.set('enterReceiverAddress');

package/src/react/ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect.tsx

@@ -2,7 +2,7 @@ import { Box, Image, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import { useEffect } from 'react';
-import { formatUnits } from 'viem';
+import { formatUnits, zeroAddress } from 'viem';
 import {
 	CustomSelect,
 	type SelectItem,
@@ -32,12 +32,19 @@ const WaasFeeOptionsSelect = observer(
 		options: FeeOption[];
 		selectedFeeOption$: Observable<FeeOption | undefined>;
 	}) => {
-		const feeOptions = options
-			.filter((option) => option.token.contractAddress !== null)
-			.map((option) => {
-				const value = option.token.contractAddress ?? '';
-				return FeeOptionSelectItem({ value, option });
-			});
+		options = options.map((option) => ({
+			...option,
+			token: {
+				...option.token,
+				contractAddress: option.token.contractAddress || zeroAddress,
+			},
+		}));
+
+		const feeOptions = options.map((option) => {
+			const value = option.token.contractAddress ?? '';
+
+			return FeeOptionSelectItem({ value, option });
+		});
 
 		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 		useEffect(() => {