Moved UI into repo with its own dependency stack

1 files changed, 139 insertions, 0 deletions

diff --git a/ui/app/send.js b/ui/app/send.js
new file mode 100644
index 000000000..3cb56cb6e
--- /dev/null
+++ b/ui/app/send.js
@@ -0,0 +1,139 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+const util = require('./util')
+const numericBalance = require('./util').numericBalance
+const AccountPanel = require('./components/account-panel')
+const ethUtil = require('ethereumjs-util')
+
+module.exports = connect(mapStateToProps)(SendTransactionScreen)
+
+function mapStateToProps(state) {
+  var result = {
+    address: state.appState.currentView.context,
+    accounts: state.metamask.accounts,
+    identities: state.metamask.identities,
+    warning: state.appState.warning,
+  }
+
+  result.account = result.accounts[result.address]
+  result.identity = result.identities[result.address]
+  result.balance = result.account ? numericBalance(result.account.balance) : null
+
+  return result
+}
+
+inherits(SendTransactionScreen, Component)
+function SendTransactionScreen() {
+  Component.call(this)
+}
+
+SendTransactionScreen.prototype.render = function() {
+  var state = this.props
+  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'),
+      ]),
+
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+      }),
+
+      h('section.recipient', [
+        h('input.address', {
+          placeholder: 'Recipient Address',
+        })
+      ]),
+
+      h('section.ammount', [
+        h('input.ether', {
+          placeholder: 'Amount',
+          type: 'number',
+          style: { marginRight: '6px' }
+        }),
+        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'},
+          }, 'Advanced'),
+          h('textarea.txData', {
+            type: 'textarea',
+            placeholder: 'Transaction data (optional)',
+            style: {
+              height: '100px',
+              width: '100%',
+              resize: 'none',
+            }
+          })
+        ])
+      ]),
+
+      h('section', {
+      }, [
+        h('button', {
+          onClick: this.onSubmit.bind(this),
+        }, 'Send')
+      ]),
+
+      state.warning ? h('span.error', state.warning) : null,
+    ])
+  )
+}
+
+SendTransactionScreen.prototype.back = function() {
+  var address = this.props.address
+  this.props.dispatch(actions.backToAccountDetail(address))
+}
+
+SendTransactionScreen.prototype.onSubmit = function(event) {
+  var recipient = document.querySelector('input.address').value
+  var amount = new ethUtil.BN(document.querySelector('input.ether').value, 10)
+  var currency = document.querySelector('select.currency').value
+  var txData = document.querySelector('textarea.txData').value
+
+  var value = util.normalizeToWei(amount, currency)
+  var balance = this.props.balance
+
+  if (value.gt(balance)) {
+    var message = 'Insufficient funds.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+  if (recipient.length !== 42) {
+    var message = 'Recipient address is the incorrect length.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  this.props.dispatch(actions.hideWarning())
+  this.props.dispatch(actions.showLoadingIndication())
+
+  var txParams = {
+    to: recipient,
+    from: this.props.address,
+    value: '0x' + value.toString(16),
+  }
+  if (txData) txParams.data = txData
+
+  this.props.dispatch(actions.signTx(txParams))
+}
+