ui - redesign - sendTransaction

1 files changed, 134 insertions, 46 deletions

diff --git a/ui/app/send.js b/ui/app/send.js
index 43b4e3a04..56b23ee24 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -2,9 +2,12 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+const Identicon = require('./components/identicon')
 const actions = require('./actions')
 const util = require('./util')
 const numericBalance = require('./util').numericBalance
+const formatBalance = require('./util').formatBalance
+const addressSummary = require('./util').addressSummary
 const AccountPanel = require('./components/account-panel')
 const ethUtil = require('ethereumjs-util')
 
@@ -32,78 +35,163 @@ function SendTransactionScreen() {
 
 SendTransactionScreen.prototype.render = function() {
   var state = this.props
+  var address = state.address
   var account = state.account
   var identity = state.identity
 
   return (
+
     h('.send-screen.flex-column.flex-grow', [
 
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: this.back.bind(this),
-        }),
-        h('h2.page-subtitle', 'Send Transaction'),
+      //
+      // Sender Profile
+      //
+
+      h('.account-data-subsection.flex-column.flex-grow', {
+        style: {
+          margin: '0 20px',
+        },
+      }, [
+
+        // header - identicon + nav
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 28,
+          },
+        }, [
+
+          // invisible placeholder for later
+          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
+            onClick: this.back.bind(this),
+          }),
+
+          // large identicon
+          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+            h(Identicon, {
+              diameter: 62,
+              address: address,
+            }),
+          ]),
+
+          // small accounts nav
+          h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
+            onClick: this.navigateToAccounts.bind(this),
+          }),
+
+        ]),
+
+        // account label
+        h('h2.font-medium.color-forest.flex-center', {
+          style: {
+            paddingTop: 8,
+            marginBottom: 8,
+          },
+        }, identity && identity.name),
+
+        // address and getter actions
+        h('.flex-row.flex-center', {
+          style: {
+            marginBottom: 8,
+          },
+        }, [
+
+          h('div', {
+            style: {
+              lineHeight: '16px',
+            },
+          }, addressSummary(address)),
+
+        ]),
+
+        // balance
+        h('.flex-row.flex-center', [
+
+          h('div', formatBalance(account && account.balance)),
+
+        ]),
+
       ]),
 
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-      }),
+      //
+      // Required Fields
+      //
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginTop: 32,
+          marginBottom: 16,
+        },
+      }, [
+        'Send Transaction',
+      ]),
 
-      h('section.recipient', [
-        h('input.address', {
+      // 'to' field
+      h('section.flex-row.flex-center', [
+        h('input.address.large-input', {
           placeholder: 'Recipient Address',
         })
       ]),
 
-      h('section.ammount', [
-        h('input.ether', {
+      // 'amount' and send button
+      h('section.flex-row.flex-center', [
+
+        h('input.ether.large-input', {
           placeholder: 'Amount',
           type: 'number',
-          style: { marginRight: '6px' }
+          style: {
+            marginRight: 6,
+          },
         }),
-        h('select.currency', {
-          name: 'currency',
-        }, [
-          h('option', { value: 'ether' }, 'Ether (1e18 wei)'),
-          h('option', { value: 'wei' }, 'Wei'),
-        ]),
-      ]),
 
-      h('section.data', [
-        h('details', [
-          h('summary', {
-            style: {
-              cursor: 'pointer',
-              outline: 'none',
-            },
-          }, 'Advanced'),
-          h('textarea.txData', {
-            type: 'textarea',
-            placeholder: 'Transaction data (optional)',
-            style: {
-              height: '100px',
-              width: '100%',
-              resize: 'none',
-            }
-          })
-        ])
+        h('button.primary', {
+          onClick: this.onSubmit.bind(this),
+          style: {
+            textTransform: 'uppercase',
+          },
+        }, 'Send')
+
       ]),
 
-      h('section', {
+      //
+      // Optional Fields
+      //
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginTop: 16,
+          marginBottom: 16,
+        },
       }, [
-        h('button', {
-          onClick: this.onSubmit.bind(this),
-        }, 'Send')
+        'Tranasactional Data (optional)',
       ]),
 
-      state.warning ? h('span.error', state.warning.split('.')[0]) : null,
+      // 'data' field
+      h('section.flex-row.flex-center', [
+        h('input.txData.large-input', {
+          placeholder: '0x01234',
+          style: {
+            width: '100%',
+            resize: 'none',
+          }
+        }),
+      ]),
+
+      // state.warning ? h('span.error', state.warning.split('.')[0]) : null,
+
     ])
+
   )
 }
 
+SendTransactionScreen.prototype.navigateToAccounts = function(event){
+  event.stopPropagation()
+  this.props.dispatch(actions.showAccountsPage())
+}
+
 SendTransactionScreen.prototype.back = function() {
   var address = this.props.address
   this.props.dispatch(actions.backToAccountDetail(address))