@0xsequence/marketplace-sdk 0.8.7 → 0.8.8

package/src/react/hooks/__tests__/useMarketplaceConfig.test.tsx

@@ -1,12 +1,12 @@
 import { renderHook, server, waitFor } from '@test';
 import { describe, expect, it } from 'vitest';
+import { createLookupMarketplaceConfigErrorHandler } from '../../_internal/api/__mocks__/builder.msw';
+
 import {
-	createConfigHandler,
-	createErrorHandler,
 	createStylesErrorHandler,
 	mockConfig,
 	mockStyles,
-} from '../options/__mocks__/marketplaceConfig.msw';
+} from '../../_internal/api/__mocks__/builder.msw';
 import { useMarketplaceConfig } from '../useMarketplaceConfig';
 
 describe('useMarketplaceConfig', () => {
@@ -24,17 +24,13 @@ describe('useMarketplaceConfig', () => {
 
 		// Verify the data matches our mock
 		expect(result.current.data).toBeDefined();
-		expect(result.current.data).toEqual({
-			...mockConfig,
-			cssString: mockStyles.replaceAll(/['"]/g, ''),
-			manifestUrl: expect.stringContaining('/manifest.json'),
-		});
+		expect(result.current.data).toMatchSnapshot();
 		expect(result.current.error).toBeNull();
 	});
 
 	it('should handle config fetch error', async () => {
 		// Override the handler for this test to return an error
-		server.use(createErrorHandler());
+		server.use(createLookupMarketplaceConfigErrorHandler());
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 
@@ -48,7 +44,7 @@ describe('useMarketplaceConfig', () => {
 
 	it('should handle styles fetch error', async () => {
 		// Override the handler for this test to return an error
-		server.use(createStylesErrorHandler(), createConfigHandler());
+		server.use(createStylesErrorHandler());
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 
@@ -63,7 +59,10 @@ describe('useMarketplaceConfig', () => {
 
 	it('should handle both config and styles fetch errors', async () => {
 		// Override both handlers to return errors
-		server.use(createErrorHandler(), createStylesErrorHandler());
+		server.use(
+			createLookupMarketplaceConfigErrorHandler(),
+			createStylesErrorHandler(),
+		);
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 

package/src/react/hooks/options/index.ts

@@ -1,2 +1,2 @@
 export { fetchCollection, collectionOptions } from './collectionOptions';
-export * from './marketplaceConfigOptions';
+export * from '../../queries/marketplaceConfig';

package/src/react/hooks/useAutoSelectFeeOption.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { type Address, zeroAddress } from 'viem';
 
 import { useChain } from '@0xsequence/connect';

package/src/react/hooks/useMarketplaceConfig.tsx

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { marketplaceConfigOptions } from './options/marketplaceConfigOptions';
+import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 import { useConfig } from './useConfig';
 
-export * from './options/marketplaceConfigOptions';
+export * from '../queries/marketplaceConfig';
 
 export const useMarketplaceConfig = () => {
 	const config = useConfig();

package/src/react/queries/marketplaceConfig.ts

@@ -0,0 +1,101 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Env, SdkConfig } from '../../types';
+import { builderMarketplaceApi, builderRpcApi, configKeys } from '../_internal';
+import { BuilderAPI } from '../_internal/api/builder-api';
+import type { MarketplaceSettings } from '../_internal/api/builder.gen';
+
+export type MarketplaceConfig = MarketplaceSettings & {
+	cssString: string;
+	manifestUrl: string;
+};
+
+const fetchBuilderConfig = async ({
+	projectId,
+	projectAccessKey,
+	env,
+	prefetchedMarketplaceSettings,
+}: {
+	projectId: string;
+	projectAccessKey: string;
+	env: Env;
+	prefetchedMarketplaceSettings?: MarketplaceSettings;
+}) => {
+	if (prefetchedMarketplaceSettings) {
+		return prefetchedMarketplaceSettings;
+	}
+	const baseUrl = builderRpcApi(env);
+	const builderApi = new BuilderAPI(baseUrl, projectAccessKey);
+	const response = await builderApi.lookupMarketplaceConfig({
+		projectId: Number(projectId),
+	});
+	return response.settings;
+};
+
+const fetchStyles = async (projectId: string, env: Env) => {
+	const response = await fetch(
+		`${builderMarketplaceApi(projectId, env)}/styles.css`,
+	);
+	const styles = await response.text();
+	// React sanitizes this string, so we need to remove all quotes, they are not needed anyway
+	return styles.replaceAll(/['"]/g, '');
+};
+
+const fetchMarketplaceConfig = async ({
+	env,
+	projectId,
+	projectAccessKey,
+	prefetchedMarketplaceSettings,
+}: {
+	env: Env;
+	projectId: string;
+	projectAccessKey: string;
+	prefetchedMarketplaceSettings?: MarketplaceSettings;
+}): Promise<MarketplaceConfig> => {
+	const [marketplaceConfig, cssString] = await Promise.all([
+		fetchBuilderConfig({
+			projectId,
+			projectAccessKey,
+			env,
+			prefetchedMarketplaceSettings,
+		}),
+		fetchStyles(projectId, env),
+	]);
+
+	return {
+		...marketplaceConfig,
+		cssString,
+		manifestUrl: `${builderMarketplaceApi(projectId, env)}/manifest.json`,
+	};
+};
+
+export const marketplaceConfigOptions = (
+	config: Pick<SdkConfig, 'projectId' | 'projectAccessKey'> | SdkConfig,
+) => {
+	let env: Env = 'production';
+	if ('_internal' in config && config._internal !== undefined) {
+		env = config._internal.builderEnv ?? env;
+	}
+
+	let prefetchedMarketplaceSettings: MarketplaceSettings | undefined;
+	if (
+		'_internal' in config &&
+		config._internal?.prefetchedMarketplaceSettings
+	) {
+		prefetchedMarketplaceSettings =
+			config._internal.prefetchedMarketplaceSettings;
+	}
+
+	const projectId = config.projectId;
+	const projectAccessKey = config.projectAccessKey;
+
+	return queryOptions({
+		queryKey: [...configKeys.marketplace, env, projectId],
+		queryFn: () =>
+			fetchMarketplaceConfig({
+				env,
+				projectId,
+				projectAccessKey,
+				prefetchedMarketplaceSettings,
+			}),
+	});
+};

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

@@ -71,6 +71,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
   "landingPageLayout": "default",
   "logoUrl": "https://example.com/logo.png",
   "manifestUrl": "https://api.sequence.build/marketplace/test-project/manifest.json",
+  "projectId": 1,
   "publisherId": "test-publisher",
   "shortDescription": "A test marketplace",
   "socials": {

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

@@ -2,7 +2,7 @@ import type { QueryClient } from '@tanstack/react-query';
 import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
-import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions';
+import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 
 type InitSSRClientArgs = {
 	cookie: string;

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

@@ -11,8 +11,8 @@ import type {
 import { useCurrency } from '../../../hooks';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
-import { CollectibleAsset } from './CollectibleAsset';
 import { Footer } from './Footer';
+import { CollectibleAsset } from './collectible-asset/CollectibleAsset';
 
 function CollectibleSkeleton() {
 	return (
@@ -145,7 +145,7 @@ export function CollectibleCard({
 					/>
 
 					{(highestOffer || collectible) && !balanceIsLoading && (
-						<div className="-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]">
+						<div className="-bottom-16 absolute flex w-full origin-bottom items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-64px]">
 							<ActionButton
 								chainId={chainId}
 								collectionAddress={collectionAddress}

package/src/react/ui/components/collectible-card/__tests__/CollectibleAsset.test.tsx

@@ -1,7 +1,9 @@
-import { render, screen } from '@test/test-utils';
+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 '../CollectibleAsset';
+import { CollectibleAsset } from '../collectible-asset/CollectibleAsset';
+import * as contentTypeUtils from '../collectible-asset/utils';
 
 describe('CollectibleAsset', () => {
 	it('renders image content correctly with proper loading states and fallback', async () => {
@@ -86,7 +88,16 @@ describe('CollectibleAsset', () => {
 		window.Image = originalImage;
 	});
 
-	it('handles video content with appropriate controls and loading states', () => {
+	it('handles video content with appropriate controls and loading states', async () => {
+		const getContentTypeSpy = vi.spyOn(contentTypeUtils, 'getContentType');
+		getContentTypeSpy.mockResolvedValue('video');
+
+		const fetchContentTypeSpy = vi.spyOn(
+			fetchContentTypeModule,
+			'fetchContentType',
+		);
+		fetchContentTypeSpy.mockResolvedValue('video');
+
 		// Create a mock for the HTMLVideoElement addEventListener
 		const originalAddEventListener =
 			HTMLVideoElement.prototype.addEventListener;
@@ -122,34 +133,39 @@ describe('CollectibleAsset', () => {
 			/>,
 		);
 
-		// Check that video element is present with correct attributes
-		const videoElement = document.querySelector('video');
+		await waitFor(() => {
+			expect(screen.getByTestId('collectible-asset-video')).toBeInTheDocument();
+		});
+
+		const videoElement = screen.getByTestId(
+			'collectible-asset-video',
+		) as HTMLVideoElement;
+
 		expect(videoElement).not.toBeNull();
 
-		if (videoElement) {
-			// Video source should be set correctly
-			const sourceElement = videoElement.querySelector('source');
-			expect(sourceElement).not.toBeNull();
-			expect(sourceElement?.getAttribute('src')).toBe(
-				'https://example.com/video.mp4',
-			);
+		// Video source should be set correctly
+		const sourceElement = videoElement.querySelector('source');
+		expect(sourceElement).not.toBeNull();
+		expect(sourceElement?.getAttribute('src')).toBe(
+			'https://example.com/video.mp4',
+		);
 
-			// Video should have correct attributes for NFT display
-			expect(videoElement.autoplay).toBe(true);
-			expect(videoElement.loop).toBe(true);
-			expect(videoElement.controls).toBe(true);
-			expect(videoElement.playsInline).toBe(true);
-			expect(videoElement.muted).toBe(true);
+		// Video should have correct attributes for NFT display
+		expect(videoElement.autoplay).toBe(true);
+		expect(videoElement.loop).toBe(true);
+		expect(videoElement.controls).toBe(true);
+		expect(videoElement.playsInline).toBe(true);
+		expect(videoElement.muted).toBe(true);
 
-			// In Safari, pointer-events-none should be applied
-			expect(videoElement.className).toContain('pointer-events-none');
+		// In Safari, pointer-events-none should be applied
+		expect(videoElement.className).toContain('pointer-events-none');
 
-			// After metadata loaded, video should be visible
-			expect(videoElement.className).toContain('visible');
-			expect(videoElement.className).not.toContain('invisible');
-		}
+		// After metadata loaded, video should be visible
+		expect(videoElement.className).toContain('visible');
 
 		// Clean up mocks
+		getContentTypeSpy.mockRestore();
+		fetchContentTypeSpy.mockRestore();
 		HTMLVideoElement.prototype.addEventListener = originalAddEventListener;
 		Object.defineProperty(navigator, 'userAgent', {
 			value: originalUserAgent,
@@ -157,7 +173,16 @@ describe('CollectibleAsset', () => {
 		});
 	});
 
-	it('handles HTML content in iframes with proper sandboxing', () => {
+	it('handles HTML content in iframes with proper sandboxing', async () => {
+		const getContentTypeSpy = vi.spyOn(contentTypeUtils, 'getContentType');
+		getContentTypeSpy.mockResolvedValue('html');
+
+		const fetchContentTypeSpy = vi.spyOn(
+			fetchContentTypeModule,
+			'fetchContentType',
+		);
+		fetchContentTypeSpy.mockResolvedValue('html');
+
 		// Mock HTML content metadata
 		const mockHtmlMetadata: Partial<TokenMetadata> = {
 			tokenId: '1',
@@ -173,28 +198,33 @@ describe('CollectibleAsset', () => {
 			/>,
 		);
 
+		await waitFor(() => {
+			expect(document.querySelector('iframe')).toBeInTheDocument();
+		});
+
 		// Check that iframe element is present with correct attributes
-		const iframeElement = document.querySelector('iframe');
-		expect(iframeElement).not.toBeNull();
+		const iframeElement = document.querySelector('iframe') as HTMLIFrameElement;
+		expect(iframeElement).toBeInTheDocument();
 
-		if (iframeElement) {
-			// iframe source should be set correctly
-			expect(iframeElement.getAttribute('src')).toBe(
-				'https://example.com/interactive.html',
-			);
+		// iframe source should be set correctly
+		expect(iframeElement.getAttribute('src')).toBe(
+			'https://example.com/interactive.html',
+		);
 
-			// iframe should have appropriate attributes for security
-			expect(iframeElement.getAttribute('sandbox')).toBe('allow-scripts');
+		// iframe should have appropriate attributes for security
+		expect(iframeElement.getAttribute('sandbox')).toBe('allow-scripts');
 
-			// iframe should have title for accessibility
-			expect(iframeElement.getAttribute('title')).toBe('HTML Collectible');
+		// iframe should have title for accessibility
+		expect(iframeElement.getAttribute('title')).toBe('HTML Collectible');
 
-			// iframe should have proper styling
-			expect(iframeElement.className).toContain('aspect-square');
-			expect(iframeElement.className).toContain('w-full');
+		// iframe should have proper styling
+		expect(iframeElement.className).toContain('aspect-square');
+		expect(iframeElement.className).toContain('w-full');
 
-			// Verify border styling
-			expect(iframeElement.style.border).toBe('0px');
-		}
+		// Verify border styling
+		expect(iframeElement.style.border).toBe('0px');
+
+		getContentTypeSpy.mockRestore();
+		fetchContentTypeSpy.mockRestore();
 	});
 });

package/src/react/ui/components/collectible-card/{CollectibleAsset.tsx → collectible-asset/CollectibleAsset.tsx}

@@ -1,38 +1,12 @@
 'use client';
 
-import { Skeleton } from '@0xsequence/design-system';
 import { useEffect, useRef, useState } from 'react';
-import { cn } from '../../../../utils';
-import type { TokenMetadata } from '../../../_internal';
-import ChessTileImage from '../../images/chess-tile.png';
-
-export function CollectibleAssetSkeleton() {
-	return (
-		<Skeleton
-			data-testid="collectible-asset-skeleton"
-			size="lg"
-			className="absolute inset-0 h-full w-full animate-shimmer"
-			style={{
-				borderRadius: 0,
-			}}
-		/>
-	);
-}
-
-export const isHtml = (fileName: string | undefined) => {
-	const isHtml = /.*\.(html\?.+|html)$/.test(fileName?.toLowerCase() || '');
-	return isHtml;
-};
-
-export const isVideo = (fileName: string | undefined) => {
-	const isVideo = /.*\.(mp4|ogg|webm)$/.test(fileName?.toLowerCase() || '');
-	return isVideo;
-};
-
-export const is3dModel = (fileName: string | undefined) => {
-	const isGltf = /.*\.gltf$/.test(fileName?.toLowerCase() || '');
-	return isGltf;
-};
+import { cn } from '../../../../../utils';
+import { fetchContentType } from '../../../../../utils/fetchContentType';
+import type { TokenMetadata } from '../../../../_internal';
+import ChessTileImage from '../../../images/chess-tile.png';
+import CollectibleAssetSkeleton from './CollectibleAssetSkeleton';
+import { getContentType } from './utils';
 
 type CollectibleImageProps = {
 	name?: string;
@@ -47,6 +21,11 @@ export function CollectibleAsset({
 }: CollectibleImageProps) {
 	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
 	const [assetLoading, setAssetLoading] = useState(true);
+	const [contentType, setContentType] = useState<{
+		type: 'image' | 'video' | 'html' | null;
+		loading: boolean;
+		failed: boolean;
+	}>({ type: null, loading: true, failed: false });
 	const videoRef = useRef<HTMLVideoElement>(null);
 	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
@@ -62,17 +41,29 @@ export function CollectibleAsset({
 		: assetUrl;
 
 	useEffect(() => {
-		if (videoRef.current) {
-			videoRef.current.addEventListener('loadedmetadata', () => {
-				setAssetLoading(false);
+		getContentType(proxiedAssetUrl)
+			.then((contentType) => {
+				setContentType({ type: contentType, loading: false, failed: false });
+			})
+			.catch(() => {
+				fetchContentType(proxiedAssetUrl)
+					.then((contentType) => {
+						setContentType({
+							type: contentType,
+							loading: false,
+							failed: false,
+						});
+					})
+					.catch(() => {
+						setContentType({ type: null, loading: false, failed: true });
+					});
 			});
-		}
-	}, []);
+	}, [proxiedAssetUrl]);
 
-	if (isHtml(assetUrl)) {
+	if (contentType.type === 'html' && !assetLoadFailed) {
 		return (
 			<div className="flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary">
-				{assetLoading && <CollectibleAssetSkeleton />}
+				{(assetLoading || contentType.loading) && <CollectibleAssetSkeleton />}
 
 				<iframe
 					title={name || 'Collectible'}
@@ -92,10 +83,11 @@ export function CollectibleAsset({
 
 	// TODO: Add 3d model support
 
-	if (isVideo(assetUrl)) {
+	if (contentType.type === 'video' && !assetLoadFailed) {
 		return (
 			<div className="relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary">
-				{assetLoading && <CollectibleAssetSkeleton />}
+				{(assetLoading || contentType.loading) && <CollectibleAssetSkeleton />}
+
 				<video
 					ref={videoRef}
 					className={cn(
@@ -114,6 +106,10 @@ export function CollectibleAsset({
 					onError={() => {
 						setAssetLoadFailed(true);
 					}}
+					onLoadedMetadata={() => {
+						setAssetLoading(false);
+					}}
+					data-testid="collectible-asset-video"
 				>
 					<source src={proxiedAssetUrl} />
 				</video>
@@ -123,13 +119,17 @@ export function CollectibleAsset({
 
 	return (
 		<div className="relative aspect-square overflow-hidden bg-background-secondary">
-			{assetLoading && <CollectibleAssetSkeleton />}
+			{(assetLoading || contentType.loading) && <CollectibleAssetSkeleton />}
 
 			<img
-				src={assetLoadFailed ? placeholderImage : proxiedAssetUrl}
+				src={
+					assetLoadFailed || contentType.failed
+						? placeholderImage
+						: proxiedAssetUrl
+				}
 				alt={name || 'Collectible'}
 				className={`absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover ${
-					assetLoading ? 'invisible' : 'visible'
+					assetLoading || contentType.loading ? 'invisible' : 'visible'
 				}`}
 				onError={() => setAssetLoadFailed(true)}
 				onLoad={() => setAssetLoading(false)}

package/src/react/ui/components/collectible-card/collectible-asset/CollectibleAssetSkeleton.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from '@0xsequence/design-system';
+
+export default function CollectibleAssetSkeleton() {
+	return (
+		<Skeleton
+			data-testid="collectible-asset-skeleton"
+			size="lg"
+			className="absolute inset-0 h-full w-full animate-shimmer"
+			style={{
+				borderRadius: 0,
+			}}
+		/>
+	);
+}

package/src/react/ui/components/collectible-card/collectible-asset/utils.ts

@@ -0,0 +1,36 @@
+export const isImage = (fileName: string | undefined) => {
+	const isImage = /.*\.(png|jpg|jpeg|gif|svg|webp)$/.test(
+		fileName?.toLowerCase() || '',
+	);
+	return isImage;
+};
+
+export const isHtml = (fileName: string | undefined) => {
+	const isHtml = /.*\.(html\?.+|html)$/.test(fileName?.toLowerCase() || '');
+	return isHtml;
+};
+
+export const isVideo = (fileName: string | undefined) => {
+	const isVideo = /.*\.(mp4|ogg|webm)$/.test(fileName?.toLowerCase() || '');
+	return isVideo;
+};
+
+export const is3dModel = (fileName: string | undefined) => {
+	const isGltf = /.*\.gltf$/.test(fileName?.toLowerCase() || '');
+	return isGltf;
+};
+
+export const getContentType = (
+	url: string,
+): Promise<'image' | 'video' | 'html' | null> => {
+	return new Promise((resolve) => {
+		const type = isHtml(url)
+			? 'html'
+			: isVideo(url)
+				? 'video'
+				: isImage(url)
+					? 'image'
+					: null;
+		resolve(type);
+	});
+};

package/src/react/ui/modals/BuyModal/hooks/usePaymentModalParams.ts

@@ -40,6 +40,7 @@ interface GetBuyCollectableParams {
 	priceCurrencyAddress: string;
 	customCreditCardProviderCallback: ((buyStep: Step) => void) | undefined;
 	skipNativeBalanceCheck: boolean | undefined;
+	nativeTokenAddress: string | undefined;
 }
 
 export const getBuyCollectableParams = async ({
@@ -58,6 +59,7 @@ export const getBuyCollectableParams = async ({
 	checkoutOptions,
 	fee,
 	skipNativeBalanceCheck,
+	nativeTokenAddress,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(chainId, config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
@@ -111,7 +113,7 @@ export const getBuyCollectableParams = async ({
 			callbacks?.onSuccess?.({ hash: hash as Hash });
 		},
 		supplementaryAnalyticsInfo: {
-			orderId: orderId,
+			requestId: orderId,
 			marketplaceKind: marketplace,
 		},
 		onError: callbacks?.onError,
@@ -121,6 +123,7 @@ export const getBuyCollectableParams = async ({
 			buyModalStore.send({ type: 'close' });
 		},
 		skipNativeBalanceCheck,
+		nativeTokenAddress,
 		...(customCreditCardProviderCallback && {
 			customProviderCallback: () => {
 				customCreditCardProviderCallback(buyStep);
@@ -157,6 +160,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		orderId,
 		customCreditCardProviderCallback,
 		skipNativeBalanceCheck,
+		nativeTokenAddress,
 	} = buyModalProps;
 
 	const config = useConfig();
@@ -198,6 +202,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 						},
 						customCreditCardProviderCallback,
 						skipNativeBalanceCheck,
+						nativeTokenAddress,
 					})
 			: skipToken,
 	});

package/src/react/ui/modals/BuyModal/store.ts

@@ -11,6 +11,7 @@ export type BuyModalProps = {
 	marketplace: MarketplaceKind;
 	customCreditCardProviderCallback?: (buyStep: Step) => void;
 	skipNativeBalanceCheck?: boolean;
+	nativeTokenAddress?: Address;
 };
 
 export type onSuccessCallback = ({

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -1,6 +1,7 @@
 import type { Observable } from '@legendapp/state';
 import { type Address, type Hex, formatUnits } from 'viem';
-import type { OrderbookKind, Price } from '../../../../../types';
+import { OrderbookKind, type Price } from '../../../../../types';
+import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
 	type Step,
 	StepType,
@@ -196,12 +197,28 @@ export const useTransactionSteps = ({
 					formatUnits(BigInt(currencyValueRaw), currencyDecimal),
 				);
 
+				let requestId = orderId;
+
+				if (
+					hash &&
+					(orderbookKind === OrderbookKind.sequence_marketplace_v1 ||
+						orderbookKind === OrderbookKind.sequence_marketplace_v2)
+				) {
+					requestId = await getSequenceMarketplaceRequestId(
+						hash,
+						wallet.publicClient,
+						await wallet.address(),
+					);
+				}
+
 				analytics.trackCreateListing({
 					props: {
 						orderbookKind,
 						collectionAddress,
 						currencyAddress: listingInput.listing.currencyAddress,
-						currencySymbol: '',
+						currencySymbol: currency?.symbol || '',
+						tokenId: listingInput.listing.tokenId,
+						requestId: requestId || '',
 						chainId: chainId.toString(),
 						txnHash: hash || '',
 					},
@@ -214,6 +231,7 @@ export const useTransactionSteps = ({
 		} catch (error) {
 			steps$.transaction.isExecuting.set(false);
 			steps$.transaction.exist.set(false);
+
 			if (callbacks?.onError && typeof callbacks.onError === 'function') {
 				callbacks.onError(error as Error);
 			}