From 5e3770eb13b3d071863d5d6e8bd7bbe5e1004e8b Mon Sep 17 00:00:00 2001 From: Ariella Vu <20778143+digiwand@users.noreply.github.com> Date: Tue, 21 Mar 2023 09:49:04 -0700 Subject: [PATCH] Replace ActionableMessage components with BannerAlerts in SIWE Sign-in with Ethereum page (#18207) * siwe: re-enable warning UI for mismatched domains - unblocks mismatched domain support - we may re-add error handling here #18184 - reverts logic from #16616 * siwe: fix mismatch domain warning msg UI * lint: rm whitespace EOL * siwe: rm unit test * lint: fix whitespace * Icon: support .mm-icon - apply to SIWE actionable-message - .mm-icon is a * lint: fix newline * Revert "siwe: rm unit test" This reverts commit c80a4a2e661609c46c76d1e43e05909b6db3f0f5. * ActionableMessage: add deprecation * siwe: replace actionable-msg w/ banner-alert * ActionableMessage: add param for lint * revert .mm_icon ActionableMessage support * siwe: create tests * siwe: fix typo in tests * siwe: fix - do not allow nested

elements * Update ui/components/app/signature-request-siwe/signature-request-siwe.js Co-authored-by: George Marshall * Update ui/components/app/signature-request-siwe/signature-request-siwe.js Co-authored-by: George Marshall * eslint fix --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: George Marshall --- .../signature-request-siwe.test.js.snap | 245 ++++++++++++++++++ .../app/signature-request-siwe/index.scss | 21 -- .../signature-request-siwe.js | 54 ++-- .../signature-request-siwe.test.js | 113 ++++++++ .../actionable-message/actionable-message.js | 24 ++ 5 files changed, 406 insertions(+), 51 deletions(-) create mode 100644 ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap create mode 100644 ui/components/app/signature-request-siwe/signature-request-siwe.test.js diff --git a/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap new file mode 100644 index 000000000..345cfdef7 --- /dev/null +++ b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap @@ -0,0 +1,245 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`] = ` +

+
+
+
+
+
+
+
+
+ icon +
+
+ + https://example-dapp.website + +
+
+
+
+ Sign-in request +
+
+ This site is requesting to sign in with +
+
+ +
+
+
+
+

+ Message: +

+
+ Click to sign in and accept the Terms of Service: https://community.metamask.io/tos +
+
+
+

+ URI: +

+
+ http://localhost:8080 +
+
+
+

+ Version: +

+
+ 1 +
+
+
+

+ Chain ID: +

+
+ 1 +
+
+
+

+ Nonce: +

+
+ STMt6KQMwwdOXE306 +
+
+
+

+ Issued At: +

+
+ 2023-03-18T21:40:40.823Z +
+
+
+

+ Resources: 2 +

+
+ ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu +https://example.com/my-web2-claim.json +
+
+
+
+
+
+ + +
+
+
+
+`; diff --git a/ui/components/app/signature-request-siwe/index.scss b/ui/components/app/signature-request-siwe/index.scss index 2dedc438a..a68b93148 100644 --- a/ui/components/app/signature-request-siwe/index.scss +++ b/ui/components/app/signature-request-siwe/index.scss @@ -20,27 +20,6 @@ border-radius: 8px; box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); } - - /** @todo replace ActionableMessage or remove overwritten code. */ - .signature-request-siwe__actionable-message { - margin: 0 16px; - flex-direction: row; - align-items: initial; - - .icon { - position: absolute; - left: 17px; - top: 13px; - } - - .actionable-message__message { - padding-left: 16px; - } - - &.actionable-message--with-icon { - padding-left: 16px; - } - } } .signature-request-siwe__warning-popover { diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe.js b/ui/components/app/signature-request-siwe/signature-request-siwe.js index 4ae5533eb..11e515eee 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe.js @@ -2,7 +2,7 @@ import React, { useCallback, useContext, useState } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import log from 'loglevel'; -import ActionableMessage from '../../ui/actionable-message'; +import { BannerAlert, Text } from '../../component-library'; import Popover from '../../ui/popover'; import Checkbox from '../../ui/check-box'; import { I18nContext } from '../../../contexts/i18n'; @@ -13,8 +13,10 @@ import { } from '../../../selectors'; import { getAccountByAddress } from '../../../helpers/utils/util'; import { formatMessageParams } from '../../../../shared/modules/siwe'; -import { Icon } from '../../component-library/icon/icon'; -import { IconColor } from '../../../helpers/constants/design-system'; +import { + SEVERITIES, + TextVariant, +} from '../../../helpers/constants/design-system'; import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message'; import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants'; @@ -101,38 +103,30 @@ export default function SignatureRequestSIWE({ ) : null} {!isMatchingAddress && ( - + {t('SIWEAddressInvalid', [ parsedMessage.address, fromAccount.address, ])} - iconFillColor="var(--color-warning-default)" - useIcon - withRightButton - icon={} - /> + )} {!isSIWEDomainValid && ( - -

- {t('SIWEDomainInvalidTitle')} -

{' '} - {t('SIWEDomainInvalidText')} - - } - iconFillColor="var(--color-error-default)" - useIcon - icon={} - /> + + + {t('SIWEDomainInvalidTitle')} + {' '} + {t('SIWEDomainInvalidText')} + )} { + const store = configureStore(mockStoreInitialState); + + return renderWithProvider( + , + store, + ); +}; + +describe('SignatureRequestSIWE (Sign in with Ethereum)', () => { + it('should match snapshot', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render', async () => { + const { container, findByText } = render(); + const bannerAlert = container.querySelector('.mm-banner-alert'); + + expect(bannerAlert).not.toBeTruthy(); + expect(await findByText('Sign-in request')).toBeInTheDocument(); + }); + + it('should render SiteOrigin', () => { + const { container } = render(); + const siteOriginElem = container.querySelector('.site-origin'); + expect(siteOriginElem).toHaveTextContent(MOCK_ORIGIN); + }); + + it('should render BannerAlert when addresses do not match', () => { + const store = configureStore(mockStoreInitialState); + const txData = cloneDeep(mockProps.txData); + txData.msgParams.siwe.parsedMessage.address = '0x12345'; + + const { container } = renderWithProvider( + , + store, + ); + const bannerAlert = container.querySelector('.mm-banner-alert'); + + expect(bannerAlert).toBeTruthy(); + expect(bannerAlert).toHaveTextContent('does not match the address'); + }); + + it('should render BannerAlert when domains do not match', () => { + const store = configureStore(mockStoreInitialState); + const txData = cloneDeep(mockProps.txData); + txData.msgParams.siwe.parsedMessage.domain = 'potentially-malicious.com'; + + const { container } = renderWithProvider( + , + store, + ); + const bannerAlert = container.querySelector('.mm-banner-alert'); + + expect(bannerAlert).toBeTruthy(); + expect(bannerAlert).toHaveTextContent('Deceptive site request.'); + }); +}); diff --git a/ui/components/ui/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js index 4bf5e1698..cb87c946e 100644 --- a/ui/components/ui/actionable-message/actionable-message.js +++ b/ui/components/ui/actionable-message/actionable-message.js @@ -16,6 +16,30 @@ export const typeHash = { default: '', }; +/** + * @deprecated `` has been deprecated in favour of the `` + * component in ./ui/components/component-library/banner-alert/banner-alert.js. + * See storybook documentation for Text here: + * {@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--default-story#banneralert}} + * + * Help to replace `ActionableMessage` with `BannerAlert` by submitting a PR + * @param options + * @param options.message + * @param options.primaryAction + * @param options.primaryActionV2 + * @param options.secondaryAction + * @param options.className + * @param options.infoTooltipText + * @param options.withRightButton + * @param options.type + * @param options.useIcon + * @param options.icon + * @param options.iconFillColor + * @param options.roundedButtons + * @param options.dataTestId + * @param options.autoHideTime + * @param options.onAutoHide + */ export default function ActionableMessage({ message = '', primaryAction = null,