ui fixes

app/_locales/en/messages.json

@@ -119,8 +119,8 @@
   "close": {
     "message": "Close"
   },
-  "chromeRequiredForTrezor":{
-    "message": "You need to use Metamask on Google Chrome in order to connect to your TREZOR device."
+  "chromeRequiredForHardwareWallets":{
+    "message": "You need to use Metamask on Google Chrome in order to connect to your Hardware Wallet."
   },
   "confirm": {
     "message": "Confirm"
@@ -149,11 +149,8 @@
   "connectToTrezor": {
     "message": "Connect to Trezor"
   },
-  "connectToTrezorHelp": {
-    "message": "Metamask is able to access your TREZOR ethereum accounts. First make sure your device is connected and unlocked."
-  },
-  "connectToTrezorTrouble": {
-    "message": "If you are having trouble, please make sure you are using the latest version of the TREZOR firmware."
+  "connectToLedger": {
+    "message": "Connect to Ledger"
   },
   "continue": {
     "message": "Continue"
@@ -426,11 +423,11 @@
   "hardwareWalletConnected": {
     "message": "Hardware wallet connected"
   },
-  "hardwareSupport": {
-    "message": "Hardware Support"
+  "hardwareWallets": {
+    "message": "Hardware Wallets"
   },
-  "hardwareSupportMsg": {
-    "message": "You can now view your Hardware accounts in MetaMask!  Scroll down and read how it works."
+  "hardwareWalletsMsg": {
+    "message": "You can now view your Hardware wallet accounts in MetaMask!  Scroll down and read how it works."
   },
   "havingTroubleConnecting": {
     "message": "Having trouble connecting?"

ui/app/components/modals/account-details-modal.js

@@ -14,6 +14,7 @@ function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     selectedIdentity: getSelectedIdentity(state),
+    keyrings: state.metamask.keyrings,
   }
 }
 
@@ -50,9 +51,20 @@ AccountDetailsModal.prototype.render = function () {
     network,
     showExportPrivateKeyModal,
     setAccountLabel,
+    keyrings,
   } = this.props
   const { name, address } = selectedIdentity
 
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(address)
+  })
+
+  let exportPrivateKeyFeatureEnabled = true
+  // This feature is disabled for hardware wallets
+  if (keyring.type.search('Hardware') !== -1) {
+    exportPrivateKeyFeatureEnabled = false
+  }
+
   return h(AccountModalContainer, {}, [
       h(EditableLabel, {
         className: 'account-modal__name',
@@ -73,9 +85,9 @@ AccountDetailsModal.prototype.render = function () {
       }, this.context.t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-primary.account-modal__button', {
+      exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, this.context.t('exportPrivateKey')),
+      }, this.context.t('exportPrivateKey')) : null,
 
   ])
 }

ui/app/components/pages/create-account/connect-hardware/connect-screen.js

@@ -12,7 +12,7 @@ class ConnectScreen extends Component {
             h('div.new-account-connect-form.unsupported-browser', {}, [
                 h('div.hw-connect', [
                     h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
-                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
+                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
                 ]),
                 h(
                     'button.btn-primary.btn--large',
@@ -30,8 +30,8 @@ class ConnectScreen extends Component {
     renderHeader () {
         return (
             h('div.hw-connect__header', {}, [
-                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)),
-                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)),
+                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
+                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
             ])
         )
     }
@@ -50,7 +50,7 @@ class ConnectScreen extends Component {
         return h(
             'button.btn-primary.btn--large',
             { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') },
-            this.props.btnText
+            this.context.t('connectToTrezor')
         )
     }
 
@@ -58,7 +58,7 @@ class ConnectScreen extends Component {
         return h(
             'button.btn-primary.btn--large',
             { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') },
-            this.props.btnText.replace('Trezor', 'Ledger')
+            this.context.t('connectToLedger')
         )
     }
 
@@ -127,9 +127,9 @@ class ConnectScreen extends Component {
         return (
             h('div.new-account-connect-form', {}, [
                 this.renderHeader(),
-                this.renderTrezorAffiliateLink(),
-                this.renderConnectToTrezorButton(),
                 this.renderConnectToLedgerButton(),
+                this.renderConnectToTrezorButton(),
+                this.renderTrezorAffiliateLink(),
                 this.renderLearnMore(),
                 this.renderTutorialSteps(),
                 this.renderFooter(),
@@ -147,7 +147,6 @@ class ConnectScreen extends Component {
 
 ConnectScreen.propTypes = {
     connectToHardwareWallet: PropTypes.func.isRequired,
-    btnText: PropTypes.string.isRequired,
     browserSupported: PropTypes.bool.isRequired,
 }
 

ui/app/components/pages/create-account/connect-hardware/index.js

@@ -6,14 +6,14 @@ const actions = require('../../../../actions')
 const ConnectScreen = require('./connect-screen')
 const AccountList = require('./account-list')
 const { DEFAULT_ROUTE } = require('../../../../routes')
-const { formatBalance } = require('../../../../util')
+const { formatBalance, getPlatform } = require('../../../../../../app/scripts/lib/util')
+const { PLATFORM_FIREFOX } = require('../../../../../../app/scripts/lib/enums')
 
 class ConnectHardwareForm extends Component {
   constructor (props, context) {
     super(props)
     this.state = {
       error: null,
-      btnText: context.t('connectToTrezor'),
       selectedAccount: null,
       accounts: [],
       browserSupported: true,
@@ -49,17 +49,22 @@ class ConnectHardwareForm extends Component {
   }
 
   connectToHardwareWallet = (device) => {
+    // None of the hardware wallets are supported
+    // At least for now
+    if (getPlatform() === PLATFORM_FIREFOX) {
+      this.setState({ browserSupported: false, error: null})
+      return null
+    }
+
     if (this.state.accounts.length) {
       return null
     }
 
     // Default values
-    this.setState({ btnText: this.context.t('connecting')})
     this.getPage(device, 0, this.props.defaultHdPaths[device])
   }
 
   onPathChange = (path) => {
-    console.log('BRUNO: path changed', path)
     this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
     this.getPage(this.state.device, 0, path)
   }
@@ -92,7 +97,7 @@ class ConnectHardwareForm extends Component {
             this.showTemporaryAlert()
           }
 
-          const newState = { unlocked: true, device }
+          const newState = { unlocked: true, device, error: null }
           // Default to the first account
           if (this.state.selectedAccount === null) {
             accounts.forEach((a, i) => {
@@ -119,9 +124,10 @@ class ConnectHardwareForm extends Component {
       })
       .catch(e => {
         if (e === 'Window blocked') {
-          this.setState({ browserSupported: false })
+          this.setState({ browserSupported: false, error: null})
+        } else {
+          this.setState({ error: e.toString() })
         }
-        this.setState({ btnText: this.context.t('connectToTrezor') })
       })
   }
 
@@ -130,7 +136,6 @@ class ConnectHardwareForm extends Component {
     .then(_ => {
       this.setState({
         error: null,
-        btnText: this.context.t('connectToTrezor'),
         selectedAccount: null,
         accounts: [],
         unlocked: false,
@@ -160,7 +165,7 @@ class ConnectHardwareForm extends Component {
 
   renderError () {
     return this.state.error
-      ? h('span.error', { style: { marginBottom: 40 } }, this.state.error)
+      ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error)
       : null
   }
 
@@ -168,7 +173,6 @@ class ConnectHardwareForm extends Component {
     if (!this.state.accounts.length) {
       return h(ConnectScreen, {
         connectToHardwareWallet: this.connectToHardwareWallet,
-        btnText: this.state.btnText,
         browserSupported: this.state.browserSupported,
       })
     }

ui/app/css/itcss/components/new-account.scss

@@ -174,7 +174,7 @@
       font-size: 14px;
       color: #9b9b9b;
       margin-top: 10px;
-      margin-bottom: 0px;
+      margin-bottom: 20px;
     }
   }
 
@@ -257,8 +257,8 @@
 
   &__get-trezor {
     width: 100%;
-    padding-bottom: 20px;
-    padding-top: 20px;
+    padding-bottom: 10px;
+    padding-top: 10px;
 
     &__msg {
       font-size: 14px;