Update the copy for the Flask welcome page (#13223) (#13244)

* Update the copy for the Flask welcome page (#13223)

* Update the copy for the Flask welcome page

The copy for the Flask Welcome page has been updated to better dissuade
users who are not the target audience, and to better explain the risks
of using Flask.

* Fix typo

* Suggested edits (#13225)

* Suggested edits

* fixup! Suggested edits

Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>

* Update app/_locales/en/messages.json

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Co-authored-by: David Walsh <davidwalsh83@gmail.com>

app/_locales/en/messages.json

@@ -1126,21 +1126,6 @@
     "message": "File import not working? Click here!",
     "description": "Helps user import their account from a JSON file"
   },
-  "flaskExperimentalText1": {
-    "message": "Using Flask can greatly increase your risk of fund loss:"
-  },
-  "flaskExperimentalText2": {
-    "message": "if you use it to install non-trustworthy Snaps"
-  },
-  "flaskExperimentalText3": {
-    "message": "if you do not review confirmations before approving changes"
-  },
-  "flaskExperimentalText4": {
-    "message": "if you interact with unfamiliar smart contracts"
-  },
-  "flaskExperimentalText5": {
-    "message": "Using Flask gives you much greater discretion in using the power of MetaMask, and that discretion is yours. Do you accept these risks as well as extra responsibility for your wallet's safety?"
-  },
   "flaskSnapSettingsCardButtonCta": {
     "message": "See details",
     "description": "Call to action a user can take to see more information about the Snap that is installed"
@@ -1153,6 +1138,26 @@
     "message": "from",
     "description": "Part of the sentence describing when and where snap was added"
   },
+  "flaskWelcomeUninstall": {
+    "message": "you should uninstall this extension",
+    "description": "This request is shown on the Flask Welcome screen. It is intended for non-developers, and will be bolded."
+  },
+  "flaskWelcomeWarning1": {
+    "message": "Flask is for developers to experiment with new unstable APIs. Unless you are a developer or beta tester, $1.",
+    "description": "This is a warning shown on the Flask Welcome screen, intended to encourage non-developers not to proceed any further. $1 is the bolded message 'flaskWelcomeUninstall'"
+  },
+  "flaskWelcomeWarning2": {
+    "message": "We do not guarantee the safety or stability of this extension. The new APIs offered by Flask are not hardened against phishing attacks, meaning that any site or snap that requires Flask might be a malicious attempt to steal your assets.",
+    "description": "This explains the risks of using MetaMask Flask"
+  },
+  "flaskWelcomeWarning3": {
+    "message": "All Flask APIs are experimental. They may be changed or removed without notice, or they might stay on Flask indefinitely without ever being migrated to stable MetaMask. Use them at your own risk.",
+    "description": "This message warns developers about unstable Flask APIs"
+  },
+  "flaskWelcomeWarningAcceptButton": {
+    "message": "I accept the risks",
+    "description": "this text is shown on a button, which the user presses to confirm they understand the risks of using Flask"
+  },
   "followUsOnTwitter": {
     "message": "Follow us on Twitter"
   },
@@ -3385,9 +3390,6 @@
   "usedByClients": {
     "message": "Used by a variety of different clients"
   },
-  "userAccepts": {
-    "message": "I accept"
-  },
   "userName": {
     "message": "Username"
   },

ui/components/app/flask/experimental-area/experimental-area.js

@@ -77,16 +77,18 @@ export default function ExperimentalArea({ redirectTo }) {
       <div className="logo">{METAMASK_LOGO}</div>
       <div className="experimental-text">{EXPERIMENTAL_AREA}</div>
       <div className="text">
-        {t('flaskExperimentalText1')}
-        <ul>
-          <li>{t('flaskExperimentalText2')}</li>
-          <li>{t('flaskExperimentalText3')}</li>
-          <li>{t('flaskExperimentalText4')}</li>
-        </ul>
-        {t('flaskExperimentalText5')}
+        <p>
+          {t('flaskWelcomeWarning1', [
+            <b key="doNotUse">{t('flaskWelcomeUninstall')}</b>,
+          ])}
+        </p>
+        <br />
+        <p>{t('flaskWelcomeWarning2')}</p>
+        <br />
+        <p>{t('flaskWelcomeWarning3')}</p>
       </div>
       <Button type="primary" onClick={onClick}>
-        {t('userAccepts')}
+        {t('flaskWelcomeWarningAcceptButton')}
       </Button>
     </div>
   );

ui/components/app/flask/experimental-area/index.scss

@@ -28,6 +28,10 @@
 
     padding: 16px;
     max-width: 670px;
+
+    b {
+      font-weight: bold;
+    }
   }
 
   ul {