fix: hide internal transaction origins in confirmation views

app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap

@@ -97,6 +97,7 @@ exports[`AccountApproval should render correctly 1`] = `
           "marginTop": 10,
         }
       }
+      testID="transaction-header-origin"
     >
       <Text
         allowFontScaling={false}

app/components/UI/TransactionHeader/__snapshots__/index.test.tsx.snap

@@ -1,39 +1,166 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TransactionHeader should render correctly 1`] = `
-<ContextProvider
-  value={
+exports[`TransactionHeader render correctly 1`] = `
+<View
+  style={
     {
-      "getServerState": undefined,
-      "noopCheck": "once",
-      "stabilityCheck": "once",
-      "store": {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": {
-        "addNestedSub": [Function],
-        "getListeners": [Function],
-        "handleChangeWrapper": [Function],
-        "isSubscribed": [Function],
-        "notifyNestedSubs": [Function],
-        "trySubscribe": [Function],
-        "tryUnsubscribe": [Function],
-      },
+      "alignItems": "center",
+      "justifyContent": "center",
     }
   }
 >
-  <Component
-    currentPageInformation={
+  <View
+    style={
       {
-        "title": "title",
-        "url": "url",
+        "alignItems": "center",
+        "borderRadius": 10,
+        "justifyContent": "center",
       }
     }
-  />
-</ContextProvider>
+  >
+    <View
+      placeholderStyle={
+        {
+          "backgroundColor": "#f2f4f6",
+        }
+      }
+      useNativeDriver={true}
+    >
+      <Image
+        onError={[Function]}
+        onLoadEnd={[Function]}
+        source={
+          {
+            "uri": "http://metamask.github.io/favicon.ico",
+          }
+        }
+        style={
+          {
+            "borderRadius": 32,
+            "height": 56,
+            "width": 56,
+          }
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          {
+            "bottom": 0,
+            "left": 0,
+            "opacity": 1,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "borderRadius": 32,
+                "height": 56,
+                "width": 56,
+              },
+              {
+                "backgroundColor": "#eee",
+              },
+              {
+                "backgroundColor": "#f2f4f6",
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": 10,
+      }
+    }
+    testID="transaction-header-origin"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 15,
+          },
+          {
+            "color": "#141618",
+            "marginRight": 5,
+          },
+          {
+            "fontFamily": "FontAwesome",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+    >
+      
+    </Text>
+    <Text
+      style={
+        {
+          "color": "#141618",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 14,
+          "fontWeight": "600",
+          "textAlign": "center",
+        }
+      }
+    >
+      metamask.github.io
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "borderRadius": 2.5,
+            "height": 5,
+            "width": 5,
+          },
+          {
+            "backgroundColor": "#f2f3f4",
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        {
+          "color": "#141618",
+          "fontFamily": "EuclidCircularB-Regular",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "padding": 5,
+          "textAlign": "center",
+          "textTransform": "capitalize",
+        }
+      }
+    >
+      Sepolia
+    </Text>
+  </View>
+</View>
 `;

app/components/UI/TransactionHeader/index.js

@@ -17,6 +17,8 @@ import {
   selectNickname,
   selectProviderType,
 } from '../../../selectors/networkController';
+import { INTERNAL_ORIGINS } from '../../../constants/transaction';
+import { TransactionReviewSelectorsIDs } from '../../../../e2e/selectors/TransactionReview.selectors';
 
 const { ORIGIN_DEEPLINK, ORIGIN_QR_CODE } = AppConstants.DEEPLINKS;
 
@@ -195,7 +197,7 @@ const TransactionHeader = (props) => {
   };
 
   const renderDomainUrlContainer = () => (
-    <View style={styles.domanUrlContainer}>
+    <View style={styles.domanUrlContainer} testID={TransactionReviewSelectorsIDs.TRANSACTION_HEADER_ORIGIN}>
       {renderSecureIcon()}
       {renderTitle()}
     </View>
@@ -209,11 +211,12 @@ const TransactionHeader = (props) => {
       </Text>
     </View>
   );
+  const showOrigin = !INTERNAL_ORIGINS.includes(props.currentPageInformation.origin);
 
   return (
     <View style={styles.transactionHeader}>
       {renderTopIcon()}
-      {isMultichainVersion1Enabled ? null : renderDomainUrlContainer()}
+      {isMultichainVersion1Enabled || !showOrigin ? null : renderDomainUrlContainer()}
       {isMultichainVersion1Enabled ? null : renderNetworkContainer()}
     </View>
   );

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

@@ -1,27 +1,82 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import renderWithProvider, { DeepPartial } from '../../../util/test/renderWithProvider';
 import TransactionHeader from './';
-import configureMockStore from 'redux-mock-store';
-import { Provider } from 'react-redux';
 import { backgroundState } from '../../../util/test/initial-root-state';
+import { RootState } from '../../../reducers';
+import { mockNetworkState } from '../../../util/test/network';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { ORIGIN_METAMASK } from '@metamask/controller-utils';
+import TransactionTypes from '../../../core/TransactionTypes';
+import { TransactionReviewSelectorsIDs } from '../../../../e2e/selectors/TransactionReview.selectors';
 
-const mockStore = configureMockStore();
-const initialState = {
+const MOCK_ADDRESS_1 = '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272';
+const MOCK_ADDRESS_2 = '0xd018538C87232FF95acbCe4870629b75640a78E7';
+
+const mockInitialState: DeepPartial<RootState> = {
   engine: {
-    backgroundState,
+    backgroundState: {
+      ...backgroundState,
+      AccountTrackerController: {
+        accounts: {
+          [MOCK_ADDRESS_1]: {
+            balance: '200',
+          },
+          [MOCK_ADDRESS_2]: {
+            balance: '200',
+          },
+        },
+      },
+      NetworkController: {
+        ...mockNetworkState({
+          chainId: CHAIN_IDS.SEPOLIA,
+          id: 'sepolia',
+          nickname: 'Sepolia',
+          ticker: 'ETH',
+        }),
+      },
+    },
   },
 };
-const store = mockStore(initialState);
+
+const defaultProps = {
+  currentPageInformation: {
+    origin: 'http://metamask.github.io',
+    url: 'http://metamask.github.io',
+    icon: 'http://metamask.github.io/favicon.ico',
+    currentEnsName: '',
+    spenderAddress: MOCK_ADDRESS_1,
+  },
+  networkType: 'sepolia',
+  nickname: 'Sepolia',
+};
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn().mockImplementation((callback) => callback(mockInitialState)),
+}));
 
 describe('TransactionHeader', () => {
-  it('should render correctly', () => {
-    const wrapper = shallow(
-      <Provider store={store}>
-        <TransactionHeader
-          currentPageInformation={{ title: 'title', url: 'url' }}
-        />
-      </Provider>,
+  it('render correctly', () => {
+    const wrapper = renderWithProvider(
+      <TransactionHeader {...defaultProps} />,
+      { state: mockInitialState },
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it.each([
+    ['ORIGIN_METAMASK', ORIGIN_METAMASK],
+    ['MM_FOX_CODE', process.env.MM_FOX_CODE],
+    ['MMM', TransactionTypes.MMM],
+  ])('does not render origin if %s', (_, origin) => {
+    const { queryByTestId } = renderWithProvider(
+      <TransactionHeader
+        {...defaultProps}
+        currentPageInformation={{ ...defaultProps.currentPageInformation, origin }}
+      />,
+      { state: mockInitialState },
+    );
+
+    expect(queryByTestId(TransactionReviewSelectorsIDs.TRANSACTION_HEADER_ORIGIN)).toBeNull();
+  });
 });

app/components/Views/confirmations/components/ApproveTransactionHeader/ApproveTransactionHeader.test.tsx

@@ -10,6 +10,8 @@ import { createMockAccountsControllerState } from '../../../../../util/test/acco
 import { RootState } from '../../../../../reducers';
 import { mockNetworkState } from '../../../../../util/test/network';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { ORIGIN_METAMASK } from '@metamask/controller-utils';
+import TransactionTypes from '../../../../../core/TransactionTypes';
 
 const MOCK_ADDRESS_1 = '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272';
 const MOCK_ADDRESS_2 = '0xd018538C87232FF95acbCe4870629b75640a78E7';
@@ -60,6 +62,16 @@ const mockInitialState: DeepPartial<RootState> = {
   },
 };
 
+const defaultProps = {
+  from: '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272',
+  url: 'http://metamask.github.io',
+  asset: {
+    address: '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272',
+    symbol: 'RAN',
+    decimals: 18,
+  },
+};
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useSelector: jest
@@ -154,4 +166,20 @@ describe('ApproveTransactionHeader', () => {
     const originPill = queryByTestId(APPROVAL_TAG_URL_ORIGIN_PILL);
     expect(originPill).toBeNull();
   });
+
+  it.each([
+    ['ORIGIN_METAMASK', ORIGIN_METAMASK],
+    ['MM_FOX_CODE', process.env.MM_FOX_CODE],
+    ['MMM', TransactionTypes.MMM],
+  ])('does not render origin if %s', (_, origin) => {
+    const { queryByTestId } = renderWithProvider(
+      <ApproveTransactionHeader
+        {...defaultProps}
+        origin={origin}
+      />,
+      { state: mockInitialState },
+    );
+
+    expect(queryByTestId(APPROVAL_TAG_URL_ORIGIN_PILL)).toBeNull();
+  });
 });