diff --git a/app/routes/app/components/components/Form/components/Pay/Pay.js b/app/routes/app/components/components/Form/components/Pay/Pay.js index 9a5f5c3a..3ca726bd 100644 --- a/app/routes/app/components/components/Form/components/Pay/Pay.js +++ b/app/routes/app/components/components/Form/components/Pay/Pay.js @@ -1,122 +1,130 @@ -import React from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types' import { FaBolt, FaChain } from 'react-icons/lib/fa' import CurrencyIcon from '../../../../../../../components/CurrencyIcon' import { btc } from '../../../../../../../utils' import styles from './Pay.scss' -const Pay = ({ - paymentType, - setPaymentType, - invoiceAmount, - onchainAmount, - setOnchainAmount, - payment_request, - setPaymentRequest, - fetchInvoice, - payInvoice, - currency, - crypto, - close -}) => { - const payClicked = () => { - if (payment_request.length !== 124) { return } - - payInvoice(payment_request) - close() +class Pay extends Component { + componentDidUpdate() { + if (this.props.paymentType !== 'lnd') { this.amountInput.focus() } } - const paymentRequestOnChange = payreq => { - setPaymentRequest(payreq) - if (payreq.length === 124) { - setPaymentType('ln') - fetchInvoice(payreq) - } else if (payreq.length === 42) { - setPaymentType('onchain') - } else { - setPaymentType('') + render() { + const { + paymentType, + setPaymentType, + invoiceAmount, + onchainAmount, + setOnchainAmount, + payment_request, + setPaymentRequest, + fetchInvoice, + payInvoice, + currency, + crypto, + close + } = this.props + const payClicked = () => { + if (payment_request.length !== 124) { return } + + payInvoice(payment_request) + close() } - } - - const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value)) - return ( -
-
- - 1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` } - } - value={paymentType === 'ln' ? calculateAmount(invoiceAmount) : onchainAmount} - onChange={event => setOnchainAmount(event.target.value)} - id='amount' - readOnly={paymentType === 'ln'} - /> -
-
-
- {(() => { - switch(paymentType) { - case 'onchain': - return ( - {`You're about to send ${onchainAmount} on-chain which should take around 10 minutes`} - ) - case 'ln': - return ( - {`You're about to send ${calculateAmount(invoiceAmount)} over the Lightning Network which will be instant`} - ) - default: - return null - } - })()} -
- -
+ const paymentRequestOnChange = payreq => { + setPaymentRequest(payreq) + if (payreq.length === 124) { + setPaymentType('ln') + fetchInvoice(payreq) + } else if (payreq.length === 42) { + setPaymentType('onchain') + } else { + setPaymentType('') + } + } + + const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value)) + + return ( +
+
+ paymentRequestOnChange(event.target.value)} - id='paymentRequest' + ref={(input) => this.amountInput = input} + size='' + style={ + paymentType === 'ln' ? + { width: '75%', fontSize: '85px' } + : + { width: `${onchainAmount.length > 1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` } + } + value={paymentType === 'ln' ? calculateAmount(invoiceAmount) : onchainAmount} + onChange={event => setOnchainAmount(event.target.value)} + id='amount' + readOnly={paymentType === 'ln'} />
-
-
-
- Pay +
+
+ {(() => { + switch(paymentType) { + case 'onchain': + return ( + {`You're about to send ${onchainAmount} on-chain which should take around 10 minutes`} + ) + case 'ln': + return ( + {`You're about to send ${calculateAmount(invoiceAmount)} over the Lightning Network which will be instant`} + ) + default: + return null + } + })()} +
+ +
+ paymentRequestOnChange(event.target.value)} + id='paymentRequest' + /> +
-
-
- ) +
+
+ Pay +
+
+
+ ) + } } Pay.propTypes = {