fix merge conflicts

24 files changed, 723 insertions, 77 deletions

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 9c063d31e..bcada41e3 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -229,6 +229,7 @@ AccountMenu.prototype.renderKeyringType = function (keyring) {
     let label
     switch (type) {
       case 'Trezor Hardware':
+      case 'Ledger Hardware':
         label = this.context.t('hardware')
       break
       case 'Simple Key Pair':
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
index 07ca6cf84..b8b002dcc 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { matchPath } from 'react-router-dom'
@@ -11,7 +11,7 @@ const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('
 const Identicon = require('../identicon')
 const NetworkIndicator = require('../network')
 
-class AppHeader extends Component {
+export default class AppHeader extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
     location: PropTypes.object,
@@ -107,20 +107,19 @@ class AppHeader extends Component {
             onClick={() => history.push(DEFAULT_ROUTE)}
           >
             <img
-              className="app-header__metafox"
-              src="/images/metamask-fox.svg"
+              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+              src="/images/logo/metamask-logo-horizontal-beta.svg"
+              height={30}
+            />
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--icon"
+              src="/images/logo/metamask-fox.svg"
               height={42}
               width={42}
             />
-            <div className="flex-row">
-              <h1>{ this.context.t('appName') }</h1>
-              <div className="app-header__beta-label">
-                { this.context.t('beta') }
-              </div>
-            </div>
           </div>
           <div className="app-header__account-menu-container">
-            <div className="network-component-wrapper">
+            <div className="app-header__network-component-wrapper">
               <NetworkIndicator
                 network={network}
                 provider={provider}
@@ -135,5 +134,3 @@ class AppHeader extends Component {
     )
   }
 }
-
-export default AppHeader
diff --git a/ui/app/components/app-header/index.js b/ui/app/components/app-header/index.js
index daa31f621..6de2f9c78 100644
--- a/ui/app/components/app-header/index.js
+++ b/ui/app/components/app-header/index.js
@@ -1,2 +1 @@
-import AppHeader from './app-header.container'
-module.exports = AppHeader
+export { default } from './app-header.container'
diff --git a/ui/app/components/app-header/index.scss b/ui/app/components/app-header/index.scss
new file mode 100644
index 000000000..325844af5
--- /dev/null
+++ b/ui/app/components/app-header/index.scss
@@ -0,0 +1,90 @@
+.app-header {
+  align-items: center;
+  background: $gallery;
+  position: relative;
+  z-index: $header-z-index;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  flex: 0 0 auto;
+
+  @media screen and (max-width: 575px) {
+    padding: 12px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
+    z-index: $mobile-header-z-index;
+  }
+
+  @media screen and (min-width: 576px) {
+    height: 75px;
+    justify-content: center;
+
+    &--back-drop {
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 32px;
+        background: $gallery;
+        bottom: -32px;
+      }
+    }
+  }
+
+  &__metafox-logo {
+    cursor: pointer;
+
+    &--icon {
+      @media screen and (min-width: $break-large) {
+        display: none;
+      }
+    }
+
+    &--horizontal {
+      @media screen and (max-width: $break-small) {
+        display: none;
+      }
+    }
+  }
+
+  &__contents {
+    display: flex;
+    justify-content: space-between;
+    flex-flow: row nowrap;
+    width: 100%;
+
+    @media screen and (max-width: 575px) {
+      height: 100%;
+    }
+
+    @media screen and (min-width: 576px) {
+      width: 85vw;
+    }
+
+    @media screen and (min-width: 769px) {
+      width: 80vw;
+    }
+
+    @media screen and (min-width: 1281px) {
+      width: 62vw;
+    }
+  }
+
+  &__logo-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__account-menu-container {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+  }
+
+  &__network-component-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index b9f99b3d1..f538fd555 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -27,6 +27,7 @@ function EnsInput () {
 }
 
 EnsInput.prototype.onChange = function (recipient) {
+
   const network = this.props.network
   const networkHasEnsSupport = getNetworkEnsSupport(network)
 
@@ -54,6 +55,7 @@ EnsInput.prototype.render = function () {
   const opts = extend(props, {
     list: 'addresses',
     onChange: this.onChange.bind(this),
+    qrScanner: true,
   })
   return h('div', {
     style: { width: '100%', position: 'relative' },
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index b3e14ce23..35d38e2a3 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -19,3 +19,5 @@
 @import './sender-to-recipient/index';
 
 @import './tabs/index';
+
+@import './app-header/index';
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 049c75eee..38f70c33c 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -60,7 +60,8 @@ AccountDetailsModal.prototype.render = function () {
   })
 
   let exportPrivateKeyFeatureEnabled = true
-  if (keyring.type === 'Trezor Hardware') {
+  // This feature is disabled for hardware wallets
+  if (keyring.type.search('Hardware') !== -1) {
     exportPrivateKeyFeatureEnabled = false
   }
 
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index e198cca44..0acccf172 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -1,5 +1,7 @@
 @import './customize-gas/index';
 
+@import './qr-scanner/index';
+
 .modal-container {
   width: 100%;
   height: 100%;
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index f59825ed1..5dda50e52 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -21,6 +21,7 @@ const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
 const ConfirmResetAccount = require('./confirm-reset-account')
 const ConfirmRemoveAccount = require('./confirm-remove-account')
+const QRScanner = require('./qr-scanner')
 const TransactionConfirmed = require('./transaction-confirmed')
 const WelcomeBeta = require('./welcome-beta')
 const Notification = require('./notification')
@@ -346,6 +347,18 @@ const MODALS = {
       borderRadius: '8px',
     },
   },
+  QR_SCANNER: {
+    contents: h(QRScanner),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
 
   DEFAULT: {
     contents: [],
diff --git a/ui/app/components/modals/qr-scanner/index.js b/ui/app/components/modals/qr-scanner/index.js
new file mode 100644
index 000000000..470dee1f4
--- /dev/null
+++ b/ui/app/components/modals/qr-scanner/index.js
@@ -0,0 +1,2 @@
+import QrScanner from './qr-scanner.container'
+module.exports = QrScanner
diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss
new file mode 100644
index 000000000..6fa81d51f
--- /dev/null
+++ b/ui/app/components/modals/qr-scanner/index.scss
@@ -0,0 +1,83 @@
+.qr-scanner {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-flow: column;
+  border-radius: 8px;
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  &__content {
+    padding-left: 20px;
+    padding-right: 20px;
+
+    &__video-wrapper {
+      overflow: hidden;
+      width: 100%;
+      height: 275px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      video {
+        transform: scaleX(-1);
+        width: auto;
+        height: 275px;
+      }
+    }
+  }
+
+  &__status {
+    text-align: center;
+    font-size: 14px;
+    padding: 15px;
+  }
+
+  &__image {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0 0;
+    text-align: center;
+  }
+
+  &__error {
+    text-align: center;
+    font-size: 16px;
+    padding: 15px;
+  }
+
+  &__footer {
+    padding: 20px;
+    flex-direction: row;
+    display: flex;
+
+    button {
+      margin-right: 15px;
+    }
+
+    button:last-of-type {
+      margin-right: 0;
+      background-color: #009eec;
+      border: none;
+      color: #fff;
+    }
+  }
+
+  &__close::after {
+    content: '\00D7';
+    font-size: 35px;
+    color: #9b9b9b;
+    position: absolute;
+    top: 4px;
+    right: 20px;
+    cursor: pointer;
+    font-weight: 300;
+  }
+}
+
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
new file mode 100644
index 000000000..cb8d07d83
--- /dev/null
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
@@ -0,0 +1,216 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { BrowserQRCodeReader } from '@zxing/library'
+import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
+import Spinner from '../../spinner'
+import WebcamUtils from '../../../../lib/webcam-utils'
+import PageContainerFooter from '../../page-container/page-container-footer/page-container-footer.component'
+
+export default class QrScanner extends Component {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    qrCodeDetected: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    error: PropTypes.bool,
+    errorType: PropTypes.string,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  constructor (props, context) {
+    super(props)
+
+    this.state = {
+      ready: false,
+      msg: context.t('accessingYourCamera'),
+    }
+    this.codeReader = null
+    this.permissionChecker = null
+    this.needsToReinit = false
+
+    // Clear pre-existing qr code data before scanning
+    this.props.qrCodeDetected(null)
+  }
+
+  componentDidMount () {
+    this.initCamera()
+  }
+
+  async checkPermisisions () {
+    const { permissions } = await WebcamUtils.checkStatus()
+    if (permissions) {
+      clearTimeout(this.permissionChecker)
+      // Let the video stream load first...
+      setTimeout(_ => {
+        this.setState({
+          ready: true,
+          msg: this.context.t('scanInstructions'),
+        })
+        if (this.needsToReinit) {
+          this.initCamera()
+          this.needsToReinit = false
+        }
+      }, 2000)
+    } else {
+      // Keep checking for permissions
+      this.permissionChecker = setTimeout(_ => {
+        this.checkPermisisions()
+      }, 1000)
+    }
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.permissionChecker)
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
+  }
+
+  initCamera () {
+    this.codeReader = new BrowserQRCodeReader()
+    this.codeReader.getVideoInputDevices()
+      .then(videoInputDevices => {
+        clearTimeout(this.permissionChecker)
+        this.checkPermisisions()
+        this.codeReader.decodeFromInputVideoDevice(undefined, 'video')
+        .then(content => {
+          const result = this.parseContent(content.text)
+          if (result.type !== 'unknown') {
+            this.props.qrCodeDetected(result)
+            this.stopAndClose()
+          } else {
+            this.setState({msg: this.context.t('unknownQrCode')})
+          }
+        })
+        .catch(err => {
+          if (err && err.name === 'NotAllowedError') {
+            this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
+            clearTimeout(this.permissionChecker)
+            this.needsToReinit = true
+            this.checkPermisisions()
+          }
+        })
+      }).catch(err => {
+        console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err)
+      })
+  }
+
+  parseContent (content) {
+    let type = 'unknown'
+    let values = {}
+
+    // Here we could add more cases
+    // To parse other type of links
+    // For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681)
+
+
+    // Ethereum address links - fox ex. ethereum:0x.....1111
+    if (content.split('ethereum:').length > 1) {
+
+      type = 'address'
+      values = {'address': content.split('ethereum:')[1] }
+
+    // Regular ethereum addresses - fox ex. 0x.....1111
+    } else if (content.substring(0, 2).toLowerCase() === '0x') {
+
+      type = 'address'
+      values = {'address': content }
+
+    }
+    return {type, values}
+  }
+
+
+  stopAndClose = () => {
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
+    this.setState({ ready: false })
+    this.props.hideModal()
+  }
+
+  tryAgain = () => {
+    // close the modal
+    this.stopAndClose()
+    // wait for the animation and try again
+    setTimeout(_ => {
+      this.props.scanQrCode()
+    }, 1000)
+  }
+
+  renderVideo () {
+    return (
+      <div className={'qr-scanner__content__video-wrapper'}>
+        <video
+          id="video"
+          style={{
+            display: this.state.ready ? 'block' : 'none',
+          }}
+        />
+        { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
+      </div>
+    )
+  }
+
+  renderErrorModal () {
+    let title, msg
+
+    if (this.props.error) {
+      if (this.props.errorType === 'NO_WEBCAM_FOUND') {
+        title = this.context.t('noWebcamFoundTitle')
+        msg = this.context.t('noWebcamFound')
+      } else {
+        title = this.context.t('unknownCameraErrorTitle')
+        msg = this.context.t('unknownCameraError')
+      }
+    }
+
+    return (
+      <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
+
+        <div className="qr-scanner__image">
+          <img src={'images/webcam.svg'} width={70} height={70} />
+        </div>
+        <div className="qr-scanner__title">
+          { title }
+        </div>
+        <div className={'qr-scanner__error'}>
+          {msg}
+        </div>
+        <PageContainerFooter
+          onCancel={this.stopAndClose}
+          onSubmit={this.tryAgain}
+          cancelText={this.context.t('cancel')}
+          submitText={this.context.t('tryAgain')}
+          submitButtonType="confirm"
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+
+    if (this.props.error) {
+      return this.renderErrorModal()
+    }
+
+    return (
+      <div className="qr-scanner">
+        <div className="qr-scanner__close" onClick={this.stopAndClose}></div>
+        <div className="qr-scanner__title">
+          { `${t('scanQrCode')}` }
+        </div>
+        <div className="qr-scanner__content">
+          { this.renderVideo() }
+        </div>
+        <div className={'qr-scanner__status'}>
+          {this.state.msg}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
new file mode 100644
index 000000000..d0a35e03b
--- /dev/null
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import QrScanner from './qr-scanner.component'
+
+const { hideModal, qrCodeDetected, showQrScanner } = require('../../../actions')
+import {
+  SEND_ROUTE,
+} from '../../../routes'
+
+const mapStateToProps = state => {
+  return {
+    error: state.appState.modal.modalState.props.error,
+    errorType: state.appState.modal.modalState.props.errorType,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QrScanner)
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index c722d1f55..488a189ea 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -2,16 +2,75 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const genAccountLink = require('../../../../../lib/account-link.js')
+const Select = require('react-select').default
 
 class AccountList extends Component {
     constructor (props, context) {
         super(props)
     }
 
+    getHdPaths () {
+      return [
+        {
+          label: `Ledger Live`,
+          value: `m/44'/60'/0'/0/0`,
+        },
+        {
+          label: `Legacy (MEW / MyCrypto)`,
+          value: `m/44'/60'/0'`,
+        },
+      ]
+    }
+
+    goToNextPage = () => {
+      // If we have < 5 accounts, it's restricted by BIP-44
+      if (this.props.accounts.length === 5) {
+        this.props.getPage(this.props.device, 1, this.props.selectedPath)
+      } else {
+        this.props.onAccountRestriction()
+      }
+    }
+
+    goToPreviousPage = () => {
+      this.props.getPage(this.props.device, -1, this.props.selectedPath)
+    }
+
+    renderHdPathSelector () {
+      const { onPathChange, selectedPath } = this.props
+
+      const options = this.getHdPaths()
+      return h('div', [
+        h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')),
+        h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')),
+        h('div.hw-connect__hdPath', [
+          h(Select, {
+            className: 'hw-connect__hdPath__select',
+            name: 'hd-path-select',
+            clearable: false,
+            value: selectedPath,
+            options,
+            onChange: (opt) => {
+              onPathChange(opt.value)
+            },
+          }),
+        ]),
+      ])
+    }
+
+    capitalizeDevice (device) {
+      return device.slice(0, 1).toUpperCase() + device.slice(1)
+    }
+
     renderHeader () {
+      const { device } = this.props
       return (
         h('div.hw-connect', [
-          h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')),
+
+          h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`),
+
+          device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null,
+
+          h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')),
           h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
         ])
       )
@@ -61,7 +120,7 @@ class AccountList extends Component {
       h(
         'button.hw-list-pagination__button',
         {
-          onClick: () => this.props.getPage(-1),
+          onClick: this.goToPreviousPage,
         },
         `< ${this.context.t('prev')}`
       ),
@@ -69,7 +128,7 @@ class AccountList extends Component {
       h(
         'button.hw-list-pagination__button',
         {
-          onClick: () => this.props.getPage(1),
+          onClick: this.goToNextPage,
         },
         `${this.context.t('next')} >`
       ),
@@ -95,7 +154,7 @@ class AccountList extends Component {
       h(
         `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
         {
-          onClick: this.props.onUnlockAccount.bind(this),
+          onClick: this.props.onUnlockAccount.bind(this, this.props.device),
           ...buttonProps,
         },
         [this.context.t('unlock')]
@@ -106,7 +165,7 @@ class AccountList extends Component {
   renderForgetDevice () {
     return h('div.hw-forget-device-container', {}, [
       h('a', {
-        onClick: this.props.onForgetDevice.bind(this),
+        onClick: this.props.onForgetDevice.bind(this, this.props.device),
       }, this.context.t('forgetDevice')),
     ])
   }
@@ -125,6 +184,9 @@ class AccountList extends Component {
 
 
 AccountList.propTypes = {
+    onPathChange: PropTypes.func.isRequired,
+    selectedPath: PropTypes.string.isRequired,
+    device: PropTypes.string.isRequired,
     accounts: PropTypes.array.isRequired,
     onAccountChange: PropTypes.func.isRequired,
     onForgetDevice: PropTypes.func.isRequired,
@@ -134,6 +196,7 @@ AccountList.propTypes = {
     history: PropTypes.object,
     onUnlockAccount: PropTypes.func,
     onCancel: PropTypes.func,
+    onAccountRestriction: PropTypes.func,
 }
 
 AccountList.contextTypes = {
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index cb2b86595..b3dfa4ee2 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -5,6 +5,52 @@ const h = require('react-hyperscript')
 class ConnectScreen extends Component {
     constructor (props, context) {
         super(props)
+        this.state = {
+          selectedDevice: null,
+        }
+    }
+
+    connect = () => {
+      if (this.state.selectedDevice) {
+        this.props.connectToHardwareWallet(this.state.selectedDevice)
+      }
+      return null
+    }
+
+    renderConnectToTrezorButton () {
+        return h(
+            `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+            { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/trezor-logo.svg',
+            })
+        )
+    }
+
+    renderConnectToLedgerButton () {
+        return h(
+          `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+          { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+            h('img.hw-connect__btn__img', {
+              src: 'images/ledger-logo.svg',
+            })
+        )
+    }
+
+    renderButtons () {
+      return (
+        h('div', {}, [
+          h('div.hw-connect__btn-wrapper', {}, [
+            this.renderConnectToLedgerButton(),
+            this.renderConnectToTrezorButton(),
+          ]),
+          h(
+            `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`,
+            { onClick: this.connect },
+            this.context.t('connect')
+          ),
+        ])
+      )
     }
 
     renderUnsupportedBrowser () {
@@ -12,7 +58,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,29 +76,31 @@ 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`)),
             ])
         )
     }
 
+    getAffiliateLinks () {
+      const links = {
+        trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
+        ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`,
+      }
+
+      const text = this.context.t('orderOneHere')
+      const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+      return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
+    }
+
     renderTrezorAffiliateLink () {
-        return h('div.hw-connect__get-trezor', {}, [
-            h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
-            h('a.hw-connect__get-trezor__link', {
-              href: 'https://shop.trezor.io/?a=metamask',
-              target: '_blank',
-            }, this.context.t('orderOneHere')),
+        return h('div.hw-connect__get-hw', {}, [
+            h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+            this.getAffiliateLinks(),
           ])
     }
 
-    renderConnectToTrezorButton () {
-        return h(
-            'button.btn-primary.btn--large',
-            { onClick: this.props.connectToTrezor.bind(this) },
-            this.props.btnText
-        )
-    }
 
     scrollToTutorial = (e) => {
       if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
@@ -102,7 +150,7 @@ class ConnectScreen extends Component {
         return (
             h('div.hw-connect__footer', {}, [
                 h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
-                this.renderConnectToTrezorButton(),
+                this.renderButtons(),
                 h('p.hw-connect__footer__msg', {}, [
                     this.context.t(`havingTroubleConnecting`),
                     h('a.hw-connect__footer__link', {
@@ -118,8 +166,8 @@ class ConnectScreen extends Component {
         return (
             h('div.new-account-connect-form', {}, [
                 this.renderHeader(),
+                this.renderButtons(),
                 this.renderTrezorAffiliateLink(),
-                this.renderConnectToTrezorButton(),
                 this.renderLearnMore(),
                 this.renderTutorialSteps(),
                 this.renderFooter(),
@@ -136,8 +184,7 @@ class ConnectScreen extends Component {
 }
 
 ConnectScreen.propTypes = {
-    connectToTrezor: PropTypes.func.isRequired,
-    btnText: PropTypes.string.isRequired,
+    connectToHardwareWallet: PropTypes.func.isRequired,
     browserSupported: PropTypes.bool.isRequired,
 }
 
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 6ad44e540..4fe25f629 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -7,17 +7,19 @@ const ConnectScreen = require('./connect-screen')
 const AccountList = require('./account-list')
 const { DEFAULT_ROUTE } = require('../../../../routes')
 const { formatBalance } = require('../../../../util')
+const { 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,
       unlocked: false,
+      device: null,
     }
   }
 
@@ -38,25 +40,43 @@ class ConnectHardwareForm extends Component {
   }
 
   async checkIfUnlocked () {
-    const unlocked = await this.props.checkHardwareStatus('trezor')
-    if (unlocked) {
-      this.setState({unlocked: true})
-      this.getPage(0)
-    }
+    ['trezor', 'ledger'].forEach(async device => {
+      const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
+      if (unlocked) {
+        this.setState({unlocked: true})
+        this.getPage(device, 0, this.props.defaultHdPaths[device])
+      }
+    })
   }
 
-  connectToTrezor = () => {
+  connectToHardwareWallet = (device) => {
+    // Ledger hardware wallets are not supported on firefox
+    if (getPlatform() === PLATFORM_FIREFOX && device === 'ledger') {
+      this.setState({ browserSupported: false, error: null})
+      return null
+    }
+
     if (this.state.accounts.length) {
       return null
     }
-    this.setState({ btnText: this.context.t('connecting')})
-    this.getPage(0)
+
+    // Default values
+    this.getPage(device, 0, this.props.defaultHdPaths[device])
+  }
+
+  onPathChange = (path) => {
+    this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
+    this.getPage(this.state.device, 0, path)
   }
 
   onAccountChange = (account) => {
     this.setState({selectedAccount: account.toString(), error: null})
   }
 
+  onAccountRestriction = () => {
+    this.setState({error: this.context.t('ledgerAccountRestriction') })
+  }
+
   showTemporaryAlert () {
     this.props.showAlert(this.context.t('hardwareWalletConnected'))
     // Autohide the alert after 5 seconds
@@ -65,9 +85,9 @@ class ConnectHardwareForm extends Component {
     }, 5000)
   }
 
-  getPage = (page) => {
+  getPage = (device, page, hdPath) => {
     this.props
-      .connectHardware('trezor', page)
+      .connectHardware(device, page, hdPath)
       .then(accounts => {
         if (accounts.length) {
 
@@ -77,7 +97,7 @@ class ConnectHardwareForm extends Component {
             this.showTemporaryAlert()
           }
 
-          const newState = { unlocked: true, error: null }
+          const newState = { unlocked: true, device, error: null }
           // Default to the first account
           if (this.state.selectedAccount === null) {
             accounts.forEach((a, i) => {
@@ -104,20 +124,18 @@ class ConnectHardwareForm extends Component {
       })
       .catch(e => {
         if (e === 'Window blocked') {
-          this.setState({ browserSupported: false })
-        } else {
+          this.setState({ browserSupported: false, error: null})
+        } else if (e !== 'Window closed' && e !== 'Popup closed') {
           this.setState({ error: e.toString() })
         }
-        this.setState({ btnText: this.context.t('connectToTrezor') })
       })
   }
 
-  onForgetDevice = () => {
-    this.props.forgetDevice('trezor')
+  onForgetDevice = (device) => {
+    this.props.forgetDevice(device)
     .then(_ => {
       this.setState({
         error: null,
-        btnText: this.context.t('connectToTrezor'),
         selectedAccount: null,
         accounts: [],
         unlocked: false,
@@ -127,13 +145,13 @@ class ConnectHardwareForm extends Component {
     })
   }
 
-  onUnlockAccount = () => {
+  onUnlockAccount = (device) => {
 
     if (this.state.selectedAccount === null) {
       this.setState({ error: this.context.t('accountSelectionRequired') })
     }
 
-    this.props.unlockTrezorAccount(this.state.selectedAccount)
+    this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
     .then(_ => {
       this.props.history.push(DEFAULT_ROUTE)
     }).catch(e => {
@@ -154,13 +172,15 @@ class ConnectHardwareForm extends Component {
   renderContent () {
     if (!this.state.accounts.length) {
       return h(ConnectScreen, {
-        connectToTrezor: this.connectToTrezor,
-        btnText: this.state.btnText,
+        connectToHardwareWallet: this.connectToHardwareWallet,
         browserSupported: this.state.browserSupported,
       })
     }
 
     return h(AccountList, {
+      onPathChange: this.onPathChange,
+      selectedPath: this.props.defaultHdPaths[this.state.device],
+      device: this.state.device,
       accounts: this.state.accounts,
       selectedAccount: this.state.selectedAccount,
       onAccountChange: this.onAccountChange,
@@ -170,6 +190,7 @@ class ConnectHardwareForm extends Component {
       onUnlockAccount: this.onUnlockAccount,
       onForgetDevice: this.onForgetDevice,
       onCancel: this.onCancel,
+      onAccountRestriction: this.onAccountRestriction,
     })
   }
 
@@ -190,13 +211,15 @@ ConnectHardwareForm.propTypes = {
   forgetDevice: PropTypes.func,
   showAlert: PropTypes.func,
   hideAlert: PropTypes.func,
-  unlockTrezorAccount: PropTypes.func,
+  unlockHardwareWalletAccount: PropTypes.func,
+  setHardwareWalletDefaultHdPath: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
   t: PropTypes.func,
   network: PropTypes.string,
   accounts: PropTypes.object,
   address: PropTypes.string,
+  defaultHdPaths: PropTypes.object,
 }
 
 const mapStateToProps = state => {
@@ -204,28 +227,35 @@ const mapStateToProps = state => {
     metamask: { network, selectedAddress, identities = {}, accounts = [] },
   } = state
   const numberOfExistingAccounts = Object.keys(identities).length
+  const {
+    appState: { defaultHdPaths },
+  } = state
 
   return {
     network,
     accounts,
     address: selectedAddress,
     numberOfExistingAccounts,
+    defaultHdPaths,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    connectHardware: (deviceName, page) => {
-      return dispatch(actions.connectHardware(deviceName, page))
+    setHardwareWalletDefaultHdPath: ({device, path}) => {
+      return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
+    },
+    connectHardware: (deviceName, page, hdPath) => {
+      return dispatch(actions.connectHardware(deviceName, page, hdPath))
     },
-    checkHardwareStatus: (deviceName) => {
-      return dispatch(actions.checkHardwareStatus(deviceName))
+    checkHardwareStatus: (deviceName, hdPath) => {
+      return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
     },
     forgetDevice: (deviceName) => {
       return dispatch(actions.forgetDevice(deviceName))
     },
-    unlockTrezorAccount: index => {
-      return dispatch(actions.unlockTrezorAccount(index))
+    unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
+      return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
     },
     showImportPage: () => dispatch(actions.showImportPage()),
     showConnectPage: () => dispatch(actions.showConnectPage()),
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
index 7a0b1a18e..df7bcb7cc 100644
--- a/ui/app/components/send/send-content/send-content.component.js
+++ b/ui/app/components/send/send-content/send-content.component.js
@@ -11,6 +11,7 @@ export default class SendContent extends Component {
 
   static propTypes = {
     updateGas: PropTypes.func,
+    scanQrCode: PropTypes.func,
   };
 
   render () {
@@ -18,7 +19,10 @@ export default class SendContent extends Component {
       <PageContainerContent>
         <div className="send-v2__form">
           <SendFromRow />
-          <SendToRow updateGas={(updateData) => this.props.updateGas(updateData)} />
+          <SendToRow
+            updateGas={(updateData) => this.props.updateGas(updateData)}
+            scanQrCode={ _ => this.props.scanQrCode()}
+          />
           <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
           <SendGasRow />
           <SendHexDataRow />
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 892ad5d67..1163dcffc 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -17,6 +17,7 @@ export default class SendToRow extends Component {
     updateGas: PropTypes.func,
     updateSendTo: PropTypes.func,
     updateSendToError: PropTypes.func,
+    scanQrCode: PropTypes.func,
   };
 
   static contextTypes = {
@@ -51,6 +52,7 @@ export default class SendToRow extends Component {
         showError={inError}
       >
         <EnsInput
+          scanQrCode={_ => this.props.scanQrCode()}
           accounts={toAccounts}
           closeDropdown={() => closeToDropdown()}
           dropdownOpen={toDropdownOpen}
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index 6f1b20c55..0d8ffd179 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -38,12 +38,30 @@ export default class SendTransactionScreen extends PersistentForm {
     updateAndSetGasTotal: PropTypes.func,
     updateSendErrors: PropTypes.func,
     updateSendTokenBalance: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    qrCodeDetected: PropTypes.func,
+    qrCodeData: PropTypes.object,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.qrCodeData) {
+      if (nextProps.qrCodeData.type === 'address') {
+        const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
+        const currentAddress = this.props.to && this.props.to.toLowerCase()
+        if (currentAddress !== scannedAddress) {
+          this.props.updateSendTo(scannedAddress)
+          this.updateGas({ to: scannedAddress })
+          // Clean up QR code data after handling
+          this.props.qrCodeDetected(null)
+        }
+      }
+    }
+  }
+
   updateGas ({ to: updatedToAddress, amount: value } = {}) {
     const {
       amount,
@@ -158,6 +176,16 @@ export default class SendTransactionScreen extends PersistentForm {
       address,
     })
     this.updateGas()
+
+    // Show QR Scanner modal  if ?scan=true
+    if (window.location.search === '?scan=true') {
+      this.props.scanQrCode()
+
+      // Clear the queryString param after showing the modal
+      const cleanUrl = location.href.split('?')[0]
+      history.pushState({}, null, `${cleanUrl}`)
+      window.location.hash = '#send'
+    }
   }
 
   componentWillUnmount () {
@@ -170,7 +198,10 @@ export default class SendTransactionScreen extends PersistentForm {
     return (
       <div className="page-container">
         <SendHeader history={history}/>
-        <SendContent updateGas={(updateData) => this.updateGas(updateData)}/>
+        <SendContent
+          updateGas={(updateData) => this.updateGas(updateData)}
+          scanQrCode={_ => this.props.scanQrCode()}
+        />
         <SendFooter history={history}/>
       </div>
     )
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index 44ebd2792..41735de64 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -21,11 +21,15 @@ import {
   getSendFromObject,
   getSendTo,
   getTokenBalance,
+  getQrCodeData,
 } from './send.selectors'
 import {
+  updateSendTo,
   updateSendTokenBalance,
   updateGasData,
   setGasTotal,
+  showQrScanner,
+  qrCodeDetected,
 } from '../../actions'
 import {
   resetSendState,
@@ -35,6 +39,10 @@ import {
   calcGasTotal,
 } from './send.utils.js'
 
+import {
+  SEND_ROUTE,
+} from '../../routes'
+
 module.exports = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
@@ -60,6 +68,7 @@ function mapStateToProps (state) {
     tokenBalance: getTokenBalance(state),
     tokenContract: getSelectedTokenContract(state),
     tokenToFiatRate: getSelectedTokenToFiatRate(state),
+    qrCodeData: getQrCodeData(state),
   }
 }
 
@@ -89,5 +98,8 @@ function mapDispatchToProps (dispatch) {
     },
     updateSendErrors: newError => dispatch(updateSendErrors(newError)),
     resetSendState: () => dispatch(resetSendState()),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
   }
 }
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
index cf07eafe1..ab3f6d34b 100644
--- a/ui/app/components/send/send.selectors.js
+++ b/ui/app/components/send/send.selectors.js
@@ -46,6 +46,7 @@ const selectors = {
   getTokenExchangeRate,
   getUnapprovedTxs,
   transactionsSelector,
+  getQrCodeData,
 }
 
 module.exports = selectors
@@ -282,3 +283,7 @@ function transactionsSelector (state) {
     : txsToRender
       .sort((a, b) => b.time - a.time)
 }
+
+function getQrCodeData (state) {
+  return state.appState.qrCodeData
+}
diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js
index 7a9120d24..57e332780 100644
--- a/ui/app/components/send/tests/send-container.test.js
+++ b/ui/app/components/send/tests/send-container.test.js
@@ -44,6 +44,7 @@ proxyquire('../send.container.js', {
     getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
     getSendFromObject: (s) => `mockFrom:${s}`,
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
+    getQrCodeData: (s) => `mockQrCodeData:${s}`,
   },
   '../../actions': actionSpies,
   '../../ducks/send.duck': duckActionSpies,
@@ -76,6 +77,7 @@ describe('send container', () => {
         tokenBalance: 'mockTokenBalance:mockState',
         tokenContract: 'mockTokenContract:mockState',
         tokenToFiatRate: 'mockTokenToFiatRate:mockState',
+        qrCodeData: 'mockQrCodeData:mockState',
       })
     })
 
diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js
index 80cfa7a85..49ebf49d9 100644
--- a/ui/app/components/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountListItem = require('../account-list-item/account-list-item.component').default
 const connect = require('react-redux').connect
+const Tooltip = require('../../tooltip')
 
 ToAutoComplete.contextTypes = {
   t: PropTypes.func,
@@ -94,11 +95,12 @@ ToAutoComplete.prototype.render = function () {
     dropdownOpen,
     onChange,
     inError,
+    qrScanner,
   } = this.props
 
   return h('div.send-v2__to-autocomplete', {}, [
 
-    h('input.send-v2__to-autocomplete__input', {
+    h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
       placeholder: this.context.t('recipientAddress'),
       className: inError ? `send-v2__error-border` : '',
       value: to,
@@ -108,7 +110,13 @@ ToAutoComplete.prototype.render = function () {
         borderColor: inError ? 'red' : null,
       },
     }),
-
+    qrScanner && h(Tooltip, {
+      title: this.context.t('scanQrCode'),
+      position: 'bottom',
+    }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
+      style: { color: '#33333' },
+      onClick: () => this.props.scanQrCode(),
+    })),
     !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
       style: { color: '#dedede' },
       onClick: () => this.handleInputEvent(),
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 20c2be0f1..8e092364c 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -118,8 +118,18 @@ WalletView.prototype.render = function () {
     return kr.accounts.includes(selectedAddress)
   })
 
-  const type = keyring.type
-  const isLoose = type !== 'HD Key Tree'
+  let label = ''
+  let type
+  if (keyring) {
+    type = keyring.type
+    if (type !== 'HD Key Tree') {
+      if (type.toLowerCase().search('hardware') !== -1) {
+        label = this.context.t('hardware')
+      } else {
+        label = this.context.t('imported')
+      }
+    }
+  }
 
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},
@@ -133,7 +143,7 @@ WalletView.prototype.render = function () {
         onClick: hideSidebar,
       }),
 
-      h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''),
+      h('div.wallet-view__keyring-label.allcaps', label),
 
       h('div.flex-column.flex-center.wallet-view__name-container', {
         style: { margin: '0 auto' },