Refactor 'rendersingleidentity' to a stand alone account-list-item component.

ui/app/components/send/account-list-item.js

@@ -0,0 +1,51 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('../identicon')
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+  Component.call(this)
+}
+
+module.exports = AccountListItem
+
+AccountListItem.prototype.render = function () {
+  const {
+    account, 
+    handleClick, 
+    icon = null,
+  } = this.props
+
+  const { identity, balancesToRender } = account
+  const { name, address } = identity
+  const { primary, secondary } = balancesToRender
+
+  return h('div.account-list-item', {
+    onClick: () => handleClick(identity),
+  }, [
+
+    h('div.account-list-item__top-row', {}, [
+
+      h(
+        Identicon,
+        {
+          address,
+          diameter: 18,
+          className: 'account-list-item__identicon',
+        },
+      ),  
+
+      h('div.account-list-item__account-name', {}, name),
+
+      icon && h('div.account-list-item__icon', [icon]),
+
+    ]),
+
+    h('div.account-list-item__account-primary-balance', {}, primary),
+
+    h('div.account-list-item__account-secondary-balance', {}, secondary),
+
+  ])
+}

ui/app/components/send/from-dropdown.js

@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('../identicon')
+const AccountListItem = require('./account-list-item')
 
 module.exports = FromDropdown
 
@@ -10,48 +11,15 @@ function FromDropdown () {
   Component.call(this)
 }
 
-FromDropdown.prototype.renderSingleIdentity = function (
+FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
-  account, 
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-  handleClick, 
-  inList = false, 
-  selectedIdentity = {}
-) {
-  const { identity, balancesToRender } = account
-  const { name, address } = identity
-  const { primary, secondary } = balancesToRender
 
-  const iconType = inList ? 'check' : 'caret-down'
+  return currentAccount.identity.address === selectedAccount.identity.address
-  const showIcon = !inList || address === selectedIdentity.address
+    ? listItemIcon
-
+    : null
-  return h('div.send-v2__from-dropdown__account', {
-    onClick: () => handleClick(identity),
-  }, [
-
-    h('div.send-v2__from-dropdown__top-row', {}, [
-
-      h(
-        Identicon,
-        {
-          address,
-          diameter: 18,
-          className: 'send-v2__from-dropdown__identicon',
-        },
-      ),  
-
-      h('div.send-v2__from-dropdown__account-name', {}, name),
-
-      showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`),
-
-    ]),
-
-    h('div.send-v2__from-dropdown__account-primary-balance', {}, primary),
-
-    h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary),
-
-  ])
 }
 
-FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) {
+FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) {
   return h('div', {}, [
 
     h('div.send-v2__from-dropdown__close-area', {
@@ -60,12 +28,11 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity,
 
     h('div.send-v2__from-dropdown__list', {}, [
 
-      ...identities.map(identity => this.renderSingleIdentity(
+      ...accounts.map(account => h(AccountListItem, {
-        identity,
+        account, 
-        () => console.log('Select identity'),
+        handleClick: () => console.log('Select identity'), 
-        true,
+        icon: this.getListItemIcon(account, selectedAccount),
-        selectedIdentity
+      }))
-      ))
 
     ]),
 
@@ -74,8 +41,8 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity,
 
 FromDropdown.prototype.render = function () {
   const {
-    identities,
+    accounts,
-    selectedIdentity,
+    selectedAccount,
     setFromField,
     openDropdown,
     closeDropdown,
@@ -84,9 +51,13 @@ FromDropdown.prototype.render = function () {
 
   return h('div.send-v2__from-dropdown', {}, [
 
-    this.renderSingleIdentity(selectedIdentity, openDropdown),
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+    }),
 
-    dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown),
+    dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown),
 
   ])
     

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

@@ -15,3 +15,32 @@
     color: $white;
   }
 }
+
+.account-list-item {
+  &__top-row {
+    display: flex;
+    margin-top: 10px;
+    margin-left: 8px;
+    position: relative;
+  }
+  
+  &__account-name {
+    font-size: 16px;
+    margin-left: 8px;
+  }
+
+  &__icon {
+    position: absolute;
+    right: 12px;
+    top: 1px;
+  }
+  &__account-primary-balance {
+    margin-left: 34px;
+    margin-top: 4px;
+  }
+
+  &__account-secondary-balance {
+    margin-left: 34px;
+    color: $dusty-gray;
+  }
+}

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

@@ -528,43 +528,6 @@
     font-size: 12px;
     color: $tundora;
 
-    &__top-row {
-      display: flex;
-      margin-top: 10px;
-      margin-left: 8px;
-      position: relative;
-    }
-
-    &__account-name {
-      font-size: 16px;
-      margin-left: 8px;
-    }
-
-    &__caret-down,
-    &__check {
-      position: absolute;
-      right: 12px;
-      top: 1px;
-    }
-
-    &__caret-down {
-      color: $alto;
-    }
-
-    &__check {
-      color: $caribbean-green;
-    }
-
-    &__account-primary-balance {
-      margin-left: 34px;
-      margin-top: 4px;
-    }
-
-    &__account-secondary-balance {
-      margin-left: 34px;
-      color: $dusty-gray;
-    }
-
     &__close-area {
       position: fixed;
       top: 0;

ui/app/send-v2.js

@@ -2,13 +2,12 @@ const { inherits } = require('util')
 const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const Identicon = require('./components/identicon')
 const FromDropdown = require('./components/send/from-dropdown')
 
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
 function mapStateToProps (state) {
-  const mockIdentities = Array.from(new Array(5))
+  const mockAccounts = Array.from(new Array(5))
     .map((v, i) => ({
       identity: {
         name: `Test Account Name ${i}`,
@@ -20,7 +19,7 @@ function mapStateToProps (state) {
       }
     }))
 
-  return { identities: mockIdentities }
+  return { accounts: mockAccounts }
 }
 
 inherits(SendTransactionScreen, PersistentForm)
@@ -43,7 +42,7 @@ function SendTransactionScreen () {
 }
 
 SendTransactionScreen.prototype.render = function () {
-  const { identities } = this.props
+  const { accounts } = this.props
   const { dropdownOpen } = this.state
 
   return (
@@ -75,8 +74,8 @@ SendTransactionScreen.prototype.render = function () {
 
           h(FromDropdown, {
             dropdownOpen,
-            identities,
+            accounts,
-            selectedIdentity: identities[0],
+            selectedAccount: accounts[0],
             setFromField: () => console.log('Set From Field'),
             openDropdown: () => this.setState({ dropdownOpen: true }),
             closeDropdown: () => this.setState({ dropdownOpen: false }),