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,