Add template for settings and info

app/_locales/en/messages.json

@@ -619,6 +619,9 @@
   "ropsten": {
     "message": "Ropsten Test Network"
   },
+  "currentRpc": {
+    "message": "Current RPC"
+  },
   "connectingToMainnet": {
     "message": "Connecting to Main Ethereum Network"
   },
@@ -687,6 +690,9 @@
   "settings": {
     "message": "Settings"
   },
+  "info": {
+    "message": "Info"
+  },
   "shapeshiftBuy": {
     "message": "Buy with Shapeshift"
   },
@@ -723,6 +729,9 @@
   "stateLogsDescription": {
     "message": "State logs contain your public account addresses and sent transactions."
   },
+  "stateLogError": {
+    "message": "Error in retrieving state logs."
+  },
   "submit": {
     "message": "Submit"
   },

ui/app/settings.js

@@ -10,6 +10,7 @@ const TabBar = require('./components/tab-bar')
 const SimpleDropdown = require('./components/dropdowns/simple-dropdown')
 const ToggleButton = require('react-toggle-button')
 const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
+const t = require('../i18n')
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -44,8 +45,8 @@ class Settings extends Component {
     return h('div.settings__tabs', [
       h(TabBar, {
         tabs: [
-          { content: 'Settings', key: 'settings' },
-          { content: 'Info', key: 'info' },
+          { content: t('settings'), key: 'settings' },
+          { content: t('info'), key: 'info' },
         ],
         defaultTab: activeTab,
         tabSelected: key => this.setState({ activeTab: key }),
@@ -84,7 +85,7 @@ class Settings extends Component {
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
           h(SimpleDropdown, {
-            placeholder: 'Select Currency',
+            placeholder: t('selectCurrency'),
             options: getInfuraCurrencyOptions(),
             selectedOption: currentCurrency,
             onSelect: newCurrency => setCurrentCurrency(newCurrency),
@@ -101,31 +102,31 @@ class Settings extends Component {
     switch (provider.type) {
 
       case 'mainnet':
-        title = 'Current Network'
-        value = 'Main Ethereum Network'
+        title = t('currentNetwork')
+        value = t('mainnet')
         color = '#038789'
         break
 
       case 'ropsten':
-        title = 'Current Network'
-        value = 'Ropsten Test Network'
+        title = t('currentNetwork')
+        value = t('ropsten')
         color = '#e91550'
         break
 
       case 'kovan':
-        title = 'Current Network'
-        value = 'Kovan Test Network'
+        title = t('currentNetwork')
+        value = t('kovan')
         color = '#690496'
         break
 
       case 'rinkeby':
-        title = 'Current Network'
-        value = 'Rinkeby Test Network'
+        title = t('currentNetwork')
+        value = t('rinkeby')
         color = '#ebb33f'
         break
 
       default:
-        title = 'Current RPC'
+        title = t('currentRpc')
         value = provider.rpcTarget
     }
 
@@ -146,12 +147,12 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('span', 'New RPC URL'),
+          h('span', t('newRPC')),
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('input.settings__input', {
-              placeholder: 'New RPC URL',
+              placeholder: t('newRPC'),
               onChange: event => this.setState({ newRpc: event.target.value }),
               onKeyPress: event => {
                 if (event.key === 'Enter') {
@@ -164,7 +165,7 @@ class Settings extends Component {
                 event.preventDefault()
                 this.validateRpc(this.state.newRpc)
               },
-            }, 'Save'),
+            }, t('save')),
           ]),
         ]),
       ])
@@ -180,9 +181,9 @@ class Settings extends Component {
       const appendedRpc = `http://${newRpc}`
 
       if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning('URIs require the appropriate HTTP/HTTPS prefix.')
+        displayWarning(t('uriErrorMsg'))
       } else {
-        displayWarning('Invalid RPC URI')
+        displayWarning(t('invalidRPC'))
       }
     }
   }
@@ -194,7 +195,7 @@ class Settings extends Component {
           h('div', 'State Logs'),
           h(
             'div.settings__content-description',
-            'State logs contain your public account addresses and sent transactions.'
+            t('stateLogsDescription')
           ),
         ]),
         h('div.settings__content-item', [
@@ -203,13 +204,13 @@ class Settings extends Component {
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
-                    this.state.dispatch(actions.displayWarning('Error in retrieving state logs.'))
+                    this.state.dispatch(actions.displayWarning(t('stateLogError')))
                   } else {
                     exportAsFile('MetaMask State Logs.json', result)
                   }
                 })
               },
-            }, 'Download State Logs'),
+            }, t('downloadStateLogs')),
           ]),
         ]),
       ])
@@ -229,7 +230,7 @@ class Settings extends Component {
                 event.preventDefault()
                 revealSeedConfirmation()
               },
-            }, 'Reveal Seed Words'),
+            }, t('revealSeedWords')),
           ]),
         ]),
       ])
@@ -249,7 +250,7 @@ class Settings extends Component {
                 event.preventDefault()
                 setFeatureFlagToBeta()
               },
-            }, 'Use old UI'),
+            }, t('useOldUI')),
           ]),
         ]),
       ])
@@ -268,7 +269,7 @@ class Settings extends Component {
               event.preventDefault()
               showResetAccountConfirmationModal()
             },
-          }, 'Reset Account'),
+          }, t('resetAccount')),
         ]),
       ]),
     ])
@@ -445,3 +446,4 @@ const mapDispatchToProps = dispatch => {
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings)
+