@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

package/src/react/ui/modals/BuyModal/__tests__/Modal1155.test.tsx

@@ -5,12 +5,17 @@ import {
 	screen,
 	waitForElementToBeRemoved,
 } from '@test';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Order } from '../../../../_internal';
 import { MarketplaceKind, OrderSide, OrderStatus } from '../../../../_internal';
+import type { DatabeatAnalytics } from '../../../../_internal/databeat';
 import { ERC1155QuantityModal } from '../components/ERC1155QuantityModal';
 import { buyModalStore } from '../store';
 
+const analyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
+
 const testOrder: Order = {
 	chainId: 1,
 	orderId: '1',
@@ -57,6 +62,7 @@ describe('ERC1155QuantityModal', () => {
 				marketplace: MarketplaceKind.sequence_marketplace_v2,
 				marketplaceType: 'market',
 			},
+			analyticsFn,
 		});
 	});
 
@@ -82,7 +88,7 @@ describe('ERC1155QuantityModal', () => {
 		// Wait for spinner to disappear if it exists
 		try {
 			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
-		} catch (error) {
+		} catch (_error) {
 			// If no spinner or already gone, continue
 		}
 
@@ -123,7 +129,7 @@ describe('ERC1155QuantityModal', () => {
 		// Wait for spinner to disappear if it exists
 		try {
 			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
-		} catch (error) {
+		} catch (_error) {
 			// If no spinner or already gone, continue
 		}
 
@@ -166,7 +172,7 @@ describe('ERC1155QuantityModal', () => {
 		// Wait for spinner to disappear if it exists
 		try {
 			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
-		} catch (error) {
+		} catch (_error) {
 			// If no spinner or already gone, continue
 		}
 
@@ -214,7 +220,7 @@ describe('ERC1155QuantityModal', () => {
 		// Wait for spinner to disappear if it exists
 		try {
 			await waitForElementToBeRemoved(() => screen.queryByTestId('spinner'));
-		} catch (error) {
+		} catch (_error) {
 			// If no spinner or already gone, continue
 		}
 

package/src/react/ui/modals/BuyModal/__tests__/store.test.ts

@@ -1,6 +1,11 @@
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MarketplaceKind } from '../../../../_internal';
-import { type MarketplaceBuyModalProps, buyModalStore } from '../store';
+import type { DatabeatAnalytics } from '../../../../_internal/databeat';
+import { buyModalStore, type MarketplaceBuyModalProps } from '../store';
+
+const analyticsFn = {
+	trackBuyModalOpened: vi.fn(),
+} as unknown as DatabeatAnalytics;
 
 describe('BuyModal Store', () => {
 	beforeEach(() => {
@@ -29,6 +34,7 @@ describe('BuyModal Store', () => {
 			props: mockProps,
 			onSuccess: () => {},
 			onError: () => {},
+			analyticsFn,
 		});
 
 		const state = buyModalStore.getSnapshot();
@@ -51,6 +57,7 @@ describe('BuyModal Store', () => {
 			props: mockProps,
 			onSuccess: () => {},
 			onError: () => {},
+			analyticsFn,
 		});
 
 		const openState = buyModalStore.getSnapshot();
@@ -75,6 +82,7 @@ describe('BuyModal Store', () => {
 		buyModalStore.send({
 			type: 'open',
 			props: mockProps,
+			analyticsFn,
 		});
 
 		const state1 = buyModalStore.getSnapshot();

package/src/react/ui/modals/BuyModal/components/ERC1155QuantityModal.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { use$, useObservable } from '@legendapp/state/react';
-
 import { Text, TokenImage } from '@0xsequence/design-system';
+import { useState } from 'react';
 import type { Address } from 'viem';
+import { maxUint256 } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
 import type { MarketplaceType } from '../../../../../types';
 import { formatPriceWithFee } from '../../../../../utils/price';
@@ -13,11 +13,14 @@ import { ActionModal } from '../../_internal/components/actionModal';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModalStore, useIsOpen } from '../store';
 
+const INFINITY_STRING = maxUint256.toString();
+
 type ERC1155QuantityModalProps = {
 	order?: Order;
 	marketplaceType: MarketplaceType;
 	quantityDecimals: number;
 	quantityRemaining: string;
+	unlimitedSupply?: boolean;
 	salePrice?: {
 		amount: string;
 		currencyAddress: Address;
@@ -29,16 +32,17 @@ export const ERC1155QuantityModal = ({
 	order,
 	quantityDecimals,
 	quantityRemaining,
+	unlimitedSupply,
 	salePrice,
 	chainId,
 	marketplaceType,
 }: ERC1155QuantityModalProps) => {
 	const isOpen = useIsOpen();
 
-	const localQuantity$ = useObservable('1');
-	const localQuantity = use$(localQuantity$);
-	const invalidQuantity$ = useObservable(false);
-	const invalidQuantity = use$(invalidQuantity$);
+	const [localQuantity, setLocalQuantity] = useState('1');
+	const [invalidQuantity, setInvalidQuantity] = useState(false);
+
+	const maxQuantity = unlimitedSupply ? INFINITY_STRING : quantityRemaining;
 
 	return (
 		<ActionModal
@@ -62,10 +66,12 @@ export const ERC1155QuantityModal = ({
 		>
 			<div className="flex w-full flex-col gap-4">
 				<QuantityInput
-					$quantity={localQuantity$}
-					$invalidQuantity={invalidQuantity$}
+					quantity={localQuantity}
+					invalidQuantity={invalidQuantity}
+					onQuantityChange={setLocalQuantity}
+					onInvalidQuantityChange={setInvalidQuantity}
 					decimals={quantityDecimals}
-					maxQuantity={quantityRemaining}
+					maxQuantity={maxQuantity}
 				/>
 
 				<TotalPrice
@@ -103,9 +109,9 @@ const TotalPrice = ({
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 		chainId,
-		currencyAddress: order
+		currencyAddress: (order
 			? order.priceCurrencyAddress
-			: salePrice?.currencyAddress,
+			: salePrice?.currencyAddress) as Address,
 	});
 
 	let error: null | string = null;

package/src/react/ui/modals/BuyModal/components/ERC1155ShopModal.tsx

@@ -7,8 +7,8 @@ import type { CheckoutOptions } from '../../../../_internal';
 import { LoadingModal } from '../../_internal/components/actionModal/LoadingModal';
 import { useERC1155Checkout } from '../hooks/useERC1155Checkout';
 import {
-	type CheckoutOptionsSalesContractProps,
 	buyModalStore,
+	type CheckoutOptionsSalesContractProps,
 	isShopProps,
 	useBuyModalProps,
 	useCheckoutModalState,
@@ -37,6 +37,8 @@ export const ERC1155ShopModal = ({
 		isShop && modalProps.quantityRemaining
 			? modalProps.quantityRemaining.toString()
 			: '0';
+	const unlimitedSupply =
+		isShop && modalProps.unlimitedSupply ? modalProps.unlimitedSupply : false;
 
 	if (!quantity) {
 		return (
@@ -49,6 +51,7 @@ export const ERC1155ShopModal = ({
 				marketplaceType="shop"
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				chainId={chainId}
 			/>
 		);

package/src/react/ui/modals/BuyModal/hooks/__tests__/useCheckoutOptions.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook, server, waitFor } from '@test';
-import { http, HttpResponse } from 'msw';
+import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createMockWallet } from '../../../../../../../test/mocks/wallet';

package/src/react/ui/modals/BuyModal/hooks/__tests__/useERC1155Checkout.test.tsx

@@ -32,6 +32,7 @@ vi.mock('../../store', () => ({
 	useQuantity: vi.fn(() => 2),
 	useOnSuccess: vi.fn(() => vi.fn()),
 	useOnError: vi.fn(() => vi.fn()),
+	useBuyAnalyticsId: vi.fn(() => '123'),
 	buyModalStore: {
 		send: vi.fn(),
 	},
@@ -87,36 +88,38 @@ describe('useERC1155Checkout', () => {
 		expect(
 			mockUseERC1155SaleContractCheckout.mock.calls,
 		).toMatchInlineSnapshot(`
-      [
         [
-          {
-            "chain": 1,
-            "checkoutOptions": {
-              "crypto": "all",
-              "nftCheckout": [],
-              "onRamp": [],
-              "swap": [],
-            },
-            "collectionAddress": "0x123",
-            "contractAddress": "0x456",
-            "customProviderCallback": undefined,
-            "items": [
-              {
-                "quantity": "2",
-                "tokenId": "1",
+          [
+            {
+              "chain": 1,
+              "chainId": "1",
+              "checkoutOptions": {
+                "crypto": "all",
+                "nftCheckout": [],
+                "onRamp": [],
+                "swap": [],
+              },
+              "collectionAddress": "0x123",
+              "contractAddress": "0x456",
+              "customProviderCallback": undefined,
+              "items": [
+                {
+                  "quantity": "2",
+                  "tokenId": "1",
+                },
+              ],
+              "onClose": [Function],
+              "onError": [Function],
+              "onSuccess": [Function],
+              "supplementaryAnalyticsInfo": {
+                "marketplaceType": "shop",
+                "saleAnalyticsId": "123",
               },
-            ],
-            "onClose": [Function],
-            "onError": [Function],
-            "onSuccess": [Function],
-            "supplementaryAnalyticsInfo": {
-              "type": "mint_shop",
+              "wallet": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
             },
-            "wallet": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
-          },
-        ],
-      ]
-    `);
+          ],
+        ]
+      `);
 
 		expect(result.current.isEnabled).toBe(true);
 	});

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

@@ -1,8 +1,8 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import {
-	type MarketplaceKind,
 	getMarketplaceClient,
+	type MarketplaceKind,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks';
@@ -10,7 +10,7 @@ import { useMarketPlatformFee } from './useMarketPlatformFee';
 
 export type CheckoutOptionsParams = {
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	orderId: string;
 	marketplace: MarketplaceKind;
 };

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

@@ -6,7 +6,13 @@ import type {
 	CheckoutOptionsItem,
 } from '../../../../_internal';
 import { getQueryClient } from '../../../../_internal';
-import { buyModalStore, useOnError, useOnSuccess, useQuantity } from '../store';
+import {
+	buyModalStore,
+	useBuyAnalyticsId,
+	useOnError,
+	useOnSuccess,
+	useQuantity,
+} from '../store';
 
 interface UseERC1155CheckoutParams {
 	chainId: number;
@@ -35,9 +41,11 @@ export const useERC1155Checkout = ({
 	const quantity = useQuantity();
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const saleAnalyticsId = useBuyAnalyticsId();
 
 	const checkout = useERC1155SaleContractCheckout({
 		chain: chainId,
+		chainId: chainId.toString(),
 		contractAddress: salesContractAddress,
 		collectionAddress,
 		items: [
@@ -62,7 +70,8 @@ export const useERC1155Checkout = ({
 		},
 		customProviderCallback,
 		supplementaryAnalyticsInfo: {
-			type: 'mint_shop',
+			marketplaceType: 'shop',
+			saleAnalyticsId,
 		},
 	});
 

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

@@ -2,9 +2,9 @@ import type { SelectPaymentSettings } from '@0xsequence/checkout';
 import { skipToken, useQuery } from '@tanstack/react-query';
 import {
 	type Address,
+	encodeFunctionData,
 	type Hash,
 	type Hex,
-	encodeFunctionData,
 	toHex,
 } from 'viem';
 import { useAccount } from 'wagmi';
@@ -112,7 +112,7 @@ export const getERC721SalePaymentParams = async ({
 			},
 			skipNativeBalanceCheck,
 			supplementaryAnalyticsInfo: {
-				type: 'mint_shop',
+				marketplaceType: 'shop',
 			},
 			nativeTokenAddress,
 			...(customCreditCardProviderCallback && {

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

@@ -7,12 +7,12 @@ import { decodeERC20Approval } from '../../../../../utils/decode/erc20';
 import {
 	type AdditionalFee,
 	type CheckoutOptions,
-	type MarketplaceKind,
-	StepType,
-	WalletKind,
 	getMarketplaceClient,
 	getQueryClient,
 	getSequenceApiClient,
+	type MarketplaceKind,
+	StepType,
+	WalletKind,
 } from '../../../../_internal';
 import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { useConfig } from '../../../../hooks';
@@ -20,6 +20,7 @@ import type { ModalCallbacks } from '../../_internal/types';
 import {
 	buyModalStore,
 	isMarketProps,
+	useBuyAnalyticsId,
 	useBuyModalProps,
 	useOnError,
 	useOnSuccess,
@@ -43,6 +44,7 @@ interface GetBuyCollectableParams {
 	customCreditCardProviderCallback: ((buyStep: Step) => void) | undefined;
 	skipNativeBalanceCheck: boolean | undefined;
 	nativeTokenAddress: string | undefined;
+	buyAnalyticsId: string;
 }
 
 export const getBuyCollectableParams = async ({
@@ -62,6 +64,7 @@ export const getBuyCollectableParams = async ({
 	fee,
 	skipNativeBalanceCheck,
 	nativeTokenAddress,
+	buyAnalyticsId,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
@@ -137,6 +140,8 @@ export const getBuyCollectableParams = async ({
 		supplementaryAnalyticsInfo: {
 			requestId: orderId,
 			marketplaceKind: marketplace,
+			buyAnalyticsId,
+			marketplaceType: 'market',
 		},
 		onError: callbacks?.onError,
 		onClose: () => {
@@ -209,6 +214,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 	);
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const buyAnalyticsId = useBuyAnalyticsId();
 
 	const queryEnabled =
 		!!wallet &&
@@ -243,6 +249,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 						customCreditCardProviderCallback,
 						skipNativeBalanceCheck,
 						nativeTokenAddress,
+						buyAnalyticsId,
 					})
 			: skipToken,
 	});

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

@@ -1,10 +1,18 @@
+import { useAnalytics } from '../../../_internal/databeat';
 import type { ModalCallbacks } from '../_internal/types';
 import { type BuyModalProps, buyModalStore } from './store';
 
 export const useBuyModal = (callbacks?: ModalCallbacks) => {
+	const analyticsFn = useAnalytics();
+
 	return {
 		show: (args: BuyModalProps) =>
-			buyModalStore.send({ type: 'open', props: args, ...callbacks }),
+			buyModalStore.send({
+				type: 'open',
+				props: args,
+				...callbacks,
+				analyticsFn,
+			}),
 		close: () => buyModalStore.send({ type: 'close' }),
 	};
 };

package/src/react/ui/modals/BuyModal/store.ts

@@ -7,6 +7,8 @@ import type {
 	MarketplaceKind,
 	Step,
 } from '../../../_internal';
+import type { useAnalytics } from '../../../_internal/databeat';
+import { flattenAnalyticsArgs } from '../../../_internal/databeat/utils';
 
 export type CheckoutOptionsSalesContractProps = {
 	chainId: number;
@@ -47,6 +49,7 @@ export type ShopBuyModalProps = BuyModalBaseProps & {
 		amount: string;
 		currencyAddress: Address;
 	};
+	unlimitedSupply?: boolean;
 };
 
 // Marketplace type modal props
@@ -86,6 +89,7 @@ type SubModalState = 'idle' | 'opening' | 'open' | 'closed';
 const initialContext = {
 	isOpen: false,
 	props: null as BuyModalProps | null,
+	buyAnalyticsId: '',
 	onError: (() => {}) as onErrorCallback,
 	onSuccess: (() => {}) as onSuccessCallback,
 	quantity: null as number | null,
@@ -103,15 +107,34 @@ export const buyModalStore = createStore({
 				props: BuyModalProps;
 				onError?: onErrorCallback;
 				onSuccess?: onSuccessCallback;
+				analyticsFn: ReturnType<typeof useAnalytics>;
 			},
 		) => {
 			// Prevent duplicate opens
 			if (context.modalState !== 'idle') {
 				return context;
 			}
+			const buyAnalyticsId = crypto.randomUUID();
+
+			const { analyticsProps, analyticsNums } = flattenAnalyticsArgs(
+				event.props,
+			);
+
+			event.analyticsFn.trackBuyModalOpened({
+				props: {
+					buyAnalyticsId,
+					collectionAddress: event.props.collectionAddress,
+					...analyticsProps,
+				},
+				nums: {
+					chainId: event.props.chainId,
+					...analyticsNums,
+				},
+			});
 			return {
 				...context,
 				props: event.props,
+				buyAnalyticsId,
 				onError: event.onError ?? context.onError,
 				onSuccess: event.onSuccess ?? context.onSuccess,
 				isOpen: true,
@@ -210,3 +233,6 @@ export const usePaymentModalState = () =>
 
 export const useCheckoutModalState = () =>
 	useSelector(buyModalStore, (state) => state.context.checkoutModalState);
+
+export const useBuyAnalyticsId = () =>
+	useSelector(buyModalStore, (state) => state.context.buyAnalyticsId);

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Show, observer } from '@legendapp/state/react';
+import { observer, Show, use$ } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
@@ -23,7 +23,10 @@ import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
@@ -47,6 +50,8 @@ const Modal = observer(() => {
 	} = state;
 	const steps$ = createListingModal$.steps;
 	const { wallet } = useWallet();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 
 	const {
 		shouldHideActionButton: shouldHideListButton,
@@ -54,9 +59,8 @@ const Modal = observer(() => {
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
 		isProcessing: listingIsBeingProcessed,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const {
@@ -148,7 +152,7 @@ const Modal = observer(() => {
 
 		try {
 			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await createListing({
@@ -201,7 +205,7 @@ const Modal = observer(() => {
 			chainId={Number(chainId)}
 			onClose={() => {
 				createListingModal$.close();
-				selectWaasFeeOptions$.hide();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
 			}}
 			title="List item for sale"
 			ctas={ctas}
@@ -219,7 +223,13 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$price={createListingModal$.listingPrice}
+					price={listingPrice}
+					onPriceChange={(newPrice) => {
+						createListingModal$.listingPrice.set(newPrice);
+					}}
+					onCurrencyChange={(newCurrency) => {
+						createListingModal$.listingPrice.currency.set(newCurrency);
+					}}
 					disabled={shouldHideListButton}
 				/>
 
@@ -234,15 +244,22 @@ const Modal = observer(() => {
 			</div>
 			{collection?.type === 'ERC1155' && balance && (
 				<QuantityInput
-					$quantity={createListingModal$.quantity}
-					$invalidQuantity={createListingModal$.invalidQuantity}
+					quantity={use$(createListingModal$.quantity)}
+					invalidQuantity={use$(createListingModal$.invalidQuantity)}
+					onQuantityChange={(quantity) =>
+						createListingModal$.quantity.set(quantity)
+					}
+					onInvalidQuantityChange={(invalid) =>
+						createListingModal$.invalidQuantity.set(invalid)
+					}
 					decimals={collectible?.decimals || 0}
 					maxQuantity={balance?.balance}
 					disabled={shouldHideListButton}
 				/>
 			)}
 			<ExpirationDateSelect
-				$date={createListingModal$.expiry}
+				date={createListingModal$.expiry.get()}
+				onDateChange={(date) => createListingModal$.expiry.set(date)}
 				disabled={shouldHideListButton}
 			/>
 			<TransactionDetails

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

@@ -2,12 +2,12 @@ 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 { useCreateListingModal } from '..';
 import { StepType, WalletKind } from '../../../../_internal';
 import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
-import { CreateListingModal } from '../Modal';
+import { useCreateListingModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+import { CreateListingModal } from '../Modal';
 
 const defaultArgs = {
 	collectionAddress: TEST_COLLECTIBLE.collectionAddress,

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

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

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -1,15 +1,15 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
-import { useConfig } from '../../../..';
 import { dateToUnixTime } from '../../../../../utils/date';
+import { useConfig } from '../../../..';
 import {
 	type ContractType,
 	type CreateReq,
 	type GenerateListingTransactionArgs,
+	getMarketplaceClient,
 	type OrderbookKind,
 	type QueryArg,
 	StepType,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';