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

1 files changed, 37 insertions, 1 deletions

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'),