@0xsequence/marketplace-sdk 0.8.9 → 0.8.11

package/src/react/ui/components/collectible-card/media/Media.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../../../utils';
+import { fetchContentType } from '../../../../../utils/fetchContentType';
+import ChessTileImage from '../../../images/chess-tile.png';
+import ModelViewer from '../../ModelViewer';
+import MediaSkeleton from './MediaSkeleton';
+import type { ContentTypeState, MediaProps } from './types';
+import { getContentType } from './utils';
+
+/**
+ * @description This component is used to display a collectible asset.
+ * It will display the first valid asset from the assets array.
+ * If no valid asset is found, it will display the placeholder image.
+ *
+ * @example
+ * <Media
+ *  name="Collectible"
+ *  assets={[undefined, "some-image-url", undefined]} // undefined assets will be ignored, "some-image-url" will be rendered
+ *  assetSrcPrefixUrl="https://example.com/"
+ *  className="w-full h-full"
+ * />
+ */
+export function Media({
+	name,
+	assets,
+	assetSrcPrefixUrl,
+	className,
+	supply,
+	isLoading,
+}: MediaProps) {
+	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
+	const [assetLoading, setAssetLoading] = useState(true);
+	const [contentType, setContentType] = useState<ContentTypeState>({
+		type: null,
+		loading: true,
+		failed: false,
+	});
+
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+	const placeholderImage = ChessTileImage;
+	const assetUrl = assets.find((asset): asset is string => !!asset);
+	const proxiedAssetUrl = assetUrl
+		? assetSrcPrefixUrl
+			? `${assetSrcPrefixUrl}${assetUrl}`
+			: assetUrl
+		: '';
+
+	const classNames = cn(
+		'relative aspect-square overflow-hidden bg-background-secondary',
+		supply !== undefined && supply === 0 && 'opacity-50',
+		className,
+	);
+
+	useEffect(() => {
+		if (!assetUrl) {
+			setContentType({ type: null, loading: false, failed: true });
+			return;
+		}
+
+		const determineContentType = async () => {
+			try {
+				const type = await getContentType(proxiedAssetUrl);
+				setContentType({ type, loading: false, failed: false });
+			} catch {
+				try {
+					const type = await fetchContentType(proxiedAssetUrl);
+					setContentType({ type, loading: false, failed: false });
+				} catch {
+					setContentType({ type: null, loading: false, failed: true });
+				}
+			}
+		};
+
+		determineContentType();
+	}, [proxiedAssetUrl, assetUrl]);
+
+	const handleAssetError = () => {
+		setAssetLoadFailed(true);
+	};
+
+	const handleAssetLoad = () => {
+		setAssetLoading(false);
+	};
+
+	// Display placeholder if asset fails to load or doesn't exist
+	if ((!isLoading && contentType.failed && !assetLoadFailed) || !assetUrl) {
+		return (
+			<div className={cn('h-full w-full', classNames)}>
+				<img
+					src={placeholderImage}
+					alt={name || 'Collectible'}
+					className="h-full w-full object-cover"
+					onError={(e) => {
+						console.error('Failed to load placeholder image');
+						e.currentTarget.style.display = 'none';
+					}}
+				/>
+			</div>
+		);
+	}
+
+	// Render based on content type
+	if (contentType.type === 'html' && !assetLoadFailed) {
+		return (
+			<div
+				className={cn(
+					'flex w-full items-center justify-center rounded-lg',
+					classNames,
+				)}
+			>
+				{(assetLoading || contentType.loading || isLoading) && (
+					<MediaSkeleton />
+				)}
+
+				<iframe
+					title={name || 'Collectible'}
+					className="aspect-square w-full"
+					src={proxiedAssetUrl}
+					allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+					sandbox="allow-scripts"
+					style={{ border: '0px' }}
+					onError={handleAssetError}
+					onLoad={handleAssetLoad}
+				/>
+			</div>
+		);
+	}
+
+	if (contentType.type === '3d-model' && !assetLoadFailed) {
+		return (
+			<div className={cn('h-full w-full', classNames)}>
+				<ModelViewer
+					src={proxiedAssetUrl}
+					posterSrc={placeholderImage}
+					onLoad={handleAssetLoad}
+					onError={handleAssetError}
+				/>
+			</div>
+		);
+	}
+
+	if (contentType.type === 'video' && !assetLoadFailed) {
+		const videoClassNames = cn(
+			'absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover',
+			assetLoading || isLoading ? 'invisible' : 'visible',
+			// we can't hide the video controls in safari, when user hovers over the video they show up.
+			// `pointer-events-none` is the only way to hide them on hover
+			isSafari && 'pointer-events-none',
+		);
+
+		return (
+			<div className={classNames}>
+				{(assetLoading || contentType.loading || isLoading) && (
+					<MediaSkeleton />
+				)}
+
+				<video
+					ref={videoRef}
+					className={videoClassNames}
+					autoPlay
+					loop
+					controls
+					playsInline
+					muted
+					controlsList="nodownload noremoteplayback nofullscreen"
+					onError={handleAssetError}
+					onLoadedMetadata={handleAssetLoad}
+					data-testid="collectible-asset-video"
+				>
+					<source src={proxiedAssetUrl} />
+				</video>
+			</div>
+		);
+	}
+
+	// Default to image renderer
+	const imgSrc =
+		assetLoadFailed || contentType.failed ? placeholderImage : proxiedAssetUrl;
+
+	const imgClassNames = cn(
+		'absolute inset-0 h-full w-full object-cover transition-transform duration-200 ease-in-out group-hover:scale-hover',
+		assetLoading || contentType.loading || isLoading ? 'invisible' : 'visible',
+	);
+
+	return (
+		<div className={classNames}>
+			{(assetLoading || contentType.loading || isLoading) && <MediaSkeleton />}
+
+			<img
+				src={imgSrc}
+				alt={name || 'Collectible'}
+				className={imgClassNames}
+				onError={(e) => {
+					if (contentType.type === 'image') {
+						setAssetLoadFailed(true);
+					}
+					// If this is the placeholder image that failed
+					if (e.currentTarget.src === placeholderImage) {
+						console.error('Failed to load placeholder image');
+						e.currentTarget.style.display = 'none';
+					}
+				}}
+				onLoad={handleAssetLoad}
+			/>
+		</div>
+	);
+}

package/src/react/ui/components/collectible-card/{collectible-asset/CollectibleAssetSkeleton.tsx → media/MediaSkeleton.tsx}

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

package/src/react/ui/components/collectible-card/media/types.ts

@@ -0,0 +1,18 @@
+type ContentType = 'image' | 'video' | 'html' | '3d-model' | null;
+
+type ContentTypeState = {
+	type: ContentType;
+	loading: boolean;
+	failed: boolean;
+};
+
+type MediaProps = {
+	name?: string;
+	assets: (string | undefined)[];
+	assetSrcPrefixUrl?: string;
+	className?: string;
+	supply?: number;
+	isLoading?: boolean;
+};
+
+export type { ContentType, ContentTypeState, MediaProps };

package/src/react/ui/components/collectible-card/{collectible-asset → media}/utils.ts

@@ -23,9 +23,9 @@ export const is3dModel = (fileName: string | undefined) => {
 };
 
 export const getContentType = (
-	url: string,
+	url: string | undefined,
 ): Promise<'image' | 'video' | 'html' | '3d-model' | null> => {
-	return new Promise((resolve) => {
+	return new Promise((resolve, reject) => {
 		const type = isHtml(url)
 			? 'html'
 			: isVideo(url)
@@ -35,6 +35,11 @@ export const getContentType = (
 					: is3dModel(url)
 						? '3d-model'
 						: null;
-		resolve(type);
+
+		if (type) {
+			resolve(type);
+		} else {
+			reject(new Error('Unsupported file type'));
+		}
 	});
 };

package/src/react/ui/index.ts

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

package/src/react/ui/modals/BuyModal/ERC1155QuantityModal.tsx

@@ -58,7 +58,10 @@ export const ERC1155QuantityModal = ({ order }: { order: Order }) => {
 const TotalPrice = ({
 	order,
 	quantityStr,
-}: { order: Order; quantityStr: string }) => {
+}: {
+	order: Order;
+	quantityStr: string;
+}) => {
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 		chainId: order.chainId,
@@ -71,8 +74,11 @@ const TotalPrice = ({
 	if (currency) {
 		try {
 			const marketplaceFeePercentage =
-				marketplaceConfig?.collections.find((collection) =>
-					compareAddress(collection.address, order.collectionContractAddress),
+				marketplaceConfig?.market.collections.find((collection) =>
+					compareAddress(
+						collection.itemsAddress,
+						order.collectionContractAddress,
+					),
 				)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
 			const quantity = BigInt(quantityStr);
 			const totalPriceRaw = BigInt(order.priceAmount) * quantity;

package/src/react/ui/modals/BuyModal/hooks/__tests__/useFees.test.tsx

@@ -1,6 +1,7 @@
 import { renderHook } from '@test';
 import { avalanche, optimism } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MarketplaceType } from '../../../../../../types/new-marketplace-types';
 import { useMarketplaceConfig } from '../../../../../hooks';
 import { useFees } from '../useFees';
 
@@ -30,13 +31,16 @@ describe('useFees', () => {
 			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
 		).mockReturnValue({
 			data: {
-				collections: [
-					{
-						address: '0x456',
-						chainId: 1,
-						feePercentage: '5.0',
-					},
-				],
+				market: {
+					collections: [
+						{
+							itemsAddress: '0x456',
+							chainId: 1,
+							feePercentage: '5.0',
+							marketplaceType: MarketplaceType.MARKET,
+						},
+					],
+				},
 			},
 		});
 
@@ -59,13 +63,16 @@ describe('useFees', () => {
 			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
 		).mockReturnValue({
 			data: {
-				collections: [
-					{
-						address: collectionAddress,
-						chainId: chainId.toString(),
-						feePercentage: collectionFee,
-					},
-				],
+				market: {
+					collections: [
+						{
+							itemsAddress: collectionAddress,
+							chainId: chainId.toString(),
+							feePercentage: collectionFee,
+							marketplaceType: MarketplaceType.MARKET,
+						},
+					],
+				},
 			},
 		});
 
@@ -110,13 +117,16 @@ describe('useFees', () => {
 			useMarketplaceConfig as unknown as ReturnType<typeof vi.fn>
 		).mockReturnValue({
 			data: {
-				collections: [
-					{
-						address: collectionAddress.toLowerCase(),
-						chainId: chainId.toString(),
-						feePercentage: collectionFee,
-					},
-				],
+				market: {
+					collections: [
+						{
+							itemsAddress: collectionAddress.toLowerCase(),
+							chainId: chainId.toString(),
+							feePercentage: collectionFee,
+							marketplaceType: MarketplaceType.MARKET,
+						},
+					],
+				},
 			},
 		});
 

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

@@ -16,9 +16,10 @@ export const useFees = ({
 		'0x400cdab4676c17aec07e8ec748a5fc3b674bca41';
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 
-	const collection = marketplaceConfig?.collections.find(
+	const collection = marketplaceConfig?.market.collections.find(
 		(collection) =>
-			collection.address.toLowerCase() === collectionAddress.toLowerCase() &&
+			collection.itemsAddress.toLowerCase() ===
+				collectionAddress.toLowerCase() &&
 			chainId === Number(collection.chainId),
 	);
 

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

@@ -12,6 +12,7 @@ import {
 	WalletKind,
 	getMarketplaceClient,
 	getQueryClient,
+	getSequenceApiClient,
 } from '../../../../_internal';
 import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { useConfig } from '../../../../hooks';
@@ -88,6 +89,27 @@ export const getBuyCollectableParams = async ({
 		throw new Error('Buy step not found');
 	}
 
+	const creditCardProviders = customCreditCardProviderCallback
+		? ['custom']
+		: checkoutOptions.nftCheckout || [];
+
+	const isTransakSupported = creditCardProviders.includes('transak');
+
+	let transakContractId: string | undefined;
+
+	if (isTransakSupported) {
+		const sequenceApiClient = getSequenceApiClient(config);
+		const transakContractIdResponse =
+			await sequenceApiClient.checkoutOptionsGetTransakContractID({
+				chainId,
+				contractAddress: buyStep.to,
+			});
+
+		if (transakContractIdResponse.contractId !== '') {
+			transakContractId = transakContractIdResponse.contractId;
+		}
+	}
+
 	return {
 		chain: chainId,
 		collectibles: [
@@ -106,9 +128,7 @@ export const getBuyCollectableParams = async ({
 		recipientAddress: await wallet.address(),
 		enableMainCurrencyPayment: true,
 		enableSwapPayments: !!checkoutOptions.swap,
-		creditCardProviders: customCreditCardProviderCallback
-			? ['custom']
-			: checkoutOptions.nftCheckout || [],
+		creditCardProviders,
 		onSuccess: (hash: string) => {
 			callbacks?.onSuccess?.({ hash: hash as Hash });
 		},
@@ -130,6 +150,11 @@ export const getBuyCollectableParams = async ({
 				buyModalStore.send({ type: 'close' });
 			},
 		}),
+		...(transakContractId && {
+			transakConfig: {
+				contractId: transakContractId,
+			},
+		}),
 	} satisfies SelectPaymentSettings;
 };
 

package/src/react/ui/modals/CreateListingModal/Modal.tsx

@@ -11,7 +11,7 @@ import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
-	useCurrencies,
+	useMarketCurrencies,
 } from '../../../hooks';
 import {
 	ActionModal,
@@ -52,9 +52,7 @@ const Modal = observer(() => {
 		shouldHideActionButton: shouldHideListButton,
 		waasFeeOptionsShown,
 		getActionLabel,
-		isTestnet,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing: listingIsBeingProcessed,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:
@@ -74,7 +72,7 @@ const Modal = observer(() => {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
-	} = useCurrencies({
+	} = useMarketCurrencies({
 		chainId,
 		collectionAddress,
 		includeNativeCurrency: true,
@@ -154,7 +152,7 @@ const Modal = observer(() => {
 			}
 
 			await createListing({
-				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+				isTransactionExecuting: !!wallet?.isWaaS,
 			});
 		} catch (error) {
 			console.error('Create listing failed:', error);

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

@@ -2,6 +2,8 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { MarketCollection } from '../../../../../types/new-marketplace-types';
+import { compareAddress } from '../../../../../utils';
 import {
 	type ContractType,
 	type CreateReq,
@@ -40,9 +42,9 @@ export const useCreateListing = ({
 	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
 		useMarketplaceConfig();
 
-	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.address === collectionAddress,
-	);
+	const collectionConfig = marketplaceConfig?.market.collections.find((c) =>
+		compareAddress(c.itemsAddress, collectionAddress),
+	) as MarketCollection;
 
 	orderbookKind =
 		orderbookKind ??

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

@@ -20,8 +20,8 @@ import type {
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import {
 	useConfig,
-	useCurrencies,
 	useGenerateListingTransaction,
+	useMarketCurrencies,
 } from '../../../../hooks';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
@@ -48,7 +48,7 @@ export const useTransactionSteps = ({
 	const expiry = new Date(Number(listingInput.listing.expiry) * 1000);
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
-	const { data: currencies } = useCurrencies({
+	const { data: currencies } = useMarketCurrencies({
 		chainId,
 	});
 	const currency = currencies?.find(

package/src/react/ui/modals/MakeOfferModal/Modal.tsx

@@ -12,8 +12,8 @@ import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
 	useCollectible,
 	useCollection,
-	useCurrencies,
 	useLowestListing,
+	useMarketCurrencies,
 } from '../../../hooks';
 import { useBuyModal } from '../BuyModal';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
@@ -64,7 +64,6 @@ const Modal = observer(() => {
 		waasFeeOptionsShown,
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:
@@ -83,7 +82,7 @@ const Modal = observer(() => {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
-	} = useCurrencies({
+	} = useMarketCurrencies({
 		chainId,
 		includeNativeCurrency: false,
 	});

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

@@ -3,6 +3,7 @@
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
 import { OrderbookKind } from '../../../../../types';
+import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import type { TransactionSteps } from '../../../../_internal';
 import type { OfferInput } from '../../../../_internal/types';
 import { useMarketplaceConfig } from '../../../../hooks';
@@ -32,9 +33,9 @@ export const useMakeOffer = ({
 	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
 		useMarketplaceConfig();
 
-	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.address === collectionAddress,
-	);
+	const collectionConfig = marketplaceConfig?.market.collections.find(
+		(c) => c.itemsAddress === collectionAddress,
+	) as MarketCollection;
 
 	orderbookKind =
 		orderbookKind ??

package/src/react/ui/modals/SellModal/Modal.tsx

@@ -60,7 +60,6 @@ const Modal = observer(() => {
 	const isWaaS = wallet?.isWaaS;
 	const { shouldHideActionButton: shouldHideSellButton } =
 		useSelectWaasFeeOptions({
-			chainId,
 			isProcessing,
 			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 			selectedFeeOption:

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

@@ -19,8 +19,8 @@ import type {
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import {
 	useConfig,
-	useCurrencies,
 	useGenerateSellTransaction,
+	useMarketCurrencies,
 } from '../../../../hooks';
 import { useFees } from '../../BuyModal/hooks/useFees';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
@@ -60,7 +60,7 @@ export const useTransactionSteps = ({
 		collectionAddress: collectionAddress,
 	});
 
-	const { data: currencies } = useCurrencies({
+	const { data: currencies } = useMarketCurrencies({
 		chainId,
 	});
 	const { generateSellTransactionAsync, isPending: generatingSteps } =

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/TransferModal/_views/enterWalletAddress/index.tsx

@@ -30,7 +30,6 @@ const EnterWalletAddressView = observer(() => {
 		isProcessingWithWaaS,
 		shouldHideActionButton: shouldHideTransferButton,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing: transferModal$.state.transferIsBeingProcessed.get(),
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:

package/src/react/ui/modals/TransferModal/index.tsx

@@ -88,7 +88,6 @@ const TransferModal = observer(() => {
 	const isTransferBeingProcessed =
 		transferModal$.state.transferIsBeingProcessed.get();
 	const { waasFeeOptionsShown } = useSelectWaasFeeOptions({
-		chainId: chainId,
 		isProcessing: isTransferBeingProcessed,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/__tests__/index.test.tsx

@@ -23,7 +23,7 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useCurrencies');
+		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: true,
 			data: undefined,
@@ -38,7 +38,7 @@ describe('CurrencyOptionsSelect', () => {
 	});
 
 	it('should set first currency as default when currencies load', async () => {
-		const useCurrenciesSpy = vi.spyOn(hooks, 'useCurrencies');
+		const useCurrenciesSpy = vi.spyOn(hooks, 'useMarketCurrencies');
 		useCurrenciesSpy.mockReturnValue({
 			isLoading: false,
 			data: TEST_CURRENCIES,