Show message on UI when blockaid validation fails

app/components/UI/BlockaidBanner/BlockaidBanner.styles.ts

@@ -30,6 +30,11 @@ const styleSheet = (_params: {
     },
     details: { marginLeft: 10, marginBottom: 10 },
     securityTickIcon: { marginTop: 4 },
+    failed: {
+      marginTop: 10,
+      marginLeft: 10,
+      marginRight: 10,
+    },
   });
 
 export default styleSheet;

app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx

@@ -170,7 +170,7 @@ describe('BlockaidBanner', () => {
       <BlockaidBanner
         securityAlertResponse={{
           result_type: ResultType.Failed,
-          reason: Reason.rawSignatureFarming,
+          reason: Reason.failed,
           features: mockFeatures,
         }}
       />,

app/components/UI/BlockaidBanner/BlockaidBanner.tsx

@@ -72,11 +72,13 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => {
 
   if (result_type === ResultType.Failed) {
     return (
-      <BannerAlert
-        severity={BannerAlertSeverity.Warning}
-        title={title}
-        description={description}
-      />
+      <View style={styles.failed}>
+        <BannerAlert
+          severity={BannerAlertSeverity.Warning}
+          title={title}
+          description={description}
+        />
+      </View>
     );
   }
 

app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap

@@ -726,76 +726,88 @@ exports[`BlockaidBanner should render correctly with reason "raw_signature_farmi
 
 exports[`BlockaidBanner should render normal banner alert if resultType is failed 1`] = `
 <View
+  collapsable={false}
+  forwardedRef={[Function]}
   style={
     Object {
-      "backgroundColor": "#FFD33D19",
-      "borderColor": "#F66A0A",
-      "borderLeftWidth": 4,
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "padding": 12,
-      "paddingLeft": 8,
+      "marginLeft": 10,
+      "marginRight": 10,
+      "marginTop": 10,
     }
   }
-  testID="banneralert"
 >
   <View
     style={
       Object {
-        "marginRight": 8,
-      }
-    }
-  >
-    <SvgMock
-      color="#F66A0A"
-      height={24}
-      name="Danger"
-      style={
-        Object {
-          "height": 24,
-          "width": 24,
-        }
-      }
-      width={24}
-    />
-  </View>
-  <View
-    style={
-      Object {
-        "flex": 1,
+        "backgroundColor": "#FFD33D19",
+        "borderColor": "#F66A0A",
+        "borderLeftWidth": 4,
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "padding": 12,
+        "paddingLeft": 8,
       }
     }
+    testID="banneralert"
   >
-    <Text
-      accessibilityRole="text"
+    <View
       style={
         Object {
-          "color": "#24272A",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 16,
-          "fontWeight": "500",
-          "letterSpacing": 0,
-          "lineHeight": 24,
+          "marginRight": 8,
         }
       }
     >
-      This is a suspicious request
-    </Text>
-    <Text
-      accessibilityRole="text"
+      <SvgMock
+        color="#F66A0A"
+        height={24}
+        name="Danger"
+        style={
+          Object {
+            "height": 24,
+            "width": 24,
+          }
+        }
+        width={24}
+      />
+    </View>
+    <View
       style={
         Object {
-          "color": "#24272A",
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
+          "flex": 1,
         }
       }
     >
-      If you approve this request, you might lose your assets.
-    </Text>
+      <Text
+        accessibilityRole="text"
+        style={
+          Object {
+            "color": "#24272A",
+            "fontFamily": "Euclid Circular B",
+            "fontSize": 16,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 24,
+          }
+        }
+      >
+        Request may not be safe
+      </Text>
+      <Text
+        accessibilityRole="text"
+        style={
+          Object {
+            "color": "#24272A",
+            "fontFamily": "Euclid Circular B",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Because of an error, this request was not verified by the security provider. Proceed with caution.
+      </Text>
+    </View>
   </View>
 </View>
 `;

app/lib/ppom/ppom-util.ts

@@ -1,6 +1,10 @@
 import Logger from '../../util/Logger';
 import Engine from '../../core/Engine';
 import { isBlockaidFeatureEnabled } from '../../util/blockaid';
+import {
+  Reason,
+  ResultType,
+} from '../../components/UI/BlockaidBanner/BlockaidBanner.types';
 
 const ConfirmationMethods = Object.freeze([
   'eth_sendRawTransaction',
@@ -30,6 +34,11 @@ const validateRequest = async (req: any) => {
     return result;
   } catch (e) {
     Logger.log(`Error validating JSON RPC using PPOM: ${e}`);
+    return {
+      result_type: ResultType.Failed,
+      reason: Reason.failed,
+      description: 'Validating the confirmation failed by throwing error.',
+    };
     return;
   }
 };