fix: Add origin pill to wallet_addEthereumChain confirmation

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -1,83 +1,111 @@
-import Button from '../../ui/button';
-import Chip from '../../ui/chip';
-import DefinitionList from '../../ui/definition-list';
-import TruncatedDefinitionList from '../../ui/truncated-definition-list';
-import Popover from '../../ui/popover';
-import Typography from '../../ui/typography';
-import Box from '../../ui/box';
-import MetaMaskTranslation from '../metamask-translation';
-import NetworkDisplay from '../network-display';
-import TextArea from '../../ui/textarea/textarea';
-import TextField from '../../ui/text-field';
 import ConfirmationNetworkSwitch from '../../../pages/confirmations/confirmation/components/confirmation-network-switch';
-import UrlIcon from '../../ui/url-icon';
-import Tooltip from '../../ui/tooltip/tooltip';
+import { SmartTransactionStatusPage } from '../../../pages/smart-transactions/smart-transaction-status-page';
 import {
   AvatarIcon,
+  BannerAlert,
   FormTextField,
   Text,
-  BannerAlert,
 } from '../../component-library';
-import ActionableMessage from '../../ui/actionable-message/actionable-message';
 import { AccountListItem } from '../../multichain';
+import ActionableMessage from '../../ui/actionable-message/actionable-message';
+import Box from '../../ui/box';
+import Button from '../../ui/button';
+import Chip from '../../ui/chip';
+import DefinitionList from '../../ui/definition-list';
+import Preloader from '../../ui/icon/preloader';
+import OriginPill from '../../ui/origin-pill/origin-pill';
+import Popover from '../../ui/popover';
+import Spinner from '../../ui/spinner';
+import TextField from '../../ui/text-field';
+import TextArea from '../../ui/textarea/textarea';
+import Tooltip from '../../ui/tooltip/tooltip';
+import TruncatedDefinitionList from '../../ui/truncated-definition-list';
+import Typography from '../../ui/typography';
+import UrlIcon from '../../ui/url-icon';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowAddress,
   ConfirmInfoRowValueDouble,
 } from '../confirm/info/row';
-import { SnapDelineator } from '../snaps/snap-delineator';
+import MetaMaskTranslation from '../metamask-translation';
+import NetworkDisplay from '../network-display';
 import { Copyable } from '../snaps/copyable';
-import Spinner from '../../ui/spinner';
-import Preloader from '../../ui/icon/preloader';
-import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
-import { SnapUILink } from '../snaps/snap-ui-link';
-import { SmartTransactionStatusPage } from '../../../pages/smart-transactions/smart-transaction-status-page';
+import { SnapDelineator } from '../snaps/snap-delineator';
+import { SnapUIAddress } from '../snaps/snap-ui-address';
+import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
+import { SnapUIButton } from '../snaps/snap-ui-button';
+import { SnapUICard } from '../snaps/snap-ui-card';
+import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
+import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
+import { SnapUIFileInput } from '../snaps/snap-ui-file-input';
+import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
+import { SnapUIForm } from '../snaps/snap-ui-form';
 import { SnapUIIcon } from '../snaps/snap-ui-icon';
 import { SnapUIImage } from '../snaps/snap-ui-image';
-import { SnapUIFileInput } from '../snaps/snap-ui-file-input';
 import { SnapUIInput } from '../snaps/snap-ui-input';
-import { SnapUIForm } from '../snaps/snap-ui-form';
-import { SnapUIButton } from '../snaps/snap-ui-button';
-import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
+import { SnapUILink } from '../snaps/snap-ui-link';
+import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
 import { SnapUIRadioGroup } from '../snaps/snap-ui-radio-group';
-import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
-import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
-import { SnapUICard } from '../snaps/snap-ui-card';
-import { SnapUIAddress } from '../snaps/snap-ui-address';
-import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
-import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
+import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
-import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
+import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { CreateSnapAccount } from '../../../pages/create-snap-account';
-import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import {
   RemoveSnapAccount,
   SnapAccountCard,
 } from '../../../pages/remove-snap-account';
 import { SnapAccountRedirect } from '../../../pages/snap-account-redirect';
+import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import SnapAuthorshipHeader from '../snaps/snap-authorship-header';
 ///: END:ONLY_INCLUDE_IF
 
 export const safeComponentList = {
   a: 'a',
-  ActionableMessage,
   AccountListItem,
+  ActionableMessage,
   AvatarIcon,
   b: 'b',
+  BannerAlert,
   Box,
   Button,
   Chip,
   ConfirmationNetworkSwitch,
+  ConfirmInfoRow,
+  ConfirmInfoRowAddress,
+  ConfirmInfoRowValueDouble,
+  Copyable,
   DefinitionList,
   div: 'div',
+  FormTextField,
   i: 'i',
   MetaMaskTranslation,
   NetworkDisplay,
+  OriginPill,
   p: 'p',
   Popover,
+  Preloader,
+  SnapDelineator,
+  SnapUIAddress,
+  SnapUIAvatar,
+  SnapUIButton,
+  SnapUICard,
+  SnapUICheckbox,
+  SnapUIDropdown,
+  SnapUIFileInput,
+  SnapUIForm,
+  SnapUIFooterButton,
+  SnapUIIcon,
+  SnapUIImage,
+  SnapUIInput,
+  SnapUILink,
+  SnapUIMarkdown,
+  SnapUIRadioGroup,
+  SnapUISelector,
+  SnapUITooltip,
   span: 'span',
+  Spinner,
   Text,
   TextArea,
   TextField,
@@ -86,40 +114,14 @@ export const safeComponentList = {
   Typography,
   SmartTransactionStatusPage,
   UrlIcon,
-  Copyable,
-  SnapDelineator,
-  SnapUIMarkdown,
-  SnapUILink,
-  SnapUIIcon,
-  SnapUIImage,
-  BannerAlert,
-  Spinner,
-  Preloader,
-  ConfirmInfoRow,
-  ConfirmInfoRowAddress,
-  ConfirmInfoRowValueDouble,
-  SnapUIFileInput,
-  SnapUIInput,
-  SnapUIButton,
-  SnapUIForm,
-  SnapUIDropdown,
-  SnapUIRadioGroup,
-  SnapUICheckbox,
-  SnapUITooltip,
-  SnapUICard,
-  SnapUISelector,
-  SnapUIAddress,
-  SnapUIAvatar,
-  SnapUIFooterButton,
-  FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  CreateNamedSnapAccount,
   CreateSnapAccount,
   RemoveSnapAccount,
-  CreateNamedSnapAccount,
-  SnapAccountSuccessMessage,
+  SnapAccountCard,
   SnapAccountErrorMessage,
-  SnapAuthorshipHeader,
   SnapAccountRedirect,
-  SnapAccountCard,
+  SnapAccountSuccessMessage,
+  SnapAuthorshipHeader,
   ///: END:ONLY_INCLUDE_IF
 };

ui/components/ui/origin-pill/origin-pill.test.tsx

@@ -0,0 +1,27 @@
+import { screen } from '@testing-library/dom';
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import OriginPill from './origin-pill';
+
+describe('<OriginPill />', () => {
+  it('renders correct elements', () => {
+    const defaultProps = {
+      origin: 'Test Origin',
+      dataTestId: 'test-data-test-id',
+    };
+    const store = configureMockStore()(mockState);
+
+    renderWithProvider(<OriginPill {...defaultProps} />, store);
+
+    expect(screen.getByTestId(defaultProps.dataTestId)).toBeDefined();
+    expect(
+      screen.getByTestId(`${defaultProps.dataTestId}-avatar-favicon`),
+    ).toBeDefined();
+    expect(screen.getByTestId(`${defaultProps.dataTestId}-text`)).toBeDefined();
+    expect(
+      screen.getByTestId(`${defaultProps.dataTestId}-text`),
+    ).toHaveTextContent(defaultProps.origin);
+  });
+});

ui/components/ui/origin-pill/origin-pill.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  AlignItems,
+  BorderColor,
+  BorderRadius,
+  BorderStyle,
+  Display,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import { getSubjectMetadata } from '../../../selectors';
+import { AvatarFavicon, Box, Text } from '../../component-library';
+
+type OriginPillProps = {
+  origin: string;
+  dataTestId: string;
+};
+
+export default function OriginPill({ origin, dataTestId }: OriginPillProps) {
+  const subjectMetadata = useSelector(getSubjectMetadata);
+
+  const { iconUrl: siteImage = '' } = subjectMetadata[origin] || {};
+
+  return (
+    <Box
+      display={Display.Flex}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      marginTop={6}
+      marginRight={4}
+      marginLeft={4}
+      padding={2}
+      borderColor={BorderColor.borderMuted}
+      borderStyle={BorderStyle.solid}
+      borderRadius={BorderRadius.pill}
+      borderWidth={1}
+      data-testid={dataTestId}
+    >
+      <AvatarFavicon
+        src={siteImage}
+        name={origin}
+        data-testid={`${dataTestId}-avatar-favicon`}
+      />
+      <Text
+        variant={TextVariant.bodySm}
+        as="h6"
+        color={TextColor.textAlternative}
+        marginLeft={1}
+        data-testid={`${dataTestId}-text`}
+      >
+        {origin}
+      </Text>
+    </Box>
+  );
+}

ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap

@@ -19,6 +19,26 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
       >
         This site is requesting to update your default network URL. You can edit defaults and network information any time.
       </h6>
+      <div
+        class="mm-box mm-box--margin-top-6 mm-box--margin-right-4 mm-box--margin-left-4 mm-box--padding-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--rounded-pill mm-box--border-style-solid mm-box--border-color-border-muted mm-box--border-width-1"
+        data-testid="signature-origin-pill"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          data-testid="signature-origin-pill-avatar-favicon"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
+            style="mask-image: url('./images/icons/global.svg');"
+          />
+        </div>
+        <h6
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
+          data-testid="signature-origin-pill-text"
+        >
+          https://test-dapp.metamask.io
+        </h6>
+      </div>
       <div
         class="box box--margin-top-6 box--margin-bottom-6 box--padding-4 box--padding-bottom-3 box--flex-direction-row box--rounded-lg box--border-color-border-muted box--border-style-solid box--border-width-1"
       >

ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js

@@ -268,6 +268,14 @@ function getValues(pendingApproval, t, actions, history, data) {
           },
         },
       },
+      {
+        element: 'OriginPill',
+        key: 'origin-pill',
+        props: {
+          origin: pendingApproval.origin,
+          dataTestId: 'signature-origin-pill',
+        },
+      },
       {
         element: 'TruncatedDefinitionList',
         key: 'network-details',