From 512b9bdf7656c60d4a530220177b3007131276ff Mon Sep 17 00:00:00 2001 From: Sam Gbafa Date: Tue, 4 Oct 2022 22:33:51 +0100 Subject: [PATCH] Sign-in With Ethereum Design Update (#16019) * header warning changes * updated warning message * Updated button color * add rounded corners * text + style changes * cleanup * linter fixes * remove console.log * break out components * remove unused css * use icon name var * improve icon styling * remove unused styles * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall * use design system fonts * remove unused fonts * moved tooltip to parent component * remove domain call * updated stories * classname cleanup * fix locales * remove unused locales * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall Co-authored-by: George Marshall --- app/_locales/de/messages.json | 4 -- app/_locales/el/messages.json | 4 -- app/_locales/en/messages.json | 11 +++-- app/_locales/es/messages.json | 4 -- app/_locales/fr/messages.json | 4 -- app/_locales/hi/messages.json | 4 -- app/_locales/id/messages.json | 4 -- app/_locales/ja/messages.json | 4 -- app/_locales/ko/messages.json | 4 -- app/_locales/pt/messages.json | 4 -- app/_locales/ru/messages.json | 4 -- app/_locales/tl/messages.json | 4 -- app/_locales/tr/messages.json | 4 -- app/_locales/vi/messages.json | 4 -- app/_locales/zh_CN/messages.json | 4 -- .../permissions-connect-header.component.js | 3 ++ .../app/signature-request-siwe/index.scss | 19 ++++---- .../signature-request-siwe-header/index.scss | 4 ++ .../signature-request-siwe-header.js | 21 ++++++--- .../signature-request-siwe-header.stories.js | 12 +++++ .../signature-request-siwe-icon/index.js | 25 +++++++++++ .../signature-request-siwe-icon/index.scss | 5 +++ .../signature-request-siwe-icon.stories.js | 11 +++++ .../signature-request-siwe-tag/index.js | 45 +++++++++++++++++++ .../signature-request-siwe-tag.stories.js | 18 ++++++++ .../signature-request-siwe.js | 18 +++++++- .../actionable-message/actionable-message.js | 7 ++- ui/components/ui/site-origin/site-origin.js | 9 +++- 28 files changed, 185 insertions(+), 79 deletions(-) create mode 100644 ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js create mode 100644 ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.scss create mode 100644 ui/components/app/signature-request-siwe/signature-request-siwe-icon/signature-request-siwe-icon.stories.js create mode 100644 ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js create mode 100644 ui/components/app/signature-request-siwe/signature-request-siwe-tag/signature-request-siwe-tag.stories.js diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 05d837044..79e96dd73 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Die Adresse in der Anmeldeanfrage entspricht nicht der Adresse des Kontos, mit dem Sie sich anmelden." }, - "SIWEDomainInvalid": { - "message": "Die Webseite, auf der Sie sich anmelden möchten ($1) entspricht nicht der Domain der Anmeldeanfrage. Bitte seien Sie vorsichtig.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Die Webseite ($1) bittet Sie, sich in der falschen Domain anzumelden. Dies könnte ein Phishing-Angriff sein.", "description": "$1 represents the website domain" diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index d42097345..75aaf780d 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Η διεύθυνση στο αίτημα σύνδεσης δεν ταιριάζει με τη διεύθυνση του λογαριασμού που χρησιμοποιείτε για να συνδεθείτε." }, - "SIWEDomainInvalid": { - "message": "Ο ιστότοπος στον οποίο προσπαθείτε να συνδεθείτε ($1) δεν ταιριάζει με τον τομέα στο αίτημα σύνδεσης. Προχωρήστε με προσοχή.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Ο ιστότοπος ($1) σάς ζητά να συνδεθείτε σε λάθος τομέα. Μπορεί να πρόκειται για επίθεση ηλεκτρονικού ψαρέματος.", "description": "$1 represents the website domain" diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 426bcd814..61552da61 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -47,14 +47,19 @@ "SIWEAddressInvalid": { "message": "The address in the sign-in request does not match the address of the account you are using to sign in." }, - "SIWEDomainInvalid": { - "message": "The website you are attempting to sign in to ($1) does not match the domain in the sign-in request. Proceed with caution.", - "description": "$1 represents the website domain" + "SIWEDomainInvalidText": { + "message": "The site you're attempting to sign into doesn't match the domain in the request. Proceed with caution." + }, + "SIWEDomainInvalidTitle": { + "message": "Deceptive site request." }, "SIWEDomainWarningBody": { "message": "The website ($1) is asking you to sign in to the wrong domain. This may be a phishing attack.", "description": "$1 represents the website domain" }, + "SIWEDomainWarningLabel": { + "message": "Unsafe" + }, "SIWELabelChainID": { "message": "Chain ID:" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index c8f10fb99..2ea0c51a5 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "La dirección de la solicitud de inicio de sesión no coincide con la dirección de la cuenta que está utilizando para iniciar sesión." }, - "SIWEDomainInvalid": { - "message": "El sitio web en el que intenta iniciar sesión ($1) no coincide con el dominio de la solicitud de inicio de sesión. Proceda con precaución.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "El sitio web ($1) le pide que inicie sesión en un dominio incorrecto. Esto puede ser un ataque de phishing.", "description": "$1 represents the website domain" diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 6c98ad336..bd6821004 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "L'adresse figurant dans la demande de connexion ne correspond pas à l'adresse du compte que vous utilisez pour vous connecter." }, - "SIWEDomainInvalid": { - "message": "Le nom de domaine du site Web auquel vous tentez de vous connecter ($1) ne correspond pas au nom de domaine indiqué dans la demande de connexion. Procédez avec prudence.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Le site Web ($1) vous demande de vous connecter au mauvais nom domaine. Il peut s'agir d'une tentative d'hameçonnage.", "description": "$1 represents the website domain" diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 76664e7fc..6753bacbc 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "साइन-इन अनुरोध का पता उस अकाउंट के पते से मेल नहीं खाता जिसका उपयोग आप साइन इन करने के लिए कर रहे हैं।" }, - "SIWEDomainInvalid": { - "message": "जिस वेबसाइट में ($1) आप साइन इन करने की कोशिश कर रहे हैं वह साइन-इन अनुरोध के डोमेन से मेल नहीं खाती। सावधानी के साथ आगे बढ़ें।", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "वेबसाइट ($1) आपसे गलत डोमेन में साइन इन करने के लिए कह रही है। यह एक फिशिंग अटैक हो सकता है।", "description": "$1 represents the website domain" diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 974073843..dda622271 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Alamat pada permintaan masuk tidak sesuai dengan alamat akun yang Anda gunakan untuk masuk." }, - "SIWEDomainInvalid": { - "message": "Situs web yang Anda coba masuki ($1) tidak sesuai dengan domain pada permintaan masuk. Lanjutkan dengan hati-hati.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Situs web ($1) meminta Anda untuk masuk ke domain yang salah. Kemungkinan ini merupakan serangan pengelabuan.", "description": "$1 represents the website domain" diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index e1023b070..0e312f8ed 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "サインインリクエストのアドレスが、サインインに使用しているアカウントのアドレスと一致していません。" }, - "SIWEDomainInvalid": { - "message": "サインインしようとしている Web サイト ($1) が、サインインリクエストのドメインと一致していません。慎重に進めてください。", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Web サイト ($1) が正しくないドメインへのサインインを要求しています。フィッシング攻撃の可能性があります。", "description": "$1 represents the website domain" diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index ecfa86120..deba05052 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "로그인 요청 주소가 현재 로그인 계정의 주소와 일치하지 않습니다." }, - "SIWEDomainInvalid": { - "message": "($1) 로그인을 시도하는 웹사이트가 로그인 요청 도메인과 일치하지 않습니다. 주의하여 진행하세요.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "($1) 웹사이트가 잘못된 도메인에 로그인하도록 요청하고 있습니다. 이는 피싱 공격일 수도 있습니다.", "description": "$1 represents the website domain" diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index eb4fdd630..2dcd260dd 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "O endereço na solicitação de entrada não coincide com o endereço da conta que você está usando para entrar." }, - "SIWEDomainInvalid": { - "message": "O site em que você está tentando entrar ($1) não coincide com o domínio na solicitação de entrada. Prossiga com cautela.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "O site ($1) está solicitando que você entre no domínio incorreto. Pode-se tratar de um ataque de phishing.", "description": "$1 represents the website domain" diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index f4542bd32..7a177f367 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Адрес в запросе на вход не соответствует адресу счета, который вы используете для входа." }, - "SIWEDomainInvalid": { - "message": "Веб-сайт, на который вы пытаетесь войти ($1), не соответствует домену в запросе на вход. Действуйте с осторожностью.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Веб-сайт ($1) просит вас войти в неправильный домен. Это может быть фишинговая атака.", "description": "$1 represents the website domain" diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index a08952f65..8df1321b6 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Ang address sa request sa pag-sign in ay hindi tugma sa address ng account na ginagamit mo sa pag-sign in." }, - "SIWEDomainInvalid": { - "message": "Ang website kung saan mo sinusubukang mag-sign in sa ($1) ay hindi tugma sa domain sa request sa pag-sign in. Magpatuloy nang may pag-iingat.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Hinihiling sa iyo ng website ($1) na mag-sign in sa maling domain. Posibleng phishing na pag-atake ito.", "description": "$1 represents the website domain" diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index c0b7c054a..9c6b8b051 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Giriş talebindeki adres, giriş yapmak için kullandığınız hesapla uyumlu değil." }, - "SIWEDomainInvalid": { - "message": "Giriş yapmaya çalıştığınız web sitesi ($1) giriş talebindeki alan ile uyumlu değil. Dikkati olarak ilerleyin.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Web sitesi ($1) yanlış alana giriş yapmanızı istiyor. Bu bir dolandırıcılık saldırısı olabilir.", "description": "$1 represents the website domain" diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index e7f5d4cf8..3c042f4e3 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "Địa chỉ trong yêu cầu đăng nhập không trùng khớp với địa chỉ của tài khoản bạn đang sử dụng để đăng nhập." }, - "SIWEDomainInvalid": { - "message": "Trang web bạn đang cố gắng đăng nhập vào ($1) không trùng khớp với tên miền trong yêu cầu đăng nhập. Hãy thực hiện cẩn thận.", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "Trang web ($1) đang yêu cầu bạn đăng nhập vào một tên miền không đúng. Đây có thể là một cuộc tấn công lừa đảo.", "description": "$1 represents the website domain" diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 981cbcdfe..472f3ec96 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -47,10 +47,6 @@ "SIWEAddressInvalid": { "message": "登录请求中的地址与您用于登录的账户地址不匹配。" }, - "SIWEDomainInvalid": { - "message": "您尝试登录的网站（$1）与登录请求中的域名不匹配。请谨慎行事。", - "description": "$1 represents the website domain" - }, "SIWEDomainWarningBody": { "message": "网站（$1）要求您登录到错误的域名。这可能是网络钓鱼攻击。", "description": "$1 represents the website domain" diff --git a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js index 1b5484b13..dc2633be9 100644 --- a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js +++ b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js @@ -26,6 +26,7 @@ export default class PermissionsConnectHeader extends Component { headerTitle: PropTypes.node, boxProps: PropTypes.shape({ ...Box.propTypes }), headerText: PropTypes.string, + leftIcon: PropTypes.node, rightIcon: PropTypes.node, ///: BEGIN:ONLY_INCLUDE_IN(flask) snapVersion: PropTypes.string, @@ -45,6 +46,7 @@ export default class PermissionsConnectHeader extends Component { iconUrl, iconName, siteOrigin, + leftIcon, rightIcon, ///: BEGIN:ONLY_INCLUDE_IN(flask) isSnapInstallOrUpdate, @@ -64,6 +66,7 @@ export default class PermissionsConnectHeader extends Component { siteOrigin={siteOrigin} iconSrc={iconUrl} name={iconName} + leftIcon={leftIcon} rightIcon={rightIcon} /> diff --git a/ui/components/app/signature-request-siwe/index.scss b/ui/components/app/signature-request-siwe/index.scss index 134b75e9d..a6de5df10 100644 --- a/ui/components/app/signature-request-siwe/index.scss +++ b/ui/components/app/signature-request-siwe/index.scss @@ -1,5 +1,6 @@ @import 'signature-request-siwe-header/index'; @import 'signature-request-siwe-message/index'; +@import 'signature-request-siwe-icon/index'; .signature-request-siwe { display: flex; @@ -21,20 +22,18 @@ } .signature-request-siwe__actionable-message { - margin: 4px 16px; + margin: 0 16px 16px; - svg { - width: 13px; - height: 13px; - left: 10px; - top: 20px; + .icon { + position: absolute; + left: 17px; + top: 13px; } } -} - -.signature-request-siwe__page-container-footer.page-container__footer { - border-top: none; + .actionable-message--with-icon.actionable-message--with-right-button { + padding-left: 48px; + } } .signature-request-siwe__warning-popover { diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-header/index.scss b/ui/components/app/signature-request-siwe/signature-request-siwe-header/index.scss index 59760562f..3335f57b6 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-header/index.scss +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-header/index.scss @@ -23,4 +23,8 @@ font-weight: 500; } } + + .chip__right-icon { + padding: 4px 8px 4px 0; + } } diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.js b/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.js index c622a93d2..4a1f5b0aa 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.js @@ -2,11 +2,10 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import AccountListItem from '../../account-list-item'; import { I18nContext } from '../../../../contexts/i18n'; -import Tooltip from '../../../ui/tooltip'; -import InfoIcon from '../../../ui/icon/info-icon.component'; -import { SEVERITIES } from '../../../../helpers/constants/design-system'; - import PermissionsConnectHeader from '../../permissions-connect-header'; +import SignatureRequestSIWEIcon from '../signature-request-siwe-icon'; +import SignatureRequestSIWETag from '../signature-request-siwe-tag'; +import Tooltip from '../../../ui/tooltip'; export default function SignatureRequestSIWEHeader({ fromAccount, @@ -25,15 +24,23 @@ export default function SignatureRequestSIWEHeader({ headerText={t('SIWESiteRequestSubtitle')} siteOrigin={domain} className={isSIWEDomainValid ? '' : 'bad-domain'} + leftIcon={ + !isSIWEDomainValid && ( + {t('SIWEDomainWarningBody', [domain])}

} + > + + + ) + } rightIcon={ !isSIWEDomainValid && ( {t('SIWEDomainWarningBody', [domain])}

} - wrapperClassName="signature-request-siwe-header__tooltip" - containerClassName="signature-request-siwe-header__tooltip__container" > - + ) } diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.stories.js b/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.stories.js index 36ae054f7..e88f0a9e8 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.stories.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.stories.js @@ -32,5 +32,17 @@ DefaultStory.storyName = 'Default'; DefaultStory.args = { fromAccount: primaryIdentity, domain: window.location.host, + isSIWEDomainValid: true, + subjectMetadata, +}; + +export const ErrorStory = (args) => ; + +ErrorStory.storyName = 'Error'; + +ErrorStory.args = { + fromAccount: primaryIdentity, + domain: window.location.host, + isSIWEDomainValid: false, subjectMetadata, }; diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js new file mode 100644 index 000000000..6487b18a1 --- /dev/null +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { + DISPLAY, + ALIGN_ITEMS, + COLORS, + JUSTIFY_CONTENT, +} from '../../../../helpers/constants/design-system'; +import Box from '../../../ui/box'; +import { Icon, ICON_NAMES } from '../../../component-library/icon'; + +const SignatureRequestSIWEIcon = () => { + return ( + + + + ); +}; + +export default SignatureRequestSIWEIcon; diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.scss b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.scss new file mode 100644 index 000000000..8ae1013a4 --- /dev/null +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.scss @@ -0,0 +1,5 @@ +.signature-request-siwe-icon { + border-radius: 100%; + height: 32px; + width: 32px; +} diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/signature-request-siwe-icon.stories.js b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/signature-request-siwe-icon.stories.js new file mode 100644 index 000000000..cb68105c1 --- /dev/null +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/signature-request-siwe-icon.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; +import SignatureRequestSIWEIcon from '.'; + +export default { + title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWEIcon', + id: __filename, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js new file mode 100644 index 000000000..8bc781a05 --- /dev/null +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + TYPOGRAPHY, + SIZES, + DISPLAY, + ALIGN_ITEMS, + COLORS, + FONT_WEIGHT, +} from '../../../../helpers/constants/design-system'; +import Box from '../../../ui/box'; +import Typography from '../../../ui/typography/typography'; + +const SignatureRequestSIWETag = ({ text }) => { + return ( + + + {text} + + + ); +}; + +export default SignatureRequestSIWETag; + +SignatureRequestSIWETag.propTypes = { + /** + * The text to display in the tag + */ + text: PropTypes.string, +}; diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-tag/signature-request-siwe-tag.stories.js b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/signature-request-siwe-tag.stories.js new file mode 100644 index 000000000..a570a9e12 --- /dev/null +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/signature-request-siwe-tag.stories.js @@ -0,0 +1,18 @@ +import React from 'react'; +import SignatureRequestSIWETag from '.'; + +export default { + title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWETag', + id: __filename, + argTypes: { + text: { control: 'text' }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; + +DefaultStory.args = { + text: 'Unsafe', +}; 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 06352d5f6..ab7ce3771 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe.js @@ -13,6 +13,9 @@ import { } from '../../../selectors'; import { getAccountByAddress } from '../../../helpers/utils/util'; import { formatMessageParams } from '../../../../shared/modules/siwe'; +import { Icon } from '../../component-library/icon/icon'; +import { COLORS } from '../../../helpers/constants/design-system'; + import Header from './signature-request-siwe-header'; import Message from './signature-request-siwe-message'; @@ -97,16 +100,28 @@ export default function SignatureRequestSIWE({ iconFillColor="var(--color-warning-default)" useIcon withRightButton + icon={} /> )} {!isSIWEDomainValid && ( +

+ {t('SIWEDomainInvalidTitle')} +

{' '} + {t('SIWEDomainInvalidText')} + + } iconFillColor="var(--color-error-default)" useIcon withRightButton + icon={} /> )} {isShowingDomainWarning && ( - {useIcon ? : null} + {useIcon ? icon || : null} {infoTooltipText && ( + leftIcon || ( + + ) } rightIcon={rightIcon} /> @@ -61,6 +64,10 @@ SiteOrigin.propTypes = { * if false iconSrc and iconName props will not be used. */ chip: PropTypes.bool, + /** + * The icon to display on the left side of the chip. If not provided, the iconSrc and iconName will be used. + */ + leftIcon: PropTypes.node, /** * The icon to display on the right side of the chip. */