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,149 +100,203 @@ SendTransactionScreen.prototype.renderCopy = function () {
   ])
 }
 
-SendTransactionScreen.prototype.render = function () {
+SendTransactionScreen.prototype.renderHeader = function () {
+  return h('div', [
+    h('div.send-v2__header', {}, [
+
+      this.renderHeaderIcon(),
+
+      h('div.send-v2__arrow-background', [
+        h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
+      ]),
+
+      h('div.send-v2__header-tip'),
+
+    ]),
+
+    this.renderTitle(),
+
+    this.renderCopy(),
+  ])
+}
+
+SendTransactionScreen.prototype.renderFromRow = function () {
   const {
     accounts,
     conversionRate,
-    tokenToUSDRate,
-    selectedToken,
-    showCustomizeGasModal,
     selectedAccount,
     setSelectedAddress,
+  } = this.props
+
+  const { dropdownOpen } = this.state
+
+  return h('div.send-v2__form-row', [
+
+    h('div.send-v2__form-label', 'From:'),
+
+    h(FromDropdown, {
+      dropdownOpen,
+      accounts,
+      selectedAccount,
+      onSelect: address => setSelectedAddress(address),
+      openDropdown: () => this.setState({ dropdownOpen: true }),
+      closeDropdown: () => this.setState({ dropdownOpen: false }),
+      conversionRate,
+    }),
+
+  ])
+}
+
+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: this.handleToChange,
+    }),
+
+  ])
+}
+
+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:'),
+
+    h(CurrencyDisplay, {
+      primaryCurrency,
+      convertedCurrency: 'USD',
+      value: amount,
+      conversionRate: amountConversionRate,
+      convertedPrefix: '$',
+      handleChange: this.handleAmountChange
+    }),        
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderGasRow = function () {
+  const {
+    conversionRate,
+    showCustomizeGasModal,
     gasLimit,
     gasPrice,
   } = this.props
 
-  const {
+  return h('div.send-v2__form-row', [
-    dropdownOpen,
-    to,
-    amount,
-    // gasLimit,
-    // gasPrice,
-    memo,
-  } = this.state
 
-  const amountConversionRate = selectedToken ? tokenToUSDRate : conversionRate
+    h('div.send-v2__form-label', 'Gas fee:'),
 
+    h(GasFeeDisplay, {
+      gasLimit,
+      gasPrice,
+      conversionRate,
+      onClick: showCustomizeGasModal,
+    }),
+
+    h('div.send-v2__sliders-icon-container', {
+      onClick: showCustomizeGasModal,
+    }, [
+      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+    ])          
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderMemoRow = function () {
+  const { memo } = this.state
+
+  return h('div.send-v2__form-row', [
+
+    h('div.send-v2__form-label', 'Transaction Memo:'),
+
+    h(MemoTextArea, {
+      memo,
+      onChange: (event) => {
+        this.setState({
+          ...this.state,
+          memo: event.target.value,
+        })
+      },
+    }),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderForm = function () {
+  return h('div.send-v2__form', {}, [
+
+    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', [
-      h('div.send-v2__header', {}, [
 
-        this.renderHeaderIcon(),
+      this.renderHeader(),
 
-        h('div.send-v2__arrow-background', [
+      this.renderForm(),
-          h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
-        ]),
 
-        h('div.send-v2__header-tip'),
+      this.renderFooter(),
-
-      ]),
-
-      this.renderTitle(),
-
-      this.renderCopy(),
-
-      h('div.send-v2__form', {}, [
-
-        h('div.send-v2__form-row', [
-
-          h('div.send-v2__form-label', 'From:'),
-
-          h(FromDropdown, {
-            dropdownOpen,
-            accounts,
-            selectedAccount,
-            onSelect: address => setSelectedAddress(address),
-            openDropdown: () => this.setState({ dropdownOpen: true }),
-            closeDropdown: () => this.setState({ dropdownOpen: false }),
-            conversionRate,
-          }),
-
-        ]),
-
-        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,
-              })
-            },
-          }),
-
-        ]),
-
-        h('div.send-v2__form-row', [
-
-          h('div.send-v2__form-label', 'Amount:'),
-
-          h(CurrencyDisplay, {
-            primaryCurrency,
-            convertedCurrency: 'USD',
-            value: amount,
-            conversionRate: amountConversionRate,
-            convertedPrefix: '$',
-            handleChange: (value) => {
-              this.setState({
-                ...this.state,
-                amount: value,
-              })
-            }
-          }),          
-
-        ]),
-
-        h('div.send-v2__form-row', [
-
-          h('div.send-v2__form-label', 'Gas fee:'),
-
-          h(GasFeeDisplay, {
-            gasLimit,
-            gasPrice,
-            conversionRate,
-            onClick: showCustomizeGasModal,
-          }),
-
-          h('div.send-v2__sliders-icon-container', {
-            onClick: showCustomizeGasModal,
-          }, [
-            h('i.fa.fa-sliders.send-v2__sliders-icon'),
-          ])          
-
-        ]),
-
-        h('div.send-v2__form-row', [
-
-          h('div.send-v2__form-label', 'Transaction Memo:'),
-
-          h(MemoTextArea, {
-            memo,
-            onChange: (event) => {
-              this.setState({
-                ...this.state,
-                memo: event.target.value,
-              })
-            },
-          }),
-
-        ]),
-
-      ]),
-
-      // Buttons underneath card
-      h('div.send-v2__footer', [
-        h('button.send-v2__cancel-btn', {}, 'Cancel'),
-        h('button.send-v2__next-btn', {
-          onClick: event => this.onSubmit(event),
-        }, 'Next'),
-      ]),
     ])
 
   )