Merge tag 'v4.5.5'

# Conflicts:
#	app/_locales/ja/messages.json
#	package-lock.json

messages.jsonのローカライズ

75 files changed, 1331 insertions, 564 deletions

diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index fc9031a65..52d3dcde9 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -1,43 +1,44 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
-const t = require('../../../i18n')
 import Select from 'react-select'
 
 // Subviews
 const JsonImportView = require('./json.js')
 const PrivateKeyImportView = require('./private-key.js')
 
-const menuItems = [
-  t('privateKey'),
-  t('jsonFile'),
-]
 
-module.exports = connect(mapStateToProps)(AccountImportSubview)
-
-function mapStateToProps (state) {
-  return {
-    menuItems,
-  }
+AccountImportSubview.contextTypes = {
+  t: PropTypes.func,
 }
 
+module.exports = connect()(AccountImportSubview)
+
+
 inherits(AccountImportSubview, Component)
 function AccountImportSubview () {
   Component.call(this)
 }
 
+AccountImportSubview.prototype.getMenuItemTexts = function () {
+  return [
+    this.context.t('privateKey'),
+    this.context.t('jsonFile'),
+  ]
+}
+
 AccountImportSubview.prototype.render = function () {
-  const props = this.props
   const state = this.state || {}
-  const { menuItems } = props
+  const menuItems = this.getMenuItemTexts()
   const { type } = state
 
   return (
     h('div.new-account-import-form', [
 
       h('.new-account-import-disclaimer', [
-        h('span', t('importAccountMsg')),
+        h('span', this.context.t('importAccountMsg')),
         h('span', {
           style: {
             cursor: 'pointer',
@@ -48,12 +49,12 @@ AccountImportSubview.prototype.render = function () {
               url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
             })
           },
-        }, t('here')),
+        }, this.context.t('here')),
       ]),
 
       h('div.new-account-import-form__select-section', [
 
-        h('div.new-account-import-form__select-label', t('selectType')),
+        h('div.new-account-import-form__select-label', this.context.t('selectType')),
 
         h(Select, {
           className: 'new-account-import-form__select',
@@ -79,16 +80,15 @@ AccountImportSubview.prototype.render = function () {
 }
 
 AccountImportSubview.prototype.renderImportView = function () {
-  const props = this.props
   const state = this.state || {}
   const { type } = state
-  const { menuItems } = props
+  const menuItems = this.getMenuItemTexts()
   const current = type || menuItems[0]
 
   switch (current) {
-    case t('privateKey'):
+    case this.context.t('privateKey'):
       return h(PrivateKeyImportView)
-    case t('jsonFile'):
+    case this.context.t('jsonFile'):
       return h(JsonImportView)
     default:
       return h(JsonImportView)
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index eeba73e77..e53c1c9ca 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const FileInput = require('react-simple-file-input').default
-const t = require('../../../i18n')
+
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
@@ -24,11 +24,11 @@ class JsonImportSubview extends Component {
     return (
       h('div.new-account-import-form__json', [
 
-        h('p', t('usedByClients')),
+        h('p', this.context.t('usedByClients')),
         h('a.warning', {
           href: HELP_LINK,
           target: '_blank',
-        }, t('fileImportFail')),
+        }, this.context.t('fileImportFail')),
 
         h(FileInput, {
           readAs: 'text',
@@ -43,7 +43,7 @@ class JsonImportSubview extends Component {
 
         h('input.new-account-import-form__input-password', {
           type: 'password',
-          placeholder: t('enterPassword'),
+          placeholder: this.context.t('enterPassword'),
           id: 'json-password-box',
           onKeyPress: this.createKeyringOnEnter.bind(this),
         }),
@@ -53,13 +53,13 @@ class JsonImportSubview extends Component {
           h('button.btn-secondary.new-account-create-form__button', {
             onClick: () => this.props.goHome(),
           }, [
-            t('cancel'),
+            this.context.t('cancel'),
           ]),
 
           h('button.btn-primary.new-account-create-form__button', {
             onClick: () => this.createNewKeychain(),
           }, [
-            t('import'),
+            this.context.t('import'),
           ]),
 
         ]),
@@ -84,14 +84,14 @@ class JsonImportSubview extends Component {
     const state = this.state
 
     if (!state) {
-      const message = t('validFileImport')
+      const message = this.context.t('validFileImport')
       return this.props.displayWarning(message)
     }
 
     const { fileContents } = state
 
     if (!fileContents) {
-      const message = t('needImportFile')
+      const message = this.context.t('needImportFile')
       return this.props.displayWarning(message)
     }
 
@@ -99,7 +99,7 @@ class JsonImportSubview extends Component {
     const password = passwordInput.value
 
     if (!password) {
-      const message = t('needImportPassword')
+      const message = this.context.t('needImportPassword')
       return this.props.displayWarning(message)
     }
 
@@ -112,6 +112,7 @@ JsonImportSubview.propTypes = {
   goHome: PropTypes.func,
   displayWarning: PropTypes.func,
   importNewJsonAccount: PropTypes.func,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -128,4 +129,9 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+JsonImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
+
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index 13c8da722..0d2898cda 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -1,12 +1,17 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+
+PrivateKeyImportView.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
 
+
 function mapStateToProps (state) {
   return {
     error: state.appState.warning,
@@ -25,6 +30,7 @@ function mapDispatchToProps (dispatch) {
 
 inherits(PrivateKeyImportView, Component)
 function PrivateKeyImportView () {
+  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
   Component.call(this)
 }
 
@@ -34,14 +40,14 @@ PrivateKeyImportView.prototype.render = function () {
   return (
     h('div.new-account-import-form__private-key', [
 
-      h('span.new-account-create-form__instruction', t('pastePrivateKey')),
+      h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')),
 
       h('div.new-account-import-form__private-key-password-container', [
 
         h('input.new-account-import-form__input-password', {
           type: 'password',
           id: 'private-key-box',
-          onKeyPress: () => this.createKeyringOnEnter(),
+          onKeyPress: e => this.createKeyringOnEnter(e),
         }),
 
       ]),
@@ -51,13 +57,13 @@ PrivateKeyImportView.prototype.render = function () {
         h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => goHome(),
         }, [
-          t('cancel'),
+          this.context.t('cancel'),
         ]),
 
         h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => this.createNewKeychain(),
         }, [
-          t('import'),
+          this.context.t('import'),
         ]),
 
       ]),
diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js
index 9ffc669a2..d98909baa 100644
--- a/ui/app/accounts/import/seed.js
+++ b/ui/app/accounts/import/seed.js
@@ -1,11 +1,16 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
-const t = require('../../../i18n')
+
+SeedImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps)(SeedImportSubview)
 
+
 function mapStateToProps (state) {
   return {}
 }
@@ -21,10 +26,10 @@ SeedImportSubview.prototype.render = function () {
       style: {
       },
     }, [
-      t('pasteSeed'),
+      this.context.t('pasteSeed'),
       h('textarea'),
       h('br'),
-      h('button', t('submit')),
+      h('button', this.context.t('submit')),
     ])
   )
 }
diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js
index c820cdf6d..48c74192a 100644
--- a/ui/app/accounts/new-account/create-form.js
+++ b/ui/app/accounts/new-account/create-form.js
@@ -1,12 +1,11 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
 
 class NewAccountCreateForm extends Component {
-  constructor (props) {
+  constructor (props, context) {
     super(props)
 
     const { numberOfExistingAccounts = 0 } = props
@@ -14,7 +13,7 @@ class NewAccountCreateForm extends Component {
 
     this.state = {
       newAccountName: '',
-      defaultAccountName: t('newAccountNumberName', [newAccountNumber]),
+      defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]),
     }
   }
 
@@ -25,7 +24,7 @@ class NewAccountCreateForm extends Component {
     return h('div.new-account-create-form', [
 
       h('div.new-account-create-form__input-label', {}, [
-        t('accountName'),
+        this.context.t('accountName'),
       ]),
 
       h('div.new-account-create-form__input-wrapper', {}, [
@@ -41,13 +40,13 @@ class NewAccountCreateForm extends Component {
         h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => this.props.goHome(),
         }, [
-          t('cancel'),
+          this.context.t('cancel'),
         ]),
 
         h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
         }, [
-          t('create'),
+          this.context.t('create'),
         ]),
 
       ]),
@@ -62,6 +61,7 @@ NewAccountCreateForm.propTypes = {
   createAccount: PropTypes.func,
   goHome: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -97,4 +97,9 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+NewAccountCreateForm.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
+
diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js
index 854568c77..207cf7760 100644
--- a/ui/app/accounts/new-account/index.js
+++ b/ui/app/accounts/new-account/index.js
@@ -1,9 +1,9 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
 const { getCurrentViewContext } = require('../../selectors')
 const classnames = require('classnames')
 
@@ -37,8 +37,13 @@ function AccountDetailsModal (props) {
   }
 }
 
+AccountDetailsModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
+
 AccountDetailsModal.prototype.render = function () {
   const { displayedForm, displayForm } = this.props
 
@@ -46,7 +51,7 @@ AccountDetailsModal.prototype.render = function () {
 
     h('div.new-account__header', [
 
-      h('div.new-account__title', t('newAccount')),
+      h('div.new-account__title', this.context.t('newAccount')),
 
       h('div.new-account__tabs', [
 
@@ -56,7 +61,7 @@ AccountDetailsModal.prototype.render = function () {
             'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
           }),
           onClick: () => displayForm('CREATE'),
-        }, t('createDen')),
+        }, this.context.t('createDen')),
 
         h('div.new-account__tabs__tab', {
           className: classnames('new-account__tabs__tab', {
@@ -64,7 +69,7 @@ AccountDetailsModal.prototype.render = function () {
             'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
           }),
           onClick: () => displayForm('IMPORT'),
-        }, t('import')),
+        }, this.context.t('import')),
 
       ]),
 
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 4a5962610..ad4270cef 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -2,6 +2,7 @@ const abi = require('human-standard-token-abi')
 const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
 const { getTokenAddressFromTokenObject } = require('./util')
 const ethUtil = require('ethereumjs-util')
+const { fetchLocale } = require('../i18n-helper')
 
 var actions = {
   _setBackgroundConnection: _setBackgroundConnection,
@@ -23,7 +24,7 @@ var actions = {
   NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
   showNetworkDropdown: showNetworkDropdown,
   hideNetworkDropdown: hideNetworkDropdown,
-  // menu state
+  // menu state/
   getNetworkStatus: 'getNetworkStatus',
   // transition state
   TRANSITION_FORWARD: 'TRANSITION_FORWARD',
@@ -254,6 +255,13 @@ var actions = {
   SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
   setUseBlockie,
 
+  // locale
+  SET_CURRENT_LOCALE: 'SET_CURRENT_LOCALE',
+  SET_LOCALE_MESSAGES: 'SET_LOCALE_MESSAGES',
+  setCurrentLocale,
+  updateCurrentLocale,
+  setLocaleMessages,
+  //
   // Feature Flags
   setFeatureFlag,
   updateFeatureFlags,
@@ -1292,7 +1300,7 @@ function retryTransaction (txId) {
 
 function setProviderType (type) {
   return (dispatch) => {
-    log.debug(`background.setProviderType`)
+    log.debug(`background.setProviderType`, type)
     background.setProviderType(type, (err, result) => {
       if (err) {
         log.error(err)
@@ -1313,13 +1321,14 @@ function updateProviderType (type) {
 }
 
 function setRpcTarget (newRpc) {
-  log.debug(`background.setRpcTarget: ${newRpc}`)
   return (dispatch) => {
+    log.debug(`background.setRpcTarget: ${newRpc}`)
     background.setCustomRpc(newRpc, (err, result) => {
       if (err) {
         log.error(err)
         return dispatch(self.displayWarning('Had a problem changing networks!'))
       }
+      dispatch(actions.setSelectedToken())
     })
   }
 }
@@ -1792,6 +1801,38 @@ function setUseBlockie (val) {
   }
 }
 
+function updateCurrentLocale (key) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    fetchLocale(key)
+      .then((localeMessages) => {
+        log.debug(`background.setCurrentLocale`)
+        background.setCurrentLocale(key, (err) => {
+          dispatch(actions.hideLoadingIndication())
+          if (err) {
+            return dispatch(actions.displayWarning(err.message))
+          }
+          dispatch(actions.setCurrentLocale(key))
+          dispatch(actions.setLocaleMessages(localeMessages))
+        })
+      })
+  }
+}
+
+function setCurrentLocale (key) {
+  return {
+    type: actions.SET_CURRENT_LOCALE,
+    value: key,
+  }
+}
+
+function setLocaleMessages (localeMessages) {
+  return {
+    type: actions.SET_LOCALE_MESSAGES,
+    value: localeMessages,
+  }
+}
+
 function setNetworkEndpoints (networkEndpointType) {
   return dispatch => {
     log.debug('background.setNetworkEndpoints')
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index b4ea4a532..46564a5e5 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -2,6 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const classnames = require('classnames')
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const R = require('ramda')
 const Fuse = require('fuse.js')
@@ -26,12 +27,16 @@ const fuse = new Fuse(contractList, {
 const actions = require('./actions')
 const ethUtil = require('ethereumjs-util')
 const { tokenInfoGetter } = require('./token-util')
-const t = require('../i18n')
 
 const emptyAddr = '0x0000000000000000000000000000000000000000'
 
+AddTokenScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen)
 
+
 function mapStateToProps (state) {
   const { identities, tokens } = state.metamask
   return {
@@ -51,6 +56,7 @@ inherits(AddTokenScreen, Component)
 function AddTokenScreen () {
   this.state = {
     isShowingConfirmation: false,
+    isShowingInfoBox: true,
     customAddress: '',
     customSymbol: '',
     customDecimals: '',
@@ -140,28 +146,31 @@ AddTokenScreen.prototype.validate = function () {
   if (customAddress) {
     const validAddress = ethUtil.isValidAddress(customAddress)
     if (!validAddress) {
-      errors.customAddress = t('invalidAddress')
+      errors.customAddress = this.context.t('invalidAddress')
     }
 
-    const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36
+    const validDecimals = customDecimals !== null
+      && customDecimals !== ''
+      && customDecimals >= 0
+      && customDecimals < 36
     if (!validDecimals) {
-      errors.customDecimals = t('decimalsMustZerotoTen')
+      errors.customDecimals = this.context.t('decimalsMustZerotoTen')
     }
 
     const symbolLen = customSymbol.trim().length
     const validSymbol = symbolLen > 0 && symbolLen < 10
     if (!validSymbol) {
-      errors.customSymbol = t('symbolBetweenZeroTen')
+      errors.customSymbol = this.context.t('symbolBetweenZeroTen')
     }
 
     const ownAddress = identitiesList.includes(standardAddress)
     if (ownAddress) {
-      errors.customAddress = t('personalAddressDetected')
+      errors.customAddress = this.context.t('personalAddressDetected')
     }
 
     const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
     if (tokenAlreadyAdded) {
-      errors.customAddress = t('tokenAlreadyAdded')
+      errors.customAddress = this.context.t('tokenAlreadyAdded')
     }
   } else if (
     Object.entries(selectedTokens)
@@ -169,7 +178,7 @@ AddTokenScreen.prototype.validate = function () {
         isEmpty && !isSelected
       ), true)
   ) {
-    errors.tokenSelector = t('mustSelectOne')
+    errors.tokenSelector = this.context.t('mustSelectOne')
   }
 
   return {
@@ -199,7 +208,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customAddress,
         }),
       }, [
-        h('div.add-token__add-custom-label', t('tokenAddress')),
+        h('div.add-token__add-custom-label', this.context.t('tokenAddress')),
         h('input.add-token__add-custom-input', {
           type: 'text',
           onChange: this.tokenAddressDidChange,
@@ -212,7 +221,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customSymbol,
         }),
       }, [
-        h('div.add-token__add-custom-label', t('tokenSymbol')),
+        h('div.add-token__add-custom-label', this.context.t('tokenSymbol')),
         h('input.add-token__add-custom-input', {
           type: 'text',
           onChange: this.tokenSymbolDidChange,
@@ -226,7 +235,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
           'add-token__add-custom-field--error': errors.customDecimals,
         }),
       }, [
-        h('div.add-token__add-custom-label', t('decimal')),
+        h('div.add-token__add-custom-label', this.context.t('decimal')),
         h('input.add-token__add-custom-input', {
           type: 'number',
           onChange: this.tokenDecimalsDidChange,
@@ -248,7 +257,7 @@ AddTokenScreen.prototype.renderTokenList = function () {
   const results = [...addressSearchResult, ...fuseSearchResult]
 
   return h('div', [
-      results.length > 0 && h('div.add-token__token-icons-title', t('popularTokens')),
+      results.length > 0 && h('div.add-token__token-icons-title', this.context.t('popularTokens')),
       h('div.add-token__token-icons-container', Array(6).fill(undefined)
         .map((_, i) => {
           const { logo, symbol, name, address } = results[i] || {}
@@ -302,11 +311,8 @@ AddTokenScreen.prototype.renderConfirmation = function () {
   return (
     h('div.add-token', [
       h('div.add-token__wrapper', [
-        h('div.add-token__title-container.add-token__confirmation-title', [
-          h('div.add-token__description', t('likeToAddTokens')),
-        ]),
         h('div.add-token__content-container.add-token__confirmation-content', [
-          h('div.add-token__description.add-token__confirmation-description', t('balances')),
+          h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')),
           h('div.add-token__confirmation-token-list',
             Object.entries(tokens)
               .map(([ address, token ]) => (
@@ -325,10 +331,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
       h('div.add-token__buttons', [
         h('button.btn-secondary--lg.add-token__cancel-button', {
           onClick: () => this.setState({ isShowingConfirmation: false }),
-        }, t('back')),
+        }, this.context.t('back')),
         h('button.btn-primary--lg', {
           onClick: () => addTokens(tokens).then(goHome),
-        }, t('addTokens')),
+        }, this.context.t('addTokens')),
       ]),
     ])
   )
@@ -339,23 +345,28 @@ AddTokenScreen.prototype.displayTab = function (selectedTab) {
 }
 
 AddTokenScreen.prototype.renderTabs = function () {
-  const { displayedTab, errors } = this.state
+  const { isShowingInfoBox, displayedTab, errors } = this.state
 
   return displayedTab === 'CUSTOM_TOKEN'
     ? this.renderCustomForm()
     : h('div', [
     h('div.add-token__wrapper', [
       h('div.add-token__content-container', [
-        h('div.add-token__info-box', [
-          h('div.add-token__info-box__close'),
-          h('div.add-token__info-box__title', t('whatsThis')),
-          h('div.add-token__info-box__copy', t('keepTrackTokens')),
-          h('div.add-token__info-box__copy--blue', t('learnMore')),
+        isShowingInfoBox && h('div.add-token__info-box', [
+          h('div.add-token__info-box__close', {
+            onClick: () => this.setState({ isShowingInfoBox: false }),
+          }),
+          h('div.add-token__info-box__title', this.context.t('whatsThis')),
+          h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
+          h('a.add-token__info-box__copy--blue', {
+            href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens',
+            target: '_blank',
+          }, this.context.t('learnMore')),
         ]),
         h('div.add-token__input-container', [
           h('input.add-token__input', {
             type: 'text',
-            placeholder: t('searchTokens'),
+            placeholder: this.context.t('searchTokens'),
             onChange: e => this.setState({ searchQuery: e.target.value }),
           }),
           h('div.add-token__search-input-error-message', errors.tokenSelector),
@@ -379,26 +390,27 @@ AddTokenScreen.prototype.render = function () {
         onClick: () => goHome(),
       }, [
         h('i.fa.fa-angle-left.fa-lg'),
-        h('span', t('cancel')),
+        h('span', this.context.t('cancel')),
       ]),
-      h('div.add-token__header__title', t('addTokens')),
+      h('div.add-token__header__title', this.context.t('addTokens')),
+      isShowingConfirmation && h('div.add-token__header__subtitle', this.context.t('likeToAddTokens')),
       !isShowingConfirmation && h('div.add-token__header__tabs', [
 
         h('div.add-token__header__tabs__tab', {
           className: classnames('add-token__header__tabs__tab', {
             'add-token__header__tabs__selected': displayedTab === 'SEARCH',
-            'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'SEARCH',
+            'add-token__header__tabs__unselected': displayedTab !== 'SEARCH',
           }),
           onClick: () => this.displayTab('SEARCH'),
-        }, t('search')),
+        }, this.context.t('search')),
 
         h('div.add-token__header__tabs__tab', {
           className: classnames('add-token__header__tabs__tab', {
             'add-token__header__tabs__selected': displayedTab === 'CUSTOM_TOKEN',
-            'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'CUSTOM_TOKEN',
+            'add-token__header__tabs__unselected': displayedTab !== 'CUSTOM_TOKEN',
           }),
           onClick: () => this.displayTab('CUSTOM_TOKEN'),
-        }, t('customToken')),
+        }, this.context.t('customToken')),
 
       ]),
     ]),
@@ -410,10 +422,10 @@ AddTokenScreen.prototype.render = function () {
     !isShowingConfirmation && h('div.add-token__buttons', [
       h('button.btn-secondary--lg.add-token__cancel-button', {
         onClick: goHome,
-      }, t('cancel')),
+      }, this.context.t('cancel')),
       h('button.btn-primary--lg.add-token__confirm-button', {
         onClick: this.onNext,
-      }, t('next')),
+      }, this.context.t('next')),
     ]),
   ])
 }
diff --git a/ui/app/app.js b/ui/app/app.js
index d1b17ab5d..0b7a7a1e0 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -2,9 +2,9 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const actions = require('./actions')
 const classnames = require('classnames')
-const t = require('../i18n')
 
 // mascara
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default
@@ -46,8 +46,13 @@ const QrView = require('./components/qr-code')
 // Global Modals
 const Modal = require('./components/modals/index').Modal
 
+App.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(App)
 
+
 inherits(App, Component)
 function App () { Component.call(this) }
 
@@ -289,13 +294,13 @@ App.prototype.renderAppBar = function () {
             h('img.metafox-icon', {
               height: 42,
               width: 42,
-              src: '/images/metamask-fox.svg',
+              src: './images/metamask-fox.svg',
             }),
 
             // metamask name
             h('.flex-row', [
-              h('h1', t('appName')),
-              h('div.beta-label', t('beta')),
+              h('h1', this.context.t('appName')),
+              h('div.beta-label', this.context.t('beta')),
             ]),
           ]),
 
@@ -557,15 +562,15 @@ App.prototype.getConnectingLabel = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = t('connectingToMainnet')
+    name = this.context.t('connectingToMainnet')
   } else if (providerName === 'ropsten') {
-    name = t('connectingToRopsten')
+    name = this.context.t('connectingToRopsten')
   } else if (providerName === 'kovan') {
-    name = t('connectingToRopsten')
+    name = this.context.t('connectingToRopsten')
   } else if (providerName === 'rinkeby') {
-    name = t('connectingToRinkeby')
+    name = this.context.t('connectingToRinkeby')
   } else {
-    name = t('connectingToUnknown')
+    name = this.context.t('connectingToUnknown')
   }
 
   return name
@@ -578,15 +583,15 @@ App.prototype.getNetworkName = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = t('mainnet')
+    name = this.context.t('mainnet')
   } else if (providerName === 'ropsten') {
-    name = t('ropsten')
+    name = this.context.t('ropsten')
   } else if (providerName === 'kovan') {
-    name = t('kovan')
+    name = this.context.t('kovan')
   } else if (providerName === 'rinkeby') {
-    name = t('rinkeby')
+    name = this.context.t('rinkeby')
   } else {
-    name = t('unknownNetwork')
+    name = this.context.t('unknownNetwork')
   }
 
   return name
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 1612d7b6a..03955e077 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -9,7 +9,6 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
 
 class AccountDropdowns extends Component {
   constructor (props) {
@@ -80,7 +79,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
     } catch (e) { return }
   }
 
@@ -130,7 +129,7 @@ class AccountDropdowns extends Component {
                 diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t('createAccount')),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')),
           ],
         ),
         h(
@@ -155,7 +154,7 @@ class AccountDropdowns extends Component {
                 fontSize: '24px',
                 marginBottom: '5px',
               },
-            }, t('importAccount')),
+            }, this.context.t('importAccount')),
           ]
         ),
       ]
@@ -193,7 +192,7 @@ class AccountDropdowns extends Component {
               global.platform.openWindow({ url })
             },
           },
-          t('etherscanView'),
+          this.context.t('etherscanView'),
         ),
         h(
           DropdownMenuItem,
@@ -205,7 +204,7 @@ class AccountDropdowns extends Component {
               actions.showQrView(selected, identity ? identity.name : '')
             },
           },
-          t('showQRCode'),
+          this.context.t('showQRCode'),
         ),
         h(
           DropdownMenuItem,
@@ -217,7 +216,7 @@ class AccountDropdowns extends Component {
               copyToClipboard(checkSumAddress)
             },
           },
-          t('copyAddress'),
+          this.context.t('copyAddress'),
         ),
         h(
           DropdownMenuItem,
@@ -227,7 +226,7 @@ class AccountDropdowns extends Component {
               actions.requestAccountExport()
             },
           },
-          t('exportPrivateKey'),
+          this.context.t('exportPrivateKey'),
         ),
       ]
     )
@@ -301,6 +300,7 @@ AccountDropdowns.propTypes = {
   style: PropTypes.object,
   enableAccountOptions: PropTypes.bool,
   enableAccountsSelector: PropTypes.bool,
+    t: PropTypes.func,
 }
 
 const mapDispatchToProps = (dispatch) => {
@@ -316,6 +316,10 @@ const mapDispatchToProps = (dispatch) => {
   }
 }
 
+AccountDropdowns.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = {
   AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
 }
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 5637bc8d0..865207487 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -1,15 +1,20 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const inherits = require('util').inherits
 const exportAsFile = require('../util').exportAsFile
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
 const connect = require('react-redux').connect
-const t = require('../../i18n')
+
+ExportAccountView.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps)(ExportAccountView)
 
+
 inherits(ExportAccountView, Component)
 function ExportAccountView () {
   Component.call(this)
@@ -36,7 +41,7 @@ ExportAccountView.prototype.render = function () {
   if (notExporting) return h('div')
 
   if (exportRequested) {
-    const warning = t('exportPrivateKeyWarning')
+    const warning = this.context.t('exportPrivateKeyWarning')
     return (
       h('div', {
         style: {
@@ -54,7 +59,7 @@ ExportAccountView.prototype.render = function () {
             h('p.error', warning),
             h('input#exportAccount.sizing-input', {
               type: 'password',
-              placeholder: t('confirmPassword').toLowerCase(),
+              placeholder: this.context.t('confirmPassword').toLowerCase(),
               onKeyPress: this.onExportKeyPress.bind(this),
               style: {
                 position: 'relative',
@@ -75,10 +80,10 @@ ExportAccountView.prototype.render = function () {
                 style: {
                   marginRight: '10px',
                 },
-              }, t('submit')),
+              }, this.context.t('submit')),
               h('button', {
                 onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-              }, t('cancel')),
+              }, this.context.t('cancel')),
             ]),
           (this.props.warning) && (
           h('span.error', {
@@ -99,7 +104,7 @@ ExportAccountView.prototype.render = function () {
         margin: '0 20px',
       },
     }, [
-      h('label', t('copyPrivateKey') + ':'),
+      h('label', this.context.t('copyPrivateKey') + ':'),
       h('p.error.cursor-pointer', {
         style: {
           textOverflow: 'ellipsis',
@@ -113,13 +118,13 @@ ExportAccountView.prototype.render = function () {
       }, plainKey),
       h('button', {
         onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-      }, t('done')),
+      }, this.context.t('done')),
       h('button', {
         style: {
           marginLeft: '10px',
         },
         onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
-      }, t('saveAsFile')),
+      }, this.context.t('saveAsFile')),
     ])
   }
 }
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index e838e8916..21de358d6 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -1,15 +1,20 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const t = require('../../../i18n')
+
+AccountMenu.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
 
+
 inherits(AccountMenu, Component)
 function AccountMenu () { Component.call(this) }
 
@@ -71,10 +76,10 @@ AccountMenu.prototype.render = function () {
     h(Item, {
       className: 'account-menu__header',
     }, [
-      t('myAccounts'),
+      this.context.t('myAccounts'),
       h('button.account-menu__logout-button', {
         onClick: lockMetamask,
-      }, t('logout')),
+      }, this.context.t('logout')),
     ]),
     h(Divider),
     h('div.account-menu__accounts', this.renderAccounts()),
@@ -82,23 +87,23 @@ AccountMenu.prototype.render = function () {
     h(Item, {
       onClick: () => showNewAccountPage('CREATE'),
       icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
-      text: t('createAccount'),
+      text: this.context.t('createAccount'),
     }),
     h(Item, {
       onClick: () => showNewAccountPage('IMPORT'),
       icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
-      text: t('importAccount'),
+      text: this.context.t('importAccount'),
     }),
     h(Divider),
     h(Item, {
       onClick: showInfoPage,
       icon: h('img', { src: 'images/mm-info-icon.svg' }),
-      text: t('infoHelp'),
+      text: this.context.t('infoHelp'),
     }),
     h(Item, {
       onClick: showConfigPage,
       icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
-      text: t('settings'),
+      text: this.context.t('settings'),
     }),
   ])
 }
@@ -156,6 +161,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) {
   try { // Sometimes keyrings aren't loaded yet:
     const type = keyring.type
     const isLoose = type !== 'HD Key Tree'
-    return isLoose ? h('.keyring-label.allcaps', t('imported')) : null
+    return isLoose ? h('.keyring-label.allcaps', this.context.t('imported')) : null
   } catch (e) { return }
 }
diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 70701b039..9a033f893 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
-const t = require('../../i18n')
+const connect = require('react-redux').connect
+
+BnAsDecimalInput.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(BnAsDecimalInput)
 
-module.exports = BnAsDecimalInput
 
 inherits(BnAsDecimalInput, Component)
 function BnAsDecimalInput () {
@@ -137,13 +143,13 @@ BnAsDecimalInput.prototype.constructWarning = function () {
   let message = name ? name + ' ' : ''
 
   if (min && max) {
-    message += t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
+    message += this.context.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
   } else if (min) {
-    message += t('greaterThanMin', [`${newMin} ${suffix}`])
+    message += this.context.t('greaterThanMin', [`${newMin} ${suffix}`])
   } else if (max) {
-    message += t('lessThanMax', [`${newMax} ${suffix}`])
+    message += this.context.t('lessThanMax', [`${newMax} ${suffix}`])
   } else {
-    message += t('invalidInput')
+    message += this.context.t('invalidInput')
   }
 
   return message
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 1e277a94b..9ac565cf4 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
@@ -9,10 +10,14 @@ const Loading = require('./loading')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const networkNames = require('../../../app/scripts/config.js').networkNames
-const t = require('../../i18n')
+
+BuyButtonSubview.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
+
 function mapStateToProps (state) {
   return {
     identity: state.appState.identity,
@@ -77,7 +82,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
             paddingTop: '4px',
             paddingBottom: '4px',
           },
-        }, t('depositEth')),
+        }, this.context.t('depositEth')),
       ]),
 
       // loading indication
@@ -119,7 +124,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
             paddingTop: '4px',
             paddingBottom: '4px',
           },
-        }, t('selectService')),
+        }, this.context.t('selectService')),
       ]),
 
     ])
@@ -144,7 +149,7 @@ BuyButtonSubview.prototype.primarySubview = function () {
     case '4':
     case '42':
       const networkName = networkNames[network]
-      const label = `${networkName} ${t('testFaucet')}`
+      const label = `${networkName} ${this.context.t('testFaucet')}`
       return (
         h('div.flex-column', {
           style: {
@@ -165,14 +170,14 @@ BuyButtonSubview.prototype.primarySubview = function () {
               style: {
                 marginTop: '15px',
               },
-            }, t('borrowDharma'))
+            }, this.context.t('borrowDharma'))
           ) : null,
       ])
     )
 
     default:
       return (
-        h('h2.error', t('unknownNetworkId'))
+        h('h2.error', this.context.t('unknownNetworkId'))
       )
 
   }
@@ -204,8 +209,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
             'ShapeShift',
           ],
           subtext: {
-            'Coinbase': `${t('crypto')}/${t('fiat')} (${t('usaOnly')})`,
-            'ShapeShift': t('crypto'),
+            'Coinbase': `${this.context.t('crypto')}/${this.context.t('fiat')} (${this.context.t('usaOnly')})`,
+            'ShapeShift': this.context.t('crypto'),
           },
           onClick: this.radioHandler.bind(this),
         }),
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index e442b43d5..d5915292e 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -1,12 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../actions')
-const t = require('../../i18n')
+
+CoinbaseForm.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 
+
 function mapStateToProps (state) {
   return {
     warning: state.appState.warning,
@@ -38,11 +43,11 @@ CoinbaseForm.prototype.render = function () {
     }, [
       h('button.btn-green', {
         onClick: this.toCoinbase.bind(this),
-      }, t('continueToCoinbase')),
+      }, this.context.t('continueToCoinbase')),
 
       h('button.btn-red', {
         onClick: () => props.dispatch(actions.goHome()),
-      }, t('cancel')),
+      }, this.context.t('cancel')),
     ]),
   ])
 }
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index 355f78d45..a60d33523 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
+const connect = require('react-redux').connect
 
 const Tooltip = require('./tooltip')
 
-module.exports = CopyButton
+CopyButton.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(CopyButton)
+
 
 inherits(CopyButton, Component)
 function CopyButton () {
@@ -23,7 +29,7 @@ CopyButton.prototype.render = function () {
   const value = props.value
   const copied = state.copied
 
-  const message = copied ? t('copiedButton') : props.title || t('copyButton')
+  const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton')
 
   return h('.copy-button', {
     style: {
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
index fca7d3863..ad504deb8 100644
--- a/ui/app/components/copyable.js
+++ b/ui/app/components/copyable.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
 const Tooltip = require('./tooltip')
 const copyToClipboard = require('copy-to-clipboard')
-const t = require('../../i18n')
+const connect = require('react-redux').connect
+
+Copyable.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(Copyable)
 
-module.exports = Copyable
 
 inherits(Copyable, Component)
 function Copyable () {
@@ -23,7 +29,7 @@ Copyable.prototype.render = function () {
   const { copied } = state
 
   return h(Tooltip, {
-    title: copied ? t('copiedExclamation') : t('copy'),
+    title: copied ? this.context.t('copiedExclamation') : this.context.t('copy'),
     position: 'bottom',
   }, h('span', {
     style: {
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 22ad98ce4..4c693d1c3 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -1,9 +1,9 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
 const GasModalCard = require('./gas-modal-card')
 
 const ethUtil = require('ethereumjs-util')
@@ -65,6 +65,7 @@ function mapDispatchToProps (dispatch) {
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
   }
 }
 
@@ -95,8 +96,13 @@ function CustomizeGasModal (props) {
   this.state = getOriginalState(props)
 }
 
+CustomizeGasModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
 
+
 CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
   const {
     updateGasPrice,
@@ -107,6 +113,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
     selectedToken,
     balance,
     updateSendAmount,
+    updateSendErrors,
   } = this.props
 
   if (maxModeOn && !selectedToken) {
@@ -121,6 +128,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
   updateGasPrice(ethUtil.addHexPrefix(gasPrice))
   updateGasLimit(ethUtil.addHexPrefix(gasLimit))
   updateGasTotal(ethUtil.addHexPrefix(gasTotal))
+  updateSendErrors({ insufficientFunds: false })
   hideModal()
 }
 
@@ -150,7 +158,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
   })
 
   if (!balanceIsSufficient) {
-    error = t('balanceIsInsufficientGas')
+    error = this.context.t('balanceIsInsufficientGas')
   }
 
   const gasLimitTooLow = gasLimit && conversionGreaterThan(
@@ -166,7 +174,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
   )
 
   if (gasLimitTooLow) {
-    error = t('gasLimitTooLow')
+    error = this.context.t('gasLimitTooLow')
   }
 
   this.setState({ error })
@@ -259,7 +267,7 @@ CustomizeGasModal.prototype.render = function () {
     }, [
       h('div.send-v2__customize-gas__header', {}, [
 
-        h('div.send-v2__customize-gas__title', t('customGas')),
+        h('div.send-v2__customize-gas__title', this.context.t('customGas')),
 
         h('div.send-v2__customize-gas__close', {
           onClick: hideModal,
@@ -275,8 +283,8 @@ CustomizeGasModal.prototype.render = function () {
           // max: 1000,
           step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
           onChange: value => this.convertAndSetGasPrice(value),
-          title: t('gasPrice'),
-          copy: t('gasPriceCalculation'),
+          title: this.context.t('gasPrice'),
+          copy: this.context.t('gasPriceCalculation'),
         }),
 
         h(GasModalCard, {
@@ -285,8 +293,8 @@ CustomizeGasModal.prototype.render = function () {
           // max: 100000,
           step: 1,
           onChange: value => this.convertAndSetGasLimit(value),
-          title: t('gasLimit'),
-          copy: t('gasLimitCalculation'),
+          title: this.context.t('gasLimit'),
+          copy: this.context.t('gasLimitCalculation'),
         }),
 
       ]),
@@ -299,7 +307,7 @@ CustomizeGasModal.prototype.render = function () {
 
         h('div.send-v2__customize-gas__revert', {
           onClick: () => this.revert(),
-        }, [t('revert')]),
+        }, [this.context.t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
           h('button.btn-secondary.send-v2__customize-gas__cancel', {
@@ -307,12 +315,12 @@ CustomizeGasModal.prototype.render = function () {
             style: {
               marginRight: '10px',
             },
-          }, [t('cancel')]),
+          }, [this.context.t('cancel')]),
 
           h('button.btn-primary.send-v2__customize-gas__save', {
             onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
             className: error && 'btn-primary--disabled',
-          }, [t('save')]),
+          }, [this.context.t('save')]),
         ]),
 
       ]),
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index e5359c1d6..a133f0e29 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -10,7 +10,7 @@ const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
 const { formatBalance } = require('../../../util')
-const t = require('../../../../i18n')
+
 
 class AccountDropdowns extends Component {
   constructor (props) {
@@ -130,7 +130,7 @@ class AccountDropdowns extends Component {
                   actions.showEditAccountModal(identity)
                 },
               }, [
-                t('edit'),
+                this.context.t('edit'),
               ]),
             ]),
 
@@ -144,7 +144,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
     } catch (e) { return }
   }
 
@@ -202,7 +202,7 @@ class AccountDropdowns extends Component {
                 fontSize: '16px',
                 lineHeight: '23px',
               },
-            }, t('createAccount')),
+            }, this.context.t('createAccount')),
           ],
         ),
         h(
@@ -236,7 +236,7 @@ class AccountDropdowns extends Component {
                 fontSize: '16px',
                 lineHeight: '23px',
               },
-            }, t('importAccount')),
+            }, this.context.t('importAccount')),
           ]
         ),
       ]
@@ -287,7 +287,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          t('accountDetails'),
+          this.context.t('accountDetails'),
         ),
         h(
           DropdownMenuItem,
@@ -303,7 +303,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          t('etherscanView'),
+          this.context.t('etherscanView'),
         ),
         h(
           DropdownMenuItem,
@@ -319,7 +319,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          t('copyAddress'),
+          this.context.t('copyAddress'),
         ),
         h(
           DropdownMenuItem,
@@ -331,7 +331,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          t('exportPrivateKey'),
+          this.context.t('exportPrivateKey'),
         ),
         h(
           DropdownMenuItem,
@@ -346,7 +346,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          t('addToken'),
+          this.context.t('addToken'),
         ),
 
       ]
@@ -425,6 +425,7 @@ AccountDropdowns.propTypes = {
   enableAccountsSelector: PropTypes.bool,
   enableAccountOption: PropTypes.bool,
   enableAccountOptions: PropTypes.bool,
+    t: PropTypes.func,
 }
 
 const mapDispatchToProps = (dispatch) => {
@@ -463,4 +464,9 @@ function mapStateToProps (state) {
   }
 }
 
+AccountDropdowns.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
+
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 5afe730c1..9e47f38ef 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
@@ -6,9 +7,9 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
-const t = require('../../../i18n')
 const R = require('ramda')
 
+
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [
   'menu-icon',
@@ -54,8 +55,13 @@ function NetworkDropdown () {
   Component.call(this)
 }
 
+NetworkDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
 
+
 // TODO: specify default props and proptypes
 NetworkDropdown.prototype.render = function () {
   const props = this.props
@@ -94,13 +100,13 @@ NetworkDropdown.prototype.render = function () {
   }, [
 
     h('div.network-dropdown-header', {}, [
-      h('div.network-dropdown-title', {}, t('networks')),
+      h('div.network-dropdown-title', {}, this.context.t('networks')),
 
       h('div.network-dropdown-divider'),
 
       h('div.network-dropdown-content',
         {},
-        t('defaultNetwork')
+        this.context.t('defaultNetwork')
       ),
     ]),
 
@@ -122,7 +128,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
           },
-        }, t('mainnet')),
+        }, this.context.t('mainnet')),
       ]
     ),
 
@@ -144,7 +150,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
           },
-        }, t('ropsten')),
+        }, this.context.t('ropsten')),
       ]
     ),
 
@@ -166,7 +172,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
           },
-        }, t('kovan')),
+        }, this.context.t('kovan')),
       ]
     ),
 
@@ -188,7 +194,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
           },
-        }, t('rinkeby')),
+        }, this.context.t('rinkeby')),
       ]
     ),
 
@@ -197,20 +203,20 @@ NetworkDropdown.prototype.render = function () {
       {
         key: 'default',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setRpcTarget('http://localhost:8545'),
+        onClick: () => props.setProviderType('localhost'),
         style: dropdownMenuItemStyle,
       },
       [
-        activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          isSelected: activeNetwork === 'http://localhost:8545',
+          isSelected: providerType === 'localhost',
           innerBorder: '1px solid #9b9b9b',
         }),
         h('span.network-name-item', {
           style: {
-            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
+            color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b',
           },
-        }, t('localhost')),
+        }, this.context.t('localhost')),
       ]
     ),
 
@@ -234,7 +240,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
           },
-        }, t('customRPC')),
+        }, this.context.t('customRPC')),
       ]
     ),
 
@@ -249,15 +255,15 @@ NetworkDropdown.prototype.getNetworkName = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = t('mainnet')
+    name = this.context.t('mainnet')
   } else if (providerName === 'ropsten') {
-    name = t('ropsten')
+    name = this.context.t('ropsten')
   } else if (providerName === 'kovan') {
-    name = t('kovan')
+    name = this.context.t('kovan')
   } else if (providerName === 'rinkeby') {
-    name = t('rinkeby')
+    name = this.context.t('rinkeby')
   } else {
-    name = t('unknownNetwork')
+    name = this.context.t('unknownNetwork')
   }
 
   return name
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index a4f93b505..b70d0b893 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
+
+
+TokenMenuDropdown.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
 
+
 function mapDispatchToProps (dispatch) {
   return {
     showHideTokenConfirmationModal: (token) => {
@@ -44,7 +50,7 @@ TokenMenuDropdown.prototype.render = function () {
             showHideTokenConfirmationModal(this.props.token)
             this.props.onClose()
           },
-        }, t('hideToken')),
+        }, this.context.t('hideToken')),
 
       ]),
     ]),
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 1b2d4009d..feb0a7037 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const extend = require('xtend')
@@ -8,11 +9,15 @@ const ENS = require('ethjs-ens')
 const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const t = require('../../i18n')
+const connect = require('react-redux').connect
 const ToAutoComplete = require('./send/to-autocomplete')
 
+EnsInput.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(EnsInput)
 
-module.exports = EnsInput
 
 inherits(EnsInput, Component)
 function EnsInput () {
@@ -27,10 +32,10 @@ EnsInput.prototype.render = function () {
       const network = this.props.network
       const networkHasEnsSupport = getNetworkEnsSupport(network)
 
-      if (!networkHasEnsSupport) return
-
       props.onChange(recipient)
 
+      if (!networkHasEnsSupport) return
+
       if (recipient.match(ensRE) === null) {
         return this.setState({
           loadingEns: false,
@@ -71,13 +76,13 @@ EnsInput.prototype.lookupEnsName = function (recipient) {
   log.info(`ENS attempting to resolve name: ${recipient}`)
   this.ens.lookup(recipient.trim())
   .then((address) => {
-    if (address === ZERO_ADDRESS) throw new Error(t('noAddressForName'))
+    if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
     if (address !== ensResolution) {
       this.setState({
         loadingEns: false,
         ensResolution: address,
         nickname: recipient.trim(),
-        hoverText: address + '\n' + t('clickCopy'),
+        hoverText: address + '\n' + this.context.t('clickCopy'),
         ensFailure: false,
       })
     }
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index a43d44f89..75303a34a 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
-const t = require('../../i18n')
+const connect = require('react-redux').connect
+
+HexAsDecimalInput.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(HexAsDecimalInput)
 
-module.exports = HexAsDecimalInput
 
 inherits(HexAsDecimalInput, Component)
 function HexAsDecimalInput () {
@@ -127,13 +133,13 @@ HexAsDecimalInput.prototype.constructWarning = function () {
   let message = name ? name + ' ' : ''
 
   if (min && max) {
-    message += t('betweenMinAndMax', [min, max])
+    message += this.context.t('betweenMinAndMax', [min, max])
   } else if (min) {
-    message += t('greaterThanMin', [min])
+    message += this.context.t('greaterThanMin', [min])
   } else if (max) {
-    message += t('lessThanMax', [max])
+    message += this.context.t('lessThanMax', [max])
   } else {
-    message += t('invalidInput')
+    message += this.context.t('invalidInput')
   }
 
   return message
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index b803b7ceb..dce9b0449 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -47,7 +47,7 @@ IdenticonComponent.prototype.render = function () {
     )
     : (
       h('img.balance-icon', {
-        src: '../images/eth_logo.svg',
+        src: './images/eth_logo.svg',
         style: {
           height: diameter,
           width: diameter,
@@ -105,9 +105,8 @@ IdenticonComponent.prototype.componentDidUpdate = function () {
 function _generateBlockie (container, address, diameter) {
   const img = new Image()
   img.src = toDataUrl(address)
-  const dia = !diameter || diameter < 50 ? 50 : diameter
-  img.height = dia * 1.25
-  img.width = dia * 1.25
+  img.height = diameter
+  img.width = diameter
   container.appendChild(img)
 }
 
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 927d73482..d9885daf5 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
@@ -8,7 +9,6 @@ const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
-const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
@@ -34,8 +34,13 @@ function AccountDetailsModal () {
   Component.call(this)
 }
 
+AccountDetailsModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
+
 // Not yet pixel perfect todos:
   // fonts of qr-header
 
@@ -65,12 +70,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('button.btn-primary.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, t('etherscanView')),
+      }, this.context.t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-primary.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, t('exportPrivateKey')),
+      }, this.context.t('exportPrivateKey')),
 
   ])
 }
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index 08540aa76..a9856b20f 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -1,11 +1,11 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
-const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
@@ -26,8 +26,13 @@ function AccountModalContainer () {
   Component.call(this)
 }
 
+AccountModalContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
 
+
 AccountModalContainer.prototype.render = function () {
   const {
     selectedIdentity,
@@ -60,7 +65,7 @@ AccountModalContainer.prototype.render = function () {
 
         h('i.fa.fa-angle-left.fa-lg'),
 
-        h('span.account-modal-back__text', ' ' + t('back')),
+        h('span.account-modal-back__text', ' ' + this.context.t('back')),
 
       ]),
 
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 7eb73c3a6..d871e7516 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -1,10 +1,10 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
-const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
@@ -33,8 +33,13 @@ function BuyOptions () {
   Component.call(this)
 }
 
+BuyOptions.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 
+
 BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) {
   return h('div.buy-modal-content-option', {
     onClick,
@@ -57,15 +62,15 @@ BuyOptions.prototype.render = function () {
       }, [
         h('div.buy-modal-content-title', {
           style: {},
-        }, t('transfers')),
-        h('div', {}, t('howToDeposit')),
+        }, this.context.t('transfers')),
+        h('div', {}, this.context.t('howToDeposit')),
       ]),
 
       h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
         isTestNetwork
-          ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)),
+          ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)),
 
         // h('div.buy-modal-content-option', {}, [
         //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
@@ -73,8 +78,8 @@ BuyOptions.prototype.render = function () {
         // ]),,
 
         this.renderModalContentOption(
-          t('directDeposit'),
-          t('depositFromAccount'),
+          this.context.t('directDeposit'),
+          this.context.t('depositFromAccount'),
           () => this.goToAccountDetailsModal()
         ),
 
@@ -85,7 +90,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))),
     ]),
   ])
 }
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2de1240fc..0dc611f50 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -1,22 +1,19 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
-const t = require('../../../i18n')
-
-const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
-const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
-const COINBASE_ROW_TITLE = t('buyCoinbase')
-const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
-const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
-const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
-const FAUCET_ROW_TITLE = t('testFaucet')
-const facuetRowText = (networkName) => {
-  return t('getEtherFromFaucet', [networkName])
-}
+
+let DIRECT_DEPOSIT_ROW_TITLE
+let DIRECT_DEPOSIT_ROW_TEXT
+let COINBASE_ROW_TITLE
+let COINBASE_ROW_TEXT
+let SHAPESHIFT_ROW_TITLE
+let SHAPESHIFT_ROW_TEXT
+let FAUCET_ROW_TITLE
 
 function mapStateToProps (state) {
   return {
@@ -44,16 +41,34 @@ function mapDispatchToProps (dispatch) {
 }
 
 inherits(DepositEtherModal, Component)
-function DepositEtherModal () {
+function DepositEtherModal (props, context) {
   Component.call(this)
 
+  // need to set after i18n locale has loaded
+  DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther')
+  DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer')
+  COINBASE_ROW_TITLE = context.t('buyCoinbase')
+  COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer')
+  SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift')
+  SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer')
+  FAUCET_ROW_TITLE = context.t('testFaucet')
+
   this.state = {
     buyingWithShapeshift: false,
   }
 }
 
+DepositEtherModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
 
+
+DepositEtherModal.prototype.facuetRowText = function (networkName) {
+  return this.context.t('getEtherFromFaucet', [networkName])
+}
+
 DepositEtherModal.prototype.renderRow = function ({
   logo,
   title,
@@ -113,10 +128,10 @@ DepositEtherModal.prototype.render = function () {
 
     h('div.page-container__header', [
 
-      h('div.page-container__title', [t('depositEther')]),
+      h('div.page-container__title', [this.context.t('depositEther')]),
 
       h('div.page-container__subtitle', [
-        t('needEtherInWallet'),
+        this.context.t('needEtherInWallet'),
       ]),
 
       h('div.page-container__header-close', {
@@ -135,11 +150,11 @@ DepositEtherModal.prototype.render = function () {
 
         this.renderRow({
           logo: h('img.deposit-ether-modal__logo', {
-            src: '../../../images/deposit-eth.svg',
+            src: './images/deposit-eth.svg',
           }),
           title: DIRECT_DEPOSIT_ROW_TITLE,
           text: DIRECT_DEPOSIT_ROW_TEXT,
-          buttonLabel: t('viewAccount'),
+          buttonLabel: this.context.t('viewAccount'),
           onButtonClick: () => this.goToAccountDetailsModal(),
           hide: buyingWithShapeshift,
         }),
@@ -147,8 +162,8 @@ DepositEtherModal.prototype.render = function () {
         this.renderRow({
           logo: h('i.fa.fa-tint.fa-2x'),
           title: FAUCET_ROW_TITLE,
-          text: facuetRowText(networkName),
-          buttonLabel: t('getEther'),
+          text: this.facuetRowText(networkName),
+          buttonLabel: this.context.t('getEther'),
           onButtonClick: () => toFaucet(network),
           hide: !isTestNetwork || buyingWithShapeshift,
         }),
@@ -156,13 +171,13 @@ DepositEtherModal.prototype.render = function () {
         this.renderRow({
           logo: h('div.deposit-ether-modal__logo', {
             style: {
-              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              backgroundImage: 'url(\'./images/coinbase logo.png\')',
               height: '40px',
             },
           }),
           title: COINBASE_ROW_TITLE,
           text: COINBASE_ROW_TEXT,
-          buttonLabel: t('continueToCoinbase'),
+          buttonLabel: this.context.t('continueToCoinbase'),
           onButtonClick: () => toCoinbase(address),
           hide: isTestNetwork || buyingWithShapeshift,
         }),
@@ -170,12 +185,12 @@ DepositEtherModal.prototype.render = function () {
         this.renderRow({
           logo: h('div.deposit-ether-modal__logo', {
             style: {
-              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
             },
           }),
           title: SHAPESHIFT_ROW_TITLE,
           text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: t('shapeshiftBuy'),
+          buttonLabel: this.context.t('shapeshiftBuy'),
           onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
           hide: isTestNetwork,
           hideButton: buyingWithShapeshift,
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 6efa8d476..c79645dbf 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -1,10 +1,10 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
-const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
@@ -33,8 +33,13 @@ function EditAccountNameModal (props) {
   }
 }
 
+EditAccountNameModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
 
+
 EditAccountNameModal.prototype.render = function () {
   const { hideModal, saveAccountLabel, identity } = this.props
 
@@ -51,7 +56,7 @@ EditAccountNameModal.prototype.render = function () {
       ]),
 
       h('div.edit-account-name-modal-title', {
-      }, [t('editAccountName')]),
+      }, [this.context.t('editAccountName')]),
 
       h('input.edit-account-name-modal-input', {
         placeholder: identity.name,
@@ -70,7 +75,7 @@ EditAccountNameModal.prototype.render = function () {
         },
         disabled: this.state.inputText.length === 0,
       }, [
-        t('save'),
+        this.context.t('save'),
       ]),
 
     ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index cf42e4fa2..1f80aed39 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
@@ -7,7 +8,6 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
-const t = require('../../../i18n')
 const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {
@@ -38,8 +38,13 @@ function ExportPrivateKeyModal () {
   }
 }
 
+ExportPrivateKeyModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
 
+
 ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
   const { exportAccount } = this.props
 
@@ -49,8 +54,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo
 
 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
   return h('span.private-key-password-label', privateKey
-    ? t('copyPrivateKey')
-    : t('typePassword')
+    ? this.context.t('copyPrivateKey')
+    : this.context.t('typePassword')
   )
 }
 
@@ -87,8 +92,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
     ),
 
     (privateKey
-      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), t('done'))
-      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
+      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.context.t('done'))
+      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
     ),
 
   ])
@@ -121,7 +126,7 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('span.modal-body-title', t('showPrivateKeys')),
+      h('span.modal-body-title', this.context.t('showPrivateKeys')),
 
       h('div.private-key-password', {}, [
         this.renderPasswordLabel(privateKey),
@@ -131,7 +136,7 @@ ExportPrivateKeyModal.prototype.render = function () {
         !warning ? null : h('span.private-key-password-error', warning),
       ]),
 
-      h('div.private-key-password-warning', t('privateKeyWarning')),
+      h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
 
       this.renderButtons(privateKey, this.state.password, address, hideModal),
 
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 33d8062c6..72e9c84eb 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -1,10 +1,10 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')
-const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
@@ -32,8 +32,13 @@ function HideTokenConfirmationModal () {
   this.state = {}
 }
 
+HideTokenConfirmationModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
 
+
 HideTokenConfirmationModal.prototype.render = function () {
   const { token, network, hideToken, hideModal } = this.props
   const { symbol, address } = token
@@ -42,7 +47,7 @@ HideTokenConfirmationModal.prototype.render = function () {
     h('div.hide-token-confirmation__container', {
     }, [
       h('div.hide-token-confirmation__title', {}, [
-        t('hideTokenPrompt'),
+        this.context.t('hideTokenPrompt'),
       ]),
 
       h(Identicon, {
@@ -55,19 +60,19 @@ HideTokenConfirmationModal.prototype.render = function () {
       h('div.hide-token-confirmation__symbol', {}, symbol),
 
       h('div.hide-token-confirmation__copy', {}, [
-        t('readdToken'),
+        this.context.t('readdToken'),
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
         h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
           onClick: () => hideModal(),
         }, [
-          t('cancel'),
+          this.context.t('cancel'),
         ]),
         h('button.btn-clear.hide-token-confirmation__button.allcaps', {
           onClick: () => hideToken(address),
         }, [
-          t('hide'),
+          this.context.t('hide'),
         ]),
       ]),
     ]),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 501b83430..9250cc77e 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -6,7 +6,6 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
-const t = require('../../../i18n')
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
@@ -174,8 +173,8 @@ const MODALS = {
   BETA_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: t('uiWelcome'),
-        message: t('uiWelcomeMessage'),
+        header: 'uiWelcome',
+        message: 'uiWelcomeMessage',
       }),
     ],
     mobileModalStyle: {
@@ -191,8 +190,8 @@ const MODALS = {
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: t('oldUI'),
-        message: t('oldUIMessage'),
+        header: 'oldUI',
+        message: 'oldUIMessage',
       }),
     ],
     mobileModalStyle: {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 298b76af4..0635b3f72 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -1,9 +1,8 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
-const t = require('../../../i18n')
 
 class NewAccountModal extends Component {
   constructor (props) {
@@ -12,7 +11,7 @@ class NewAccountModal extends Component {
     const newAccountNumber = numberOfExistingAccounts + 1
 
     this.state = {
-      newAccountName: `${t('account')} ${newAccountNumber}`,
+      newAccountName: `${this.context.t('account')} ${newAccountNumber}`,
     }
   }
 
@@ -23,7 +22,7 @@ class NewAccountModal extends Component {
       h('div.new-account-modal-wrapper', {
       }, [
         h('div.new-account-modal-header', {}, [
-          t('newAccount'),
+          this.context.t('newAccount'),
         ]),
 
         h('div.modal-close-x', {
@@ -31,19 +30,19 @@ class NewAccountModal extends Component {
         }),
 
         h('div.new-account-modal-content', {}, [
-          t('accountName'),
+          this.context.t('accountName'),
         ]),
 
         h('div.new-account-input-wrapper', {}, [
           h('input.new-account-input', {
             value: this.state.newAccountName,
-            placeholder: t('sampleAccountName'),
+            placeholder: this.context.t('sampleAccountName'),
             onChange: event => this.setState({ newAccountName: event.target.value }),
           }, []),
         ]),
 
         h('div.new-account-modal-content.after-input', {}, [
-          t('or'),
+          this.context.t('or'),
         ]),
 
         h('div.new-account-modal-content.after-input.pointer', {
@@ -51,13 +50,13 @@ class NewAccountModal extends Component {
             this.props.hideModal()
             this.props.showImportPage()
           },
-        }, t('importAnAccount')),
+        }, this.context.t('importAnAccount')),
 
         h('div.new-account-modal-content.button.allcaps', {}, [
           h('button.btn-clear', {
             onClick: () => this.props.createAccount(newAccountName),
           }, [
-            t('save'),
+            this.context.t('save'),
           ]),
         ]),
       ]),
@@ -70,6 +69,7 @@ NewAccountModal.propTypes = {
   showImportPage: PropTypes.func,
   createAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
+    t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -104,4 +104,9 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+NewAccountModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
+
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
index 621a974d0..46a4c8a21 100644
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 
 class NotificationModal extends Component {
@@ -22,12 +22,12 @@ class NotificationModal extends Component {
       }, [
 
         h('div.notification-modal__header', {}, [
-          header,
+          this.context.t(header),
         ]),
 
         h('div.notification-modal__message-wrapper', {}, [
           h('div.notification-modal__message', {}, [
-            message,
+            this.context.t(message),
           ]),
         ]),
 
@@ -62,6 +62,7 @@ NotificationModal.propTypes = {
   showCancelButton: PropTypes.bool,
   showConfirmButton: PropTypes.bool,
   onConfirm: PropTypes.func,
+    t: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
@@ -72,4 +73,9 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+NotificationModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(null, mapDispatchToProps)(NotificationModal)
+
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
index e1bc91b24..89fa9bef1 100644
--- a/ui/app/components/modals/notification-modals/confirm-reset-account.js
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const NotifcationModal = require('../notification-modal')
 
diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js
index 9dc31b5c7..59719d9a4 100644
--- a/ui/app/components/network-display.js
+++ b/ui/app/components/network-display.js
@@ -1,9 +1,8 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
-const t = require('../../i18n')
 
 const networkToColorHash = {
   1: '#038789',
@@ -31,7 +30,7 @@ class NetworkDisplay extends Component {
     const { provider: { type } } = this.props
     return h('.network-display__container', [
       this.renderNetworkIcon(),
-      h('.network-name', t(type)),
+      h('.network-name', this.context.t(type)),
     ])
   }
 }
@@ -39,6 +38,7 @@ class NetworkDisplay extends Component {
 NetworkDisplay.propTypes = {
   network: PropTypes.string,
   provider: PropTypes.object,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = ({ metamask: { network, provider } }) => {
@@ -48,4 +48,9 @@ const mapStateToProps = ({ metamask: { network, provider } }) => {
   }
 }
 
+NetworkDisplay.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(NetworkDisplay)
+
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index f3df2242a..83297c4f2 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
+const connect = require('react-redux').connect
 const classnames = require('classnames')
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
-const t = require('../../i18n')
 
-module.exports = Network
+Network.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(Network)
+
 
 inherits(Network, Component)
 
@@ -15,6 +21,7 @@ function Network () {
 
 Network.prototype.render = function () {
   const props = this.props
+  const context = this.context
   const networkNumber = props.network
   let providerName
   try {
@@ -34,7 +41,7 @@ Network.prototype.render = function () {
       onClick: (event) => this.props.onClick(event),
     }, [
       h('img', {
-        title: t('attemptingConnect'),
+        title: context.t('attemptingConnect'),
         style: {
           width: '27px',
         },
@@ -42,22 +49,22 @@ Network.prototype.render = function () {
       }),
     ])
   } else if (providerName === 'mainnet') {
-    hoverText = t('mainnet')
+    hoverText = context.t('mainnet')
     iconName = 'ethereum-network'
   } else if (providerName === 'ropsten') {
-    hoverText = t('ropsten')
+    hoverText = context.t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (parseInt(networkNumber) === 3) {
-    hoverText = t('ropsten')
+    hoverText = context.t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (providerName === 'kovan') {
-    hoverText = t('kovan')
+    hoverText = context.t('kovan')
     iconName = 'kovan-test-network'
   } else if (providerName === 'rinkeby') {
-    hoverText = t('rinkeby')
+    hoverText = context.t('rinkeby')
     iconName = 'rinkeby-test-network'
   } else {
-    hoverText = t('unknownNetwork')
+    hoverText = context.t('unknownNetwork')
     iconName = 'unknown-private-network'
   }
 
@@ -85,7 +92,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#038789', // $blue-lagoon
                 nonSelectBackgroundColor: '#15afb2',
               }),
-              h('.network-name', t('mainnet')),
+              h('.network-name', context.t('mainnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
@@ -94,7 +101,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#e91550', // $crimson
                 nonSelectBackgroundColor: '#ec2c50',
               }),
-              h('.network-name', t('ropsten')),
+              h('.network-name', context.t('ropsten')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
@@ -103,7 +110,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#690496', // $purple
                 nonSelectBackgroundColor: '#b039f3',
               }),
-              h('.network-name', t('kovan')),
+              h('.network-name', context.t('kovan')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
@@ -112,7 +119,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#ebb33f', // $tulip-tree
                 nonSelectBackgroundColor: '#ecb23e',
               }),
-              h('.network-name', t('rinkeby')),
+              h('.network-name', context.t('rinkeby')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
@@ -124,7 +131,7 @@ Network.prototype.render = function () {
                 },
               }),
 
-              h('.network-name', t('privateNetwork')),
+              h('.network-name', context.t('privateNetwork')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
         }
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 8b0ce1e8b..bb7e0814c 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -1,12 +1,18 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const ReactMarkdown = require('react-markdown')
 const linker = require('extension-link-enabler')
 const findDOMNode = require('react-dom').findDOMNode
-const t = require('../../i18n')
+const connect = require('react-redux').connect
+
+Notice.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(Notice)
 
-module.exports = Notice
 
 inherits(Notice, Component)
 function Notice () {
@@ -111,7 +117,7 @@ Notice.prototype.render = function () {
         style: {
           marginTop: '18px',
         },
-      }, t('accept')),
+      }, this.context.t('accept')),
     ])
   )
 }
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index 87e66855d..f16fcb1c7 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const t = require('../../i18n')
+const connect = require('react-redux').connect
 
 const AccountPanel = require('./account-panel')
 
-module.exports = PendingMsgDetails
+PendingMsgDetails.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(PendingMsgDetails)
+
 
 inherits(PendingMsgDetails, Component)
 function PendingMsgDetails () {
@@ -40,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
       // message data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
         h('.flex-column.flex-space-between', [
-          h('label.font-small.allcaps', t('message')),
+          h('label.font-small.allcaps', this.context.t('message')),
           h('span.font-small', msgParams.data),
         ]),
       ]),
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
index dc406b955..21a7864e4 100644
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@@ -1,10 +1,16 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-msg-details')
-const t = require('../../i18n')
+const connect = require('react-redux').connect
+
+PendingMsg.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(PendingMsg)
 
-module.exports = PendingMsg
 
 inherits(PendingMsg, Component)
 function PendingMsg () {
@@ -30,14 +36,14 @@ PendingMsg.prototype.render = function () {
           fontWeight: 'bold',
           textAlign: 'center',
         },
-      }, t('signMessage')),
+      }, this.context.t('signMessage')),
 
       h('.error', {
         style: {
           margin: '10px',
         },
       }, [
-        t('signNotice'),
+        this.context.t('signNotice'),
         h('a', {
           href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
           style: { color: 'rgb(247, 134, 28)' },
@@ -46,7 +52,7 @@ PendingMsg.prototype.render = function () {
             const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
             global.platform.openWindow({ url })
           },
-        }, t('readMore')),
+        }, this.context.t('readMore')),
       ]),
 
       // message details
@@ -56,10 +62,10 @@ PendingMsg.prototype.render = function () {
       h('.flex-row.flex-space-around', [
         h('button', {
           onClick: state.cancelMessage,
-        }, t('cancel')),
+        }, this.context.t('cancel')),
         h('button', {
           onClick: state.signMessage,
-        }, t('sign')),
+        }, this.context.t('sign')),
       ]),
     ])
 
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index b75f3a964..aa68a9eb0 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -1,5 +1,5 @@
 const { Component } = require('react')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const actions = require('../../actions')
@@ -8,7 +8,6 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
-const t = require('../../../i18n')
 const SenderToRecipient = require('../sender-to-recipient')
 const NetworkDisplay = require('../network-display')
 
@@ -33,7 +32,7 @@ class ConfirmDeployContract extends Component {
     if (valid && this.verifyGasParams()) {
       this.props.sendTransaction(txMeta, event)
     } else {
-      this.props.displayWarning('invalidGasParams')
+      this.props.displayWarning(this.context.t('invalidGasParams'))
       this.setState({ submitting: false })
     }
   }
@@ -178,7 +177,7 @@ class ConfirmDeployContract extends Component {
 
     return (
       h('section.flex-row.flex-center.confirm-screen-row', [
-        h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+        h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
         h('div.confirm-screen-section-column', [
           h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
 
@@ -217,8 +216,8 @@ class ConfirmDeployContract extends Component {
     return (
       h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+          h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
         ]),
 
         h('div.confirm-screen-section-column', [
@@ -248,11 +247,11 @@ class ConfirmDeployContract extends Component {
           h('.page-container__header-row', [
             h('span.page-container__back-button', {
               onClick: () => backToAccountDetail(selectedAddress),
-            }, t('back')),
+            }, this.context.t('back')),
             window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
           ]),
-          h('.page-container__title', t('confirmContract')),
-          h('.page-container__subtitle', t('pleaseReviewTransaction')),
+          h('.page-container__title', this.context.t('confirmContract')),
+          h('.page-container__subtitle', this.context.t('pleaseReviewTransaction')),
         ]),
         // Main Send token Card
         h('.page-container__content', [
@@ -275,7 +274,7 @@ class ConfirmDeployContract extends Component {
 
           h('div.confirm-screen-rows', [
             h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('from') ]),
               h('div.confirm-screen-section-column', [
                 h('div.confirm-screen-row-info', fromName),
                 h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -283,9 +282,9 @@ class ConfirmDeployContract extends Component {
             ]),
 
             h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]),
               h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', t('newContract')),
+                h('div.confirm-screen-row-info', this.context.t('newContract')),
               ]),
             ]),
 
@@ -303,12 +302,12 @@ class ConfirmDeployContract extends Component {
             // Cancel Button
             h('button.btn-cancel.page-container__footer-button.allcaps', {
               onClick: event => this.cancel(event, txMeta),
-            }, t('cancel')),
+            }, this.context.t('cancel')),
 
             // Accept Button
             h('button.btn-confirm.page-container__footer-button.allcaps', {
               onClick: event => this.onSubmit(event),
-            }, t('confirm')),
+            }, this.context.t('confirm')),
           ]),
         ]),
       ])
@@ -325,6 +324,7 @@ ConfirmDeployContract.propTypes = {
   conversionRate: PropTypes.number,
   currentCurrency: PropTypes.string,
   selectedAddress: PropTypes.string,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -347,8 +347,12 @@ const mapDispatchToProps = dispatch => {
   return {
     backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
-    displayWarning: warning => actions.displayWarning(t(warning)),
+    displayWarning: warning => actions.displayWarning(warning),
   }
 }
 
+ConfirmDeployContract.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index d1ce25cbf..7bf20bced 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -1,5 +1,6 @@
 const Component = require('react').Component
-const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../../actions')
@@ -7,20 +8,29 @@ const clone = require('clone')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const classnames = require('classnames')
 const {
   conversionUtil,
   addCurrencies,
   multiplyCurrencies,
 } = require('../../conversion-util')
+const {
+  getGasTotal,
+  isBalanceSufficient,
+} = require('../send/send-utils')
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
-const t = require('../../../i18n')
 const SenderToRecipient = require('../sender-to-recipient')
 const NetworkDisplay = require('../network-display')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
+ConfirmSendEther.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther)
 
+
 function mapStateToProps (state) {
   const {
     conversionRate,
@@ -30,12 +40,14 @@ function mapStateToProps (state) {
   } = state.metamask
   const accounts = state.metamask.accounts
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const { balance } = accounts[selectedAddress]
   return {
     conversionRate,
     identities,
     selectedAddress,
     currentCurrency,
     send,
+    balance,
   }
 }
 
@@ -86,6 +98,7 @@ function mapDispatchToProps (dispatch) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
+    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
   }
 }
 
@@ -96,6 +109,52 @@ function ConfirmSendEther () {
   this.onSubmit = this.onSubmit.bind(this)
 }
 
+ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) {
+  const {
+    balance: oldBalance,
+    conversionRate: oldConversionRate,
+  } = prevProps
+  const {
+    updateSendErrors,
+    balance,
+    conversionRate,
+    send: {
+      errors: {
+        simulationFails,
+      },
+    },
+  } = this.props
+  const txMeta = this.gatherTxMeta()
+
+  const shouldUpdateBalanceSendErrors = balance && [
+    balance !== oldBalance,
+    conversionRate !== oldConversionRate,
+  ].some(x => Boolean(x))
+
+  if (shouldUpdateBalanceSendErrors) {
+    const balanceIsSufficient = this.isBalanceSufficient(txMeta)
+    updateSendErrors({
+      insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'),
+    })
+  }
+
+  const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails)
+
+  if (shouldUpdateSimulationSendError) {
+    updateSendErrors({
+      simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'),
+    })
+  }
+}
+
+ConfirmSendEther.prototype.componentWillMount = function () {
+  this.updateComponentSendErrors({})
+}
+
+ConfirmSendEther.prototype.componentDidUpdate = function (prevProps) {
+  this.updateComponentSendErrors(prevProps)
+}
+
 ConfirmSendEther.prototype.getAmount = function () {
   const { conversionRate, currentCurrency } = this.props
   const txMeta = this.gatherTxMeta()
@@ -178,6 +237,7 @@ ConfirmSendEther.prototype.getData = function () {
   const { identities } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
+  const account = identities ? identities[txParams.from] || {} : {}
   const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee()
   const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount()
 
@@ -193,11 +253,11 @@ ConfirmSendEther.prototype.getData = function () {
   return {
     from: {
       address: txParams.from,
-      name: identities[txParams.from].name,
+      name: account.name,
     },
     to: {
       address: txParams.to,
-      name: identities[txParams.to] ? identities[txParams.to].name : t('newRecipient'),
+      name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'),
     },
     memo: txParams.memo || '',
     gasFeeInFIAT,
@@ -218,7 +278,12 @@ ConfirmSendEther.prototype.render = function () {
     conversionRate,
     currentCurrency: convertedCurrency,
     showCustomizeGasModal,
-    send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+    send: {
+      gasTotal,
+      gasLimit: sendGasLimit,
+      gasPrice: sendGasPrice,
+      errors,
+    },
   } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
@@ -298,7 +363,7 @@ ConfirmSendEther.prototype.render = function () {
 
         h('div.confirm-screen-rows', [
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('from') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', fromName),
               h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -306,7 +371,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', toName),
               h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@@ -314,7 +379,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
             h('div.confirm-screen-section-column', [
               h(GasFeeDisplay, {
                 gasTotal: gasTotal || gasFeeInHex,
@@ -326,15 +391,22 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
-            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ t('total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+            h('div', {
+              className: classnames({
+                'confirm-screen-section-column--with-error': errors['insufficientFunds'],
+                'confirm-screen-section-column': !errors['insufficientFunds'],
+              }),
+            }, [
+              h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
             ]),
 
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
               h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
+
+            this.renderErrorMessage('insufficientFunds'),
           ]),
         ]),
 
@@ -420,8 +492,10 @@ ConfirmSendEther.prototype.render = function () {
       ]),
 
       h('form#pending-tx-form', {
+        className: 'confirm-screen-form',
         onSubmit: this.onSubmit,
       }, [
+        this.renderErrorMessage('simulationFails'),
         h('.page-container__footer', [
           // Cancel Button
           h('button.btn-cancel.page-container__footer-button.allcaps', {
@@ -429,26 +503,38 @@ ConfirmSendEther.prototype.render = function () {
               clearSend()
               this.cancel(event, txMeta)
             },
-          }, t('cancel')),
+          }, this.context.t('cancel')),
 
           // Accept Button
-          h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
+          h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
         ]),
       ]),
     ])
   )
 }
 
+ConfirmSendEther.prototype.renderErrorMessage = function (message) {
+  const { send: { errors } } = this.props
+
+  return errors[message]
+    ? h('div.confirm-screen-error', [ errors[message] ])
+    : null
+}
+
 ConfirmSendEther.prototype.onSubmit = function (event) {
   event.preventDefault()
+  const { updateSendErrors } = this.props
   const txMeta = this.gatherTxMeta()
   const valid = this.checkValidity()
+  const balanceIsSufficient = this.isBalanceSufficient(txMeta)
   this.setState({ valid, submitting: true })
 
-  if (valid && this.verifyGasParams()) {
+  if (valid && this.verifyGasParams() && balanceIsSufficient) {
     this.props.sendTransaction(txMeta, event)
+  } else if (!balanceIsSufficient) {
+    updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') })
   } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+    updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') })
     this.setState({ submitting: false })
   }
 }
@@ -460,6 +546,28 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) {
   cancelTransaction(txMeta)
 }
 
+ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) {
+  const {
+    balance,
+    conversionRate,
+  } = this.props
+  const {
+    txParams: {
+      gas,
+      gasPrice,
+      value: amount,
+    },
+  } = txMeta
+  const gasTotal = getGasTotal(gas, gasPrice)
+
+  return isBalanceSufficient({
+    amount,
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+}
+
 ConfirmSendEther.prototype.checkValidity = function () {
   const form = this.getFormEl()
   const valid = form.checkValidity()
@@ -523,4 +631,4 @@ ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator,
   const numBN = new BN(numerator)
   const denomBN = new BN(denominator)
   return targetBN.mul(numBN).div(denomBN)
-}
+}
\ No newline at end of file
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index f9276e8a5..19e591fd6 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -1,12 +1,12 @@
 const Component = require('react').Component
-const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const tokenAbi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(tokenAbi)
 const actions = require('../../actions')
-const t = require('../../../i18n')
 const clone = require('clone')
 const Identicon = require('../identicon')
 const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
@@ -18,8 +18,13 @@ const {
   addCurrencies,
 } = require('../../conversion-util')
 const {
+  getGasTotal,
+  isBalanceSufficient,
+} = require('../send/send-utils')
+const {
   calcTokenAmount,
 } = require('../../token-util')
+const classnames = require('classnames')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -29,8 +34,13 @@ const {
   getSelectedTokenContract,
 } = require('../../selectors')
 
+ConfirmSendToken.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken)
 
+
 function mapStateToProps (state, ownProps) {
   const { token: { symbol }, txData } = ownProps
   const { txParams } = txData || {}
@@ -41,9 +51,10 @@ function mapStateToProps (state, ownProps) {
     identities,
     currentCurrency,
   } = state.metamask
+  const accounts = state.metamask.accounts
   const selectedAddress = getSelectedAddress(state)
   const tokenExchangeRate = getTokenExchangeRate(state, symbol)
-
+  const { balance } = accounts[selectedAddress]
   return {
     conversionRate,
     identities,
@@ -53,6 +64,7 @@ function mapStateToProps (state, ownProps) {
     currentCurrency: currentCurrency.toUpperCase(),
     send: state.metamask.send,
     tokenContract: getSelectedTokenContract(state),
+    balance,
   }
 }
 
@@ -102,7 +114,7 @@ function mapDispatchToProps (dispatch, ownProps) {
         fromNumericBase: 'dec',
         toNumericBase: 'hex',
       })
-    
+
       let forceGasMin
       if (lastGasPrice) {
         forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
@@ -124,6 +136,7 @@ function mapDispatchToProps (dispatch, ownProps) {
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
+    updateSendErrors: error => dispatch(actions.updateSendErrors(error)),
   }
 }
 
@@ -134,6 +147,44 @@ function ConfirmSendToken () {
   this.onSubmit = this.onSubmit.bind(this)
 }
 
+ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) {
+  const {
+    balance: oldBalance,
+    conversionRate: oldConversionRate,
+  } = prevProps
+  const {
+    updateSendErrors,
+    balance,
+    conversionRate,
+    send: {
+      errors: {
+        simulationFails,
+      },
+    },
+  } = this.props
+  const txMeta = this.gatherTxMeta()
+
+  const shouldUpdateBalanceSendErrors = balance && [
+    balance !== oldBalance,
+    conversionRate !== oldConversionRate,
+  ].some(x => Boolean(x))
+
+  if (shouldUpdateBalanceSendErrors) {
+    const balanceIsSufficient = this.isBalanceSufficient(txMeta)
+    updateSendErrors({
+      insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'),
+    })
+  }
+
+  const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails)
+
+  if (shouldUpdateSimulationSendError) {
+    updateSendErrors({
+      simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'),
+    })
+  }
+}
+
 ConfirmSendToken.prototype.componentWillMount = function () {
   const { tokenContract, selectedAddress } = this.props
   tokenContract && tokenContract
@@ -141,6 +192,11 @@ ConfirmSendToken.prototype.componentWillMount = function () {
     .then(usersToken => {
     })
   this.props.updateTokenExchangeRate()
+  this.updateComponentSendErrors({})
+}
+
+ConfirmSendToken.prototype.componentDidUpdate = function (prevProps) {
+  this.updateComponentSendErrors(prevProps)
 }
 
 ConfirmSendToken.prototype.getAmount = function () {
@@ -169,7 +225,7 @@ ConfirmSendToken.prototype.getAmount = function () {
       ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
       : null,
     token: typeof value === 'undefined'
-      ? t('unknown')
+      ? this.context.t('unknown')
       : +sendTokenAmount.toFixed(decimals),
   }
 
@@ -241,7 +297,7 @@ ConfirmSendToken.prototype.getData = function () {
     },
     to: {
       address: value,
-      name: identities[value] ? identities[value].name : t('newRecipient'),
+      name: identities[value] ? identities[value].name : this.context.t('newRecipient'),
     },
     memo: txParams.memo || '',
   }
@@ -287,7 +343,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+      h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
       h('div.confirm-screen-section-column', [
         h(GasFeeDisplay, {
           gasTotal: gasTotal || gasFeeInHex,
@@ -301,7 +357,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
 }
 
 ConfirmSendToken.prototype.renderTotalPlusGas = function () {
-  const { token: { symbol }, currentCurrency } = this.props
+  const { token: { symbol }, currentCurrency, send: { errors } } = this.props
   const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
   const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
 
@@ -309,8 +365,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
     ? (
       h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+          h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
         ]),
 
         h('div.confirm-screen-section-column', [
@@ -321,19 +377,34 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
     )
     : (
       h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
-        h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+        h('div', {
+          className: classnames({
+            'confirm-screen-section-column--with-error': errors['insufficientFunds'],
+            'confirm-screen-section-column': !errors['insufficientFunds'],
+          }),
+        }, [
+          h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
         ]),
 
         h('div.confirm-screen-section-column', [
           h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
-          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`),
+          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`),
         ]),
+
+        this.renderErrorMessage('insufficientFunds'),
       ])
     )
 }
 
+ConfirmSendToken.prototype.renderErrorMessage = function (message) {
+  const { send: { errors } } = this.props
+
+  return errors[message]
+    ? h('div.confirm-screen-error', [ errors[message] ])
+    : null
+}
+
 ConfirmSendToken.prototype.render = function () {
   const { editTransaction } = this.props
   const txMeta = this.gatherTxMeta()
@@ -350,10 +421,11 @@ ConfirmSendToken.prototype.render = function () {
 
   this.inputs = []
 
-  const title = txMeta.lastGasPrice ? 'Reprice Transaction' : t('confirm')
-  const subtitle = txMeta.lastGasPrice
-    ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
-    : t('pleaseReviewTransaction')
+  const isTxReprice = Boolean(txMeta.lastGasPrice)
+  const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm')
+  const subtitle = isTxReprice
+    ? this.context.t('reprice_subtitle')
+    : this.context.t('pleaseReviewTransaction')
 
   return (
     h('div.confirm-screen-container.confirm-send-token', [
@@ -362,7 +434,7 @@ ConfirmSendToken.prototype.render = function () {
         h('div.page-container__header', [
           !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
-          }, t('edit')),
+          }, this.context.t('edit')),
           h('div.page-container__title', title),
           h('div.page-container__subtitle', subtitle),
         ]),
@@ -406,7 +478,7 @@ ConfirmSendToken.prototype.render = function () {
 
           h('div.confirm-screen-rows', [
             h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('from') ]),
               h('div.confirm-screen-section-column', [
                 h('div.confirm-screen-row-info', fromName),
                 h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -414,7 +486,7 @@ ConfirmSendToken.prototype.render = function () {
             ]),
 
             toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]),
               h('div.confirm-screen-section-column', [
                 h('div.confirm-screen-row-info', toName),
                 h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@@ -428,17 +500,20 @@ ConfirmSendToken.prototype.render = function () {
           ]),
 
         ]),
+
         h('form#pending-tx-form', {
+          className: 'confirm-screen-form',
           onSubmit: this.onSubmit,
         }, [
+          this.renderErrorMessage('simulationFails'),
           h('.page-container__footer', [
             // Cancel Button
             h('button.btn-cancel.page-container__footer-button.allcaps', {
               onClick: (event) => this.cancel(event, txMeta),
-            }, t('cancel')),
+            }, this.context.t('cancel')),
 
             // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
+            h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
           ]),
         ]),
       ]),
@@ -448,18 +523,44 @@ ConfirmSendToken.prototype.render = function () {
 
 ConfirmSendToken.prototype.onSubmit = function (event) {
   event.preventDefault()
+  const { updateSendErrors } = this.props
   const txMeta = this.gatherTxMeta()
   const valid = this.checkValidity()
+  const balanceIsSufficient = this.isBalanceSufficient(txMeta)
   this.setState({ valid, submitting: true })
 
-  if (valid && this.verifyGasParams()) {
+  if (valid && this.verifyGasParams() && balanceIsSufficient) {
     this.props.sendTransaction(txMeta, event)
+  } else if (!balanceIsSufficient) {
+    updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') })
   } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
+    updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') })
     this.setState({ submitting: false })
   }
 }
 
+ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) {
+  const {
+    balance,
+    conversionRate,
+  } = this.props
+  const {
+    txParams: {
+      gas,
+      gasPrice,
+    },
+  } = txMeta
+  const gasTotal = getGasTotal(gas, gasPrice)
+
+  return isBalanceSufficient({
+    amount: '0',
+    gasTotal,
+    balance,
+    conversionRate,
+  })
+}
+
+
 ConfirmSendToken.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
   const { cancelTransaction } = this.props
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index 9c0453a3b..acdd99364 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const clone = require('clone')
 const abi = require('human-standard-token-abi')
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index f6af13454..1423aa84d 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -1,10 +1,16 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyDisplay = require('./currency-display')
-const t = require('../../../i18n')
+const connect = require('react-redux').connect
+
+GasFeeDisplay.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(GasFeeDisplay)
 
-module.exports = GasFeeDisplay
 
 inherits(GasFeeDisplay, Component)
 function GasFeeDisplay () {
@@ -33,8 +39,8 @@ GasFeeDisplay.prototype.render = function () {
         readOnly: true,
       })
       : gasLoadingError
-        ? h('div..currency-display.currency-display--message', 'Set with the gas price customizer.')
-        : h('div.currency-display', t('loading')),
+        ? h('div.currency-display.currency-display--message', this.context.t('setGasPrice'))
+        : h('div.currency-display', this.context.t('loading')),
 
     h('button.sliders-icon-container', {
       onClick,
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
index d925d3ed8..62cdc1cad 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@@ -1,10 +1,16 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('../input-number.js')
-const t = require('../../../i18n')
+const connect = require('react-redux').connect
+
+GasTooltip.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(GasTooltip)
 
-module.exports = GasTooltip
 
 inherits(GasTooltip, Component)
 function GasTooltip () {
@@ -82,7 +88,7 @@ GasTooltip.prototype.render = function () {
             'marginTop': '81px',
           },
         }, [
-          h('span.gas-tooltip-label', {}, [t('gasLimit')]),
+          h('span.gas-tooltip-label', {}, [this.context.t('gasLimit')]),
           h('i.fa.fa-info-circle'),
         ]),
         h(InputNumber, {
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
index d8211930d..71bfb2668 100644
--- a/ui/app/components/send/send-utils.js
+++ b/ui/app/components/send/send-utils.js
@@ -2,6 +2,7 @@ const {
   addCurrencies,
   conversionUtil,
   conversionGTE,
+  multiplyCurrencies,
 } = require('../../conversion-util')
 const {
   calcTokenAmount,
@@ -31,7 +32,7 @@ function isBalanceSufficient ({
     {
       value: totalAmount,
       fromNumericBase: 'hex',
-      conversionRate: amountConversionRate,
+      conversionRate: amountConversionRate || conversionRate,
       fromCurrency: primaryCurrency,
     },
   )
@@ -62,7 +63,16 @@ function isTokenBalanceSufficient ({
   return tokenBalanceIsSufficient
 }
 
+function getGasTotal (gasLimit, gasPrice) {
+  return multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+}
+
 module.exports = {
+  getGasTotal,
   isBalanceSufficient,
   isTokenBalanceSufficient,
 }
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 72074229e..5ea17f9a2 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -1,10 +1,16 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountListItem = require('./account-list-item')
-const t = require('../../../i18n')
+const connect = require('react-redux').connect
+
+ToAutoComplete.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(ToAutoComplete)
 
-module.exports = ToAutoComplete
 
 inherits(ToAutoComplete, Component)
 function ToAutoComplete () {
@@ -93,7 +99,7 @@ ToAutoComplete.prototype.render = function () {
   return h('div.send-v2__to-autocomplete', {}, [
 
     h('input.send-v2__to-autocomplete__input', {
-      placeholder: t('recipientAddress'),
+      placeholder: this.context.t('recipientAddress'),
       className: inError ? `send-v2__error-border` : '',
       value: to,
       onChange: event => onChange(event.target.value),
diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js
index f35c353ad..9cef8e401 100644
--- a/ui/app/components/sender-to-recipient.js
+++ b/ui/app/components/sender-to-recipient.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
+const connect = require('react-redux').connect
 const PropTypes = require('prop-types')
-const t = require('../../i18n')
 const Identicon = require('./identicon')
 
 class SenderToRecipient extends Component {
@@ -21,7 +21,7 @@ class SenderToRecipient extends Component {
         this.renderRecipientIcon(),
         h(
           '.sender-to-recipient__name.sender-to-recipient__recipient-name',
-          recipientName || t('newContract')
+          recipientName || this.context.t('newContract')
         ),
       ])
     )
@@ -46,7 +46,7 @@ class SenderToRecipient extends Component {
             h('img', {
               height: 15,
               width: 15,
-              src: '/images/arrow-right.svg',
+              src: './images/arrow-right.svg',
             }),
           ]),
         ]),
@@ -61,6 +61,12 @@ SenderToRecipient.propTypes = {
   senderAddress: PropTypes.string,
   recipientName: PropTypes.string,
   recipientAddress: PropTypes.string,
+  t: PropTypes.func,
 }
 
-module.exports = SenderToRecipient
+SenderToRecipient.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(SenderToRecipient)
+
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 5729f893c..fd4a80a4a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -1,5 +1,6 @@
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const classnames = require('classnames')
@@ -7,7 +8,6 @@ const { qrcode } = require('qrcode-npm')
 const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
 const { isValidAddress } = require('../util')
 const SimpleDropdown = require('./dropdowns/simple-dropdown')
-const t = require('../../i18n')
 
 function mapStateToProps (state) {
   const {
@@ -33,8 +33,13 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
+ShapeshiftForm.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)
 
+
 inherits(ShapeshiftForm, Component)
 function ShapeshiftForm () {
   Component.call(this)
@@ -94,7 +99,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
       }))
       .catch(() => this.setState({
         showQrCode: false,
-        errorMessage: t('invalidRequest'),
+        errorMessage: this.context.t('invalidRequest'),
         isLoading: false,
       }))
   }
@@ -126,10 +131,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
 
   return h('div.shapeshift-form__metadata', {}, [
 
-    this.renderMetadata(t('status'), limit ? t('available') : t('unavailable')),
-    this.renderMetadata(t('limit'), limit),
-    this.renderMetadata(t('exchangeRate'), rate),
-    this.renderMetadata(t('min'), minimum),
+    this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')),
+    this.renderMetadata(this.context.t('limit'), limit),
+    this.renderMetadata(this.context.t('exchangeRate'), rate),
+    this.renderMetadata(this.context.t('min'), minimum),
 
   ])
 }
@@ -143,7 +148,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      t('depositCoin', [depositCoin.toUpperCase()]),
+      this.context.t('depositCoin', [depositCoin.toUpperCase()]),
     ]),
 
     h('div', depositAddress),
@@ -180,7 +185,7 @@ ShapeshiftForm.prototype.render = function () {
 
             h('div.shapeshift-form__selector', [
 
-              h('div.shapeshift-form__selector-label', t('deposit')),
+              h('div.shapeshift-form__selector-label', this.context.t('deposit')),
 
               h(SimpleDropdown, {
                 selectedOption: this.state.depositCoin,
@@ -200,7 +205,7 @@ ShapeshiftForm.prototype.render = function () {
             h('div.shapeshift-form__selector', [
 
               h('div.shapeshift-form__selector-label', [
-                t('receive'),
+                this.context.t('receive'),
               ]),
 
               h('div.shapeshift-form__selector-input', ['ETH']),
@@ -218,7 +223,7 @@ ShapeshiftForm.prototype.render = function () {
           }, [
 
             h('div.shapeshift-form__address-input-label', [
-              t('refundAddress'),
+              this.context.t('refundAddress'),
             ]),
 
             h('input.shapeshift-form__address-input', {
@@ -240,7 +245,7 @@ ShapeshiftForm.prototype.render = function () {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
-      }, [t('buy')]),
+      }, [this.context.t('buy')]),
 
     ])
 }
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index fddbc6821..4334aacba 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -1,20 +1,25 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const vreme = new (require('vreme'))()
 const explorerLink = require('etherscan-link').createExplorerLink
 const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
-const t = require('../../i18n')
 
 const CopyButton = require('./copyButton')
 const EthBalance = require('./eth-balance')
 const Tooltip = require('./tooltip')
 
 
+ShiftListItem.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(ShiftListItem)
 
+
 function mapStateToProps (state) {
   return {
     selectedAddress: state.metamask.selectedAddress,
@@ -76,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
           value: this.props.depositAddress,
         }),
         h(Tooltip, {
-          title: t('qrCode'),
+          title: this.context.t('qrCode'),
         }, [
           h('i.fa.fa-qrcode.pointer.pop-hover', {
             onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@@ -136,8 +141,8 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, t('toETHviaShapeShift', [props.depositType])),
-        h('div', t('noDeposits')),
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('noDeposits')),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -159,8 +164,8 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, t('toETHviaShapeShift', [props.depositType])),
-        h('div', t('conversionProgress')),
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('conversionProgress')),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -185,7 +190,7 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, t('fromShapeShift')),
+        }, this.context.t('fromShapeShift')),
         h('div', formatDate(props.time)),
         h('div', {
           style: {
@@ -197,7 +202,7 @@ ShiftListItem.prototype.renderInfo = function () {
       ])
 
     case 'failed':
-      return h('span.error', '(' + t('failed') + ')')
+      return h('span.error', '(' + this.context.t('failed') + ')')
     default:
       return ''
   }
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 810a52e55..41415411e 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('./identicon')
@@ -9,7 +10,6 @@ const classnames = require('classnames')
 const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
 
 const actions = require('../actions')
-const t = require('../../i18n')
 const { conversionUtil } = require('../conversion-util')
 
 const {
@@ -38,8 +38,13 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
+SignatureRequest.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
 
+
 inherits(SignatureRequest, Component)
 function SignatureRequest (props) {
   Component.call(this)
@@ -55,7 +60,7 @@ SignatureRequest.prototype.renderHeader = function () {
 
     h('div.request-signature__header-background'),
 
-    h('div.request-signature__header__text', t('sigRequest')),
+    h('div.request-signature__header__text', this.context.t('sigRequest')),
 
     h('div.request-signature__header__tip-container', [
       h('div.request-signature__header__tip'),
@@ -76,7 +81,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
 
   return h('div.request-signature__account', [
 
-    h('div.request-signature__account-text', [t('account') + ':']),
+    h('div.request-signature__account-text', [this.context.t('account') + ':']),
 
     h(AccountDropdownMini, {
       selectedAccount,
@@ -103,7 +108,7 @@ SignatureRequest.prototype.renderBalance = function () {
 
   return h('div.request-signature__balance', [
 
-    h('div.request-signature__balance-text', [t('balance')]),
+    h('div.request-signature__balance-text', [this.context.t('balance')]),
 
     h('div.request-signature__balance-value', `${balanceInEther} ETH`),
 
@@ -137,7 +142,7 @@ SignatureRequest.prototype.renderRequestInfo = function () {
   return h('div.request-signature__request-info', [
 
     h('div.request-signature__headline', [
-      t('yourSigRequested'),
+      this.context.t('yourSigRequested'),
     ]),
 
   ])
@@ -155,18 +160,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
 
 SignatureRequest.prototype.renderBody = function () {
   let rows
-  let notice = t('youSign') + ':'
+  let notice = this.context.t('youSign') + ':'
 
   const { txData } = this.props
   const { type, msgParams: { data } } = txData
 
   if (type === 'personal_sign') {
-    rows = [{ name: t('message'), value: this.msgHexToText(data) }]
+    rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
   } else if (type === 'eth_signTypedData') {
     rows = data
   } else if (type === 'eth_sign') {
-    rows = [{ name: t('message'), value: data }]
-    notice = t('signNotice')
+    rows = [{ name: this.context.t('message'), value: data }]
+    notice = this.context.t('signNotice')
   }
 
   return h('div.request-signature__body', {}, [
@@ -225,10 +230,10 @@ SignatureRequest.prototype.renderFooter = function () {
   return h('div.request-signature__footer', [
     h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
       onClick: cancel,
-    }, t('cancel')),
+    }, this.context.t('cancel')),
     h('button.btn-primary--lg', {
       onClick: sign,
-    }, t('sign')),
+    }, this.context.t('sign')),
   ])
 }
 
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 01529aeda..150a3762d 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -1,11 +1,11 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
 const connect = require('react-redux').connect
 const selectors = require('../selectors')
-const t = require('../../i18n')
 
 function mapStateToProps (state) {
   return {
@@ -25,8 +25,13 @@ for (const address in contracts) {
   }
 }
 
+TokenList.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(TokenList)
 
+
 inherits(TokenList, Component)
 function TokenList () {
   this.state = {
@@ -43,7 +48,7 @@ TokenList.prototype.render = function () {
   const { tokens, isLoading, error } = state
 
   if (isLoading) {
-    return this.message(t('loadingTokens'))
+    return this.message(this.context.t('loadingTokens'))
   }
 
   if (error) {
@@ -53,7 +58,7 @@ TokenList.prototype.render = function () {
         padding: '80px',
       },
     }, [
-      t('troubleTokenBalances'),
+      this.context.t('troubleTokenBalances'),
       h('span.hotFix', {
         style: {
           color: 'rgba(247, 134, 28, 1)',
@@ -64,7 +69,7 @@ TokenList.prototype.render = function () {
           url: `https://ethplorer.io/address/${userAddress}`,
         })
         },
-      }, t('here')),
+      }, this.context.t('here')),
     ])
   }
 
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index d104eda88..42c008798 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const inherits = require('util').inherits
@@ -14,10 +15,14 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
 const { calcTokenAmount } = require('../token-util')
 
 const { getCurrentCurrency } = require('../selectors')
-const t = require('../../i18n')
+
+TxListItem.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem)
 
+
 function mapStateToProps (state) {
   return {
     tokens: state.metamask.tokens,
@@ -63,20 +68,24 @@ TxListItem.prototype.getAddressText = function () {
   const {
     address,
     txParams = {},
+    isMsg,
   } = this.props
 
   const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
   const { name: txDataName, params = [] } = decodedData || {}
   const { value } = params[0] || {}
 
-  switch (txDataName) {
-    case 'transfer':
-      return `${value.slice(0, 10)}...${value.slice(-4)}`
-    default:
-      return address
-        ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : t('contractDeployment')
+  let addressText
+  if (txDataName === 'transfer' || address) {
+    const addressToRender = txDataName === 'transfer' ? value : address
+    addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}`
+  } else if (isMsg) {
+    addressText = this.context.t('sigRequest')
+  } else {
+    addressText = this.context.t('contractDeployment')
   }
+
+  return addressText
 }
 
 TxListItem.prototype.getSendEtherTotal = function () {
@@ -186,6 +195,9 @@ TxListItem.prototype.showRetryButton = function () {
     transactionId,
     txParams,
   } = this.props
+  if (!txParams) {
+    return false
+  }
   const currentNonce = txParams.nonce
   const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
   const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
@@ -307,21 +319,21 @@ TxListItem.prototype.txStatusIndicator = function () {
   let name
 
   if (transactionStatus === 'unapproved') {
-    name = t('unapproved')
+    name = this.context.t('unapproved')
   } else if (transactionStatus === 'rejected') {
-    name = t('rejected')
+    name = this.context.t('rejected')
   } else if (transactionStatus === 'approved') {
-    name = t('approved')
+    name = this.context.t('approved')
   } else if (transactionStatus === 'signed') {
-    name = t('signed')
+    name = this.context.t('signed')
   } else if (transactionStatus === 'submitted') {
-    name = t('submitted')
+    name = this.context.t('submitted')
   } else if (transactionStatus === 'confirmed') {
-    name = t('confirmed')
+    name = this.context.t('confirmed')
   } else if (transactionStatus === 'failed') {
-    name = t('failed')
+    name = this.context.t('failed')
   } else if (transactionStatus === 'dropped') {
-    name = t('dropped')
+    name = this.context.t('dropped')
   }
   return name
 }
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 037c7de8c..740c4a4ab 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
@@ -10,10 +11,14 @@ const { formatDate } = require('../util')
 const { showConfTxPage } = require('../actions')
 const classnames = require('classnames')
 const { tokenInfoGetter } = require('../token-util')
-const t = require('../../i18n')
+
+TxList.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
 
+
 function mapStateToProps (state) {
   return {
     txsToRender: selectors.transactionsSelector(state),
@@ -40,7 +45,7 @@ TxList.prototype.render = function () {
   return h('div.flex-column', [
     h('div.flex-row.tx-list-header-wrapper', [
       h('div.flex-row.tx-list-header', [
-        h('div', t('transactions')),
+        h('div', this.context.t('transactions')),
       ]),
     ]),
     h('div.flex-column.tx-list-container', {}, [
@@ -57,7 +62,7 @@ TxList.prototype.renderTransaction = function () {
     : [h(
         'div.tx-list-item.tx-list-item--empty',
         { key: 'tx-list-none' },
-        [ t('noTransactions') ],
+        [ this.context.t('noTransactions') ],
       )]
 }
 
@@ -72,9 +77,9 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
 
   const props = {
     dateString: formatDate(transaction.time),
-    address: transaction.txParams.to,
+    address: transaction.txParams && transaction.txParams.to,
     transactionStatus: transaction.status,
-    transactionAmount: transaction.txParams.value,
+    transactionAmount: transaction.txParams && transaction.txParams.value,
     transactionId: transaction.id,
     transactionHash: transaction.hash,
     transactionNetworkId: transaction.metamaskNetworkId,
@@ -96,6 +101,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
   const opts = {
     key: transactionId || transactionHash,
     txParams: transaction.txParams,
+    isMsg: Boolean(transaction.msgParams),
     transactionStatus,
     transactionId,
     dateString,
@@ -110,8 +116,8 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
   const isUnapproved = transactionStatus === 'unapproved'
 
   if (isUnapproved) {
-    opts.onClick = () => showConfTxPage({id: transactionId})
-    opts.transactionStatus = t('Not Started')
+    opts.onClick = () => showConfTxPage({ id: transactionId })
+    opts.transactionStatus = this.context.t('notStarted')
   } else if (transactionHash) {
     opts.onClick = () => this.view(transactionHash, transactionNetworkId)
   }
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index bf2065106..ca24e813f 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -1,18 +1,23 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
 const actions = require('../actions')
 const selectors = require('../selectors')
-const t = require('../../i18n')
 
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
 const Identicon = require('./identicon')
 
+TxView.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
 
+
 function mapStateToProps (state) {
   const sidebarOpen = state.appState.sidebarOpen
   const isMascara = state.appState.isMascara
@@ -73,21 +78,21 @@ TxView.prototype.renderButtons = function () {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
-        }, t('deposit')),
+        }, this.context.t('deposit')),
 
         h('button.btn-primary.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
           onClick: showSendPage,
-        }, t('send')),
+        }, this.context.t('send')),
       ])
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
         h('button.btn-primary.hero-balance-button', {
           onClick: showSendTokenPage,
-        }, t('send')),
+        }, this.context.t('send')),
       ])
     )
 }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 2c6d7f784..e6b94ad12 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
@@ -11,10 +12,14 @@ const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
 const TokenList = require('./token-list')
 const selectors = require('../selectors')
-const t = require('../../i18n')
+
+WalletView.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
 
+
 function mapStateToProps (state) {
 
   return {
@@ -117,7 +122,7 @@ WalletView.prototype.render = function () {
         onClick: hideSidebar,
       }),
 
-      h('div.wallet-view__keyring-label.allcaps', isLoose ? t('imported') : ''),
+      h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''),
 
       h('div.flex-column.flex-center.wallet-view__name-container', {
         style: { margin: '0 auto' },
@@ -134,13 +139,13 @@ WalletView.prototype.render = function () {
           selectedIdentity.name,
         ]),
 
-        h('button.btn-clear.wallet-view__details-button.allcaps', t('details')),
+        h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
       ]),
     ]),
 
     h(Tooltip, {
       position: 'bottom',
-      title: this.state.hasCopied ? t('copiedExclamation') : t('copyToClipboard'),
+      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
       wrapperClassName: 'wallet-view__tooltip',
     }, [
       h('button.wallet-view__address', {
@@ -173,7 +178,7 @@ WalletView.prototype.render = function () {
         showAddTokenPage()
         hideSidebar()
       },
-    }, t('addToken')),
+    }, this.context.t('addToken')),
   ])
 }
 
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index f5c1de67c..2fdda6f43 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -8,6 +8,7 @@
   font-family: 'Roboto';
   background: white;
   border-radius: 8px;
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
 
   &__wrapper {
     background-color: $white;
@@ -20,7 +21,7 @@
   &__header {
     display: flex;
     flex-flow: column nowrap;
-    padding: 16px 16px 0px;
+    padding: 20px 20px 0px;
     border-bottom: 1px solid $geyser;
     flex: 0 0 auto;
 
@@ -31,7 +32,8 @@
 
       span {
         font-family: Roboto;
-        font-size: 16px; 
+        font-size: 16px;
+        font-weight: 400;
         line-height: 21px;
         margin-left: 8px;
       }
@@ -44,8 +46,13 @@
       margin-top: 4px;
     }
 
+    &__subtitle {
+      font-weight: 400;
+      margin-top: 15px;
+      margin-bottom: 21px;
+    }
+
     &__tabs {
-      margin-left: 22px;
       display: flex;
 
       &__tab {
@@ -54,6 +61,7 @@
         color: $dusty-gray;
         font-family: Roboto;
         font-size: 18px;
+        font-weight: 400;
         line-height: 24px;
         text-align: center;
       }
@@ -65,6 +73,7 @@
       &__unselected:hover {
         color: $black;
         border-bottom: none;
+        cursor: pointer;
       }
 
       &__selected {
@@ -76,7 +85,7 @@
 
   &__info-box {
     height: 96px;
-    margin: 20px 24px 0px;
+    margin: 20px 20px 0px;
     border-radius: 4px;
     background-color: $alabaster;
     position: relative;
@@ -98,6 +107,7 @@
       color: $mid-gray;
       font-family: Roboto;
       font-size: 14px;
+      font-weight: 400;
       margin-top: 15px;
       margin-bottom: 9px;
     }
@@ -107,6 +117,7 @@
       color: $mid-gray;
       font-family: Roboto;
       font-size: 12px;
+      font-weight: 400;
       line-height: 18px;
     }
 
@@ -124,7 +135,8 @@
   }
 
   &__confirmation-description {
-    margin: 12px 0;
+    font-weight: 400;
+    margin: 20px 0 40px 0;
   }
 
   &__content-container {
@@ -151,7 +163,7 @@
   &__input,
   &__add-custom-input {
     height: 54px;
-    padding: 21px 6px;
+    padding: 0px 20px;
     border: 1px solid $geyser;
     border-radius: 4px;
     margin: 22px 24px;
@@ -232,6 +244,7 @@
 
   &__add-custom-label {
     font-size: 16px;
+    font-weight: 400;
     line-height: 21px;
     margin-left: 22px;
     color: $scorpion;
@@ -274,9 +287,11 @@
     color: #5B5D67;
     font-family: Roboto;
     font-size: 18px;
+    font-weight: 400;
     line-height: 24px;
     margin-left: 24px;
     margin-top: 8px;
+    margin-bottom: 20px;
   }
 
   &__token-icons-container {
@@ -317,6 +332,7 @@
   }
 
   &__token-name {
+    font-weight: 400;
     font-size: 14px;
     line-height: 19px;
   }
@@ -368,6 +384,7 @@
       &__symbol {
         color: $scorpion;
         font-size: 16px;
+        font-weight: 400;
         line-height: 24px;
       }
     }
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index abe138f54..47762e8de 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -266,6 +266,7 @@ section .confirm-screen-account-number,
 
 .confirm-screen-total-box {
   background-color: $wild-sand;
+  position: relative;
 
   .confirm-screen-label {
     line-height: 21px;
@@ -287,6 +288,41 @@ section .confirm-screen-account-number,
   }
 }
 
+.confirm-screen-error {
+  font-size: 12px;
+  line-height: 12px;
+  color: #f00;
+  position: absolute;
+  right: 12px;
+  width: 80px;
+  text-align: right;
+}
+
+.confirm-screen-row.confirm-screen-total-box {
+  .confirm-screen-section-column--with-error {
+    flex: 0.6;
+  }
+}
+
+@media screen and (max-width: 379px) {
+  .confirm-screen-row.confirm-screen-total-box {
+    .confirm-screen-section-column--with-error {
+      flex: 0.4;
+    }
+  }
+}
+
+.confirm-screen-form {
+  position: relative;
+
+  .confirm-screen-error {
+    right: 0;
+    width: 100%;
+    margin-top: 7px;
+    text-align: center;
+  }
+}
+
 .confirm-screen-confirm-button {
   height: 50px;
   border-radius: 4px;
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 9dc4f1055..e8de317e3 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -10,9 +10,14 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   transition: linear 200ms;
   background-color: rgba($wallet-balance-bg, 0);
   position: relative;
+  flex: 1;
+  min-width: 0;
 
   &__token-balance {
     font-size: 1.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
@@ -51,7 +56,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   &__balance-ellipsis {
     display: flex;
     align-items: center;
-    width: 100%;
+    min-width: 0;
+    flex: 1;
   }
 
   &__ellipsis {
@@ -61,6 +67,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
   &__balance-wrapper {
     flex: 1 1 auto;
+    min-width: 0;
   }
 }
 
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 8a56d9c6c..18c444c8a 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -1,4 +1,4 @@
-@import url('/fonts/Font_Awesome/font-awesome.min.css');
+@import url('./fonts/Font_Awesome/font-awesome.min.css');
 
 @font-face {
   font-family: 'Roboto';
@@ -338,8 +338,8 @@
 
 @font-face {
   font-family: 'Montserrat Regular';
-  src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-size: 'small';
@@ -347,59 +347,59 @@
 
 @font-face {
   font-family: 'Montserrat Bold';
-  src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Bold.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat Light';
-  src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Light.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat UltraLight';
-  src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DIN OT';
-  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DIN OT Light';
-  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DIN NEXT';
-  src: url('/fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
+  src: url('./fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DIN NEXT Light';
-  src: url('/fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
+  src: url('./fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Lato';
-  src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
+  src: url('./fonts/Lato/Lato-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index 370fdd5b7..4ab5f06c0 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -1,20 +1,25 @@
 const inherits = require('util').inherits
 const EventEmitter = require('events').EventEmitter
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const Mascot = require('../components/mascot')
 const actions = require('../actions')
 const Tooltip = require('../components/tooltip')
-const t = require('../../i18n')
 const getCaretCoordinates = require('textarea-caret')
 const environmentType = require('../../../app/scripts/lib/environment-type')
 const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
 
 let isSubmitting = false
 
+InitializeMenuScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(InitializeMenuScreen)
 
+
 inherits(InitializeMenuScreen, Component)
 function InitializeMenuScreen () {
   Component.call(this)
@@ -60,7 +65,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
           color: '#7F8082',
           marginBottom: 10,
         },
-      }, t('appName')),
+      }, this.context.t('appName')),
 
 
       h('div', [
@@ -70,10 +75,10 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
             color: '#7F8082',
             display: 'inline',
           },
-        }, t('encryptNewDen')),
+        }, this.context.t('encryptNewDen')),
 
         h(Tooltip, {
-          title: t('denExplainer'),
+          title: this.context.t('denExplainer'),
         }, [
           h('i.fa.fa-question-circle.pointer', {
             style: {
@@ -93,7 +98,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
       h('input.large-input.letter-spacey', {
         type: 'password',
         id: 'password-box',
-        placeholder: t('newPassword'),
+        placeholder: this.context.t('newPassword'),
         onInput: this.inputChanged.bind(this),
         style: {
           width: 260,
@@ -105,7 +110,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
       h('input.large-input.letter-spacey', {
         type: 'password',
         id: 'password-box-confirm',
-        placeholder: t('confirmPassword'),
+        placeholder: this.context.t('confirmPassword'),
         onKeyPress: this.createVaultOnEnter.bind(this),
         onInput: this.inputChanged.bind(this),
         style: {
@@ -120,7 +125,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
         style: {
           margin: 12,
         },
-      }, t('createDen')),
+      }, this.context.t('createDen')),
 
       h('.flex-row.flex-center.flex-grow', [
         h('p.pointer', {
@@ -130,7 +135,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
             color: 'rgb(247, 134, 28)',
             textDecoration: 'underline',
           },
-        }, t('importDen')),
+        }, this.context.t('importDen')),
       ]),
 
       h('.flex-row.flex-center.flex-grow', [
@@ -179,12 +184,12 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
   var passwordConfirm = passwordConfirmBox.value
 
   if (password.length < 8) {
-    this.warning = t('passwordShort')
+    this.warning = this.context.t('passwordShort')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   if (password !== passwordConfirm) {
-    this.warning = t('passwordMismatch')
+    this.warning = this.context.t('passwordMismatch')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js
new file mode 100644
index 000000000..fe6d62c67
--- /dev/null
+++ b/ui/app/i18n-provider.js
@@ -0,0 +1,36 @@
+const { Component } = require('react')
+const connect = require('react-redux').connect
+const PropTypes = require('prop-types')
+const t = require('../i18n-helper').getMessage
+
+class I18nProvider extends Component {
+  getChildContext() {
+    const { localeMessages } = this.props
+    return {
+      t: t.bind(null, localeMessages),
+    }
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+I18nProvider.propTypes = {
+  localeMessages: PropTypes.object,
+  children: PropTypes.object,
+}
+
+I18nProvider.childContextTypes = {
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { localeMessages } = state
+  return {
+    localeMessages,
+  }
+}
+
+module.exports = connect(mapStateToProps)(I18nProvider)
+
diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js
index bc5339549..02183f096 100644
--- a/ui/app/keychains/hd/recover-seed/confirmation.js
+++ b/ui/app/keychains/hd/recover-seed/confirmation.js
@@ -1,13 +1,17 @@
 const inherits = require('util').inherits
-
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
-const t = require('../../../../i18n')
+
+RevealSeedConfirmation.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps)(RevealSeedConfirmation)
 
+
 inherits(RevealSeedConfirmation, Component)
 function RevealSeedConfirmation () {
   Component.call(this)
@@ -50,13 +54,13 @@ RevealSeedConfirmation.prototype.render = function () {
         },
       }, [
 
-        h('h4', t('revealSeedWordsWarning')),
+        h('h4', this.context.t('revealSeedWordsWarning')),
 
         // confirmation
         h('input.large-input.letter-spacey', {
           type: 'password',
           id: 'password-box',
-          placeholder: t('enterPasswordConfirm'),
+          placeholder: this.context.t('enterPasswordConfirm'),
           onKeyPress: this.checkConfirmation.bind(this),
           style: {
             width: 260,
@@ -92,7 +96,7 @@ RevealSeedConfirmation.prototype.render = function () {
         ),
 
         props.inProgress && (
-          h('span.in-progress-notification', t('generatingSeed'))
+          h('span.in-progress-notification', this.context.t('generatingSeed'))
         ),
       ]),
     ])
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index 5e4e004cf..38ad14adb 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -1,12 +1,17 @@
 const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const PersistentForm = require('../../../lib/persistent-form')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
-const t = require('../../../i18n')
 const actions = require('../../actions')
 
+RestoreVaultScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(RestoreVaultScreen)
 
+
 inherits(RestoreVaultScreen, PersistentForm)
 function RestoreVaultScreen () {
   PersistentForm.call(this)
@@ -37,23 +42,23 @@ RestoreVaultScreen.prototype.render = function () {
           padding: 6,
         },
       }, [
-        t('restoreVault'),
+        this.context.t('restoreVault'),
       ]),
 
       // wallet seed entry
-      h('h3', t('walletSeed')),
+      h('h3', this.context.t('walletSeed')),
       h('textarea.twelve-word-phrase.letter-spacey', {
         dataset: {
           persistentFormId: 'wallet-seed',
         },
-        placeholder: t('secretPhrase'),
+        placeholder: this.context.t('secretPhrase'),
       }),
 
       // password
       h('input.large-input.letter-spacey', {
         type: 'password',
         id: 'password-box',
-        placeholder: t('newPassword8Chars'),
+        placeholder: this.context.t('newPassword8Chars'),
         dataset: {
           persistentFormId: 'password',
         },
@@ -67,7 +72,7 @@ RestoreVaultScreen.prototype.render = function () {
       h('input.large-input.letter-spacey', {
         type: 'password',
         id: 'password-box-confirm',
-        placeholder: t('confirmPassword'),
+        placeholder: this.context.t('confirmPassword'),
         onKeyPress: this.createOnEnter.bind(this),
         dataset: {
           persistentFormId: 'password-confirmation',
@@ -97,7 +102,7 @@ RestoreVaultScreen.prototype.render = function () {
           style: {
             textTransform: 'uppercase',
           },
-        }, t('cancel')),
+        }, this.context.t('cancel')),
 
         // submit
         h('button.primary', {
@@ -105,7 +110,7 @@ RestoreVaultScreen.prototype.render = function () {
           style: {
             textTransform: 'uppercase',
           },
-        }, t('ok')),
+        }, this.context.t('ok')),
       ]),
     ])
   )
@@ -136,13 +141,13 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   var passwordConfirmBox = document.getElementById('password-box-confirm')
   var passwordConfirm = passwordConfirmBox.value
   if (password.length < 8) {
-    this.warning = t('passwordNotLongEnough')
+    this.warning = this.context.t('passwordNotLongEnough')
 
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   if (password !== passwordConfirm) {
-    this.warning = t('passwordsDontMatch')
+    this.warning = this.context.t('passwordsDontMatch')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
@@ -152,18 +157,18 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
 
   // true if the string has more than a space between words.
   if (seed.split('  ').length > 1) {
-    this.warning = t('spaceBetween')
+    this.warning = this.context.t('spaceBetween')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   // true if seed contains a character that is not between a-z or a space
   if (!seed.match(/^[a-z ]+$/)) {
-    this.warning = t('loweCaseWords')
+    this.warning = this.context.t('loweCaseWords')
       this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   if (seed.split(' ').length !== 12) {
-    this.warning = t('seedPhraseReq')
+    this.warning = this.context.t('seedPhraseReq')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
diff --git a/ui/app/metamask-connect.js b/ui/app/metamask-connect.js
new file mode 100644
index 000000000..8da594635
--- /dev/null
+++ b/ui/app/metamask-connect.js
@@ -0,0 +1,27 @@
+const connect = require('react-redux').connect
+const t = require('../i18n-helper').getMessage
+
+const metamaskConnect = (mapStateToProps, mapDispatchToProps) => {
+    return connect(
+        _higherOrderMapStateToProps(mapStateToProps),
+        mapDispatchToProps
+    )
+}
+
+const _higherOrderMapStateToProps = (mapStateToProps) => {
+    let _t
+    let currentLocale
+    return (state, ownProps = {}) => {
+        const stateProps = mapStateToProps
+            ? mapStateToProps(state, ownProps)
+            : ownProps
+        if (currentLocale !== state.metamask.currentLocale) {
+            currentLocale = state.metamask.currentLocale
+            _t = t.bind(null, state.localeMessages)
+        }
+        stateProps.t = _t
+        return stateProps
+    }
+}
+
+module.exports = metamaskConnect
\ No newline at end of file
diff --git a/ui/app/reducers.js b/ui/app/reducers.js
index 70b7e71dc..f155b2bf3 100644
--- a/ui/app/reducers.js
+++ b/ui/app/reducers.js
@@ -7,6 +7,7 @@ const copyToClipboard = require('copy-to-clipboard')
 const reduceIdentities = require('./reducers/identities')
 const reduceMetamask = require('./reducers/metamask')
 const reduceApp = require('./reducers/app')
+const reduceLocale = require('./reducers/locale')
 
 window.METAMASK_CACHED_LOG_STATE = null
 
@@ -38,6 +39,12 @@ function rootReducer (state, action) {
 
   state.appState = reduceApp(state, action)
 
+  //
+  // LocaleMessages
+  //
+
+  state.localeMessages = reduceLocale(state, action)
+
   window.METAMASK_CACHED_LOG_STATE = state
   return state
 }
diff --git a/ui/app/reducers/locale.js b/ui/app/reducers/locale.js
new file mode 100644
index 000000000..bdd97acb4
--- /dev/null
+++ b/ui/app/reducers/locale.js
@@ -0,0 +1,17 @@
+const extend = require('xtend')
+const actions = require('../actions')
+
+module.exports = reduceMetamask
+
+function reduceMetamask (state, action) {
+  const localeMessagesState = extend({}, state.localeMessages)
+
+  switch (action.type) {
+    case actions.SET_LOCALE_MESSAGES:
+      return extend(localeMessagesState, {
+        current: action.value,
+      })
+    default:
+      return localeMessagesState
+  }
+}
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 9cba5e83b..6d0a5bb10 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -47,6 +47,7 @@ function reduceMetamask (state, action) {
     networkEndpointType: OLD_UI_NETWORK_TYPE,
     isRevealingSeedWords: false,
     welcomeScreenSeen: false,
+    currentLocale: '',
   }, state.metamask)
 
   switch (action.type) {
@@ -357,6 +358,11 @@ function reduceMetamask (state, action) {
         welcomeScreenSeen: true,
       })
 
+    case action.SET_CURRENT_LOCALE:
+      return extend(metamaskState, {
+        currentLocale: action.value,
+      })
+
     default:
       return metamaskState
 
diff --git a/ui/app/select-app.js b/ui/app/select-app.js
index 193c98353..101eb1cf6 100644
--- a/ui/app/select-app.js
+++ b/ui/app/select-app.js
@@ -7,6 +7,7 @@ const OldApp = require('../../old-ui/app/app')
 const { autoAddToBetaUI } = require('./selectors')
 const { setFeatureFlag, setNetworkEndpoints } = require('./actions')
 const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
+const I18nProvider = require('./i18n-provider')
 
 function mapStateToProps (state) {
   return {
@@ -62,7 +63,7 @@ SelectedApp.prototype.render = function () {
   // const Selected = betaUI || isMascara || firstTime ? App : OldApp
 
   const { betaUI, isMascara } = this.props
-  const Selected = betaUI || isMascara ? App : OldApp
+  const Selected = betaUI || isMascara ? h(I18nProvider, [ h(App) ]) : h(OldApp)
 
-  return h(Selected)
+  return Selected
 }
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 620da73f8..094743ff0 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -1,7 +1,7 @@
 const { inherits } = require('util')
+const PropTypes = require('prop-types')
 const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
-const t = require('../i18n')
 
 const ethAbi = require('ethereumjs-abi')
 const ethUtil = require('ethereumjs-util')
@@ -27,9 +27,14 @@ const {
 const {
   isBalanceSufficient,
   isTokenBalanceSufficient,
+  getGasTotal,
 } = require('./components/send/send-utils')
 const { isValidAddress } = require('./util')
 
+SendTransactionScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = SendTransactionScreen
 
 inherits(SendTransactionScreen, PersistentForm)
@@ -128,7 +133,7 @@ SendTransactionScreen.prototype.updateGas = function () {
         estimateGas(estimateGasParams),
       ])
       .then(([gasPrice, gas]) => {
-        const newGasTotal = this.getGasTotal(gas, gasPrice)
+        const newGasTotal = getGasTotal(gas, gasPrice)
         updateGasTotal(newGasTotal)
         this.setState({ gasLoadingError: false })
       })
@@ -136,19 +141,11 @@ SendTransactionScreen.prototype.updateGas = function () {
         this.setState({ gasLoadingError: true })
       })
   } else {
-    const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
+    const newGasTotal = getGasTotal(gasLimit, gasPrice)
     updateGasTotal(newGasTotal)
   }
 }
 
-SendTransactionScreen.prototype.getGasTotal = function (gasLimit, gasPrice) {
-  return multiplyCurrencies(gasLimit, gasPrice, {
-    toNumericBase: 'hex',
-    multiplicandBase: 16,
-    multiplierBase: 16,
-  })
-}
-
 SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
   const {
     from: { balance },
@@ -189,9 +186,9 @@ SendTransactionScreen.prototype.renderHeader = function () {
 
   return h('div.page-container__header', [
 
-    h('div.page-container__title', selectedToken ? t('sendTokens') : t('sendETH')),
+    h('div.page-container__title', selectedToken ? this.context.t('sendTokens') : this.context.t('sendETH')),
 
-    h('div.page-container__subtitle', t('onlySendToEtherAddress')),
+    h('div.page-container__subtitle', this.context.t('onlySendToEtherAddress')),
 
     h('div.page-container__header-close', {
       onClick: () => {
@@ -257,16 +254,13 @@ SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
   const {
     updateSendTo,
     updateSendErrors,
-    from: {address: from},
   } = this.props
   let toError = null
 
   if (!to) {
-    toError = t('required')
+    toError = this.context.t('required')
   } else if (!isValidAddress(to)) {
-    toError = t('invalidAddressRecipient')
-  } else if (to === from) {
-    toError = t('fromToSame')
+    toError = this.context.t('invalidAddressRecipient')
   }
 
   updateSendTo(to, nickname)
@@ -282,9 +276,9 @@ SendTransactionScreen.prototype.renderToRow = function () {
 
     h('div.send-v2__form-label', [
 
-      t('to'),
+      this.context.t('to'),
 
-      this.renderErrorMessage(t('to')),
+      this.renderErrorMessage(this.context.t('to')),
 
     ]),
 
@@ -385,11 +379,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
   )
 
   if (conversionRate && !sufficientBalance) {
-    amountError = t('insufficientFunds')
+    amountError = this.context.t('insufficientFunds')
   } else if (verifyTokenBalance && !sufficientTokens) {
-    amountError = t('insufficientTokens')
+    amountError = this.context.t('insufficientTokens')
   } else if (amountLessThanZero) {
-    amountError = t('negativeETH')
+    amountError = this.context.t('negativeETH')
   }
 
   updateSendErrors({ amount: amountError })
@@ -419,7 +413,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
           setMaxModeTo(true)
           this.setAmountToMax()
         },
-      }, [ !maxModeOn ? t('max') : '' ]),
+      }, [ !maxModeOn ? this.context.t('max') : '' ]),
     ]),
 
     h('div.send-v2__form-field', [
@@ -448,7 +442,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {
 
   return h('div.send-v2__form-row', [
 
-    h('div.send-v2__form-label', h('gasFee')),
+    h('div.send-v2__form-label', this.context.t('gasFee')),
 
     h('div.send-v2__form-field', [
 
@@ -518,11 +512,11 @@ SendTransactionScreen.prototype.renderFooter = function () {
         clearSend()
         goHome()
       },
-    }, t('cancel')),
+    }, this.context.t('cancel')),
     h('button.btn-primary--lg.page-container__footer-button', {
       disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
-    }, t('next')),
+    }, this.context.t('next')),
   ])
 }
 
@@ -582,12 +576,17 @@ SendTransactionScreen.prototype.getEditedTx = function () {
       data,
     })
   } else {
-    const data = unapprovedTxs[editingTransactionId].txParams.data
+    const { data } = unapprovedTxs[editingTransactionId].txParams
+
     Object.assign(editingTx.txParams, {
       value: ethUtil.addHexPrefix(amount),
       to: ethUtil.addHexPrefix(to),
       data,
     })
+
+    if (typeof editingTx.txParams.data === 'undefined') {
+      delete editingTx.txParams.data
+    }
   }
 
   return editingTx
@@ -597,7 +596,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
   event.preventDefault()
   const {
     from: {address: from},
-    to,
+    to: _to,
     amount,
     gasLimit: gas,
     gasPrice,
@@ -616,6 +615,8 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     return
   }
 
+  const to = ethUtil.addHexPrefix(_to)
+
   this.addToAddressBookIfNew(to, toNickname)
 
   if (editingTransactionId) {
@@ -636,6 +637,10 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
       txParams.to = to
     }
 
+    Object.keys(txParams).forEach(key => {
+      txParams[key] = ethUtil.addHexPrefix(txParams[key])
+    })
+
     selectedToken
       ? signTokenTx(selectedToken.address, to, amount, txParams)
       : signTx(txParams)
diff --git a/ui/app/settings.js b/ui/app/settings.js
index 78ca6c94b..3aa7b9c6b 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { connect } = require('react-redux')
+const connect = require('react-redux').connect
 const actions = require('./actions')
 const infuraCurrencies = require('./infura-conversion.json')
 const validUrl = require('valid-url')
@@ -9,8 +9,8 @@ const { exportAsFile } = require('./util')
 const TabBar = require('./components/tab-bar')
 const SimpleDropdown = require('./components/dropdowns/simple-dropdown')
 const ToggleButton = require('react-toggle-button')
+const locales = require('../../app/_locales/index.json')
 const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
-const t = require('../i18n')
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -26,6 +26,16 @@ const getInfuraCurrencyOptions = () => {
   })
 }
 
+const getLocaleOptions = () => {
+  return locales.map((locale) => {
+    return {
+      displayValue: `${locale.name}`,
+      key: locale.code,
+      value: locale.code,
+    }
+  })
+}
+
 class Settings extends Component {
   constructor (props) {
     super(props)
@@ -45,8 +55,8 @@ class Settings extends Component {
     return h('div.settings__tabs', [
       h(TabBar, {
         tabs: [
-          { content: t('settings'), key: 'settings' },
-          { content: t('info'), key: 'info' },
+          { content: this.context.t('settings'), key: 'settings' },
+          { content: this.context.t('info'), key: 'info' },
         ],
         defaultTab: activeTab,
         tabSelected: key => this.setState({ activeTab: key }),
@@ -59,7 +69,7 @@ class Settings extends Component {
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
-        h('span', t('blockiesIdenticon')),
+        h('span', this.context.t('blockiesIdenticon')),
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
@@ -79,13 +89,13 @@ class Settings extends Component {
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
-        h('span', t('currentConversion')),
+        h('span', this.context.t('currentConversion')),
         h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
           h(SimpleDropdown, {
-            placeholder: t('selectCurrency'),
+            placeholder: this.context.t('selectCurrency'),
             options: getInfuraCurrencyOptions(),
             selectedOption: currentCurrency,
             onSelect: newCurrency => setCurrentCurrency(newCurrency),
@@ -95,6 +105,31 @@ class Settings extends Component {
     ])
   }
 
+  renderCurrentLocale () {
+    const { updateCurrentLocale, currentLocale } = this.props
+    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Current Language'),
+        h('span.settings__content-description', `${currentLocaleName}`),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(SimpleDropdown, {
+            placeholder: 'Select Locale',
+            options: getLocaleOptions(),
+            selectedOption: currentLocale,
+            onSelect: async (newLocale) => {
+              updateCurrentLocale(newLocale)
+            },
+          }),
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentProvider () {
     const { metamask: { provider = {} } } = this.props
     let title, value, color
@@ -102,31 +137,31 @@ class Settings extends Component {
     switch (provider.type) {
 
       case 'mainnet':
-        title = t('currentNetwork')
-        value = t('mainnet')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('mainnet')
         color = '#038789'
         break
 
       case 'ropsten':
-        title = t('currentNetwork')
-        value = t('ropsten')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('ropsten')
         color = '#e91550'
         break
 
       case 'kovan':
-        title = t('currentNetwork')
-        value = t('kovan')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('kovan')
         color = '#690496'
         break
 
       case 'rinkeby':
-        title = t('currentNetwork')
-        value = t('rinkeby')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('rinkeby')
         color = '#ebb33f'
         break
 
       default:
-        title = t('currentRpc')
+        title = this.context.t('currentRpc')
         value = provider.rpcTarget
     }
 
@@ -147,12 +182,12 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('span', t('newRPC')),
+          h('span', this.context.t('newRPC')),
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('input.settings__input', {
-              placeholder: t('newRPC'),
+              placeholder: this.context.t('newRPC'),
               onChange: event => this.setState({ newRpc: event.target.value }),
               onKeyPress: event => {
                 if (event.key === 'Enter') {
@@ -165,7 +200,7 @@ class Settings extends Component {
                 event.preventDefault()
                 this.validateRpc(this.state.newRpc)
               },
-            }, t('save')),
+            }, this.context.t('save')),
           ]),
         ]),
       ])
@@ -181,9 +216,9 @@ class Settings extends Component {
       const appendedRpc = `http://${newRpc}`
 
       if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(t('uriErrorMsg'))
+        displayWarning(this.context.t('uriErrorMsg'))
       } else {
-        displayWarning(t('invalidRPC'))
+        displayWarning(this.context.t('invalidRPC'))
       }
     }
   }
@@ -192,10 +227,10 @@ class Settings extends Component {
     return (
       h('div.settings__content-row', [
         h('div.settings__content-item', [
-          h('div', t('stateLogs')),
+          h('div', this.context.t('stateLogs')),
           h(
             'div.settings__content-description',
-            t('stateLogsDescription')
+            this.context.t('stateLogsDescription')
           ),
         ]),
         h('div.settings__content-item', [
@@ -204,13 +239,13 @@ class Settings extends Component {
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
-                    this.state.dispatch(actions.displayWarning(t('stateLogError')))
+                    this.state.dispatch(actions.displayWarning(this.context.t('stateLogError')))
                   } else {
                     exportAsFile('MetaMask State Logs.json', result)
                   }
                 })
               },
-            }, t('downloadStateLogs')),
+            }, this.context.t('downloadStateLogs')),
           ]),
         ]),
       ])
@@ -222,7 +257,7 @@ class Settings extends Component {
 
     return (
       h('div.settings__content-row', [
-        h('div.settings__content-item', t('revealSeedWords')),
+        h('div.settings__content-item', this.context.t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('button.btn-primary--lg.settings__button--red', {
@@ -230,7 +265,7 @@ class Settings extends Component {
                 event.preventDefault()
                 revealSeedConfirmation()
               },
-            }, t('revealSeedWords')),
+            }, this.context.t('revealSeedWords')),
           ]),
         ]),
       ])
@@ -242,7 +277,7 @@ class Settings extends Component {
 
     return (
       h('div.settings__content-row', [
-        h('div.settings__content-item', t('useOldUI')),
+        h('div.settings__content-item', this.context.t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
             h('button.btn-primary--lg.settings__button--orange', {
@@ -250,7 +285,7 @@ class Settings extends Component {
                 event.preventDefault()
                 setFeatureFlagToBeta()
               },
-            }, t('useOldUI')),
+            }, this.context.t('useOldUI')),
           ]),
         ]),
       ])
@@ -261,7 +296,7 @@ class Settings extends Component {
     const { showResetAccountConfirmationModal } = this.props
 
     return h('div.settings__content-row', [
-      h('div.settings__content-item', t('resetAccount')),
+      h('div.settings__content-item', this.context.t('resetAccount')),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
           h('button.btn-primary--lg.settings__button--orange', {
@@ -269,7 +304,7 @@ class Settings extends Component {
               event.preventDefault()
               showResetAccountConfirmationModal()
             },
-          }, t('resetAccount')),
+          }, this.context.t('resetAccount')),
         ]),
       ]),
     ])
@@ -282,6 +317,7 @@ class Settings extends Component {
       h('div.settings__content', [
         warning && h('div.settings__error', warning),
         this.renderCurrentConversion(),
+        this.renderCurrentLocale(),
         // this.renderCurrentProvider(),
         this.renderNewRpcUrl(),
         this.renderStateLogs(),
@@ -304,13 +340,13 @@ class Settings extends Component {
   renderInfoLinks () {
     return (
       h('div.settings__content-item.settings__content-item--without-height', [
-        h('div.settings__info-link-header', t('links')),
+        h('div.settings__info-link-header', this.context.t('links')),
         h('div.settings__info-link-item', [
           h('a', {
             href: 'https://metamask.io/privacy.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('privacyMsg')),
+            h('span.settings__info-link', this.context.t('privacyMsg')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -318,7 +354,7 @@ class Settings extends Component {
             href: 'https://metamask.io/terms.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('terms')),
+            h('span.settings__info-link', this.context.t('terms')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -326,7 +362,7 @@ class Settings extends Component {
             href: 'https://metamask.io/attributions.html',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('attributions')),
+            h('span.settings__info-link', this.context.t('attributions')),
           ]),
         ]),
         h('hr.settings__info-separator'),
@@ -335,7 +371,7 @@ class Settings extends Component {
             href: 'https://support.metamask.io',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('supportCenter')),
+            h('span.settings__info-link', this.context.t('supportCenter')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -343,7 +379,7 @@ class Settings extends Component {
             href: 'https://metamask.io/',
             target: '_blank',
           }, [
-            h('span.settings__info-link', t('visitWebSite')),
+            h('span.settings__info-link', this.context.t('visitWebSite')),
           ]),
         ]),
         h('div.settings__info-link-item', [
@@ -351,7 +387,7 @@ class Settings extends Component {
             target: '_blank',
             href: 'mailto:help@metamask.io?subject=Feedback',
           }, [
-            h('span.settings__info-link', t('emailUs')),
+            h('span.settings__info-link', this.context.t('emailUs')),
           ]),
         ]),
       ])
@@ -373,7 +409,7 @@ class Settings extends Component {
             h('div.settings__info-item', [
               h(
                 'div.settings__info-about',
-                t('builtInCalifornia')
+                this.context.t('builtInCalifornia')
               ),
             ]),
           ]),
@@ -417,6 +453,9 @@ Settings.propTypes = {
   warning: PropTypes.string,
   goHome: PropTypes.func,
   isMascara: PropTypes.bool,
+  updateCurrentLocale: PropTypes.func,
+  currentLocale: PropTypes.string,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
@@ -424,6 +463,7 @@ const mapStateToProps = state => {
     metamask: state.metamask,
     warning: state.appState.warning,
     isMascara: state.metamask.isMascara,
+    currentLocale: state.metamask.currentLocale,
   }
 }
 
@@ -435,6 +475,7 @@ const mapDispatchToProps = dispatch => {
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
     setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+    updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
     setFeatureFlagToBeta: () => {
       return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
         .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
@@ -445,5 +486,9 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+Settings.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings)
 
diff --git a/ui/app/store.js b/ui/app/store.js
index 3bafdee11..feebbabc0 100644
--- a/ui/app/store.js
+++ b/ui/app/store.js
@@ -4,7 +4,7 @@ const thunkMiddleware = require('redux-thunk').default
 const rootReducer = require('./reducers')
 const createLogger = require('redux-logger').createLogger
 
-global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
+global.METAMASK_DEBUG = process.env.METAMASK_DEBUG
 
 module.exports = configureStore
 
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 322808619..84d8b7e7c 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -1,18 +1,23 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
-const t = require('../i18n')
 const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
 const environmentType = require('../../app/scripts/lib/environment-type')
 
 const Mascot = require('./components/mascot')
 
+UnlockScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(UnlockScreen)
 
+
 inherits(UnlockScreen, Component)
 function UnlockScreen () {
   Component.call(this)
@@ -41,7 +46,7 @@ UnlockScreen.prototype.render = function () {
           textTransform: 'uppercase',
           color: '#7F8082',
         },
-      }, t('appName')),
+      }, this.context.t('appName')),
 
       h('input.large-input', {
         type: 'password',
@@ -67,7 +72,7 @@ UnlockScreen.prototype.render = function () {
         style: {
           margin: 10,
         },
-      }, t('login')),
+      }, this.context.t('login')),
 
       h('p.pointer', {
         onClick: () => {
@@ -81,7 +86,7 @@ UnlockScreen.prototype.render = function () {
           color: 'rgb(247, 134, 28)',
           textDecoration: 'underline',
         },
-      }, t('restoreFromSeed')),
+      }, this.context.t('restoreFromSeed')),
 
       h('p.pointer', {
         onClick: () => {
@@ -94,7 +99,7 @@ UnlockScreen.prototype.render = function () {
           textDecoration: 'underline',
           marginTop: '32px',
         },
-      }, t('classicInterface')),
+      }, this.context.t('classicInterface')),
     ])
   )
 }
diff --git a/ui/app/util.js b/ui/app/util.js
index 800ccb218..bbe2bb09e 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -271,6 +271,7 @@ function exportAsFile (filename, data) {
     window.navigator.msSaveBlob(blob, filename)
   } else {
     const elem = window.document.createElement('a')
+    elem.target = '_blank'
     elem.href = window.URL.createObjectURL(blob)
     elem.download = filename
     document.body.appendChild(elem)