Fixing unlocalized strings (#11281)

app/_locales/en/messages.json

@@ -150,6 +150,9 @@
   "amount": {
     "message": "Amount"
   },
+  "amountGasFee": {
+    "message": "Amount + Gas Fee"
+  },
   "amountWithColon": {
     "message": "Amount:"
   },
@@ -492,6 +495,9 @@
   "customToken": {
     "message": "Custom Token"
   },
+  "data": {
+    "message": "Data"
+  },
   "dataBackupFoundInfo": {
     "message": "Some of your account data was backed up during a previous installation of MetaMask. This could include your settings, contacts, and tokens. Would you like to restore this data now?"
   },
@@ -777,6 +783,9 @@
   "functionType": {
     "message": "Function Type"
   },
+  "gasFee": {
+    "message": "Gas Fee"
+  },
   "gasLimit": {
     "message": "Gas Limit"
   },
@@ -1355,6 +1364,9 @@
   "onlyConnectTrust": {
     "message": "Only connect with sites you trust."
   },
+  "optional": {
+    "message": "Optional"
+  },
   "optionalBlockExplorerUrl": {
     "message": "Block Explorer URL (optional)"
   },
@@ -2189,6 +2201,9 @@
   "symbolBetweenZeroTwelve": {
     "message": "Symbol must be 11 characters or fewer."
   },
+  "syncInProgress": {
+    "message": "Sync in progress"
+  },
   "syncWithMobile": {
     "message": "Sync with mobile"
   },

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -7,6 +7,10 @@ import { PageContainerFooter } from '../../../ui/page-container';
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
 
 export default class ConfirmPageContainerContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+  };
+
   static propTypes = {
     action: PropTypes.string,
     dataComponent: PropTypes.node,
@@ -44,14 +48,18 @@ export default class ConfirmPageContainerContent extends Component {
   }
 
   renderTabs() {
+    const { t } = this.context;
     const { detailsComponent, dataComponent } = this.props;
 
     return (
       <Tabs>
-        <Tab className="confirm-page-container-content__tab" name="Details">
+        <Tab
+          className="confirm-page-container-content__tab"
+          name={t('details')}
+        >
           {detailsComponent}
         </Tab>
-        <Tab className="confirm-page-container-content__tab" name="Data">
+        <Tab className="confirm-page-container-content__tab" name={t('data')}>
           {dataComponent}
         </Tab>
       </Tabs>

ui/components/app/modals/loading-network-error/loading-network-error.component.js

@@ -8,7 +8,7 @@ const LoadingNetworkError = (props, context) => {
 
   return (
     <Modal onSubmit={() => hideModal()} submitText={t('tryAgain')}>
-      <ModalContent description="Oops! Something went wrong." />
+      <ModalContent description={t('somethingWentWrong')} />
     </Modal>
   );
 };

ui/components/app/transaction-breakdown/transaction-breakdown.component.js

@@ -46,7 +46,7 @@ export default class TransactionBreakdown extends PureComponent {
     return (
       <div className={classnames('transaction-breakdown', className)}>
         <div className="transaction-breakdown__title">{t('transaction')}</div>
-        <TransactionBreakdownRow title="Nonce">
+        <TransactionBreakdownRow title={t('nonce')}>
           {typeof nonce === 'undefined' ? null : (
             <HexToDecimal
               className="transaction-breakdown__value"

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -280,6 +280,7 @@ export default class ConfirmTransactionBase extends Component {
       isEthGasPrice,
       noGasPrice,
     } = this.props;
+    const { t } = this.context;
 
     const notMainnetOrTest = !(isMainnet || process.env.IN_TEST);
     const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
@@ -288,7 +289,7 @@ export default class ConfirmTransactionBase extends Component {
       <div className="confirm-page-container-content__details">
         <div className="confirm-page-container-content__gas-fee">
           <ConfirmDetailRow
-            label="Gas Fee"
+            label={t('gasFee')}
             value={hexTransactionFee}
             headerText={notMainnetOrTest || gasPriceFetchFailure ? '' : 'Edit'}
             headerTextClassName={
@@ -302,9 +303,7 @@ export default class ConfirmTransactionBase extends Component {
                 : () => this.handleEditGas()
             }
             secondaryText={
-              hideFiatConversion
-                ? this.context.t('noConversionRateAvailable')
-                : ''
+              hideFiatConversion ? t('noConversionRateAvailable') : ''
             }
           />
           {advancedInlineGasShown ||
@@ -336,15 +335,15 @@ export default class ConfirmTransactionBase extends Component {
           }
         >
           <ConfirmDetailRow
-            label="Total"
+            label={t('total')}
             value={hexTransactionTotal}
             primaryText={primaryTotalTextOverride}
             secondaryText={
               hideFiatConversion
-                ? this.context.t('noConversionRateAvailable')
+                ? t('noConversionRateAvailable')
                 : secondaryTotalTextOverride
             }
-            headerText="Amount + Gas Fee"
+            headerText={t('amountGasFee')}
             headerTextClassName="confirm-detail-row__header-text--total"
             primaryValueTextColor="#2f9ae0"
           />
@@ -353,7 +352,7 @@ export default class ConfirmTransactionBase extends Component {
           <div>
             <div className="confirm-detail-row">
               <div className="confirm-detail-row__label">
-                {this.context.t('nonceFieldHeading')}
+                {t('nonceFieldHeading')}
               </div>
               <div className="custom-nonce-input">
                 <TextField

ui/pages/mobile-sync/mobile-sync.component.js

@@ -296,7 +296,7 @@ export default class MobileSyncPage extends Component {
     const { t } = this.context;
 
     if (syncing) {
-      return <LoadingScreen loadingMessage="Sync in progress" />;
+      return <LoadingScreen loadingMessage={t('syncInProgress')} />;
     }
 
     if (completed) {

ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js

@@ -32,7 +32,7 @@ export default class SendHexDataRow extends Component {
       >
         <textarea
           onInput={this.onInput}
-          placeholder="Optional"
+          placeholder={t('optional')}
           className="send-v2__hex-data__input"
         />
       </SendRowWrapper>