From e6038d542a4a9adb2c49f0f46b50184c72ed9a0c Mon Sep 17 00:00:00 2001
From: Filip Sekulic <filip.sekulic@consensys.net>
Date: Wed, 4 Jan 2023 22:59:48 +0100
Subject: [PATCH] Update UI for transaction security check in settings (#16830)

---
 app/_locales/en/messages.json                 |  16 ++-
 test/e2e/tests/settings-search.spec.js        |   2 +-
 .../experimental-tab.component.js             | 103 +++++++++++++-----
 ui/pages/settings/index.scss                  |  11 +-
 4 files changed, 102 insertions(+), 30 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 94bf01ff0..eca87bc0a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2101,6 +2101,9 @@
   "mobileSyncWarning": {
     "message": "The 'Sync with extension' feature is temporarily disabled. If you want to use your extension wallet on MetaMask mobile, then on your mobile app: go back to the wallet setup options and select the 'Import with Secret Recovery Phrase' option. Use your extension wallet's secret phrase to then import your wallet into mobile."
   },
+  "moreComingSoon": {
+    "message": "More coming soon..."
+  },
   "mustSelectOne": {
     "message": "Must select at least 1 token."
   },
@@ -2686,6 +2689,9 @@
   "openInBlockExplorer": {
     "message": "Open in block explorer"
   },
+  "openSea": {
+    "message": "OpenSea (Beta)"
+  },
   "optional": {
     "message": "Optional"
   },
@@ -3237,6 +3243,9 @@
   "selectPathHelp": {
     "message": "If you don't see the accounts you expect, try switching the HD path."
   },
+  "selectProvider": {
+    "message": "Select providers:"
+  },
   "selectType": {
     "message": "Select Type"
   },
@@ -4085,6 +4094,9 @@
   "thingsToKeep": {
     "message": "Things to keep in mind:"
   },
+  "thisServiceIsExperimental": {
+    "message": "This service is experimental"
+  },
   "thisWillCreate": {
     "message": "This will create a new wallet and Secret Recovery Phrase"
   },
@@ -4254,10 +4266,10 @@
     "message": "Transaction resubmitted with estimated gas fee increased to $1 at $2"
   },
   "transactionSecurityCheck": {
-    "message": "Transaction security check"
+    "message": "Enable transaction security providers"
   },
   "transactionSecurityCheckDescription": {
-    "message": "Turn this on to enable a third party (OpenSea) to review all your transactions and signature requests and warn you about known malicious requests."
+    "message": "We use third-party APIs to detect and display risks involved in unsigned transaction and signature requests before you sign them. These services will have access to your unsigned transaction and signature requests, your account address,  and your preferred language."
   },
   "transactionSubmitted": {
     "message": "Transaction submitted with estimated gas fee of $1 at $2."
diff --git a/test/e2e/tests/settings-search.spec.js b/test/e2e/tests/settings-search.spec.js
index 52c00dfaf..d694a34bf 100644
--- a/test/e2e/tests/settings-search.spec.js
+++ b/test/e2e/tests/settings-search.spec.js
@@ -19,7 +19,7 @@ describe('Settings Search', function () {
     security: 'Reveal Secret',
     alerts: 'Browsing a website',
     networks: 'Ethereum Mainnet',
-    experimental: 'Transaction security check',
+    experimental: 'Enable transaction security',
     about: 'Terms of Use',
   };
 
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index c2fb225c3..bd9dab471 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -6,6 +6,12 @@ import {
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
 import { EVENT } from '../../../../shared/constants/metametrics';
+import Typography from '../../../components/ui/typography/typography';
+import {
+  COLORS,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system';
 
 export default class ExperimentalTab extends PureComponent {
   static contextTypes = {
@@ -142,34 +148,79 @@ export default class ExperimentalTab extends PureComponent {
     } = this.props;
 
     return (
-      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{t('transactionSecurityCheck')}</span>
-          <div className="settings-page__content-description">
-            {t('transactionSecurityCheckDescription')}
+      <>
+        <Typography
+          variant={TYPOGRAPHY.H4}
+          color={COLORS.TEXT_ALTERNATIVE}
+          marginBottom={2}
+          fontWeight={FONT_WEIGHT.BOLD}
+        >
+          {t('privacy')}
+        </Typography>
+        <div
+          ref={this.settingsRefs[1]}
+          className="settings-page__content-row settings-page__content-row-experimental"
+        >
+          <div className="settings-page__content-item">
+            <span>{t('transactionSecurityCheck')}</span>
+            <div className="settings-page__content-description">
+              <Typography
+                variant={TYPOGRAPHY.H6}
+                color={COLORS.TEXT_ALTERNATIVE}
+              >
+                {t('transactionSecurityCheckDescription')}
+              </Typography>
+              <Typography
+                marginTop={3}
+                marginBottom={1}
+                variant={TYPOGRAPHY.H6}
+                color={COLORS.TEXT_ALTERNATIVE}
+              >
+                {t('selectProvider')}
+              </Typography>
+              <div className="settings-page__content-item-col settings-page__content-item-col-open-sea">
+                <Typography
+                  variant={TYPOGRAPHY.H5}
+                  color={COLORS.TEXT_DEFAULT}
+                  fontWeight={FONT_WEIGHT.MEDIUM}
+                  marginBottom={0}
+                >
+                  {t('openSea')}
+                </Typography>
+                <ToggleButton
+                  value={transactionSecurityCheckEnabled}
+                  onToggle={(value) => {
+                    this.context.trackEvent({
+                      category: EVENT.CATEGORIES.SETTINGS,
+                      event: 'Enabled/Disable TransactionSecurityCheck',
+                      properties: {
+                        action: 'Enabled/Disable TransactionSecurityCheck',
+                        legacy_event: true,
+                      },
+                    });
+                    setTransactionSecurityCheckEnabled(!value);
+                  }}
+                />
+              </div>
+              <Typography
+                variant={TYPOGRAPHY.H6}
+                color={COLORS.TEXT_ALTERNATIVE}
+                marginTop={0}
+              >
+                {t('thisServiceIsExperimental')}
+              </Typography>
+              <Typography
+                variant={TYPOGRAPHY.H5}
+                color={COLORS.TEXT_MUTED}
+                fontWeight={FONT_WEIGHT.MEDIUM}
+                marginTop={2}
+              >
+                {t('moreComingSoon')}
+              </Typography>
+            </div>
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={transactionSecurityCheckEnabled}
-              onToggle={(value) => {
-                this.context.trackEvent({
-                  category: EVENT.CATEGORIES.SETTINGS,
-                  event: 'Enabled/Disable TransactionSecurityCheck',
-                  properties: {
-                    action: 'Enabled/Disable TransactionSecurityCheck',
-                    legacy_event: true,
-                  },
-                });
-                setTransactionSecurityCheckEnabled(!value);
-              }}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
-        </div>
-      </div>
+      </>
     );
   }
 
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index 431220080..b0af004aa 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -350,6 +350,10 @@
     }
   }
 
+  &__content-row-experimental {
+    padding: 10px 0 0 12px;
+  }
+
   &__content-label {
     text-transform: capitalize;
   }
@@ -364,7 +368,6 @@
     @include H6;
 
     color: var(--color-text-alternative);
-    padding-top: 5px;
 
     a {
       color: var(--color-primary-default);
@@ -382,6 +385,12 @@
     }
   }
 
+  &__content-item-col-open-sea {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 4px;
+  }
+
   &__button {
     cursor: pointer;
   }