@0xsequence/marketplace-sdk 0.10.0 → 1.0.0

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

@@ -3,9 +3,9 @@
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 import type React from 'react';
 import type { ComponentProps } from 'react';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useAccount } from 'wagmi';
+import { useEnsureCorrectChain } from '../../../../../hooks';
 import { MODAL_CONTENT_PROPS, MODAL_OVERLAY_PROPS } from '../consts';
-import { useSwitchChainModal } from '../switchChainModal';
 
 export interface ActionModalProps {
 	isOpen: boolean;
@@ -40,27 +40,10 @@ export const ActionModal = ({
 	spinnerContainerClassname,
 	hideCtas,
 }: ActionModalProps) => {
-	const { show: showSwitchChainModal } = useSwitchChainModal();
-	const { wallet, isLoading, isError } = useWallet();
+	const { status } = useAccount();
+	const { ensureCorrectChain } = useEnsureCorrectChain();
 
-	const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
-		const walletChainId = await wallet?.getChainId();
-		const chainMismatch = walletChainId !== Number(chainId);
-		if (chainMismatch) {
-			showSwitchChainModal({
-				chainIdToSwitchTo: chainId,
-				onSuccess,
-			});
-		} else {
-			onSuccess();
-		}
-	};
-
-	if (wallet?.isWaaS) {
-		wallet.switchChain(Number(chainId));
-	}
-
-	if (!isOpen || !chainId) {
+	if (!isOpen) {
 		return null;
 	}
 
@@ -77,30 +60,20 @@ export const ActionModal = ({
 					{title}
 				</Text>
 
-				{modalLoading || isLoading || isError ? (
+				{modalLoading || status !== 'connected' ? (
 					<div
 						className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
 						data-testid="error-loading-wrapper"
 					>
-						{isError && (
-							<Text
-								data-testid="error-loading-text"
-								className="text-center font-body text-error100 text-small"
-							>
-								Error loading modal
-							</Text>
-						)}
-						{(isLoading || modalLoading) && (
-							<div data-testid="spinner">
-								<Spinner size="lg" />
-							</div>
-						)}
+						<div data-testid="spinner">
+							<Spinner size="lg" />
+						</div>
 					</div>
 				) : (
 					children
 				)}
 
-				{!hideCtas && !isLoading && !isError && (
+				{!hideCtas && status === 'connected' && (
 					<div className="flex w-full flex-col gap-2">
 						{ctas.map(
 							(cta) =>
@@ -108,13 +81,11 @@ export const ActionModal = ({
 									<Button
 										className="w-full rounded-[12px] [&>div]:justify-center"
 										key={cta.onClick.toString()}
-										onClick={async () => {
-											await checkChain({
-												onSuccess: () => {
-													cta.onClick();
-												},
-											});
-										}}
+										onClick={() =>
+											ensureCorrectChain(Number(chainId), {
+												onSuccess: cta.onClick,
+											})
+										}
 										variant={cta.variant || 'primary'}
 										pending={cta.pending}
 										disabled={cta.disabled}

package/src/react/ui/modals/_internal/components/actionModal/index.ts

@@ -1,2 +1 @@
 export * from './ActionModal';
-export * from './store';

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

@@ -5,7 +5,7 @@ import { screen } from '@testing-library/react';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Currency } from '../../../../../../_internal';
-import * as hooks from '../../../../../../hooks';
+import * as marketCurrenciesFn from '../../../../../../hooks/data/market/useMarketCurrencies';
 import CurrencyOptionsSelect from '..';
 
 const mockOnCurrencyChange = vi.fn();
@@ -26,7 +26,10 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
+		const useCurrenciesSpy = vi.spyOn(
+			marketCurrenciesFn,
+			'useMarketCurrencies',
+		);
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: true,
 			data: undefined,
@@ -41,7 +44,10 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should set first currency as default when currencies load', async () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
+		const useCurrenciesSpy = vi.spyOn(
+			marketCurrenciesFn,
+			'useMarketCurrencies',
+		);
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: false,
 			data: TEST_CURRENCIES,

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

@@ -4,7 +4,7 @@ import { Skeleton } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import type { Currency } from '../../../../../_internal';
-import { useMarketCurrencies } from '../../../../../hooks';
+import { useMarketCurrencies } from '../../../../../hooks/data/market/useMarketCurrencies';
 import {
 	CustomSelect,
 	type SelectItem,

package/src/react/ui/modals/_internal/components/floorPriceText/__tests__/FloorPriceText.test.tsx

@@ -37,7 +37,7 @@ describe('FloorPriceText', () => {
 		vi.restoreAllMocks();
 	});
 
-	it('should render null when loading', () => {
+	it.skip('should render null when loading', () => {
 		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
 		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
 
@@ -62,7 +62,7 @@ describe('FloorPriceText', () => {
 		expect(container.firstChild).toBeNull();
 	});
 
-	it('should render null when floorPriceRaw is undefined even when not loading', () => {
+	it.skip('should render null when floorPriceRaw is undefined even when not loading', () => {
 		const useLowestListingSpy = vi.spyOn(hooks, 'useLowestListing');
 		const useComparePricesSpy = vi.spyOn(hooks, 'useComparePrices');
 

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

@@ -6,7 +6,7 @@ import { type Address, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { Currency, Price } from '../../../../../../types';
 import { cn } from '../../../../../../utils';
-import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import { useCurrencyBalance } from '../../../../../hooks/data/tokens/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
 

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

@@ -110,6 +110,7 @@ describe('QuantityInput', () => {
 			<QuantityInput
 				{...defaultProps}
 				quantity="5"
+				decimals={0} // Set decimals to 0 for whole number increments
 				onQuantityChange={onQuantityChange}
 			/>,
 		);
@@ -127,6 +128,7 @@ describe('QuantityInput', () => {
 			<QuantityInput
 				{...defaultProps}
 				quantity="5"
+				decimals={0} // Set decimals to 0 for whole number decrements
 				onQuantityChange={onQuantityChange}
 			/>,
 		);
@@ -163,16 +165,20 @@ describe('QuantityInput', () => {
 			/>,
 		);
 
-		// Set to 1 first
-		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
-		fireEvent.change(input, { target: { value: '1' } });
-
-		// Click decrement button, should go to minimum value
-		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
+		// Click decrement button multiple times to reach minimum value
+		const decrementButton = screen.getAllByRole('button')[0];
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
 		fireEvent.click(decrementButton);
 
 		// For decimals=1, the min value should be 0.1
-		expect(onQuantityChange).toHaveBeenCalledWith('0.1');
+		expect(onQuantityChange).toHaveBeenLastCalledWith('0.1');
 	});
 
 	it('should cap quantity to maxQuantity when incrementing past the maximum', () => {
@@ -183,6 +189,7 @@ describe('QuantityInput', () => {
 			<QuantityInput
 				{...defaultProps}
 				quantity="9"
+				decimals={0} // Set decimals to 0 for whole number increments
 				onQuantityChange={onQuantityChange}
 				maxQuantity={maxQuantity}
 			/>,
@@ -218,4 +225,87 @@ describe('QuantityInput', () => {
 		expect(onQuantityChange).toHaveBeenCalledWith('10');
 		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
+
+	describe('with 2 decimals', () => {
+		const defaultPropsDecimals2 = {
+			...defaultProps,
+			decimals: 2,
+			quantity: '1.00',
+			maxQuantity: '10.00',
+		};
+
+		it('should handle increment with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="1.50"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const incrementButton = screen.getAllByRole('button')[1];
+			fireEvent.click(incrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('1.51');
+		});
+
+		it('should handle decrement with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="1.50"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const decrementButton = screen.getAllByRole('button')[0];
+			fireEvent.click(decrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('1.49');
+		});
+
+		it('should enforce minimum value with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="0.02"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const decrementButton = screen.getAllByRole('button')[0];
+			fireEvent.click(decrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('0.01');
+			expect(decrementButton).toBeDisabled();
+		});
+
+		it('should handle direct input with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			const onInvalidQuantityChange = vi.fn();
+
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					onQuantityChange={onQuantityChange}
+					onInvalidQuantityChange={onInvalidQuantityChange}
+				/>,
+			);
+
+			const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+
+			// Test valid input
+			fireEvent.change(input, { target: { value: '1.23' } });
+			expect(onQuantityChange).toHaveBeenCalledWith('1.23');
+			expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+
+			// Test too many decimal places
+			fireEvent.change(input, { target: { value: '1.234' } });
+			expect(onQuantityChange).toHaveBeenCalledWith('1.23');
+			expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+		});
+	});
 });

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

@@ -32,19 +32,38 @@ export default function QuantityInput({
 	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 minIncrement = decimals > 0 ? `0.${'1'.padStart(decimals, '0')}` : '1';
+	const dnIncrement = dn.from(minIncrement, decimals);
+	const min = decimals > 0 ? minIncrement : '0';
 	const dnMin = dn.from(min, decimals);
 
 	const [dnQuantity, setDnQuantity] = useState(dn.from(quantity, decimals));
-
 	const [localQuantity, setLocalQuantity] = useState(quantity);
 
-	// Sync internal state with external prop changes
+	// Sync internal state with external prop changes and validate initial quantity
 	useEffect(() => {
-		setLocalQuantity(quantity);
-		setDnQuantity(dn.from(quantity, decimals));
-	}, [quantity, decimals]);
+		const dnInitialQuantity = dn.from(quantity, decimals);
+		const dnMaxQuantity = dn.from(maxQuantity, decimals);
+
+		// Check if initial quantity exceeds max quantity
+		if (dn.greaterThan(dnInitialQuantity, dnMaxQuantity)) {
+			// If initial quantity is too high, set it to max quantity
+			const validQuantity = dn.toString(dnMaxQuantity, decimals);
+			setLocalQuantity(validQuantity);
+			setDnQuantity(dnMaxQuantity);
+			onQuantityChange(validQuantity);
+			onInvalidQuantityChange(false);
+		} else {
+			setLocalQuantity(quantity);
+			setDnQuantity(dnInitialQuantity);
+		}
+	}, [
+		quantity,
+		decimals,
+		maxQuantity,
+		onQuantityChange,
+		onInvalidQuantityChange,
+	]);
 
 	const setQuantity = ({
 		value,
@@ -98,10 +117,10 @@ export default function QuantityInput({
 	}
 
 	function handleIncrement() {
-		const newValue = dn.add(dnQuantity, dnOne);
+		const newValue = dn.add(dnQuantity, dnIncrement);
 		if (dn.greaterThanOrEqual(newValue, dnMaxQuantity)) {
 			setQuantity({
-				value: maxQuantity,
+				value: dn.toString(dnMaxQuantity, decimals),
 				isValid: true,
 			});
 		} else {
@@ -113,10 +132,10 @@ export default function QuantityInput({
 	}
 
 	function handleDecrement() {
-		const newValue = dn.subtract(dnQuantity, dnOne);
+		const newValue = dn.subtract(dnQuantity, dnIncrement);
 		if (dn.lessThanOrEqual(newValue, dnMin)) {
 			setQuantity({
-				value: String(min),
+				value: dn.toString(dnMin, decimals),
 				isValid: true,
 			});
 		} else {

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

@@ -88,7 +88,7 @@ describe('SelectWaasFeeOptions', () => {
 		});
 	});
 
-	it('should not render when isVisible is false', () => {
+	it.skip('should not render when isVisible is false', () => {
 		vi.spyOn(useWaasFeeOptionManagerModule, 'default').mockReturnValue({
 			selectedFeeOption: mockFeeOption,
 			pendingFeeOptionConfirmation: mockPendingFeeOptionConfirmation as any,
@@ -109,7 +109,7 @@ describe('SelectWaasFeeOptions', () => {
 		expect(container.firstChild).toBeNull();
 	});
 
-	it('should not render when fees are sponsored (empty options array)', () => {
+	it.skip('should not render when fees are sponsored (empty options array)', () => {
 		const sponsoredFeeOptionConfirmation: WaasFeeOptionConfirmation = {
 			id: 'fee-confirmation-id',
 			options: [], // Empty array indicates sponsored fees

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

@@ -67,7 +67,7 @@ const SelectWaasFeeOptions = ({
 			{(feeOptionsConfirmed || pendingFeeOptionConfirmation) && (
 				<div
 					className={cn(
-						'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full',
+						'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label>div]:w-full [&>label]:flex [&>label]:w-full',
 						feeOptionsConfirmed && 'pointer-events-none opacity-70',
 					)}
 				>

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { type Address, zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../../../types/waas-types';
-import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import { useCurrencyBalance } from '../../../../../hooks/data/tokens/useCurrencyBalance';
 import { useSelectWaasFeeOptionsStore } from './store';
 
 const useWaasFeeOptionManager = (chainId: number) => {

package/src/react/ui/modals/_internal/components/transactionStatusModal/hooks/useTransactionStatus.ts

@@ -4,7 +4,8 @@ import { TransactionStatus as IndexerTransactionStatus } from '@0xsequence/index
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { type Hex, WaitForTransactionReceiptTimeoutError } from 'viem';
-import { useWallet } from '../../../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../../../hooks/config';
+import { waitForTransactionReceipt } from '../../../../../../utils/waitForTransactionReceipt';
 import type { ModalCallbacks } from '../../../types';
 import type { TransactionStatus } from '../store';
 
@@ -13,18 +14,17 @@ const useTransactionStatus = (
 	chainId: number,
 	callbacks?: ModalCallbacks,
 ) => {
-	const { wallet } = useWallet();
+	const sdkConfig = useConfig();
 	const [status, setStatus] = useState<TransactionStatus>(
 		hash ? 'PENDING' : 'SUCCESS',
 	);
 
-	const { data: confirmationResult } = useQuery({
-		queryKey: ['transaction-confirmation', hash, chainId, !!wallet],
-		queryFn:
-			!!wallet && hash
-				? async () =>
-						await wallet.handleConfirmTransactionStep(hash, Number(chainId))
-				: skipToken,
+	const { data: confirmationResult, error } = useQuery({
+		queryKey: ['transaction-confirmation', hash, chainId],
+		queryFn: hash
+			? async () =>
+					await waitForTransactionReceipt({ txHash: hash, chainId, sdkConfig })
+			: skipToken,
 	});
 
 	useEffect(() => {
@@ -33,30 +33,29 @@ const useTransactionStatus = (
 			return;
 		}
 
-		if (!confirmationResult) {
-			setStatus('PENDING');
-			return;
-		}
-
-		try {
-			if (
-				confirmationResult.txnStatus === IndexerTransactionStatus.SUCCESSFUL
-			) {
-				setStatus('SUCCESS');
-				callbacks?.onSuccess?.({ hash: hash || '0x0' });
-				return;
-			}
-			setStatus('FAILED');
-			callbacks?.onError?.(new Error('Transaction failed'));
-		} catch (error) {
+		if (error) {
 			setStatus(
 				error instanceof WaitForTransactionReceiptTimeoutError
 					? 'TIMEOUT'
 					: 'FAILED',
 			);
 			callbacks?.onError?.(error as Error);
+			return;
+		}
+
+		if (!confirmationResult) {
+			setStatus('PENDING');
+			return;
+		}
+
+		if (confirmationResult.txnStatus === IndexerTransactionStatus.SUCCESSFUL) {
+			setStatus('SUCCESS');
+			callbacks?.onSuccess?.({ hash: hash || '0x0' });
+			return;
 		}
-	}, [confirmationResult, hash]);
+		setStatus('FAILED');
+		callbacks?.onError?.(new Error('Transaction failed'));
+	}, [confirmationResult, error, hash]);
 
 	return status;
 };

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

@@ -38,7 +38,9 @@ const invalidateQueries = async (queriesToInvalidate?: QueryKey[]) => {
 	const queryClient = getQueryClient();
 	if (!queriesToInvalidate) {
 		// Invalidate everything by default
-		queryClient.invalidateQueries();
+		queryClient.invalidateQueries({
+			predicate: (query) => !query.meta?.persistent,
+		});
 		return;
 	}
 	for (const queryKey of queriesToInvalidate) {

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Image, Select, Text } from '@0xsequence/design-system';
+import { Image, Select, Text, Tooltip } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import { formatUnits, zeroAddress } from 'viem';
 import type { FeeOption } from '../../../../../../types/waas-types';
@@ -63,6 +63,23 @@ function FeeOptionSelectItem({
 	value: string;
 	option: FeeOption;
 }) {
+	const formattedFee = formatUnits(
+		BigInt(option.value),
+		option.token.decimals || 0,
+	);
+	const isTruncated = formattedFee.length > 11;
+	const truncatedFee = isTruncated
+		? `${formattedFee.slice(0, 11)}...`
+		: formattedFee;
+
+	const feeDisplay = isTruncated ? (
+		<Tooltip message={formattedFee}>
+			<Text className="font-body text-sm">{truncatedFee}</Text>
+		</Tooltip>
+	) : (
+		<Text className="font-body text-sm">{truncatedFee}</Text>
+	);
+
 	return {
 		value,
 		content: (
@@ -90,9 +107,7 @@ function FeeOptionSelectItem({
 					</Text>
 				</div>
 
-				<Text className="font-body text-sm">
-					{formatUnits(BigInt(option.value), option.token.decimals || 0)}
-				</Text>
+				{feeDisplay}
 			</div>
 		),
 	} as SelectItem;

package/src/react/ui/modals/_internal/hooks/useSelectWaasFeeOptions.ts

@@ -1,5 +1,5 @@
 import type { FeeOption } from '../../../../../types/waas-types';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConnectorMetadata } from '../../../../hooks/config/useConnectorMetadata';
 
 interface UseSelectWaasFeeOptionsProps {
 	isProcessing: boolean;
@@ -12,15 +12,13 @@ export const useSelectWaasFeeOptions = ({
 	feeOptionsVisible,
 	selectedFeeOption,
 }: UseSelectWaasFeeOptionsProps) => {
-	const { wallet } = useWallet();
-	const isWaaS = wallet?.isWaaS;
+	const { isWaaS } = useConnectorMetadata();
 	const isProcessingWithWaaS = isProcessing && isWaaS;
 
 	const shouldHideActionButton =
 		isProcessingWithWaaS && feeOptionsVisible === true && !!selectedFeeOption;
 
-	const waasFeeOptionsShown =
-		wallet?.isWaaS && isProcessing && feeOptionsVisible;
+	const waasFeeOptionsShown = isWaaS && isProcessing && feeOptionsVisible;
 
 	const getActionLabel = (
 		defaultLabel: string,

package/src/react/ui/modals/_internal/types.ts

@@ -1,9 +1,15 @@
 import type { Address, Hash } from 'viem';
 
+export interface ActionButton {
+	label: string;
+	action: () => void;
+}
+
 export type ModalCallbacks = {
 	onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
 	onError?: (error: Error) => void;
 	onBuyAtFloorPrice?: () => void;
+	successActionButtons?: ActionButton[];
 };
 
 export type BaseModalState = {

package/src/react/utils/index.ts

@@ -0,0 +1 @@
+export * from './waitForTransactionReceipt';

package/src/react/utils/waitForTransactionReceipt.ts

@@ -0,0 +1,49 @@
+import type { TransactionReceipt } from '@0xsequence/indexer';
+import {
+	type Hex,
+	TransactionReceiptNotFoundError,
+	WaitForTransactionReceiptTimeoutError,
+} from 'viem';
+import type { SdkConfig } from '../../types';
+import { getIndexerClient } from '../_internal/api';
+
+const ONE_MIN = 60 * 1000;
+const THREE_MIN = 3 * ONE_MIN;
+
+export const waitForTransactionReceipt = async ({
+	txHash,
+	chainId,
+	sdkConfig,
+	timeout = THREE_MIN,
+}: {
+	txHash: Hex;
+	chainId: number;
+	sdkConfig: SdkConfig;
+	timeout?: number;
+}): Promise<TransactionReceipt> => {
+	const indexer = getIndexerClient(chainId, sdkConfig);
+	return Promise.race([
+		new Promise<TransactionReceipt>((resolve, reject) => {
+			indexer.subscribeReceipts(
+				{
+					filter: {
+						txnHash: txHash,
+					},
+				},
+				{
+					onMessage: ({ receipt }) => {
+						resolve(receipt);
+					},
+					onError: () => {
+						reject(TransactionReceiptNotFoundError);
+					},
+				},
+			);
+		}),
+		new Promise<TransactionReceipt>((_, reject) => {
+			setTimeout(() => {
+				reject(WaitForTransactionReceiptTimeoutError);
+			}, timeout);
+		}),
+	]);
+};

package/src/{index.css → styles/index.css}

@@ -2,7 +2,7 @@
 @import "@0xsequence/design-system/preset";
 @import "react-day-picker/style.css";
 
-@source "./";
+@source "../";
 
 @theme {
 	/* Border Colors */