diff --git a/packages/apps/src/Content/BrowserCheckAlert.tsx b/packages/apps/src/Content/BrowserCheckAlert.tsx new file mode 100644 index 0000000000..f9c36c907e --- /dev/null +++ b/packages/apps/src/Content/BrowserCheckAlert.tsx @@ -0,0 +1,47 @@ +// Copyright 2017-2025 @polkadot/apps authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React, { useEffect, useState } from 'react'; + +import { MarkWarning, styled } from '@polkadot/react-components'; + +const BrowserCheckAlert: React.FC = () => { + const [isTargetBrowser, setIsTargetBrowser] = useState(false); + + useEffect(() => { + const ua = navigator.userAgent; + + // Detect Firefox + const firefoxMatch = ua.match(/Firefox\/(\d+\.\d+)/); + + if (firefoxMatch) { + // Check for Firefox 145.0 specifically + if (ua.includes('145.0')) { + setIsTargetBrowser(true); + } + } + }, []); + + if (!isTargetBrowser) { + return null; + } + + return ( + + + The app is having some trouble running on Firefox v145.0. To keep everything running smoothly, please try using a different browser or switch to Firefox v144.0 for the moment. + + ); +}; + +const StyledBanner = styled(MarkWarning)` + border: 1px solid #ffc107; + background: #ffc10720; + font-size: 1rem !important; + margin-bottom: 5rem !important; +`; + +export default BrowserCheckAlert; diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index e3396d9065..799a792764 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -13,6 +13,7 @@ import { TabsCtx } from '@polkadot/react-hooks/ctx/Tabs'; import { findMissingApis } from '../endpoint.js'; import { useTranslation } from '../translate.js'; +import BrowserCheckAlert from './BrowserCheckAlert.js'; import NotFound from './NotFound.js'; import Status from './Status.js'; @@ -63,6 +64,7 @@ function Content ({ className }: Props): React.ReactElement { {!missingApis ? (
+
)