fix: Fix network picker in IAB not reflecting dapp selected network

android/app/build.gradle

@@ -406,6 +406,11 @@ project.afterEvaluate {
 }
 
 dependencies {
+    // Braze: MainApplication registers BrazeActivityLifecycleCallbackListener. The app module must
+    // compile against the SDK directly; autolinking does not put Braze on :app's compile classpath.
+    // Keep in sync with node_modules/@braze/react-native-sdk/android/build.gradle (wrapper_braze_sdk_version).
+    implementation "com.braze:android-sdk-ui:41.1.1"
+
     // The version of react-native is set by the React Native Gradle Plugin
     implementation(files("../libs/ecies.aar"))
     implementation("com.facebook.react:react-android")

app/components/UI/AccountRightButton/AccountRightButton.types.ts

@@ -1,4 +1,5 @@
 export interface AccountRightButtonProps {
   selectedAddress: string;
   onPress: () => void;
+  dappOrigin: string;
 }

app/components/UI/AccountRightButton/index.test.tsx

@@ -22,7 +22,6 @@ const mockCreateEventBuilder = jest.fn(() => ({
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ navigate: mockNavigate }),
-  useRoute: () => ({ params: {} }),
 }));
 
 jest.mock('../../../components/hooks/useAnalytics/useAnalytics', () => ({
@@ -62,6 +61,9 @@ const mockInitialState: DeepPartial<RootState> = {
   },
 };
 
+/** Representative in-app browser origin for tests (non-empty). */
+const MOCK_DAPP_ORIGIN = 'https://metamask.github.io';
+
 describe('AccountRightButton', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -70,7 +72,11 @@ describe('AccountRightButton', () => {
   it('should render correctly', () => {
     const { toJSON } = renderScreen(
       () => (
-        <AccountRightButton selectedAddress="0x123" onPress={() => undefined} />
+        <AccountRightButton
+          selectedAddress="0x123"
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
       ),
       {
         name: 'AccountRightButton',
@@ -83,7 +89,11 @@ describe('AccountRightButton', () => {
   it('should render correctly when a EVM network is selected', () => {
     const { toJSON } = renderScreen(
       () => (
-        <AccountRightButton selectedAddress="0x123" onPress={() => undefined} />
+        <AccountRightButton
+          selectedAddress="0x123"
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
       ),
       {
         name: 'AccountRightButton',
@@ -111,7 +121,11 @@ describe('AccountRightButton', () => {
 
     const { toJSON } = renderScreen(
       () => (
-        <AccountRightButton selectedAddress="0x123" onPress={() => undefined} />
+        <AccountRightButton
+          selectedAddress="0x123"
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
       ),
       {
         name: 'AccountRightButton',
@@ -126,7 +140,11 @@ describe('AccountRightButton', () => {
     const onPressMock = jest.fn();
     const { getByTestId } = renderScreen(
       () => (
-        <AccountRightButton selectedAddress="0x123" onPress={onPressMock} />
+        <AccountRightButton
+          selectedAddress="0x123"
+          onPress={onPressMock}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
       ),
       {
         name: 'AccountRightButton',
@@ -140,7 +158,13 @@ describe('AccountRightButton', () => {
 
   it('should render network avatar when selectedAddress is not provided (EVM)', () => {
     const { toJSON } = renderScreen(
-      () => <AccountRightButton selectedAddress="" onPress={() => undefined} />,
+      () => (
+        <AccountRightButton
+          selectedAddress=""
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
+      ),
       {
         name: 'AccountRightButton',
       },
@@ -166,7 +190,13 @@ describe('AccountRightButton', () => {
     };
 
     const { toJSON } = renderScreen(
-      () => <AccountRightButton selectedAddress="" onPress={() => undefined} />,
+      () => (
+        <AccountRightButton
+          selectedAddress=""
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
+      ),
       {
         name: 'AccountRightButton',
       },
@@ -178,7 +208,11 @@ describe('AccountRightButton', () => {
   it('should render account avatar when selectedAddress is provided', () => {
     const { toJSON } = renderScreen(
       () => (
-        <AccountRightButton selectedAddress="0x123" onPress={() => undefined} />
+        <AccountRightButton
+          selectedAddress="0x123"
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
       ),
       {
         name: 'AccountRightButton',
@@ -190,7 +224,13 @@ describe('AccountRightButton', () => {
 
   it('should navigate with EVM chainId when selectedAddress is empty and EVM is selected', () => {
     const { getByTestId } = renderScreen(
-      () => <AccountRightButton selectedAddress="" onPress={() => undefined} />,
+      () => (
+        <AccountRightButton
+          selectedAddress=""
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
+      ),
       {
         name: 'AccountRightButton',
       },
@@ -228,7 +268,13 @@ describe('AccountRightButton', () => {
     };
 
     const { getByTestId } = renderScreen(
-      () => <AccountRightButton selectedAddress="" onPress={() => undefined} />,
+      () => (
+        <AccountRightButton
+          selectedAddress=""
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
+      ),
       {
         name: 'AccountRightButton',
       },
@@ -272,7 +318,13 @@ describe('AccountRightButton', () => {
     };
 
     const { toJSON } = renderScreen(
-      () => <AccountRightButton selectedAddress="" onPress={() => undefined} />,
+      () => (
+        <AccountRightButton
+          selectedAddress=""
+          onPress={() => undefined}
+          dappOrigin={MOCK_DAPP_ORIGIN}
+        />
+      ),
       {
         name: 'AccountRightButton',
       },

app/components/UI/AccountRightButton/index.tsx

@@ -14,7 +14,7 @@ import {
   Platform,
   EmitterSubscription,
 } from 'react-native';
-import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import Device from '../../../util/device';
 import AvatarAccount from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
 import { AccountRightButtonProps } from './AccountRightButton.types';
@@ -31,7 +31,6 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { AccountOverviewSelectorsIDs } from './AccountOverview.testIds';
 import { useAnalytics } from '../../../components/hooks/useAnalytics/useAnalytics';
 import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
-import UrlParser from 'url-parse';
 import { selectEvmChainId } from '../../../selectors/networkController';
 import {
   selectIsEvmNetworkSelected,
@@ -63,6 +62,7 @@ const styles = StyleSheet.create({
 const AccountRightButton = ({
   selectedAddress,
   onPress,
+  dappOrigin,
 }: AccountRightButtonProps) => {
   // Placeholder ref for dismissing keyboard. Works when the focused input is within a Webview.
   const placeholderInputRef = useRef<TextInput>(null);
@@ -130,6 +130,15 @@ const AccountRightButton = ({
         screen: Routes.SHEET.NETWORK_SELECTOR,
         params: {
           chainId: isEvmSelected ? chainId : selectedNonEvmNetworkChainId,
+          ...(dappOrigin
+            ? {
+                hostInfo: {
+                  metadata: {
+                    origin: dappOrigin,
+                  },
+                },
+              }
+            : {}),
         },
       });
       trackEvent(
@@ -152,17 +161,12 @@ const AccountRightButton = ({
     onPress,
     selectedNonEvmNetworkChainId,
     isEvmSelected,
+    dappOrigin,
   ]);
 
-  const route = useRoute<RouteProp<Record<string, { url: string }>, string>>();
-  // url is defined if opened while in a dapp
-  const currentUrl = route.params?.url;
-  let hostname;
-  if (currentUrl) {
-    hostname = new UrlParser(currentUrl)?.origin;
-  }
-
-  const { networkName, networkImageSource } = useNetworkInfo(hostname);
+  const { networkName, networkImageSource } = useNetworkInfo(
+    dappOrigin || undefined,
+  );
 
   const nonEvmNetworkImageSource = useMemo(() => {
     if (!isEvmSelected && selectedNonEvmNetworkChainId) {

app/components/UI/BrowserUrlBar/BrowserUrlBar.tsx

@@ -69,6 +69,16 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
     const { trackEvent, createEventBuilder } = useAnalytics();
     const navigation = useNavigation();
     const selectedAddress = connectedAccounts?.[0];
+    const dappOrigin = useMemo(() => {
+      if (!activeUrl) {
+        return '';
+      }
+      try {
+        return new URLParse(activeUrl).origin;
+      } catch {
+        return '';
+      }
+    }, [activeUrl]);
     const {
       styles,
       theme: { colors, themeAppearance },
@@ -138,6 +148,7 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
           <AccountRightButton
             selectedAddress={selectedAddress}
             onPress={handleAccountRightButtonPress}
+            dappOrigin={dappOrigin}
           />
         );
       }
@@ -162,6 +173,7 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
       onCancelInput,
       styles.cancelButton,
       styles.cancelButtonText,
+      dappOrigin,
     ]);
 
     useImperativeHandle(ref, () => ({

app/components/UI/Navbar/index.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import NavbarTitle from '../NavbarTitle';
 import ModalNavbarTitle from '../ModalNavbarTitle';
-import AccountRightButton from '../AccountRightButton';
 import {
   Alert,
   Image,
@@ -141,52 +140,6 @@ const styles = StyleSheet.create({
 
 const metamask_name = require('../../../images/branding/metamask-name.png'); // eslint-disable-line
 const metamask_fox = require('../../../images/branding/fox.png'); // eslint-disable-line
-/**
- * Function that returns the navigation options
- * This is used by views that will show our custom navbar
- * which contains accounts icon, Title or MetaMask Logo and current network, and settings icon
- *
- * @param {string} title - Title in string format
- * @param {Object} navigation - Navigation object required to push new views
- * @param {bool} disableNetwork - Boolean that specifies if the network can be changed, defaults to false
- * @returns {Object} - Corresponding navbar options containing headerTitle, headerLeft, headerTruncatedBackTitle and headerRight
- */
-export function getTransactionsNavbarOptions(
-  title,
-  themeColors,
-  _,
-  selectedAddress,
-  handleRightButtonPress,
-) {
-  const innerStyles = StyleSheet.create({
-    headerStyle: {
-      backgroundColor: themeColors.background.default,
-      shadowColor: importedColors.transparent,
-      elevation: 0,
-    },
-    headerIcon: {
-      color: themeColors.primary.default,
-    },
-    headerButtonText: {
-      color: themeColors.primary.default,
-      fontSize: 14,
-      ...fontStyles.normal,
-    },
-  });
-
-  return {
-    headerTitle: () => <NavbarTitle title={title} />,
-    headerLeft: null,
-    headerRight: () => (
-      <AccountRightButton
-        selectedAddress={selectedAddress}
-        onPress={handleRightButtonPress}
-      />
-    ),
-    headerStyle: innerStyles.headerStyle,
-    headerTintColor: themeColors.primary.default,
-  };
-}
 
 /**
  * Function that returns the navigation options

app/components/UI/Navbar/index.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
 import {
-  getTransactionsNavbarOptions,
   getNavigationOptionsTitle,
   getEditableOptions,
   getTransactionOptionsTitle,
@@ -78,50 +77,6 @@ describe('Navbar', () => {
     jest.clearAllMocks();
   });
 
-  describe('getTransactionsNavbarOptions', () => {
-    it('returns correct navbar options with title', () => {
-      const options = getTransactionsNavbarOptions(
-        'Transactions',
-        mockThemeColors,
-        jest.fn(),
-        '0x1234567890abcdef',
-        jest.fn(),
-      );
-
-      expect(options).toHaveProperty('headerTitle');
-      expect(options).toHaveProperty('headerLeft');
-      expect(options).toHaveProperty('headerRight');
-      expect(options).toHaveProperty('headerStyle');
-      expect(options.headerTintColor).toBe(mockThemeColors.primary.default);
-    });
-
-    it('returns headerTitle function', () => {
-      const options = getTransactionsNavbarOptions(
-        'Transactions',
-        mockThemeColors,
-        jest.fn(),
-        '0x1234567890abcdef',
-        jest.fn(),
-      );
-
-      expect(typeof options.headerTitle).toBe('function');
-    });
-
-    it('renders headerRight component', () => {
-      const handleRightPress = jest.fn();
-      const options = getTransactionsNavbarOptions(
-        'Transactions',
-        mockThemeColors,
-        jest.fn(),
-        '0x1234567890abcdef',
-        handleRightPress,
-      );
-
-      const HeaderRight = options.headerRight;
-      expect(HeaderRight).toBeDefined();
-    });
-  });
-
   describe('getNavigationOptionsTitle', () => {
     it('returns correct options with title', () => {
       const options = getNavigationOptionsTitle(