Use localized strings for MetaMetrics opt-in page (#9593)

The MetaMetrics opt-in page during onboarding now uses localized
strings. This allows us to add translations.

app/_locales/en/messages.json

@@ -967,6 +967,37 @@
   "metamaskVersion": {
     "message": "MetaMask Version"
   },
+  "metametricsCommitmentsAllowOptOut": {
+    "message": "Always allow you to opt-out via Settings"
+  },
+  "metametricsCommitmentsBoldNever": {
+    "message": "Never",
+    "description": "This string is localized separately from some of the commitments so that we can bold it"
+  },
+  "metametricsCommitmentsIntro": {
+    "message": "MetaMask will.."
+  },
+  "metametricsCommitmentsNeverCollectIP": {
+    "message": "$1 collect your full IP address",
+    "description": "The $1 is the bolded word 'Never', from 'metametricsCommitmentsBoldNever'"
+  },
+  "metametricsCommitmentsNeverCollectKeysEtc": {
+    "message": "$1 collect keys, addresses, transactions, balances, hashes, or any personal information",
+    "description": "The $1 is the bolded word 'Never', from 'metametricsCommitmentsBoldNever'"
+  },
+  "metametricsCommitmentsNeverSellDataForProfit": {
+    "message": "$1 sell data for profit. Ever!",
+    "description": "The $1 is the bolded word 'Never', from 'metametricsCommitmentsBoldNever'"
+  },
+  "metametricsCommitmentsSendAnonymizedEvents": {
+    "message": "Send anonymized click & pageview events"
+  },
+  "metametricsHelpImproveMetaMask": {
+    "message": "Help Us Improve MetaMask"
+  },
+  "metametricsOptInDescription": {
+    "message": "MetaMask would like to gather usage data to better understand how our users interact with the extension. This data will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem."
+  },
   "mobileSyncText": {
     "message": "Please enter your password to confirm it's you!"
   },

ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js

@@ -34,45 +34,71 @@ export default class MetaMetricsOptIn extends Component {
           <div className="metametrics-opt-in__body-graphic">
             <img src="images/metrics-chart.svg" />
           </div>
-          <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div>
+          <div className="metametrics-opt-in__title">{t('metametricsHelpImproveMetaMask')}</div>
           <div className="metametrics-opt-in__body">
             <div className="metametrics-opt-in__description">
-             MetaMask would like to gather usage data to better understand how our users interact with the extension. This data
-             will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem.
+              {t('metametricsOptInDescription')}
             </div>
             <div className="metametrics-opt-in__description">
-             MetaMask will..
+              {t('metametricsCommitmentsIntro')}
             </div>
 
             <div className="metametrics-opt-in__committments">
               <div className="metametrics-opt-in__row">
                 <i className="fa fa-check" />
                 <div className="metametrics-opt-in__row-description">
-                  Always allow you to opt-out via Settings
+                  {t('metametricsCommitmentsAllowOptOut')}
                 </div>
               </div>
               <div className="metametrics-opt-in__row">
                 <i className="fa fa-check" />
                 <div className="metametrics-opt-in__row-description">
-                  Send anonymized click & pageview events
+                  {t('metametricsCommitmentsSendAnonymizedEvents')}
                 </div>
               </div>
               <div className="metametrics-opt-in__row metametrics-opt-in__break-row">
                 <i className="fa fa-times" />
                 <div className="metametrics-opt-in__row-description">
-                  <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information
+                  {
+                    t(
+                      'metametricsCommitmentsNeverCollectKeysEtc',
+                      [(
+                        <span className="metametrics-opt-in__bold" key="neverCollectKeys">
+                          {t('metametricsCommitmentsBoldNever')}
+                        </span>
+                      )],
+                    )
+                  }
                 </div>
               </div>
               <div className="metametrics-opt-in__row">
                 <i className="fa fa-times" />
                 <div className="metametrics-opt-in__row-description">
-                  <span className="metametrics-opt-in__bold">Never</span> collect your full IP address
+                  {
+                    t(
+                      'metametricsCommitmentsNeverCollectIP',
+                      [(
+                        <span className="metametrics-opt-in__bold" key="neverCollectKeys">
+                          {t('metametricsCommitmentsBoldNever')}
+                        </span>
+                      )],
+                    )
+                  }
                 </div>
               </div>
               <div className="metametrics-opt-in__row">
                 <i className="fa fa-times" />
                 <div className="metametrics-opt-in__row-description">
-                  <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever!
+                  {
+                    t(
+                      'metametricsCommitmentsNeverSellDataForProfit',
+                      [(
+                        <span className="metametrics-opt-in__bold" key="neverCollectKeys">
+                          {t('metametricsCommitmentsBoldNever')}
+                        </span>
+                      )],
+                    )
+                  }
                 </div>
               </div>
             </div>