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

app/scripts/lib/personal-message-manager.js

@@ -153,15 +153,6 @@ export default class PersonalMessageManager extends EventEmitter {
     const siwe = detectSIWE(msgParams);
     msgParams.siwe = siwe;
 
-    if (siwe.isSIWEMessage && req.origin) {
-      const { host } = new URL(req.origin);
-      if (siwe.parsedMessage.domain !== host) {
-        throw new Error(
-          `SIWE domain is not valid: "${host}" !== "${siwe.parsedMessage.domain}"`,
-        );
-      }
-    }
-
     // create txData obj with parameters and meta data
     const time = new Date().getTime();
     const msgId = createId();

app/scripts/lib/personal-message-manager.test.js

@@ -148,45 +148,4 @@ describe('Personal Message Manager', () => {
       expect(output).toStrictEqual('0x12');
     });
   });
-
-  describe('#addUnapprovedMessage', () => {
-    const origin = 'http://localhost:8080';
-    const from = '0xFb2C15004343904e5f4082578c4e8e11105cF7e3';
-    const msgParams = {
-      from,
-      data: '0x6c6f63616c686f73743a383038302077616e747320796f7520746f207369676e20696e207769746820796f757220457468657265756d206163636f756e743a0a3078466232433135303034333433393034653566343038323537386334653865313131303563463765330a0a436c69636b20746f207369676e20696e20616e642061636365707420746865205465726d73206f6620536572766963653a2068747470733a2f2f636f6d6d756e6974792e6d6574616d61736b2e696f2f746f730a0a5552493a20687474703a2f2f6c6f63616c686f73743a383038300a56657273696f6e3a20310a436861696e2049443a20310a4e6f6e63653a2053544d74364b514d7777644f58453330360a4973737565642041743a20323032322d30332d31385432313a34303a34302e3832335a0a5265736f75726365733a0a2d20697066733a2f2f516d653773733341525667787636725871565069696b4d4a3875324e4c676d67737a673133705972444b456f69750a2d2068747470733a2f2f6578616d706c652e636f6d2f6d792d776562322d636c61696d2e6a736f6e',
-    };
-
-    it('should detect SIWE messages', async () => {
-      const request = { origin };
-      const nonSiweMsgParams = {
-        from,
-        data: '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0',
-      };
-      // siwe message
-      const msgId = await messageManager.addUnapprovedMessage(
-        msgParams,
-        request,
-      );
-      const result = messageManager.getMsg(msgId);
-      expect(result.msgParams.siwe.isSIWEMessage).toStrictEqual(true);
-      // non-siwe message
-      const msgId2 = await messageManager.addUnapprovedMessage(
-        nonSiweMsgParams,
-        request,
-      );
-      const result2 = messageManager.getMsg(msgId2);
-      expect(result2.msgParams.siwe.isSIWEMessage).toStrictEqual(false);
-    });
-
-    it("should throw an error if the SIWE message's domain doesn't match", async () => {
-      const request = { origin: 'https://mismatched-domain.com' };
-      const { host: siweDomain } = new URL(origin);
-      const { host: browserDomain } = new URL(request.origin);
-      const expectedError = `SIWE domain is not valid: "${browserDomain}" !== "${siweDomain}"`;
-      await expect(async () => {
-        await messageManager.addUnapprovedMessage(msgParams, request);
-      }).rejects.toThrow(expectedError);
-    });
-  });
 });

ui/components/app/signature-request-siwe/index.scss

@@ -23,16 +23,6 @@
 
   .signature-request-siwe__actionable-message {
     margin: 0 16px 16px;
-
-    .icon {
-      position: absolute;
-      left: 17px;
-      top: 13px;
-    }
-  }
-
-  .actionable-message--with-icon.actionable-message--with-right-button {
-    padding-left: 48px;
   }
 }
 

ui/components/app/signature-request-siwe/signature-request-siwe.js

@@ -18,6 +18,7 @@ import { IconColor } 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';
+import { ICON_NAMES } from '../../component-library';
 import Header from './signature-request-siwe-header';
 import Message from './signature-request-siwe-message';
 
@@ -108,10 +109,10 @@ export default function SignatureRequestSIWE({
             parsedMessage.address,
             fromAccount.address,
           ])}
-          iconFillColor="var(--color-warning-default)"
           useIcon
-          withRightButton
-          icon={<Icon name="danger" color={IconColor.warningDefault} />}
+          icon={
+            <Icon name={ICON_NAMES.DANGER} color={IconColor.warningDefault} />
+          }
         />
       )}
       {!isSIWEDomainValid && (
@@ -129,10 +130,10 @@ export default function SignatureRequestSIWE({
               {t('SIWEDomainInvalidText')}
             </>
           }
-          iconFillColor="var(--color-error-default)"
           useIcon
-          withRightButton
-          icon={<Icon name="danger" color={IconColor.errorDefault} />}
+          icon={
+            <Icon name={ICON_NAMES.DANGER} color={IconColor.errorDefault} />
+          }
         />
       )}
       <PageContainerFooter

ui/components/ui/actionable-message/index.scss

@@ -44,7 +44,8 @@
     padding-left: 32px;
   }
 
-  svg {
+  svg,
+  .mm-icon {
     width: 16px;
     height: 16px;
     position: absolute;