Hook up new dropdown components

7 files changed, 157 insertions, 184 deletions

diff --git a/ui/classic/app/components/editable-label.js b/ui/classic/app/components/editable-label.js
index 48ba5060e..41936f5e0 100644
--- a/ui/classic/app/components/editable-label.js
+++ b/ui/classic/app/components/editable-label.js
@@ -13,7 +13,6 @@ function EditableLabel () {
 EditableLabel.prototype.render = function () {
   const props = this.props
   const state = this.state
-  console.log("editing:", state.isEditingLabel);
 
   if (state && state.isEditingLabel) {
     return h('div.editable-label', [
@@ -31,8 +30,6 @@ EditableLabel.prototype.render = function () {
   } else {
     return h('div.name-label', {
       onClick: (event) => {
-        debugger;
-        console.log("event", event.target);
         this.setState({ isEditingLabel: true })
       },
     }, this.props.children)
diff --git a/ui/classic/app/components/network.js b/ui/classic/app/components/network.js
index d5d3e18cd..698a0bbb9 100644
--- a/ui/classic/app/components/network.js
+++ b/ui/classic/app/components/network.js
@@ -39,7 +39,6 @@ Network.prototype.render = function () {
       }),
       h('i.fa.fa-sort-desc'),
     ])
-
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'
diff --git a/ui/responsive/app/account-detail.js b/ui/responsive/app/account-detail.js
index 9a837a121..da1ddf98b 100644
--- a/ui/responsive/app/account-detail.js
+++ b/ui/responsive/app/account-detail.js
@@ -3,23 +3,18 @@ const extend = require('xtend')
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const CopyButton = require('./components/copyButton')
-const AccountInfoLink = require('./components/account-info-link')
 const actions = require('./actions')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
-
 const Identicon = require('./components/identicon')
 const EthBalance = require('./components/eth-balance')
 const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
-const Tooltip = require('./components/tooltip')
 const TabBar = require('./components/tab-bar')
 const TokenList = require('./components/token-list')
-const AccountOptionsMenus = require('./components/account-options-menus').AccountOptionsMenus;
-console.log("AOM",AccountOptionsMenus);
+const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -53,8 +48,6 @@ AccountDetailScreen.prototype.render = function () {
   var identity = props.identities[selected]
   var account = props.accounts[selected]
   const { network, conversionRate, currentCurrency } = props
-  console.log("identity:", identity);
-  console.log("result:", identity && identity.name);
 
   return (
 
@@ -103,10 +96,41 @@ AccountDetailScreen.prototype.render = function () {
 
               // What is shown when not editing + edit text:
               h('label.editing-label', [h('.edit-text', 'edit')]),
-              h('h2.font-medium.color-forest', {name: 'edit'}, [
-                identity && identity.name,
-                h(AccountOptionsMenus, { style: { marginLeft: '35%' }}, []),
-              ]),
+              h(
+                'div',
+                {
+                  style: {
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                  },
+                },
+                [
+                  h(
+                    'h2.font-medium.color-forest',
+                    {
+                      name: 'edit',
+                      style: {
+                      },
+                    },
+                    [
+                      identity && identity.name,
+                    ]
+                  ),
+                  h(
+                    AccountDropdowns,
+                    {
+                      style: {
+                        marginRight: '8px',
+                        marginLeft: 'auto',
+                      },
+                      selected,
+                      network,
+                      identities: props.identities,
+                    },
+                  ),
+                ]
+              ),
             ]),
             h('.flex-row', {
               style: {
@@ -132,56 +156,6 @@ AccountDetailScreen.prototype.render = function () {
                   color: '#AEAEAE',
                 },
               }, checksumAddress),
-
-              // copy and export
-
-              h('.flex-row', {
-                style: {
-                  justifyContent: 'flex-end',
-                },
-              }, [
-
-                h(AccountInfoLink, { selected, network }),
-
-                h(CopyButton, {
-                  value: checksumAddress,
-                }),
-
-                h(Tooltip, {
-                  title: 'QR Code',
-                }, [
-                  h('i.fa.fa-qrcode.pointer.pop-hover', {
-                    onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')),
-                    style: {
-                      fontSize: '18px',
-                      position: 'relative',
-                      color: 'rgb(247, 134, 28)',
-                      top: '5px',
-                      marginLeft: '3px',
-                      marginRight: '3px',
-                    },
-                  }),
-                ]),
-
-                h(Tooltip, {
-                  title: 'Export Private Key',
-                }, [
-                  h('div', {
-                    style: {
-                      display: 'flex',
-                      alignItems: 'center',
-                    },
-                  }, [
-                    h('img.cursor-pointer.color-orange', {
-                      src: 'images/key-32.png',
-                      onClick: () => this.requestAccountExport(selected),
-                      style: {
-                        height: '19px',
-                      },
-                    }),
-                  ]),
-                ]),
-              ]),
             ]),
 
             // account ballence
@@ -313,7 +287,3 @@ AccountDetailScreen.prototype.transactionList = function () {
     },
   })
 }
-
-AccountDetailScreen.prototype.requestAccountExport = function () {
-  this.props.dispatch(actions.requestExportAccount())
-}
diff --git a/ui/responsive/app/app.js b/ui/responsive/app/app.js
index f829dc8fa..1ac9bea78 100644
--- a/ui/responsive/app/app.js
+++ b/ui/responsive/app/app.js
@@ -10,7 +10,6 @@ const NewKeyChainScreen = require('./new-keychain')
 // unlock
 const UnlockScreen = require('./unlock')
 // accounts
-const AccountsScreen = require('./accounts')
 const AccountDetailScreen = require('./account-detail')
 const SendTransactionScreen = require('./send')
 const ConfirmTxScreen = require('./conf-tx')
@@ -24,11 +23,9 @@ const Import = require('./accounts/import')
 const InfoScreen = require('./info')
 const Loading = require('./components/loading')
 const SandwichExpando = require('sandwich-expando')
-const MenuDroppo = require('menu-droppo')
-const DropMenuItem = require('./components/drop-menu-item')
-import { Dropdown, DropdownMenuItem } from './components/dropdown';
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkIndicator = require('./components/network')
-const Tooltip = require('./components/tooltip')
 const BuyView = require('./components/buy-button-subview')
 const QrView = require('./components/qr-code')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
@@ -126,7 +123,7 @@ App.prototype.renderAppBar = function () {
           alignItems: 'center',
           visibility: props.isUnlocked ? 'visible' : 'none',
           background: props.isUnlocked ? 'white' : 'none',
-          height: '36px',
+          height: '38px',
           position: 'relative',
           zIndex: 12,
         },
@@ -174,21 +171,6 @@ App.prototype.renderAppBar = function () {
           },
         }, [
 
-          // small accounts nav
-          props.isUnlocked && h(Tooltip, { title: 'Switch Accounts' }, [
-            h('img.cursor-pointer.color-orange', {
-              src: 'images/switch_acc.svg',
-              style: {
-                width: '23.5px',
-                marginRight: '8px',
-              },
-              onClick: (event) => {
-                event.stopPropagation()
-                this.props.dispatch(actions.showAccountsPage())
-              },
-            }),
-          ]),
-
           // hamburger
           props.isUnlocked && h(SandwichExpando, {
             width: 16,
@@ -210,11 +192,12 @@ App.prototype.renderAppBar = function () {
 
 App.prototype.renderNetworkDropdown = function () {
   const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const state = this.state || {}
   const isOpen = state.isNetworkMenuOpen
 
-  return h(MenuDroppo, {
+  return h(Dropdown, {
     isOpen,
     onClickOutside: (event) => {
       this.setState({ isNetworkMenuOpen: !isOpen })
@@ -222,73 +205,90 @@ App.prototype.renderNetworkDropdown = function () {
     zIndex: 11,
     style: {
       position: 'absolute',
-      left: 0,
+      left: '2px',
       top: '36px',
     },
-    innerStyle: {
-      background: 'white',
-      boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
-    },
-  }, [ // DROP MENU ITEMS
-    h('style', `
-      .drop-menu-item:hover { background:rgb(235, 235, 235); }
-      .drop-menu-item i { margin: 11px; }
-    `),
-
-    h(DropMenuItem, {
-      label: 'Main Ethereum Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => props.dispatch(actions.setProviderType('mainnet')),
-      icon: h('.menu-icon.diamond'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Ropsten Test Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => props.dispatch(actions.setProviderType('ropsten')),
-      icon: h('.menu-icon.red-dot'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Kovan Test Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false}),
-      action: () => props.dispatch(actions.setProviderType('kovan')),
-      icon: h('.menu-icon.hollow-diamond'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Rinkeby Test Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false}),
-      action: () => props.dispatch(actions.setProviderType('rinkeby')),
-      icon: h('.menu-icon.golden-square'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Localhost 8545',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
-      icon: h('i.fa.fa-question-circle.fa-lg'),
-      activeNetworkRender: props.provider.rpcTarget,
-    }),
+    innerStyle: {},
+  }, [
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+      },
+      [
+        h('.menu-icon.diamond'),
+        'Main Ethereum Network',
+        providerType === 'mainnet' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('ropsten')),
+      },
+      [
+        h('.menu-icon.red-dot'),
+        'Ropsten Test Network',
+        providerType === 'ropsten' ? h('.check', '✓') : null,
+      ]),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('kovan')),
+      },
+      [
+        h('.menu-icon.hollow-diamond'),
+        'Kovan Test Network',
+        providerType === 'kovan' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
+      },
+      [
+        h('.menu-icon.golden-square'),
+        'Rinkeby Test Network',
+        providerType === 'rinkeby' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Localhost 8545',
+        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+      ]
+    ),
 
     this.renderCustomOption(props.provider),
     this.renderCommonRpc(rpcList, props.provider),
 
-    h(DropMenuItem, {
-      label: 'Custom RPC',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => this.props.dispatch(actions.showConfigPage()),
-      icon: h('i.fa.fa-question-circle.fa-lg'),
-    }),
-
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => this.props.dispatch(actions.showConfigPage()),
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Custom RPC',
+        activeNetwork === 'custom' ? h('.check', '✓') : null,
+      ]
+    ),
   ])
 }
 
@@ -304,29 +304,29 @@ App.prototype.renderDropdown = function () {
     },
     style: {
       position: 'absolute',
-      right: 0,
-      top: '36px',
+      right: '2px',
+      top: '38px',
     },
     innerStyle: {},
-  }, [ // DROP MENU ITEMS
+  }, [
     h(DropdownMenuItem, {
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => this.props.dispatch(actions.showConfigPage()),
+      onClick: () => { this.props.dispatch(actions.showConfigPage()) },
     }, 'Settings'),
 
     h(DropdownMenuItem, {
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => this.props.dispatch(actions.showImportPage()),
+      onClick: () => { this.props.dispatch(actions.showImportPage()) },
     }, 'Import Account'),
 
     h(DropdownMenuItem, {
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => this.props.dispatch(actions.lockMetamask()),
+      onClick: () => { this.props.dispatch(actions.lockMetamask()) },
     }, 'Lock'),
 
     h(DropdownMenuItem, {
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => this.props.dispatch(actions.showInfoPage()),
+      onClick: () => { this.props.dispatch(actions.showInfoPage()) },
     }, 'Info/Help'),
   ])
 }
@@ -413,10 +413,6 @@ App.prototype.renderPrimary = function () {
   // show current view
   switch (props.currentView.name) {
 
-    case 'accounts':
-      log.debug('rendering accounts screen')
-      return h(AccountsScreen, {key: 'accounts'})
-
     case 'accountDetail':
       log.debug('rendering account detail screen')
       return h(AccountDetailScreen, {key: 'account-detail'})
@@ -519,13 +515,18 @@ App.prototype.renderCustomOption = function (provider) {
       return null
 
     default:
-      return h(DropMenuItem, {
-        label,
-        key: rpcTarget,
-        closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        icon: h('i.fa.fa-question-circle.fa-lg'),
-        activeNetworkRender: 'custom',
-      })
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ]
+      )
   }
 }
 
@@ -558,14 +559,19 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
     if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
       return null
     } else {
-      return h(DropMenuItem, {
-        label: rpc,
-        key: rpc,
-        closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        action: () => props.dispatch(actions.setRpcTarget(rpc)),
-        icon: h('i.fa.fa-question-circle.fa-lg'),
-        activeNetworkRender: rpc,
-      })
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpc,
+          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+          action: () => props.dispatch(actions.setRpcTarget(rpc)),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          h('.check', '✓'),
+        ]
+      )
     }
   })
 }
diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js
index cbb97b2cb..f77d2fe9c 100644
--- a/ui/responsive/app/components/account-dropdowns.js
+++ b/ui/responsive/app/components/account-dropdowns.js
@@ -200,7 +200,7 @@ AccountDropdowns.propTypes = {
   selected: PropTypes.string,
 }
 
-const mapDispatchToProps = (dispatch, ownProps) => {
+const mapDispatchToProps = (dispatch) => {
   return {
     actions: {
       showConfigPage: () => dispatch(actions.showConfigPage()),
diff --git a/ui/responsive/app/components/editable-label.js b/ui/responsive/app/components/editable-label.js
index 43841bdd8..167be7eaf 100644
--- a/ui/responsive/app/components/editable-label.js
+++ b/ui/responsive/app/components/editable-label.js
@@ -30,15 +30,17 @@ EditableLabel.prototype.render = function () {
   } else {
     return h('div.name-label', {
       onClick: (event) => {
-        if (event.target.getAttribute('name') === 'edit') {
+        const nameAttribute = event.target.getAttribute('name')
+        // checks for class to handle smaller CTA above the account name
+        const classAttribute = event.target.getAttribute('class')
+        if (nameAttribute === 'edit' || classAttribute === 'edit-text') {
           this.setState({ isEditingLabel: true })
         }
       },
     }, this.props.children)
   }
 }
-// class = edit-text
-// name = edit
+
 EditableLabel.prototype.saveIfEnter = function (event) {
   if (event.key === 'Enter') {
     this.saveText()
diff --git a/ui/responsive/app/components/network.js b/ui/responsive/app/components/network.js
index d5d3e18cd..698a0bbb9 100644
--- a/ui/responsive/app/components/network.js
+++ b/ui/responsive/app/components/network.js
@@ -39,7 +39,6 @@ Network.prototype.render = function () {
       }),
       h('i.fa.fa-sort-desc'),
     ])
-
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'