Move terms of use strings into localized messages (#8736)

app/_locales/en/messages.json

@@ -1,4 +1,8 @@
 {
+  "acceptTermsOfUse": {
+    "message": "I have read and agree to the $1",
+    "description": "$1 is the `terms` message"
+  },
   "eth_accounts": {
     "message": "View the addresses of your permitted accounts (required)",
     "description": "The description for the `eth_accounts` permission"

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -268,8 +268,10 @@ export default class ImportWithSeedPhrase extends PureComponent {
             {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
           </div>
           <span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
-            I have read and agree to the&nbsp;
+            {t('acceptTermsOfUse', [(
               <a
+                onClick={(e) => e.stopPropagation()}
+                key="first-time-flow__link-text"
                 href="https://metamask.io/terms.html"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -278,6 +280,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
                   { t('terms') }
                 </span>
               </a>
+            )])}
           </span>
         </div>
         <Button

ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js

@@ -204,8 +204,10 @@ export default class NewAccount extends PureComponent {
               {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
             </div>
             <span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
-              I have read and agree to the&nbsp;
+              {t('acceptTermsOfUse', [(
                 <a
+                  onClick={(e) => e.stopPropagation()}
+                  key="first-time-flow__link-text"
                   href="https://metamask.io/terms.html"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -214,6 +216,7 @@ export default class NewAccount extends PureComponent {
                     { t('terms') }
                   </span>
                 </a>
+              )])}
             </span>
           </div>
           <Button