@0xsequence/marketplace-sdk 0.8.7 → 0.8.9

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

@@ -0,0 +1,40 @@
+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 is3dFile = /.*\.(gltf|glb|obj|fbx|stl|usdz)$/.test(
+		fileName?.toLowerCase() || '',
+	);
+	return is3dFile;
+};
+
+export const getContentType = (
+	url: string,
+): Promise<'image' | 'video' | 'html' | '3d-model' | null> => {
+	return new Promise((resolve) => {
+		const type = isHtml(url)
+			? 'html'
+			: isVideo(url)
+				? 'video'
+				: isImage(url)
+					? 'image'
+					: is3dModel(url)
+						? '3d-model'
+						: null;
+		resolve(type);
+	});
+};

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

@@ -1 +1,2 @@
 export * from './CollectibleCard';
+export * from './collectible-asset/CollectibleAsset';

package/src/react/ui/index.ts

@@ -8,3 +8,4 @@ export { useBuyModal } from './modals/BuyModal';
 
 // components
 export { CollectibleCard } from './components/collectible-card/CollectibleCard';
+export { CollectibleAsset } from './components/collectible-card/collectible-asset/CollectibleAsset';

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/SuccessfulPurchaseModal/index.tsx

@@ -92,16 +92,18 @@ function SuccessfulPurchaseActions() {
 					}
 				/>
 			)}
-			<Button
-				className="w-full"
-				as={'a'}
+			<a
 				href={successfulPurchaseModal$.state.explorerUrl.get()}
 				target="_blank"
 				rel="noopener noreferrer"
-				shape="square"
-				leftIcon={ExternalLinkIcon}
-				label={`View on ${successfulPurchaseModal$.state.explorerName.get()}`}
-			/>
+				className="w-full"
+			>
+				<Button
+					shape="square"
+					leftIcon={ExternalLinkIcon}
+					label={`View on ${successfulPurchaseModal$.state.explorerName.get()}`}
+				/>
+			</a>
 		</div>
 	);
 }

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TokenQuantityInput.tsx

@@ -40,7 +40,7 @@ const TokenQuantityInput = observer(
 					$invalidQuantity={$invalidQuantity}
 					decimals={collection?.decimals || 0}
 					maxQuantity={balanceAmount ? String(balanceAmount) : '0'}
-					className="[&>label>div>div]:h-13 [&>label>div>div]:rounded-xl [&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1"
+					className="[&>label>div>div>div>input]:text-sm [&>label>div>div>div]:h-13 [&>label>div>div>div]:rounded-xl [&>label>div>div>span]:text-sm [&>label>div>div>span]:text-text-80 [&>label]:gap-1"
 				/>
 
 				<Text

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/WalletAddressInput.tsx

@@ -26,7 +26,7 @@ const WalletAddressInput = observer(() => {
 	};
 
 	return (
-		<div className="[&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1">
+		<div className="[&>label>div>>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1">
 			<TextInput
 				label="Wallet address"
 				labelLocation="top"

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,
@@ -272,7 +278,6 @@ describe('ActionModal', () => {
 						{
 							label: 'Secondary CTA',
 							onClick: vi.fn(),
-							variant: 'secondary',
 							testid: 'secondary-cta',
 						},
 					]}

package/src/react/ui/modals/_internal/components/priceInput/index.tsx

@@ -113,7 +113,7 @@ export default function PriceInput({
 				<CurrencyImage price$={$price} />
 			</div>
 
-			<div className="[&>label>div>.rounded-xl]:h-9 [&>label>div>.rounded-xl]:rounded-sm [&>label>div>.rounded-xl]:px-2 [&>label]:gap-1">
+			<div className="[&>label>div>div>.rounded-xl]:h-9 [&>label>div>div>.rounded-xl]:rounded-sm [&>label>div>div>.rounded-xl]:px-2 [&>label]:gap-1">
 				<NumericInput
 					ref={inputRef}
 					className="ml-5 w-full text-xs"

package/src/react/ui/modals/_internal/components/quantityInput/index.tsx

@@ -124,7 +124,7 @@ export default observer(function QuantityInput({
 	return (
 		<div
 			className={cn(
-				'flex w-full flex-col [&>label>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div:has(:disabled)]:opacity-100 [&>label>div>div>input]:text-xs [&>label>div>div]:h-9 [&>label>div>div]:rounded [&>label>div>div]:pr-0 [&>label>div>div]:pl-3 [&>label>div>div]:text-xs [&>label]:gap-[2px]',
+				'flex w-full flex-col [&>label>div>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div>div:has(:disabled)]:opacity-100 [&>label>div>div>div>input]:text-xs [&>label>div>div>div]:h-9 [&>label>div>div>div]:rounded [&>label>div>div>div]:pr-0 [&>label>div>div>div]:pl-3 [&>label>div>div>div]:text-xs [&>label]:gap-[2px]',
 				className,
 				disabled && 'pointer-events-none opacity-50',
 			)}
@@ -152,7 +152,6 @@ export default observer(function QuantityInput({
 						/>
 					</div>
 				}
-				numeric={true}
 				value={localQuantity}
 				onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
 					handleChangeQuantity(e.target.value)

package/src/react/ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect.tsx

@@ -39,7 +39,6 @@ const WaasFeeOptionsSelect = observer(
 
 		return (
 			<Select
-				items={feeOptions}
 				name="fee-option"
 				options={feeOptions.map((option) => ({
 					label: option.content,

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,104 @@
+/**
+ * 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' | '3d-model' | 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' | '3d-model' | 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' | '3d-model' | null = null;
+
+				switch (primaryType) {
+					case 'image':
+						result = 'image';
+						break;
+					case 'video':
+						result = 'video';
+						break;
+					case 'text':
+						if (contentType.toLowerCase().includes('html')) {
+							result = 'html';
+						}
+						break;
+					case 'model':
+						result = '3d-model';
+						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/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(