@0xsequence/marketplace-sdk 0.8.7 → 0.8.9

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/ModelViewer.tsx

@@ -0,0 +1,54 @@
+import { Skeleton } from '@0xsequence/design-system';
+import { Suspense, lazy } from 'react';
+
+const ModelViewerComponent = lazy(() =>
+	import('@google/model-viewer').then(() => ({
+		default: ({
+			posterSrc,
+			src,
+			onLoad,
+			onError,
+		}: {
+			posterSrc: string;
+			src?: string;
+			onLoad?: () => void;
+			onError?: () => void;
+		}) => (
+			<div className="h-full w-full bg-background-raised">
+				{/* @ts-expect-error - This is a web component */}
+				<model-viewer
+					alt="3d model"
+					auto-rotate
+					autoplay
+					camera-controls
+					class="h-full w-full"
+					error={onError}
+					load={onLoad}
+					loading="eager"
+					poster={posterSrc}
+					reveal="auto"
+					shadow-intensity="1"
+					src={src}
+					touch-action="pan-y"
+				/>
+			</div>
+		),
+	})),
+);
+
+const ModelViewerLoading = () => <Skeleton className="h-full w-full" />;
+
+const ModelViewer = (props: {
+	posterSrc: string;
+	src?: string;
+	onLoad?: () => void;
+	onError?: () => void;
+}) => {
+	return (
+		<Suspense fallback={<ModelViewerLoading />}>
+			<ModelViewerComponent {...props} />
+		</Suspense>
+	);
+};
+
+export default ModelViewer;

package/src/react/ui/components/_internals/custom-select/CustomSelect.tsx

@@ -62,7 +62,6 @@ export const CustomSelect = ({
 						</div>
 					}
 					shape="circle"
-					opacity="100"
 					className={`bg-overlay-light py-1.5 pl-3 ${className || ''}`}
 					data-testid={`${testId}-trigger`}
 				/>

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 (
@@ -129,7 +129,11 @@ export function CollectibleCard({
 				<article className="w-full rounded-xl">
 					<CollectibleAsset
 						name={collectibleMetadata?.name || ''}
-						collectibleMetadata={collectibleMetadata}
+						assets={[
+							collectibleMetadata?.image,
+							collectibleMetadata?.video,
+							collectibleMetadata?.animation_url,
+						]}
 						assetSrcPrefixUrl={assetSrcPrefixUrl}
 					/>
 
@@ -145,7 +149,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 () => {
@@ -30,7 +32,7 @@ describe('CollectibleAsset', () => {
 		const { rerender } = render(
 			<CollectibleAsset
 				name="Test Collectible"
-				collectibleMetadata={mockMetadata as TokenMetadata}
+				assets={[mockMetadata.image]}
 			/>,
 		);
 
@@ -69,7 +71,7 @@ describe('CollectibleAsset', () => {
 		rerender(
 			<CollectibleAsset
 				name="Test Collectible"
-				collectibleMetadata={mockMetadataWithBadImage as TokenMetadata}
+				assets={[mockMetadataWithBadImage.image]}
 			/>,
 		);
 
@@ -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;
@@ -118,38 +129,43 @@ describe('CollectibleAsset', () => {
 		render(
 			<CollectibleAsset
 				name="Video Collectible"
-				collectibleMetadata={mockVideoMetadata as TokenMetadata}
+				assets={[mockVideoMetadata.video]}
 			/>,
 		);
 
-		// 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',
@@ -169,32 +194,37 @@ describe('CollectibleAsset', () => {
 		render(
 			<CollectibleAsset
 				name="HTML Collectible"
-				collectibleMetadata={mockHtmlMetadata as TokenMetadata}
+				assets={[mockHtmlMetadata.animation_url]}
 			/>,
 		);
 
+		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/collectible-asset/CollectibleAsset.tsx

@@ -0,0 +1,174 @@
+'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 CollectibleAssetSkeleton from './CollectibleAssetSkeleton';
+import { getContentType } from './utils';
+
+type CollectibleImageProps = {
+	name?: string;
+	assets?: (string | undefined)[];
+	assetSrcPrefixUrl?: string;
+	className?: string;
+};
+
+/**
+ * @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
+ * <CollectibleAsset
+ *  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 CollectibleAsset({
+	name,
+	assets,
+	assetSrcPrefixUrl,
+	className,
+}: CollectibleImageProps) {
+	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
+	const [assetLoading, setAssetLoading] = useState(true);
+	const [contentType, setContentType] = useState<{
+		type: 'image' | 'video' | 'html' | '3d-model' | 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);
+
+	const placeholderImage = ChessTileImage;
+	const assetUrl = assets?.find((asset) => asset) || placeholderImage;
+	const proxiedAssetUrl = assetSrcPrefixUrl
+		? `${assetSrcPrefixUrl}${assetUrl}` // assetSrcPrefixUrl must have a trailing slash at the end
+		: assetUrl;
+
+	useEffect(() => {
+		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 (contentType.type === 'html' && !assetLoadFailed) {
+		return (
+			<div
+				className={cn(
+					'flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary',
+					className,
+				)}
+			>
+				{(assetLoading || contentType.loading) && <CollectibleAssetSkeleton />}
+
+				<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={() => setAssetLoadFailed(true)}
+					onLoad={() => setAssetLoading(false)}
+				/>
+			</div>
+		);
+	}
+
+	if (contentType.type === '3d-model' && !assetLoadFailed) {
+		return (
+			<div className="h-full w-full">
+				<ModelViewer
+					src={proxiedAssetUrl}
+					posterSrc={placeholderImage}
+					onLoad={() => setAssetLoading(false)}
+					onError={() => setAssetLoadFailed(true)}
+				/>
+			</div>
+		);
+	}
+	if (contentType.type === 'video' && !assetLoadFailed) {
+		return (
+			<div
+				className={cn(
+					'relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-background-secondary',
+					className,
+				)}
+			>
+				{(assetLoading || contentType.loading) && <CollectibleAssetSkeleton />}
+
+				<video
+					ref={videoRef}
+					className={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',
+					)}
+					autoPlay
+					loop
+					controls
+					playsInline
+					muted
+					controlsList="nodownload noremoteplayback nofullscreen "
+					onError={() => {
+						setAssetLoadFailed(true);
+					}}
+					onLoadedMetadata={() => {
+						setAssetLoading(false);
+					}}
+					data-testid="collectible-asset-video"
+				>
+					<source src={proxiedAssetUrl} />
+				</video>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={cn(
+				'relative aspect-square overflow-hidden bg-background-secondary',
+				className,
+			)}
+		>
+			{(assetLoading || contentType.loading) && <CollectibleAssetSkeleton />}
+
+			<img
+				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 || contentType.loading ? 'invisible' : 'visible'
+				}`}
+				onError={() => setAssetLoadFailed(true)}
+				onLoad={() => setAssetLoading(false)}
+			/>
+		</div>
+	);
+}

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,
+			}}
+		/>
+	);
+}