@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/queries/{searchTokenMetadata.ts → tokens/searchTokenMetadata.ts}

@@ -1,16 +1,18 @@
 import type {
 	Filter,
 	Page,
+	SearchTokenMetadataArgs,
 	SearchTokenMetadataReturn,
 } from '@0xsequence/metadata';
 import { infiniteQueryOptions } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	getMetadataClient,
+	type QueryKeyArgs,
 	tokenKeys,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
+} from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
 
 export interface FetchSearchTokenMetadataParams {
 	chainId: number;
@@ -47,6 +49,18 @@ export type SearchTokenMetadataQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getSearchTokenMetadataQueryKey(
+	params: SearchTokenMetadataQueryOptions,
+) {
+	const apiArgs = {
+		chainID: String(params.chainId!),
+		contractAddress: params.collectionAddress!,
+		filter: params.filter,
+	} satisfies QueryKeyArgs<Omit<SearchTokenMetadataArgs, 'page'>>;
+
+	return [...tokenKeys.metadata, 'search', apiArgs] as const;
+}
+
 export function searchTokenMetadataQueryOptions(
 	params: SearchTokenMetadataQueryOptions,
 ) {
@@ -60,7 +74,7 @@ export function searchTokenMetadataQueryOptions(
 	const initialPageParam = { page: 1, pageSize: 30 };
 
 	return infiniteQueryOptions({
-		queryKey: [...tokenKeys.metadata, 'search', params],
+		queryKey: getSearchTokenMetadataQueryKey(params),
 		queryFn: ({ pageParam = initialPageParam }) =>
 			fetchSearchTokenMetadata({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/{tokenSupplies.ts → tokens/tokenSupplies.ts}

@@ -1,13 +1,13 @@
 import type { GetTokenSuppliesArgs, Page } from '@0xsequence/indexer';
 import { infiniteQueryOptions } from '@tanstack/react-query';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	getIndexerClient,
 	LaosAPI,
 	tokenKeys,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardInfiniteQueryOptions } from '../types/query';
+} from '../../_internal';
+import type { StandardInfiniteQueryOptions } from '../../types/query';
 
 export interface FetchTokenSuppliesParams
 	extends Omit<GetTokenSuppliesArgs, 'contractAddress'> {
@@ -65,6 +65,18 @@ export type TokenSuppliesQueryOptions =
 		query?: StandardInfiniteQueryOptions;
 	};
 
+export function getTokenSuppliesQueryKey(params: TokenSuppliesQueryOptions) {
+	const apiArgs = {
+		chainId: params.chainId!,
+		contractAddress: params.collectionAddress!,
+		includeMetadata: params.includeMetadata,
+		metadataOptions: params.metadataOptions,
+		isLaos721: params.isLaos721,
+	};
+
+	return [...tokenKeys.supplies, apiArgs] as const;
+}
+
 export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
 	const enabled = Boolean(
 		params.chainId &&
@@ -90,7 +102,7 @@ export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
 		});
 
 	return infiniteQueryOptions({
-		queryKey: [...tokenKeys.supplies, params],
+		queryKey: getTokenSuppliesQueryKey(params),
 		queryFn,
 		initialPageParam,
 		getNextPageParam: (lastPage) =>

package/src/react/queries/{comparePrices.ts → utils/comparePrices.ts}

@@ -1,8 +1,8 @@
 import { queryOptions } from '@tanstack/react-query';
 import type { Address } from 'viem';
-import type { SdkConfig } from '../../types';
-import type { ValuesOptional } from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
+import type { SdkConfig } from '../../../types';
+import { currencyKeys, type ValuesOptional } from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
 import { fetchConvertPriceToUSD } from './convertPriceToUSD';
 
 export interface FetchComparePricesParams {
@@ -74,6 +74,18 @@ export type ComparePricesQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getComparePricesQueryKey(params: ComparePricesQueryOptions) {
+	const apiArgs = {
+		chainId: params.chainId!,
+		priceAmountRaw: params.priceAmountRaw!,
+		priceCurrencyAddress: params.priceCurrencyAddress!,
+		compareToPriceAmountRaw: params.compareToPriceAmountRaw!,
+		compareToPriceCurrencyAddress: params.compareToPriceCurrencyAddress!,
+	};
+
+	return [...currencyKeys.conversion, 'compare', apiArgs] as const;
+}
+
 export function comparePricesQueryOptions(params: ComparePricesQueryOptions) {
 	const enabled = Boolean(
 		params.chainId &&
@@ -86,7 +98,7 @@ export function comparePricesQueryOptions(params: ComparePricesQueryOptions) {
 	);
 
 	return queryOptions({
-		queryKey: ['currency', 'conversion', 'compare', params],
+		queryKey: getComparePricesQueryKey(params),
 		queryFn: () =>
 			fetchComparePrices({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/{convertPriceToUSD.ts → utils/convertPriceToUSD.ts}

@@ -1,13 +1,14 @@
 import { queryOptions } from '@tanstack/react-query';
 import { type Address, formatUnits } from 'viem';
-import type { SdkConfig } from '../../types';
+import type { SdkConfig } from '../../../types';
 import {
 	type Currency,
+	currencyKeys,
 	getQueryClient,
 	type ValuesOptional,
-} from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
-import { marketCurrenciesQueryOptions } from './marketCurrencies';
+} from '../../_internal';
+import type { StandardQueryOptions } from '../../types/query';
+import { marketCurrenciesQueryOptions } from '../market/marketCurrencies';
 
 export interface FetchConvertPriceToUSDParams {
 	chainId: number;
@@ -62,6 +63,18 @@ export type ConvertPriceToUSDQueryOptions =
 		query?: StandardQueryOptions;
 	};
 
+export function getConvertPriceToUSDQueryKey(
+	params: ConvertPriceToUSDQueryOptions,
+) {
+	const apiArgs = {
+		chainId: params.chainId!,
+		currencyAddress: params.currencyAddress!,
+		amountRaw: params.amountRaw!,
+	};
+
+	return [...currencyKeys.conversion, 'usd', apiArgs] as const;
+}
+
 export function convertPriceToUSDQueryOptions(
 	params: ConvertPriceToUSDQueryOptions,
 ) {
@@ -74,7 +87,7 @@ export function convertPriceToUSDQueryOptions(
 	);
 
 	return queryOptions({
-		queryKey: ['currency', 'convertPriceToUSD', params],
+		queryKey: getConvertPriceToUSDQueryKey(params),
 		queryFn: () =>
 			fetchConvertPriceToUSD({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './comparePrices';
+export * from './convertPriceToUSD';

package/src/react/ssr/__tests__/__snapshots__/create-ssr-client.test.ts.snap

@@ -7,6 +7,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     "collections": [
       {
         "bannerUrl": "https://example.com/market-banner.png",
+        "cardType": "market",
         "chainId": 1,
         "contractType": "ERC721",
         "createdAt": "2025-03-16T13:04:16.098Z",
@@ -31,13 +32,13 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         },
         "id": 1,
         "itemsAddress": "0x0000000000000000000000000000000000000000",
-        "marketplaceType": "market",
         "private": false,
         "projectId": 1,
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
       {
         "bannerUrl": "https://example.com/collection-banner.png",
+        "cardType": "market",
         "chainId": 137,
         "contractType": "ERC1155",
         "createdAt": "2025-03-16T13:04:16.098Z",
@@ -66,7 +67,6 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         },
         "id": 2,
         "itemsAddress": "0x1234567890123456789012345678901234567890",
-        "marketplaceType": "market",
         "private": false,
         "projectId": 1,
         "updatedAt": "2025-03-16T13:04:16.098Z",
@@ -105,12 +105,12 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     "collections": [
       {
         "bannerUrl": "https://example.com/shop-banner.png",
+        "cardType": "shop",
         "chainId": 1,
         "createdAt": "2025-03-16T13:04:16.098Z",
         "customTokenIds": [],
         "id": 1,
         "itemsAddress": "0x0000000000000000000000000000000000000000",
-        "marketplaceType": "shop",
         "name": "Mock Shop Collection",
         "private": false,
         "projectId": 1,
@@ -125,12 +125,12 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
       },
       {
         "bannerUrl": "https://example.com/polygon-shop-banner.png",
+        "cardType": "shop",
         "chainId": 137,
         "createdAt": "2025-03-16T13:04:16.098Z",
         "customTokenIds": [],
         "id": 2,
         "itemsAddress": "0x1234567890123456789012345678901234567890",
-        "marketplaceType": "shop",
         "name": "Polygon Shop Collection",
         "private": false,
         "projectId": 1,

package/src/react/ssr/create-ssr-client.ts

@@ -2,7 +2,7 @@ import { cookieToInitialState, type State } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
-import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
+import { marketplaceConfigOptions } from '../queries/market/marketplaceConfig';
 
 type InitSSRClientArgs = {
 	cookie: string;

package/src/react/ui/components/_internals/ErrorLogBox.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import {
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CloseIcon,
+	Text,
+	WarningIcon,
+} from '@0xsequence/design-system';
+import { useState } from 'react';
+
+export interface ErrorLogBoxProps {
+	title: string;
+	message: string;
+	error?: Error;
+	onDismiss?: () => void;
+}
+
+export const ErrorLogBox = ({
+	title,
+	message,
+	error,
+	onDismiss,
+}: ErrorLogBoxProps) => {
+	const [showFullError, setShowFullError] = useState(false);
+
+	const toggleFullError = () => {
+		setShowFullError(!showFullError);
+	};
+
+	return (
+		<div className="relative max-h-96 w-full overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-3">
+			<div className="flex items-start gap-3">
+				<WarningIcon
+					className="absolute mt-0.5 flex-shrink-0 text-red-500"
+					size="sm"
+				/>
+				<div className="min-w-0 flex-1">
+					<div className="relative ml-10 flex flex-col">
+						<Text className="font-bold text-red-400 text-sm">{title}</Text>
+						<Text className="mt-1 text-red-300 text-xs">{message}</Text>
+					</div>
+
+					{error && (
+						<div className="mt-2">
+							<button
+								onClick={toggleFullError}
+								className="flex items-center gap-1 text-red-400 text-xs transition-colors hover:text-red-300"
+								type="button"
+							>
+								{showFullError ? 'Hide full error' : 'Show full error'}
+								{showFullError ? (
+									<ChevronUpIcon className="h-3 w-3" />
+								) : (
+									<ChevronDownIcon className="h-3 w-3" />
+								)}
+							</button>
+
+							{showFullError && <div className="mt-2 h-px bg-red-900" />}
+
+							{showFullError && (
+								<div className="mt-2 overflow-auto rounded-md bg-red-950 p-2">
+									<Text className="whitespace-pre-wrap break-words font-mono text-red-100 text-xs">
+										{JSON.stringify(error, null, 2)}
+									</Text>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+
+				{onDismiss && (
+					<button
+						onClick={onDismiss}
+						className="absolute right-4 flex-shrink-0 text-red-400 transition-colors hover:text-red-300"
+						type="button"
+						aria-label="Dismiss error"
+					>
+						<CloseIcon className="h-3 w-3" />
+					</button>
+				)}
+			</div>
+		</div>
+	);
+};

package/src/react/ui/components/_internals/action-button/ActionButton.stories.tsx

@@ -66,9 +66,9 @@ All stories now use Mock Service Worker (MSW) to mock API requests, ensuring the
 			control: 'boolean',
 			description: 'Whether the user owns this collectible',
 		},
-		marketplaceType: {
+		cardType: {
 			control: 'select',
-			options: ['market', 'shop'],
+			options: ['market', 'shop', 'inventory-non-tradable'],
 			description: 'Type of marketplace (market or shop)',
 		},
 		onCannotPerformAction: {
@@ -133,7 +133,7 @@ export const OfferAction: Story = {
 		tokenId: '123',
 		action: CollectibleCardAction.OFFER,
 		owned: false,
-		marketplaceType: 'market',
+		cardType: 'market',
 		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 		onCannotPerformAction: fn(),
 	},
@@ -159,7 +159,7 @@ export const SellAction: Story = {
 		tokenId: '123',
 		action: CollectibleCardAction.SELL,
 		owned: true,
-		marketplaceType: 'market',
+		cardType: 'market',
 		highestOffer: {
 			...MOCK_ORDER,
 			side: OrderSide.offer,
@@ -189,7 +189,7 @@ export const ListAction: Story = {
 		tokenId: '123',
 		action: CollectibleCardAction.LIST,
 		owned: true,
-		marketplaceType: 'market',
+		cardType: 'market',
 		orderbookKind: OrderbookKind.sequence_marketplace_v1,
 	},
 	play: async ({ canvasElement }) => {
@@ -214,7 +214,7 @@ export const TransferAction: Story = {
 		tokenId: '123',
 		action: CollectibleCardAction.TRANSFER,
 		owned: true,
-		marketplaceType: 'market',
+		cardType: 'market',
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -238,7 +238,7 @@ export const ShopBuyAction: Story = {
 		tokenId: '123',
 		action: CollectibleCardAction.BUY,
 		owned: false,
-		marketplaceType: 'shop',
+		cardType: 'shop',
 		salesContractAddress: MOCK_ADDRESS,
 		salePrice: {
 			amount: '1000000000000000000',
@@ -271,7 +271,7 @@ export const MarketBuyAction: Story = {
 		tokenId: '123',
 		action: CollectibleCardAction.BUY,
 		owned: false,
-		marketplaceType: 'market',
+		cardType: 'market',
 		lowestListing: {
 			...MOCK_ORDER,
 			side: OrderSide.listing,

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -1,10 +1,7 @@
 'use client';
 
 import type { Address } from 'viem';
-import type {
-	CollectibleCardAction,
-	MarketplaceType,
-} from '../../../../../types';
+import type { CardType, CollectibleCardAction } from '../../../../../types';
 import type { Order, OrderbookKind } from '../../../../_internal';
 import { NonOwnerActions } from './components/NonOwnerActions';
 import { OwnerActions } from './components/OwnerActions';
@@ -23,7 +20,7 @@ type ActionButtonProps = {
 	onCannotPerformAction?: (
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	salesContractAddress?: Address;
 	prioritizeOwnerActions?: boolean;
 	salePrice?: {
@@ -33,6 +30,7 @@ type ActionButtonProps = {
 	quantityDecimals?: number;
 	quantityRemaining?: number;
 	unlimitedSupply?: boolean;
+	hideQuantitySelector?: boolean;
 };
 
 export function ActionButton({
@@ -45,13 +43,14 @@ export function ActionButton({
 	highestOffer,
 	lowestListing,
 	onCannotPerformAction,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	prioritizeOwnerActions,
 	salePrice,
 	quantityDecimals,
 	quantityRemaining,
 	unlimitedSupply,
+	hideQuantitySelector,
 }: ActionButtonProps) {
 	const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 		tokenId,
@@ -78,9 +77,9 @@ export function ActionButton({
 	}
 
 	const nonOwnerProps =
-		marketplaceType === 'shop' && salesContractAddress && salePrice
+		cardType === 'shop' && salesContractAddress && salePrice
 			? {
-					marketplaceType: 'shop' as const,
+					cardType: 'shop' as const,
 					salesContractAddress,
 					salePrice,
 					action,
@@ -90,9 +89,10 @@ export function ActionButton({
 					quantityDecimals,
 					quantityRemaining,
 					unlimitedSupply,
+					hideQuantitySelector,
 				}
 			: {
-					marketplaceType: 'market' as const,
+					cardType: 'market' as const,
 					orderbookKind,
 					lowestListing,
 					action,
@@ -101,6 +101,7 @@ export function ActionButton({
 					chainId,
 					quantityDecimals,
 					quantityRemaining,
+					hideQuantitySelector,
 				};
 
 	return <NonOwnerActions {...nonOwnerProps} />;

package/src/react/ui/components/_internals/action-button/__tests__/NonOwnerActions.test.tsx

@@ -19,7 +19,7 @@ describe('NonOwnerActions', () => {
 
 	const marketProps = {
 		...baseProps,
-		marketplaceType: 'market' as const,
+		cardType: 'market' as const,
 		lowestListing: { ...mockOrder, side: OrderSide.listing },
 	};
 
@@ -38,7 +38,7 @@ describe('NonOwnerActions', () => {
 		render(
 			<NonOwnerActions
 				{...baseProps}
-				marketplaceType="shop"
+				cardType="shop"
 				salesContractAddress="0x123"
 				salePrice={{ amount: '0.1', currencyAddress: zeroAddress }}
 			/>,
@@ -48,7 +48,7 @@ describe('NonOwnerActions', () => {
 
 	it('throws error when lowestListing is missing for BUY action in MARKET marketplace type', () => {
 		expect(() => {
-			render(<NonOwnerActions {...baseProps} marketplaceType="market" />);
+			render(<NonOwnerActions {...baseProps} cardType="market" />);
 		}).toThrow('lowestListing is required for BUY action and MARKET card type');
 	});
 
@@ -56,7 +56,7 @@ describe('NonOwnerActions', () => {
 		render(
 			<NonOwnerActions
 				{...baseProps}
-				marketplaceType="market"
+				cardType="market"
 				action={CollectibleCardAction.OFFER}
 			/>,
 		);

package/src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx

@@ -16,10 +16,11 @@ type NonOwnerActionsBaseProps = {
 	quantityDecimals?: number;
 	quantityRemaining?: number;
 	unlimitedSupply?: boolean;
+	hideQuantitySelector?: boolean;
 };
 
 type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
-	marketplaceType: 'shop';
+	cardType: 'shop';
 	salesContractAddress: Address;
 	salePrice: {
 		amount: string;
@@ -30,7 +31,7 @@ type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
 };
 
 type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
-	marketplaceType: 'market';
+	cardType: 'market';
 	lowestListing?: Order;
 	orderbookKind?: OrderbookKind;
 	salesContractAddress?: never;
@@ -50,13 +51,14 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 		quantityDecimals,
 		quantityRemaining,
 		unlimitedSupply,
-		marketplaceType,
+		cardType,
+		hideQuantitySelector,
 	} = props;
 
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
-	if (marketplaceType === 'shop') {
+	if (cardType === 'shop') {
 		const { salesContractAddress, salePrice } = props;
 
 		return (
@@ -75,7 +77,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 								quantity: '1',
 							},
 						],
-						marketplaceType: 'shop',
+						cardType: 'shop',
 						salePrice: {
 							amount: salePrice.amount,
 							currencyAddress: salePrice.currencyAddress,
@@ -83,6 +85,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						quantityDecimals: quantityDecimals ?? 0,
 						quantityRemaining: quantityRemaining ?? 0,
 						unlimitedSupply,
+						hideQuantitySelector,
 					})
 				}
 				icon={SvgCartIcon}
@@ -110,7 +113,8 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						collectibleId: tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
-						marketplaceType: 'market',
+						cardType: 'market',
+						hideQuantitySelector,
 					})
 				}
 				icon={SvgCartIcon}

package/src/react/ui/components/_internals/custom-select/__tests__/CustomSelect.test.tsx

@@ -31,7 +31,7 @@ vi.mock('@0xsequence/design-system', async (importOriginal) => {
 
 	// Create a mock implementation that renders all dropdown content immediately
 	return {
-		// @ts-ignore - ignore spread type error
+		// @ts-expect-error - ignore spread type error
 		...actual,
 		DropdownMenuRoot: ({ children }: { children: ReactNode }) => (
 			<div>{children}</div>

package/src/react/ui/components/marketplace-collectible-card/CollectibleCard.tsx

@@ -2,16 +2,17 @@
 
 import type { CollectibleCardProps } from './types';
 import { MarketCard } from './variants/MarketCard';
+import { NonTradableInventoryCard } from './variants/NonTradableInventoryCard';
 
 import { ShopCard } from './variants/ShopCard';
 
 export function CollectibleCard(props: CollectibleCardProps) {
-	switch (props.marketplaceType) {
+	switch (props.cardType) {
 		case 'shop':
 			return <ShopCard {...props} />;
-		// biome-ignore lint/complexity/noUselessSwitchCase: explicit case makes code clearer and future-proof
 		case 'market':
-		default:
 			return <MarketCard {...props} />;
+		case 'inventory-non-tradable':
+			return <NonTradableInventoryCard {...props} />;
 	}
 }

package/src/react/ui/components/marketplace-collectible-card/CollectibleCardSkeleton.tsx

@@ -1,6 +1,13 @@
 import { Skeleton } from '@0xsequence/design-system';
+import { ContractType } from '../../../_internal';
 
-export function MarketplaceCollectibleCardSkeleton() {
+export function MarketplaceCollectibleCardSkeleton({
+	contractType,
+	isShop,
+}: {
+	contractType: ContractType;
+	isShop: boolean;
+}) {
 	return (
 		<div
 			data-testid="collectible-card-skeleton"
@@ -17,7 +24,11 @@ export function MarketplaceCollectibleCardSkeleton() {
 			</div>
 			<div className="mt-2 flex flex-col gap-2 px-4 pb-4">
 				<Skeleton size="lg" className="animate-shimmer" />
-				<Skeleton size="sm" className="animate-shimmer" />
+				<Skeleton size="sm" className="h-5 w-16 animate-shimmer" />
+
+				{isShop && contractType === ContractType.ERC1155 && (
+					<Skeleton size="lg" className="h-6 w-20 animate-shimmer" />
+				)}
 			</div>
 		</div>
 	);