@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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,14 @@
 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 */