From 25184a3901f96e3c4fea94ed0bd135fbe7597148 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 10:24:51 -0700
Subject: Move global modals into own pod, inside components/modals

---
 ui/app/components/modals/buy-modal.js |  27 +++++++++
 ui/app/components/modals/index.js     |   9 +++
 ui/app/components/modals/modal.js     | 100 ++++++++++++++++++++++++++++++++++
 3 files changed, 136 insertions(+)
 create mode 100644 ui/app/components/modals/buy-modal.js
 create mode 100644 ui/app/components/modals/index.js
 create mode 100644 ui/app/components/modals/modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js
new file mode 100644
index 000000000..c1bf1d0df
--- /dev/null
+++ b/ui/app/components/modals/buy-modal.js
@@ -0,0 +1,27 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const FadeModal = require('boron').FadeModal
+const actions = require('../../actions')
+const isMobileView = require('../../../lib/is-mobile-view')
+const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+const BuyOptions = require('../buy-options')
+
+inherits(BuyModal, Component)
+function BuyModal () {
+  Component.call(this)
+}
+
+module.exports = BuyModal
+
+BuyModal.prototype.render = function () {
+  return h(BuyModal, {
+    ref: "modalRef",
+  }, [
+    h(BuyOptions, {}, []),
+  ])
+
+}
+
+// TODO: specify default props and proptypes
diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js
new file mode 100644
index 000000000..23b432b7c
--- /dev/null
+++ b/ui/app/components/modals/index.js
@@ -0,0 +1,9 @@
+const Modal = require('./modal')
+const BuyModal = require('./buy-modal')
+// const h = require('account-options')
+// const h = require('account-details')
+
+module.exports = {
+  Modal,
+  BuyModal,
+}
\ No newline at end of file
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
new file mode 100644
index 000000000..006e009b3
--- /dev/null
+++ b/ui/app/components/modals/modal.js
@@ -0,0 +1,100 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const FadeModal = require('boron').FadeModal
+const actions = require('../../actions')
+const isMobileView = require('../../../lib/is-mobile-view')
+const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+
+function mapStateToProps (state) {
+  return {
+    active: state.appState.modalOpen
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+// Global Modal Component
+inherits(Modal, Component)
+function Modal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
+
+const mobileModalStyles = {
+  width: '95%',
+  // Used to create matching t/l/r/b space in mobile view.
+  top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+}
+
+const laptopModalStyles = {
+  width: '66%',
+  top: 'calc(30% + 10px)',
+  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+}
+
+const backdropStyles = {
+  backgroundColor: 'rgba(245, 245, 245, 0.85)',
+}
+
+Modal.prototype.render = function () {
+
+  return h(FadeModal,
+    {
+      className: 'modal',
+      keyboard: false,
+      onHide: () => {this.onHide()},
+      ref: (ref) => {
+        this.modalRef = ref
+      },
+      modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
+      backdropStyle: backdropStyles,
+    },
+    this.props.children,
+  )
+}
+
+Modal.prototype.componentWillReceiveProps = function(nextProps) {
+  if (nextProps.active) {
+    this.show()
+  } else if (this.props.active) {
+    this.hide()
+  }
+}
+
+Modal.prototype.onHide = function() {
+  if (this.props.onHideCallback) {
+    this.props.onHideCallback()
+  }
+  this.props.hideModal()
+}
+
+Modal.prototype.hide = function() {
+  this.modalRef.hide()
+}
+
+Modal.prototype.show = function() {
+  this.modalRef.show()
+}
+
+// TODO: specify default props and proptypes
+// Modal.defaultProps = {}
+
+// const elementType = require('react-prop-types/lib/elementType')
+// const PropTypes from 'prop-types'
+
+// Modal.propTypes = {
+//   active: PropTypes.bool,
+//   hideModal: PropTypes.func.isRequired,
+//   component: elementType,
+//   onHideCallback: PropTypes.func,
+// }
-- 
cgit v1.2.3


From e39c600a45a4cf28b5429231dd6c57442d467075 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 10:49:41 -0700
Subject: [WIP] Extract network dropdown out of main app render function

---
 ui/app/components/modals/buy-modal.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js
index c1bf1d0df..9a3e4dff9 100644
--- a/ui/app/components/modals/buy-modal.js
+++ b/ui/app/components/modals/buy-modal.js
@@ -1,12 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const FadeModal = require('boron').FadeModal
-const actions = require('../../actions')
-const isMobileView = require('../../../lib/is-mobile-view')
-const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
 const BuyOptions = require('../buy-options')
+const Modal = require('./modal.js')
 
 inherits(BuyModal, Component)
 function BuyModal () {
@@ -16,7 +12,7 @@ function BuyModal () {
 module.exports = BuyModal
 
 BuyModal.prototype.render = function () {
-  return h(BuyModal, {
+  return h(Modal, {
     ref: "modalRef",
   }, [
     h(BuyOptions, {}, []),
-- 
cgit v1.2.3


From 99be6e17caee1371eec86bd3232fc0d4600979cf Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Tue, 15 Aug 2017 05:46:41 +0200
Subject: [WiP] Add comments for multiple modals

---
 ui/app/components/modals/buy-modal.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js
index 9a3e4dff9..c69433b1f 100644
--- a/ui/app/components/modals/buy-modal.js
+++ b/ui/app/components/modals/buy-modal.js
@@ -21,3 +21,23 @@ BuyModal.prototype.render = function () {
 }
 
 // TODO: specify default props and proptypes
+
+// Generalize to multiple modals:
+//   Modal API:
+//    - props {
+//      key: ['BUY', 'EDIT_ACCOUNT_NAME', 'ACCOUNT_DETAILS']
+//    }
+//    - These props will be passed as 'active'
+//      mapStateToProps(state, ownProps) {
+//        active: state.appState.modal[key]
+//      }
+//    - Modal accepts:
+//      - mobileModalStyles, for mobile viewports
+//      - laptopModalStyles, for laptop viewports
+//      - backdropStyles
+//      - Do not set defaults, they are unneeded here
+// 
+// If multiple-step modals are needed:
+//  - pass a component with internal state that tracks buy steps
+//    - steps could technically be in redux
+//  - it renders and does not trigger open/close actions until done
\ No newline at end of file
-- 
cgit v1.2.3


From 4e9376ca7129611d12a7ec263741f1dee0e4d79c Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 18:32:58 -0700
Subject: Extend modal implementation and state management to accomodate
 multiple modal types

---
 ui/app/components/modals/modal.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 006e009b3..45aa09095 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -6,10 +6,20 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+const BuyOptions = require('../buy-options')
+
+const MODALS = {
+  BUY: [
+    h(BuyOptions, {}, []),
+  ],
+  EDIT_ACCOUNT_NAME: [],
+  ACCOUNT_DETAILS: [],
+}
 
 function mapStateToProps (state) {
   return {
-    active: state.appState.modalOpen
+    active: state.appState.modal.open,
+    modalState: state.appState.modal.modalState,
   }
 }
 
@@ -48,6 +58,8 @@ const backdropStyles = {
 
 Modal.prototype.render = function () {
 
+  const children = MODALS[this.props.modalState.name] || []
+
   return h(FadeModal,
     {
       className: 'modal',
@@ -59,7 +71,7 @@ Modal.prototype.render = function () {
       modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
       backdropStyle: backdropStyles,
     },
-    this.props.children,
+    children,
   )
 }
 
-- 
cgit v1.2.3


From 71b2dd290b2bbf3107d06d0616ec8858d21b44da Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 19:10:49 -0700
Subject: Enhance global modal to handle Buy, Edit, and Details Modals

---
 ui/app/components/modals/account-details-modal.js  | 73 ++++++++++++++++++++
 ui/app/components/modals/buy-modal.js              | 43 ------------
 ui/app/components/modals/buy-options-modal.js      | 80 ++++++++++++++++++++++
 .../components/modals/edit-account-name-modal.js   | 80 ++++++++++++++++++++++
 ui/app/components/modals/index.js                  |  4 --
 ui/app/components/modals/modal.js                  | 14 +++-
 6 files changed, 244 insertions(+), 50 deletions(-)
 create mode 100644 ui/app/components/modals/account-details-modal.js
 delete mode 100644 ui/app/components/modals/buy-modal.js
 create mode 100644 ui/app/components/modals/buy-options-modal.js
 create mode 100644 ui/app/components/modals/edit-account-name-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
new file mode 100644
index 000000000..45f54908f
--- /dev/null
+++ b/ui/app/components/modals/account-details-modal.js
@@ -0,0 +1,73 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+function mapStateToProps (state) {
+  return {
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    }
+  }
+}
+
+inherits(AccountDetailsModal, Component)
+function AccountDetailsModal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
+
+// AccountDetailsModal is currently meant to be rendered inside <Modal />
+// It is the only component in this codebase that does so
+// It utilizes modal styles
+AccountDetailsModal.prototype.render = function () {
+  return h('div', {}, [
+    h('div.modal-content.transfers-subview', {
+    }, [
+      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.modal-content-title', {
+          style: {},
+        }, 'Account Details Modal'),
+        h('div', {}, 'How would you like to buy Ether?'),
+      ]),
+
+      h('div.modal-content-options.flex-column.flex-center', {}, [
+
+        h('div.modal-content-option', {
+          onClick: () => {},
+        }, [
+          h('div.modal-content-option-title', {}, 'Coinbase'),
+          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Shapeshift'),
+          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        ]),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+    ])
+  ])
+}
diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js
deleted file mode 100644
index c69433b1f..000000000
--- a/ui/app/components/modals/buy-modal.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const BuyOptions = require('../buy-options')
-const Modal = require('./modal.js')
-
-inherits(BuyModal, Component)
-function BuyModal () {
-  Component.call(this)
-}
-
-module.exports = BuyModal
-
-BuyModal.prototype.render = function () {
-  return h(Modal, {
-    ref: "modalRef",
-  }, [
-    h(BuyOptions, {}, []),
-  ])
-
-}
-
-// TODO: specify default props and proptypes
-
-// Generalize to multiple modals:
-//   Modal API:
-//    - props {
-//      key: ['BUY', 'EDIT_ACCOUNT_NAME', 'ACCOUNT_DETAILS']
-//    }
-//    - These props will be passed as 'active'
-//      mapStateToProps(state, ownProps) {
-//        active: state.appState.modal[key]
-//      }
-//    - Modal accepts:
-//      - mobileModalStyles, for mobile viewports
-//      - laptopModalStyles, for laptop viewports
-//      - backdropStyles
-//      - Do not set defaults, they are unneeded here
-// 
-// If multiple-step modals are needed:
-//  - pass a component with internal state that tracks buy steps
-//    - steps could technically be in redux
-//  - it renders and does not trigger open/close actions until done
\ No newline at end of file
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
new file mode 100644
index 000000000..170ac96b8
--- /dev/null
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -0,0 +1,80 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    }
+  }
+}
+
+inherits(BuyOptions, Component)
+function BuyOptions () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+
+// BuyOptions is currently meant to be rendered inside <Modal />
+// It is the only component in this codebase that does so
+// It utilizes modal styles
+BuyOptions.prototype.render = function () {
+  return h('div', {}, [
+    h('div.modal-content.transfers-subview', {
+    }, [
+      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.modal-content-title', {
+          style: {},
+        }, 'Transfers'),
+        h('div', {}, 'How would you like to buy Ether?'),
+      ]),
+
+      h('div.modal-content-options.flex-column.flex-center', {}, [
+
+        h('div.modal-content-option', {
+          onClick: () => {
+            const { toCoinbase, address } = this.props
+            toCoinbase(address)
+          },
+        }, [
+          h('div.modal-content-option-title', {}, 'Coinbase'),
+          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Shapeshift'),
+          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        ]),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+    ])
+  ])
+}
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
new file mode 100644
index 000000000..5d2d2e120
--- /dev/null
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -0,0 +1,80 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    }
+  }
+}
+
+inherits(BuyOptions, Component)
+function BuyOptions () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+
+// BuyOptions is currently meant to be rendered inside <Modal />
+// It is the only component in this codebase that does so
+// It utilizes modal styles
+BuyOptions.prototype.render = function () {
+  return h('div', {}, [
+    h('div.modal-content.transfers-subview', {
+    }, [
+      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.modal-content-title', {
+          style: {},
+        }, 'Edit Account Name Modal'),
+        h('div', {}, 'How would you like to buy Ether?'),
+      ]),
+
+      h('div.modal-content-options.flex-column.flex-center', {}, [
+
+        h('div.modal-content-option', {
+          onClick: () => {
+            const { toCoinbase, address } = this.props
+            toCoinbase(address)
+          },
+        }, [
+          h('div.modal-content-option-title', {}, 'Coinbase'),
+          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Shapeshift'),
+          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        ]),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+    ])
+  ])
+}
diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js
index 23b432b7c..e2e367af0 100644
--- a/ui/app/components/modals/index.js
+++ b/ui/app/components/modals/index.js
@@ -1,9 +1,5 @@
 const Modal = require('./modal')
-const BuyModal = require('./buy-modal')
-// const h = require('account-options')
-// const h = require('account-details')
 
 module.exports = {
   Modal,
-  BuyModal,
 }
\ No newline at end of file
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 45aa09095..04a34cfed 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -6,14 +6,22 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
-const BuyOptions = require('../buy-options')
+
+// Modal Components
+const BuyOptions = require('./buy-options-modal')
+const AccountDetailsModal = require('./account-details-modal')
+const EditAccountNameModal = require('./edit-account-name-modal')
 
 const MODALS = {
   BUY: [
     h(BuyOptions, {}, []),
   ],
-  EDIT_ACCOUNT_NAME: [],
-  ACCOUNT_DETAILS: [],
+  EDIT_ACCOUNT_NAME: [
+    h(AccountDetailsModal, {}, []),
+  ],
+  ACCOUNT_DETAILS: [
+    h(EditAccountNameModal, {}, []),
+  ],
 }
 
 function mapStateToProps (state) {
-- 
cgit v1.2.3


From 73a593b42e3a81b721cfa2f8913565a8b800f983 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 19:28:20 -0700
Subject: Hook up template for New Account Modal

---
 ui/app/components/modals/modal.js             |  4 ++
 ui/app/components/modals/new-account-modal.js | 80 +++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 ui/app/components/modals/new-account-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 04a34cfed..4b3d3b09c 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -11,6 +11,7 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n
 const BuyOptions = require('./buy-options-modal')
 const AccountDetailsModal = require('./account-details-modal')
 const EditAccountNameModal = require('./edit-account-name-modal')
+const NewAccountModal = require('./new-account-modal')
 
 const MODALS = {
   BUY: [
@@ -22,6 +23,9 @@ const MODALS = {
   ACCOUNT_DETAILS: [
     h(EditAccountNameModal, {}, []),
   ],
+  NEW_ACCOUNT: [
+    h(NewAccountModal, {}, []),
+  ]
 }
 
 function mapStateToProps (state) {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
new file mode 100644
index 000000000..e4b3ca328
--- /dev/null
+++ b/ui/app/components/modals/new-account-modal.js
@@ -0,0 +1,80 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    }
+  }
+}
+
+inherits(BuyOptions, Component)
+function BuyOptions () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+
+// BuyOptions is currently meant to be rendered inside <Modal />
+// It is the only component in this codebase that does so
+// It utilizes modal styles
+BuyOptions.prototype.render = function () {
+  return h('div', {}, [
+    h('div.modal-content.transfers-subview', {
+    }, [
+      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.modal-content-title', {
+          style: {},
+        }, 'New Account Modal'),
+        h('div', {}, 'How would you like to buy Ether?'),
+      ]),
+
+      h('div.modal-content-options.flex-column.flex-center', {}, [
+
+        h('div.modal-content-option', {
+          onClick: () => {
+            const { toCoinbase, address } = this.props
+            toCoinbase(address)
+          },
+        }, [
+          h('div.modal-content-option-title', {}, 'Coinbase'),
+          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Shapeshift'),
+          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        ]),
+
+        h('div.modal-content-option', {}, [
+          h('div.modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        ]),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+    ])
+  ])
+}
-- 
cgit v1.2.3


From 66829b7a05322320855b077c04f885908bd95efa Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 03:27:11 -0700
Subject: Implement new dropdown design, integrate account balances

---
 ui/app/components/modals/modal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 4b3d3b09c..77391dfcc 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -18,10 +18,10 @@ const MODALS = {
     h(BuyOptions, {}, []),
   ],
   EDIT_ACCOUNT_NAME: [
-    h(AccountDetailsModal, {}, []),
+    h(EditAccountNameModal, {}, []),
   ],
   ACCOUNT_DETAILS: [
-    h(EditAccountNameModal, {}, []),
+    h(AccountDetailsModal, {}, []),
   ],
   NEW_ACCOUNT: [
     h(NewAccountModal, {}, []),
-- 
cgit v1.2.3


From 80a2cba38ef4fe6c01a624c5a504a7803b1a8316 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 03:53:01 -0700
Subject: Enhance global modal to accept styles from different components

---
 ui/app/components/modals/modal.js | 107 ++++++++++++++++++++++----------------
 1 file changed, 62 insertions(+), 45 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 77391dfcc..e2c5f77cc 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -14,18 +14,63 @@ const EditAccountNameModal = require('./edit-account-name-modal')
 const NewAccountModal = require('./new-account-modal')
 
 const MODALS = {
-  BUY: [
-    h(BuyOptions, {}, []),
-  ],
-  EDIT_ACCOUNT_NAME: [
-    h(EditAccountNameModal, {}, []),
-  ],
-  ACCOUNT_DETAILS: [
-    h(AccountDetailsModal, {}, []),
-  ],
-  NEW_ACCOUNT: [
-    h(NewAccountModal, {}, []),
-  ]
+  BUY: {
+    contents: [
+      h(BuyOptions, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+    laptopModalStyle: {
+      width: '66%',
+      top: 'calc(30% + 10px)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+  },
+
+  EDIT_ACCOUNT_NAME: {
+    contents: [
+      h(EditAccountNameModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+    laptopModalStyle: {
+      width: '45%',
+      top: 'calc(30% + 10px)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+  },
+
+  ACCOUNT_DETAILS: {
+    contents: [
+      h(AccountDetailsModal, {}, []),
+    ],
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  },
+
+  NEW_ACCOUNT: {
+    contents: [
+      h(NewAccountModal, {}, []),
+    ],
+    mobileModalStyle: {},
+    laptopModalStyle: {}
+  },
+
+  DEFAULT: {
+    contents: [],
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  }
+}
+
+const BACKDROPSTYLE = {
+  backgroundColor: 'rgba(245, 245, 245, 0.85)',
 }
 
 function mapStateToProps (state) {
@@ -51,26 +96,11 @@ function Modal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
 
-const mobileModalStyles = {
-  width: '95%',
-  // Used to create matching t/l/r/b space in mobile view.
-  top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
-  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-}
-
-const laptopModalStyles = {
-  width: '66%',
-  top: 'calc(30% + 10px)',
-  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-}
-
-const backdropStyles = {
-  backgroundColor: 'rgba(245, 245, 245, 0.85)',
-}
-
 Modal.prototype.render = function () {
+  const modal = MODALS[this.props.modalState.name || 'DEFAULT']
 
-  const children = MODALS[this.props.modalState.name] || []
+  const children = modal.contents
+  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
 
   return h(FadeModal,
     {
@@ -80,8 +110,8 @@ Modal.prototype.render = function () {
       ref: (ref) => {
         this.modalRef = ref
       },
-      modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
-      backdropStyle: backdropStyles,
+      modalStyle,
+      backdropStyle: BACKDROPSTYLE,
     },
     children,
   )
@@ -109,16 +139,3 @@ Modal.prototype.hide = function() {
 Modal.prototype.show = function() {
   this.modalRef.show()
 }
-
-// TODO: specify default props and proptypes
-// Modal.defaultProps = {}
-
-// const elementType = require('react-prop-types/lib/elementType')
-// const PropTypes from 'prop-types'
-
-// Modal.propTypes = {
-//   active: PropTypes.bool,
-//   hideModal: PropTypes.func.isRequired,
-//   component: elementType,
-//   onHideCallback: PropTypes.func,
-// }
-- 
cgit v1.2.3


From d82233b95c5c3c4297a2d18b981ec6188de003c1 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 04:46:38 -0700
Subject: Hook up actions to EditAccountNameModal

---
 ui/app/components/modals/account-details-modal.js  | 28 +++----
 ui/app/components/modals/buy-options-modal.js      | 28 +++----
 .../components/modals/edit-account-name-modal.js   | 85 ++++++++++------------
 ui/app/components/modals/new-account-modal.js      | 28 +++----
 4 files changed, 82 insertions(+), 87 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 45f54908f..38d08314b 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -30,34 +30,34 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 // It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.buy-modal-content.transfers-subview', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
         style: {},
       }, [
-        h('div.modal-content-title', {
+        h('div.buy-modal-content-title', {
           style: {},
         }, 'Account Details Modal'),
         h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.modal-content-option', {
+        h('div.buy-modal-content-option', {
           onClick: () => {},
         }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
       ]),
@@ -67,7 +67,7 @@ AccountDetailsModal.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 170ac96b8..76e0da4f1 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 // It utilizes modal styles
 BuyOptions.prototype.render = function () {
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.buy-modal-content.transfers-subview', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
         style: {},
       }, [
-        h('div.modal-content-title', {
+        h('div.buy-modal-content-title', {
           style: {},
         }, 'Transfers'),
         h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.modal-content-option', {
+        h('div.buy-modal-content-option', {
           onClick: () => {
             const { toCoinbase, address } = this.props
             toCoinbase(address)
           },
         }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
       ]),
@@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 5d2d2e120..0128fe412 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -3,78 +3,73 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const { getSelectedAccount } = require('../../selectors')
 
 function mapStateToProps (state) {
   return {
-    network: state.metamask.network,
-    address: state.metamask.selectedAddress,
+    selectedAccount: getSelectedAccount(state),
+    identity: state.appState.modal.modalState.identity,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    toCoinbase: (address) => {
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-    },
     hideModal: () => {
       dispatch(actions.hideModal())
-    }
+    },
+    saveAccountLabel: (account, label) => {
+      dispatch(actions.saveAccountLabel(account, label))
+    },
   }
 }
 
-inherits(BuyOptions, Component)
-function BuyOptions () {
+inherits(EditAccountNameModal, Component)
+function EditAccountNameModal () {
   Component.call(this)
+  this.state = {
+    inputText: '',
+  }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
 
-// BuyOptions is currently meant to be rendered inside <Modal />
+// EditAccountNameModal is currently meant to be rendered inside <Modal />
 // It is the only component in this codebase that does so
 // It utilizes modal styles
-BuyOptions.prototype.render = function () {
+EditAccountNameModal.prototype.render = function () {
+  const { hideModal, saveAccountLabel, identity } = this.props
+
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.flex-column.edit-account-name-modal-content', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
-        style: {},
-      }, [
-        h('div.modal-content-title', {
-          style: {},
-        }, 'Edit Account Name Modal'),
-        h('div', {}, 'How would you like to buy Ether?'),
-      ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
-
-        h('div.modal-content-option', {
-          onClick: () => {
-            const { toCoinbase, address } = this.props
-            toCoinbase(address)
-          },
-        }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
-        ]),
+      h('div.edit-account-name-modal-cancel', {}, [
+        h('i.fa.fa-times'),
+      ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        ]),
+      h('div.edit-account-name-modal-title', {
+      }, ['Edit Account Name']),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
-        ]),
+      h('input.edit-account-name-modal-input', {
+        placeholder: identity.name,
+        onChange: (event) => {
+          this.setState({ inputText: event.target.value })
+        },
+        value: this.state.inputText,
+      }, []),
 
+      h('button.btn-clear.edit-account-name-modal-save-button', {
+        onClick: () => {
+          if (this.state.inputText.length !== 0) {
+            saveAccountLabel(identity.address, this.state.inputText)
+            hideModal()
+          }
+        },
+        disabled: this.state.inputText.length === 0,
+      }, [
+        'SAVE',
       ]),
 
-      h('button', {
-        style: {
-          background: 'white',
-        },
-        onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index e4b3ca328..c55d69964 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 // It utilizes modal styles
 BuyOptions.prototype.render = function () {
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.buy-modal-content.transfers-subview', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
         style: {},
       }, [
-        h('div.modal-content-title', {
+        h('div.buy-modal-content-title', {
           style: {},
         }, 'New Account Modal'),
         h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.modal-content-option', {
+        h('div.buy-modal-content-option', {
           onClick: () => {
             const { toCoinbase, address } = this.props
             toCoinbase(address)
           },
         }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
       ]),
@@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
-- 
cgit v1.2.3


From 3fa7c5dc0814bce907c7adbd6e39e1759186120c Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 04:53:30 -0700
Subject: Hook up hideModal action to close icon in EditAccountNameModal

---
 ui/app/components/modals/edit-account-name-modal.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 0128fe412..cff8b2a58 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -43,7 +43,11 @@ EditAccountNameModal.prototype.render = function () {
     h('div.flex-column.edit-account-name-modal-content', {
     }, [
 
-      h('div.edit-account-name-modal-cancel', {}, [
+      h('div.edit-account-name-modal-cancel', {
+        onClick: () => {
+          hideModal()
+        },
+      }, [
         h('i.fa.fa-times'),
       ]),
 
-- 
cgit v1.2.3


From 35508a28984afeccac31eb7c6789e26681f02b22 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 05:58:30 -0700
Subject: Add wrapper CSS for AccountDetailsModal

---
 ui/app/components/modals/account-details-modal.js | 54 +++++++++++------------
 ui/app/components/modals/modal.js                 | 14 ++++--
 2 files changed, 36 insertions(+), 32 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 38d08314b..104d2c6ed 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -30,44 +30,40 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 // It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
   return h('div', {}, [
-    h('div.buy-modal-content.transfers-subview', {
+    h('div.account-details-modal-wrapper', {
     }, [
-      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
-        style: {},
-      }, [
-        h('div.buy-modal-content-title', {
-          style: {},
-        }, 'Account Details Modal'),
-        h('div', {}, 'How would you like to buy Ether?'),
+
+      h('div', {}, [
+        'ICON',
       ]),
 
-      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
+      h('div', {}, [
+        'X',
+      ]),
 
-        h('div.buy-modal-content-option', {
-          onClick: () => {},
-        }, [
-          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
-        ]),
+      h('div', {}, [
+      ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        ]),
+      h('div', {}, [
+        'QR Code',
+      ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
-        ]),
+      h('div', {}, [
+        'Account Display',
+      ]),
+
+      h('div', {}, [
+        'divider',
+      ]),
+
+      h('div', {}, [
+        'View aCcount on etherscan',
+      ]),
 
+      h('div', {}, [
+        'export private key',
       ]),
 
-      h('button', {
-        style: {
-          background: 'white',
-        },
-        onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index e2c5f77cc..842c4ed51 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -40,7 +40,7 @@ const MODALS = {
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
     laptopModalStyle: {
-      width: '45%',
+      width: '375px',
       top: 'calc(30% + 10px)',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
@@ -50,8 +50,16 @@ const MODALS = {
     contents: [
       h(AccountDetailsModal, {}, []),
     ],
-    mobileModalStyle: {},
-    laptopModalStyle: {},
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+    laptopModalStyle: {
+      width: '360px',
+      top: 'calc(30% + 10px)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
   },
 
   NEW_ACCOUNT: {
-- 
cgit v1.2.3


From 86b71f014a4bda433532cf7cbe7d76b243d3fb70 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 06:14:28 -0700
Subject: Add wrapper CSS for NewAccountModal

---
 ui/app/components/modals/new-account-modal.js | 68 ++++++++++++---------------
 1 file changed, 29 insertions(+), 39 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index c55d69964..15341a2e9 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -22,59 +22,49 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-inherits(BuyOptions, Component)
-function BuyOptions () {
+inherits(NewAccountModal, Component)
+function NewAccountModal () {
   Component.call(this)
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
 
-// BuyOptions is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
-BuyOptions.prototype.render = function () {
+NewAccountModal.prototype.render = function () {
   return h('div', {}, [
-    h('div.buy-modal-content.transfers-subview', {
+    h('div.new-account-modal-wrapper', {
     }, [
-      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
-        style: {},
-      }, [
-        h('div.buy-modal-content-title', {
-          style: {},
-        }, 'New Account Modal'),
-        h('div', {}, 'How would you like to buy Ether?'),
+      h('div', {}, [
+        'New Account',
       ]),
 
-      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
-
-        h('div.buy-modal-content-option', {
-          onClick: () => {
-            const { toCoinbase, address } = this.props
-            toCoinbase(address)
-          },
-        }, [
-          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
+      h('div', {}, [
+        h('i.fa.fa-times', {}, [
         ]),
+      ]),
+      
+      h('div', {}, [
+        'Account Name',
+      ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        ]),
+      h('div', {}, [
+        h('input', {
+          placeholder: 'E.g. My new account'
+        }, []),
+      ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
-        ]),
+      h('div', {}, [
+        'or',
+      ]),
 
+      h('div', {}, [
+        'Import an account',
       ]),
 
-      h('button', {
-        style: {
-          background: 'white',
-        },
-        onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
+      h('div', {}, [
+        h('button.btn-clear', {}, [
+          'SAVE',
+        ]),
+      ]),
     ])
   ])
 }
-- 
cgit v1.2.3


From fe5817051b00a7288fb97541c5674641e978aead Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 09:50:22 -0700
Subject: [WIP] Aggregate data for QRView

---
 ui/app/components/modals/account-details-modal.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 104d2c6ed..2a5359fd4 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -3,10 +3,15 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
+
+const QrView = require('../qr-code')
 
 function mapStateToProps (state) {
   return {
     address: state.metamask.selectedAddress,
+    selectedAddress: getSelectedAddress(state),
+    selectedIdentity: getSelectedIdentity(state),
   }
 }
 
@@ -14,7 +19,8 @@ function mapDispatchToProps (dispatch) {
   return {
     hideModal: () => {
       dispatch(actions.hideModal())
-    }
+    },
+    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
   }
 }
 
@@ -45,7 +51,12 @@ AccountDetailsModal.prototype.render = function () {
       ]),
 
       h('div', {}, [
-        'QR Code',
+        h(QrView, {
+          Qr: {
+            message: this.props.selectedAddress,
+            data: this.props.selectedIdentity,
+          }
+        }, []),
       ]),
 
       h('div', {}, [
-- 
cgit v1.2.3


From b836d0483d835b0665a14e41f68f9fbd574fd655 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 10:06:29 -0700
Subject: [WIP] Render a QR code in AccountDetailsModal

---
 ui/app/components/modals/account-details-modal.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 2a5359fd4..f7dcf26eb 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,7 +10,7 @@ const QrView = require('../qr-code')
 function mapStateToProps (state) {
   return {
     address: state.metamask.selectedAddress,
-    selectedAddress: getSelectedAddress(state),
+    // selectedAddress: getSelectedAddress(state),
     selectedIdentity: getSelectedIdentity(state),
   }
 }
@@ -35,6 +35,8 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 // It is the only component in this codebase that does so
 // It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
+  const { selectedIdentity } = this.props
+
   return h('div', {}, [
     h('div.account-details-modal-wrapper', {
     }, [
@@ -53,8 +55,8 @@ AccountDetailsModal.prototype.render = function () {
       h('div', {}, [
         h(QrView, {
           Qr: {
-            message: this.props.selectedAddress,
-            data: this.props.selectedIdentity,
+            message: this.props.selectedIdentity.name,
+            data: this.props.selectedIdentity.address,
           }
         }, []),
       ]),
-- 
cgit v1.2.3


From 877faaf09608fbb5f1ba9dd853959e7399893068 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 10:27:56 -0700
Subject: Integrate old QR component with new modal layout

---
 ui/app/components/modals/account-details-modal.js | 26 +++++++++++++----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index f7dcf26eb..e3d1bb26b 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -52,22 +52,26 @@ AccountDetailsModal.prototype.render = function () {
       h('div', {}, [
       ]),
 
-      h('div', {}, [
-        h(QrView, {
-          Qr: {
-            message: this.props.selectedIdentity.name,
-            data: this.props.selectedIdentity.address,
-          }
-        }, []),
-      ]),
+      h(QrView, {
+        Qr: {
+          message: this.props.selectedIdentity.name,
+          data: this.props.selectedIdentity.address,
+        }
+      }, []),
 
       h('div', {}, [
         'Account Display',
       ]),
 
-      h('div', {}, [
-        'divider',
-      ]),
+      // divider
+      h('div', {
+        style: {
+          width: '100%',
+          height: '1px',
+          margin: '10px 0px',
+          backgroundColor: '#D8D8D8',
+        }
+      }, []),
 
       h('div', {}, [
         'View aCcount on etherscan',
-- 
cgit v1.2.3


From 27b75b67b42c232051660c33da976d64a63ff407 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 12:26:36 -0700
Subject: Hook up identicon and buttons to AccountDetailsModal, clean up colors

---
 ui/app/components/modals/account-details-modal.js  | 45 +++++++++++++---------
 ui/app/components/modals/buy-options-modal.js      |  3 --
 .../components/modals/edit-account-name-modal.js   |  3 --
 3 files changed, 27 insertions(+), 24 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index e3d1bb26b..cbddd0421 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -4,13 +4,15 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
-
+const genAccountLink = require('../../../lib/account-link.js')
+const Identicon = require('../identicon')
 const QrView = require('../qr-code')
 
 function mapStateToProps (state) {
   return {
+    network: state.metamask.network,
     address: state.metamask.selectedAddress,
-    // selectedAddress: getSelectedAddress(state),
+    selectedAddress: getSelectedAddress(state),
     selectedIdentity: getSelectedIdentity(state),
   }
 }
@@ -31,18 +33,24 @@ function AccountDetailsModal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
-// AccountDetailsModal is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
-  const { selectedIdentity } = this.props
+  const { selectedIdentity, selectedAddress, network } = this.props
 
   return h('div', {}, [
     h('div.account-details-modal-wrapper', {
     }, [
 
       h('div', {}, [
-        'ICON',
+
+        h(
+          Identicon,
+          {
+            address: selectedIdentity.address,
+            diameter: 64,
+            style: {},
+          },
+        ),
+
       ]),
 
       h('div', {}, [
@@ -64,21 +72,22 @@ AccountDetailsModal.prototype.render = function () {
       ]),
 
       // divider
-      h('div', {
-        style: {
-          width: '100%',
-          height: '1px',
-          margin: '10px 0px',
-          backgroundColor: '#D8D8D8',
-        }
+      h('div.account-details-modal-divider', {
+        style: {}
       }, []),
 
-      h('div', {}, [
-        'View aCcount on etherscan',
+      h('button.btn-clear', {
+        onClick: () => {
+          const url = genAccountLink(selectedIdentity.address, network)
+          global.platform.openWindow({ url })
+        },
+      }, [
+        'View account on Etherscan',
       ]),
 
-      h('div', {}, [
-        'export private key',
+      // Holding on redesign for Export Private Key functionality
+      h('button.btn-clear', {}, [
+        'Export private key',
       ]),
 
     ])
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 76e0da4f1..6e0831768 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -29,9 +29,6 @@ function BuyOptions () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 
-// BuyOptions is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
 BuyOptions.prototype.render = function () {
   return h('div', {}, [
     h('div.buy-modal-content.transfers-subview', {
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index cff8b2a58..ae5ca23d4 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -33,9 +33,6 @@ function EditAccountNameModal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
 
-// EditAccountNameModal is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
 EditAccountNameModal.prototype.render = function () {
   const { hideModal, saveAccountLabel, identity } = this.props
 
-- 
cgit v1.2.3


From b0759ddc1881179edaf27a6cd57e5fb27bdd2c31 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 12:53:15 -0700
Subject: Hook up send screen action to Send Button in TxView

---
 ui/app/components/modals/new-account-modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 15341a2e9..90a3b7c99 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -18,7 +18,7 @@ function mapDispatchToProps (dispatch) {
     },
     hideModal: () => {
       dispatch(actions.hideModal())
-    }
+    },
   }
 }
 
-- 
cgit v1.2.3


From 744b78e9c8c032cdd13acf121f891c28f319ed4d Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 24 Aug 2017 21:55:27 -0230
Subject: Patch 2 account details modal (#1957)

* Account details modal styling changes.

* Tweaking styles.
---
 ui/app/components/modals/account-details-modal.js | 15 +++++----------
 ui/app/components/modals/modal.js                 |  4 ++--
 2 files changed, 7 insertions(+), 12 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index cbddd0421..3ed702192 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -33,6 +33,9 @@ function AccountDetailsModal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
+// Not yet pixel perfect todos:
+  // fonts of qr-header and close button
+
 AccountDetailsModal.prototype.render = function () {
   const { selectedIdentity, selectedAddress, network } = this.props
 
@@ -42,6 +45,7 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div', {}, [
 
+        // Needs a border; requires changes to svg
         h(
           Identicon,
           {
@@ -53,12 +57,7 @@ AccountDetailsModal.prototype.render = function () {
 
       ]),
 
-      h('div', {}, [
-        'X',
-      ]),
-
-      h('div', {}, [
-      ]),
+      h('div.account-details-modal-close', {}),
 
       h(QrView, {
         Qr: {
@@ -67,10 +66,6 @@ AccountDetailsModal.prototype.render = function () {
         }
       }, []),
 
-      h('div', {}, [
-        'Account Display',
-      ]),
-
       // divider
       h('div.account-details-modal-divider', {
         style: {}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 842c4ed51..06a3efd34 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -52,12 +52,12 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
     laptopModalStyle: {
       width: '360px',
-      top: 'calc(30% + 10px)',
+      top: 'calc(33% + 45px)',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
   },
-- 
cgit v1.2.3


From 4076496c8ea8c5a771db421b6c6a037c6ad48df1 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 24 Aug 2017 22:01:01 -0230
Subject: Patch 3 new account modal (#1962)

* Account details modal styling changes.

* Tweaking styles.

* New account modal re-styling.

* Tweaks to paddings, margins, font sizes, colors and modal dimensions.

* Replace colour codes with variables.
---
 ui/app/components/modals/modal.js             | 10 ++++++++--
 ui/app/components/modals/new-account-modal.js | 19 ++++++++-----------
 2 files changed, 16 insertions(+), 13 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 06a3efd34..fdff4c99e 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -66,8 +66,14 @@ const MODALS = {
     contents: [
       h(NewAccountModal, {}, []),
     ],
-    mobileModalStyle: {},
-    laptopModalStyle: {}
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
   },
 
   DEFAULT: {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 90a3b7c99..c44b79a2e 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -33,34 +33,31 @@ NewAccountModal.prototype.render = function () {
   return h('div', {}, [
     h('div.new-account-modal-wrapper', {
     }, [
-      h('div', {}, [
+      h('div.new-account-modal-header', {}, [
         'New Account',
       ]),
 
-      h('div', {}, [
-        h('i.fa.fa-times', {}, [
-        ]),
-      ]),
+      h('div.modal-close-x', {}),
       
-      h('div', {}, [
+      h('div.new-account-modal-content', {}, [
         'Account Name',
       ]),
 
-      h('div', {}, [
-        h('input', {
+      h('div.new-account-input-wrapper', {}, [
+        h('input.new-account-input', {
           placeholder: 'E.g. My new account'
         }, []),
       ]),
 
-      h('div', {}, [
+      h('div.new-account-modal-content', {}, [
         'or',
       ]),
 
-      h('div', {}, [
+      h('div.new-account-modal-content.import', {}, [
         'Import an account',
       ]),
 
-      h('div', {}, [
+      h('div.new-account-modal-content.button', {}, [
         h('button.btn-clear', {}, [
           'SAVE',
         ]),
-- 
cgit v1.2.3


From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 29 Aug 2017 12:20:48 -0230
Subject: Lint fixes

---
 ui/app/components/modals/account-details-modal.js   |  8 ++++----
 ui/app/components/modals/buy-options-modal.js       |  6 +++---
 ui/app/components/modals/edit-account-name-modal.js |  2 +-
 ui/app/components/modals/index.js                   |  2 +-
 ui/app/components/modals/modal.js                   | 12 ++++++------
 ui/app/components/modals/new-account-modal.js       |  6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 3ed702192..fb0e70397 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -37,7 +37,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
   // fonts of qr-header and close button
 
 AccountDetailsModal.prototype.render = function () {
-  const { selectedIdentity, selectedAddress, network } = this.props
+  const { selectedIdentity, network } = this.props
 
   return h('div', {}, [
     h('div.account-details-modal-wrapper', {
@@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () {
         Qr: {
           message: this.props.selectedIdentity.name,
           data: this.props.selectedIdentity.address,
-        }
+        },
       }, []),
 
       // divider
       h('div.account-details-modal-divider', {
-        style: {}
+        style: {},
       }, []),
 
       h('button.btn-clear', {
@@ -85,6 +85,6 @@ AccountDetailsModal.prototype.render = function () {
         'Export private key',
       ]),
 
-    ])
+    ]),
   ])
 }
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 6e0831768..79bbc798b 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -18,7 +18,7 @@ function mapDispatchToProps (dispatch) {
     },
     hideModal: () => {
       dispatch(actions.hideModal())
-    }
+    },
   }
 }
 
@@ -71,7 +71,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
-    ])
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')),
+    ]),
   ])
 }
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index ae5ca23d4..5c25ac245 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -71,6 +71,6 @@ EditAccountNameModal.prototype.render = function () {
         'SAVE',
       ]),
 
-    ])
+    ]),
   ])
 }
diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js
index e2e367af0..1db1d33d4 100644
--- a/ui/app/components/modals/index.js
+++ b/ui/app/components/modals/index.js
@@ -2,4 +2,4 @@ const Modal = require('./modal')
 
 module.exports = {
   Modal,
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index fdff4c99e..d266fe790 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -80,7 +80,7 @@ const MODALS = {
     contents: [],
     mobileModalStyle: {},
     laptopModalStyle: {},
-  }
+  },
 }
 
 const BACKDROPSTYLE = {
@@ -120,7 +120,7 @@ Modal.prototype.render = function () {
     {
       className: 'modal',
       keyboard: false,
-      onHide: () => {this.onHide()},
+      onHide: () => { this.onHide() },
       ref: (ref) => {
         this.modalRef = ref
       },
@@ -131,7 +131,7 @@ Modal.prototype.render = function () {
   )
 }
 
-Modal.prototype.componentWillReceiveProps = function(nextProps) {
+Modal.prototype.componentWillReceiveProps = function (nextProps) {
   if (nextProps.active) {
     this.show()
   } else if (this.props.active) {
@@ -139,17 +139,17 @@ Modal.prototype.componentWillReceiveProps = function(nextProps) {
   }
 }
 
-Modal.prototype.onHide = function() {
+Modal.prototype.onHide = function () {
   if (this.props.onHideCallback) {
     this.props.onHideCallback()
   }
   this.props.hideModal()
 }
 
-Modal.prototype.hide = function() {
+Modal.prototype.hide = function () {
   this.modalRef.hide()
 }
 
-Modal.prototype.show = function() {
+Modal.prototype.show = function () {
   this.modalRef.show()
 }
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index c44b79a2e..3caa515cd 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -38,14 +38,14 @@ NewAccountModal.prototype.render = function () {
       ]),
 
       h('div.modal-close-x', {}),
-      
+
       h('div.new-account-modal-content', {}, [
         'Account Name',
       ]),
 
       h('div.new-account-input-wrapper', {}, [
         h('input.new-account-input', {
-          placeholder: 'E.g. My new account'
+          placeholder: 'E.g. My new account',
         }, []),
       ]),
 
@@ -62,6 +62,6 @@ NewAccountModal.prototype.render = function () {
           'SAVE',
         ]),
       ]),
-    ])
+    ]),
   ])
 }
-- 
cgit v1.2.3


From 61b965fe14ccc44332d4e3a90ce531142da65a71 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 07:13:32 -0230
Subject: Touch up style of account-details-modal.

---
 ui/app/components/modals/modal.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index d266fe790..85bed66e1 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -54,11 +54,13 @@ const MODALS = {
       width: '95%',
       top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      borderRadius: '4px',
     },
     laptopModalStyle: {
       width: '360px',
       top: 'calc(33% + 45px)',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      borderRadius: '4px',
     },
   },
 
-- 
cgit v1.2.3


From 1d5a725ffbcd0fe3123d3bbb5889abce99cbaabe Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 10:09:58 -0230
Subject: Close button in account-details-modal working.

---
 ui/app/components/modals/account-details-modal.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index fb0e70397..838000fed 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -57,7 +57,9 @@ AccountDetailsModal.prototype.render = function () {
 
       ]),
 
-      h('div.account-details-modal-close', {}),
+      h('div.account-details-modal-close', {
+        onClick: this.props.hideModal,
+      }),
 
       h(QrView, {
         Qr: {
-- 
cgit v1.2.3


From ab4005cab85755d9f260b9e304ff2eeda81a10a5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 14:38:05 -0230
Subject: Tweak styles in new-account-modal.

---
 ui/app/components/modals/new-account-modal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 3caa515cd..80c70c47f 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -49,11 +49,11 @@ NewAccountModal.prototype.render = function () {
         }, []),
       ]),
 
-      h('div.new-account-modal-content', {}, [
+      h('div.new-account-modal-content.after-input', {}, [
         'or',
       ]),
 
-      h('div.new-account-modal-content.import', {}, [
+      h('div.new-account-modal-content.after-input', {}, [
         'Import an account',
       ]),
 
-- 
cgit v1.2.3


From 5a8433b6cef88996b65108c7faecbaf819fd3b64 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 14:40:27 -0230
Subject: New account modal top right close button working.

---
 ui/app/components/modals/new-account-modal.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 80c70c47f..8d67762ac 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -37,7 +37,9 @@ NewAccountModal.prototype.render = function () {
         'New Account',
       ]),
 
-      h('div.modal-close-x', {}),
+      h('div.modal-close-x', {
+        onClick: this.props.hideModal,
+      }),
 
       h('div.new-account-modal-content', {}, [
         'Account Name',
-- 
cgit v1.2.3


From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 11 Sep 2017 00:45:06 -0700
Subject: Style send token screen

---
 ui/app/components/modals/account-details-modal.js | 34 ++++++++---------------
 ui/app/components/modals/modal.js                 |  5 ++++
 2 files changed, 17 insertions(+), 22 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 838000fed..ec7e4b500 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -39,21 +39,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 AccountDetailsModal.prototype.render = function () {
   const { selectedIdentity, network } = this.props
 
-  return h('div', {}, [
-    h('div.account-details-modal-wrapper', {
-    }, [
+  return h('div', { style: { borderRadius: '4px' }}, [
+    h('div.account-details-modal-wrapper', [
 
-      h('div', {}, [
+      h('div', [
 
         // Needs a border; requires changes to svg
-        h(
-          Identicon,
-          {
-            address: selectedIdentity.address,
-            diameter: 64,
-            style: {},
-          },
-        ),
+        h(Identicon, {
+          address: selectedIdentity.address,
+          diameter: 64,
+          style: {},
+        }),
 
       ]),
 
@@ -66,26 +62,20 @@ AccountDetailsModal.prototype.render = function () {
           message: this.props.selectedIdentity.name,
           data: this.props.selectedIdentity.address,
         },
-      }, []),
+      }),
 
       // divider
-      h('div.account-details-modal-divider', {
-        style: {},
-      }, []),
+      h('div.account-details-modal-divider'),
 
       h('button.btn-clear', {
         onClick: () => {
           const url = genAccountLink(selectedIdentity.address, network)
           global.platform.openWindow({ url })
         },
-      }, [
-        'View account on Etherscan',
-      ]),
+      }, [ 'View account on Etherscan' ]),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear', {}, [
-        'Export private key',
-      ]),
+      h('button.btn-clear', [ 'Export private key' ]),
 
     ]),
   ])
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 85bed66e1..477dcbe86 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -62,6 +62,9 @@ const MODALS = {
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
       borderRadius: '4px',
     },
+    contentStyle: {
+      borderRadius: '4px',
+    }
   },
 
   NEW_ACCOUNT: {
@@ -117,6 +120,7 @@ Modal.prototype.render = function () {
 
   const children = modal.contents
   const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
+  const contentStyle = modal.contentStyle || {};
 
   return h(FadeModal,
     {
@@ -127,6 +131,7 @@ Modal.prototype.render = function () {
         this.modalRef = ref
       },
       modalStyle,
+      contentStyle,
       backdropStyle: BACKDROPSTYLE,
     },
     children,
-- 
cgit v1.2.3


From b0f1fba2e5fbde573b46a284285985e63f1a3618 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 15 Sep 2017 12:39:34 -0230
Subject: Ensures that new accounts are only created from the modal, and not
 when clicking 'Create New Account'

---
 ui/app/components/modals/new-account-modal.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 8d67762ac..910f3c0ca 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -19,6 +19,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    createAccount: () => {
+      dispatch(actions.addNewAccount())
+      dispatch(actions.hideModal())
+    },
   }
 }
 
@@ -60,7 +64,9 @@ NewAccountModal.prototype.render = function () {
       ]),
 
       h('div.new-account-modal-content.button', {}, [
-        h('button.btn-clear', {}, [
+        h('button.btn-clear', {
+          onClick: this.props.createAccount
+        }, [
           'SAVE',
         ]),
       ]),
-- 
cgit v1.2.3


From e7f1fc44361829f05a713218f8b1837a8574c2f2 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 19 Sep 2017 18:49:35 -0700
Subject: Buy Modal Styling

---
 ui/app/components/modals/modal.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 477dcbe86..04a2f5f40 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -21,12 +21,13 @@ const MODALS = {
     mobileModalStyle: {
       width: '95%',
       top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
     },
     laptopModalStyle: {
       width: '66%',
+      maxWidth: '550px',
       top: 'calc(30% + 10px)',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
     },
   },
 
@@ -64,7 +65,7 @@ const MODALS = {
     },
     contentStyle: {
       borderRadius: '4px',
-    }
+    },
   },
 
   NEW_ACCOUNT: {
-- 
cgit v1.2.3


From 24fd16b1bee31352ef7f364804eb5f06c08c3bf6 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 19 Sep 2017 22:26:10 -0230
Subject: Abstract account modal.

---
 ui/app/components/modals/account-details-modal.js  | 45 ++++--------------
 .../components/modals/account-modal-container.js   | 55 ++++++++++++++++++++++
 2 files changed, 65 insertions(+), 35 deletions(-)
 create mode 100644 ui/app/components/modals/account-modal-container.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index ec7e4b500..6c2eba7bd 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -3,25 +3,21 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
-const Identicon = require('../identicon')
 const QrView = require('../qr-code')
 
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
-    address: state.metamask.selectedAddress,
-    selectedAddress: getSelectedAddress(state),
     selectedIdentity: getSelectedIdentity(state),
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
+    // Is this supposed to be used somewhere?
     showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
   }
 }
@@ -34,49 +30,28 @@ function AccountDetailsModal () {
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
 // Not yet pixel perfect todos:
-  // fonts of qr-header and close button
+  // fonts of qr-header
 
 AccountDetailsModal.prototype.render = function () {
   const { selectedIdentity, network } = this.props
+  const { name, address } = selectedIdentity
 
-  return h('div', { style: { borderRadius: '4px' }}, [
-    h('div.account-details-modal-wrapper', [
-
-      h('div', [
-
-        // Needs a border; requires changes to svg
-        h(Identicon, {
-          address: selectedIdentity.address,
-          diameter: 64,
-          style: {},
-        }),
-
-      ]),
-
-      h('div.account-details-modal-close', {
-        onClick: this.props.hideModal,
-      }),
-
+  return h(AccountModalContainer, {}, [
       h(QrView, {
         Qr: {
-          message: this.props.selectedIdentity.name,
-          data: this.props.selectedIdentity.address,
+          message: name,
+          data: address,
         },
       }),
 
-      // divider
-      h('div.account-details-modal-divider'),
+      h('div.account-modal-divider'),
 
       h('button.btn-clear', {
-        onClick: () => {
-          const url = genAccountLink(selectedIdentity.address, network)
-          global.platform.openWindow({ url })
-        },
+        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, [ 'View account on Etherscan' ]),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear', [ 'Export private key' ]),
-
-    ]),
+      
   ])
 }
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
new file mode 100644
index 000000000..69650ca15
--- /dev/null
+++ b/ui/app/components/modals/account-modal-container.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedIdentity } = require('../../selectors')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(AccountModalContainer, Component)
+function AccountModalContainer () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
+
+AccountModalContainer.prototype.render = function () {
+  const { selectedIdentity, children } = this.props
+  console.log(`children`, children);
+  return h('div', { style: { borderRadius: '4px' }}, [
+    h('div.account-modal-container', [
+
+      h('div', [
+
+        // Needs a border; requires changes to svg
+        h(Identicon, {
+          address: selectedIdentity.address,
+          diameter: 64,
+          style: {},
+        }),
+
+      ]),
+
+      h('div.account-modal-close', {
+        onClick: this.props.hideModal,
+      }),
+
+      ...children,
+
+    ]),
+  ])
+}
-- 
cgit v1.2.3


From fe37dd7ecd142bbb0b51d62abfdc0a25240aef42 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 22 Sep 2017 01:56:10 -0230
Subject: Open account details modal on buy -> direct deposit.

---
 ui/app/components/modals/buy-options-modal.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 79bbc798b..a8033d288 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -19,6 +19,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
   }
 }
 
@@ -59,7 +62,9 @@ BuyOptions.prototype.render = function () {
           h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.buy-modal-content-option', {}, [
+        h('div.buy-modal-content-option', {
+          onClick: () => this.goToAccountDetailsModal()
+        }, [
           h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
           h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
@@ -75,3 +80,8 @@ BuyOptions.prototype.render = function () {
     ]),
   ])
 }
+
+BuyOptions.prototype.goToAccountDetailsModal = function () {
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
-- 
cgit v1.2.3


From a1d72a59fe5b03363820d6e1ac2c383ec15ccbcb Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 22 Sep 2017 04:29:27 -0230
Subject: New account modal now allows for addition of account name.

---
 ui/app/components/modals/new-account-modal.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 910f3c0ca..1adc9e7c7 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -8,6 +8,7 @@ function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     address: state.metamask.selectedAddress,
+    identities: state.metamask.identities,
   }
 }
 
@@ -19,9 +20,12 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
-    createAccount: () => {
-      dispatch(actions.addNewAccount())
-      dispatch(actions.hideModal())
+    createAccount: (identities, newAccountName) => {
+      dispatch(actions.addNewAccount(identities))
+        .then((newAccountAddress) => {
+          dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          dispatch(actions.hideModal())
+        })
     },
   }
 }
@@ -29,11 +33,18 @@ function mapDispatchToProps (dispatch) {
 inherits(NewAccountModal, Component)
 function NewAccountModal () {
   Component.call(this)
+
+  this.state = {
+    newAccountName: ''
+  }
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
 
 NewAccountModal.prototype.render = function () {
+  const { identities } = this.props
+  const { newAccountName } = this.state
+
   return h('div', {}, [
     h('div.new-account-modal-wrapper', {
     }, [
@@ -52,6 +63,7 @@ NewAccountModal.prototype.render = function () {
       h('div.new-account-input-wrapper', {}, [
         h('input.new-account-input', {
           placeholder: 'E.g. My new account',
+          onChange: (event) => this.setState({ newAccountName: event.target.value })
         }, []),
       ]),
 
@@ -65,7 +77,7 @@ NewAccountModal.prototype.render = function () {
 
       h('div.new-account-modal-content.button', {}, [
         h('button.btn-clear', {
-          onClick: this.props.createAccount
+          onClick: () => this.props.createAccount(identities, newAccountName)
         }, [
           'SAVE',
         ]),
-- 
cgit v1.2.3


From 13f22ff6b087f3865f84a0672a9013ada88be61a Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 22 Sep 2017 18:30:00 -0230
Subject: get identities from getState() instead of passing from caller, only
 set new account label if label set.

---
 ui/app/components/modals/new-account-modal.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 1adc9e7c7..25beb6745 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -8,7 +8,6 @@ function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     address: state.metamask.selectedAddress,
-    identities: state.metamask.identities,
   }
 }
 
@@ -20,10 +19,12 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
-    createAccount: (identities, newAccountName) => {
-      dispatch(actions.addNewAccount(identities))
+    createAccount: (newAccountName) => {
+      dispatch(actions.addNewAccount())
         .then((newAccountAddress) => {
-          dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          if (newAccountName) {
+            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          }
           dispatch(actions.hideModal())
         })
     },
@@ -42,7 +43,6 @@ function NewAccountModal () {
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
 
 NewAccountModal.prototype.render = function () {
-  const { identities } = this.props
   const { newAccountName } = this.state
 
   return h('div', {}, [
@@ -77,7 +77,7 @@ NewAccountModal.prototype.render = function () {
 
       h('div.new-account-modal-content.button', {}, [
         h('button.btn-clear', {
-          onClick: () => this.props.createAccount(identities, newAccountName)
+          onClick: () => this.props.createAccount(newAccountName)
         }, [
           'SAVE',
         ]),
-- 
cgit v1.2.3


From 0eeba3771c2396c12de3f254dbfaae957344411d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Sep 2017 05:35:27 -0230
Subject: Exports private key modal opens from dropdown.

---
 .../components/modals/export-private-key-modal.js  | 41 +++++++++++++++++++++
 ui/app/components/modals/modal.js                  | 42 ++++++++++++++--------
 2 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 ui/app/components/modals/export-private-key-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
new file mode 100644
index 000000000..bbcd25e0d
--- /dev/null
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -0,0 +1,41 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../selectors')
+const ReadOnlyInput = require('../readonly-input')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+inherits(ExportPrivateKeyModal, Component)
+function ExportPrivateKeyModal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps)(ExportPrivateKeyModal)
+
+ExportPrivateKeyModal.prototype.render = function () {
+  const { selectedIdentity, network } = this.props
+  const { name, address } = selectedIdentity
+
+  return h(AccountModalContainer, {}, [
+
+      h('span.account-name', name),
+
+      h(ReadOnlyInput, {
+        wrapperClass: 'ellip-address-wrapper',
+        inputClass: 'ellip-address',
+        value: address,
+      }),
+
+      h('div.account-modal-divider'),
+      
+  ])
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 04a2f5f40..138efc3ea 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -11,8 +11,27 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n
 const BuyOptions = require('./buy-options-modal')
 const AccountDetailsModal = require('./account-details-modal')
 const EditAccountNameModal = require('./edit-account-name-modal')
+const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')
 
+const accountModalStyle = {
+  mobileModalStyle: {
+    width: '95%',
+    top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+  },
+  laptopModalStyle: {
+    width: '360px',
+    top: 'calc(33% + 45px)',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+  },
+  contentStyle: {
+    borderRadius: '4px',
+  },
+}
+
 const MODALS = {
   BUY: {
     contents: [
@@ -51,21 +70,14 @@ const MODALS = {
     contents: [
       h(AccountDetailsModal, {}, []),
     ],
-    mobileModalStyle: {
-      width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-      borderRadius: '4px',
-    },
-    laptopModalStyle: {
-      width: '360px',
-      top: 'calc(33% + 45px)',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-      borderRadius: '4px',
-    },
-    contentStyle: {
-      borderRadius: '4px',
-    },
+    ...accountModalStyle,
+  },
+
+  EXPORT_PRIVATE_KEY: {
+    contents: [
+      h(ExportPrivateKeyModal, {}, []),
+    ],
+    ...accountModalStyle,
   },
 
   NEW_ACCOUNT: {
-- 
cgit v1.2.3


From 2c474b0d6e487652cf16e224e19deb0bf68abedb Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Sep 2017 05:36:31 -0230
Subject: Export private key modal body ui.

---
 .../components/modals/export-private-key-modal.js  | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index bbcd25e0d..28b988f5a 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -37,5 +37,27 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
       
+      h('span.modal-body-title', 'Download Private Keys'),
+
+      h('div.private-key-password', {}, [
+        h('span.private-key-password-label', 'Type Your Password'),
+
+        h('input.private-key-password-input', {
+          type: 'password',
+          placeholder: 'Type password',
+        }),
+      ]),
+
+      h('div.private-key-password-warning', `Warning: Never disclose this key.
+        Anyone with your private keys can take steal any assets held in your
+        account.`
+      ),
+
+      h('div.export-private-key-buttons', {}, [
+        h('button.btn-clear.btn-cancel', {}, 'Cancel'),
+
+        h('button.btn-clear', 'Download'),
+      ]),
+      
   ])
 }
-- 
cgit v1.2.3


From 7102772c3a4a73d594ccc20e760defa2999f2d3f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Sep 2017 10:02:18 -0230
Subject: Connect export key modal to state and enable actions.

---
 .../components/modals/export-private-key-modal.js  | 85 ++++++++++++++++++----
 1 file changed, 72 insertions(+), 13 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 28b988f5a..b1d551781 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
+const ethUtil = require('ethereumjs-util')
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
@@ -9,20 +10,83 @@ const ReadOnlyInput = require('../readonly-input')
 
 function mapStateToProps (state) {
   return {
+    warning: state.appState.warning,
+    privateKey: state.appState.accountDetail.privateKey,
     network: state.metamask.network,
     selectedIdentity: getSelectedIdentity(state),
   }
 }
 
+function mapDispatchToProps (dispatch) {
+  return {
+    exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
+    hideModal: () => dispatch(actions.hideModal()),
+  }
+}
+
 inherits(ExportPrivateKeyModal, Component)
 function ExportPrivateKeyModal () {
   Component.call(this)
+
+  this.state = {
+    password: ''
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
+
+ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
+  return h('span.private-key-password-label', privateKey
+    ? 'This is your private key (click to copy)'
+    : 'Type Your Password'
+  )
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
+  const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey)
+
+  return privateKey
+    ? h(ReadOnlyInput, {
+        wrapperClass: 'private-key-password-display-wrapper',
+        inputClass: 'private-key-password-display-textarea',
+        textarea: true,
+        value: plainKey,
+      })
+    : h('input.private-key-password-input', {
+      type: 'password',
+      placeholder: 'Type password',
+      onChange: event => this.setState({ password: event.target.value })
+    })
+}
+
+ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
+  return h('button', {
+    className,
+    onClick,
+  }, label)
 }
 
-module.exports = connect(mapStateToProps)(ExportPrivateKeyModal)
+ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address) {
+  const { hideModal, exportAccount } = this.props
+
+  return h('div.export-private-key-buttons', {}, [
+    !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
+
+    (privateKey
+      ? this.renderButton('btn-clear', () => hideModal(), 'Done')
+      : this.renderButton('btn-clear', () => exportAccount(this.state.password, address), 'Download')
+    ),
+
+  ])
+}
 
 ExportPrivateKeyModal.prototype.render = function () {
-  const { selectedIdentity, network } = this.props
+  const {
+    selectedIdentity,
+    network,
+    privateKey,
+    warning,
+  } = this.props
   const { name, address } = selectedIdentity
 
   return h(AccountModalContainer, {}, [
@@ -31,7 +95,7 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h(ReadOnlyInput, {
         wrapperClass: 'ellip-address-wrapper',
-        inputClass: 'ellip-address',
+        inputClass: 'qr-ellip-address ellip-address',
         value: address,
       }),
 
@@ -40,12 +104,11 @@ ExportPrivateKeyModal.prototype.render = function () {
       h('span.modal-body-title', 'Download Private Keys'),
 
       h('div.private-key-password', {}, [
-        h('span.private-key-password-label', 'Type Your Password'),
+        this.renderPasswordLabel(privateKey),
+
+        this.renderPasswordInput(privateKey),
 
-        h('input.private-key-password-input', {
-          type: 'password',
-          placeholder: 'Type password',
-        }),
+        !warning ? null : h('span.private-key-password-error', warning),
       ]),
 
       h('div.private-key-password-warning', `Warning: Never disclose this key.
@@ -53,11 +116,7 @@ ExportPrivateKeyModal.prototype.render = function () {
         account.`
       ),
 
-      h('div.export-private-key-buttons', {}, [
-        h('button.btn-clear.btn-cancel', {}, 'Cancel'),
-
-        h('button.btn-clear', 'Download'),
-      ]),
+      this.renderButtons(privateKey, this.state.password, address),
       
   ])
 }
-- 
cgit v1.2.3


From 01816e1b2216e0cf849ec3d67f01b1e571d69fa4 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 22 Sep 2017 17:27:18 -0230
Subject: Adds a back button to export private key modal; connects account
 details to same modal.

---
 ui/app/components/modals/account-details-modal.js    | 17 +++++++++++++++--
 ui/app/components/modals/account-modal-container.js  | 19 +++++++++++++++++--
 ui/app/components/modals/export-private-key-modal.js | 10 +++++++++-
 3 files changed, 41 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 6c2eba7bd..37a62e1c0 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -19,6 +19,10 @@ function mapDispatchToProps (dispatch) {
   return {
     // Is this supposed to be used somewhere?
     showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    showExportPrivateKeyModal: () => {
+      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+    },
+    hideModal: () => dispatch(actions.hideModal()),
   }
 }
 
@@ -33,7 +37,12 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
   // fonts of qr-header
 
 AccountDetailsModal.prototype.render = function () {
-  const { selectedIdentity, network } = this.props
+  const {
+    selectedIdentity,
+    network,
+    showExportPrivateKeyModal,
+    hideModal,
+  } = this.props
   const { name, address } = selectedIdentity
 
   return h(AccountModalContainer, {}, [
@@ -51,7 +60,11 @@ AccountDetailsModal.prototype.render = function () {
       }, [ 'View account on Etherscan' ]),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear', [ 'Export private key' ]),
+      h('button.btn-clear', {
+        onClick: () => {
+          showExportPrivateKeyModal()
+        },
+      }, [ 'Export private key' ]),
       
   ])
 }
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index 69650ca15..3cad72067 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -28,8 +28,13 @@ function AccountModalContainer () {
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
 
 AccountModalContainer.prototype.render = function () {
-  const { selectedIdentity, children } = this.props
-  console.log(`children`, children);
+  const {
+    selectedIdentity,
+    children,
+    showBackButton = false,
+    backButtonAction,
+  } = this.props
+
   return h('div', { style: { borderRadius: '4px' }}, [
     h('div.account-modal-container', [
 
@@ -44,6 +49,16 @@ AccountModalContainer.prototype.render = function () {
 
       ]),
 
+      showBackButton && h('div.account-modal-back', {
+        onClick: backButtonAction,
+      }, [
+
+        h('i.fa.fa-angle-left.fa-lg'),
+
+        h('span.account-modal-back__text', ' Back'),
+
+      ]),
+
       h('div.account-modal-close', {
         onClick: this.props.hideModal,
       }),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index b1d551781..4bb34f8c6 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -14,12 +14,14 @@ function mapStateToProps (state) {
     privateKey: state.appState.accountDetail.privateKey,
     network: state.metamask.network,
     selectedIdentity: getSelectedIdentity(state),
+    previousModalState: state.appState.modal.previousModalState.name,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
     exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
+    showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
     hideModal: () => dispatch(actions.hideModal()),
   }
 }
@@ -86,10 +88,16 @@ ExportPrivateKeyModal.prototype.render = function () {
     network,
     privateKey,
     warning,
+    showAccountDetailModal,
+    hideModal,
+    previousModalState,
   } = this.props
   const { name, address } = selectedIdentity
 
-  return h(AccountModalContainer, {}, [
+  return h(AccountModalContainer, {
+    showBackButton: previousModalState === 'ACCOUNT_DETAILS',
+    backButtonAction: () => showAccountDetailModal(),
+  }, [
 
       h('span.account-name', name),
 
-- 
cgit v1.2.3


From 10345a12c2f812fabbcd9950da14beaa03cb2502 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 26 Sep 2017 20:33:33 -0230
Subject: Keep privateKey out of state and clear it after closing export
 private key modal.

---
 .../components/modals/export-private-key-modal.js   | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 4bb34f8c6..ddc7f1352 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -31,12 +31,20 @@ function ExportPrivateKeyModal () {
   Component.call(this)
 
   this.state = {
-    password: ''
+    password: '',
+    privateKey: null,
   }
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
 
+ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
+  const { exportAccount } = this.props
+
+  exportAccount(password, address)
+    .then(privateKey => this.setState({ privateKey }))
+}
+
 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
   return h('span.private-key-password-label', privateKey
     ? 'This is your private key (click to copy)'
@@ -68,15 +76,13 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
   }, label)
 }
 
-ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address) {
-  const { hideModal, exportAccount } = this.props
-
+ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
     !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
 
     (privateKey
       ? this.renderButton('btn-clear', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear', () => exportAccount(this.state.password, address), 'Download')
+      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Download')
     ),
 
   ])
@@ -86,7 +92,6 @@ ExportPrivateKeyModal.prototype.render = function () {
   const {
     selectedIdentity,
     network,
-    privateKey,
     warning,
     showAccountDetailModal,
     hideModal,
@@ -94,6 +99,8 @@ ExportPrivateKeyModal.prototype.render = function () {
   } = this.props
   const { name, address } = selectedIdentity
 
+  const { privateKey } = this.state
+
   return h(AccountModalContainer, {
     showBackButton: previousModalState === 'ACCOUNT_DETAILS',
     backButtonAction: () => showAccountDetailModal(),
@@ -124,7 +131,7 @@ ExportPrivateKeyModal.prototype.render = function () {
         account.`
       ),
 
-      this.renderButtons(privateKey, this.state.password, address),
+      this.renderButtons(privateKey, this.state.password, address, hideModal),
       
   ])
 }
-- 
cgit v1.2.3


From 4f106854ba6bbfd22b49598f9ef019aa620f5b4f Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 28 Sep 2017 16:34:42 -0700
Subject: Hide ShapeShift and Fix Modal Stylings

---
 ui/app/components/modals/buy-options-modal.js | 10 ++---
 ui/app/components/modals/modal.js             | 55 +++++++++++++++++++++++----
 2 files changed, 52 insertions(+), 13 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index a8033d288..f1a5aa9fd 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -57,13 +57,13 @@ BuyOptions.prototype.render = function () {
           h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        ]),
+        // h('div.buy-modal-content-option', {}, [
+        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+        //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        // ]),
 
         h('div.buy-modal-content-option', {
-          onClick: () => this.goToAccountDetailsModal()
+          onClick: () => this.goToAccountDetailsModal(),
         }, [
           h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
           h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 138efc3ea..2bd56fb0a 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -17,15 +17,25 @@ const NewAccountModal = require('./new-account-modal')
 const accountModalStyle = {
   mobileModalStyle: {
     width: '95%',
-    top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
     boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
   },
   laptopModalStyle: {
     width: '360px',
-    top: 'calc(33% + 45px)',
+    // top: 'calc(33% + 45px)',
     boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
   },
   contentStyle: {
     borderRadius: '4px',
@@ -39,14 +49,23 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
       boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '10%',
     },
     laptopModalStyle: {
       width: '66%',
       maxWidth: '550px',
-      top: 'calc(30% + 10px)',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
       boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      transform: 'none',
     },
   },
 
@@ -56,13 +75,23 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: '10%',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
     laptopModalStyle: {
       width: '375px',
-      top: 'calc(30% + 10px)',
+      // top: 'calc(30% + 10px)',
+      top: '10%',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
   },
 
@@ -86,11 +115,21 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
     laptopModalStyle: {
       width: '449px',
-      top: 'calc(33% + 45px)',
+      // top: 'calc(33% + 45px)',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
   },
 
-- 
cgit v1.2.3


From ff64fe98dde7746775396cbf94d63a1a0e91d069 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 29 Sep 2017 13:10:57 -0230
Subject: Shapeshift deposit tx modal.

---
 .../components/modals/account-modal-container.js   |  6 +++-
 ui/app/components/modals/modal.js                  |  8 +++++
 .../modals/shapeshift-deposit-tx-modal.js          | 40 ++++++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/components/modals/shapeshift-deposit-tx-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index 3cad72067..c548fb7b3 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -30,10 +30,14 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContai
 AccountModalContainer.prototype.render = function () {
   const {
     selectedIdentity,
-    children,
     showBackButton = false,
     backButtonAction,
   } = this.props
+  let { children } = this.props
+
+  if (children.constructor !== Array) {
+    children = [children]
+  }
 
   return h('div', { style: { borderRadius: '4px' }}, [
     h('div.account-modal-container', [
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 2bd56fb0a..765e46312 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -13,6 +13,7 @@ const AccountDetailsModal = require('./account-details-modal')
 const EditAccountNameModal = require('./edit-account-name-modal')
 const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')
+const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -109,6 +110,13 @@ const MODALS = {
     ...accountModalStyle,
   },
 
+  SHAPESHIFT_DEPOSIT_TX: {
+    contents: [
+      h(ShapeshiftDepositTxModal),
+    ],
+    ...accountModalStyle,
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
new file mode 100644
index 000000000..1fd1ade00
--- /dev/null
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@@ -0,0 +1,40 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const QrView = require('../qr-code')
+const AccountModalContainer = require('./account-modal-container')
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.modal.modalState.Qr,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(ShapeshiftDepositTxModal, Component)
+function ShapeshiftDepositTxModal () {
+  Component.call(this)
+
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal)
+
+ShapeshiftDepositTxModal.prototype.render = function () {
+  const { Qr } = this.props
+
+  return h(AccountModalContainer, {
+  }, [
+    h('div', {}, [
+      h(QrView, {key: 'qr', Qr}),
+    ])
+  ])
+}
-- 
cgit v1.2.3


From d206f183f5a07787535acd196c506145f00a199e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 29 Sep 2017 16:33:29 -0230
Subject: Hide token confirmation modal ui

---
 .../modals/hide-token-confirmation-modal.js        | 66 ++++++++++++++++++++++
 ui/app/components/modals/modal.js                  | 15 +++++
 2 files changed, 81 insertions(+)
 create mode 100644 ui/app/components/modals/hide-token-confirmation-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
new file mode 100644
index 000000000..d3f06b483
--- /dev/null
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -0,0 +1,66 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    token: state.appState.modal.modalState.token,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {}
+}
+
+inherits(HideTokenConfirmationModal, Component)
+function HideTokenConfirmationModal () {
+  Component.call(this)
+
+  this.state = {}
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
+
+HideTokenConfirmationModal.prototype.render = function () {
+  const { token, network } = this.props
+  const { symbol, address } = token
+
+  return h('div.hide-token-confirmation', {}, [
+    h('div.hide-token-confirmation__container', {
+    }, [
+      h('div.hide-token-confirmation__title', {}, [
+        'Hide Token?',
+      ]),
+
+      h(Identicon, {
+        className: 'hide-token-confirmation__identicon',
+        diameter: 45,
+        address,
+        network,
+      }),
+
+      h('div.hide-token-confirmation__symbol', {}, symbol),
+
+      h('div.hide-token-confirmation__copy', {}, [
+        'You can add this token back in the future by going go to “Add token” in your accounts options menu.',
+      ]),
+
+      h('div.hide-token-confirmation__buttons', {}, [
+        h('button.btn-clear', {
+          onClick: () => {},
+        }, [
+          'CANCEL',
+        ]),
+        h('button.btn-clear', {
+          onClick: () => {},
+        }, [
+          'HIDE',
+        ]),
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 765e46312..7247d840e 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -14,6 +14,7 @@ const EditAccountNameModal = require('./edit-account-name-modal')
 const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')
 const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
+const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -117,6 +118,20 @@ const MODALS = {
     ...accountModalStyle,
   },
 
+  HIDE_TOKEN_CONFIRMATION: {
+    contents: [
+      h(HideTokenConfirmationModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
-- 
cgit v1.2.3


From ac4868170f4c61d13291389d01bf1002fe240ed4 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 3 Oct 2017 14:55:52 -0230
Subject: Enables remove token and ensures add/remove update the list without
 need for refresh.

---
 .../components/modals/hide-token-confirmation-modal.js   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index d3f06b483..fa3ad0b1e 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -13,7 +13,15 @@ function mapStateToProps (state) {
 }
 
 function mapDispatchToProps (dispatch) {
-  return {}
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    hideToken: address => {
+      dispatch(actions.removeToken(address))
+        .then(() => {
+          dispatch(actions.hideModal())
+        })
+    },
+  }
 }
 
 inherits(HideTokenConfirmationModal, Component)
@@ -26,7 +34,7 @@ function HideTokenConfirmationModal () {
 module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
 
 HideTokenConfirmationModal.prototype.render = function () {
-  const { token, network } = this.props
+  const { token, network, hideToken, hideModal } = this.props
   const { symbol, address } = token
 
   return h('div.hide-token-confirmation', {}, [
@@ -51,12 +59,12 @@ HideTokenConfirmationModal.prototype.render = function () {
 
       h('div.hide-token-confirmation__buttons', {}, [
         h('button.btn-clear', {
-          onClick: () => {},
+          onClick: () => hideModal(),
         }, [
           'CANCEL',
         ]),
         h('button.btn-clear', {
-          onClick: () => {},
+          onClick: () => hideToken(address),
         }, [
           'HIDE',
         ]),
-- 
cgit v1.2.3


From 49aa6e73eadc5b343353c4312afc1e3b40dc18df Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 4 Oct 2017 21:01:12 -0230
Subject: Edit account modal shows and allows editing of name from props, not
 just placeholder.

---
 ui/app/components/modals/edit-account-name-modal.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 5c25ac245..e2361140d 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -24,10 +24,11 @@ function mapDispatchToProps (dispatch) {
 }
 
 inherits(EditAccountNameModal, Component)
-function EditAccountNameModal () {
+function EditAccountNameModal (props) {
   Component.call(this)
+
   this.state = {
-    inputText: '',
+    inputText: props.identity.name,
   }
 }
 
-- 
cgit v1.2.3


From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 13 Oct 2017 16:19:22 -0400
Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic
 from state (#2364)

* Adds memo field to send-v2.

* Vertical align transaction with flexbox.

* Customize Gas UI

* Remove internal state from InputNumber and fix use in gastooltip.

* Move customize-gas-modal to its own folder and minor cleanup

* Create send container, get account info from state, and make currency display more reusable

* Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices.
---
 ui/app/components/modals/modal.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 7247d840e..88deb2bb0 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -15,6 +15,7 @@ const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')
 const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
+const CustomizeGasModal = require('../customize-gas-modal')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -156,6 +157,31 @@ const MODALS = {
     },
   },
 
+  CUSTOMIZE_GAS: {
+    contents: [
+      h(CustomizeGasModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '355px',
+      height: '598px',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '5%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '720px',
+      height: '377px',
+      top: '80px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
   DEFAULT: {
     contents: [],
     mobileModalStyle: {},
-- 
cgit v1.2.3


From 222a203353dd977f497d44bf6581c16200b5de4f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 13 Oct 2017 16:23:10 -0400
Subject: Fix click to copy for private key not working (#2360)

---
 ui/app/components/modals/export-private-key-modal.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index ddc7f1352..302596eda 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -7,6 +7,7 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
+const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {
   return {
@@ -61,11 +62,12 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
         inputClass: 'private-key-password-display-textarea',
         textarea: true,
         value: plainKey,
+        onClick: () => copyToClipboard(plainKey),
       })
     : h('input.private-key-password-input', {
       type: 'password',
       placeholder: 'Type password',
-      onChange: event => this.setState({ password: event.target.value })
+      onChange: event => this.setState({ password: event.target.value }),
     })
 }
 
@@ -115,7 +117,7 @@ ExportPrivateKeyModal.prototype.render = function () {
       }),
 
       h('div.account-modal-divider'),
-      
+
       h('span.modal-body-title', 'Download Private Keys'),
 
       h('div.private-key-password', {}, [
@@ -132,6 +134,6 @@ ExportPrivateKeyModal.prototype.render = function () {
       ),
 
       this.renderButtons(privateKey, this.state.password, address, hideModal),
-      
+
   ])
 }
-- 
cgit v1.2.3


From bef1405a50af219dc02108d7f437654690aec73e Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sun, 22 Oct 2017 22:59:55 -0700
Subject: Change all "Buy" to "Deposit"

---
 ui/app/components/modals/buy-options-modal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index f1a5aa9fd..33615c483 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -42,7 +42,7 @@ BuyOptions.prototype.render = function () {
         h('div.buy-modal-content-title', {
           style: {},
         }, 'Transfers'),
-        h('div', {}, 'How would you like to buy Ether?'),
+        h('div', {}, 'How would you like to deposit Ether?'),
       ]),
 
       h('div.buy-modal-content-options.flex-column.flex-center', {}, [
@@ -54,7 +54,7 @@ BuyOptions.prototype.render = function () {
           },
         }, [
           h('div.buy-modal-content-option-title', {}, 'Coinbase'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit with Fiat'),
         ]),
 
         // h('div.buy-modal-content-option', {}, [
-- 
cgit v1.2.3


From 4336794355e819f798343e0de3cea6933c8121ee Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 24 Oct 2017 00:43:12 -0700
Subject: Fix styling in private key modal

---
 ui/app/components/modals/export-private-key-modal.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 302596eda..80d7779ef 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -66,7 +66,6 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
       })
     : h('input.private-key-password-input', {
       type: 'password',
-      placeholder: 'Type password',
       onChange: event => this.setState({ password: event.target.value }),
     })
 }
-- 
cgit v1.2.3


From 62314318948067cddd97fe1092f9949a2b80bf7f Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 24 Oct 2017 22:48:20 -0700
Subject: Change download to show in Export Private Key Modal

---
 ui/app/components/modals/export-private-key-modal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 80d7779ef..2d8470634 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -83,7 +83,7 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
 
     (privateKey
       ? this.renderButton('btn-clear', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Download')
+      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show')
     ),
 
   ])
@@ -117,7 +117,7 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('span.modal-body-title', 'Download Private Keys'),
+      h('span.modal-body-title', 'Show Private Keys'),
 
       h('div.private-key-password', {}, [
         this.renderPasswordLabel(privateKey),
-- 
cgit v1.2.3


From 0d522139ba7c5372e0ef4219a69a4b8e8f83706a Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Wed, 25 Oct 2017 01:08:14 -0700
Subject: Fix gas input styling on mobile view

---
 ui/app/components/modals/modal.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 88deb2bb0..e15dd6c1b 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -162,10 +162,9 @@ const MODALS = {
       h(CustomizeGasModal, {}, []),
     ],
     mobileModalStyle: {
-      width: '355px',
-      height: '598px',
-      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
-      top: '5%',
+      width: '100vw',
+      height: '100vh',
+      top: '0',
       transform: 'none',
       left: '0',
       right: '0',
-- 
cgit v1.2.3


From 39d4fe311f694a659d1d1454159417719d552b9d Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 25 Oct 2017 14:36:12 -0700
Subject: Fix Import an Account link not working in Create Account modal

---
 ui/app/components/modals/new-account-modal.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 25beb6745..b78de1d8d 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -28,6 +28,7 @@ function mapDispatchToProps (dispatch) {
           dispatch(actions.hideModal())
         })
     },
+    showImportPage: () => dispatch(actions.showImportPage()),
   }
 }
 
@@ -36,7 +37,7 @@ function NewAccountModal () {
   Component.call(this)
 
   this.state = {
-    newAccountName: ''
+    newAccountName: '',
   }
 }
 
@@ -63,7 +64,7 @@ NewAccountModal.prototype.render = function () {
       h('div.new-account-input-wrapper', {}, [
         h('input.new-account-input', {
           placeholder: 'E.g. My new account',
-          onChange: (event) => this.setState({ newAccountName: event.target.value })
+          onChange: event => this.setState({ newAccountName: event.target.value }),
         }, []),
       ]),
 
@@ -71,13 +72,16 @@ NewAccountModal.prototype.render = function () {
         'or',
       ]),
 
-      h('div.new-account-modal-content.after-input', {}, [
-        'Import an account',
-      ]),
+      h('div.new-account-modal-content.after-input.pointer', {
+        onClick: () => {
+          this.props.hideModal()
+          this.props.showImportPage()
+        },
+      }, 'Import an account'),
 
       h('div.new-account-modal-content.button', {}, [
         h('button.btn-clear', {
-          onClick: () => this.props.createAccount(newAccountName)
+          onClick: () => this.props.createAccount(newAccountName),
         }, [
           'SAVE',
         ]),
-- 
cgit v1.2.3


From 22d9e3a7e6dfd21b3ea52007030d71f53e29b851 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 25 Oct 2017 18:23:46 -0700
Subject: Allow editing account name in account details modal

---
 ui/app/components/modals/account-details-modal.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 37a62e1c0..e3c936702 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -7,6 +7,7 @@ const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
+const EditableLabel = require('../editable-label')
 
 function mapStateToProps (state) {
   return {
@@ -23,6 +24,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
     },
     hideModal: () => dispatch(actions.hideModal()),
+    saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
   }
 }
 
@@ -41,14 +43,19 @@ AccountDetailsModal.prototype.render = function () {
     selectedIdentity,
     network,
     showExportPrivateKeyModal,
-    hideModal,
+    saveAccountLabel,
   } = this.props
   const { name, address } = selectedIdentity
 
   return h(AccountModalContainer, {}, [
+      h(EditableLabel, {
+        className: 'account-modal__name',
+        defaultValue: name,
+        onSubmit: label => saveAccountLabel(address, label),
+      }),
+
       h(QrView, {
         Qr: {
-          message: name,
           data: address,
         },
       }),
@@ -57,14 +64,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('button.btn-clear', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, [ 'View account on Etherscan' ]),
+      }, 'View account on Etherscan'),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear', {
-        onClick: () => {
-          showExportPrivateKeyModal()
-        },
-      }, [ 'Export private key' ]),
-      
+        onClick: () => showExportPrivateKeyModal(),
+      }, 'Export private key'),
+
   ])
 }
-- 
cgit v1.2.3


From 5d8b53bcf491bfe6dd59f4986f02da70b91df5cd Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 26 Oct 2017 11:36:13 -0700
Subject: Provide default new account name

---
 ui/app/components/modals/new-account-modal.js | 141 ++++++++++++++------------
 1 file changed, 78 insertions(+), 63 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index b78de1d8d..fc1fd413d 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -1,17 +1,88 @@
-const Component = require('react').Component
+const { Component } = require('react')
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const { connect } = require('react-redux')
 const actions = require('../../actions')
 
-function mapStateToProps (state) {
+class NewAccountModal extends Component {
+  constructor (props) {
+    super(props)
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: `Account ${newAccountNumber}`,
+    }
+  }
+
+  render () {
+    const { newAccountName } = this.state
+
+    return h('div', [
+      h('div.new-account-modal-wrapper', {
+      }, [
+        h('div.new-account-modal-header', {}, [
+          'New Account',
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: this.props.hideModal,
+        }),
+
+        h('div.new-account-modal-content', {}, [
+          'Account Name',
+        ]),
+
+        h('div.new-account-input-wrapper', {}, [
+          h('input.new-account-input', {
+            value: this.state.newAccountName,
+            placeholder: 'E.g. My new account',
+            onChange: event => this.setState({ newAccountName: event.target.value }),
+          }, []),
+        ]),
+
+        h('div.new-account-modal-content.after-input', {}, [
+          'or',
+        ]),
+
+        h('div.new-account-modal-content.after-input.pointer', {
+          onClick: () => {
+            this.props.hideModal()
+            this.props.showImportPage()
+          },
+        }, 'Import an account'),
+
+        h('div.new-account-modal-content.button', {}, [
+          h('button.btn-clear', {
+            onClick: () => this.props.createAccount(newAccountName),
+          }, [
+            'SAVE',
+          ]),
+        ]),
+      ]),
+    ])
+  }
+}
+
+NewAccountModal.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
   return {
-    network: state.metamask.network,
-    address: state.metamask.selectedAddress,
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
   }
 }
 
-function mapDispatchToProps (dispatch) {
+const mapDispatchToProps = dispatch => {
   return {
     toCoinbase: (address) => {
       dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
@@ -32,60 +103,4 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-inherits(NewAccountModal, Component)
-function NewAccountModal () {
-  Component.call(this)
-
-  this.state = {
-    newAccountName: '',
-  }
-}
-
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
-
-NewAccountModal.prototype.render = function () {
-  const { newAccountName } = this.state
-
-  return h('div', {}, [
-    h('div.new-account-modal-wrapper', {
-    }, [
-      h('div.new-account-modal-header', {}, [
-        'New Account',
-      ]),
-
-      h('div.modal-close-x', {
-        onClick: this.props.hideModal,
-      }),
-
-      h('div.new-account-modal-content', {}, [
-        'Account Name',
-      ]),
-
-      h('div.new-account-input-wrapper', {}, [
-        h('input.new-account-input', {
-          placeholder: 'E.g. My new account',
-          onChange: event => this.setState({ newAccountName: event.target.value }),
-        }, []),
-      ]),
-
-      h('div.new-account-modal-content.after-input', {}, [
-        'or',
-      ]),
-
-      h('div.new-account-modal-content.after-input.pointer', {
-        onClick: () => {
-          this.props.hideModal()
-          this.props.showImportPage()
-        },
-      }, 'Import an account'),
-
-      h('div.new-account-modal-content.button', {}, [
-        h('button.btn-clear', {
-          onClick: () => this.props.createAccount(newAccountName),
-        }, [
-          'SAVE',
-        ]),
-      ]),
-    ]),
-  ])
-}
-- 
cgit v1.2.3


From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 00:00:33 -0230
Subject: Lint fixes for NewUI-flat.

---
 ui/app/components/modals/account-details-modal.js    | 2 +-
 ui/app/components/modals/export-private-key-modal.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index e3c936702..4bf671834 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -4,7 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
-const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
+const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 2d8470634..193755df5 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -92,7 +92,6 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
 ExportPrivateKeyModal.prototype.render = function () {
   const {
     selectedIdentity,
-    network,
     warning,
     showAccountDetailModal,
     hideModal,
-- 
cgit v1.2.3


From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 09:45:59 -0230
Subject: More lint fixes

---
 ui/app/components/modals/modal.js                       | 2 +-
 ui/app/components/modals/shapeshift-deposit-tx-modal.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index e15dd6c1b..842081f40 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -220,7 +220,7 @@ Modal.prototype.render = function () {
 
   const children = modal.contents
   const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
-  const contentStyle = modal.contentStyle || {};
+  const contentStyle = modal.contentStyle || {}
 
   return h(FadeModal,
     {
diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
index 1fd1ade00..24af5a0de 100644
--- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@@ -35,6 +35,6 @@ ShapeshiftDepositTxModal.prototype.render = function () {
   }, [
     h('div', {}, [
       h(QrView, {key: 'qr', Qr}),
-    ])
+    ]),
   ])
 }
-- 
cgit v1.2.3


From 424c1f23c91b06b687ddb3a3cbc79610584dc23f Mon Sep 17 00:00:00 2001
From: cjeria <chjeria@gmail.com>
Date: Wed, 8 Nov 2017 15:41:29 -0800
Subject: darker backdrop style for modal

---
 ui/app/components/modals/modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 842081f40..f2909f3c3 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -189,7 +189,7 @@ const MODALS = {
 }
 
 const BACKDROPSTYLE = {
-  backgroundColor: 'rgba(245, 245, 245, 0.85)',
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
 }
 
 function mapStateToProps (state) {
-- 
cgit v1.2.3


From 544166437a0a41ce25d3d47814409a7ce01b4e07 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 10 Nov 2017 00:02:53 -0330
Subject: Deposit button shows link to faucet on testnet networks.

---
 ui/app/components/modals/buy-options-modal.js | 38 ++++++++++++++++-----------
 1 file changed, 23 insertions(+), 15 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 33615c483..53e40ba92 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const networkNames = require('../../../../app/scripts/config.js').networkNames
 
 function mapStateToProps (state) {
   return {
@@ -22,6 +23,7 @@ function mapDispatchToProps (dispatch) {
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
+    toFaucet: network => dispatch(actions.buyEth({ network })),
   }
 }
 
@@ -32,7 +34,20 @@ function BuyOptions () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 
+BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) {
+  return h('div.buy-modal-content-option', {
+    onClick,
+  }, [
+    h('div.buy-modal-content-option-title', {}, title),
+    h('div.buy-modal-content-option-subtitle', {}, header),
+  ])
+}
+
 BuyOptions.prototype.render = function () {
+  const { network, toCoinbase, address, toFaucet } = this.props
+  const networkIsTest = ['3', '4', '42'].find(n => n === network)
+  const networkName = networkNames[network]
+
   return h('div', {}, [
     h('div.buy-modal-content.transfers-subview', {
     }, [
@@ -47,27 +62,20 @@ BuyOptions.prototype.render = function () {
 
       h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.buy-modal-content-option', {
-          onClick: () => {
-            const { toCoinbase, address } = this.props
-            toCoinbase(address)
-          },
-        }, [
-          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Deposit with Fiat'),
-        ]),
+        networkIsTest
+          ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)),
 
         // h('div.buy-modal-content-option', {}, [
         //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
         //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         // ]),
 
-        h('div.buy-modal-content-option', {
-          onClick: () => this.goToAccountDetailsModal(),
-        }, [
-          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
-        ]),
+        this.renderModalContentOption(
+          'Direct Deposit',
+          'Deposit from another account',
+          () => this.goToAccountDetailsModal()
+        ),
 
       ]),
 
-- 
cgit v1.2.3


From 7eb083bd9f1a8ce0e9c3e83e8b6bfb4d5a7b59cc Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 10 Nov 2017 21:06:00 -0330
Subject: Improve variable name.

---
 ui/app/components/modals/buy-options-modal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 53e40ba92..d735983f9 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -45,7 +45,7 @@ BuyOptions.prototype.renderModalContentOption = function (title, header, onClick
 
 BuyOptions.prototype.render = function () {
   const { network, toCoinbase, address, toFaucet } = this.props
-  const networkIsTest = ['3', '4', '42'].find(n => n === network)
+  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
   return h('div', {}, [
@@ -62,7 +62,7 @@ BuyOptions.prototype.render = function () {
 
       h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        networkIsTest
+        isTestNetwork
           ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network))
           : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)),
 
-- 
cgit v1.2.3


From 9db00fa507c04180f6425cc3b1e3187afa193ab8 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 4 Dec 2017 22:30:11 -0330
Subject: Show user notifications after switch between UIs

---
 ui/app/components/modals/modal.js              | 37 +++++++++++++++++++
 ui/app/components/modals/notification-modal.js | 51 ++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 ui/app/components/modals/notification-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index f2909f3c3..2ff6accaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal')
 const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
+const NotifcationModal = require('./notification-modal')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -133,6 +134,42 @@ const MODALS = {
     },
   },
 
+  BETA_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Welcome to the New UI (Beta)',
+        message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens,
+        and let us know if you have any issues.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  OLD_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Old UI',
+        message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
+        right dropdown menu.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
new file mode 100644
index 000000000..239144b0c
--- /dev/null
+++ b/ui/app/components/modals/notification-modal.js
@@ -0,0 +1,51 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NotificationModal extends Component {
+  render () {
+    const {
+      header,
+      message,
+    } = this.props
+
+    return h('div', [
+      h('div.notification-modal-wrapper', {
+      }, [
+
+        h('div.notification-modal-header', {}, [
+          header,
+        ]),
+
+        h('div.notification-modal-message-wrapper', {}, [
+          h('div.notification-modal-message', {}, [
+            message,
+          ]),
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: this.props.hideModal,
+        }),
+
+      ]),
+    ])
+  }
+}
+
+NotificationModal.propTypes = {
+  hideModal: PropTypes.func,
+  header: PropTypes.string,
+  message: PropTypes.string,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(NotificationModal)
-- 
cgit v1.2.3


From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 11 Jan 2018 16:30:07 -0800
Subject: Update styling for buttons, font weights

---
 ui/app/components/modals/account-details-modal.js    |  4 ++--
 ui/app/components/modals/export-private-key-modal.js | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 4bf671834..c1f7a3236 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-clear', {
+      h('button.btn-clear.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, 'View account on Etherscan'),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear', {
+      h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
       }, 'Export private key'),
 
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 193755df5..422f23f44 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
 
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
-    !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
+    !privateKey && this.renderButton(
+      'btn-cancel export-private-key__button export-private-key__button--cancel',
+      () => hideModal(),
+      'Cancel'
+    ),
 
     (privateKey
-      ? this.renderButton('btn-clear', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show')
+      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
+      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
     ),
 
   ])
-- 
cgit v1.2.3


From 5c1dcf3e9bdb317dd8b42aadb18657eb4bfa2e0f Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 12 Jan 2018 16:18:18 -0330
Subject: [NewUI-flat] New deposit ether modal UI. (#2642)

* New deposit ether modal.

* New deposit modal full screen on mobile, and other style fixes.

* Hide shapeshift option from deposit modal for now.

* Add shapeshift form to new deposit modal.

* Store recipient address for shapeshift tx in background.

* Use Simpledropdown to achieve desired styling in coin selector.

* Lint fix

* Fix typos and remove dead code.

* Remove storage of shapeshift receiving address from background.

* Fix typos
---
 ui/app/components/modals/buy-options-modal.js   |   2 +-
 ui/app/components/modals/deposit-ether-modal.js | 182 ++++++++++++++++++++++++
 ui/app/components/modals/modal.js               |  32 +++++
 3 files changed, 215 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/components/modals/deposit-ether-modal.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index d735983f9..74a7a847e 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -69,7 +69,7 @@ BuyOptions.prototype.render = function () {
         // h('div.buy-modal-content-option', {}, [
         //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
         //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        // ]),
+        // ]),,
 
         this.renderModalContentOption(
           'Direct Deposit',
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
new file mode 100644
index 000000000..3e6d3fde1
--- /dev/null
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -0,0 +1,182 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const networkNames = require('../../../../app/scripts/config.js').networkNames
+const ShapeshiftForm = require('../shapeshift-form')
+
+const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether'
+const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in
+your new wallet by direct deposit.`
+const COINBASE_ROW_TITLE = 'Buy on Coinbase'
+const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin,
+ethereum, and litecoin.`
+const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
+const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
+directly into your MetaMask wallet. No Account Needed.`
+const FAUCET_ROW_TITLE = 'Test Faucet'
+const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    toFaucet: network => dispatch(actions.buyEth({ network })),
+  }
+}
+
+inherits(DepositEtherModal, Component)
+function DepositEtherModal () {
+  Component.call(this)
+
+  this.state = {
+    buyingWithShapeshift: false,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
+
+DepositEtherModal.prototype.renderRow = function ({
+  logo,
+  title,
+  text,
+  buttonLabel,
+  onButtonClick,
+  hide,
+  className,
+  hideButton,
+  hideTitle,
+  onBackClick,
+}) {
+  if (hide) {
+    return null
+  }
+
+  return h('div', {
+      className: className || 'deposit-ether-modal__buy-row',
+    }, [
+
+    h('div.deposit-ether-modal__buy-row__back', {
+      onClick: onBackClick,
+    }, [
+
+      h('i.fa.fa-arrow-left.cursor-pointer'),
+
+    ]),
+
+    h('div.deposit-ether-modal__buy-row__logo', [logo]),
+
+      h('div.deposit-ether-modal__buy-row__description', [
+
+        !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
+
+        h('div.deposit-ether-modal__buy-row__description__text', [text]),
+
+      ]),
+
+      !hideButton && h('div.deposit-ether-modal__buy-row__button', [
+        h('button.deposit-ether-modal__deposit-button', {
+          onClick: onButtonClick,
+        }, [buttonLabel]),
+      ]),
+
+  ])
+}
+
+DepositEtherModal.prototype.render = function () {
+  const { network, toCoinbase, address, toFaucet } = this.props
+  const { buyingWithShapeshift } = this.state
+
+  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+  const networkName = networkNames[network]
+
+  return h('div.deposit-ether-modal', {}, [
+
+    h('div.deposit-ether-modal__header', [
+
+      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+
+      h('div.deposit-ether-modal__header__description', [
+        'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
+      ]),
+
+      h('div.deposit-ether-modal__header__close', {
+        onClick: () => {
+          this.setState({ buyingWithShapeshift: false })
+          this.props.hideModal()
+        },
+      }),
+
+    ]),
+
+    h('div.deposit-ether-modal__buy-rows', [
+
+      this.renderRow({
+        logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
+        title: DIRECT_DEPOSIT_ROW_TITLE,
+        text: DIRECT_DEPOSIT_ROW_TEXT,
+        buttonLabel: 'View Account',
+        onButtonClick: () => this.goToAccountDetailsModal(),
+        hide: buyingWithShapeshift,
+      }),
+
+      this.renderRow({
+        logo: h('i.fa.fa-tint.fa-2x'),
+        title: FAUCET_ROW_TITLE,
+        text: facuetRowText(networkName),
+        buttonLabel: 'Get Ether',
+        onButtonClick: () => toFaucet(network),
+        hide: !isTestNetwork || buyingWithShapeshift,
+      }),
+
+      this.renderRow({
+        logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
+          src: '../../../images/coinbase logo.png',
+        }),
+        title: COINBASE_ROW_TITLE,
+        text: COINBASE_ROW_TEXT,
+        buttonLabel: 'Continue to Coinbase',
+        onButtonClick: () => toCoinbase(address),
+        hide: isTestNetwork || buyingWithShapeshift,
+      }),
+
+      this.renderRow({
+        logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
+          src: '../../../images/shapeshift logo.png',
+        }),
+        title: SHAPESHIFT_ROW_TITLE,
+        text: SHAPESHIFT_ROW_TEXT,
+        buttonLabel: 'Buy with Shapeshift',
+        onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+        hide: isTestNetwork,
+        hideButton: buyingWithShapeshift,
+        hideTitle: buyingWithShapeshift,
+        onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+        className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
+      }),
+
+      buyingWithShapeshift && h(ShapeshiftForm),
+
+    ]),
+  ])
+}
+
+DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 2ff6accaa..afb2a2175 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -9,6 +9,7 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
+const DepositEtherModal = require('./deposit-ether-modal')
 const AccountDetailsModal = require('./account-details-modal')
 const EditAccountNameModal = require('./edit-account-name-modal')
 const ExportPrivateKeyModal = require('./export-private-key-modal')
@@ -73,6 +74,37 @@ const MODALS = {
     },
   },
 
+  DEPOSIT_ETHER: {
+    contents: [
+      h(DepositEtherModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '100%',
+      height: '100%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '0',
+      display: 'flex',
+    },
+    laptopModalStyle: {
+      width: '900px',
+      maxWidth: '900px',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
+      borderRadius: '8px',
+      transform: 'none',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   EDIT_ACCOUNT_NAME: {
     contents: [
       h(EditAccountNameModal, {}, []),
-- 
cgit v1.2.3


From 644adeccf6b5365ef2c8c9a5ba69b90fdaa1f2ec Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 13 Jan 2018 14:59:16 -0800
Subject: Fix Hide Token modal styling, popup positioning

---
 ui/app/components/modals/hide-token-confirmation-modal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index fa3ad0b1e..56c7ba299 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -58,12 +58,12 @@ HideTokenConfirmationModal.prototype.render = function () {
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
-        h('button.btn-clear', {
+        h('button.btn-cancel.hide-token-confirmation__button', {
           onClick: () => hideModal(),
         }, [
           'CANCEL',
         ]),
-        h('button.btn-clear', {
+        h('button.btn-clear.hide-token-confirmation__button', {
           onClick: () => hideToken(address),
         }, [
           'HIDE',
-- 
cgit v1.2.3


From 65e9d9efc56a99ecd3a46b98ed58af9604374f68 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 16 Jan 2018 17:41:42 -0800
Subject: Fix rendering QR code in old UI, hide unnecessary back button

---
 ui/app/components/modals/deposit-ether-modal.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 3e6d3fde1..532d66653 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -62,6 +62,7 @@ DepositEtherModal.prototype.renderRow = function ({
   hideButton,
   hideTitle,
   onBackClick,
+  showBackButton,
 }) {
   if (hide) {
     return null
@@ -71,7 +72,7 @@ DepositEtherModal.prototype.renderRow = function ({
       className: className || 'deposit-ether-modal__buy-row',
     }, [
 
-    h('div.deposit-ether-modal__buy-row__back', {
+    onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', {
       onClick: onBackClick,
     }, [
 
@@ -167,6 +168,7 @@ DepositEtherModal.prototype.render = function () {
         hideButton: buyingWithShapeshift,
         hideTitle: buyingWithShapeshift,
         onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+        showBackButton: this.state.buyingWithShapeshift,
         className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
       }),
 
-- 
cgit v1.2.3


From cd976a2765b9e442642faec8a985c049f8cb393b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Feb 2018 13:48:25 -0330
Subject: Add reset account button to new UI.

---
 ui/app/components/modals/modal.js                  | 13 ++++++
 ui/app/components/modals/notification-modal.js     | 36 ++++++++++++++---
 .../notification-modals/confirm-reset-account.js   | 46 ++++++++++++++++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/modals/notification-modals/confirm-reset-account.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index afb2a2175..97fe38292 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -18,6 +18,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
+const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -202,6 +203,18 @@ const MODALS = {
     },
   },
 
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '473px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
index 239144b0c..621a974d0 100644
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@@ -9,26 +9,47 @@ class NotificationModal extends Component {
     const {
       header,
       message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
     } = this.props
 
+    const showButtons = showCancelButton || showConfirmButton
+
     return h('div', [
-      h('div.notification-modal-wrapper', {
+      h('div.notification-modal__wrapper', {
       }, [
 
-        h('div.notification-modal-header', {}, [
+        h('div.notification-modal__header', {}, [
           header,
         ]),
 
-        h('div.notification-modal-message-wrapper', {}, [
-          h('div.notification-modal-message', {}, [
+        h('div.notification-modal__message-wrapper', {}, [
+          h('div.notification-modal__message', {}, [
             message,
           ]),
         ]),
 
         h('div.modal-close-x', {
-          onClick: this.props.hideModal,
+          onClick: hideModal,
         }),
 
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
       ]),
     ])
   }
@@ -37,7 +58,10 @@ class NotificationModal extends Component {
 NotificationModal.propTypes = {
   hideModal: PropTypes.func,
   header: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
new file mode 100644
index 000000000..e1bc91b24
--- /dev/null
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@@ -0,0 +1,46 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const NotifcationModal = require('../notification-modal')
+
+class ConfirmResetAccount extends Component {
+  render () {
+    const { resetAccount } = this.props
+
+    return h(NotifcationModal, {
+      header: 'Are you sure you want to reset account?',
+      message: h('div', [
+
+        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
+          which is used to calculate the current account nonce. `),
+
+        h('a.notification-modal__link', {
+          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
+          target: '_blank',
+          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
+        }, 'Read more.'),
+
+      ]),
+      showCancelButton: true,
+      showConfirmButton: true,
+      onConfirm: resetAccount,
+      
+    })
+  }
+}
+
+ConfirmResetAccount.propTypes = {
+  resetAccount: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => {
+      dispatch(actions.resetAccount())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)
-- 
cgit v1.2.3