Implement new dropdown design, integrate account balances

ui/app/components/dropdowns/components/account-dropdowns.js

@@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
+const { formatBalance } = require('../../../util')
 
 class AccountDropdowns extends Component {
   constructor (props) {
@@ -24,12 +25,15 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
+    const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
       const isSelected = identity.address === selected
 
+      const balanceValue = accounts[key].balance
+      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+
       return h(
         DropdownMenuItem,
         {
@@ -46,45 +50,77 @@ class AccountDropdowns extends Component {
           ),
         },
         [
-          h('div.flex-row', {}, [
+          h('div.flex-row.flex-center', {}, [
 
             h('span', {
               style: {
-                flex: '1 1 auto',
+                flex: '1 1 0',
+                minWidth: '20px',
+                minHeight: '30px',
               }
-            }, isSelected ? h('.check', '✓') : null),
+            }, [
+              h('span', {
+                style: {
+                  flex: '1 1 auto',
+                  fontSize: '14px',
+                }
+              }, isSelected ? h('i.fa.fa-check') : null),
+            ]),
 
             h(
               Identicon,
               {
                 address: identity.address,
-                diameter: 32,
+                diameter: 24,
                 style: {
                   flex: '1 1 auto',
+                  marginLeft: '10px',
                 },
               },
             ),
 
-            h('span', {
+            h('span.flex-column', {
               style: {
-                flex: '5 5 auto',
-                fontSize: '24px',
-                maxWidth: '145px',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              },
-            }, identity.name || ''),
+                flex: '10 10 auto',
+                width: '175px',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                marginLeft: '10px',
+              }
+            }, [
+              h('span.account-dropdown-name', {
+                style: {
+                  fontSize: '18px',
+                  maxWidth: '145px',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                },
+              }, identity.name || ''),
+
+              h('span.account-dropdown-balance', {
+                style: {
+                  fontSize: '14px',
+                },
+              }, formattedBalance)
+            ]),
 
             h('span', {
               style: {
-                flex: '2 2 auto',
-                fontSize: '18px',
+                flex: '3 3 auto',
               },
-              onClick: () => {
-                actions.showNewAccountModal()
-              }
-            }, 'Edit'),
+            }, [
+              h('span.account-dropdown-edit-button', {
+                style: {
+                  fontSize: '16px',
+                },
+                onClick: () => {
+                  actions.showNewAccountModal()
+                },
+              }, [
+                'Edit',
+              ])
+            ]),
 
           ])
         ]
@@ -93,7 +129,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountSelector () {
-    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
+    const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props
     const { accountSelectorActive, menuItemStyles } = this.state
 
     return h(
@@ -108,7 +144,7 @@ class AccountDropdowns extends Component {
           maxHeight: '300px',
           width: '300px',
         },
-        innerStyle: {},
+        innerStyle,
         isOpen: accountSelectorActive,
         onClickOutside: (event) => {
           const { classList } = event.target
@@ -141,7 +177,7 @@ class AccountDropdowns extends Component {
               },
             ),
             h('span', {
-              style: { marginLeft: '20px', fontSize: '24px' },
+              style: { marginLeft: '20px', fontSize: '18px' },
               onClick: () => {
                 actions.showNewAccountModal()
               },
@@ -171,7 +207,7 @@ class AccountDropdowns extends Component {
             h('span', {
               style: {
                 marginLeft: '20px',
-                fontSize: '24px',
+                fontSize: '18px',
                 marginBottom: '5px',
               },
             }, 'Import Account'),

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, {}, []),

ui/app/components/wallet-view.js

@@ -39,7 +39,7 @@ function WalletView () {
 const noop = () => {}
 
 WalletView.prototype.render = function () {
-  const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props
+  const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts } = this.props
 
   // temporary logs + fake extra wallets
   console.log(selectedAccount)
@@ -96,11 +96,15 @@ WalletView.prototype.render = function () {
           }
         }, [
           h(AccountDropdowns, {
+            accounts,
             style: {
               position: 'absolute',
               left: 'calc(50% + 28px + 5.5px)',
               top: '14px',
             },
+            innerStyle: {
+              padding: '2px 16px',
+            },
             useCssTransition: true,
             selected: selectedAddress,
             network,

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

@@ -0,0 +1,14 @@
+.account-dropdown-name {
+  
+}
+
+.account-dropdown-balance {
+  color: $dusty-gray;
+}
+
+.account-dropdown-edit-button {
+  color: $dusty-gray;
+  &:hover {
+    color: $white;
+  }
+}

ui/app/css/itcss/components/index.scss

@@ -10,6 +10,8 @@
 
 @import './newui-sections.scss';
 
+@import './account-dropdown.scss';
+
 // Balances
 @import './hero-balance.scss';