From 731efcb36d0fde8c12b0ae2e9f28499636870cc3 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Thu, 4 Jun 2020 12:28:21 -0230
Subject: [PATCH] Move terms of use strings into localized messages (#8736)

---
 app/_locales/en/messages.json                 |  4 ++++
 .../import-with-seed-phrase.component.js      | 23 +++++++++++--------
 .../new-account/new-account.component.js      | 23 +++++++++++--------
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 6ec3bb0e2..f86498776 100644
--- a/app/_locales/en/messages.json
+++ b/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"
diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
index b138d7e33..f62af2d1d 100644
--- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
@@ -268,16 +268,19 @@ 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;
-            <a
-              href="https://metamask.io/terms.html"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="first-time-flow__link-text">
-                { t('terms') }
-              </span>
-            </a>
+            {t('acceptTermsOfUse', [(
+              <a
+                onClick={(e) => e.stopPropagation()}
+                key="first-time-flow__link-text"
+                href="https://metamask.io/terms.html"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <span className="first-time-flow__link-text">
+                  { t('terms') }
+                </span>
+              </a>
+            )])}
           </span>
         </div>
         <Button
diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
index 7b99542c2..35d0922b1 100644
--- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
+++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
@@ -204,16 +204,19 @@ 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;
-              <a
-                href="https://metamask.io/terms.html"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span className="first-time-flow__link-text">
-                  { t('terms') }
-                </span>
-              </a>
+              {t('acceptTermsOfUse', [(
+                <a
+                  onClick={(e) => e.stopPropagation()}
+                  key="first-time-flow__link-text"
+                  href="https://metamask.io/terms.html"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="first-time-flow__link-text">
+                    { t('terms') }
+                  </span>
+                </a>
+              )])}
             </span>
           </div>
           <Button