@0xsequence/marketplace-sdk 0.8.12 → 0.9.0

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

@@ -1,19 +1,19 @@
 import type { Observable } from '@legendapp/state';
-import { type Address, type Hex, formatUnits } from 'viem';
+import { type Address, formatUnits, type Hex } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	balanceQueries,
+	collectableKeys,
 	ExecuteType,
+	getMarketplaceClient,
 	type Step,
 	StepType,
 	type TransactionSteps,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
-import { TransactionType } from '../../../../_internal/types';
 import type { OfferInput } from '../../../../_internal/types';
+import { TransactionType } from '../../../../_internal/types';
 import type {
 	SignatureStep,
 	TransactionStep,
@@ -58,7 +58,7 @@ export const useTransactionSteps = ({
 		});
 	const { data: currency } = useCurrency({
 		chainId,
-		currencyAddress: offerInput.offer.currencyAddress,
+		currencyAddress: offerInput.offer.currencyAddress as Address,
 	});
 
 	const getOfferSteps = async () => {
@@ -106,7 +106,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};

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

@@ -1,5 +1,5 @@
 import type { ModalCallbacks } from '../_internal/types';
-import { type OpenMakeOfferModalArgs, makeOfferModal$ } from './store';
+import { makeOfferModal$, type OpenMakeOfferModalArgs } from './store';
 
 export type ShowMakeOfferModalArgs = Exclude<
 	OpenMakeOfferModalArgs,

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

@@ -2,8 +2,8 @@
 
 import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { Show, observer } from '@legendapp/state/react';
-import { parseUnits } from 'viem';
+import { observer, Show } from '@legendapp/state/react';
+import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
 import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
@@ -50,7 +50,7 @@ const Modal = observer(() => {
 		isError: currencyError,
 	} = useCurrency({
 		chainId,
-		currencyAddress: order?.priceCurrencyAddress ?? '',
+		currencyAddress: order?.priceCurrencyAddress as Address | undefined,
 	});
 	const { wallet } = useWallet();
 	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();

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

@@ -2,13 +2,15 @@ import { cleanup, render, renderHook, screen, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useSellModal } from '..';
 import { StepType, WalletKind } from '../../../../_internal';
-import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import {
+	createMockStep,
+	mockOrder,
+} from '../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
-import { SellModal } from '../Modal';
+import { useSellModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+import { SellModal } from '../Modal';
 
 const defaultArgs = {
 	collectionAddress: TEST_COLLECTIBLE.collectionAddress,

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

@@ -1,10 +1,10 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import {
 	type GenerateSellTransactionArgs,
+	getMarketplaceClient,
 	type MarketplaceKind,
 	type OrderData,
 	StepType,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -43,7 +43,6 @@ export const useSell = ({
 			marketplace,
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

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

@@ -1,15 +1,15 @@
 import type { Observable } from '@legendapp/state';
-import { formatUnits } from 'viem';
 import type { Address, Hex } from 'viem';
+import { formatUnits } from 'viem';
 import {
+	balanceQueries,
+	collectableKeys,
 	ExecuteType,
+	getMarketplaceClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
 	type TransactionSteps,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
 import { TransactionType } from '../../../../_internal/types';
@@ -23,9 +23,9 @@ import {
 	useGenerateSellTransaction,
 	useMarketCurrencies,
 } from '../../../../hooks';
-import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import type { SellOrder } from './useSell';
 export type ExecutionState = 'approval' | 'sell' | null;
 
@@ -119,7 +119,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};

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

@@ -1,7 +1,7 @@
 import { cleanup, render, screen } from '@test';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
 import type { ModalCallbacks } from '../../_internal/types';
+import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
 import { successfulPurchaseModalStore } from '../store';
 
 describe('SuccessfulPurchaseModal', () => {

package/src/react/ui/modals/TransferModal/_store.ts

@@ -1,8 +1,8 @@
 import { observable } from '@legendapp/state';
 import type { Hex } from 'viem';
-import type { ShowTransferModalArgs } from '.';
 import type { CollectionType } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
+import type { ShowTransferModalArgs } from '.';
 
 export type TransferModalView =
 	| 'enterReceiverAddress'
@@ -46,12 +46,6 @@ export const initialState: TransferModalState = {
 	},
 	close: () => {
 		transferModal$.isOpen.set(false);
-
-		// TODO: this doesn't work as expected
-		transferModal$.state.set({
-			...initialState.state,
-		});
-
 		transferModal$.state.receiverAddress.set('');
 		transferModal$.state.transferIsBeingProcessed.set(false);
 		transferModal$.view.set('enterReceiverAddress');

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TokenQuantityInput.tsx

@@ -1,5 +1,4 @@
-import { cn } from '@0xsequence/design-system';
-import { Text } from '@0xsequence/design-system';
+import { cn, Text } from '@0xsequence/design-system';
 import { observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import QuantityInput from '../../../../_internal/components/quantityInput';
@@ -23,7 +22,7 @@ const TokenQuantityInput = observer(
 			try {
 				const quantityBigInt = BigInt($quantity.get());
 				insufficientBalance = quantityBigInt > balanceAmount;
-			} catch (e) {
+			} catch (_e) {
 				insufficientBalance = true;
 			}
 		}

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

@@ -4,9 +4,9 @@ import { Text } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import { isAddress } from 'viem';
 import { useAccount } from 'wagmi';
-import { useCollection, useListBalances } from '../../../../..';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import { compareAddress } from '../../../../../../utils';
+import { useCollection, useListBalances } from '../../../../..';
 import { type CollectionType, ContractType } from '../../../../../_internal';
 import AlertMessage from '../../../_internal/components/alertMessage';
 import { selectWaasFeeOptions$ } from '../../../_internal/components/selectWaasFeeOptions/store';
@@ -56,7 +56,7 @@ const EnterWalletAddressView = observer(() => {
 		try {
 			const quantityBigInt = BigInt($quantity.get());
 			insufficientBalance = quantityBigInt > BigInt(balanceAmount);
-		} catch (e) {
+		} catch (_e) {
 			insufficientBalance = true;
 		}
 	}

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@test';
-import { type Address, type PublicClient, custom, zeroAddress } from 'viem';
+import { type Address, custom, type PublicClient, zeroAddress } from 'viem';
 import { mainnet, polygon } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { WalletKind } from '../../../../../_internal';

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -1,12 +1,10 @@
 'use client';
 
+import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 import type React from 'react';
 import type { ComponentProps } from 'react';
-
-import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
-import { MODAL_OVERLAY_PROPS } from '../consts';
-import { MODAL_CONTENT_PROPS } from '../consts';
+import { MODAL_CONTENT_PROPS, MODAL_OVERLAY_PROPS } from '../consts';
 import { useSwitchChainModal } from '../switchChainModal';
 
 export interface ActionModalProps {

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

@@ -5,9 +5,9 @@ import { TEST_CURRENCIES, TEST_CURRENCY } from '@test/const';
 import { screen } from '@testing-library/react';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import CurrencyOptionsSelect from '..';
 import type { Currency } from '../../../../../../_internal';
 import * as hooks from '../../../../../../hooks';
+import CurrencyOptionsSelect from '..';
 
 const defaultProps = {
 	collectionAddress: zeroAddress,

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

@@ -36,7 +36,6 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 		});
 
 	// set default currency
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			currencies &&

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Text } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useComparePrices, useLowestListing } from '../../../../../hooks';
 
@@ -34,10 +34,10 @@ export default function FloorPriceText({
 		useComparePrices({
 			chainId,
 			priceAmountRaw: price.amountRaw || '0',
-			priceCurrencyAddress: price.currency.contractAddress,
+			priceCurrencyAddress: price.currency.contractAddress as Address,
 			compareToPriceAmountRaw: floorPriceRaw || '0',
-			compareToPriceCurrencyAddress:
-				listing?.priceCurrencyAddress || price.currency.contractAddress,
+			compareToPriceCurrencyAddress: (listing?.priceCurrencyAddress ||
+				price.currency.contractAddress) as Address,
 			query: {
 				enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== '0',
 			},

package/src/react/ui/modals/_internal/components/quantityInput/QuantityInputBase.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import {
+	AddIcon,
+	IconButton,
+	NumericInput,
+	SubtractIcon,
+} from '@0xsequence/design-system';
+import * as dn from 'dnum';
+import { useState } from 'react';
+import { cn } from '../../../../../../utils';
+
+type QuantityInputBaseProps = {
+	value: string;
+	onChange: (value: string) => void;
+	isInvalid: boolean;
+	onInvalidChange: (isInvalid: boolean) => void;
+	decimals: number;
+	maxQuantity: string;
+	className?: string;
+	disabled?: boolean;
+};
+
+export function QuantityInputBase({
+	value,
+	onChange,
+	isInvalid,
+	onInvalidChange,
+	decimals,
+	maxQuantity,
+	className,
+	disabled,
+}: QuantityInputBaseProps) {
+	const dnMaxQuantity = dn.from(maxQuantity, decimals);
+	const dnOne = dn.from('1', decimals);
+	const min = decimals > 0 ? Number(`0.${'1'.padStart(decimals, '0')}`) : 0;
+	const dnMin = dn.from(min, decimals);
+
+	const [dnQuantity, setDnQuantity] = useState(dn.from(value, decimals));
+
+	const [localQuantity, setLocalQuantity] = useState(value);
+
+	const setQuantity = ({
+		value,
+		isValid,
+	}: {
+		value: string;
+		isValid: boolean;
+	}) => {
+		setLocalQuantity(value);
+		if (isValid) {
+			onChange(value);
+			setDnQuantity(dn.from(value, decimals));
+			onInvalidChange(false);
+		} else {
+			onInvalidChange(true);
+		}
+	};
+
+	function handleChangeQuantity(value: string) {
+		if (!value || Number.isNaN(Number(value)) || value.endsWith('.')) {
+			setQuantity({
+				value: value,
+				isValid: false,
+			});
+			return;
+		}
+		const dnValue = dn.from(value, decimals);
+		const isBiggerThanMax = dn.greaterThan(dnValue, dnMaxQuantity);
+		const isLessThanMin = dn.lessThan(dnValue, dnMin);
+
+		if (isLessThanMin) {
+			setQuantity({
+				value: value, // Trying to enter fraction starting with 0
+				isValid: false,
+			});
+			return;
+		}
+
+		if (isBiggerThanMax) {
+			setQuantity({
+				value: maxQuantity,
+				isValid: true, // Is vaid is true because we override the value
+			});
+			return;
+		}
+
+		setQuantity({
+			value: dn.toString(dnValue, decimals),
+			isValid: true,
+		});
+	}
+
+	function handleIncrement() {
+		const newValue = dn.add(dnQuantity, dnOne);
+		if (dn.greaterThanOrEqual(newValue, dnMaxQuantity)) {
+			setQuantity({
+				value: maxQuantity,
+				isValid: true,
+			});
+		} else {
+			setQuantity({
+				value: dn.toString(newValue, decimals),
+				isValid: true,
+			});
+		}
+	}
+
+	function handleDecrement() {
+		const newValue = dn.subtract(dnQuantity, dnOne);
+		if (dn.lessThanOrEqual(newValue, dnMin)) {
+			setQuantity({
+				value: String(min),
+				isValid: true,
+			});
+		} else {
+			setQuantity({
+				value: dn.toString(newValue, decimals),
+				isValid: true,
+			});
+		}
+	}
+
+	return (
+		<div
+			className={cn(
+				'flex w-full flex-col [&>label>div>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div>div:has(:disabled)]:opacity-100 [&>label>div>div>div>input]:text-xs [&>label>div>div>div]:h-9 [&>label>div>div>div]:rounded [&>label>div>div>div]:pr-0 [&>label>div>div>div]:pl-3 [&>label>div>div>div]:text-xs [&>label]:gap-[2px]',
+				className,
+				disabled && 'pointer-events-none opacity-50',
+			)}
+		>
+			<NumericInput
+				className="w-full pl-1"
+				name={'quantity'}
+				decimals={decimals || 0}
+				label={'Enter quantity'}
+				labelLocation="top"
+				controls={
+					<div className="mr-2 flex items-center gap-1">
+						<IconButton
+							disabled={dn.lessThanOrEqual(dnQuantity, dnMin)}
+							onClick={handleDecrement}
+							size="xs"
+							icon={SubtractIcon}
+						/>
+
+						<IconButton
+							disabled={dn.greaterThanOrEqual(dnQuantity, dnMaxQuantity)}
+							onClick={handleIncrement}
+							size="xs"
+							icon={AddIcon}
+						/>
+					</div>
+				}
+				value={localQuantity}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+					handleChangeQuantity(e.target.value)
+				}
+				width={'full'}
+			/>
+			{isInvalid && (
+				<div className="text-negative text-sm">Invalid quantity</div>
+			)}
+		</div>
+	);
+}

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

@@ -1,16 +1,8 @@
 'use client';
 
-import {
-	AddIcon,
-	IconButton,
-	NumericInput,
-	SubtractIcon,
-} from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import * as dn from 'dnum';
-import { useState } from 'react';
-import { cn } from '../../../../../../utils';
+import { QuantityInputBase } from './QuantityInputBase';
 
 type QuantityInputProps = {
 	$quantity: Observable<string>;
@@ -21,6 +13,7 @@ type QuantityInputProps = {
 	disabled?: boolean;
 };
 
+// Using observer to ensure re-render on observable changes
 export default observer(function QuantityInput({
 	$quantity,
 	$invalidQuantity,
@@ -29,138 +22,16 @@ export default observer(function QuantityInput({
 	className,
 	disabled,
 }: QuantityInputProps) {
-	const dnMaxQuantity = dn.from(maxQuantity, decimals);
-	const dnOne = dn.from('1', decimals);
-	const min = decimals > 0 ? Number(`0.${'1'.padStart(decimals, '0')}`) : 0;
-	const dnMin = dn.from(min, decimals);
-
-	const [dnQuantity, setDnQuantity] = useState(
-		dn.from($quantity.get(), decimals),
-	);
-
-	const [localQuantity, setLocalQuantity] = useState($quantity.get());
-
-	const setQuantity = ({
-		value,
-		isValid,
-	}: {
-		value: string;
-		isValid: boolean;
-	}) => {
-		setLocalQuantity(value);
-		if (isValid) {
-			$quantity.set(value);
-			setDnQuantity(dn.from(value, decimals));
-			$invalidQuantity.set(false);
-		} else {
-			$invalidQuantity.set(true);
-		}
-	};
-
-	function handleChangeQuantity(value: string) {
-		if (!value || Number.isNaN(Number(value)) || value.endsWith('.')) {
-			setQuantity({
-				value: value,
-				isValid: false,
-			});
-			return;
-		}
-		const dnValue = dn.from(value, decimals);
-		const isBiggerThanMax = dn.greaterThan(dnValue, dnMaxQuantity);
-		const isLessThanMin = dn.lessThan(dnValue, dnMin);
-
-		if (isLessThanMin) {
-			setQuantity({
-				value: value, // Trying to enter fraction starting with 0
-				isValid: false,
-			});
-			return;
-		}
-
-		if (isBiggerThanMax) {
-			setQuantity({
-				value: maxQuantity,
-				isValid: true, // Is vaid is true because we override the value
-			});
-			return;
-		}
-
-		setQuantity({
-			value: dn.toString(dnValue, decimals),
-			isValid: true,
-		});
-	}
-
-	function handleIncrement() {
-		const newValue = dn.add(dnQuantity, dnOne);
-		if (dn.greaterThanOrEqual(newValue, dnMaxQuantity)) {
-			setQuantity({
-				value: maxQuantity,
-				isValid: true,
-			});
-		} else {
-			setQuantity({
-				value: dn.toString(newValue, decimals),
-				isValid: true,
-			});
-		}
-	}
-
-	function handleDecrement() {
-		const newValue = dn.subtract(dnQuantity, dnOne);
-		if (dn.lessThanOrEqual(newValue, dnMin)) {
-			setQuantity({
-				value: String(min),
-				isValid: true,
-			});
-		} else {
-			setQuantity({
-				value: dn.toString(newValue, decimals),
-				isValid: true,
-			});
-		}
-	}
-
 	return (
-		<div
-			className={cn(
-				'flex w-full flex-col [&>label>div>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div>div:has(:disabled)]:opacity-100 [&>label>div>div>div>input]:text-xs [&>label>div>div>div]:h-9 [&>label>div>div>div]:rounded [&>label>div>div>div]:pr-0 [&>label>div>div>div]:pl-3 [&>label>div>div>div]:text-xs [&>label]:gap-[2px]',
-				className,
-				disabled && 'pointer-events-none opacity-50',
-			)}
-		>
-			<NumericInput
-				className="w-full pl-1"
-				name={'quantity'}
-				decimals={decimals || 0}
-				label={'Enter quantity'}
-				labelLocation="top"
-				controls={
-					<div className="mr-2 flex items-center gap-1">
-						<IconButton
-							disabled={dn.lessThanOrEqual(dnQuantity, dnMin)}
-							onClick={handleDecrement}
-							size="xs"
-							icon={SubtractIcon}
-						/>
-
-						<IconButton
-							disabled={dn.greaterThanOrEqual(dnQuantity, dnMaxQuantity)}
-							onClick={handleIncrement}
-							size="xs"
-							icon={AddIcon}
-						/>
-					</div>
-				}
-				value={localQuantity}
-				onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-					handleChangeQuantity(e.target.value)
-				}
-				width={'full'}
-			/>
-			{$invalidQuantity.get() && (
-				<div className="text-negative text-sm">Invalid quantity</div>
-			)}
-		</div>
+		<QuantityInputBase
+			value={$quantity.get()}
+			onChange={(value) => $quantity.set(value)}
+			isInvalid={$invalidQuantity.get()}
+			onInvalidChange={(isInvalid) => $invalidQuantity.set(isInvalid)}
+			decimals={decimals}
+			maxQuantity={maxQuantity}
+			className={className}
+			disabled={disabled}
+		/>
 	);
 });

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/__tests__/SelectWaasFeeOptions.test.tsx

@@ -6,12 +6,12 @@ import { observable } from '@legendapp/state';
 import { render, screen } from '@test';
 import { TEST_CURRENCY } from '@test/const';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import SelectWaasFeeOptions from '..';
 import type {
 	FeeOption,
 	FeeOptionExtended,
 	WaasFeeOptionConfirmation,
 } from '../../../../../../../types/waas-types';
+import SelectWaasFeeOptions from '..';
 import { selectWaasFeeOptions$ } from '../store';
 import * as useWaasFeeOptionManagerModule from '../useWaasFeeOptionManager';
 

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/BalanceIndicator.tsx

@@ -1,5 +1,4 @@
-import { Text, WarningIcon } from '@0xsequence/design-system';
-import { CheckmarkIcon } from '@0xsequence/design-system';
+import { CheckmarkIcon, Text, WarningIcon } from '@0xsequence/design-system';
 
 const BalanceIndicator = ({
 	insufficientBalance,

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/useWaasFeeOptionManager.tsx

@@ -22,7 +22,6 @@ const useWaasFeeOptionManager = (chainId: number) => {
 			userAddress: userAddress as Address,
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: it causes a loop
 	useEffect(() => {
 		if (!selectedFeeOption && pendingFeeOptionConfirmation) {
 			if (pendingFeeOptionConfirmation.options.length > 0) {

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

@@ -1,7 +1,7 @@
 import { Image, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
 import type { TokenMetadata } from '@0xsequence/metadata';
 import { observer } from '@legendapp/state/react';
-import { type Hex, formatUnits } from 'viem';
+import { formatUnits, type Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useCollection } from '../../../../../hooks';
 import ChessTileImage from '../../../../images/chess-tile.png';