From da69d581915a682761faa458ef03c8c85c2b1ac3 Mon Sep 17 00:00:00 2001
From: Arjun Porwal <65214523+ap211unitech@users.noreply.github.com>
Date: Thu, 13 Nov 2025 17:48:02 +0530
Subject: [PATCH] feat: add browser check alert for Firefox 145.0 compatibility
 (#12000)

---
 .../apps/src/Content/BrowserCheckAlert.tsx    | 47 +++++++++++++++++++
 packages/apps/src/Content/index.tsx           |  2 +
 2 files changed, 49 insertions(+)
 create mode 100644 packages/apps/src/Content/BrowserCheckAlert.tsx

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 (
+    <StyledBanner
+      className='warning centered'
+      withIcon={false}
+    >
+
+      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.
+    </StyledBanner>
+  );
+};
+
+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<Props> {
       {!missingApis
         ? (
           <div className='connecting'>
+            <BrowserCheckAlert />
             <Spinner label={t('Initializing connection')} />
           </div>
         )