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 <georgewrmarshall@gmail.com> * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * 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 <georgewrmarshall@gmail.com> Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
2024-12-23 09:52:26 +01:00 · 2022-10-04 22:33:51 +01:00 · 2022-10-04 22:33:51 +01:00 · 512b9bdf76
commit 512b9bdf76
parent 76af0f4d4f
28 changed files with 185 additions and 79 deletions
--- 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"
--- 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"
--- 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:"
  },
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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}
        />
      </div>
--- 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 {
--- 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;
+  }
 }
--- 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 && (
+            <Tooltip
+              position="bottom"
+              html={<p>{t('SIWEDomainWarningBody', [domain])}</p>}
+            >
+              <SignatureRequestSIWEIcon />
+            </Tooltip>
+          )
+        }
        rightIcon={
          !isSIWEDomainValid && (
            <Tooltip
              position="bottom"
              html={<p>{t('SIWEDomainWarningBody', [domain])}</p>}
-              wrapperClassName="signature-request-siwe-header__tooltip"
-              containerClassName="signature-request-siwe-header__tooltip__container"
            >
-              <InfoIcon severity={SEVERITIES.DANGER} />
+              <SignatureRequestSIWETag text={t('SIWEDomainWarningLabel')} />
            </Tooltip>
          )
        }
--- 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) => <SignatureRequestSIWEHeader {...args} />;
+
+ErrorStory.storyName = 'Error';
+
+ErrorStory.args = {
+  fromAccount: primaryIdentity,
+  domain: window.location.host,
+  isSIWEDomainValid: false,
  subjectMetadata,
 };
--- 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
@ -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 (
+    <Box
+      className="signature-request-siwe-icon"
+      display={DISPLAY.INLINE_FLEX}
+      alignItems={ALIGN_ITEMS.CENTER}
+      backgroundColor={COLORS.ERROR_DEFAULT}
+      justifyContent={JUSTIFY_CONTENT.CENTER}
+    >
+      <Icon name={ICON_NAMES.DANGER_FILLED} color={COLORS.ERROR_INVERSE} />
+    </Box>
+  );
+};
+
+export default SignatureRequestSIWEIcon;
--- 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
@ -0,0 +1,5 @@
+.signature-request-siwe-icon {
+  border-radius: 100%;
+  height: 32px;
+  width: 32px;
+}
--- 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
@ -0,0 +1,11 @@
+import React from 'react';
+import SignatureRequestSIWEIcon from '.';
+
+export default {
+  title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWEIcon',
+  id: __filename,
+};
+
+export const DefaultStory = (args) => <SignatureRequestSIWEIcon {...args} />;
+
+DefaultStory.storyName = 'Default';
--- 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
@ -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 (
+    <Box
+      className="signature-request-siwe-tag"
+      marginRight={1}
+      display={DISPLAY.INLINE_FLEX}
+      alignItems={ALIGN_ITEMS.CENTER}
+      backgroundColor={COLORS.ERROR_DEFAULT}
+      borderRadius={SIZES.XL}
+      paddingLeft={4}
+      paddingRight={4}
+    >
+      <Typography
+        fontWeight={FONT_WEIGHT.BOLD}
+        margin={0}
+        variant={TYPOGRAPHY.H7}
+        color={COLORS.ERROR_INVERSE}
+      >
+        {text}
+      </Typography>
+    </Box>
+  );
+};
+
+export default SignatureRequestSIWETag;
+
+SignatureRequestSIWETag.propTypes = {
+  /**
+   * The text to display in the tag
+   */
+  text: PropTypes.string,
+};
--- 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
@ -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) => <SignatureRequestSIWETag {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  text: 'Unsafe',
+};
--- 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={<Icon name="danger-filled" color={COLORS.WARNING_DEFAULT} />}
        />
      )}
      {!isSIWEDomainValid && (
        <ActionableMessage
          className="signature-request-siwe__actionable-message"
          type="danger"
-          message={t('SIWEDomainInvalid', [parsedMessage.domain])}
+          message={
+            <>
+              <p
+                className="typography--weight-bold"
+                style={{ display: 'inline' }}
+              >
+                {t('SIWEDomainInvalidTitle')}
+              </p>{' '}
+              {t('SIWEDomainInvalidText')}
+            </>
+          }
          iconFillColor="var(--color-error-default)"
          useIcon
          withRightButton
+          icon={<Icon name="danger-filled" color={COLORS.ERROR_DEFAULT} />}
        />
      )}
      <PageContainerFooter
@ -117,6 +132,7 @@ export default function SignatureRequestSIWE({
        }
        cancelText={t('cancel')}
        submitText={t('signin')}
+        submitButtonType={isSIWEDomainValid ? 'primary' : 'danger-primary'}
      />
      {isShowingDomainWarning && (
        <Popover
--- a/ui/components/ui/actionable-message/actionable-message.js
+++ b/ui/components/ui/actionable-message/actionable-message.js
@ -26,6 +26,7 @@ export default function ActionableMessage({
  withRightButton = false,
  type = 'default',
  useIcon = false,
+  icon,
  iconFillColor = '',
  roundedButtons,
  dataTestId,
@ -43,7 +44,7 @@ export default function ActionableMessage({

  return (
    <div className={actionableMessageClassName} data-testid={dataTestId}>
-      {useIcon ? <InfoTooltipIcon fillColor={iconFillColor} /> : null}
+      {useIcon ? icon || <InfoTooltipIcon fillColor={iconFillColor} /> : null}
      {infoTooltipText && (
        <InfoTooltip
          position="left"
@ -149,6 +150,10 @@ ActionableMessage.propTypes = {
   * Add tooltip icon in the left component without message
   */
  useIcon: PropTypes.bool,
+  /**
+   * Custom icon component
+   */
+  icon: PropTypes.node,
  /**
   * change tooltip icon color
   */
--- a/ui/components/ui/site-origin/site-origin.js
+++ b/ui/components/ui/site-origin/site-origin.js
@ -12,6 +12,7 @@ export default function SiteOrigin({
  chip,
  className,
  title,
+  leftIcon,
  rightIcon,
 }) {
  return (
@ -22,7 +23,9 @@ export default function SiteOrigin({
          label={siteOrigin}
          maxContent={false}
          leftIcon={
-            <IconWithFallback icon={iconSrc} name={iconName} size={24} />
+            leftIcon || (
+              <IconWithFallback icon={iconSrc} name={iconName} size={24} />
+            )
          }
          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.
   */