From 818dd2501206a75e3ac19d1d54bc33749b45d081 Mon Sep 17 00:00:00 2001
From: Data Courier <EFAC9730AC9A82639C00E833B54E06@gmail.com>
Date: Sun, 25 Feb 2018 16:20:08 +0000
Subject: [PATCH] feat(ui): integrate AmountInput into wallet UI

Use the new AmountInput component throughout the wallet.

Fix #682
---
 app/components/Contacts/SubmitChannelForm.js | 16 +++++++++-------
 app/components/Form/Pay.js                   | 17 ++++++-----------
 app/components/Form/Request.js               | 10 +++++-----
 app/routes/app/containers/AppContainer.js    |  2 ++
 test/unit/components/Form.spec.js            |  8 +++++---
 test/unit/components/Form/Pay.spec.js        |  8 +++++---
 test/unit/components/Form/Request.spec.js    |  4 +++-
 7 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/app/components/Contacts/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm.js
index 207472c4..d3d27e93 100644
--- a/app/components/Contacts/SubmitChannelForm.js
+++ b/app/components/Contacts/SubmitChannelForm.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
+import AmountInput from 'components/AmountInput'
 import styles from './SubmitChannelForm.scss'
 
 class SubmitChannelForm extends React.Component {
@@ -16,6 +17,8 @@ class SubmitChannelForm extends React.Component {
       updateContactCapacity,
       openChannel,
 
+      ticker,
+
       toggleCurrencyProps: {
         setContactsCurrencyFilters,
         showCurrencyFilters,
@@ -73,14 +76,11 @@ class SubmitChannelForm extends React.Component {
 
         <section className={styles.amount}>
           <div className={styles.input}>
-            <input
-              type="number"
-              min="0"
-              size=""
-              placeholder="0.00000000"
-              value={contactCapacity || ''}
-              onChange={event => updateContactCapacity(event.target.value)}
+            <AmountInput
               id="amount"
+              amount={contactCapacity}
+              currency={ticker.currency}
+              onChangeEvent={updateContactCapacity}
             />
             <div className={styles.currency}>
               <section
@@ -127,6 +127,8 @@ SubmitChannelForm.propTypes = {
   updateContactCapacity: PropTypes.func.isRequired,
   openChannel: PropTypes.func.isRequired,
 
+  ticker: PropTypes.object.isRequired,
+
   toggleCurrencyProps: PropTypes.object.isRequired
 }
 
diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js
index 9ad81b6d..76085c9d 100644
--- a/app/components/Form/Pay.js
+++ b/app/components/Form/Pay.js
@@ -7,6 +7,7 @@ import link from 'icons/link.svg'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import { btc } from 'lib/utils'
+import AmountInput from 'components/AmountInput'
 
 import styles from './Pay.scss'
 
@@ -132,18 +133,12 @@ class Pay extends Component {
               <span />
             </div>
             <div className={styles.bottom}>
-              <input
-                type="number"
-                min="0"
-                ref={input => {
-                  this.amountInput = input
-                }}
-                size=""
-                placeholder="0.00000000"
-                value={currentAmount || ''}
-                onChange={event => setPayAmount(event.target.value)}
-                onBlur={onPayAmountBlur}
+              <AmountInput
                 id="amount"
+                amount={currentAmount}
+                currency={ticker.currency}
+                onChangeEvent={setPayAmount}
+                onBlurEvent={onPayAmountBlur}
                 readOnly={isLn}
               />
               <div className={styles.currency}>
diff --git a/app/components/Form/Request.js b/app/components/Form/Request.js
index ed0128dc..5f61c28a 100644
--- a/app/components/Form/Request.js
+++ b/app/components/Form/Request.js
@@ -6,6 +6,7 @@ import hand from 'icons/hand.svg'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import { btc } from 'lib/utils'
+import AmountInput from 'components/AmountInput'
 import styles from './Request.scss'
 
 const Request = ({
@@ -45,12 +46,11 @@ const Request = ({
             <span />
           </div>
           <div className={styles.bottom}>
-            <input
-              type="number"
-              value={amount || ''}
-              onChange={event => setRequestAmount(event.target.value)}
+            <AmountInput
               id="amount"
-              placeholder="0.00000000"
+              amount={amount}
+              currency={ticker.currency}
+              onChangeEvent={setRequestAmount}
             />
             <div className={styles.currency}>
               <section
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index b00c4806..dd58dd4e 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/app/routes/app/containers/AppContainer.js
@@ -409,6 +409,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
     openChannel: dispatchProps.openChannel,
 
+    ticker: stateProps.ticker,
+
     toggleCurrencyProps: {
       currentCurrencyFilters: stateProps.currentCurrencyFilters,
       currencyName: stateProps.currencyName,
diff --git a/test/unit/components/Form.spec.js b/test/unit/components/Form.spec.js
index f4f8a219..ef2cf33a 100644
--- a/test/unit/components/Form.spec.js
+++ b/test/unit/components/Form.spec.js
@@ -15,10 +15,12 @@ const payFormProps = {
     invoice: {},
     showErrors: {}
   },
-  currency: {},
-  crypto: {},
+  currency: '',
+  crypto: '',
   nodes: [],
-  ticker: {},
+  ticker: {
+    currency: 'btc'
+  },
 
   isOnchain: false,
   isLn: true,
diff --git a/test/unit/components/Form/Pay.spec.js b/test/unit/components/Form/Pay.spec.js
index 8781090f..ef1503e1 100644
--- a/test/unit/components/Form/Pay.spec.js
+++ b/test/unit/components/Form/Pay.spec.js
@@ -13,10 +13,12 @@ const defaultProps = {
     invoice: {},
     showErrors: {}
   },
-  currency: {},
-  crypto: {},
+  currency: '',
+  crypto: '',
   nodes: [],
-  ticker: {},
+  ticker: {
+    currency: 'btc'
+  },
 
   isOnchain: false,
   isLn: true,
diff --git a/test/unit/components/Form/Request.spec.js b/test/unit/components/Form/Request.spec.js
index 1c639701..59da8ee5 100644
--- a/test/unit/components/Form/Request.spec.js
+++ b/test/unit/components/Form/Request.spec.js
@@ -8,7 +8,9 @@ configure({ adapter: new Adapter() })
 
 const defaultProps = {
   requestform: {},
-  ticker: {},
+  ticker: {
+    currency: 'btc'
+  },
 
   currentCurrencyFilters: [],
   showCurrencyFilters: true,