Removes t from props via metamask-connect and instead places it on context via a provider.

11 files changed, 109 insertions, 57 deletions

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')