@0xsequence/marketplace-sdk 1.0.0 → 1.1.0

package/src/react/queries/marketplaceConfig.ts

@@ -1,4 +1,5 @@
 import { queryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
 import type { ContractType, OrderbookKind, SdkConfig } from '../../types';
 import type {
 	MarketCollection,
@@ -37,7 +38,8 @@ export const fetchMarketplaceConfig = async ({
 			contractType: collection.contractType as ContractType,
 			destinationMarketplace:
 				collection.destinationMarketplace as OrderbookKind,
-			marketplaceType: 'market',
+			itemsAddress: collection.itemsAddress as Address,
+			cardType: 'market',
 		} satisfies MarketCollection;
 	});
 
@@ -45,7 +47,9 @@ export const fetchMarketplaceConfig = async ({
 		(collection) => {
 			return {
 				...collection,
-				marketplaceType: 'shop',
+				itemsAddress: collection.itemsAddress as Address,
+				saleAddress: collection.saleAddress as Address,
+				cardType: 'shop',
 			} satisfies ShopCollection;
 		},
 	);

package/src/react/queries/tokenBalances.ts

@@ -0,0 +1,85 @@
+import { queryOptions, skipToken } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { UseQueryParameters } from 'wagmi/query';
+import type { SdkConfig } from '../../types';
+import { collectableKeys, getIndexerClient, LaosAPI } from '../_internal';
+
+export type UseTokenBalancesArgs = {
+	collectionAddress: Address;
+	userAddress: Address | undefined;
+	chainId: number;
+	isLaos721?: boolean;
+	includeMetadata?: boolean;
+	query?: UseQueryParameters;
+};
+
+/**
+ * Fetches the token balances for a user
+ *
+ * @param args - Arguments for the API call
+ * @param config - SDK configuration
+ * @returns The balance data
+ */
+export async function fetchTokenBalances(
+	args: Omit<UseTokenBalancesArgs, 'userAddress'> & {
+		userAddress: Address;
+	},
+	config: SdkConfig,
+) {
+	if (args.isLaos721) {
+		const laosApi = new LaosAPI();
+		const response = await laosApi.getTokenBalances({
+			chainId: args.chainId.toString(),
+			contractAddress: args.collectionAddress,
+			accountAddress: args.userAddress,
+			includeMetadata: true,
+		});
+
+		return response.balances || [];
+	}
+
+	const indexerClient = getIndexerClient(args.chainId, config);
+	return indexerClient
+		.getTokenBalances({
+			accountAddress: args.userAddress,
+			contractAddress: args.collectionAddress,
+			includeMetadata: args.includeMetadata ?? false,
+			metadataOptions: {
+				verifiedOnly: true,
+				includeContracts: [args.collectionAddress],
+			},
+		})
+		.then((res) => res.balances || []);
+}
+
+/**
+ * Creates a tanstack query options object for the token balances query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function tokenBalancesOptions(
+	args: UseTokenBalancesArgs,
+	config: SdkConfig,
+) {
+	const enabled =
+		!!args.userAddress &&
+		!!args.collectionAddress &&
+		(args.query?.enabled ?? true);
+
+	return queryOptions({
+		queryKey: [...collectableKeys.userBalances, args],
+		queryFn: enabled
+			? () =>
+					fetchTokenBalances(
+						{
+							...args,
+							// biome-ignore lint/style/noNonNullAssertion: this is guaranteed by the userAddress check above
+							userAddress: args.userAddress!,
+						},
+						config,
+					)
+			: skipToken,
+	});
+}

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/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?: {
@@ -45,7 +42,7 @@ export function ActionButton({
 	highestOffer,
 	lowestListing,
 	onCannotPerformAction,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	prioritizeOwnerActions,
 	salePrice,
@@ -78,9 +75,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,
@@ -92,7 +89,7 @@ export function ActionButton({
 					unlimitedSupply,
 				}
 			: {
-					marketplaceType: 'market' as const,
+					cardType: 'market' as const,
 					orderbookKind,
 					lowestListing,
 					action,

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

@@ -19,7 +19,7 @@ type NonOwnerActionsBaseProps = {
 };
 
 type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
-	marketplaceType: 'shop';
+	cardType: 'shop';
 	salesContractAddress: Address;
 	salePrice: {
 		amount: string;
@@ -30,7 +30,7 @@ type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
 };
 
 type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
-	marketplaceType: 'market';
+	cardType: 'market';
 	lowestListing?: Order;
 	orderbookKind?: OrderbookKind;
 	salesContractAddress?: never;
@@ -50,13 +50,13 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 		quantityDecimals,
 		quantityRemaining,
 		unlimitedSupply,
-		marketplaceType,
+		cardType,
 	} = props;
 
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
-	if (marketplaceType === 'shop') {
+	if (cardType === 'shop') {
 		const { salesContractAddress, salePrice } = props;
 
 		return (
@@ -75,7 +75,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 								quantity: '1',
 							},
 						],
-						marketplaceType: 'shop',
+						cardType: 'shop',
 						salePrice: {
 							amount: salePrice.amount,
 							currencyAddress: salePrice.currencyAddress,
@@ -110,7 +110,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						collectibleId: tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
-						marketplaceType: 'market',
+						cardType: 'market',
 					})
 				}
 				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>
 	);

package/src/react/ui/components/marketplace-collectible-card/components/ActionButtonWrapper.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 { ActionButton } from '../../_internals/action-button/ActionButton';
 
@@ -21,7 +18,7 @@ interface ActionButtonWrapperProps {
 	onCannotPerformAction?: (
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	salesContractAddress?: Address;
 	prioritizeOwnerActions?: boolean;
 	salePrice?: {
@@ -44,7 +41,7 @@ export function ActionButtonWrapper({
 	lowestListing,
 	owned,
 	onCannotPerformAction,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	prioritizeOwnerActions,
 	salePrice,
@@ -66,7 +63,7 @@ export function ActionButtonWrapper({
 				lowestListing={lowestListing}
 				owned={owned}
 				onCannotPerformAction={onCannotPerformAction}
-				marketplaceType={marketplaceType}
+				cardType={cardType}
 				salesContractAddress={salesContractAddress}
 				prioritizeOwnerActions={prioritizeOwnerActions}
 				salePrice={salePrice}

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

@@ -1,12 +1,12 @@
 'use client';
 
 import { cn } from '@0xsequence/design-system';
+import type { ContractType } from '../../../../_internal';
 import { Media } from '../../media/Media';
 import { MarketplaceCollectibleCardSkeleton } from '../CollectibleCardSkeleton';
 import type { MarketplaceCardBaseProps } from '../types';
-
 export interface BaseCardProps extends MarketplaceCardBaseProps {
-	isLoading: boolean;
+	cardLoading: boolean;
 	name: string;
 	image?: string;
 	video?: string;
@@ -15,10 +15,11 @@ export interface BaseCardProps extends MarketplaceCardBaseProps {
 	onKeyDown?: (e: React.KeyboardEvent) => void;
 	children: React.ReactNode;
 	mediaClassName?: string;
+	contractType: ContractType;
+	isShop: boolean;
 }
 
 export function BaseCard({
-	isLoading,
 	name,
 	image,
 	video,
@@ -28,9 +29,17 @@ export function BaseCard({
 	assetSrcPrefixUrl,
 	children,
 	mediaClassName,
+	cardLoading,
+	contractType,
+	isShop,
 }: BaseCardProps) {
-	if (isLoading) {
-		return <MarketplaceCollectibleCardSkeleton />;
+	if (cardLoading) {
+		return (
+			<MarketplaceCollectibleCardSkeleton
+				contractType={contractType}
+				isShop={isShop}
+			/>
+		);
 	}
 
 	return (