From 8807d06535b414b7b7b8abbef5917ce5d42ec627 Mon Sep 17 00:00:00 2001
From: Ariella Vu <20778143+digiwand@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:06:46 +0200
Subject: [PATCH] Security Alert Blockaid: fix propType and add instance to
 ConfirmApprove page (#20494)

* fix: SecurityProviderBannerAlert propTypes

* feat: add ConfirmApprove BlockaidBannerAlert
---
 .../security-provider-banner-alert.js          |  4 ++--
 .../confirm-approve-content.component.js       | 10 ++++++++++
 .../confirm-approve-content.component.test.js  | 18 ++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js
index 5e115c193..d79b6eb35 100644
--- a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js
+++ b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js
@@ -83,7 +83,7 @@ SecurityProviderBannerAlert.propTypes = {
     .isRequired,
 
   /** Severity level */
-  severity: PropTypes.oneOfType([Severity.Danger, Severity.Warning]).isRequired,
+  severity: PropTypes.oneOf([Severity.Danger, Severity.Warning]).isRequired,
 
   /** Title to be passed as <BannerAlert> param */
   title: PropTypes.string.isRequired,
@@ -96,7 +96,7 @@ SecurityProviderBannerAlert.propTypes = {
   details: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
   /** Name of the security provider */
-  provider: PropTypes.oneOfType(Object.values(SecurityProvider)),
+  provider: PropTypes.oneOf(Object.values(SecurityProvider)),
 };
 
 export default SecurityProviderBannerAlert;
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index b25933c8b..817450231 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -22,6 +22,9 @@ import {
 } from '../../../helpers/constants/design-system';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
 import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
+///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+import BlockaidBannerAlert from '../../../components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
+///: END:ONLY_INCLUDE_IN
 import { isSuspiciousResponse } from '../../../../shared/modules/security-provider.utils';
 
 import { TokenStandard } from '../../../../shared/constants/transaction';
@@ -551,6 +554,13 @@ export default class ConfirmApproveContent extends Component {
           'confirm-approve-content--full': showFullTxDetails,
         })}
       >
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
+          <BlockaidBannerAlert
+            securityAlertResponse={txData?.securityAlertResponse}
+          />
+          ///: END:ONLY_INCLUDE_IN
+        }
         {isSuspiciousResponse(txData?.securityProviderResponse) && (
           <SecurityProviderBannerMessage
             securityProviderResponse={txData.securityProviderResponse}
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
index bb5cfcd36..20d27f86e 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
@@ -3,6 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import { fireEvent } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import { TokenStandard } from '../../../../shared/constants/transaction';
+import { BlockaidResultType } from '../../../../shared/constants/security-provider';
 import ConfirmApproveContent from '.';
 
 const renderComponent = (props) => {
@@ -343,4 +344,21 @@ describe('ConfirmApproveContent Component', () => {
 
     expect(getByText(securityProviderResponse.reason)).toBeInTheDocument();
   });
+
+  it('should render security alert if provided', () => {
+    const mockSecurityAlertResponse = {
+      result_type: BlockaidResultType.Malicious,
+      reason: 'blur_farming',
+    };
+
+    const { getByText } = renderComponent({
+      ...props,
+      txData: {
+        ...props.txData,
+        securityAlertResponse: mockSecurityAlertResponse,
+      },
+    });
+
+    expect(getByText('This is a deceptive request')).toBeInTheDocument();
+  });
 });