From d8608d13d955df6ee401cfe68bc71639b8b402cd Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Wed, 18 Dec 2024 12:05:54 +0000 Subject: [PATCH 1/4] Add origin pill to wallet_addEthereumChain confirmation --- .../safe-component-list.js | 2 + .../__snapshots__/origin-pill.test.js.snap | 26 +++++++++ ui/components/ui/origin-pill/origin-pill.js | 58 +++++++++++++++++++ .../ui/origin-pill/origin-pill.test.js | 22 +++++++ .../add-ethereum-chain.test.js.snap | 20 +++++++ .../templates/add-ethereum-chain.js | 8 +++ 6 files changed, 136 insertions(+) create mode 100644 ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap create mode 100644 ui/components/ui/origin-pill/origin-pill.js create mode 100644 ui/components/ui/origin-pill/origin-pill.test.js 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..00e2ef8a5c6a 100644 --- a/ui/components/app/metamask-template-renderer/safe-component-list.js +++ b/ui/components/app/metamask-template-renderer/safe-component-list.js @@ -19,6 +19,7 @@ import { BannerAlert, } from '../../component-library'; import ActionableMessage from '../../ui/actionable-message/actionable-message'; +import OriginPill from '../../ui/origin-pill/origin-pill'; import { AccountListItem } from '../../multichain'; import { ConfirmInfoRow, @@ -86,6 +87,7 @@ export const safeComponentList = { Typography, SmartTransactionStatusPage, UrlIcon, + OriginPill, Copyable, SnapDelineator, SnapUIMarkdown, diff --git a/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap b/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap new file mode 100644 index 000000000000..c25eda6c3b4c --- /dev/null +++ b/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders 1`] = ` +
+
+
+ +
+
+ Test Origin +
+
+
+`; diff --git a/ui/components/ui/origin-pill/origin-pill.js b/ui/components/ui/origin-pill/origin-pill.js new file mode 100644 index 000000000000..ec84f9330e1a --- /dev/null +++ b/ui/components/ui/origin-pill/origin-pill.js @@ -0,0 +1,58 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { useSelector } from 'react-redux'; +import { + AlignItems, + BorderRadius, + BorderStyle, + Color, + Display, + JustifyContent, + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system'; +import { getSubjectMetadata } from '../../../selectors'; +import { AvatarFavicon, Box, Text } from '../../component-library'; + +export default function OriginPill({ origin, dataTestId }) { + const subjectMetadata = useSelector(getSubjectMetadata); + + const { iconUrl: siteImage = '' } = subjectMetadata[origin] || {}; + + return ( + + + + {origin} + + + ); +} + +OriginPill.propTypes = { + origin: PropTypes.string, + dataTestId: PropTypes.string, +}; diff --git a/ui/components/ui/origin-pill/origin-pill.test.js b/ui/components/ui/origin-pill/origin-pill.test.js new file mode 100644 index 000000000000..44a1ae60ec0a --- /dev/null +++ b/ui/components/ui/origin-pill/origin-pill.test.js @@ -0,0 +1,22 @@ +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', () => { + const defaultProps = { + origin: 'Test Origin', + dataTestId: 'test-data-test-id', + }; + + const store = configureMockStore()(mockState); + const { container } = renderWithProvider( + , + store, + ); + + expect(container).toMatchSnapshot(); + }); +}); 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', From db22caa0135f63926fb09e14d5555a118e3ebd3e Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Thu, 19 Dec 2024 11:16:09 +0000 Subject: [PATCH 2/4] Address PR review --- .../safe-component-list.js | 130 +++++++++--------- .../__snapshots__/origin-pill.test.js.snap | 26 ---- .../ui/origin-pill/origin-pill.test.js | 22 --- .../ui/origin-pill/origin-pill.test.tsx | 27 ++++ .../{origin-pill.js => origin-pill.tsx} | 11 +- 5 files changed, 100 insertions(+), 116 deletions(-) delete mode 100644 ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap delete mode 100644 ui/components/ui/origin-pill/origin-pill.test.js create mode 100644 ui/components/ui/origin-pill/origin-pill.test.tsx rename ui/components/ui/origin-pill/{origin-pill.js => origin-pill.tsx} (86%) 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 00e2ef8a5c6a..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,84 +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 { 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 { AccountListItem } from '../../multichain'; +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, @@ -87,41 +114,14 @@ export const safeComponentList = { Typography, SmartTransactionStatusPage, UrlIcon, - OriginPill, - 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/__snapshots__/origin-pill.test.js.snap b/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap deleted file mode 100644 index c25eda6c3b4c..000000000000 --- a/ui/components/ui/origin-pill/__snapshots__/origin-pill.test.js.snap +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders 1`] = ` -
-
-
- -
-
- Test Origin -
-
-
-`; diff --git a/ui/components/ui/origin-pill/origin-pill.test.js b/ui/components/ui/origin-pill/origin-pill.test.js deleted file mode 100644 index 44a1ae60ec0a..000000000000 --- a/ui/components/ui/origin-pill/origin-pill.test.js +++ /dev/null @@ -1,22 +0,0 @@ -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', () => { - const defaultProps = { - origin: 'Test Origin', - dataTestId: 'test-data-test-id', - }; - - const store = configureMockStore()(mockState); - const { container } = renderWithProvider( - , - store, - ); - - expect(container).toMatchSnapshot(); - }); -}); 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.js b/ui/components/ui/origin-pill/origin-pill.tsx similarity index 86% rename from ui/components/ui/origin-pill/origin-pill.js rename to ui/components/ui/origin-pill/origin-pill.tsx index ec84f9330e1a..c5b5e973fdae 100644 --- a/ui/components/ui/origin-pill/origin-pill.js +++ b/ui/components/ui/origin-pill/origin-pill.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { AlignItems, + BorderColor, BorderRadius, BorderStyle, - Color, Display, JustifyContent, TextColor, @@ -14,7 +14,12 @@ import { import { getSubjectMetadata } from '../../../selectors'; import { AvatarFavicon, Box, Text } from '../../component-library'; -export default function OriginPill({ origin, dataTestId }) { +type OriginPillProps = { + origin: string; + dataTestId: string; +}; + +export default function OriginPill({ origin, dataTestId }: OriginPillProps) { const subjectMetadata = useSelector(getSubjectMetadata); const { iconUrl: siteImage = '' } = subjectMetadata[origin] || {}; @@ -28,7 +33,7 @@ export default function OriginPill({ origin, dataTestId }) { marginRight={4} marginLeft={4} padding={2} - borderColor={Color.borderMuted} + borderColor={BorderColor.borderMuted} borderStyle={BorderStyle.solid} borderRadius={BorderRadius.pill} borderWidth={1} From 6bf8145e2b0309c57b6026eda44797f76607de70 Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Thu, 19 Dec 2024 13:39:19 +0000 Subject: [PATCH 3/4] Address PR review --- ui/components/ui/origin-pill/origin-pill.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ui/components/ui/origin-pill/origin-pill.tsx b/ui/components/ui/origin-pill/origin-pill.tsx index c5b5e973fdae..b4325cd0334c 100644 --- a/ui/components/ui/origin-pill/origin-pill.tsx +++ b/ui/components/ui/origin-pill/origin-pill.tsx @@ -56,8 +56,3 @@ export default function OriginPill({ origin, dataTestId }: OriginPillProps) { ); } - -OriginPill.propTypes = { - origin: PropTypes.string, - dataTestId: PropTypes.string, -}; From fa1ac36e9c5bdf3bc856f65882039d5a221dea91 Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Thu, 19 Dec 2024 13:56:54 +0000 Subject: [PATCH 4/4] Address PR review --- ui/components/ui/origin-pill/origin-pill.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/ui/origin-pill/origin-pill.tsx b/ui/components/ui/origin-pill/origin-pill.tsx index b4325cd0334c..6a0863f43a71 100644 --- a/ui/components/ui/origin-pill/origin-pill.tsx +++ b/ui/components/ui/origin-pill/origin-pill.tsx @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { useSelector } from 'react-redux'; import {