@0xsequence/marketplace-sdk 0.8.8 → 0.8.10

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

@@ -0,0 +1,206 @@
+'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,
+}: 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 ((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) && <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 ? '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) && <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 ? 'invisible' : 'visible',
+	);
+
+	return (
+		<div className={classNames}>
+			{(assetLoading || contentType.loading) && <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,6 +1,6 @@
 import { Skeleton } from '@0xsequence/design-system';
 
-export default function CollectibleAssetSkeleton() {
+export default function MediaSkeleton() {
 	return (
 		<Skeleton
 			data-testid="collectible-asset-skeleton"

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

@@ -0,0 +1,17 @@
+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;
+};
+
+export type { ContentType, ContentTypeState, MediaProps };

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

@@ -16,21 +16,30 @@ export const isVideo = (fileName: string | undefined) => {
 };
 
 export const is3dModel = (fileName: string | undefined) => {
-	const isGltf = /.*\.gltf$/.test(fileName?.toLowerCase() || '');
-	return isGltf;
+	const is3dFile = /.*\.(gltf|glb|obj|fbx|stl|usdz)$/.test(
+		fileName?.toLowerCase() || '',
+	);
+	return is3dFile;
 };
 
 export const getContentType = (
-	url: string,
-): Promise<'image' | 'video' | 'html' | null> => {
-	return new Promise((resolve) => {
+	url: string | undefined,
+): Promise<'image' | 'video' | 'html' | '3d-model' | null> => {
+	return new Promise((resolve, reject) => {
 		const type = isHtml(url)
 			? 'html'
 			: isVideo(url)
 				? 'video'
 				: isImage(url)
 					? 'image'
-					: null;
-		resolve(type);
+					: is3dModel(url)
+						? '3d-model'
+						: null;
+
+		if (type) {
+			resolve(type);
+		} else {
+			reject(new Error('Unsupported file type'));
+		}
 	});
 };

package/src/react/ui/index.ts

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

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/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/_internal/components/actionModal/ActionModal.test.tsx

@@ -278,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/sdk-config.ts

@@ -15,6 +15,7 @@ export type SdkConfig = {
 		nodeGatewayEnv?: Env;
 		metadataEnv?: Env;
 		indexerEnv?: Env;
+		sequenceApiEnv?: Env;
 		sequenceWalletEnv?: Env;
 	};
 };

package/src/utils/abi/index.ts

@@ -1,2 +1,3 @@
 export * from './marketplace';
 export * from './token';
+export * from './primary-sale';

package/src/utils/abi/primary-sale/index.ts

@@ -0,0 +1,2 @@
+export * from './sequence-1155-sales-contract';
+export * from './sequence-721-sales-contract';