@0xsequence/marketplace-sdk 2.0.0 → 2.0.2

package/src/react/ui/modals/BuyModal/internal/cryptoPaymentModalContext.tsx

@@ -2,8 +2,9 @@ import type { Address, Hash } from '@0xsequence/api-client';
 import { ChevronLeftIcon, Text } from '@0xsequence/design-system';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
-import type { Hex } from 'viem';
+import { zeroAddress, type Hex } from 'viem';
 import { useSendTransaction } from 'wagmi';
+import { getErrorMessage } from '../../../../../utils/getErrorMessage';
 import { formatPrice } from '../../../../../utils/price';
 import { type Step, StepType } from '../../../../_internal';
 import { useConnectorMetadata } from '../../../../hooks';
@@ -74,6 +75,31 @@ type CryptoPaymentModalReturn = {
 	};
 };
 
+const toErrorWithDetails = (error: unknown): Error => {
+	if (error instanceof Error) {
+		return error;
+	}
+
+	if (typeof error === 'object' && error !== null) {
+		const errorLike = error as Record<string, unknown>;
+		let message = 'An unexpected error occurred.';
+
+		if (typeof errorLike.message === 'string') {
+			message = errorLike.message;
+		} else {
+			try {
+				message = JSON.stringify(errorLike);
+			} catch {
+				message = 'An unexpected error occurred.';
+			}
+		}
+
+		return Object.assign(new Error(message), errorLike);
+	}
+
+	return new Error(String(error));
+};
+
 export function useCryptoPaymentModalContext({
 	chainId,
 	steps,
@@ -101,7 +127,6 @@ export function useCryptoPaymentModalContext({
 		marketOrder,
 		primarySaleItem,
 		isMarket,
-		isShop,
 		collection,
 		isLoading: isLoadingBuyModalData,
 	} = useBuyModalData();
@@ -115,11 +140,16 @@ export function useCryptoPaymentModalContext({
 	const priceCurrencyAddress = isMarket
 		? marketOrder?.priceCurrencyAddress
 		: (primarySaleItem?.currencyAddress as Address);
+	const listedPriceAmount = BigInt(priceAmount || 0);
+	const buyStepPriceAmount = buyStep.price ? BigInt(buyStep.price) : listedPriceAmount;
+	const buyStepValue = buyStep.value ? BigInt(buyStep.value) : buyStepPriceAmount;
+	const requiredBalance =
+		priceCurrencyAddress === zeroAddress ? buyStepValue : buyStepPriceAmount;
 	const isAnyTransactionPending = isApproving || isExecuting;
 
 	const { data, isLoading: isLoadingBalance } = useHasSufficientBalance({
 		chainId,
-		value: BigInt(priceAmount || 0),
+		value: requiredBalance,
 		tokenAddress: priceCurrencyAddress as Address,
 	});
 
@@ -137,7 +167,6 @@ export function useCryptoPaymentModalContext({
 	} = useExecuteBundledTransactions({
 		chainId,
 		approvalStep,
-		priceAmount: BigInt(priceAmount || 0),
 	});
 
 	const waas = useSelectWaasFeeOptionsStore();
@@ -169,7 +198,10 @@ export function useCryptoPaymentModalContext({
 			throw errorDetails;
 		}
 
-		await ensureCorrectChainAsync(chainId);
+		const isOnCorrectChain = await ensureCorrectChainAsync(chainId);
+		if (!isOnCorrectChain) {
+			throw new Error('Failed to switch to the required network.');
+		}
 
 		const hash = await sendTransactionAsync({
 			to,
@@ -195,12 +227,10 @@ export function useCryptoPaymentModalContext({
 			await executeTransaction(approvalStep);
 			setApprovalStep(undefined);
 		} catch (error) {
-			const errorObj =
-				error instanceof Error ? error : new Error(String(error));
+			const errorObj = toErrorWithDetails(error);
 			setError({
 				title: 'Approval failed',
-				message:
-					errorObj.message || 'Failed to approve token. Please try again.',
+				message: getErrorMessage(errorObj),
 				details: errorObj,
 			});
 			console.error('Approval transaction failed:', error);
@@ -222,7 +252,7 @@ export function useCryptoPaymentModalContext({
 	const handleTransactionFailed = (error: Error) => {
 		setError({
 			title: 'Transaction failed',
-			message: error.message,
+			message: getErrorMessage(error),
 			details: error,
 		});
 
@@ -242,12 +272,10 @@ export function useCryptoPaymentModalContext({
 
 			onSuccess(hash as Hash);
 		} catch (error) {
-			const errorObj =
-				error instanceof Error ? error : new Error(String(error));
+			const errorObj = toErrorWithDetails(error);
 			setError({
 				title: 'Purchase failed',
-				message:
-					errorObj.message || 'Failed to complete purchase. Please try again.',
+				message: getErrorMessage(errorObj),
 				details: errorObj,
 			});
 			console.error('Buy transaction failed:', error);
@@ -261,7 +289,7 @@ export function useCryptoPaymentModalContext({
 	};
 
 	const formattedPrice = formatPrice(
-		BigInt(priceAmount || 0),
+		buyStepPriceAmount,
 		currency?.decimals || 0,
 	);
 	const isFree = formattedPrice === '0';
@@ -330,7 +358,6 @@ export function useCryptoPaymentModalContext({
 		!isAnyTransactionPending &&
 		!isFeeSelectionVisible;
 
-	const needsBundledTransactions = isShop && !!approvalStep;
 	const canBuy =
 		hasSufficientBalance &&
 		!isLoadingBalance &&
@@ -338,7 +365,7 @@ export function useCryptoPaymentModalContext({
 		(isSequenceConnector ? true : !approvalStep) &&
 		!isAnyTransactionPending &&
 		!isFeeSelectionVisible &&
-		(needsBundledTransactions ? isBundledTransactionsReady : true);
+		isBundledTransactionsReady;
 
 	const result: CryptoPaymentModalReturn = {
 		data: {

package/src/react/ui/modals/CreateListingModal/internal/store.ts

@@ -1,6 +1,7 @@
 import type { Address } from '@0xsequence/api-client';
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
+import { findMarketCollection } from '../../../../../utils';
 import { useMarketplaceConfig } from '../../../hooks';
 
 export type OpenCreateListingModalArgs = {
@@ -109,8 +110,10 @@ export const useCreateListingModalState = () => {
 	} = useSelector(createListingModalStore, (state) => state.context);
 
 	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const orderbookKind = marketplaceConfig?.market.collections.find(
-		(collection) => collection.itemsAddress === collectionAddress,
+	const orderbookKind = findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	)?.destinationMarketplace;
 
 	const closeModal = () => createListingModalStore.send({ type: 'close' });

package/src/react/ui/modals/MakeOfferModal/internal/context.ts

@@ -5,12 +5,14 @@ import { zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import { dateToUnixTime } from '../../../../../utils/date';
 import { getConduitAddressForOrderbook } from '../../../../../utils/getConduitAddressForOrderbook';
+import { isOpenSeaOrderbook } from '../../../../../utils/normalizeMarketplace';
 import {
 	useCollectibleMarketLowestListing,
 	useCollectibleMetadata,
 	useCollectionMetadata,
 	useConfig,
 	useConnectorMetadata,
+	useCurrencyConvertToUSD,
 	useCurrencyList,
 	useTokenCurrencyBalance,
 } from '../../../../hooks';
@@ -106,6 +108,18 @@ export function useMakeOfferModalContext() {
 		},
 	});
 
+	const { data: usdConversion } = useCurrencyConvertToUSD({
+		chainId: state.chainId,
+		currencyAddress: selectedCurrency?.contractAddress ?? zeroAddress,
+		amountRaw: state.priceInput?.toString(),
+		query: {
+			enabled:
+				isOpenSeaOrderbook(state.orderbookKind) &&
+				!!selectedCurrency?.contractAddress &&
+				!!state.priceInput,
+		},
+	});
+
 	const expiryDate = useMemo(
 		() => new Date(Date.now() + state.expiryDays * 24 * 60 * 60 * 1000),
 		[state.expiryDays],
@@ -139,6 +153,7 @@ export function useMakeOfferModalContext() {
 		balance: balanceDnum,
 		lowestListing: lowestListingDnum,
 		orderbookKind: state.orderbookKind,
+		usdAmount: usdConversion?.usdAmount,
 	});
 
 	const formIsValid = isFormValid(validation);
@@ -359,6 +374,7 @@ export function useMakeOfferModalContext() {
 				quantity: validation.quantity,
 				balance: validation.balance,
 				openseaCriteria: validation.openseaCriteria,
+				openseaMinPrice: validation.openseaMinPrice,
 			},
 			errors: {
 				price: state.isPriceTouched ? validation.price.error : undefined,
@@ -369,6 +385,9 @@ export function useMakeOfferModalContext() {
 				openseaCriteria: state.isPriceTouched
 					? validation.openseaCriteria?.error
 					: undefined,
+				openseaMinPrice: state.isPriceTouched
+					? validation.openseaMinPrice?.error
+					: undefined,
 			},
 		},
 
@@ -415,7 +434,8 @@ export function useMakeOfferModalContext() {
 				this.form.errors.price ||
 				this.form.errors.quantity ||
 				this.form.errors.balance ||
-				this.form.errors.openseaCriteria
+				this.form.errors.openseaCriteria ||
+				this.form.errors.openseaMinPrice
 			);
 		},
 

package/src/react/ui/modals/MakeOfferModal/internal/helpers/validation.ts

@@ -11,6 +11,7 @@ export type OfferValidation = {
 	quantity: FieldValidation;
 	balance: FieldValidation;
 	openseaCriteria?: FieldValidation;
+	openseaMinPrice?: FieldValidation;
 };
 
 export function validateOfferForm({
@@ -19,12 +20,14 @@ export function validateOfferForm({
 	balance,
 	lowestListing,
 	orderbookKind,
+	usdAmount,
 }: {
 	price: Dnum;
 	quantity: Dnum;
 	balance?: Dnum;
 	lowestListing?: Dnum;
 	orderbookKind?: string;
+	usdAmount?: number;
 }): OfferValidation {
 	const validation: OfferValidation = {
 		price: { isValid: true, error: null },
@@ -67,6 +70,15 @@ export function validateOfferForm({
 		};
 	}
 
+	// OpenSea minimum price validation ($0.01 USD)
+	if (orderbookKind === 'opensea' && usdAmount !== undefined) {
+		const meetsMinPrice = usdAmount >= 0.01;
+		validation.openseaMinPrice = {
+			isValid: meetsMinPrice,
+			error: meetsMinPrice ? null : 'Lowest price must be at least $0.01',
+		};
+	}
+
 	return validation;
 }
 
@@ -75,7 +87,8 @@ export function isFormValid(validation: OfferValidation): boolean {
 		validation.price.isValid &&
 		validation.quantity.isValid &&
 		validation.balance.isValid &&
-		(validation.openseaCriteria?.isValid ?? true)
+		(validation.openseaCriteria?.isValid ?? true) &&
+		(validation.openseaMinPrice?.isValid ?? true)
 	);
 }
 
@@ -87,6 +100,8 @@ export function getValidationErrors(validation: OfferValidation): string[] {
 	if (validation.balance.error) errors.push(validation.balance.error);
 	if (validation.openseaCriteria?.error)
 		errors.push(validation.openseaCriteria.error);
+	if (validation.openseaMinPrice?.error)
+		errors.push(validation.openseaMinPrice.error);
 
 	return errors;
 }

package/src/react/ui/modals/MakeOfferModal/internal/store.ts

@@ -1,6 +1,7 @@
 import type { Address } from '@0xsequence/api-client';
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
+import { findMarketCollection } from '../../../../../utils';
 import { useMarketplaceConfig } from '../../../hooks';
 
 export type OpenMakeOfferModalArgs = {
@@ -109,8 +110,10 @@ export const useMakeOfferModalState = () => {
 	} = useSelector(makeOfferModalStore, (state) => state.context);
 
 	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const orderbookKind = marketplaceConfig?.market.collections.find(
-		(collection) => collection.itemsAddress === collectionAddress,
+	const orderbookKind = findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	)?.destinationMarketplace;
 
 	const closeModal = () => makeOfferModalStore.send({ type: 'close' });

package/src/react/ui/modals/SellModal/internal/store.ts

@@ -2,6 +2,7 @@ import type { Address } from '@0xsequence/api-client';
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import { zeroAddress } from 'viem';
+import { findMarketCollection } from '../../../../../utils';
 import type { Order } from '../../../../_internal';
 import { useMarketplaceConfig } from '../../../hooks';
 
@@ -56,8 +57,10 @@ export const useSellModalState = () => {
 	);
 
 	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const orderbookKind = marketplaceConfig?.market.collections.find(
-		(collection) => collection.itemsAddress === collectionAddress,
+	const orderbookKind = findMarketCollection(
+		marketplaceConfig?.market.collections ?? [],
+		collectionAddress,
+		chainId,
 	)?.destinationMarketplace;
 
 	const closeModal = () => sellModalStore.send({ type: 'close' });

package/src/react/ui/modals/_internal/components/baseModal/errors/ModalInitializationError.tsx

@@ -17,7 +17,7 @@ export const ModalInitializationError = ({
 	const [showTechnicalDetails, setShowTechnicalDetails] = useState(false);
 
 	return (
-		<div className="flex min-h-[400px] flex-col items-center justify-center p-4 text-white">
+		<div className="flex min-h-[400px] flex-col items-center justify-center p-6 text-white">
 			<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-red-500">
 				<WarningIcon className="h-8 w-8 text-white" />
 			</div>
@@ -29,7 +29,7 @@ export const ModalInitializationError = ({
 				refresh the page.
 			</p>
 
-			{error.stack && (
+			{(error.cause as string) && (
 				<button
 					type="button"
 					onClick={() => setShowTechnicalDetails(!showTechnicalDetails)}
@@ -50,19 +50,21 @@ export const ModalInitializationError = ({
 							d="M19 9l-7 7-7-7"
 						/>
 					</svg>
-					Show technical details
+					{showTechnicalDetails
+						? 'Hide technical details'
+						: 'Show technical details'}
 				</button>
 			)}
 
-			{showTechnicalDetails && error.stack && (
+			{showTechnicalDetails && (error.cause as string) && (
 				<div className="mb-8 max-h-64 w-full max-w-md overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-4">
 					<pre className="whitespace-pre-wrap break-words text-red-100 text-xs">
-						{error.stack}
+						{error.cause as string}
 					</pre>
 				</div>
 			)}
 
-			<div className="flex w-full max-w-xs flex-col space-y-3">
+			<div className="flex w-full flex-col space-y-3">
 				{onTryAgain && (
 					<Button
 						onClick={onTryAgain}

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

@@ -4,6 +4,7 @@ import type { Address } from '@0xsequence/api-client';
 import { Skeleton } from '@0xsequence/design-system';
 import { useEffect } from 'react';
 import { compareAddress } from '../../../../../../utils';
+import { isOpenSeaOrderbook } from '../../../../../../utils/normalizeMarketplace';
 import { type Currency, OrderbookKind } from '../../../../../_internal';
 import { useCurrencyList } from '../../../../../hooks';
 import {
@@ -41,7 +42,7 @@ function CurrencyOptionsSelect({
 
 	// Filter currencies for OpenSea
 	let filteredCurrencies = currencies;
-	if (currencies && orderbookKind === OrderbookKind.opensea && modalType) {
+	if (currencies && isOpenSeaOrderbook(orderbookKind) && modalType) {
 		const openseaCurrency = getOpenseaCurrencyForChain(chainId, modalType);
 		if (openseaCurrency) {
 			// Filter to only show the OpenSea-supported currency

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

@@ -15,6 +15,7 @@ import { useAccount } from 'wagmi';
 import type { Currency, Price } from '../../../../../../types';
 import { calculateTotalOfferCost, cn } from '../../../../../../utils';
 import { validateOpenseaOfferDecimals } from '../../../../../../utils/price';
+import { isOpenSeaOrderbook } from '../../../../../../utils/normalizeMarketplace';
 import {
 	useConvertPriceToUSD,
 	useTokenCurrencyBalance,
@@ -36,7 +37,6 @@ type PriceInputProps = {
 	};
 	disabled?: boolean;
 	orderbookKind?: OrderbookKind;
-	setOpenseaLowestPriceCriteriaMet?: (state: boolean) => void;
 	modalType?: 'listing' | 'offer';
 	// Fee data for enhanced balance checking in offers
 	feeData?: {
@@ -55,7 +55,6 @@ export default function PriceInput({
 	includeNativeCurrency,
 	disabled,
 	orderbookKind,
-	setOpenseaLowestPriceCriteriaMet,
 	modalType,
 	feeData,
 }: PriceInputProps) {
@@ -76,14 +75,13 @@ export default function PriceInput({
 		useConvertPriceToUSD({
 			chainId,
 			currencyAddress: currencyAddress ?? zeroAddress,
-			amountRaw: priceAmountRaw?.toString(),
-			query: {
-				enabled:
-					orderbookKind === OrderbookKind.opensea &&
-					!!currencyAddress &&
-					!!priceAmountRaw &&
-					!!setOpenseaLowestPriceCriteriaMet,
-			},
+		amountRaw: priceAmountRaw?.toString(),
+		query: {
+			enabled:
+				isOpenSeaOrderbook(orderbookKind) &&
+				!!currencyAddress &&
+				!!priceAmountRaw,
+		},
 		});
 
 	useEffect(() => {
@@ -163,18 +161,14 @@ export default function PriceInput({
 	);
 
 	const openseaLowestPriceCriteriaMet =
-		orderbookKind === OrderbookKind.opensea &&
-		!!conversion?.usdAmount &&
+		isOpenSeaOrderbook(orderbookKind) &&
+		conversion?.usdAmount !== undefined &&
 		conversion.usdAmount >= 0.01;
 
 	if (checkBalance?.enabled) {
 		checkBalance.callback(balanceError);
 	}
 
-	if (setOpenseaLowestPriceCriteriaMet) {
-		setOpenseaLowestPriceCriteriaMet(openseaLowestPriceCriteriaMet);
-	}
-
 	const [value, setValue] = useState('0');
 	const prevCurrencyDecimals = useRef(currencyDecimals);
 	const [openseaDecimalError, setOpenseaDecimalError] = useState<string | null>(
@@ -212,7 +206,7 @@ export default function PriceInput({
 		if (!price || !onPriceChange) return;
 
 		// Validate OpenSea decimal constraints for offers
-		if (orderbookKind === OrderbookKind.opensea && modalType === 'offer') {
+		if (isOpenSeaOrderbook(orderbookKind) && modalType === 'offer') {
 			const validation = validateOpenseaOfferDecimals(newValue);
 			if (!validation.isValid) {
 				setOpenseaDecimalError(validation.errorMessage || null);
@@ -325,7 +319,7 @@ export default function PriceInput({
 			{!balanceError &&
 				priceAmountRaw !== 0n &&
 				!openseaLowestPriceCriteriaMet &&
-				orderbookKind === OrderbookKind.opensea &&
+				isOpenSeaOrderbook(orderbookKind) &&
 				!isConversionLoading &&
 				modalType === 'offer' &&
 				!openseaDecimalError && (
@@ -339,7 +333,7 @@ export default function PriceInput({
 
 			{!balanceError &&
 				openseaDecimalError &&
-				orderbookKind === OrderbookKind.opensea &&
+				isOpenSeaOrderbook(orderbookKind) &&
 				modalType === 'offer' && (
 					<Text className="font-body font-medium text-xs" color="negative">
 						{openseaDecimalError}

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

@@ -11,6 +11,7 @@ import {
 import { useEffect, useState } from 'react';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
 import type { Price } from '../../../../../../types';
+import { findMarketCollection } from '../../../../../../utils';
 import { calculateEarningsAfterFees } from '../../../../../../utils/price';
 import { useMarketplaceConfig, useRoyalty } from '../../../../../hooks';
 
@@ -37,8 +38,10 @@ export default function TransactionDetails({
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
 
 	const marketplaceFeePercentage = includeMarketplaceFee
-		? data?.market.collections.find(
-				(collection) => collection.itemsAddress === collectionAddress,
+		? findMarketCollection(
+				data?.market.collections ?? [],
+				collectionAddress,
+				chainId,
 			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE
 		: 0;
 	// royaltyPercentage is an array of [recipient, percentage]

package/src/react/ui/modals/_internal/helpers/currency.test.ts

@@ -0,0 +1,27 @@
+import { OrderbookKind } from '@0xsequence/api-client';
+import * as MarketplaceMocks from '@0xsequence/api-client/mocks/marketplace';
+import { describe, expect, it } from 'vitest';
+import type { Currency } from '../../../../_internal';
+import { filterCurrenciesForOrderbook } from './currency';
+
+const { mockCurrencies } = MarketplaceMocks;
+const typedMockCurrencies: Currency[] = mockCurrencies.map((currency) => ({
+	...currency,
+	contractAddress: currency.contractAddress as `0x${string}`,
+}));
+
+describe('filterCurrenciesForOrderbook', () => {
+	it('should apply OpenSea listing currency limits to Magic Eden orderbooks', () => {
+		const filteredCurrencies = filterCurrenciesForOrderbook(
+			typedMockCurrencies,
+			OrderbookKind.magic_eden,
+			1,
+			'listing',
+		);
+
+		expect(filteredCurrencies).toHaveLength(1);
+		expect(filteredCurrencies[0]?.contractAddress).toBe(
+			typedMockCurrencies[0]?.contractAddress,
+		);
+	});
+});

package/src/react/ui/modals/_internal/helpers/currency.ts

@@ -1,6 +1,7 @@
 import { zeroAddress } from 'viem';
 import { OrderbookKind } from '../../../../../types';
 import { compareAddress } from '../../../../../utils';
+import { isOpenSeaOrderbook, normalizeOrderbookKind } from '../../../../../utils/normalizeMarketplace';
 import type { Currency } from '../../../../_internal';
 import { getOpenseaCurrencyForChain } from '../../_internal/constants/opensea-currencies';
 
@@ -12,7 +13,7 @@ export function filterCurrenciesForOrderbook(
 ): Currency[] {
 	if (!currencies || currencies.length === 0) return [];
 
-	if (orderbookKind === OrderbookKind.opensea) {
+	if (isOpenSeaOrderbook(orderbookKind)) {
 		const openseaCurrency = getOpenseaCurrencyForChain(chainId, side);
 		if (openseaCurrency) {
 			return currencies.filter((currency) =>
@@ -35,8 +36,9 @@ export function getDefaultCurrency(
 		return currencies[0];
 	}
 
+	const normalizedOrderbookKind = normalizeOrderbookKind(orderbookKind);
 	const shouldSkipNative =
-		orderbookKind !== OrderbookKind.sequence_marketplace_v2 &&
+		normalizedOrderbookKind !== OrderbookKind.sequence_marketplace_v2 &&
 		currencies.length > 1;
 
 	return shouldSkipNative ? currencies[1] : currencies[0];

package/src/styles/styles.ts

@@ -1855,6 +1855,17 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
   }
+  .text-small {
+    font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .font-body {
     font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   }
@@ -1985,6 +1996,9 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   .break-words {
     overflow-wrap: break-word;
   }
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -2313,6 +2327,10 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
     --tw-duration: 100ms;
     transition-duration: 100ms;
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;

package/src/utils/__tests__/getMarketplaceDetails.test.ts

@@ -38,6 +38,16 @@ describe('getMarketplaceDetails', () => {
 			expect(result?.logo).toBe(OpenSeaLogo);
 			expect(result?.displayName).toBe('OpenSea');
 		});
+
+		test('should map Magic Eden kind to OpenSea', () => {
+			const result = getMarketplaceDetails({
+				originName: 'Magic Eden',
+				kind: MarketplaceKind.magic_eden,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(OpenSeaLogo);
+			expect(result?.displayName).toBe('OpenSea');
+		});
 	});
 
 	describe('detection by marketplace name', () => {

package/src/utils/__tests__/getWebRPCErrorMessage.test.ts

@@ -0,0 +1,28 @@
+import type { WebrpcError } from '@0xsequence/api-client';
+import { describe, expect, test } from 'vitest';
+import { getWebRPCErrorMessage } from '../getWebRPCErrorMessage';
+
+	describe('getWebRPCErrorMessage', () => {
+	test('maps OutOfFund endpoint errors to an insufficient balance message', () => {
+		const message = getWebRPCErrorMessage({
+			code: 0,
+			status: 400,
+			name: 'WebrpcEndpoint',
+			message: 'endpoint error',
+			cause: 'evm error: OutOfFund',
+		} as WebrpcError);
+
+		expect(message).toBe('Insufficient balance to complete this transaction.');
+	});
+
+	test('continues to map known WebRPC error codes', () => {
+		const message = getWebRPCErrorMessage({
+			code: 3000,
+			status: 404,
+			name: 'WebrpcNotFound',
+			message: 'not found',
+		} as WebrpcError);
+
+		expect(message).toBe('Item not found or no longer available.');
+	});
+});