@0xsequence/marketplace-sdk 0.8.6 → 0.8.8

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);
 			}

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

@@ -1,6 +1,7 @@
 import type { Observable } from '@legendapp/state';
 import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
+import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
 	type Step,
 	StepType,
@@ -177,7 +178,6 @@ export const useTransactionSteps = ({
 
 			if (orderId) {
 				// no need to wait for receipt, because the order is already created
-
 				steps$.transaction.isExecuting.set(false);
 				steps$.transaction.exist.set(false);
 			}
@@ -189,6 +189,20 @@ 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.trackCreateOffer({
 					props: {
 						orderbookKind,
@@ -196,6 +210,7 @@ export const useTransactionSteps = ({
 						currencyAddress: offerInput.offer.currencyAddress,
 						currencySymbol: currency?.symbol || '',
 						chainId: chainId.toString(),
+						requestId: requestId || '',
 						txnHash: hash || '',
 					},
 					nums: {
@@ -207,6 +222,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);
 			}

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

@@ -196,9 +196,12 @@ export const useTransactionSteps = ({
 				analytics.trackSellItems({
 					props: {
 						marketplaceKind: marketplace,
+						userId: await wallet.address(),
 						collectionAddress,
 						currencyAddress: ordersData[0].currencyAddress,
 						currencySymbol,
+						requestId: ordersData[0].orderId,
+						tokenId: collectibleId,
 						chainId: chainId.toString(),
 						txnHash: hash || '',
 					},
@@ -211,6 +214,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);
 			}

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@test';
-import { type Address, custom, zeroAddress } from 'viem';
+import { type Address, type PublicClient, custom, zeroAddress } from 'viem';
 import { mainnet, polygon } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { WalletKind } from '../../../../../_internal';
@@ -102,6 +102,8 @@ describe('ActionModal', () => {
 					handleSendTransactionStep: vi.fn(),
 					handleSignMessageStep: vi.fn(),
 					hasTokenApproval: vi.fn(),
+					// @ts-expect-error
+					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
 				},
 				isLoading: false,
 				isError: false,
@@ -127,6 +129,8 @@ describe('ActionModal', () => {
 					handleSendTransactionStep: vi.fn(),
 					handleSignMessageStep: vi.fn(),
 					hasTokenApproval: vi.fn(),
+					// @ts-expect-error
+					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
 				},
 				isLoading: false,
 				isError: false,
@@ -160,6 +164,8 @@ describe('ActionModal', () => {
 					handleSendTransactionStep: vi.fn(),
 					handleSignMessageStep: vi.fn(),
 					hasTokenApproval: vi.fn(),
+					// @ts-expect-error
+					publicClient: vi.fn().mockResolvedValue({} as PublicClient),
 				},
 				isLoading: false,
 				isError: false,

package/src/types/index.ts

@@ -1,4 +1,10 @@
 export * from './api-types';
 export * from './sdk-config';
 export * from './types';
-export * from './builder-types';
+export type * from '../react/_internal/api/builder.gen';
+export type * from './../react/queries/marketplaceConfig';
+export {
+	MarketplaceWallet,
+	FilterCondition,
+	MarketplaceType,
+} from '../react/_internal/api/builder.gen';

package/src/types/sdk-config.ts

@@ -1,18 +1,13 @@
+import type { MarketplaceSettings } from '../react/_internal/api/builder.gen';
+
 export type Env = 'development' | 'next' | 'production';
 
 export type SdkConfig = {
 	projectAccessKey: string;
 	projectId: string;
-	wallet?: {
-		walletConnectProjectId?: string;
-		embedded?: {
-			waasConfigKey: string;
-			googleClientId?: string;
-			appleClientId?: string;
-			appleRedirectURI?: string;
-		};
-	};
+	walletConnectProjectId?: string;
 	_internal?: {
+		prefetchedMarketplaceSettings?: MarketplaceSettings;
 		devAccessKey?: string;
 		nextAccessKey?: string;
 		builderEnv?: Env;

package/src/utils/fetchContentType.ts

@@ -0,0 +1,101 @@
+/**
+ * Fetches the Content-Type header of a given URL and returns the primary type if it's supported.
+ * @param url The URL to send the request to.
+ * @returns A Promise that resolves with 'image', 'video', 'html', or null.
+ */
+export function fetchContentType(
+	url: string,
+): Promise<'image' | 'video' | 'html' | null> {
+	return new Promise((resolve, reject) => {
+		if (typeof XMLHttpRequest === 'undefined') {
+			reject(new Error('XMLHttpRequest is not supported in this environment.'));
+			return;
+		}
+
+		const client = new XMLHttpRequest();
+		let settled = false;
+
+		const settle = (value: 'image' | 'video' | 'html' | null) => {
+			if (!settled) {
+				settled = true;
+				resolve(value);
+				client.abort();
+			}
+		};
+
+		const fail = (error: Error) => {
+			if (!settled) {
+				settled = true;
+				reject(error);
+			}
+		};
+
+		client.open('HEAD', url, true);
+
+		client.onreadystatechange = () => {
+			if (settled || client.readyState < XMLHttpRequest.HEADERS_RECEIVED) {
+				return;
+			}
+
+			if (client.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+				const status = client.status;
+
+				if (status < 200 || status >= 300) {
+					settle(null);
+					return;
+				}
+
+				const contentType = client.getResponseHeader('Content-Type');
+
+				if (!contentType) {
+					settle(null);
+					return;
+				}
+
+				const primaryType = contentType.split('/')[0].toLowerCase();
+				let result: 'image' | 'video' | 'html' | null = null;
+
+				switch (primaryType) {
+					case 'image':
+						result = 'image';
+						break;
+					case 'video':
+						result = 'video';
+						break;
+					case 'text':
+						if (contentType.toLowerCase().includes('html')) {
+							result = 'html';
+						}
+						break;
+				}
+
+				settle(result);
+				return;
+			}
+		};
+
+		client.onerror = (errorEvent) => {
+			fail(
+				new Error(`XMLHttpRequest network error for URL: ${url}`, {
+					cause: errorEvent,
+				}),
+			);
+		};
+
+		client.onabort = () => {
+			if (!settled) {
+				settle(null);
+			}
+		};
+
+		try {
+			client.send();
+		} catch (error) {
+			fail(
+				new Error(`Error sending XMLHttpRequest for URL: ${url}`, {
+					cause: error,
+				}),
+			);
+		}
+	});
+}

package/src/utils/getMarketplaceDetails.ts

@@ -62,6 +62,7 @@ const KIND_TO_MARKETPLACE: Partial<
 	[MarketplaceKind.looks_rare]: 'looksrare',
 	[MarketplaceKind.x2y2]: 'x2y2',
 	[MarketplaceKind.blur]: 'blur',
+	[MarketplaceKind.magic_eden]: 'magiceden',
 };
 
 type MarketplaceDetailsProp = {
@@ -69,7 +70,7 @@ type MarketplaceDetailsProp = {
 	kind: MarketplaceKind;
 };
 
-// TODO: add suport for more marketplaces and improve detection of marketplace
+// TODO: add support for more marketplaces and improve detection of marketplace
 export function getMarketplaceDetails({
 	originName,
 	kind,

package/src/utils/getSequenceMarketRequestId.ts

@@ -0,0 +1,32 @@
+import {
+	type Address,
+	type Hex,
+	type PublicClient,
+	parseEventLogs,
+} from 'viem';
+import { SequenceMarketplaceV1_ABI } from '..';
+
+export const getSequenceMarketplaceRequestId = async (
+	hash: Hex,
+	publicClient: PublicClient,
+	walletAddress: Address,
+) => {
+	try {
+		const receipt = await publicClient.getTransactionReceipt({
+			hash: hash,
+		});
+
+		const logs = parseEventLogs({
+			abi: SequenceMarketplaceV1_ABI,
+			eventName: 'RequestCreated',
+			args: {
+				creator: walletAddress,
+			},
+			logs: receipt.logs,
+		});
+
+		return logs[0].args.requestId.toString();
+	} catch (error) {
+		console.error(error);
+	}
+};

package/test/mocks/wallet.ts

@@ -1,5 +1,5 @@
 import type { TransactionReceipt } from '@0xsequence/indexer';
-import { type Hex, custom } from 'viem';
+import { type Hex, type PublicClient, custom } from 'viem';
 import { vi } from 'vitest';
 import { WalletKind } from '../../src';
 import type { WalletInstance } from '../../src/react/_internal/wallet/wallet';
@@ -30,6 +30,8 @@ export function createMockWallet(overrides?: Partial<MockWallet>): MockWallet {
 		}),
 		walletKind: WalletKind.unknown,
 		hasTokenApproval: vi.fn().mockResolvedValue(true),
+		// @ts-expect-error
+		publicClient: vi.fn().mockResolvedValue({} as PublicClient),
 	};
 
 	return {

package/test/test-utils.tsx

@@ -18,10 +18,10 @@ import {
 import { mainnet as wagmiMainet, polygon as wagmiPolygon } from 'viem/chains';
 import { http, type Config, WagmiProvider, createConfig } from 'wagmi';
 import { mock } from 'wagmi/connectors';
+import { handlers as marketplaceConfigHandlers } from '../src/react/_internal/api/__mocks__/builder.msw';
 import { handlers as indexerHandlers } from '../src/react/_internal/api/__mocks__/indexer.msw';
 import { handlers as marketplaceHandlers } from '../src/react/_internal/api/__mocks__/marketplace.msw';
 import { handlers as metadataHandlers } from '../src/react/_internal/api/__mocks__/metadata.msw';
-import { handlers as marketplaceConfigHandlers } from '../src/react/hooks/options/__mocks__/marketplaceConfig.msw';
 import { TEST_ACCOUNTS, TEST_CHAIN, TEST_PRIVATE_KEYS } from './const';
 
 const tickHandler = mswHttp.post(