UI for readonly from component. From dropdown opening and closing. Mockdata.

1 files changed, 94 insertions, 0 deletions

diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
new file mode 100644
index 000000000..c438cefd5
--- /dev/null
+++ b/ui/app/components/send/from-dropdown.js
@@ -0,0 +1,94 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = FromDropdown
+
+inherits(FromDropdown, Component)
+function FromDropdown () {
+  Component.call(this)
+}
+
+FromDropdown.prototype.renderSingleIdentity = function (
+  account, 
+  handleClick, 
+  inList = false, 
+  selectedIdentity = {}
+) {
+  const { identity, balancesToRender } = account
+  const { name, address } = identity
+  const { primary, secondary } = balancesToRender
+
+  const iconType = inList ? 'check' : 'caret-down'
+  const showIcon = !inList || address === selectedIdentity.address
+
+  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) {
+  return h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...identities.map(identity => this.renderSingleIdentity(
+        identity,
+        () => console.log('Select identity'),
+        true,
+        selectedIdentity
+      ))
+
+    ]),
+
+  ])
+}
+
+FromDropdown.prototype.render = function () {
+  const {
+    identities,
+    selectedIdentity,
+    setFromField,
+    openDropdown,
+    closeDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.send-v2__from-dropdown', {}, [
+
+    this.renderSingleIdentity(selectedIdentity, openDropdown),
+
+    dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown),
+
+  ])
+    
+}
+