Add layout and props for send screen inputs

3 files changed, 89 insertions, 21 deletions

diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 93c07599d..fb8c8e579 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -44,14 +44,7 @@ EnsInput.prototype.render = function () {
   return h('div', {
     style: { width: '100%' },
   }, [
-    h('span', {
-      style: {
-        textAlign: 'left',
-      }
-    }, [
-      'To:'
-    ]),
-    h('input.large-input', opts),
+    h('input.large-input.send-screen-input', opts),
     // The address book functionality.
     h('datalist#addresses',
       [
@@ -132,7 +125,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
 
 EnsInput.prototype.ensIcon = function (recipient) {
   const { hoverText } = this.state || {}
-  return h('span', {
+  return h('span.#ensIcon', {
     title: hoverText,
     style: {
       position: 'absolute',
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index d1987390d..6f124f053 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -41,4 +41,24 @@
   height: 45px;
   border: 1px solid $alto;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
-}
\ No newline at end of file
+}
+
+.send-screen-input-wrapper {
+  width: 95%;
+}
+
+.send-screen-input {
+  width: 100%;
+}
+
+.send-screen-amount-labels {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.send-screen-gas-labels {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
diff --git a/ui/app/send.js b/ui/app/send.js
index 3b52c9500..4317fb3a2 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -11,6 +11,7 @@ const isHex = require('./util').isHex
 const EthBalance = require('./components/eth-balance')
 const EnsInput = require('./components/ens-input')
 const ethUtil = require('ethereumjs-util')
+const { getSelectedIdentity } = require('./selectors')
 
 const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
 
@@ -18,6 +19,7 @@ module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
 function mapStateToProps (state) {
   var result = {
+    selectedIdentity: getSelectedIdentity(state),
     address: state.metamask.selectedAddress,
     accounts: state.metamask.accounts,
     identities: state.metamask.identities,
@@ -47,6 +49,7 @@ SendTransactionScreen.prototype.render = function () {
 
   const props = this.props
   const {
+    selectedIdentity,
     address,
     account,
     identity,
@@ -75,26 +78,42 @@ SendTransactionScreen.prototype.render = function () {
 
         h('div', {}, [
           'Send'
-        ])
+        ]),
 
-        h('div', {}, [
+        h('div', {
+          style: {
+            textAlign: 'center',
+          },
+        }, [
           'Send Ethereum to anyone with an Ethereum account'
-        ])
+        ]),
 
-        h('div', {}, [
+        h('div.send-screen-input-wrapper', {}, [
 
           h('div', {}, [
             'From:'
           ]),
 
-          h('input', {
-            placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'.
+          h('input.large-input.send-screen-input', {
+            list: 'accounts',
+            value: selectedIdentity.address
           }, [
-          ])
+          ]),
 
-        ])
+          h('datalist#accounts', {}, [
+            Object.keys(props.identities).map((key) => {
+              const identity = props.identities[key]
+              return h('option', {
+                value: identity.address,
+                label: identity.name,
+                key: identity.address,
+              })
+            }),
+          ]),
 
-        h('div', {}, [
+        ]),
+
+        h('div.send-screen-input-wrapper', {}, [
 
           h('div', {}, [
             'To:'
@@ -109,9 +128,45 @@ SendTransactionScreen.prototype.render = function () {
             addressBook,
           }),
 
-        ])
+        ]),
+
+        h('div.send-screen-input-wrapper', {}, [
+
+          h('div.send-screen-amount-labels', {}, [
+            h('span', {}, ['Amount']),
+            h('span', {}, ['ETH <> USD'])
+          ]),
+
+          h('input.large-input.send-screen-input', {
+            placeholder: '$0 USD',
+          }, []),
+
+        ]),
+
+        h('div.send-screen-input-wrapper', {}, [
+
+          h('div.send-screen-gas-labels', {}, [
+            h('span', {}, [
+              h('i.fa.fa-bolt', {}, []),
+              'Gas fee:',
+            ]),
+            h('span', {}, ['What\'s this?']),
+          ]),
+
+          h('input.large-input.send-screen-input', {
+            placeholder: '0',
+          }, []),
+
+        ]),
+
+        h('div.send-screen-input-wrapper', {}, [
 
-        // [WIP] - Styling Send Screen - Need to bring in data contract for signTx
+          h('div', {}, ['Transaction memo (optional)']),
+
+          h('input.large-input.send-screen-input', {}, [
+          ]),
+
+        ]),
 
       ]),