feat: Add domain binding SIWE redesign alert row

ui/pages/confirmations/hooks/alerts/useSignatureAlerts.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import {
+  isValidSIWEOrigin,
+  WrappedSIWERequest
+} from '@metamask/controller-utils';
+
+import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts';
+import { Severity } from '../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { SignatureRequestType } from '../../types/confirm';
+import { isSIWESignatureRequest } from '../../utils';
+import useCurrentConfirmation from '../useCurrentConfirmation';
+
+const useSignatureAlerts = (): Alert[] => {
+  const { currentConfirmation } = useCurrentConfirmation();
+  const t = useI18nContext();
+
+  const alerts = useMemo<Alert[]>(() => {
+    const isSIWE = isSIWESignatureRequest(
+      currentConfirmation as SignatureRequestType
+    );
+    if (!isSIWE || !currentConfirmation?.msgParams) {
+      return [];
+    }
+
+    const { msgParams } = currentConfirmation;
+    const isSIWEDomainValid = isValidSIWEOrigin(msgParams as WrappedSIWERequest);
+    if (isSIWEDomainValid) {
+      return [];
+    }
+
+    const alert = {
+      field: 'requestFrom',
+      key: 'requestFrom',
+      message: t('confirmAlertModalMessageDomainMismatch'),
+      reason: t('confirmAlertModalTitleSignIn'),
+      severity: Severity.Danger,
+    } as Alert;
+
+    return [alert];
+  }, [currentConfirmation?.id, currentConfirmation?.msgParams, t]);
+
+  return alerts;
+};
+
+export default useSignatureAlerts;

ui/pages/confirmations/hooks/useConfirmationAlerts.ts

@@ -1,10 +1,15 @@
 import { useMemo } from 'react';
 import useBlockaidAlerts from './alerts/useBlockaidAlert';
+import useSignatureAlerts from './alerts/useSignatureAlerts';
 
 const useConfirmationAlerts = () => {
   const blockaidAlerts = useBlockaidAlerts();
+  const signatureAlerts = useSignatureAlerts();
 
-  return useMemo(() => [...blockaidAlerts], [blockaidAlerts]);
+  return useMemo(
+    () => [...blockaidAlerts, ...signatureAlerts],
+    [blockaidAlerts, signatureAlerts],
+  );
 };
 
 export default useConfirmationAlerts;

ui/pages/confirmations/types/confirm.ts

@@ -1,4 +1,6 @@
 import { ApprovalControllerState } from '@metamask/approval-controller';
+import { SIWEMessage } from '@metamask/controller-utils';
+
 import {
   TransactionMeta,
   TransactionType,
@@ -26,21 +28,7 @@ export type SignatureRequestType = {
     origin: string;
     data: string | TypedSignDataV1Type;
     version?: string;
-    siwe?: {
-      isSIWEMessage: boolean;
-      parsedMessage: null | {
-        domain: string;
-        address: string;
-        statement: string;
-        uri: string;
-        version: string;
-        chainId: number;
-        nonce: string;
-        issuedAt: string;
-        requestId?: string;
-        resources?: string[];
-      };
-    };
+    siwe?: SIWEMessage;
   };
   type: TransactionType;
   custodyId?: string;

ui/pages/confirmations/utils/confirm.ts

@@ -46,7 +46,7 @@ export const parseSanitizeTypedDataMessage = (dataToParse: string) => {
 };
 
 export const isSIWESignatureRequest = (request: SignatureRequestType) =>
-  request.msgParams?.siwe?.isSIWEMessage;
+  request?.msgParams?.siwe?.isSIWEMessage;
 
 export const isPermitSignatureRequest = (request: SignatureRequestType) => {
   if (