[WIP] Position account potions dropdown correctly and hook up to action creators

ui/app/components/account-dropdowns.js

@@ -22,7 +22,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, selected } = this.props
+    const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
@@ -35,10 +35,13 @@ class AccountDropdowns extends Component {
           onClick: () => {
             this.props.actions.showAccountDetail(identity.address)
           },
-          style: {
-            marginTop: index === 0 ? '5px' : '',
-            fontSize: '24px',
-          },
+          style: Object.assign(
+            {
+              marginTop: index === 0 ? '5px' : '',
+              fontSize: '24px',
+            },
+            menuItemStyles,
+          ),
         },
         [
           h(
@@ -59,8 +62,8 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountSelector () {
-    const { actions } = this.props
-    const { accountSelectorActive } = this.state
+    const { actions, dropdownWrapperStyle } = this.props
+    const { accountSelectorActive, menuItemStyles } = this.state
 
     return h(
       Dropdown,
@@ -93,6 +96,10 @@ class AccountDropdowns extends Component {
           {
             closeMenu: () => {},
             onClick: () => actions.addNewAccount(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
           },
           [
             h(
@@ -112,6 +119,10 @@ class AccountDropdowns extends Component {
           {
             closeMenu: () => {},
             onClick: () => actions.showImportPage(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
           },
           [
             h(
@@ -137,16 +148,20 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountOptions () {
-    const { actions } = this.props
-    const { optionsMenuActive } = this.state
+    const { actions, dropdownWrapperStyle } = this.props
+    const { optionsMenuActive, menuItemStyles } = this.state
 
     return h(
       Dropdown,
       {
-        style: {
-          marginLeft: '-215px',
-          minWidth: '180px',
-        },
+        style: Object.assign(
+          {
+            marginLeft: '-10px',
+            position: 'absolute',
+            width: '29vh', // affects both mobile and laptop views
+          },
+          dropdownWrapperStyle,
+        ),
         isOpen: optionsMenuActive,
         onClickOutside: () => {
           const { classList } = event.target
@@ -166,6 +181,10 @@ class AccountDropdowns extends Component {
               const url = genAccountLink(selected, network)
               global.platform.openWindow({ url })
             },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
           },
           'View account on Etherscan',
         ),
@@ -178,6 +197,10 @@ class AccountDropdowns extends Component {
               var identity = identities[selected]
               actions.showQrView(selected, identity ? identity.name : '')
             },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
           },
           'Show QR Code',
         ),
@@ -190,6 +213,10 @@ class AccountDropdowns extends Component {
               const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
               copyToClipboard(checkSumAddress)
             },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
           },
           'Copy Address to clipboard',
         ),
@@ -200,6 +227,10 @@ class AccountDropdowns extends Component {
             onClick: () => {
               actions.requestAccountExport()
             },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
           },
           'Export Private Key',
         ),
@@ -208,7 +239,7 @@ class AccountDropdowns extends Component {
   }
 
   render () {
-    const { style, enableAccountsSelector, enableAccountOptions } = this.props
+    const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props
     const { optionsMenuActive, accountSelectorActive } = this.state
 
     return h(
@@ -267,7 +298,7 @@ AccountDropdowns.defaultProps = {
 
 AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
-  selected: PropTypes.string,
+  selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress
 }
 
 const mapDispatchToProps = (dispatch) => {

ui/app/components/dropdown.js

@@ -67,7 +67,7 @@ class DropdownMenuItem extends Component {
         },
         style: Object.assign({
           listStyle: 'none',
-          padding: '8px 0px 8px 0px',
+          padding: '8px 0px',
           fontSize: '18px',
           fontStyle: 'normal',
           fontFamily: 'Montserrat Regular',
@@ -75,6 +75,7 @@ class DropdownMenuItem extends Component {
           display: 'flex',
           justifyContent: 'flex-start',
           alignItems: 'center',
+          color: 'white',
         }, style),
       },
       children

ui/app/components/wallet-view.js

@@ -6,14 +6,20 @@ const Identicon = require('./identicon')
 const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
 const Content = require('./wallet-content-display')
 const actions = require('../actions')
+const selectors = require('../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
 
 function mapStateToProps (state) {
+
   return {
     network: state.metamask.network,
     sidebarOpen: state.appState.sidebarOpen,
     identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+    selectedAccount: selectors.getSelectedAccount(state),
   }
 }
 
@@ -32,8 +38,7 @@ function WalletView () {
 const noop = () => {}
 
 WalletView.prototype.render = function () {
-  const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address
-  const { network, responsiveDisplayClassname, style, identities } = this.props
+  const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props
 
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},
@@ -45,20 +50,32 @@ WalletView.prototype.render = function () {
     }, [
 
       h('div.flex-row.account-options-menu', {
+        style: {
+          position: 'relative',
+        },
       }, [
 
         h(AccountDropdowns, {
-          // selected,
-          // network,
-          // identities: props.identities,
+          selected: selectedAddress,
+          network,
+          identities,
           enableAccountOptions: true,
+          dropdownWrapperStyle: {
+            padding: '1px 15px',
+            marginLeft: '-25px',
+            position: 'absolute',
+            width: '122%', //TODO, refactor all of this component out into media queries
+          },
+          menuItemStyles: {
+            padding: '0px 0px',
+            margin: '22px 0px',
+          }
         }, []),
 
       ]),
 
       h('div.flex-column.flex-center', {
         style: {
-          // constrains size of absolutely positioned wrappers
           position: 'relative',
         },
       }, [
@@ -70,7 +87,7 @@ WalletView.prototype.render = function () {
         }, [
           h(Identicon, {
             diameter: 54,
-            address: selected,
+            address: selectedAddress,
           }),
         ]),
 
@@ -84,31 +101,14 @@ WalletView.prototype.render = function () {
           style: {
             position: 'absolute',
             left: 'calc(50% + 28px + 5.5px)',
-            // left: '42px',
-            // top: '-10px'
-            // left: '66.5%',
             top: '19.5%',
           },
-          selected,
+          selected: selectedAddress,
           network,
           identities,
           enableAccountsSelector: true,
         }, []),
       ]),
-
-      h(
-        AccountDropdowns,
-        {
-          style: {
-            marginLeft: 'auto',
-            cursor: 'pointer',
-          },
-          selected,
-          network, // TODO: this prop could be in the account dropdown container
-          identities: {},
-        },
-      ),
-
     ]),
 
     h(Content, {
@@ -128,6 +128,5 @@ WalletView.prototype.render = function () {
         marginTop: '1.3em',
       }
     })
-
   ])
 }