Update UI for transaction security check in settings (#16830)

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."

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',
   };
 

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,15 +148,45 @@ export default class ExperimentalTab extends PureComponent {
     } = this.props;
 
     return (
-      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+      <>
+        <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')}
-          </div>
+              </Typography>
-        </div>
+              <Typography
-        <div className="settings-page__content-item">
+                marginTop={3}
-          <div className="settings-page__content-item-col">
+                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) => {
@@ -164,12 +200,27 @@ export default class ExperimentalTab extends PureComponent {
                     });
                     setTransactionSecurityCheckEnabled(!value);
                   }}
-              offLabel={t('off')}
-              onLabel={t('on')}
                 />
               </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>
+      </>
     );
   }
 

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;
   }