@0xsequence/marketplace-sdk 0.8.12 → 0.9.0

package/src/react/queries/lowestListing.ts

@@ -1,54 +1,69 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { Address } from 'viem';
 import type { SdkConfig } from '../../types';
 import {
+	collectableKeys,
 	type GetCollectibleLowestListingArgs,
 	type GetCollectibleLowestListingReturn,
-	collectableKeys,
 	getMarketplaceClient,
+	type ValuesOptional,
 } from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
 
-export interface UseLowestListingArgs
+export interface FetchLowestListingParams
 	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress' | 'chainId'> {
-	collectionAddress: Address;
+	collectionAddress: string;
 	chainId: number;
-	query?: {
-		enabled?: boolean;
-	};
+	config: SdkConfig;
 }
 
+/**
+ * Fetches the lowest listing for a collectible from the marketplace API
+ */
 export async function fetchLowestListing(
-	args: UseLowestListingArgs,
-	config: SdkConfig,
+	params: FetchLowestListingParams,
 ): Promise<GetCollectibleLowestListingReturn['order'] | null> {
+	const { collectionAddress, chainId, config, ...additionalApiParams } = params;
+
 	const marketplaceClient = getMarketplaceClient(config);
 
-	const { chainId, collectionAddress, tokenId } = args;
-	const data = await marketplaceClient.getCollectibleLowestListing({
-		chainId: String(chainId),
+	const apiArgs: GetCollectibleLowestListingArgs = {
 		contractAddress: collectionAddress,
-		tokenId,
-	});
-
-	// let order: Order | undefined;
-	// if (data.order) {
-	// 	order = {
-	// 		...data.order,
-	// 		priceAmount: BigInt(data.order.priceAmount),
-	// 		priceAmountNet: BigInt(data.order.priceAmountNet),
-	// 	};
-	// }
+		chainId: String(chainId),
+		...additionalApiParams,
+	};
 
-	return data.order || null;
+	const result = await marketplaceClient.getCollectibleLowestListing(apiArgs);
+	return result.order || null;
 }
 
-export function lowestListingOptions(
-	args: UseLowestListingArgs,
-	config: SdkConfig,
-) {
+export type LowestListingQueryOptions =
+	ValuesOptional<FetchLowestListingParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function lowestListingQueryOptions(params: LowestListingQueryOptions) {
+	const enabled = Boolean(
+		params.collectionAddress &&
+			params.chainId &&
+			params.tokenId &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
 	return queryOptions({
-		enabled: args.query?.enabled ?? true,
-		queryKey: [...collectableKeys.lowestListings, args],
-		queryFn: () => fetchLowestListing(args, config),
+		queryKey: [...collectableKeys.lowestListings, params],
+		queryFn: () =>
+			fetchLowestListing({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				collectionAddress: params.collectionAddress!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				tokenId: params.tokenId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+			}),
+		...params.query,
+		enabled,
 	});
 }

package/src/react/queries/marketCurrencies.ts

@@ -6,30 +6,31 @@ import {
 	currencyKeys,
 	getMarketplaceClient,
 	getQueryClient,
+	type ValuesOptional,
 } from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
 import { marketplaceConfigOptions } from './marketplaceConfig';
 
-type QueryArg = {
-	enabled?: boolean;
-};
-
-export interface UseMarketCurrenciesArgs {
+export interface FetchMarketCurrenciesParams {
 	chainId: number;
 	includeNativeCurrency?: boolean;
 	collectionAddress?: Address;
-	query?: QueryArg;
+	config: SdkConfig;
 }
 
-const fetchMarketCurrencies = async (
-	args: UseMarketCurrenciesArgs,
-	config: SdkConfig,
-) => {
-	const includeNativeCurrency = args.includeNativeCurrency ?? true;
+/**
+ * Fetches supported currencies for a marketplace
+ */
+export async function fetchMarketCurrencies(
+	params: FetchMarketCurrenciesParams,
+) {
+	const { chainId, includeNativeCurrency, collectionAddress, config } = params;
+	const includeNativeCurrencyOption = includeNativeCurrency ?? true;
 	const marketplaceClient = getMarketplaceClient(config);
 
 	let currencies = await marketplaceClient
 		.listCurrencies({
-			chainId: String(args.chainId),
+			chainId: String(chainId),
 		})
 		.then((resp) =>
 			resp.currencies.map((currency) => ({
@@ -38,7 +39,7 @@ const fetchMarketCurrencies = async (
 			})),
 		);
 
-	if (args.collectionAddress) {
+	if (collectionAddress) {
 		const queryClient = getQueryClient();
 		const marketplaceConfig = await queryClient.fetchQuery(
 			marketplaceConfigOptions(config),
@@ -46,7 +47,7 @@ const fetchMarketCurrencies = async (
 
 		const currenciesOptions = marketplaceConfig.market.collections.find(
 			(collection) =>
-				compareAddress(collection.itemsAddress, args.collectionAddress),
+				compareAddress(collection.itemsAddress, collectionAddress),
 		)?.currencyOptions;
 
 		// Filter currencies based on collection currency options
@@ -57,25 +58,37 @@ const fetchMarketCurrencies = async (
 		}
 	}
 
-	if (!includeNativeCurrency) {
+	if (!includeNativeCurrencyOption) {
 		currencies = currencies.filter((currency) => !currency.nativeCurrency);
 	}
 
 	return currencies;
-};
+}
+
+export type MarketCurrenciesQueryOptions =
+	ValuesOptional<FetchMarketCurrenciesParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function marketCurrenciesQueryOptions(
+	params: MarketCurrenciesQueryOptions,
+) {
+	const enabled = Boolean(
+		params.chainId && params.config && (params.query?.enabled ?? true),
+	);
 
-export const currenciesOptions = (
-	args: UseMarketCurrenciesArgs,
-	config: SdkConfig,
-) => {
 	return queryOptions({
-		...args.query,
-		queryKey: [
-			...currencyKeys.lists,
-			args.chainId,
-			args.includeNativeCurrency ?? true,
-			args.collectionAddress,
-		],
-		queryFn: () => fetchMarketCurrencies(args, config),
+		queryKey: [...currencyKeys.lists, params],
+		queryFn: () =>
+			fetchMarketCurrencies({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+				includeNativeCurrency: params.includeNativeCurrency,
+				collectionAddress: params.collectionAddress,
+			}),
+		...params.query,
+		enabled,
 	});
-};
+}

package/src/react/queries/marketplaceConfig.ts

@@ -15,7 +15,7 @@ export const fetchMarketplaceConfig = async ({
 	prefetchedMarketplaceSettings,
 }: {
 	config: SdkConfig;
-	prefetchedMarketplaceSettings?: LookupMarketplaceReturn; //TODO: Is this the right approach?
+	prefetchedMarketplaceSettings?: LookupMarketplaceReturn;
 }): Promise<MarketplaceConfig> => {
 	let builderMarketplaceConfig = prefetchedMarketplaceSettings;
 
@@ -72,14 +72,14 @@ export const fetchMarketplaceConfig = async ({
 			market: {
 				...marketplaceConfig.market,
 				...overrides.market,
-				//@ts-expect-error - TODO: Fix this partial type
+				//@ts-expect-error - TODO: Fix this partial type. We need to align new-marketplace-types with builder.gen.ts
 				collections:
 					overrides.market?.collections ?? marketplaceConfig.market.collections,
 			},
 			shop: {
 				...marketplaceConfig.shop,
 				...overrides.shop,
-				//@ts-expect-error - TODO: Fix this partial type
+				//@ts-expect-error - TODO: Fix this partial type. We need to align new-marketplace-types with builder.gen.ts
 				collections:
 					overrides.shop?.collections ?? marketplaceConfig.shop.collections,
 			},

package/src/react/ssr/__tests__/__snapshots__/create-ssr-client.test.ts.snap

@@ -72,7 +72,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     ],
     "enabled": true,
     "ogImage": "https://example.com/og-image.png",
-    "title": "Mock Market Page",
+    "private": false,
   },
   "projectId": NaN,
   "settings": {
@@ -112,6 +112,11 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "projectId": 1,
         "saleAddress": "0x0000000000000000000000000000000000000000",
         "saleBannerUrl": "https://example.com/shop-sale-banner.png",
+        "tokenIds": [
+          "1",
+          "2",
+          "3",
+        ],
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
       {
@@ -125,12 +130,17 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "projectId": 1,
         "saleAddress": "0x1234567890123456789012345678901234567890",
         "saleBannerUrl": "https://example.com/polygon-shop-sale-banner.png",
+        "tokenIds": [
+          "4",
+          "5",
+          "6",
+        ],
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
     ],
     "enabled": true,
     "ogImage": "https://example.com/shop-og-image.png",
-    "title": "Mock Shop Page",
+    "private": false,
   },
 }
 `;

package/src/react/ssr/create-ssr-client.ts

@@ -1,4 +1,4 @@
-import { type State, cookieToInitialState } from 'wagmi';
+import { cookieToInitialState, type State } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';

package/src/react/types/query.ts

@@ -0,0 +1,34 @@
+/**
+ * Standard query options that can be used across all marketplace SDK hooks
+ *
+ * Based on TanStack Query v5 UseQueryOptions, but simplified, the type from TanStack is hard to modify
+ */
+export interface StandardQueryOptions<TError = Error> {
+	/** Whether the query should be enabled/disabled */
+	enabled?: boolean;
+	/** Time in milliseconds that  data is considered fresh */
+	staleTime?: number;
+	gcTime?: number;
+	// biome-ignore lint/suspicious/noExplicitAny: TanStack Query requires any type for query parameter
+	refetchInterval?: number | false | ((query: any) => number | false);
+	refetchOnWindowFocus?: boolean;
+	refetchOnMount?: boolean;
+	refetchOnReconnect?: boolean;
+	retry?: boolean | number | ((failureCount: number, error: TError) => boolean);
+	retryDelay?: number | ((retryAttempt: number, error: TError) => number);
+	// select is not supported for now
+	// select?: <TSelected = TData>(data: TData) => TSelected;
+	suspense?: boolean;
+	/** Placeholder data is not supported for now */
+	// placeholderData?: TData | (() => TData);
+}
+
+/**
+ * Standard infinite query options that can be used across all marketplace SDK hooks
+ * that support infinite pagination
+ */
+export interface StandardInfiniteQueryOptions<TError = Error>
+	extends StandardQueryOptions<TError> {
+	/** Maximum number of pages to fetch */
+	maxPages?: number;
+}

package/src/react/ui/components/ModelViewer.tsx

@@ -1,5 +1,5 @@
 import { Skeleton } from '@0xsequence/design-system';
-import { Suspense, lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 const ModelViewerComponent = lazy(() =>
 	import('@google/model-viewer').then(() => ({

package/src/react/ui/components/_internals/action-button/__tests__/useActionButtonLogic.test.tsx

@@ -6,7 +6,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { useActionButtonLogic } from '../hooks/useActionButtonLogic';
-import { actionButtonStore, setPendingAction } from '../store';
+import { actionButtonStore } from '../store';
 
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();
@@ -23,7 +23,7 @@ describe('useActionButtonLogic', () => {
 		vi.clearAllMocks();
 		vi.clearAllMocks();
 		vi.restoreAllMocks();
-		actionButtonStore.pendingAction.set(null);
+		actionButtonStore.send({ type: 'clearPendingAction' });
 
 		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
 			wallet: createMockWallet(),
@@ -33,7 +33,12 @@ describe('useActionButtonLogic', () => {
 	});
 
 	it('restricts owners from performing buy/offer actions', async () => {
-		setPendingAction(defaultProps.action, vi.fn(), '123');
+		actionButtonStore.send({
+			type: 'setPendingAction',
+			action: defaultProps.action,
+			onPendingActionExecuted: vi.fn(),
+			tokenId: '123',
+		});
 
 		const { result } = renderHook(() =>
 			useActionButtonLogic({
@@ -52,11 +57,12 @@ describe('useActionButtonLogic', () => {
 	it('executes pending action when user becomes connected', async () => {
 		const executePendingActionMock = vi.fn();
 
-		setPendingAction(
-			CollectibleCardAction.BUY,
-			executePendingActionMock,
-			defaultProps.tokenId,
-		);
+		actionButtonStore.send({
+			type: 'setPendingAction',
+			action: CollectibleCardAction.BUY,
+			onPendingActionExecuted: executePendingActionMock,
+			tokenId: defaultProps.tokenId,
+		});
 
 		renderHook(() =>
 			useActionButtonLogic({

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -4,9 +4,9 @@ import { useEffect } from 'react';
 import { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import {
-	actionButtonStore,
 	clearPendingAction,
-	executePendingActionIfExists,
+	executePendingAction,
+	usePendingAction,
 } from '../store';
 
 type UseActionButtonLogicProps = {
@@ -30,17 +30,17 @@ export const useActionButtonLogic = ({
 		CollectibleCardAction.BUY,
 		CollectibleCardAction.OFFER,
 	];
-	const pendingActionType = actionButtonStore.pendingAction.type.get();
+	const pendingAction = usePendingAction();
+	const pendingActionType = pendingAction?.type;
 
 	// Handle owner restrictions
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			owned &&
-			actionButtonStore.pendingAction.get() &&
+			pendingAction &&
 			address &&
 			actionsThatOwnersCannotPerform.includes(action) &&
-			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+			pendingAction?.collectibleId === tokenId
 		) {
 			onCannotPerformAction?.(
 				pendingActionType as
@@ -51,7 +51,7 @@ export const useActionButtonLogic = ({
 		}
 	}, [
 		owned,
-		actionButtonStore.pendingAction.get(),
+		pendingAction,
 		address,
 		action,
 		tokenId,
@@ -64,16 +64,13 @@ export const useActionButtonLogic = ({
 		if (
 			address &&
 			!owned &&
-			actionButtonStore.pendingAction.get() &&
-			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+			pendingAction &&
+			pendingAction?.collectibleId === tokenId
 		) {
-			// TODO: Remove this timeout once pointer-events: none issue is fixed on Radix UI side
-			setTimeout(() => {
-				executePendingActionIfExists();
-				clearPendingAction();
-			}, 1000);
+			executePendingAction(pendingAction);
+			clearPendingAction();
 		}
-	}, [address, owned, tokenId]);
+	}, [address, owned, tokenId, pendingAction]);
 
 	const shouldShowAction = !address
 		? [CollectibleCardAction.BUY, CollectibleCardAction.OFFER].includes(action)

package/src/react/ui/components/_internals/action-button/store.ts

@@ -1,5 +1,6 @@
-import { observable } from '@legendapp/state';
-import type { CollectibleCardAction } from './types';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { CollectibleCardAction } from '../../../../../types';
 
 type PendingAction = {
 	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
@@ -8,32 +9,59 @@ type PendingAction = {
 	timestamp: number;
 };
 
-export const actionButtonStore = observable({
-	pendingAction: null as PendingAction | null,
+export const actionButtonStore = createStore({
+	context: {
+		pendingAction: null as PendingAction | null,
+	},
+	on: {
+		setPendingAction: (
+			context,
+			event: {
+				action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+				onPendingActionExecuted: () => void;
+				tokenId: string;
+			},
+		) => ({
+			...context,
+			pendingAction: {
+				type: event.action,
+				callback: event.onPendingActionExecuted,
+				timestamp: Date.now(),
+				collectibleId: event.tokenId,
+			},
+		}),
+		clearPendingAction: (context) => ({
+			...context,
+			pendingAction: null,
+		}),
+	},
 });
 
 export const setPendingAction = (
-	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
-	callback: () => void,
-	collectibleId: string,
+	action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	onPendingActionExecuted: () => void,
+	tokenId: string,
 ) => {
-	actionButtonStore.pendingAction.set({
-		type,
-		callback,
-		timestamp: Date.now(),
-		collectibleId,
+	actionButtonStore.send({
+		type: 'setPendingAction',
+		action,
+		onPendingActionExecuted,
+		tokenId,
 	});
 };
 
+// Selector hooks
+export const usePendingAction = () =>
+	useSelector(actionButtonStore, (state) => state.context.pendingAction);
+
 export const clearPendingAction = () => {
-	actionButtonStore.pendingAction.set(null);
+	actionButtonStore.send({ type: 'clearPendingAction' });
 };
 
-export const executePendingActionIfExists = () => {
-	const timestamp = actionButtonStore.pendingAction.get()?.timestamp;
-	const callback = actionButtonStore.pendingAction.get()?.callback as
-		| (() => void)
-		| undefined;
+export const executePendingAction = (pendingAction: PendingAction | null) => {
+	if (!pendingAction) return;
+
+	const { timestamp, callback } = pendingAction;
 
 	if (timestamp && callback) {
 		// Only execute if the pending action is less than 5 minutes old

package/src/react/ui/components/marketplace-collectible-card/CollectibleCard.tsx

@@ -9,7 +9,7 @@ export function CollectibleCard(props: CollectibleCardProps) {
 	switch (props.marketplaceType) {
 		case 'shop':
 			return <ShopCard {...props} />;
-		// biome-ignore lint/complexity/noUselessSwitchCase: <explanation>
+		// biome-ignore lint/complexity/noUselessSwitchCase: explicit case makes code clearer and future-proof
 		case 'market':
 		default:
 			return <MarketCard {...props} />;

package/src/react/ui/components/marketplace-collectible-card/Footer.tsx

@@ -3,10 +3,10 @@
 import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
+	cn,
 	IconButton,
 	Image,
 	Text,
-	cn,
 } from '@0xsequence/design-system';
 import { formatUnits } from 'viem';
 import type { MarketplaceType } from '../../../../types';

package/src/react/ui/components/marketplace-collectible-card/components/BaseCard.tsx

@@ -33,11 +33,14 @@ export function BaseCard({
 	}
 
 	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: div used as interactive card with proper role and keyboard support
 		<div
 			data-testid="collectible-card"
 			className="w-card-width min-w-card-min-width overflow-hidden rounded-xl border border-border-base bg-background-primary focus-visible:border-border-focus focus-visible:shadow-focus-ring focus-visible:outline-focus active:border-border-focus active:shadow-active-ring"
 			onClick={onClick}
 			onKeyDown={onKeyDown}
+			role={onClick ? 'button' : undefined}
+			tabIndex={onClick ? 0 : undefined}
 		>
 			<div className="group relative z-10 flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-xl border-none bg-none p-0 focus:outline-none [&:focus]:rounded-[10px] [&:focus]:outline-[3px] [&:focus]:outline-black [&:focus]:outline-offset-[-3px]">
 				<article className="w-full rounded-xl">

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

@@ -1,3 +1,3 @@
+export * from './CollectibleCard';
 export * from './types';
 export * from './utils';
-export * from './CollectibleCard';

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

@@ -1,9 +1,12 @@
 import type { Address, Hex } from 'viem';
 import type { CollectibleCardAction, MarketplaceType } from '../../../../types';
-import type { ContractType, TokenMetadata } from '../../../_internal';
-import type { CollectibleOrder } from '../../../_internal';
-import type { Order } from '../../../_internal';
-import type { OrderbookKind } from '../../../_internal';
+import type {
+	CollectibleOrder,
+	ContractType,
+	Order,
+	OrderbookKind,
+	TokenMetadata,
+} from '../../../_internal';
 
 // Base properties shared by all collectible card types
 type MarketplaceCardBaseProps = {

package/src/react/ui/components/marketplace-collectible-card/variants/MarketCard.tsx

@@ -1,10 +1,11 @@
 'use client';
 
+import type { Address } from 'viem';
 import { CollectibleCardAction } from '../../../../../types';
 import { useCurrency } from '../../../../hooks';
-import { Footer } from '../Footer';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
+import { Footer } from '../Footer';
 import type { MarketCollectibleCardProps } from '../types';
 
 export function MarketCard({
@@ -31,7 +32,7 @@ export function MarketCard({
 		isLoading: lowestListingCurrencyLoading,
 	} = useCurrency({
 		chainId,
-		currencyAddress: collectible?.listing?.priceCurrencyAddress,
+		currencyAddress: collectible?.listing?.priceCurrencyAddress as Address,
 		query: {
 			enabled: !!collectible?.listing?.priceCurrencyAddress,
 		},

package/src/react/ui/components/marketplace-collectible-card/variants/ShopCard.tsx

@@ -3,9 +3,9 @@
 import { CollectibleCardAction } from '../../../../../types';
 import { ContractType } from '../../../../_internal';
 import { useCurrency } from '../../../../hooks';
-import { Footer } from '../Footer';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
+import { Footer } from '../Footer';
 import type { ShopCollectibleCardProps } from '../types';
 
 export function ShopCard({
@@ -51,10 +51,7 @@ export function ShopCard({
 
 	const action = CollectibleCardAction.BUY;
 
-	const mediaClassName =
-		collectionType === ContractType.ERC721 && !quantityRemaining
-			? 'opacity-50'
-			: 'opacity-100';
+	const mediaClassName = !quantityRemaining ? 'opacity-50' : 'opacity-100';
 
 	return (
 		<BaseCard

package/src/react/ui/components/marketplace-logos/marketplace-logos.tsx

@@ -1,5 +1,5 @@
 import { Image } from '@0xsequence/design-system';
-import { type ComponentProps, Suspense, lazy } from 'react';
+import { type ComponentProps, lazy, Suspense } from 'react';
 
 /* @__PURE__ */
 const createMarketplaceLogo = (

package/src/react/ui/components/media/Media.tsx

@@ -34,6 +34,7 @@ export function Media({
 	const [assetLoadFailed, setAssetLoadFailed] = useState(false);
 	const [assetLoading, setAssetLoading] = useState(true);
 	const [currentAssetIndex, setCurrentAssetIndex] = useState(0);
+	const [isSafari, setIsSafari] = useState(false);
 	const [contentType, setContentType] = useState<ContentTypeState>({
 		type: null,
 		loading: true,
@@ -41,7 +42,10 @@ export function Media({
 	});
 
 	const videoRef = useRef<HTMLVideoElement>(null);
-	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+	useEffect(() => {
+		setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+	}, []);
 
 	const validAssets = assets.filter((asset): asset is string => !!asset);
 	const assetUrl = validAssets[currentAssetIndex];