fix: Browser dialog prompts in app

app/components/Views/BrowserTab/index.js

@@ -102,6 +102,8 @@ import { useMetrics } from '../../../components/hooks/useMetrics';
 import { trackDappViewedEvent } from '../../../util/metrics';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
+import { useIsFocused } from '@react-navigation/native';
+import handleWebViewFocus from '../../../util/browser/webViewFocus';
 import { isTest } from '../../../util/test/utils.js';
 
 const { HOMEPAGE_URL, NOTIFICATION_NAMES } = AppConstants;
@@ -267,9 +269,11 @@ export const BrowserTab = (props) => {
   const [blockedUrl, setBlockedUrl] = useState(undefined);
   const [ipfsBannerVisible, setIpfsBannerVisible] = useState(false);
   const [isResolvedIpfsUrl, setIsResolvedIpfsUrl] = useState(false);
+  const previousChainIdRef = useRef('0x1');
   const webviewRef = useRef(null);
   const blockListType = useRef('');
   const allowList = useRef([]);
+  const isFocused = useIsFocused();
 
   const url = useRef('');
   const title = useRef('');
@@ -706,6 +710,16 @@ export const BrowserTab = (props) => {
     };
   }, [goBack, isTabActive, props.navigation]);
 
+  useEffect(() => {
+    handleWebViewFocus({
+      webviewRef,
+      isFocused,
+      chainId: props.chainId,
+      previousChainId: previousChainIdRef.current,
+    });
+    previousChainIdRef.current = props.chainId;
+  }, [webviewRef, isFocused, props.chainId]);
+
   /**
    * Inject home page scripts to get the favourites and set analytics key
    */

app/util/browser/webViewFocus.test.ts

@@ -0,0 +1,74 @@
+import { Hex } from '@metamask/utils';
+import handleWebViewFocus from './webViewFocus';
+
+interface WebViewRef {
+  injectJavaScript: (script: string) => void;
+  stopLoading: () => void;
+  reload: () => void;
+}
+
+describe('handleWebViewFocus', () => {
+  let webviewRef: React.RefObject<WebViewRef>;
+  let stopLoading: jest.Mock;
+  let reload: jest.Mock;
+
+  beforeEach(() => {
+    stopLoading = jest.fn();
+    reload = jest.fn();
+    webviewRef = {
+      current: {
+        injectJavaScript: jest.fn(),
+        stopLoading,
+        reload,
+      },
+    };
+  });
+
+  it('should reload the webview if chainId has changed', () => {
+    handleWebViewFocus({
+      webviewRef,
+      isFocused: true,
+      chainId: '0x1' as Hex,
+      previousChainId: '0x2' as Hex,
+    });
+
+    expect(reload).toHaveBeenCalled();
+    expect(stopLoading).not.toHaveBeenCalled();
+  });
+
+  it('should not reload the webview if chainId has not changed', () => {
+    handleWebViewFocus({
+      webviewRef,
+      isFocused: true,
+      chainId: '0x1' as Hex,
+      previousChainId: '0x1' as Hex,
+    });
+
+    expect(reload).not.toHaveBeenCalled();
+    expect(stopLoading).not.toHaveBeenCalled();
+  });
+
+  it('should do nothing if webviewRef.current is null', () => {
+    handleWebViewFocus({
+      webviewRef: { current: null },
+      isFocused: true,
+      chainId: '0x1' as Hex,
+      previousChainId: '0x2' as Hex,
+    });
+
+    expect(stopLoading).not.toHaveBeenCalled();
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it('should stop loading if webview is not focused', () => {
+    handleWebViewFocus({
+      webviewRef,
+      isFocused: false,
+      chainId: '0x1' as Hex,
+      previousChainId: '0x1' as Hex,
+    });
+
+    expect(stopLoading).toHaveBeenCalled();
+    expect(reload).not.toHaveBeenCalled();
+  });
+});

app/util/browser/webViewFocus.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Hex } from '@metamask/utils';
+
+interface WebViewFocus {
+  webviewRef: React.RefObject<{
+    injectJavaScript: (script: string) => void;
+    stopLoading: () => void;
+    reload: () => void;
+  }>;
+  isFocused: boolean;
+  chainId: Hex;
+  previousChainId?: Hex;
+}
+
+const handleWebViewFocus = ({
+  webviewRef,
+  isFocused,
+  chainId,
+  previousChainId,
+}: WebViewFocus) => {
+  if (webviewRef.current) {
+    if (!isFocused) {
+      webviewRef.current.stopLoading();
+    }
+
+    if (previousChainId && previousChainId !== chainId) {
+      webviewRef.current.reload();
+    }
+  }
+};
+
+export default handleWebViewFocus;