Merge pull request #3788 from danjm/i3787-make-t-available-via-context

i18n - Removes t from props via metamask-connect; put t on context

53 files changed, 537 insertions, 287 deletions

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 84678fee6..03955e077 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
@@ -79,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', this.props.t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
     } catch (e) { return }
   }
 
@@ -129,7 +129,7 @@ class AccountDropdowns extends Component {
                 diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.props.t('createAccount')),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')),
           ],
         ),
         h(
@@ -154,7 +154,7 @@ class AccountDropdowns extends Component {
                 fontSize: '24px',
                 marginBottom: '5px',
               },
-            }, this.props.t('importAccount')),
+            }, this.context.t('importAccount')),
           ]
         ),
       ]
@@ -192,7 +192,7 @@ class AccountDropdowns extends Component {
               global.platform.openWindow({ url })
             },
           },
-          this.props.t('etherscanView'),
+          this.context.t('etherscanView'),
         ),
         h(
           DropdownMenuItem,
@@ -204,7 +204,7 @@ class AccountDropdowns extends Component {
               actions.showQrView(selected, identity ? identity.name : '')
             },
           },
-          this.props.t('showQRCode'),
+          this.context.t('showQRCode'),
         ),
         h(
           DropdownMenuItem,
@@ -216,7 +216,7 @@ class AccountDropdowns extends Component {
               copyToClipboard(checkSumAddress)
             },
           },
-          this.props.t('copyAddress'),
+          this.context.t('copyAddress'),
         ),
         h(
           DropdownMenuItem,
@@ -226,7 +226,7 @@ class AccountDropdowns extends Component {
               actions.requestAccountExport()
             },
           },
-          this.props.t('exportPrivateKey'),
+          this.context.t('exportPrivateKey'),
         ),
       ]
     )
@@ -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 8889f88a7..865207487 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -1,14 +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('../metamask-connect')
+const connect = require('react-redux').connect
+
+ExportAccountView.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect(mapStateToProps)(ExportAccountView)
 
+
 inherits(ExportAccountView, Component)
 function ExportAccountView () {
   Component.call(this)
@@ -35,7 +41,7 @@ ExportAccountView.prototype.render = function () {
   if (notExporting) return h('div')
 
   if (exportRequested) {
-    const warning = this.props.t('exportPrivateKeyWarning')
+    const warning = this.context.t('exportPrivateKeyWarning')
     return (
       h('div', {
         style: {
@@ -53,7 +59,7 @@ ExportAccountView.prototype.render = function () {
             h('p.error', warning),
             h('input#exportAccount.sizing-input', {
               type: 'password',
-              placeholder: this.props.t('confirmPassword').toLowerCase(),
+              placeholder: this.context.t('confirmPassword').toLowerCase(),
               onKeyPress: this.onExportKeyPress.bind(this),
               style: {
                 position: 'relative',
@@ -74,10 +80,10 @@ ExportAccountView.prototype.render = function () {
                 style: {
                   marginRight: '10px',
                 },
-              }, this.props.t('submit')),
+              }, this.context.t('submit')),
               h('button', {
                 onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-              }, this.props.t('cancel')),
+              }, this.context.t('cancel')),
             ]),
           (this.props.warning) && (
           h('span.error', {
@@ -98,7 +104,7 @@ ExportAccountView.prototype.render = function () {
         margin: '0 20px',
       },
     }, [
-      h('label', this.props.t('copyPrivateKey') + ':'),
+      h('label', this.context.t('copyPrivateKey') + ':'),
       h('p.error.cursor-pointer', {
         style: {
           textOverflow: 'ellipsis',
@@ -112,13 +118,13 @@ ExportAccountView.prototype.render = function () {
       }, plainKey),
       h('button', {
         onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-      }, this.props.t('done')),
+      }, this.context.t('done')),
       h('button', {
         style: {
           marginLeft: '10px',
         },
         onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
-      }, this.props.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 a9120f9db..21de358d6 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -1,14 +1,20 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+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')
 
+AccountMenu.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
 
+
 inherits(AccountMenu, Component)
 function AccountMenu () { Component.call(this) }
 
@@ -70,10 +76,10 @@ AccountMenu.prototype.render = function () {
     h(Item, {
       className: 'account-menu__header',
     }, [
-      this.props.t('myAccounts'),
+      this.context.t('myAccounts'),
       h('button.account-menu__logout-button', {
         onClick: lockMetamask,
-      }, this.props.t('logout')),
+      }, this.context.t('logout')),
     ]),
     h(Divider),
     h('div.account-menu__accounts', this.renderAccounts()),
@@ -81,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: this.props.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: this.props.t('importAccount'),
+      text: this.context.t('importAccount'),
     }),
     h(Divider),
     h(Item, {
       onClick: showInfoPage,
       icon: h('img', { src: 'images/mm-info-icon.svg' }),
-      text: this.props.t('infoHelp'),
+      text: this.context.t('infoHelp'),
     }),
     h(Item, {
       onClick: showConfigPage,
       icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
-      text: this.props.t('settings'),
+      text: this.context.t('settings'),
     }),
   ])
 }
@@ -155,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', this.props.t('imported')) : null
+    return isLoose ? h('.keyring-label.allcaps', this.context.t('imported')) : null
   } catch (e) { return }
 }
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index f6292e358..d591ab455 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 0ace2b840..9a033f893 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -1,13 +1,19 @@
 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 connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+BnAsDecimalInput.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(BnAsDecimalInput)
 
+
 inherits(BnAsDecimalInput, Component)
 function BnAsDecimalInput () {
   this.state = { invalid: null }
@@ -137,13 +143,13 @@ BnAsDecimalInput.prototype.constructWarning = function () {
   let message = name ? name + ' ' : ''
 
   if (min && max) {
-    message += this.props.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
+    message += this.context.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
   } else if (min) {
-    message += this.props.t('greaterThanMin', [`${newMin} ${suffix}`])
+    message += this.context.t('greaterThanMin', [`${newMin} ${suffix}`])
   } else if (max) {
-    message += this.props.t('lessThanMax', [`${newMax} ${suffix}`])
+    message += this.context.t('lessThanMax', [`${newMax} ${suffix}`])
   } else {
-    message += this.props.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 eafa2af91..9ac565cf4 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
@@ -10,8 +11,13 @@ const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const networkNames = require('../../../app/scripts/config.js').networkNames
 
+BuyButtonSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
+
 function mapStateToProps (state) {
   return {
     identity: state.appState.identity,
@@ -76,7 +82,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
             paddingTop: '4px',
             paddingBottom: '4px',
           },
-        }, this.props.t('depositEth')),
+        }, this.context.t('depositEth')),
       ]),
 
       // loading indication
@@ -118,7 +124,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
             paddingTop: '4px',
             paddingBottom: '4px',
           },
-        }, this.props.t('selectService')),
+        }, this.context.t('selectService')),
       ]),
 
     ])
@@ -143,7 +149,7 @@ BuyButtonSubview.prototype.primarySubview = function () {
     case '4':
     case '42':
       const networkName = networkNames[network]
-      const label = `${networkName} ${this.props.t('testFaucet')}`
+      const label = `${networkName} ${this.context.t('testFaucet')}`
       return (
         h('div.flex-column', {
           style: {
@@ -164,14 +170,14 @@ BuyButtonSubview.prototype.primarySubview = function () {
               style: {
                 marginTop: '15px',
               },
-            }, this.props.t('borrowDharma'))
+            }, this.context.t('borrowDharma'))
           ) : null,
       ])
     )
 
     default:
       return (
-        h('h2.error', this.props.t('unknownNetworkId'))
+        h('h2.error', this.context.t('unknownNetworkId'))
       )
 
   }
@@ -203,8 +209,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
             'ShapeShift',
           ],
           subtext: {
-            'Coinbase': `${this.props.t('crypto')}/${this.props.t('fiat')} (${this.props.t('usaOnly')})`,
-            'ShapeShift': this.props.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 0f980fbd5..d5915292e 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.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 connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../actions')
 
+CoinbaseForm.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 
+
 function mapStateToProps (state) {
   return {
     warning: state.appState.warning,
@@ -37,11 +43,11 @@ CoinbaseForm.prototype.render = function () {
     }, [
       h('button.btn-green', {
         onClick: this.toCoinbase.bind(this),
-      }, this.props.t('continueToCoinbase')),
+      }, this.context.t('continueToCoinbase')),
 
       h('button.btn-red', {
         onClick: () => props.dispatch(actions.goHome()),
-      }, this.props.t('cancel')),
+      }, this.context.t('cancel')),
     ]),
   ])
 }
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index ea1c43d54..a60d33523 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -1,13 +1,19 @@
 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 connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 
 const Tooltip = require('./tooltip')
 
+CopyButton.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(CopyButton)
 
+
 inherits(CopyButton, Component)
 function CopyButton () {
   Component.call(this)
@@ -23,7 +29,7 @@ CopyButton.prototype.render = function () {
   const value = props.value
   const copied = state.copied
 
-  const message = copied ? this.props.t('copiedButton') : props.title || this.props.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 28def9adb..ad504deb8 100644
--- a/ui/app/components/copyable.js
+++ b/ui/app/components/copyable.js
@@ -1,13 +1,19 @@
 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 connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+Copyable.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(Copyable)
 
+
 inherits(Copyable, Component)
 function Copyable () {
   Component.call(this)
@@ -23,7 +29,7 @@ Copyable.prototype.render = function () {
   const { copied } = state
 
   return h(Tooltip, {
-    title: copied ? this.props.t('copiedExclamation') : this.props.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 8234f8d19..825366cb2 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
 
@@ -94,8 +95,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,
@@ -149,7 +155,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
   })
 
   if (!balanceIsSufficient) {
-    error = this.props.t('balanceIsInsufficientGas')
+    error = this.context.t('balanceIsInsufficientGas')
   }
 
   const gasLimitTooLow = gasLimit && conversionGreaterThan(
@@ -165,7 +171,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
   )
 
   if (gasLimitTooLow) {
-    error = this.props.t('gasLimitTooLow')
+    error = this.context.t('gasLimitTooLow')
   }
 
   this.setState({ error })
@@ -258,7 +264,7 @@ CustomizeGasModal.prototype.render = function () {
     }, [
       h('div.send-v2__customize-gas__header', {}, [
 
-        h('div.send-v2__customize-gas__title', this.props.t('customGas')),
+        h('div.send-v2__customize-gas__title', this.context.t('customGas')),
 
         h('div.send-v2__customize-gas__close', {
           onClick: hideModal,
@@ -274,8 +280,8 @@ CustomizeGasModal.prototype.render = function () {
           // max: 1000,
           step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
           onChange: value => this.convertAndSetGasPrice(value),
-          title: this.props.t('gasPrice'),
-          copy: this.props.t('gasPriceCalculation'),
+          title: this.context.t('gasPrice'),
+          copy: this.context.t('gasPriceCalculation'),
         }),
 
         h(GasModalCard, {
@@ -284,8 +290,8 @@ CustomizeGasModal.prototype.render = function () {
           // max: 100000,
           step: 1,
           onChange: value => this.convertAndSetGasLimit(value),
-          title: this.props.t('gasLimit'),
-          copy: this.props.t('gasLimitCalculation'),
+          title: this.context.t('gasLimit'),
+          copy: this.context.t('gasLimitCalculation'),
         }),
 
       ]),
@@ -298,7 +304,7 @@ CustomizeGasModal.prototype.render = function () {
 
         h('div.send-v2__customize-gas__revert', {
           onClick: () => this.revert(),
-        }, [this.props.t('revert')]),
+        }, [this.context.t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
           h('button.btn-secondary.send-v2__customize-gas__cancel', {
@@ -306,12 +312,12 @@ CustomizeGasModal.prototype.render = function () {
             style: {
               marginRight: '10px',
             },
-          }, [this.props.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',
-          }, [this.props.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 5e7c0d554..a133f0e29 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
-const connect = require('../../../metamask-connect')
+const connect = require('react-redux').connect
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('../../identicon')
@@ -130,7 +130,7 @@ class AccountDropdowns extends Component {
                   actions.showEditAccountModal(identity)
                 },
               }, [
-                this.props.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', this.props.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',
               },
-            }, this.props.t('createAccount')),
+            }, this.context.t('createAccount')),
           ],
         ),
         h(
@@ -236,7 +236,7 @@ class AccountDropdowns extends Component {
                 fontSize: '16px',
                 lineHeight: '23px',
               },
-            }, this.props.t('importAccount')),
+            }, this.context.t('importAccount')),
           ]
         ),
       ]
@@ -287,7 +287,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          this.props.t('accountDetails'),
+          this.context.t('accountDetails'),
         ),
         h(
           DropdownMenuItem,
@@ -303,7 +303,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          this.props.t('etherscanView'),
+          this.context.t('etherscanView'),
         ),
         h(
           DropdownMenuItem,
@@ -319,7 +319,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          this.props.t('copyAddress'),
+          this.context.t('copyAddress'),
         ),
         h(
           DropdownMenuItem,
@@ -331,7 +331,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          this.props.t('exportPrivateKey'),
+          this.context.t('exportPrivateKey'),
         ),
         h(
           DropdownMenuItem,
@@ -346,7 +346,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          this.props.t('addToken'),
+          this.context.t('addToken'),
         ),
 
       ]
@@ -464,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 aac7a9ee5..94e5d967b 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
@@ -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', {}, this.props.t('networks')),
+      h('div.network-dropdown-title', {}, this.context.t('networks')),
 
       h('div.network-dropdown-divider'),
 
       h('div.network-dropdown-content',
         {},
-        this.props.t('defaultNetwork')
+        this.context.t('defaultNetwork')
       ),
     ]),
 
@@ -122,7 +128,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.props.t('mainnet')),
+        }, this.context.t('mainnet')),
       ]
     ),
 
@@ -144,7 +150,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.props.t('ropsten')),
+        }, this.context.t('ropsten')),
       ]
     ),
 
@@ -166,7 +172,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.props.t('kovan')),
+        }, this.context.t('kovan')),
       ]
     ),
 
@@ -188,7 +194,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.props.t('rinkeby')),
+        }, this.context.t('rinkeby')),
       ]
     ),
 
@@ -210,7 +216,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.props.t('localhost')),
+        }, this.context.t('localhost')),
       ]
     ),
 
@@ -234,7 +240,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.props.t('customRPC')),
+        }, this.context.t('customRPC')),
       ]
     ),
 
@@ -249,15 +255,15 @@ NetworkDropdown.prototype.getNetworkName = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = this.props.t('mainnet')
+    name = this.context.t('mainnet')
   } else if (providerName === 'ropsten') {
-    name = this.props.t('ropsten')
+    name = this.context.t('ropsten')
   } else if (providerName === 'kovan') {
-    name = this.props.t('kovan')
+    name = this.context.t('kovan')
   } else if (providerName === 'rinkeby') {
-    name = this.props.t('rinkeby')
+    name = this.context.t('rinkeby')
   } else {
-    name = this.props.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 630e1f99d..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('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 
 
+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()
           },
-        }, this.props.t('hideToken')),
+        }, this.context.t('hideToken')),
 
       ]),
     ]),
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 922f24d40..1f3946817 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,16 @@ const ENS = require('ethjs-ens')
 const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const ToAutoComplete = require('./send/to-autocomplete')
 
+EnsInput.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(EnsInput)
 
+
 inherits(EnsInput, Component)
 function EnsInput () {
   Component.call(this)
@@ -70,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(this.props.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' + this.props.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 be7ba4c9e..75303a34a 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -1,13 +1,19 @@
 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 connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+HexAsDecimalInput.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(HexAsDecimalInput)
 
+
 inherits(HexAsDecimalInput, Component)
 function HexAsDecimalInput () {
   this.state = { invalid: null }
@@ -127,13 +133,13 @@ HexAsDecimalInput.prototype.constructWarning = function () {
   let message = name ? name + ' ' : ''
 
   if (min && max) {
-    message += this.props.t('betweenMinAndMax', [min, max])
+    message += this.context.t('betweenMinAndMax', [min, max])
   } else if (min) {
-    message += this.props.t('greaterThanMin', [min])
+    message += this.context.t('greaterThanMin', [min])
   } else if (max) {
-    message += this.props.t('lessThanMax', [max])
+    message += this.context.t('lessThanMax', [max])
   } else {
-    message += this.props.t('invalidInput')
+    message += this.context.t('invalidInput')
   }
 
   return message
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 6b2a1b428..b803b7ceb 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index c43e3e3a5..d9885daf5 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
@@ -33,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
 
@@ -64,12 +70,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('button.btn-primary.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, this.props.t('etherscanView')),
+      }, this.context.t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-primary.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, this.props.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 70efe16cb..a9856b20f 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
@@ -25,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,
@@ -59,7 +65,7 @@ AccountModalContainer.prototype.render = function () {
 
         h('i.fa.fa-angle-left.fa-lg'),
 
-        h('span.account-modal-back__text', ' ' + this.props.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 c0ee3632e..d871e7516 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 
@@ -32,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,
@@ -56,15 +62,15 @@ BuyOptions.prototype.render = function () {
       }, [
         h('div.buy-modal-content-title', {
           style: {},
-        }, this.props.t('transfers')),
-        h('div', {}, this.props.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, this.props.t('testFaucet'), () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', this.props.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'),
@@ -72,8 +78,8 @@ BuyOptions.prototype.render = function () {
         // ]),,
 
         this.renderModalContentOption(
-          this.props.t('directDeposit'),
-          this.props.t('depositFromAccount'),
+          this.context.t('directDeposit'),
+          this.context.t('depositFromAccount'),
           () => this.goToAccountDetailsModal()
         ),
 
@@ -84,7 +90,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.props.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 e38899d04..8854d258f 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
@@ -40,27 +41,32 @@ function mapDispatchToProps (dispatch) {
 }
 
 inherits(DepositEtherModal, Component)
-function DepositEtherModal (props) {
+function DepositEtherModal (props, context) {
   Component.call(this)
 
   // need to set after i18n locale has loaded
-  DIRECT_DEPOSIT_ROW_TITLE = props.t('directDepositEther')
-  DIRECT_DEPOSIT_ROW_TEXT = props.t('directDepositEtherExplainer')
-  COINBASE_ROW_TITLE = props.t('buyCoinbase')
-  COINBASE_ROW_TEXT = props.t('buyCoinbaseExplainer')
-  SHAPESHIFT_ROW_TITLE = props.t('depositShapeShift')
-  SHAPESHIFT_ROW_TEXT = props.t('depositShapeShiftExplainer')
-  FAUCET_ROW_TITLE = props.t('testFaucet')
+  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.props.t('getEtherFromFaucet', [networkName])
+  return this.context.t('getEtherFromFaucet', [networkName])
 }
 
 DepositEtherModal.prototype.renderRow = function ({
@@ -122,10 +128,10 @@ DepositEtherModal.prototype.render = function () {
 
     h('div.page-container__header', [
 
-      h('div.page-container__title', [this.props.t('depositEther')]),
+      h('div.page-container__title', [this.context.t('depositEther')]),
 
       h('div.page-container__subtitle', [
-        this.props.t('needEtherInWallet'),
+        this.context.t('needEtherInWallet'),
       ]),
 
       h('div.page-container__header-close', {
@@ -148,7 +154,7 @@ DepositEtherModal.prototype.render = function () {
           }),
           title: DIRECT_DEPOSIT_ROW_TITLE,
           text: DIRECT_DEPOSIT_ROW_TEXT,
-          buttonLabel: this.props.t('viewAccount'),
+          buttonLabel: this.context.t('viewAccount'),
           onButtonClick: () => this.goToAccountDetailsModal(),
           hide: buyingWithShapeshift,
         }),
@@ -157,7 +163,7 @@ DepositEtherModal.prototype.render = function () {
           logo: h('i.fa.fa-tint.fa-2x'),
           title: FAUCET_ROW_TITLE,
           text: this.facuetRowText(networkName),
-          buttonLabel: this.props.t('getEther'),
+          buttonLabel: this.context.t('getEther'),
           onButtonClick: () => toFaucet(network),
           hide: !isTestNetwork || buyingWithShapeshift,
         }),
@@ -171,7 +177,7 @@ DepositEtherModal.prototype.render = function () {
           }),
           title: COINBASE_ROW_TITLE,
           text: COINBASE_ROW_TEXT,
-          buttonLabel: this.props.t('continueToCoinbase'),
+          buttonLabel: this.context.t('continueToCoinbase'),
           onButtonClick: () => toCoinbase(address),
           hide: isTestNetwork || buyingWithShapeshift,
         }),
@@ -184,7 +190,7 @@ DepositEtherModal.prototype.render = function () {
           }),
           title: SHAPESHIFT_ROW_TITLE,
           text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: this.props.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 4f5bc001a..c79645dbf 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
 
@@ -32,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
 
@@ -50,7 +56,7 @@ EditAccountNameModal.prototype.render = function () {
       ]),
 
       h('div.edit-account-name-modal-title', {
-      }, [this.props.t('editAccountName')]),
+      }, [this.context.t('editAccountName')]),
 
       h('input.edit-account-name-modal-input', {
         placeholder: identity.name,
@@ -69,7 +75,7 @@ EditAccountNameModal.prototype.render = function () {
         },
         disabled: this.state.inputText.length === 0,
       }, [
-        this.props.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 d5a1ba7b8..1f80aed39 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const ethUtil = require('ethereumjs-util')
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
@@ -37,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
 
@@ -48,8 +54,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo
 
 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
   return h('span.private-key-password-label', privateKey
-    ? this.props.t('copyPrivateKey')
-    : this.props.t('typePassword')
+    ? this.context.t('copyPrivateKey')
+    : this.context.t('typePassword')
   )
 }
 
@@ -86,8 +92,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
     ),
 
     (privateKey
-      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.props.t('done'))
-      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.props.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'))
     ),
 
   ])
@@ -120,7 +126,7 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('span.modal-body-title', this.props.t('showPrivateKeys')),
+      h('span.modal-body-title', this.context.t('showPrivateKeys')),
 
       h('div.private-key-password', {}, [
         this.renderPasswordLabel(privateKey),
@@ -130,7 +136,7 @@ ExportPrivateKeyModal.prototype.render = function () {
         !warning ? null : h('span.private-key-password-error', warning),
       ]),
 
-      h('div.private-key-password-warning', this.props.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 5207b4c95..72e9c84eb 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')
 
@@ -31,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
@@ -41,7 +47,7 @@ HideTokenConfirmationModal.prototype.render = function () {
     h('div.hide-token-confirmation__container', {
     }, [
       h('div.hide-token-confirmation__title', {}, [
-        this.props.t('hideTokenPrompt'),
+        this.context.t('hideTokenPrompt'),
       ]),
 
       h(Identicon, {
@@ -54,19 +60,19 @@ HideTokenConfirmationModal.prototype.render = function () {
       h('div.hide-token-confirmation__symbol', {}, symbol),
 
       h('div.hide-token-confirmation__copy', {}, [
-        this.props.t('readdToken'),
+        this.context.t('readdToken'),
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
         h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
           onClick: () => hideModal(),
         }, [
-          this.props.t('cancel'),
+          this.context.t('cancel'),
         ]),
         h('button.btn-clear.hide-token-confirmation__button.allcaps', {
           onClick: () => hideToken(address),
         }, [
-          this.props.t('hide'),
+          this.context.t('hide'),
         ]),
       ]),
     ]),
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 372b65251..0635b3f72 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 
 class NewAccountModal extends Component {
@@ -11,7 +11,7 @@ class NewAccountModal extends Component {
     const newAccountNumber = numberOfExistingAccounts + 1
 
     this.state = {
-      newAccountName: `${props.t('account')} ${newAccountNumber}`,
+      newAccountName: `${this.context.t('account')} ${newAccountNumber}`,
     }
   }
 
@@ -22,7 +22,7 @@ class NewAccountModal extends Component {
       h('div.new-account-modal-wrapper', {
       }, [
         h('div.new-account-modal-header', {}, [
-          this.props.t('newAccount'),
+          this.context.t('newAccount'),
         ]),
 
         h('div.modal-close-x', {
@@ -30,19 +30,19 @@ class NewAccountModal extends Component {
         }),
 
         h('div.new-account-modal-content', {}, [
-          this.props.t('accountName'),
+          this.context.t('accountName'),
         ]),
 
         h('div.new-account-input-wrapper', {}, [
           h('input.new-account-input', {
             value: this.state.newAccountName,
-            placeholder: this.props.t('sampleAccountName'),
+            placeholder: this.context.t('sampleAccountName'),
             onChange: event => this.setState({ newAccountName: event.target.value }),
           }, []),
         ]),
 
         h('div.new-account-modal-content.after-input', {}, [
-          this.props.t('or'),
+          this.context.t('or'),
         ]),
 
         h('div.new-account-modal-content.after-input.pointer', {
@@ -50,13 +50,13 @@ class NewAccountModal extends Component {
             this.props.hideModal()
             this.props.showImportPage()
           },
-        }, this.props.t('importAnAccount')),
+        }, this.context.t('importAnAccount')),
 
         h('div.new-account-modal-content.button.allcaps', {}, [
           h('button.btn-clear', {
             onClick: () => this.props.createAccount(newAccountName),
           }, [
-            this.props.t('save'),
+            this.context.t('save'),
           ]),
         ]),
       ]),
@@ -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 5d6dca177..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('../../metamask-connect')
+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', {}, [
-          this.props.t(header),
+          this.context.t(header),
         ]),
 
         h('div.notification-modal__message-wrapper', {}, [
           h('div.notification-modal__message', {}, [
-            this.props.t(message),
+            this.context.t(message),
           ]),
         ]),
 
@@ -73,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 94ee997ab..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('../../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const NotifcationModal = require('../notification-modal')
 
diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
index 28dcb1902..24af5a0de 100644
--- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const QrView = require('../qr-code')
 const AccountModalContainer = require('./account-modal-container')
diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js
index 111a82be1..59719d9a4 100644
--- a/ui/app/components/network-display.js
+++ b/ui/app/components/network-display.js
@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
 
 const networkToColorHash = {
@@ -30,7 +30,7 @@ class NetworkDisplay extends Component {
     const { provider: { type } } = this.props
     return h('.network-display__container', [
       this.renderNetworkIcon(),
-      h('.network-name', this.props.t(type)),
+      h('.network-name', this.context.t(type)),
     ])
   }
 }
@@ -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 10961390e..83297c4f2 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const classnames = require('classnames')
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
 
+Network.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(Network)
 
+
 inherits(Network, Component)
 
 function Network () {
@@ -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: props.t('attemptingConnect'),
+        title: context.t('attemptingConnect'),
         style: {
           width: '27px',
         },
@@ -42,22 +49,22 @@ Network.prototype.render = function () {
       }),
     ])
   } else if (providerName === 'mainnet') {
-    hoverText = props.t('mainnet')
+    hoverText = context.t('mainnet')
     iconName = 'ethereum-network'
   } else if (providerName === 'ropsten') {
-    hoverText = props.t('ropsten')
+    hoverText = context.t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (parseInt(networkNumber) === 3) {
-    hoverText = props.t('ropsten')
+    hoverText = context.t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (providerName === 'kovan') {
-    hoverText = props.t('kovan')
+    hoverText = context.t('kovan')
     iconName = 'kovan-test-network'
   } else if (providerName === 'rinkeby') {
-    hoverText = props.t('rinkeby')
+    hoverText = context.t('rinkeby')
     iconName = 'rinkeby-test-network'
   } else {
-    hoverText = props.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', props.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', props.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', props.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', props.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', props.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 a999ffd88..bb7e0814c 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -1,13 +1,19 @@
 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 connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+Notice.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(Notice)
 
+
 inherits(Notice, Component)
 function Notice () {
   Component.call(this)
@@ -111,7 +117,7 @@ Notice.prototype.render = function () {
         style: {
           marginTop: '18px',
         },
-      }, this.props.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 ddec8470d..f16fcb1c7 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.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('../metamask-connect')
+const connect = require('react-redux').connect
 
 const AccountPanel = require('./account-panel')
 
+PendingMsgDetails.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(PendingMsgDetails)
 
+
 inherits(PendingMsgDetails, Component)
 function PendingMsgDetails () {
   Component.call(this)
@@ -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', this.props.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 56e646a1c..21a7864e4 100644
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.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 PendingTxDetails = require('./pending-msg-details')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+PendingMsg.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(PendingMsg)
 
+
 inherits(PendingMsg, Component)
 function PendingMsg () {
   Component.call(this)
@@ -30,14 +36,14 @@ PendingMsg.prototype.render = function () {
           fontWeight: 'bold',
           textAlign: 'center',
         },
-      }, this.props.t('signMessage')),
+      }, this.context.t('signMessage')),
 
       h('.error', {
         style: {
           margin: '10px',
         },
       }, [
-        this.props.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 })
           },
-        }, this.props.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,
-        }, this.props.t('cancel')),
+        }, this.context.t('cancel')),
         h('button', {
           onClick: state.signMessage,
-        }, this.props.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 f41fa51e6..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('../../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const actions = require('../../actions')
@@ -32,7 +32,7 @@ class ConfirmDeployContract extends Component {
     if (valid && this.verifyGasParams()) {
       this.props.sendTransaction(txMeta, event)
     } else {
-      this.props.displayWarning(this.props.t('invalidGasParams'))
+      this.props.displayWarning(this.context.t('invalidGasParams'))
       this.setState({ submitting: false })
     }
   }
@@ -177,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', [ this.props.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()}`),
 
@@ -216,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', [ this.props.t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ this.props.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', [
@@ -247,11 +247,11 @@ class ConfirmDeployContract extends Component {
           h('.page-container__header-row', [
             h('span.page-container__back-button', {
               onClick: () => backToAccountDetail(selectedAddress),
-            }, this.props.t('back')),
+            }, this.context.t('back')),
             window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
           ]),
-          h('.page-container__title', this.props.t('confirmContract')),
-          h('.page-container__subtitle', this.props.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', [
@@ -274,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', [ this.props.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)}`),
@@ -282,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', [ this.props.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', this.props.t('newContract')),
+                h('div.confirm-screen-row-info', this.context.t('newContract')),
               ]),
             ]),
 
@@ -302,12 +302,12 @@ class ConfirmDeployContract extends Component {
             // Cancel Button
             h('button.btn-cancel.page-container__footer-button.allcaps', {
               onClick: event => this.cancel(event, txMeta),
-            }, this.props.t('cancel')),
+            }, this.context.t('cancel')),
 
             // Accept Button
             h('button.btn-confirm.page-container__footer-button.allcaps', {
               onClick: event => this.onSubmit(event),
-            }, this.props.t('confirm')),
+            }, this.context.t('confirm')),
           ]),
         ]),
       ])
@@ -351,4 +351,8 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
\ No newline at end of file
+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 255f0e8a2..b68de4704 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('../../metamask-connect')
+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')
@@ -18,8 +19,13 @@ 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,
@@ -196,7 +202,7 @@ ConfirmSendEther.prototype.getData = function () {
     },
     to: {
       address: txParams.to,
-      name: identities[txParams.to] ? identities[txParams.to].name : this.props.t('newRecipient'),
+      name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'),
     },
     memo: txParams.memo || '',
     gasFeeInFIAT,
@@ -297,7 +303,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', [ this.props.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)}`),
@@ -305,7 +311,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.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)}`),
@@ -313,7 +319,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.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,8 +332,8 @@ 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', [ this.props.t('total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ this.props.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', [
@@ -428,10 +434,10 @@ ConfirmSendEther.prototype.render = function () {
               clearSend()
               this.cancel(event, txMeta)
             },
-          }, this.props.t('cancel')),
+          }, this.context.t('cancel')),
 
           // Accept Button
-          h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
+          h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
         ]),
       ]),
     ])
@@ -447,7 +453,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
-    this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams')))
     this.setState({ submitting: false })
   }
 }
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 3e66705ae..7fe260a61 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+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')
@@ -28,8 +29,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 || {}
@@ -168,7 +174,7 @@ ConfirmSendToken.prototype.getAmount = function () {
       ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
       : null,
     token: typeof value === 'undefined'
-      ? this.props.t('unknown')
+      ? this.context.t('unknown')
       : +sendTokenAmount.toFixed(decimals),
   }
 
@@ -240,7 +246,7 @@ ConfirmSendToken.prototype.getData = function () {
     },
     to: {
       address: value,
-      name: identities[value] ? identities[value].name : this.props.t('newRecipient'),
+      name: identities[value] ? identities[value].name : this.context.t('newRecipient'),
     },
     memo: txParams.memo || '',
   }
@@ -286,7 +292,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.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,
@@ -308,8 +314,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', [ this.props.t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ this.props.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,13 +327,13 @@ 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', [ this.props.t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ this.props.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', [
           h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
-          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.props.t('gas')}`),
+          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`),
         ]),
       ])
     )
@@ -350,10 +356,10 @@ ConfirmSendToken.prototype.render = function () {
   this.inputs = []
 
   const isTxReprice = Boolean(txMeta.lastGasPrice)
-  const title = isTxReprice ? this.props.t('reprice_title') : this.props.t('confirm')
+  const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm')
   const subtitle = isTxReprice
-    ? this.props.t('reprice_subtitle')
-    : this.props.t('pleaseReviewTransaction')
+    ? this.context.t('reprice_subtitle')
+    : this.context.t('pleaseReviewTransaction')
 
   return (
     h('div.confirm-screen-container.confirm-send-token', [
@@ -362,7 +368,7 @@ ConfirmSendToken.prototype.render = function () {
         h('div.page-container__header', [
           !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
-          }, this.props.t('edit')),
+          }, this.context.t('edit')),
           h('div.page-container__title', title),
           h('div.page-container__subtitle', subtitle),
         ]),
@@ -406,7 +412,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', [ this.props.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 +420,7 @@ ConfirmSendToken.prototype.render = function () {
             ]),
 
             toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.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)}`),
@@ -436,10 +442,10 @@ ConfirmSendToken.prototype.render = function () {
             // Cancel Button
             h('button.btn-cancel.page-container__footer-button.allcaps', {
               onClick: (event) => this.cancel(event, txMeta),
-            }, this.props.t('cancel')),
+            }, this.context.t('cancel')),
 
             // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
+            h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
           ]),
         ]),
       ]),
@@ -456,7 +462,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
-    this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams')))
     this.setState({ submitting: false })
   }
 }
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index 0a8813b03..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('../../metamask-connect')
+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/qr-code.js b/ui/app/components/qr-code.js
index 89504eca3..83885539c 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
 const ReadOnlyInput = require('./readonly-input')
 
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index 749339694..1ad3f69c1 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const Identicon = require('../identicon')
 const CurrencyDisplay = require('./currency-display')
 const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 76ed1b5d4..1423aa84d 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.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 CurrencyDisplay = require('./currency-display')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
+
+GasFeeDisplay.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(GasFeeDisplay)
 
+
 inherits(GasFeeDisplay, Component)
 function GasFeeDisplay () {
   Component.call(this)
@@ -33,8 +39,8 @@ GasFeeDisplay.prototype.render = function () {
         readOnly: true,
       })
       : gasLoadingError
-        ? h('div.currency-display.currency-display--message', this.props.t('setGasPrice'))
-        : h('div.currency-display', this.props.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 607394c8b..62cdc1cad 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.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 InputNumber = require('../input-number.js')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
+
+GasTooltip.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(GasTooltip)
 
+
 inherits(GasTooltip, Component)
 function GasTooltip () {
   Component.call(this)
@@ -82,7 +88,7 @@ GasTooltip.prototype.render = function () {
             'marginTop': '81px',
           },
         }, [
-          h('span.gas-tooltip-label', {}, [this.props.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-v2-container.js b/ui/app/components/send/send-v2-container.js
index 5b903a96e..08c26a91f 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -1,4 +1,4 @@
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const abi = require('ethereumjs-abi')
 const SendEther = require('../../send-v2')
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 4c54701cb..5ea17f9a2 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.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 AccountListItem = require('./account-list-item')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
+
+ToAutoComplete.contextTypes = {
+  t: PropTypes.func,
+}
 
 module.exports = connect()(ToAutoComplete)
 
+
 inherits(ToAutoComplete, Component)
 function ToAutoComplete () {
   Component.call(this)
@@ -93,7 +99,7 @@ ToAutoComplete.prototype.render = function () {
   return h('div.send-v2__to-autocomplete', {}, [
 
     h('input.send-v2__to-autocomplete__input', {
-      placeholder: this.props.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 4c3881668..6b9cd32ea 100644
--- a/ui/app/components/sender-to-recipient.js
+++ b/ui/app/components/sender-to-recipient.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const PropTypes = require('prop-types')
 const Identicon = require('./identicon')
 
@@ -21,7 +21,7 @@ class SenderToRecipient extends Component {
         this.renderRecipientIcon(),
         h(
           '.sender-to-recipient__name.sender-to-recipient__recipient-name',
-          recipientName || this.props.t('newContract')
+          recipientName || this.context.t('newContract')
         ),
       ])
     )
@@ -64,4 +64,9 @@ SenderToRecipient.propTypes = {
   t: PropTypes.func,
 }
 
+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 5f58527fe..fd4a80a4a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -1,7 +1,8 @@
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const classnames = require('classnames')
 const { qrcode } = require('qrcode-npm')
 const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
@@ -32,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)
@@ -93,7 +99,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
       }))
       .catch(() => this.setState({
         showQrCode: false,
-        errorMessage: this.props.t('invalidRequest'),
+        errorMessage: this.context.t('invalidRequest'),
         isLoading: false,
       }))
   }
@@ -125,10 +131,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
 
   return h('div.shapeshift-form__metadata', {}, [
 
-    this.renderMetadata(this.props.t('status'), limit ? this.props.t('available') : this.props.t('unavailable')),
-    this.renderMetadata(this.props.t('limit'), limit),
-    this.renderMetadata(this.props.t('exchangeRate'), rate),
-    this.renderMetadata(this.props.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),
 
   ])
 }
@@ -142,7 +148,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      this.props.t('depositCoin', [depositCoin.toUpperCase()]),
+      this.context.t('depositCoin', [depositCoin.toUpperCase()]),
     ]),
 
     h('div', depositAddress),
@@ -179,7 +185,7 @@ ShapeshiftForm.prototype.render = function () {
 
             h('div.shapeshift-form__selector', [
 
-              h('div.shapeshift-form__selector-label', this.props.t('deposit')),
+              h('div.shapeshift-form__selector-label', this.context.t('deposit')),
 
               h(SimpleDropdown, {
                 selectedOption: this.state.depositCoin,
@@ -199,7 +205,7 @@ ShapeshiftForm.prototype.render = function () {
             h('div.shapeshift-form__selector', [
 
               h('div.shapeshift-form__selector-label', [
-                this.props.t('receive'),
+                this.context.t('receive'),
               ]),
 
               h('div.shapeshift-form__selector-input', ['ETH']),
@@ -217,7 +223,7 @@ ShapeshiftForm.prototype.render = function () {
           }, [
 
             h('div.shapeshift-form__address-input-label', [
-              this.props.t('refundAddress'),
+              this.context.t('refundAddress'),
             ]),
 
             h('input.shapeshift-form__address-input', {
@@ -239,7 +245,7 @@ ShapeshiftForm.prototype.render = function () {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
-      }, [this.props.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 d810eddc9..4334aacba 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -1,7 +1,8 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const vreme = new (require('vreme'))()
 const explorerLink = require('etherscan-link').createExplorerLink
 const actions = require('../actions')
@@ -12,8 +13,13 @@ 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,
@@ -75,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
           value: this.props.depositAddress,
         }),
         h(Tooltip, {
-          title: this.props.t('qrCode'),
+          title: this.context.t('qrCode'),
         }, [
           h('i.fa.fa-qrcode.pointer.pop-hover', {
             onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@@ -135,8 +141,8 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, this.props.t('toETHviaShapeShift', [props.depositType])),
-        h('div', this.props.t('noDeposits')),
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('noDeposits')),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -158,8 +164,8 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, this.props.t('toETHviaShapeShift', [props.depositType])),
-        h('div', this.props.t('conversionProgress')),
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('conversionProgress')),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -184,7 +190,7 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, this.props.t('fromShapeShift')),
+        }, this.context.t('fromShapeShift')),
         h('div', formatDate(props.time)),
         h('div', {
           style: {
@@ -196,7 +202,7 @@ ShiftListItem.prototype.renderInfo = function () {
       ])
 
     case 'failed':
-      return h('span.error', '(' + this.props.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 b76c1e60f..41415411e 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -1,8 +1,9 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('./identicon')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const ethUtil = require('ethereumjs-util')
 const classnames = require('classnames')
 
@@ -37,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)
@@ -54,7 +60,7 @@ SignatureRequest.prototype.renderHeader = function () {
 
     h('div.request-signature__header-background'),
 
-    h('div.request-signature__header__text', this.props.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'),
@@ -75,7 +81,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
 
   return h('div.request-signature__account', [
 
-    h('div.request-signature__account-text', [this.props.t('account') + ':']),
+    h('div.request-signature__account-text', [this.context.t('account') + ':']),
 
     h(AccountDropdownMini, {
       selectedAccount,
@@ -102,7 +108,7 @@ SignatureRequest.prototype.renderBalance = function () {
 
   return h('div.request-signature__balance', [
 
-    h('div.request-signature__balance-text', [this.props.t('balance')]),
+    h('div.request-signature__balance-text', [this.context.t('balance')]),
 
     h('div.request-signature__balance-value', `${balanceInEther} ETH`),
 
@@ -136,7 +142,7 @@ SignatureRequest.prototype.renderRequestInfo = function () {
   return h('div.request-signature__request-info', [
 
     h('div.request-signature__headline', [
-      this.props.t('yourSigRequested'),
+      this.context.t('yourSigRequested'),
     ]),
 
   ])
@@ -154,18 +160,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
 
 SignatureRequest.prototype.renderBody = function () {
   let rows
-  let notice = this.props.t('youSign') + ':'
+  let notice = this.context.t('youSign') + ':'
 
   const { txData } = this.props
   const { type, msgParams: { data } } = txData
 
   if (type === 'personal_sign') {
-    rows = [{ name: this.props.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: this.props.t('message'), value: data }]
-    notice = this.props.t('signNotice')
+    rows = [{ name: this.context.t('message'), value: data }]
+    notice = this.context.t('signNotice')
   }
 
   return h('div.request-signature__body', {}, [
@@ -224,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,
-    }, this.props.t('cancel')),
+    }, this.context.t('cancel')),
     h('button.btn-primary--lg', {
       onClick: sign,
-    }, this.props.t('sign')),
+    }, this.context.t('sign')),
   ])
 }
 
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
index 7d7744fe6..2f71c0687 100644
--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const selectors = require('../selectors')
 
 function mapStateToProps (state) {
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index a24781af1..0332fde88 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const Identicon = require('./identicon')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const selectors = require('../selectors')
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index ae22f3702..150a3762d 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -1,9 +1,10 @@
 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('../metamask-connect')
+const connect = require('react-redux').connect
 const selectors = require('../selectors')
 
 function mapStateToProps (state) {
@@ -24,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 = {
@@ -42,7 +48,7 @@ TokenList.prototype.render = function () {
   const { tokens, isLoading, error } = state
 
   if (isLoading) {
-    return this.message(this.props.t('loadingTokens'))
+    return this.message(this.context.t('loadingTokens'))
   }
 
   if (error) {
@@ -52,7 +58,7 @@ TokenList.prototype.render = function () {
         padding: '80px',
       },
     }, [
-      this.props.t('troubleTokenBalances'),
+      this.context.t('troubleTokenBalances'),
       h('span.hotFix', {
         style: {
           color: 'rgba(247, 134, 28, 1)',
@@ -63,7 +69,7 @@ TokenList.prototype.render = function () {
           url: `https://ethplorer.io/address/${userAddress}`,
         })
         },
-      }, this.props.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 5e88d38d3..622664786 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const inherits = require('util').inherits
 const classnames = require('classnames')
 const abi = require('human-standard-token-abi')
@@ -15,8 +16,13 @@ const { calcTokenAmount } = require('../token-util')
 
 const { getCurrentCurrency } = require('../selectors')
 
+TxListItem.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem)
 
+
 function mapStateToProps (state) {
   return {
     tokens: state.metamask.tokens,
@@ -74,7 +80,7 @@ TxListItem.prototype.getAddressText = function () {
     default:
       return address
         ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : this.props.t('contractDeployment')
+        : this.context.t('contractDeployment')
   }
 }
 
@@ -306,21 +312,21 @@ TxListItem.prototype.txStatusIndicator = function () {
   let name
 
   if (transactionStatus === 'unapproved') {
-    name = this.props.t('unapproved')
+    name = this.context.t('unapproved')
   } else if (transactionStatus === 'rejected') {
-    name = this.props.t('rejected')
+    name = this.context.t('rejected')
   } else if (transactionStatus === 'approved') {
-    name = this.props.t('approved')
+    name = this.context.t('approved')
   } else if (transactionStatus === 'signed') {
-    name = this.props.t('signed')
+    name = this.context.t('signed')
   } else if (transactionStatus === 'submitted') {
-    name = this.props.t('submitted')
+    name = this.context.t('submitted')
   } else if (transactionStatus === 'confirmed') {
-    name = this.props.t('confirmed')
+    name = this.context.t('confirmed')
   } else if (transactionStatus === 'failed') {
-    name = this.props.t('failed')
+    name = this.context.t('failed')
   } else if (transactionStatus === 'dropped') {
-    name = this.props.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 5f09d887e..fa01c7b29 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
@@ -11,8 +12,13 @@ const { showConfTxPage } = require('../actions')
 const classnames = require('classnames')
 const { tokenInfoGetter } = require('../token-util')
 
+TxList.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
 
+
 function mapStateToProps (state) {
   return {
     txsToRender: selectors.transactionsSelector(state),
@@ -39,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', this.props.t('transactions')),
+        h('div', this.context.t('transactions')),
       ]),
     ]),
     h('div.flex-column.tx-list-container', {}, [
@@ -56,7 +62,7 @@ TxList.prototype.renderTransaction = function () {
     : [h(
         'div.tx-list-item.tx-list-item--empty',
         { key: 'tx-list-none' },
-        [ this.props.t('noTransactions') ],
+        [ this.context.t('noTransactions') ],
       )]
 }
 
@@ -110,7 +116,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
 
   if (isUnapproved) {
     opts.onClick = () => showConfTxPage({ id: transactionId })
-    opts.transactionStatus = this.props.t('notStarted')
+    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 8b0cc890a..ca24e813f 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+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
@@ -10,8 +11,13 @@ 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
@@ -72,21 +78,21 @@ TxView.prototype.renderButtons = function () {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
-        }, this.props.t('deposit')),
+        }, this.context.t('deposit')),
 
         h('button.btn-primary.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
           onClick: showSendPage,
-        }, this.props.t('send')),
+        }, this.context.t('send')),
       ])
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
         h('button.btn-primary.hero-balance-button', {
           onClick: showSendTokenPage,
-        }, this.props.t('send')),
+        }, this.context.t('send')),
       ])
     )
 }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 5f1ed7b60..e6b94ad12 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const classnames = require('classnames')
@@ -12,8 +13,13 @@ const BalanceComponent = require('./balance-component')
 const TokenList = require('./token-list')
 const selectors = require('../selectors')
 
+WalletView.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
 
+
 function mapStateToProps (state) {
 
   return {
@@ -116,7 +122,7 @@ WalletView.prototype.render = function () {
         onClick: hideSidebar,
       }),
 
-      h('div.wallet-view__keyring-label.allcaps', isLoose ? this.props.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' },
@@ -133,13 +139,13 @@ WalletView.prototype.render = function () {
           selectedIdentity.name,
         ]),
 
-        h('button.btn-clear.wallet-view__details-button.allcaps', this.props.t('details')),
+        h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
       ]),
     ]),
 
     h(Tooltip, {
       position: 'bottom',
-      title: this.state.hasCopied ? this.props.t('copiedExclamation') : this.props.t('copyToClipboard'),
+      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
       wrapperClassName: 'wallet-view__tooltip',
     }, [
       h('button.wallet-view__address', {
@@ -172,7 +178,7 @@ WalletView.prototype.render = function () {
         showAddTokenPage()
         hideSidebar()
       },
-    }, this.props.t('addToken')),
+    }, this.context.t('addToken')),
   ])
 }