Clean up code in send.js

ui/app/send.js

@@ -18,12 +18,10 @@ const {
   signTx,
 } = require('./actions')
 const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util')
-const { isHex, numericBalance } = require('./util')
+const { isHex, numericBalance, isValidAddress } = require('./util')
 const { conversionUtil } = require('./conversion-util')
 const BigNumber = require('bignumber.js')
 
-const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
-
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
 function mapStateToProps (state) {
@@ -81,51 +79,26 @@ function SendTransactionScreen () {
   this.back = this.back.bind(this)
   this.closeTooltip = this.closeTooltip.bind(this)
   this.onSubmit = this.onSubmit.bind(this)
-  this.recipientDidChange = this.recipientDidChange.bind(this)
   this.setActiveCurrency = this.setActiveCurrency.bind(this)
   this.toggleTooltip = this.toggleTooltip.bind(this)
+
+  this.renderFromInput = this.renderFromInput.bind(this)
+  this.renderToInput = this.renderToInput.bind(this)
+  this.renderAmountInput = this.renderAmountInput.bind(this)
+  this.renderGasInput = this.renderGasInput.bind(this)
+  this.renderMemoInput = this.renderMemoInput.bind(this)
 }
 
-SendTransactionScreen.prototype.render = function () {
+SendTransactionScreen.prototype.renderFromInput = function (from, identities) {
-  this.persistentFormParentId = 'send-tx-form'
+  return h('div.send-screen-input-wrapper', [
-
-  const props = this.props
-  const {
-    // selectedIdentity,
-    // network,
-    // identities,
-    // addressBook,
-    conversionRate,
-  } = props
-
-  const { blockGasLimit, newTx, activeCurrency } = this.state
-  const { gas, gasPrice } = newTx
-  // console.log(`activeCurrency`, activeCurrency)
-  // console.log({ selectedIdentity, identities })
-  // console.log('SendTransactionScreen state:', this.state)
-
-  return (
-
-    h('div.send-screen-wrapper', [
-      // Main Send token Card
-      h('div.send-screen-card', [
-
-        h('img.send-eth-icon', { src: '../images/eth_logo.svg' }),
-
-        h('div.send-screen__title', 'Send'),
-
-        h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'),
-
-        h('div.send-screen-input-wrapper', [
 
     h('div', 'From:'),
 
     h('input.large-input.send-screen-input', {
       list: 'accounts',
       placeholder: 'Account',
-            value: this.state.newTx.from,
+      value: from,
       onChange: (event) => {
-              console.log('event', event.target.value)
         this.setState({
           newTx: {
             ...this.state.newTx,
@@ -136,19 +109,20 @@ SendTransactionScreen.prototype.render = function () {
     }),
 
     h('datalist#accounts', [
-            Object.keys(props.identities).map((key) => {
+      Object.entries(identities).map(([key, { address, name }]) => {
-              const identity = props.identities[key]
         return h('option', {
-                value: identity.address,
+          value: address,
-                label: identity.name,
+          label: name,
-                key: identity.address,
+          key: address,
         })
       }),
     ]),
 
-        ]),
+  ])
+}
 
-        h('div.send-screen-input-wrapper', [
+SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) {
+  return h('div.send-screen-input-wrapper', [
 
     h('div', 'To:'),
 
@@ -156,9 +130,8 @@ SendTransactionScreen.prototype.render = function () {
       name: 'address',
       list: 'addresses',
       placeholder: 'Address',
-            value: this.state.newTx.to,
+      value: to,
       onChange: (event) => {
-              console.log('event', event.target.value)
         this.setState({
           newTx: {
             ...this.state.newTx,
@@ -170,7 +143,7 @@ SendTransactionScreen.prototype.render = function () {
 
     h('datalist#addresses', [
       // Corresponds to the addresses owned.
-            Object.entries(props.identities).map(([key, { address, name }]) => {
+      ...Object.entries(identities).map(([key, { address, name }]) => {
         return h('option', {
           value: address,
           label: name,
@@ -178,7 +151,7 @@ SendTransactionScreen.prototype.render = function () {
         })
       }),
       // Corresponds to previously sent-to addresses.
-            props.addressBook.map(({ address, name }) => {
+      ...addressBook.map(({ address, name }) => {
         return h('option', {
           value: address,
           label: name,
@@ -187,28 +160,11 @@ SendTransactionScreen.prototype.render = function () {
       }),
     ]),
 
-          // h(EnsInput, {
+  ])
-          //   name: 'address',
+}
-          //   placeholder: 'Recipient Address',
-          //   value: this.state.newTx.to,
-          //   onChange: (event) => {
-          //     this.setState({
-          //       newTx: Object.assign(
-          //         this.state.newTx,
-          //         {
-          //           to: event.target.value,
-          //         }
-          //       ),
-          //     })
-          //   },
-          //   network,
-          //   identities,
-          //   addressBook,
-          // }),
 
-        ]),
+SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) {
-
+  return h('div.send-screen-input-wrapper', [
-        h('div.send-screen-input-wrapper', [
 
     h('div.send-screen-amount-labels', [
       h('span', 'Amount'),
@@ -233,9 +189,11 @@ SendTransactionScreen.prototype.render = function () {
       },
     }),
 
-        ]),
+  ])
+}
 
-        h('div.send-screen-input-wrapper', [
+SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) {
+  return h('div.send-screen-input-wrapper', [
     this.state.tooltipIsOpen && h(GasTooltip, {
       className: 'send-tooltip',
       gasPrice,
@@ -276,9 +234,11 @@ SendTransactionScreen.prototype.render = function () {
       ]),
     ]),
 
-        ]),
+  ])
+}
 
-        h('div.send-screen-input-wrapper', [
+SendTransactionScreen.prototype.renderMemoInput = function () {
+  return h('div.send-screen-input-wrapper', [
     h('div', 'Transaction memo (optional)'),
     h('input.large-input.send-screen-input', {
       onChange: () => {
@@ -292,23 +252,46 @@ SendTransactionScreen.prototype.render = function () {
         })
       },
     }),
-        ]),
+  ])
+}
+
+SendTransactionScreen.prototype.render = function () {
+  this.persistentFormParentId = 'send-tx-form'
+
+  const props = this.props
+  const {
+    // selectedIdentity,
+    // network,
+    identities,
+    addressBook,
+    conversionRate,
+  } = props
+
+  const { blockGasLimit, newTx, activeCurrency } = this.state
+  const { gas, gasPrice } = newTx
+
+  return (
+
+    h('div.send-screen-wrapper', [
+      // Main Send token Card
+      h('div.send-screen-card', [
+
+        h('img.send-eth-icon', { src: '../images/eth_logo.svg' }),
+
+        h('div.send-screen__title', 'Send'),
+
+        h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'),
+
+        this.renderFromInput(this.state.newTx.from, identities),
+
+        this.renderToInput(this.state.newTx.to, identities, addressBook),
+
+        this.renderAmountInput(activeCurrency),
+
+        this.renderGasInput(gasPrice, gas, activeCurrency, conversionRate, blockGasLimit),
+
+        this.renderMemoInput(),
 
-        h('div.send-screen-input-wrapper', {}, [
-          h('div', {}, ['Data (optional)']),
-          h('input.large-input.send-screen-input', {
-            onChange: () => {
-              this.setState({
-                newTx: Object.assign(
-                  this.state.newTx,
-                  {
-                    txData: event.target.value,
-                  }
-                ),
-              })
-            },
-          }),
-        ]),
       ]),
 
       // Buttons underneath card
@@ -337,41 +320,21 @@ SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) {
   this.setState({ activeCurrency: newCurrency })
 }
 
-SendTransactionScreen.prototype.navigateToAccounts = function (event) {
-  event.stopPropagation()
-  this.props.dispatch(showAccountsPage())
-}
-
 SendTransactionScreen.prototype.back = function () {
   var address = this.props.address
   this.props.dispatch(backToAccountDetail(address))
 }
 
-SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) {
-  this.setState({
-    recipient: recipient,
-    nickname: nickname,
-  })
-}
-
 SendTransactionScreen.prototype.onSubmit = function (event) {
   event.preventDefault()
+  const { warning } = this.props
   const state = this.state || {}
 
-  // const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '')
   const recipient = state.newTx.to
-
   const nickname = state.nickname || ' '
 
-  // const input = document.querySelector('input[name="amount"]').value
+  // TODO: convert this to hex when created and include it in send
-  // const input = state.newTx.value
+  const txData = state.newTx.memo
-  // const value = util.normalizeEthStringToWei(input)
-
-  // https://consensys.slack.com/archives/G1L7H42BT/p1503439134000169?thread_ts=1503438076.000411&cid=G1L7H42BT
-  // From @kumavis: "not needed for MVP but we will end up adding it again so consider just adding it now"
-  const txData = false
-  // Must replace with memo data.
-  // const txData = document.querySelector('input[name="txData"]').value
 
   let message
 
@@ -385,14 +348,9 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
   //   return this.props.dispatch(actions.displayWarning(message))
   // }
 
-  if ((util.isInvalidChecksumAddress(recipient))) {
+  if (!isValidAddress(recipient) && !recipient) {
-    message = 'Recipient address checksum is invalid.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) {
     message = 'Recipient address is invalid.'
-    return this.props.dispatch(actions.displayWarning(message))
+    return this.props.dispatch(displayWarning(message))
   }
 
   if (txData && !isHex(stripHexPrefix(txData))) {
@@ -424,7 +382,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
 
     value: sendAmount,
 
-    // New: gas will now be specified on this step
     gas: this.state.newTx.gas,
     gasPrice: this.state.newTx.gasPrice,
   }
@@ -432,5 +389,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
   if (recipient) txParams.to = addHexPrefix(recipient)
   if (txData) txParams.data = txData
 
+  if (!warning) {
     this.props.dispatch(signTx(txParams))
+  }
 }