feat(ui): integrate AmountInput into wallet UI

Use the new AmountInput component throughout the wallet.

Fix #682

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
 }
 

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}>

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

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,

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,

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,

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,