@0xsequence/marketplace-sdk 0.4.0 → 0.4.1

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

@@ -1,16 +1,26 @@
 import { Box, Spinner } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
 import { ActionModal } from './ActionModal';
-import type { ActionModalState } from './store';
 
 interface LoadingModalProps {
-	store: Observable<ActionModalState>;
+	isOpen: boolean;
+	chainId: number;
 	onClose: () => void;
 	title: string;
 }
 
-export const LoadingModal = ({ store, onClose, title }: LoadingModalProps) => (
-	<ActionModal store={store} onClose={onClose} title={title} ctas={[]}>
+export const LoadingModal = ({
+	isOpen,
+	chainId,
+	onClose,
+	title,
+}: LoadingModalProps) => (
+	<ActionModal
+		isOpen={isOpen}
+		chainId={chainId}
+		onClose={onClose}
+		title={title}
+		ctas={[]}
+	>
 		<Box display="flex" justifyContent="center" alignItems="center" padding="4">
 			<Spinner size="lg" />
 		</Box>

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

@@ -1,12 +1,18 @@
 import { type Observable, observable } from '@legendapp/state';
+import type { ChainId } from '../../../../../_internal';
+import type { Address } from 'viem';
 
 export interface ActionModalState {
 	isOpen: boolean;
+	chainId: ChainId | null;
+	collectionAddress: Address | null;
 }
 
 export function createActionModalStore() {
 	return observable<ActionModalState>({
 		isOpen: false,
+		chainId: null,
+		collectionAddress: null,
 	});
 }
 

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

@@ -32,7 +32,7 @@ function Calendar({ ...props }: CalendarProps) {
 					margin: 0,
 					color: 'hsl(var(--foreground))',
 					background: 'hsl(var(--background))',
-					border: `1px solid hsl(var(--border))`,
+					border: '1px solid hsl(var(--border))',
 					borderRadius: 'var(--radius)',
 					padding: '0.5rem',
 					position: 'relative',

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

@@ -1,8 +1,8 @@
 import { Box, TokenImage } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
 import { useState } from 'react';
-import { Address } from 'viem';
-import { Price } from '../../../../../../types';
-import { Observable } from '@legendapp/state';
+import type { Address } from 'viem';
+import type { Price } from '../../../../../../types';
 
 function CurrencyImage({
 	$listingPrice,

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

@@ -5,14 +5,11 @@ import { useEffect } from 'react';
 import type { Hex } from 'viem';
 import type { ChainId, Currency } from '../../../../../_internal';
 import { useCurrencies } from '../../../../../hooks';
-import { CustomSelect } from '../../../../components/_internals/custom-select/CustomSelect';
 import { useCurrencyOptions } from '../../../../../hooks/useCurrencyOptions';
-
-// TODO: this should be exported from design system
-type SelectOption = {
-	label: string;
-	value: string;
-};
+import {
+	CustomSelect,
+	type SelectItem,
+} from '../../../../components/_internals/custom-select/CustomSelect';
 
 type CurrencyOptionsSelectProps = {
 	collectionAddress: Hex;
@@ -33,6 +30,7 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	});
 
 	// set default currency
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			currencies &&
@@ -52,7 +50,8 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 			({
 				label: currency.symbol,
 				value: currency.contractAddress,
-			}) satisfies SelectOption,
+				content: currency.symbol,
+			}) as SelectItem,
 	);
 
 	const onChange = (value: string) => {
@@ -65,9 +64,11 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	return (
 		<CustomSelect
 			items={options}
-			value={currency.symbol}
 			onValueChange={onChange}
-			defaultValue={currency.contractAddress}
+			defaultValue={{
+				value: currency.contractAddress,
+				content: currency.symbol,
+			}}
 		/>
 	);
 });

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

@@ -1,11 +1,10 @@
-import { useState } from 'react';
-
 import { Box, Skeleton, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import { addDays, isSameDay } from 'date-fns';
+import { addDays } from 'date-fns';
 import { CustomSelect } from '../../../../components/_internals/custom-select/CustomSelect';
 import CalendarPopover from '../calendarPopover';
+import { useState } from 'react';
 
 export const PRESET_RANGES = {
 	TODAY: {
@@ -35,7 +34,7 @@ export const PRESET_RANGES = {
 	},
 } as const;
 
-export type rangeType =
+export type RangeType =
 	(typeof PRESET_RANGES)[keyof typeof PRESET_RANGES]['value'];
 
 type ExpirationDateSelectProps = {
@@ -47,15 +46,16 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 	className,
 	$date,
 }: ExpirationDateSelectProps) {
-	const defaultRange = '1_week';
-	const [range, setRange] = useState<rangeType>(defaultRange);
-	function handleSelectPresetRange(range: rangeType) {
-		setRange(range);
+	const defaultRange = '1_week' as RangeType;
+	const [selectedRange, setSelectedRange] = useState<RangeType>(defaultRange);
 
+	function handleSelectPresetRange(range: RangeType) {
 		const presetRange = Object.values(PRESET_RANGES).find(
 			(preset) => preset.value === range,
 		);
 
+		setSelectedRange(range);
+
 		if (!presetRange) {
 			return;
 		}
@@ -66,14 +66,6 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 	}
 
 	function handleDateValueChange(date: Date) {
-		const presetRange = Object.values(PRESET_RANGES).find((preset) =>
-			isSameDay(new Date(date), addDays(new Date(), preset.offset)),
-		);
-
-		if (presetRange) {
-			setRange(presetRange.value);
-		}
-
 		$date.set(date);
 	}
 
@@ -112,12 +104,15 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 						items={Object.values(PRESET_RANGES).map((preset) => ({
 							label: preset.label,
 							value: preset.value,
+							content: preset.label,
 						}))}
-						value={range}
 						onValueChange={(value) =>
-							handleSelectPresetRange(value as rangeType)
+							handleSelectPresetRange(value as RangeType)
 						}
-						defaultValue={defaultRange}
+						defaultValue={{
+							value: selectedRange,
+							content: selectedRange,
+						}}
 					/>
 				</Box>
 

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

@@ -1,19 +1,20 @@
-import { Box, NumericInput } from '@0xsequence/design-system';
+import { Box, NumericInput, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { type Hex, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { Price } from '../../../../../../types';
-import CurrencyOptionsSelect from '../currencyOptionsSelect';
-import { priceInputCurrencyImage, priceInputWrapper } from './styles.css';
 import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
+import CurrencyOptionsSelect from '../currencyOptionsSelect';
+import { priceInputCurrencyImage, priceInputWrapper } from './styles.css';
 
 type PriceInputProps = {
 	collectionAddress: Hex;
 	chainId: string;
 	$listingPrice: Observable<Price | undefined>;
+	onPriceChange?: () => void;
 	checkBalance?: {
 		enabled: boolean;
 		callback: (state: boolean) => void;
@@ -24,6 +25,7 @@ const PriceInput = observer(function PriceInput({
 	chainId,
 	collectionAddress,
 	$listingPrice,
+	onPriceChange,
 	checkBalance,
 }: PriceInputProps) {
 	const [balanceError, setBalanceError] = useState('');
@@ -38,6 +40,17 @@ const PriceInput = observer(function PriceInput({
 
 	const [value, setValue] = useState('');
 
+	const changeListingPrice = (value: string) => {
+		setValue(value);
+		try {
+			const parsedAmount = parseUnits(value, Number(currencyDecimals));
+			$listingPrice.amountRaw.set(parsedAmount.toString());
+			onPriceChange?.();
+		} catch {
+			$listingPrice.amountRaw.set('0');
+		}
+	};
+
 	const checkInsufficientBalance = (priceAmountRaw: string) => {
 		const hasInsufficientBalance =
 			isBalanceSuccess &&
@@ -56,12 +69,13 @@ const PriceInput = observer(function PriceInput({
 		}
 	};
 
-	const changeListingPrice = (value: string) => {
-		setValue(value);
-		const parsedAmount = parseUnits(value, Number(currencyDecimals));
-		$listingPrice.amountRaw.set(parsedAmount.toString());
-		checkBalance && checkInsufficientBalance(parsedAmount.toString());
-	};
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		const priceAmountRaw = $listingPrice.amountRaw.get();
+		if (priceAmountRaw && priceAmountRaw !== '0') {
+			checkInsufficientBalance(priceAmountRaw);
+		}
+	}, [$listingPrice.currency.get()]);
 
 	return (
 		<Box className={priceInputWrapper} position="relative">
@@ -91,10 +105,18 @@ const PriceInput = observer(function PriceInput({
 				onChange={(event) => changeListingPrice(event.target.value)}
 				width="full"
 			/>
+
 			{balanceError && (
-				<Box color="negative" fontSize="small">
+				<Text
+					color="negative"
+					fontSize="xsmall"
+					fontFamily="body"
+					fontWeight="semibold"
+					position="absolute"
+					style={{ bottom: '-13px' }}
+				>
 					{balanceError}
-				</Box>
+				</Text>
 			)}
 		</Box>
 	);

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

@@ -23,7 +23,7 @@ export default function QuantityInput({
 
 		let formattedValue = sanitizedValue;
 		if (decimalParts.length > 2) {
-			formattedValue = decimalParts[0] + '.' + decimalParts[1];
+			formattedValue = `${decimalParts[0]}.${decimalParts[1]}`;
 		}
 
 		const finalValue = formatQuantity(formattedValue);
@@ -32,7 +32,7 @@ export default function QuantityInput({
 	}
 
 	function validateQuantity(value: string) {
-		if (!value || value.trim() === '' || isNaN(Number(value))) {
+		if (!value || value.trim() === '' || Number.isNaN(Number(value))) {
 			$invalidQuantity.set(true);
 			return;
 		}
@@ -49,7 +49,7 @@ export default function QuantityInput({
 	}
 
 	function formatQuantity(value: string) {
-		if (!value || isNaN(Number(value))) {
+		if (!value || Number.isNaN(Number(value))) {
 			return '0';
 		}
 

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

@@ -30,7 +30,7 @@ export type ShowSwitchChainModalArgs = {
 export const useSwitchChainModal = () => {
 	return {
 		show: (args: ShowSwitchChainModalArgs) => switchChainModal$.open(args),
-		close: () => switchChainModal$.close(),
+		close: () => switchChainModal$.delete(),
 		isSwitching$: switchChainModal$.state.isSwitching,
 	};
 };
@@ -38,18 +38,21 @@ export const useSwitchChainModal = () => {
 const SwitchChainModal = observer(() => {
 	const chainIdToSwitchTo = switchChainModal$.state.chainIdToSwitchTo.get();
 	const isSwitching$ = switchChainModal$.state.isSwitching;
-	const chainName = getPresentableChainName(chainIdToSwitchTo!);
+	const chainName = chainIdToSwitchTo
+		? getPresentableChainName(chainIdToSwitchTo)
+		: '';
 	const { switchChainAsync } = useSwitchChain();
 
 	async function handleSwitchChain() {
 		isSwitching$.set(true);
 
 		try {
-			await switchChainAsync({ chainId: Number(chainIdToSwitchTo!) });
+			if (!chainIdToSwitchTo) return;
+			await switchChainAsync({ chainId: Number(chainIdToSwitchTo) });
 
 			switchChainModal$.state.onSuccess?.();
 
-			switchChainModal$.close();
+			switchChainModal$.delete();
 		} catch (error) {
 			switchChainModal$.state.onError?.(error as SwitchChainErrorType);
 		} finally {

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

@@ -44,6 +44,7 @@ export default function TokenPreview({
 				width={'9'}
 				height={'9'}
 				borderRadius={'xs'}
+				style={{ objectFit: 'cover' }}
 			/>
 
 			<Box display={'flex'} flexDirection={'column'} marginLeft={'3'}>

package/src/react/ui/modals/_internal/components/transaction-footer/index.tsx

@@ -1,8 +1,8 @@
-import { ChainId, networks } from '@0xsequence/network';
+import { type ChainId, networks } from '@0xsequence/network';
+import type { Hex } from 'viem';
+import { Box, Text, Spinner } from '@0xsequence/design-system';
 import { truncateMiddle } from '../../../../../../utils';
 import SvgPositiveCircleIcon from '../../../../icons/PositiveCircleIcon';
-import { Box, Spinner, Text } from '@0xsequence/design-system';
-import type { Hex } from 'viem';
 
 type TransactionFooterProps = {
 	transactionHash: Hex | undefined;

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

@@ -12,6 +12,8 @@ type TransactionDetailsProps = {
 	chainId: string;
 	price?: Price;
 	currencyImageUrl?: string;
+	// We use a placeholder price for create listing modal
+	showPlaceholderPrice?: boolean;
 };
 
 //TODO: Move this
@@ -22,6 +24,7 @@ export default function TransactionDetails({
 	collectionAddress,
 	chainId,
 	price,
+	showPlaceholderPrice,
 	currencyImageUrl,
 }: TransactionDetailsProps) {
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
@@ -43,18 +46,18 @@ export default function TransactionDetails({
 	let formattedAmount =
 		price && formatUnits(BigInt(price.amountRaw), price.currency.decimals);
 
-	if (royaltyPercentage !== undefined && formattedAmount) {
+	if (royaltyPercentage !== undefined && formattedAmount && price) {
 		formattedAmount = (
 			Number.parseFloat(formattedAmount) -
 			(Number.parseFloat(formattedAmount) * Number(royaltyPercentage)) / 100
-		).toString();
+		).toFixed(price.currency.decimals);
 	}
 
-	if (marketplaceFeePercentage !== undefined && formattedAmount) {
+	if (marketplaceFeePercentage !== undefined && formattedAmount && price) {
 		formattedAmount = (
 			Number.parseFloat(formattedAmount) -
 			(Number.parseFloat(formattedAmount) * marketplaceFeePercentage) / 100
-		).toString();
+		).toFixed(price.currency.decimals);
 	}
 
 	return (
@@ -75,7 +78,8 @@ export default function TransactionDetails({
 					<Skeleton width="16" height={'4'} />
 				) : (
 					<Text fontSize={'small'} color={'text100'} fontFamily="body">
-						{formattedAmount} {price.currency.symbol}
+						{showPlaceholderPrice ? '0' : formattedAmount}{' '}
+						{price.currency.symbol}
 					</Text>
 				)}
 			</Box>

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

@@ -5,15 +5,15 @@ import {
 	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 type { Price } from '../../../../../../types';
 import { useCollection } from '../../../../../hooks';
+import ChessTileImage from '../../../../images/chess-tile.png';
 import TimeAgo from '../timeAgo';
 import { transactionStatusModal$ } from '../transactionStatusModal/store';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
-import type { TokenMetadata } from '@0xsequence/metadata';
-import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TransactionPreviewProps = {
 	orderId?: string;
@@ -58,7 +58,7 @@ const TransactionPreview = observer(
 		const collectibleName = collectible?.name;
 		const collectionName = collection?.name;
 		const priceFormatted = price
-			? formatUnits(BigInt(price!.amountRaw), price!.currency.decimals)
+			? formatUnits(BigInt(price?.amountRaw), price?.currency.decimals)
 			: undefined;
 
 		if (collectibleLoading || collectionLoading) {
@@ -134,7 +134,7 @@ const TransactionPreview = observer(
 								fontWeight="medium"
 								fontFamily="body"
 							>
-								{priceFormatted} {price!.currency.symbol}
+								{priceFormatted} {price?.currency.symbol}
 							</Text>
 						</Box>
 					)}

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

@@ -1,6 +1,6 @@
+import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 import type { ConfirmationStatus } from '../transactionStatusModal/store';
 import { TRANSACTION_TITLES } from './consts';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 
 export function useTransactionPreviewTitle(
 	orderId: string | undefined,

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

@@ -4,29 +4,29 @@ import {
 	Skeleton,
 	Text,
 } from '@0xsequence/design-system';
+import { TRANSACTION_CONFIRMATIONS_DEFAULT } from '@0xsequence/kit';
+import type { ChainId } from '@0xsequence/network';
 import { observer } from '@legendapp/state/react';
 import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
-import { type QueryKey } from '@tanstack/react-query';
+import type { QueryKey } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { WaitForTransactionReceiptTimeoutError, type Hex } from 'viem';
+import { type Hex, WaitForTransactionReceiptTimeoutError } from 'viem';
 import type { Price } from '../../../../../../types';
+import { getPublicRpcClient } from '../../../../../../utils';
 import { getQueryClient } from '../../../../../_internal';
+import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 import { useCollectible } from '../../../../../hooks';
+import type { ModalCallbacks } from '../../types';
 import TransactionFooter from '../transaction-footer';
 import TransactionPreview from '../transactionPreview';
-import { TransactionStatus, transactionStatusModal$ } from './store';
+import { type TransactionStatus, transactionStatusModal$ } from './store';
 import {
 	closeButton,
 	dialogOverlay,
 	transactionStatusModalContent,
 } from './styles.css';
-import { ChainId } from '@0xsequence/network';
-import { getPublicRpcClient } from '../../../../../../utils';
-import { TRANSACTION_CONFIRMATIONS_DEFAULT } from '@0xsequence/kit';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
-import { ModalCallbacks } from '../../types';
-import { getTransactionStatusModalTitle } from './util/getTitle';
 import { getTransactionStatusModalMessage } from './util/getMessage';
+import { getTransactionStatusModalTitle } from './util/getTitle';
 
 export type ShowTransactionStatusModalArgs = {
 	hash?: Hex;
@@ -74,26 +74,8 @@ const TransactionStatusModal = observer(() => {
 	const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>(
 		orderId ? 'SUCCESS' : 'PENDING',
 	);
-	const title = getTransactionStatusModalTitle({
-		transactionStatus,
-		transactionType: type!,
-		orderId,
-	});
-	const message = getTransactionStatusModalMessage({
-		transactionStatus,
-		transactionType: type!,
-		collectibleName: collectible?.name || '',
-		orderId,
-	});
-	const { onError, onSuccess }: ModalCallbacks = callbacks || {};
-	const queryClient = getQueryClient();
-	const publicClient = chainId ? getPublicRpcClient(chainId) : null;
-	const waitForTransactionReceiptPromise =
-		publicClient?.waitForTransactionReceipt({
-			confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
-			hash: hash!,
-		});
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (!transactionStatusModal$.isOpen.get()) return;
 
@@ -103,9 +85,20 @@ const TransactionStatusModal = observer(() => {
 				if (receipt.status === 'success') {
 					console.log('receipt', receipt);
 					setTransactionStatus('SUCCESS');
+					if (callbacks?.onSuccess) {
+						callbacks.onSuccess(hash || '0x');
+					} else {
+						console.debug('onSuccess callback not provided:', hash);
+					}
 				}
 			})
 			.catch((error) => {
+				if (callbacks?.onError) {
+					callbacks.onError(error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
+
 				if (error instanceof WaitForTransactionReceiptTimeoutError) {
 					setTransactionStatus('TIMEOUT');
 					return;
@@ -121,7 +114,36 @@ const TransactionStatusModal = observer(() => {
 		return () => {
 			setTransactionStatus('PENDING');
 		};
-	}, [onSuccess, onError, transactionStatusModal$.isOpen.get()]);
+	}, [
+		callbacks?.onSuccess,
+		callbacks?.onError,
+		transactionStatusModal$.isOpen.get(),
+	]);
+
+	if (!type) {
+		return null;
+	}
+
+	const title = getTransactionStatusModalTitle({
+		transactionStatus,
+		transactionType: type,
+		orderId,
+	});
+
+	const message = getTransactionStatusModalMessage({
+		transactionStatus,
+		transactionType: type,
+		collectibleName: collectible?.name || '',
+		orderId,
+	});
+
+	const queryClient = getQueryClient();
+	const publicClient = chainId ? getPublicRpcClient(chainId) : null;
+	const waitForTransactionReceiptPromise =
+		publicClient?.waitForTransactionReceipt({
+			confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
+			hash: hash || '0x',
+		});
 
 	return (
 		<Root open={transactionStatusModal$.isOpen.get()}>

package/src/react/ui/modals/_internal/components/transactionStatusModal/store.ts

@@ -3,8 +3,8 @@ import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import type { ShowTransactionStatusModalArgs } from '.';
 import type { Price } from '../../../../../../types';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
-import { ModalCallbacks } from '../../types';
+import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
+import type { ModalCallbacks } from '../../types';
 
 export type ConfirmationStatus = {
 	isConfirming: boolean;

package/src/react/ui/modals/_internal/components/transactionStatusModal/util/getFormattedType.ts

@@ -2,7 +2,7 @@ import { TransactionType } from '../../../../../../_internal/transaction-machine
 
 export function getFormattedType(
 	transactionType: TransactionType,
-	verb: boolean = false,
+	verb = false,
 ): string {
 	switch (transactionType) {
 		case TransactionType.TRANSFER:

package/src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts

@@ -1,5 +1,5 @@
-import { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
-import { TransactionStatus } from '../store';
+import type { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
+import type { TransactionStatus } from '../store';
 import { getFormattedType } from './getFormattedType';
 
 export function getTransactionStatusModalMessage({

package/src/react/ui/modals/_internal/components/transactionStatusModal/util/getTitle.ts

@@ -1,5 +1,5 @@
-import { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
-import { TransactionStatus } from '../store';
+import type { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
+import type { TransactionStatus } from '../store';
 import { getFormattedType } from './getFormattedType';
 
 export function getTransactionStatusModalTitle({
@@ -8,9 +8,12 @@ export function getTransactionStatusModalTitle({
 	orderId,
 }: {
 	transactionStatus: TransactionStatus;
-	transactionType: TransactionType;
+	transactionType: TransactionType | undefined;
 	orderId?: string;
 }): string {
+	if (transactionType === undefined) {
+		return '';
+	}
 	if (orderId) {
 		return `Your ${getFormattedType(transactionType)} has processed`;
 	}