@0xsequence/marketplace-sdk 0.8.8 → 0.8.10

package/dist/utils/abi/primary-sale/index.js

@@ -0,0 +1,9 @@
+import {
+  ERC1155_SALES_CONTRACT_ABI,
+  ERC721_SALE_ABI
+} from "../../../chunk-Q3ECVC4F.js";
+export {
+  ERC1155_SALES_CONTRACT_ABI,
+  ERC721_SALE_ABI
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/abi/primary-sale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export { EIP2981_ABI, SequenceMarketplaceV1_ABI, SequenceMarketplaceV2_ABI } from './abi/marketplace/index.js';
 export { ERC1155_ABI, ERC20_ABI, ERC721_ABI } from './abi/token/index.js';
+export { ERC1155_SALES_CONTRACT_ABI, ERC721_SALE_ABI } from './abi/primary-sale/index.js';
 import { Image } from '@0xsequence/design-system';
 import { ComponentType } from 'react';
 import { M as MarketplaceKind } from '../marketplace.gen-DQzWciwC.js';

package/dist/utils/index.js

@@ -10,9 +10,13 @@ import {
   networkToWagmiChain,
   truncateEnd,
   truncateMiddle
-} from "../chunk-YEGD7PWE.js";
-import "../chunk-FMEEJFAF.js";
-import "../chunk-UISBTKFF.js";
+} from "../chunk-5O44EPXZ.js";
+import "../chunk-5C6ZZ6WX.js";
+import "../chunk-6CTFVBKU.js";
+import {
+  ERC1155_SALES_CONTRACT_ABI,
+  ERC721_SALE_ABI
+} from "../chunk-Q3ECVC4F.js";
 import {
   ERC1155_ABI,
   ERC20_ABI,
@@ -25,14 +29,16 @@ import {
 } from "../chunk-XX4EVWBF.js";
 import "../chunk-2PSNAIAT.js";
 import "../chunk-DWTLVJAW.js";
-import "../chunk-KGM2WLSP.js";
+import "../chunk-7F27CJZW.js";
 import "../chunk-D7RVSZAQ.js";
 import "../chunk-NX52D7NX.js";
 export {
   EIP2981_ABI,
   ERC1155_ABI,
+  ERC1155_SALES_CONTRACT_ABI,
   ERC20_ABI,
   ERC721_ABI,
+  ERC721_SALE_ABI,
   SequenceMarketplaceV1_ABI,
   SequenceMarketplaceV2_ABI,
   calculateEarningsAfterFees,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@0xsequence/marketplace-sdk",
   "private": false,
-  "version": "0.8.8",
+  "version": "0.8.10",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -41,59 +41,60 @@
   "dependencies": {
     "@databeat/tracker": "^0.9.3",
     "@legendapp/state": "^3.0.0-beta.30",
-    "@tailwindcss/postcss": "^4.0.15",
-    "@xstate/store": "^3.4.3",
+    "@tailwindcss/postcss": "^4.1.6",
+    "@xstate/store": "^3.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dnum": "^2.14.0",
     "nuqs": "^2.4.3",
     "react-day-picker": "^9.6.7",
-    "tailwind-merge": "^3.0.2",
-    "zod": "^3.24.2"
+    "tailwind-merge": "^3.3.0",
+    "zod": "^3.24.4"
   },
   "peerDependencies": {
-    "0xsequence": "^2.3.8",
-    "@0xsequence/api": "^2.3.8",
-    "@0xsequence/checkout": "^5.2.2",
-    "@0xsequence/connect": "^5.2.2",
-    "@0xsequence/design-system": "^2.1.6",
-    "@0xsequence/indexer": "^2.3.8",
-    "@0xsequence/metadata": "^2.3.8",
-    "@0xsequence/network": "^2.3.8",
-    "@tanstack/react-query": "^5.74.3",
+    "0xsequence": "^2.3.12",
+    "@0xsequence/api": "^2.3.12",
+    "@0xsequence/checkout": "^5.3.1",
+    "@0xsequence/connect": "^5.3.1",
+    "@0xsequence/design-system": "^2.1.12",
+    "@0xsequence/indexer": "^2.3.12",
+    "@0xsequence/metadata": "^2.3.12",
+    "@0xsequence/network": "^2.3.12",
+    "@tanstack/react-query": "^5.76.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "viem": "^2.27.0",
-    "wagmi": "^2.14.16"
+    "viem": "^2.29.2",
+    "wagmi": "^2.15.3",
+    "@google/model-viewer": "^4.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@changesets/cli": "^2.29.0",
-    "@eslint/js": "^9.23.0",
+    "@changesets/cli": "^2.29.4",
+    "@eslint/js": "^9.26.0",
     "@testing-library/jest-dom": "6.4.7",
-    "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@vitest/coverage-v8": "3.0.9",
     "ctix": "^2.7.1",
     "esbuild-plugin-preserve-directives": "^0.0.11",
-    "eslint": "^9.23.0",
+    "eslint": "^9.26.0",
     "eslint-config-biome": "^1.9.4",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.0.0",
-    "happy-dom": "^17.4.4",
-    "jsdom": "^26.0.0",
-    "msw": "^2.7.3",
+    "globals": "^16.1.0",
+    "happy-dom": "^17.4.7",
+    "jsdom": "^26.1.0",
+    "msw": "^2.8.2",
     "postcss": "^8.5.3",
-    "prool": "^0.0.23",
-    "tailwindcss": "^4.1.4",
+    "prool": "^0.0.24",
+    "tailwindcss": "^4.1.6",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.27.0",
+    "typescript-eslint": "^8.32.1",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.9"
+    "vitest": "^3.1.3"
   },
   "scripts": {
     "build": "tsc -b && tsup",

package/src/react/_internal/api/services.ts

@@ -1,3 +1,4 @@
+import { SequenceAPIClient } from '@0xsequence/api';
 import { SequenceIndexer } from '@0xsequence/indexer';
 import { SequenceMetadata } from '@0xsequence/metadata';
 import { networks, stringTemplate } from '@0xsequence/network';
@@ -6,7 +7,7 @@ import { MissingConfigError } from '../../../utils/_internal/error/transaction';
 import { SequenceMarketplace } from './marketplace-api';
 
 const SERVICES = {
-	sequenceApi: 'https://api.sequence.app',
+	sequenceApi: 'https://${prefix}api.sequence.app',
 	metadata: 'https://${prefix}metadata.sequence.app',
 	indexer: 'https://${prefix}${network}-indexer.sequence.app',
 	marketplaceApi: 'https://${prefix}marketplace-api.sequence.app/${network}',
@@ -51,6 +52,11 @@ export const builderRpcApi = (env: Env = 'production') => {
 	return stringTemplate(SERVICES.builderRpcApi, { prefix });
 };
 
+export const sequenceApiUrl = (env: Env = 'production') => {
+	const prefix = getPrefix(env);
+	return stringTemplate(SERVICES.sequenceApi, { prefix });
+};
+
 export const builderMarketplaceApi = (
 	projectId: string,
 	env: Env = 'production',
@@ -82,6 +88,11 @@ export const getMarketplaceClient = (
 		projectAccessKey,
 	);
 };
+export const getSequenceApiClient = (config: SdkConfig) => {
+	const env = config._internal?.sequenceApiEnv || 'production';
+	const projectAccessKey = getAccessKey({ env, config });
+	return new SequenceAPIClient(sequenceApiUrl(env), projectAccessKey);
+};
 const getAccessKey = ({ env, config }: { env: Env; config: SdkConfig }) => {
 	switch (env) {
 		case 'development':

package/src/react/hooks/index.ts

@@ -36,3 +36,4 @@ export * from './useListCollections';
 export * from './useCancelOrder';
 export * from './useCollectionDetails';
 export * from './useCollectionDetailsPolling';
+export * from './useListTokenMetadata';

package/src/react/hooks/useList1155SaleSupplies.tsx

@@ -0,0 +1,62 @@
+import { getUnixTime } from 'date-fns';
+import type { Address } from 'viem';
+import { useReadContracts } from 'wagmi';
+import { ERC1155_SALES_CONTRACT_ABI } from '../..';
+
+interface UseSaleSupplyDataProps {
+	tokenIds: string[];
+	salesContractAddress: Address;
+}
+
+export function useList1155SaleSupplies({
+	tokenIds,
+	salesContractAddress,
+}: UseSaleSupplyDataProps) {
+	const getReadContractsArgs = (tokenIds: string[]) =>
+		tokenIds.map((tokenId) => ({
+			address: salesContractAddress,
+			abi: ERC1155_SALES_CONTRACT_ABI,
+			functionName: 'tokenSaleDetails',
+			args: [tokenId],
+		}));
+
+	const {
+		data: supplyData,
+		isLoading: supplyDataLoading,
+		error: supplyDataError,
+	} = useReadContracts({
+		batchSize: 500_000, // Node gateway limit has a limit of 512kB, setting it to 500kB to be safe
+		contracts: getReadContractsArgs(tokenIds),
+	});
+
+	const extendedSupplyData = (supplyData || [])
+		.map((data, index) => ({
+			...data,
+			tokenId: tokenIds[index],
+		}))
+		.filter((data) => data.status === 'success')
+		.filter((data) => {
+			if (typeof data.result !== 'object') return false;
+			const now = BigInt(getUnixTime(new Date()));
+			return data.result.endTime > now && data.result.startTime < now;
+		});
+
+	const getSupply = (tokenId: string): number | undefined => {
+		const found = extendedSupplyData.find((data) => data.tokenId === tokenId);
+		if (!found || typeof found.result !== 'object' || found.result === null)
+			return undefined;
+		const supply = found.result.supplyCap;
+		if (supply === undefined) return undefined;
+		// https://github.com/0xsequence/contracts-library/blob/ead1baf34270c76260d01cfc130bb7cc9d57518e/src/tokens/ERC1155/utility/sale/IERC1155Sale.sol#L8
+		// 0 means infinite
+		if (supply === 0n) return Number.POSITIVE_INFINITY;
+		return Number(supply);
+	};
+
+	return {
+		extendedSupplyData,
+		getSupply,
+		supplyDataLoading,
+		supplyDataError,
+	};
+}

package/src/react/hooks/useListTokenMetadata.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { useConfig } from './useConfig';
+
+import {
+	type FetchTokenMetadataArgs,
+	tokenMetadataOptions,
+} from '../queries/listTokenMetadata';
+
+export const useListTokenMetadata = (args: FetchTokenMetadataArgs) => {
+	const config = useConfig();
+	const { chainId, contractAddress, tokenIds, query } = args;
+
+	return useQuery({
+		...tokenMetadataOptions(
+			{ chainId, contractAddress, tokenIds, query },
+			config,
+		),
+	});
+};

package/src/react/queries/index.ts

@@ -5,3 +5,4 @@ export * from './listCollectibles';
 export * from './highestOffer';
 export * from './listBalances';
 export * from './lowestListing';
+export * from './listTokenMetadata';

package/src/react/queries/listTokenMetadata.ts

@@ -0,0 +1,38 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import { getMetadataClient } from '../_internal';
+
+export interface FetchTokenMetadataArgs {
+	chainId: number;
+	contractAddress: string;
+	tokenIds: string[];
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+const fetchTokenMetadata = async (
+	{ chainId, contractAddress, tokenIds }: FetchTokenMetadataArgs,
+	config: SdkConfig,
+) => {
+	const metadataClient = getMetadataClient(config);
+
+	const response = await metadataClient.getTokenMetadata({
+		chainID: chainId.toString(),
+		contractAddress: contractAddress,
+		tokenIDs: tokenIds,
+	});
+
+	return response.tokenMetadata;
+};
+
+export const tokenMetadataOptions = (
+	args: FetchTokenMetadataArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: ['listTokenMetadata', args.chainId, args.contractAddress],
+		queryFn: () => fetchTokenMetadata(args, config),
+	});
+};

package/src/react/ui/components/ModelViewer.tsx

@@ -0,0 +1,54 @@
+import { Skeleton } from '@0xsequence/design-system';
+import { Suspense, lazy } from 'react';
+
+const ModelViewerComponent = lazy(() =>
+	import('@google/model-viewer').then(() => ({
+		default: ({
+			posterSrc,
+			src,
+			onLoad,
+			onError,
+		}: {
+			posterSrc: string;
+			src?: string;
+			onLoad?: () => void;
+			onError?: () => void;
+		}) => (
+			<div className="h-full w-full bg-background-raised">
+				{/* @ts-expect-error - This is a web component */}
+				<model-viewer
+					alt="3d model"
+					auto-rotate
+					autoplay
+					camera-controls
+					class="h-full w-full"
+					error={onError}
+					load={onLoad}
+					loading="eager"
+					poster={posterSrc}
+					reveal="auto"
+					shadow-intensity="1"
+					src={src}
+					touch-action="pan-y"
+				/>
+			</div>
+		),
+	})),
+);
+
+const ModelViewerLoading = () => <Skeleton className="h-full w-full" />;
+
+const ModelViewer = (props: {
+	posterSrc: string;
+	src?: string;
+	onLoad?: () => void;
+	onError?: () => void;
+}) => {
+	return (
+		<Suspense fallback={<ModelViewerLoading />}>
+			<ModelViewerComponent {...props} />
+		</Suspense>
+	);
+};
+
+export default ModelViewer;

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

@@ -62,7 +62,6 @@ export const CustomSelect = ({
 						</div>
 					}
 					shape="circle"
-					opacity="100"
 					className={`bg-overlay-light py-1.5 pl-3 ${className || ''}`}
 					data-testid={`${testId}-trigger`}
 				/>

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

@@ -12,7 +12,7 @@ import { useCurrency } from '../../../hooks';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
-import { CollectibleAsset } from './collectible-asset/CollectibleAsset';
+import { Media } from './media/Media';
 
 function CollectibleSkeleton() {
 	return (
@@ -127,9 +127,13 @@ export function CollectibleCard({
 		>
 			<div className="group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]">
 				<article className="w-full rounded-xl">
-					<CollectibleAsset
+					<Media
 						name={collectibleMetadata?.name || ''}
-						collectibleMetadata={collectibleMetadata}
+						assets={[
+							collectibleMetadata?.image,
+							collectibleMetadata?.video,
+							collectibleMetadata?.animation_url,
+						]}
 						assetSrcPrefixUrl={assetSrcPrefixUrl}
 					/>
 

package/src/react/ui/components/collectible-card/__tests__/{CollectibleAsset.test.tsx → Media.test.tsx}

@@ -2,10 +2,10 @@ import { render, screen, waitFor } from '@test/test-utils';
 import { describe, expect, it, vi } from 'vitest';
 import * as fetchContentTypeModule from '../../../../../utils/fetchContentType';
 import type { TokenMetadata } from '../../../../_internal';
-import { CollectibleAsset } from '../collectible-asset/CollectibleAsset';
-import * as contentTypeUtils from '../collectible-asset/utils';
+import { Media } from '../media/Media';
+import * as contentTypeUtils from '../media/utils';
 
-describe('CollectibleAsset', () => {
+describe('Media', () => {
 	it('renders image content correctly with proper loading states and fallback', async () => {
 		const originalImage = window.Image;
 
@@ -30,10 +30,7 @@ describe('CollectibleAsset', () => {
 
 		// Initial render should show the loading skeleton
 		const { rerender } = render(
-			<CollectibleAsset
-				name="Test Collectible"
-				collectibleMetadata={mockMetadata as TokenMetadata}
-			/>,
+			<Media name="Test Collectible" assets={[mockMetadata.image]} />,
 		);
 
 		// check if skeleton is rendered during loading
@@ -69,9 +66,9 @@ describe('CollectibleAsset', () => {
 		};
 
 		rerender(
-			<CollectibleAsset
+			<Media
 				name="Test Collectible"
-				collectibleMetadata={mockMetadataWithBadImage as TokenMetadata}
+				assets={[mockMetadataWithBadImage.image]}
 			/>,
 		);
 
@@ -127,10 +124,7 @@ describe('CollectibleAsset', () => {
 		};
 
 		render(
-			<CollectibleAsset
-				name="Video Collectible"
-				collectibleMetadata={mockVideoMetadata as TokenMetadata}
-			/>,
+			<Media name="Video Collectible" assets={[mockVideoMetadata.video]} />,
 		);
 
 		await waitFor(() => {
@@ -192,9 +186,9 @@ describe('CollectibleAsset', () => {
 		};
 
 		render(
-			<CollectibleAsset
+			<Media
 				name="HTML Collectible"
-				collectibleMetadata={mockHtmlMetadata as TokenMetadata}
+				assets={[mockHtmlMetadata.animation_url]}
 			/>,
 		);
 

package/src/react/ui/components/collectible-card/index.ts

@@ -1 +1,2 @@
 export * from './CollectibleCard';
+export * from './media/Media';