JimmyMow
6 years ago
committed by
GitHub
GitHub
14 changed files with 15 additions and 786 deletions
@ -1,217 +0,0 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { btc } from 'lib/utils' |
|||
import PaperPlane from 'components/Icon/PaperPlane' |
|||
import ChainLink from 'components/Icon/ChainLink' |
|||
import AmountInput from 'components/AmountInput' |
|||
import { Button, Dropdown } from 'components/UI' |
|||
import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' |
|||
import messages from './messages' |
|||
import styles from './Pay.scss' |
|||
|
|||
class Pay extends Component { |
|||
constructor(props) { |
|||
super(props) |
|||
this.paymentRequestInput = React.createRef() |
|||
} |
|||
|
|||
componentDidMount() { |
|||
const { setPayInput, setPayAmount } = this.props |
|||
|
|||
// Clear the form of any previous data.
|
|||
setPayInput('') |
|||
setPayAmount('') |
|||
|
|||
// Focus the payment request input field.
|
|||
this.paymentRequestInput.current.focus() |
|||
} |
|||
|
|||
componentDidUpdate(prevProps) { |
|||
const { |
|||
isLn, |
|||
payform: { payInput }, |
|||
fetchInvoice |
|||
} = this.props |
|||
|
|||
// If LN go retrieve invoice details
|
|||
if (prevProps.payform.payInput !== payInput && isLn) { |
|||
fetchInvoice(payInput) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
payform: { payInput, showErrors, invoice }, |
|||
nodes, |
|||
ticker, |
|||
isOnchain, |
|||
isLn, |
|||
currentAmount, |
|||
fiatAmount, |
|||
payFormIsValid: { errors, isValid }, |
|||
currencyFilters, |
|||
setPayAmount, |
|||
onPayAmountBlur, |
|||
setPayInput, |
|||
onPayInputBlur, |
|||
onPaySubmit, |
|||
setCurrency, |
|||
intl |
|||
} = this.props |
|||
|
|||
const displayNodeName = pubkey => { |
|||
const node = nodes.find(n => n.pub_key === pubkey) |
|||
|
|||
if (node && node.alias.length) { |
|||
return node.alias |
|||
} |
|||
|
|||
return pubkey ? pubkey.substring(0, 10) : '' |
|||
} |
|||
|
|||
const onCurrencyFilterClick = currency => { |
|||
if (!isLn) { |
|||
// change the input amount
|
|||
setPayAmount(btc.convert(ticker.currency, currency, currentAmount)) |
|||
} |
|||
setCurrency(currency) |
|||
} |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<header className={styles.header}> |
|||
<PaperPlane width="2em" height="2em" /> |
|||
<h1> |
|||
<FormattedMessage {...messages.title} /> |
|||
</h1> |
|||
</header> |
|||
|
|||
<div className={styles.content}> |
|||
<section className={styles.destination}> |
|||
<div className={styles.top}> |
|||
<label htmlFor="paymentRequest"> |
|||
<FormattedMessage {...messages.destination} /> |
|||
</label> |
|||
<span |
|||
className={`${styles.description} ${isOnchain || isLn ? styles.active : undefined}`} |
|||
> |
|||
{isOnchain && ( |
|||
<i> |
|||
<ChainLink /> |
|||
<span> |
|||
<FormattedMessage {...messages.onchain_description} /> |
|||
</span> |
|||
</i> |
|||
)} |
|||
{isLn && ( |
|||
<i> |
|||
<span> |
|||
{displayNodeName(invoice.destination)} ({invoice.description}) |
|||
</span> |
|||
</i> |
|||
)} |
|||
</span> |
|||
</div> |
|||
<div className={styles.bottom}> |
|||
<textarea |
|||
type="text" |
|||
placeholder={intl.formatMessage({ ...messages.request_placeholder })} |
|||
value={payInput} |
|||
onChange={event => setPayInput(event.target.value)} |
|||
onBlur={onPayInputBlur} |
|||
id="paymentRequest" |
|||
rows="4" |
|||
ref={this.paymentRequestInput} |
|||
/> |
|||
<section |
|||
className={`${styles.errorMessage} ${ |
|||
showErrors.payInput ? styles.active : undefined |
|||
}`}
|
|||
> |
|||
{showErrors.payInput && <span>{errors.payInput}</span>} |
|||
</section> |
|||
</div> |
|||
</section> |
|||
|
|||
<section className={styles.amount}> |
|||
<div className={styles.top}> |
|||
<label htmlFor="amount"> |
|||
<FormattedMessage {...messages.amount} /> |
|||
</label> |
|||
<span /> |
|||
</div> |
|||
<div className={styles.bottom}> |
|||
<AmountInput |
|||
id="amount" |
|||
amount={currentAmount} |
|||
currency={ticker.currency} |
|||
onChangeEvent={setPayAmount} |
|||
onBlurEvent={onPayAmountBlur} |
|||
readOnly={isLn} |
|||
/> |
|||
<Dropdown |
|||
activeKey={ticker.currency} |
|||
items={currencyFilters} |
|||
onChange={onCurrencyFilterClick} |
|||
ml={2} |
|||
/> |
|||
</div> |
|||
|
|||
<div className={styles.fiatAmount}> |
|||
{'≈ '} |
|||
<FormattedNumber |
|||
currency={ticker.fiatTicker} |
|||
style="currency" |
|||
value={fiatAmount || 0} |
|||
/> |
|||
</div> |
|||
|
|||
<section |
|||
className={`${styles.errorMessage} ${styles.amount} ${ |
|||
showErrors.amount ? styles.active : undefined |
|||
}`}
|
|||
> |
|||
{showErrors.amount && <span>{errors.amount}</span>} |
|||
</section> |
|||
</section> |
|||
|
|||
<section className={styles.submit}> |
|||
<Button disabled={!isValid} onClick={onPaySubmit} width={200}> |
|||
<FormattedMessage {...messages.pay} /> |
|||
</Button> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Pay.propTypes = { |
|||
payform: PropTypes.shape({ |
|||
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
|||
payInput: PropTypes.string.isRequired, |
|||
invoice: PropTypes.object.isRequired, |
|||
showErrors: PropTypes.object.isRequired |
|||
}).isRequired, |
|||
currencyName: PropTypes.string.isRequired, |
|||
isOnchain: PropTypes.bool.isRequired, |
|||
isLn: PropTypes.bool.isRequired, |
|||
currentAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
|||
fiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
|||
payFormIsValid: PropTypes.shape({ |
|||
errors: PropTypes.object, |
|||
isValid: PropTypes.bool |
|||
}).isRequired, |
|||
setPayAmount: PropTypes.func.isRequired, |
|||
onPayAmountBlur: PropTypes.func.isRequired, |
|||
setPayInput: PropTypes.func.isRequired, |
|||
onPayInputBlur: PropTypes.func.isRequired, |
|||
fetchInvoice: PropTypes.func.isRequired, |
|||
onPaySubmit: PropTypes.func.isRequired, |
|||
setCurrency: PropTypes.func.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
nodes: PropTypes.array.isRequired, |
|||
currencyFilters: PropTypes.array.isRequired |
|||
} |
|||
|
|||
export default injectIntl(Pay) |
|||
@ -1,122 +0,0 @@ |
|||
@import 'styles/variables.scss'; |
|||
|
|||
.container { |
|||
margin: 0 auto; |
|||
width: 500px; |
|||
} |
|||
|
|||
.header { |
|||
text-align: center; |
|||
padding-bottom: 20px; |
|||
color: var(--primaryText); |
|||
border-bottom: 1px solid $spaceborder; |
|||
|
|||
h1 { |
|||
font-size: 22px; |
|||
font-weight: 100; |
|||
margin-top: 10px; |
|||
letter-spacing: 1.5px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 40px; |
|||
color: var(--primaryText); |
|||
|
|||
.destination { |
|||
margin-bottom: 10px; |
|||
|
|||
.description { |
|||
font-size: 12px; |
|||
line-height: 14px; |
|||
padding: 0 15px; |
|||
min-height: 14px; |
|||
|
|||
&.active { |
|||
background: var(--lightBackground); |
|||
border-radius: 10px; |
|||
min-height: 0; |
|||
} |
|||
} |
|||
|
|||
svg { |
|||
width: 10px; |
|||
height: 10px; |
|||
line-height: 14px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.amount .bottom { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
input { |
|||
font-size: 20px; |
|||
max-width: 150px; |
|||
border: 1px solid #404040; |
|||
border-radius: 4px; |
|||
padding: 15px; |
|||
} |
|||
} |
|||
|
|||
.top { |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
label { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
input, |
|||
textarea { |
|||
background: transparent; |
|||
outline: none; |
|||
border: 1px solid #404040; |
|||
color: var(--lightningOrange); |
|||
-webkit-text-fill-color: var(--primaryText); |
|||
font-size: 12px; |
|||
width: 100%; |
|||
font-weight: 200; |
|||
padding: 10px; |
|||
} |
|||
|
|||
input::-webkit-input-placeholder, |
|||
textarea::-webkit-input-placeholder { |
|||
text-shadow: none; |
|||
-webkit-text-fill-color: initial; |
|||
} |
|||
} |
|||
|
|||
.fiatAmount { |
|||
margin-top: 10px; |
|||
opacity: 0.5; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.submit { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.errorMessage { |
|||
color: var(--superRed); |
|||
font-size: 12px; |
|||
min-height: 20px; |
|||
opacity: 0; |
|||
transition: all 0.25s ease; |
|||
|
|||
&.amount { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
&.active { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import Pay from './Pay' |
|||
|
|||
export default Pay |
|||
@ -1,11 +0,0 @@ |
|||
import { defineMessages } from 'react-intl' |
|||
|
|||
/* eslint-disable max-len */ |
|||
export default defineMessages({ |
|||
title: 'Make Payment', |
|||
destination: 'Destination', |
|||
amount: 'Amount', |
|||
request_placeholder: 'Paste payment request or bitcoin address here', |
|||
pay: 'Pay', |
|||
onchain_description: 'On-Chain (~10 minutes)' |
|||
}) |
|||
@ -1,268 +0,0 @@ |
|||
import { createSelector } from 'reselect' |
|||
import bitcoin from 'bitcoinjs-lib' |
|||
import { btc, bech32 } from 'lib/utils' |
|||
import { setFormType } from './form' |
|||
import { tickerSelectors } from './ticker' |
|||
import { infoSelectors } from './info' |
|||
|
|||
// Initial State
|
|||
const initialState = { |
|||
amount: '', |
|||
payInput: '', |
|||
|
|||
invoice: { |
|||
payreq: '', |
|||
r_hash: '', |
|||
amount: '0', |
|||
description: '', |
|||
destination: '' |
|||
}, |
|||
|
|||
showErrors: { |
|||
amount: false, |
|||
payInput: false |
|||
} |
|||
} |
|||
|
|||
// Constants
|
|||
// ------------------------------------
|
|||
export const SET_PAY_AMOUNT = 'SET_PAY_AMOUNT' |
|||
export const SET_PAY_INPUT = 'SET_PAY_INPUT' |
|||
export const SET_PAY_INVOICE = 'SET_PAY_INVOICE' |
|||
export const UPDATE_PAY_ERRORS = 'UPDATE_PAY_ERRORS' |
|||
export const RESET_FORM = 'RESET_FORM' |
|||
|
|||
// ------------------------------------
|
|||
// Actions
|
|||
// ------------------------------------
|
|||
export function setPayAmount(amount) { |
|||
return { |
|||
type: SET_PAY_AMOUNT, |
|||
amount |
|||
} |
|||
} |
|||
|
|||
export function setPayInput(payInput) { |
|||
return { |
|||
type: SET_PAY_INPUT, |
|||
payInput |
|||
} |
|||
} |
|||
|
|||
export function setPayInvoice(invoice) { |
|||
return { |
|||
type: SET_PAY_INVOICE, |
|||
invoice |
|||
} |
|||
} |
|||
|
|||
export function updatePayErrors(errorsObject) { |
|||
return { |
|||
type: UPDATE_PAY_ERRORS, |
|||
errorsObject |
|||
} |
|||
} |
|||
|
|||
export const lightningPaymentUri = (event, { payreq }) => dispatch => { |
|||
// Open pay form
|
|||
dispatch(setFormType('PAY_FORM')) |
|||
// Set payreq
|
|||
dispatch(setPayInput(payreq)) |
|||
} |
|||
|
|||
export function resetPayForm() { |
|||
return { |
|||
type: RESET_FORM |
|||
} |
|||
} |
|||
|
|||
// ------------------------------------
|
|||
// Action Handlers
|
|||
// ------------------------------------
|
|||
const ACTION_HANDLERS = { |
|||
[SET_PAY_AMOUNT]: (state, { amount }) => ({ |
|||
...state, |
|||
amount, |
|||
showErrors: Object.assign(state.showErrors, { amount: false }) |
|||
}), |
|||
[SET_PAY_INPUT]: (state, { payInput }) => ({ |
|||
...state, |
|||
payInput, |
|||
showErrors: Object.assign(state.showErrors, { payInput: false }) |
|||
}), |
|||
[SET_PAY_INVOICE]: (state, { invoice }) => ({ |
|||
...state, |
|||
invoice, |
|||
showErrors: Object.assign(state.showErrors, { amount: false }) |
|||
}), |
|||
|
|||
[UPDATE_PAY_ERRORS]: (state, { errorsObject }) => ({ |
|||
...state, |
|||
showErrors: Object.assign(state.showErrors, errorsObject) |
|||
}), |
|||
|
|||
[RESET_FORM]: () => initialState |
|||
} |
|||
|
|||
// ------------------------------------
|
|||
// Selector
|
|||
// ------------------------------------
|
|||
const payFormSelectors = {} |
|||
const payAmountSelector = state => state.payform.amount |
|||
const payInputSelector = state => state.payform.payInput |
|||
const payInvoiceSelector = state => state.payform.invoice |
|||
|
|||
// transaction
|
|||
const sendingTransactionSelector = state => state.transaction.sendingTransaction |
|||
|
|||
// payment
|
|||
const sendingPaymentSelector = state => state.payment.sendingPayment |
|||
|
|||
// ticker
|
|||
const currencySelector = state => state.ticker.currency |
|||
const fiatTickerSelector = state => state.ticker.fiatTicker |
|||
|
|||
payFormSelectors.isOnchain = createSelector( |
|||
payInputSelector, |
|||
infoSelectors.networkSelector, |
|||
(input, network) => { |
|||
try { |
|||
bitcoin.address.toOutputScript(input, network.bitcoinJsNetwork) |
|||
return true |
|||
} catch (e) { |
|||
return false |
|||
} |
|||
} |
|||
) |
|||
|
|||
payFormSelectors.isLn = createSelector(payInputSelector, input => { |
|||
if (!input.startsWith('ln')) { |
|||
return false |
|||
} |
|||
|
|||
try { |
|||
bech32.decode(input) |
|||
return true |
|||
} catch (e) { |
|||
return false |
|||
} |
|||
}) |
|||
|
|||
payFormSelectors.currentAmount = createSelector( |
|||
payFormSelectors.isLn, |
|||
payAmountSelector, |
|||
payInvoiceSelector, |
|||
currencySelector, |
|||
(isLn, amount, invoice, currency) => { |
|||
if (isLn) { |
|||
switch (currency) { |
|||
case 'btc': |
|||
return btc.satoshisToBtc(invoice.num_satoshis || 0) |
|||
case 'bits': |
|||
return btc.satoshisToBits(invoice.num_satoshis || 0) |
|||
case 'sats': |
|||
return invoice.num_satoshis |
|||
default: |
|||
return invoice.num_satoshis |
|||
} |
|||
} |
|||
|
|||
return amount |
|||
} |
|||
) |
|||
|
|||
payFormSelectors.fiatAmount = createSelector( |
|||
payFormSelectors.isLn, |
|||
payAmountSelector, |
|||
payInvoiceSelector, |
|||
currencySelector, |
|||
tickerSelectors.currentTicker, |
|||
fiatTickerSelector, |
|||
(isLn, amount, invoice, currency, currentTicker, fiatTicker) => { |
|||
if (!currentTicker || !currentTicker[fiatTicker].last) { |
|||
return false |
|||
} |
|||
|
|||
if (isLn) { |
|||
return btc.satoshisToFiat(invoice.num_satoshis || 0, currentTicker[fiatTicker].last) |
|||
} |
|||
|
|||
return btc.convert(currency, 'fiat', amount, currentTicker[fiatTicker].last) |
|||
} |
|||
) |
|||
|
|||
payFormSelectors.payInputMin = createSelector(currencySelector, currency => { |
|||
switch (currency) { |
|||
case 'btc': |
|||
return '0.00000001' |
|||
case 'bits': |
|||
return '0.01' |
|||
case 'sats': |
|||
return '1' |
|||
default: |
|||
return '0' |
|||
} |
|||
}) |
|||
|
|||
payFormSelectors.inputCaption = createSelector( |
|||
payFormSelectors.isOnchain, |
|||
payFormSelectors.isLn, |
|||
payFormSelectors.currentAmount, |
|||
currencySelector, |
|||
(isOnchain, isLn, amount, currency) => { |
|||
if (!isOnchain && !isLn) { |
|||
return '' |
|||
} |
|||
|
|||
if (isOnchain) { |
|||
return `You're about to send ${amount} ${currency.toUpperCase()} on-chain which should take around 10 minutes` |
|||
} |
|||
|
|||
if (isLn) { |
|||
return `You're about to send ${amount} ${currency.toUpperCase()} over the Lightning Network which will be instant` |
|||
} |
|||
|
|||
return '' |
|||
} |
|||
) |
|||
|
|||
payFormSelectors.showPayLoadingScreen = createSelector( |
|||
sendingTransactionSelector, |
|||
sendingPaymentSelector, |
|||
(sendingTransaction, sendingPayment) => sendingTransaction || sendingPayment |
|||
) |
|||
|
|||
payFormSelectors.payFormIsValid = createSelector( |
|||
payFormSelectors.isOnchain, |
|||
payFormSelectors.isLn, |
|||
payAmountSelector, |
|||
(isOnchain, isLn, amount) => { |
|||
const errors = {} |
|||
|
|||
if (!isLn && amount <= 0) { |
|||
errors.amount = 'Amount must be more than 0' |
|||
} |
|||
|
|||
if (!isOnchain && !isLn) { |
|||
errors.payInput = 'Must be a valid BTC address or Lightning Network request' |
|||
} |
|||
|
|||
return { |
|||
errors, |
|||
amountIsValid: !errors.amount, |
|||
payInputIsValid: !errors.payInput, |
|||
isValid: Object.keys(errors).length === 0 |
|||
} |
|||
} |
|||
) |
|||
|
|||
export { payFormSelectors } |
|||
|
|||
// ------------------------------------
|
|||
// Reducer
|
|||
// ------------------------------------
|
|||
export default function payFormReducer(state = initialState, action) { |
|||
const handler = ACTION_HANDLERS[action.type] |
|||
|
|||
return handler ? handler(state, action) : state |
|||
} |
|||
Loading…
Reference in new issue