From eb17dbb326d2bba252cb4b9355ddeb873ad137a2 Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Thu, 19 Dec 2024 16:03:45 +0000 Subject: [PATCH] fix: Add origin pill to wallet_addEthereumChain confirmation (#29317) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Adds Origin Pill component and references it on the confirmation template. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29317?quickstart=1) ## **Related issues** Fixes: https://github.com/MetaMask/metamask-extension/issues/26656 ## **Manual testing steps** 1. Go to the test dApp 2. Add a custom chain ## **Screenshots/Recordings** ### **Before** ### **After** Screenshot 2024-12-18 at 12 08 31 Screenshot 2024-12-18 at 11 58 38 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../safe-component-list.js | 130 +++++++++--------- .../ui/origin-pill/origin-pill.test.tsx | 27 ++++ ui/components/ui/origin-pill/origin-pill.tsx | 57 ++++++++ .../add-ethereum-chain.test.js.snap | 20 +++ .../templates/add-ethereum-chain.js | 8 ++ 5 files changed, 178 insertions(+), 64 deletions(-) create mode 100644 ui/components/ui/origin-pill/origin-pill.test.tsx create mode 100644 ui/components/ui/origin-pill/origin-pill.tsx diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js index 03f8625733b9..962b630562d1 100644 --- a/ui/components/app/metamask-template-renderer/safe-component-list.js +++ b/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 }; diff --git a/ui/components/ui/origin-pill/origin-pill.test.tsx b/ui/components/ui/origin-pill/origin-pill.test.tsx new file mode 100644 index 000000000000..13034a6a83e1 --- /dev/null +++ b/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('', () => { + it('renders correct elements', () => { + const defaultProps = { + origin: 'Test Origin', + dataTestId: 'test-data-test-id', + }; + const store = configureMockStore()(mockState); + + renderWithProvider(, 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); + }); +}); diff --git a/ui/components/ui/origin-pill/origin-pill.tsx b/ui/components/ui/origin-pill/origin-pill.tsx new file mode 100644 index 000000000000..6a0863f43a71 --- /dev/null +++ b/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 ( + + + + {origin} + + + ); +} diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap index 27baa7f5cb79..86d284d0b985 100644 --- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap +++ b/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. +
+
+ +
+
+ https://test-dapp.metamask.io +
+
diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js index 1df546b06003..0c375bb1e667 100644 --- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js +++ b/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',