Breaks send-v2 down into renderable functions.

ui/app/send-v2.js

@@ -28,6 +28,9 @@ function SendTransactionScreen () {
     memo: '',
     dropdownOpen: false,
   }
+
+  this.handleToChange = this.handleToChange.bind(this)
+  this.handleAmountChange = this.handleAmountChange.bind(this)
 }
 
 SendTransactionScreen.prototype.componentWillMount = function () {
@@ -97,34 +100,8 @@ SendTransactionScreen.prototype.renderCopy = function () {
   ])
 }
 
-SendTransactionScreen.prototype.render = function () {
-  const {
-    accounts,
-    conversionRate,
-    tokenToUSDRate,
-    selectedToken,
-    showCustomizeGasModal,
-    selectedAccount,
-    setSelectedAddress,
-    primaryCurrency = 'ETH',
-    gasLimit,
-    gasPrice,
-  } = this.props
-
-  const {
-    dropdownOpen,
-    to,
-    amount,
-    // gasLimit,
-    // gasPrice,
-    memo,
-  } = this.state
-
-  const amountConversionRate = selectedToken ? tokenToUSDRate : conversionRate
-
-  return (
-
-    h('div.send-v2__container', [
+SendTransactionScreen.prototype.renderHeader = function () {
+  return h('div', [
     h('div.send-v2__header', {}, [
 
       this.renderHeaderIcon(),
@@ -140,10 +117,20 @@ SendTransactionScreen.prototype.render = function () {
     this.renderTitle(),
 
     this.renderCopy(),
+  ])
+}
 
-      h('div.send-v2__form', {}, [
+SendTransactionScreen.prototype.renderFromRow = function () {
+  const {
+    accounts,
+    conversionRate,
+    selectedAccount,
+    setSelectedAddress,
+  } = this.props
 
-        h('div.send-v2__form-row', [
+  const { dropdownOpen } = this.state
+
+  return h('div.send-v2__form-row', [
 
     h('div.send-v2__form-label', 'From:'),
 
@@ -157,26 +144,57 @@ SendTransactionScreen.prototype.render = function () {
       conversionRate,
     }),
 
-        ]),
+  ])
+}
 
-        h('div.send-v2__form-row', [
+SendTransactionScreen.prototype.handleToChange = function (event) {
+  const to = event.target.value
+
+  this.setState({
+    ...this.state,
+    to,
+  })
+}
+
+SendTransactionScreen.prototype.renderToRow = function () {
+  const { accounts } = this.props
+  const { to } = this.state
+
+  return h('div.send-v2__form-row', [
 
     h('div.send-v2__form-label', 'To:'),
 
     h(ToAutoComplete, {
       to,
       accounts,
-            onChange: (event) => {
-              this.setState({
-                ...this.state,
-                to: event.target.value,
-              })
-            },
+      onChange: this.handleToChange,
     }),
 
-        ]),
+  ])
+}
 
-        h('div.send-v2__form-row', [
+SendTransactionScreen.prototype.handleAmountChange = function (value) {
+  const amount = value
+
+  this.setState({
+    ...this.state,
+    amount,
+  })
+}
+
+SendTransactionScreen.prototype.renderAmountRow = function () {
+  const {
+    conversionRate,
+    tokenToUSDRate,
+    selectedToken,
+    primaryCurrency = 'ETH',
+  } = this.props
+
+  const { amount } = this.state
+
+  const amountConversionRate = selectedToken ? tokenToUSDRate : conversionRate
+
+  return h('div.send-v2__form-row', [
 
     h('div.send-v2__form-label', 'Amount:'),
 
@@ -186,17 +204,21 @@ SendTransactionScreen.prototype.render = function () {
       value: amount,
       conversionRate: amountConversionRate,
       convertedPrefix: '$',
-            handleChange: (value) => {
-              this.setState({
-                ...this.state,
-                amount: value,
-              })
-            }
+      handleChange: this.handleAmountChange
     }),        
 
-        ]),
+  ])
+}
 
-        h('div.send-v2__form-row', [
+SendTransactionScreen.prototype.renderGasRow = function () {
+  const {
+    conversionRate,
+    showCustomizeGasModal,
+    gasLimit,
+    gasPrice,
+  } = this.props
+
+  return h('div.send-v2__form-row', [
 
     h('div.send-v2__form-label', 'Gas fee:'),
 
@@ -213,9 +235,13 @@ SendTransactionScreen.prototype.render = function () {
       h('i.fa.fa-sliders.send-v2__sliders-icon'),
     ])          
 
-        ]),
+  ])
+}
 
-        h('div.send-v2__form-row', [
+SendTransactionScreen.prototype.renderMemoRow = function () {
+  const { memo } = this.state
+
+  return h('div.send-v2__form-row', [
 
     h('div.send-v2__form-label', 'Transaction Memo:'),
 
@@ -229,17 +255,48 @@ SendTransactionScreen.prototype.render = function () {
       },
     }),
 
-        ]),
+  ])
+}
 
-      ]),
+SendTransactionScreen.prototype.renderForm = function () {
+  return h('div.send-v2__form', {}, [
 
-      // Buttons underneath card
-      h('div.send-v2__footer', [
-        h('button.send-v2__cancel-btn', {}, 'Cancel'),
+    this.renderFromRow(),
+
+    this.renderToRow(),
+
+    this.renderAmountRow(),
+
+    this.renderGasRow(),
+
+    this.renderMemoRow(),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderFooter = function () {
+  const { goHome } = this.props
+
+  return h('div.send-v2__footer', [
+    h('button.send-v2__cancel-btn', {
+      onClick: goHome,
+    }, 'Cancel'),
     h('button.send-v2__next-btn', {
       onClick: event => this.onSubmit(event),
     }, 'Next'),
-      ]),
+  ])
+}
+
+SendTransactionScreen.prototype.render = function () {
+  return (
+
+    h('div.send-v2__container', [
+
+      this.renderHeader(),
+
+      this.renderForm(),
+
+      this.renderFooter(),
     ])
 
   )