Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace ActionableMessage components with BannerAlerts in SIWE Sign-in with Ethereum page #18207

Merged
merged 24 commits into from
Mar 21, 2023
+406 −51
Merged

Replace ActionableMessage components with BannerAlerts in SIWE Sign-in with Ethereum page #18207

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
d924916
siwe: re-enable warning UI for mismatched domains
digiwand Mar 16, 2023
9fb40be
siwe: fix mismatch domain warning msg UI
digiwand Mar 16, 2023
da120ff
lint: rm whitespace EOL
digiwand Mar 16, 2023
c80a4a2
siwe: rm unit test
digiwand Mar 16, 2023
bdbc997
lint: fix whitespace
digiwand Mar 16, 2023
185213d
Merge branch 'develop' into fix-siwe-unblock-mismatch-domain-with-war…
legobeat Mar 16, 2023
0f0b31c
Icon: support .mm-icon
digiwand Mar 16, 2023
e65a1a1
lint: fix newline
digiwand Mar 17, 2023
412a91a
Revert "siwe: rm unit test"
digiwand Mar 17, 2023
3aed558
ActionableMessage: add deprecation
digiwand Mar 17, 2023
2f4e00c
siwe: replace actionable-msg w/ banner-alert
digiwand Mar 17, 2023
e11c2fc
Merge branch 'develop' into fix-siwe-unblock-mismatch-domain-with-war…
digiwand Mar 17, 2023
daa5838
ActionableMessage: add param for lint
digiwand Mar 17, 2023
4e34c4d
Merge branch 'fix-siwe-unblock-mismatch-domain-with-warning-ui' into …
digiwand Mar 17, 2023
c89680b
revert .mm_icon ActionableMessage support
digiwand Mar 17, 2023
893ee6f
Merge branch 'develop' into update-siwe-actionable-msg-and-support-mm…
digiwand Mar 17, 2023
45b273a
siwe: create tests
digiwand Mar 18, 2023
f9c8209
siwe: fix typo in tests
digiwand Mar 18, 2023
c627db5
siwe: fix - do not allow nested <p> elements
digiwand Mar 18, 2023
ee0ce10
Update ui/components/app/signature-request-siwe/signature-request-siw…
digiwand Mar 18, 2023
9b98162
Update ui/components/app/signature-request-siwe/signature-request-siw…
digiwand Mar 18, 2023
0832e3e
Merge branch 'develop' into update-siwe-actionable-msg-and-support-mm…
digiwand Mar 18, 2023
de6a131
eslint fix
digiwand Mar 20, 2023
d7ab254
Merge branch 'develop' into update-siwe-actionable-msg-and-support-mm…
digiwand Mar 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
245 changes: 245 additions & 0 deletions ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`] = `
<div>
<div
class="signature-request-siwe"
>
<div
class="signature-request-siwe-header"
>
<div
class="box permissions-connect-header box--flex-direction-column box--justify-content-center box--display-flex"
>
<div
class="permissions-connect-header__icon"
>
<div
class="site-origin"
>
<div
class="chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined"
>
<div
class="chip__left-icon"
>
<div
class=""
>
<img
alt="icon"
src="https://example-dapp.website/favicon-32x32.png"
style="height: 24px; width: 24px;"
/>
</div>
</div>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
>
https://example-dapp.website
</span>
</div>
</div>
</div>
<div
class="permissions-connect-header__title"
>
Sign-in request
</div>
<div
class="permissions-connect-header__subtitle"
>
This site is requesting to sign in with
</div>
</div>
<div
class="account-list-item signature-request-siwe-header__account-list-item"
data-testid="account-list-item"
>
<div
class="account-list-item__top-row"
>
<div
class=""
>
<div
class="identicon account-list-item__identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(250, 58, 0);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#18CDF2"
height="18"
transform="translate(-0.5897213458840913 -1.8586597890715306) rotate(328.9 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#035E56"
height="18"
transform="translate(-10.292884711218024 5.9582598028585885) rotate(176.2 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F26602"
height="18"
transform="translate(9.375661135250958 -7.990391094185859) rotate(468.9 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<div
class="account-list-item__account-name"
>
Test Account
</div>
</div>
</div>
</div>
<div
class="box signature-request-siwe-message box--flex-direction-row"
>
<div
class="box box--flex-direction-column"
>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Message:
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
Click to sign in and accept the Terms of Service: https://community.metamask.io/tos
</h6>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
URI:
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
http://localhost:8080
</h6>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Version:
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
1
</h6>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Chain ID:
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
1
</h6>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Nonce:
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
STMt6KQMwwdOXE306
</h6>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Issued At:
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
2023-03-18T21:40:40.823Z
</h6>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
>
<h4
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Resources: 2
</h4>
<h6
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
>
ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu
https://example.com/my-web2-claim.json
</h6>
</div>
</div>
</div>
<div
class="page-container__footer signature-request-siwe__page-container-footer"
>
<footer>
<button
class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
data-testid="page-container-footer-cancel"
role="button"
tabindex="0"
>
Cancel
</button>
<button
class="button btn--rounded btn-primary page-container__footer-button"
data-testid="page-container-footer-next"
role="button"
tabindex="0"
>
Sign-In
</button>
</footer>
</div>
</div>
</div>
`;
21 changes: 0 additions & 21 deletions ui/components/app/signature-request-siwe/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
49 changes: 19 additions & 30 deletions ui/components/app/signature-request-siwe/signature-request-siwe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -101,38 +103,25 @@ export default function SignatureRequestSIWE({
) : null}
<Message data={formatMessageParams(parsedMessage, t)} />
{!isMatchingAddress && (
<ActionableMessage
className="signature-request-siwe__actionable-message"
type="warning"
message={t('SIWEAddressInvalid', [
<BannerAlert severity={SEVERITIES.WARNING}>
digiwand marked this conversation as resolved.
Show resolved Hide resolved
{t('SIWEAddressInvalid', [
parsedMessage.address,
fromAccount.address,
])}
iconFillColor="var(--color-warning-default)"
useIcon
withRightButton
icon={<Icon name="danger" color={IconColor.warningDefault} />}
/>
</BannerAlert>
)}
{!isSIWEDomainValid && (
<ActionableMessage
className="signature-request-siwe__actionable-message"
type="danger"
message={
<>
<p
className="typography--weight-bold"
style={{ display: 'inline' }}
>
{t('SIWEDomainInvalidTitle')}
</p>{' '}
{t('SIWEDomainInvalidText')}
</>
}
iconFillColor="var(--color-error-default)"
useIcon
icon={<Icon name="danger" color={IconColor.errorDefault} />}
/>
<BannerAlert
severity={SEVERITIES.DANGER}
marginLeft={4}
marginRight={4}
marginBottom={4}
>
<Text variant={TextVariant.bodyMdBold}>
{t('SIWEDomainInvalidTitle')}
</Text>{' '}
<Text variant={TextVariant.bodyMd}>{t('SIWEDomainInvalidText')}</Text>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to DS team to allow for ` tags cc @garrettbear so we could do something like

<Text>
  <strong>{t('SIWEDomainInvalidTitle')}</strong> {t('SIWEDomainInvalidText')}
</Text>

digiwand marked this conversation as resolved.
Show resolved Hide resolved
</BannerAlert>
)}
<PageContainerFooter
footerClassName="signature-request-siwe__page-container-footer"
Expand Down
Loading