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

4 files changed, 226 insertions, 1 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),
+
+  ])
+    
+}
+
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 72a01dc89..ddd22f9fd 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -495,6 +495,100 @@
     width: 287px;
   }
 
+  &__form {
+    display: flex;
+    flex-direction: column;
+    margin-top: 13px;
+    width: 100%;
+  }
+
+  &__form-row {
+    margin: 14.5px 18px 0px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+  }
+
+  &__form-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+    margin-top: 16px;
+  }
+
+  &__from-dropdown {
+    height: 73px;
+    width: 240px;
+    border: 1px solid $alto;
+    border-radius: 4px;
+    background-color: $white;
+    font-family: Roboto;
+    line-height: 16px;
+    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;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      height: 100%;
+    }
+    
+    &__list {
+      z-index: 1050;
+      position: absolute;
+      height: 220px;
+      width: 240px;
+      border: 1px solid $geyser;
+      border-radius: 4px;
+      background-color: $white;
+      box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
+      margin-top: 11px;
+      margin-left: -1px;
+      overflow-y: scroll;
+    }
+  }
+
   &__footer {
     height: 92px;
     width: 100%;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index b0ef86075..764d9c179 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -42,6 +42,7 @@ $tulip-tree: #ebb33f;
 $malibu-blue: #7ac9fd;
 $athens-grey: #e9edf0;
 $jaffa: #f28930;
+$geyser: #d2d8dd;
 
 /*
   Z-Indicies
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index f423b90ff..53e63b784 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -3,11 +3,24 @@ 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) {
-  return {}
+  const mockIdentities = Array.from(new Array(5))
+    .map((v, i) => ({
+      identity: {
+        name: `Test Account Name ${i}`,
+        address: `0x02f567704cc6569127e18e3d00d2c85bcbfa6f0${i}`,
+      },
+      balancesToRender: {
+        primary: `100${i}.000001 ETH`,
+        secondary: `$30${i},000.00 USD`,
+      }
+    }))
+
+  return { identities: mockIdentities }
 }
 
 inherits(SendTransactionScreen, PersistentForm)
@@ -25,10 +38,14 @@ function SendTransactionScreen () {
       txData: null,
       memo: '',
     },
+    dropdownOpen: false,
   }
 }
 
 SendTransactionScreen.prototype.render = function () {
+  const { identities } = this.props
+  const { dropdownOpen } = this.state
+
   return (
 
     h('div.send-v2__container', [
@@ -50,6 +67,25 @@ SendTransactionScreen.prototype.render = function () {
 
       h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
 
+      h('div.send-v2__form', {}, [
+
+        h('div.send-v2__form-row', [
+
+          h('div.send-v2__form-label', 'From:'),
+
+          h(FromDropdown, {
+            dropdownOpen,
+            identities,
+            selectedIdentity: identities[0],
+            setFromField: () => console.log('Set From Field'),
+            openDropdown: () => this.setState({ dropdownOpen: true }),
+            closeDropdown: () => this.setState({ dropdownOpen: false }),
+          }),
+
+        ])
+
+      ]),
+
       // Buttons underneath card
       h('div.send-v2__footer', [
         h('button.send-v2__cancel-btn', {}, 'Cancel'),