Jack Mallers
7 years ago
13 changed files with 345 additions and 64 deletions
@ -0,0 +1,156 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
import Isvg from 'react-inlinesvg' |
|||
import paperPlane from 'icons/paper_plane.svg' |
|||
|
|||
import { FaBolt, FaChain, FaAngleDown } from 'react-icons/lib/fa' |
|||
import LoadingBolt from 'components/LoadingBolt' |
|||
import CurrencyIcon from 'components/CurrencyIcon' |
|||
|
|||
import styles from './Pay.scss' |
|||
|
|||
class Pay extends Component { |
|||
componentDidUpdate(prevProps) { |
|||
const { |
|||
isOnchain, isLn, payform: { payInput }, fetchInvoice |
|||
} = this.props |
|||
|
|||
// If on-chain, focus on amount to let user know it's editable
|
|||
if (isOnchain) { this.amountInput.focus() } |
|||
|
|||
// If LN go retrieve invoice details
|
|||
if ((prevProps.payform.payInput !== payInput) && isLn) { |
|||
fetchInvoice(payInput) |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
payform: { amount, payInput, showErrors }, |
|||
currency, |
|||
crypto, |
|||
|
|||
isOnchain, |
|||
isLn, |
|||
currentAmount, |
|||
usdAmount, |
|||
inputCaption, |
|||
showPayLoadingScreen, |
|||
payFormIsValid: { errors, isValid }, |
|||
|
|||
setPayAmount, |
|||
onPayAmountBlur, |
|||
|
|||
setPayInput, |
|||
onPayInputBlur, |
|||
|
|||
onPaySubmit |
|||
} = this.props |
|||
|
|||
console.log('usdAmount: ', usdAmount) |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
{showPayLoadingScreen && <LoadingBolt />} |
|||
<header className={styles.header}> |
|||
<Isvg src={paperPlane} /> |
|||
<h1>Make Payment</h1> |
|||
</header> |
|||
|
|||
<div className={styles.content}> |
|||
<section className={styles.destination}> |
|||
<div className={styles.top}> |
|||
<label htmlFor='destination'>Destination</label> |
|||
<span> |
|||
</span> |
|||
</div> |
|||
<div className={styles.bottom}> |
|||
<textarea |
|||
type='text' |
|||
placeholder='Payment request or bitcoin address' |
|||
value={payInput} |
|||
onChange={event => setPayInput(event.target.value)} |
|||
onBlur={onPayInputBlur} |
|||
id='destination' |
|||
rows='4' |
|||
/> |
|||
</div> |
|||
</section> |
|||
|
|||
<section className={styles.amount}> |
|||
<div className={styles.top}> |
|||
<label>Amount</label> |
|||
<span></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} |
|||
id='amount' |
|||
readOnly={isLn} |
|||
/> |
|||
<div className={styles.currency}> |
|||
<section className={styles.currentCurrency}> |
|||
<span>BTC</span><span><FaAngleDown /></span> |
|||
</section> |
|||
<ul> |
|||
<li>Bits</li> |
|||
<li>Satoshis</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className={styles.usdAmount}> |
|||
{`≈ ${usdAmount} USD`} |
|||
</div> |
|||
</section> |
|||
|
|||
<section className={styles.submit}> |
|||
<div className={`${styles.button} ${isValid && styles.active}`} onClick={onPaySubmit}>Pay</div> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
Pay.propTypes = { |
|||
payform: PropTypes.shape({ |
|||
amount: PropTypes.string.isRequired, |
|||
payInput: PropTypes.string.isRequired, |
|||
showErrors: PropTypes.object.isRequired |
|||
}).isRequired, |
|||
currency: PropTypes.string.isRequired, |
|||
crypto: PropTypes.string.isRequired, |
|||
|
|||
isOnchain: PropTypes.bool.isRequired, |
|||
isLn: PropTypes.bool.isRequired, |
|||
currentAmount: PropTypes.oneOfType([ |
|||
PropTypes.string, |
|||
PropTypes.number |
|||
]), |
|||
inputCaption: PropTypes.string.isRequired, |
|||
showPayLoadingScreen: PropTypes.bool.isRequired, |
|||
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 |
|||
} |
|||
|
|||
export default Pay |
|||
@ -0,0 +1,123 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.container { |
|||
padding: 0 40px; |
|||
font-family: Roboto; |
|||
} |
|||
|
|||
.header { |
|||
text-align: center; |
|||
padding-bottom: 20px; |
|||
color: $white; |
|||
border-bottom: 1px solid $spaceborder; |
|||
|
|||
h1 { |
|||
font-size: 22px; |
|||
font-weight: 100; |
|||
margin-top: 10px; |
|||
letter-spacing: 1.5px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 50px; |
|||
color: $white; |
|||
|
|||
.destination { |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
.amount .bottom { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
input { |
|||
font-size: 40px; |
|||
max-width: 250px; |
|||
} |
|||
} |
|||
|
|||
.top { |
|||
margin-bottom: 30px; |
|||
|
|||
label { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
input, textarea { |
|||
background: transparent; |
|||
outline: none; |
|||
border: 0; |
|||
color: $gold; |
|||
-webkit-text-fill-color: $white; |
|||
font-size: 12px; |
|||
width: 100%; |
|||
font-weight: 200; |
|||
} |
|||
|
|||
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { |
|||
text-shadow: none; |
|||
-webkit-text-fill-color: initial; |
|||
} |
|||
} |
|||
|
|||
.currency { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
.currentCurrency { |
|||
cursor: pointer; |
|||
transition: 0.25s all; |
|||
|
|||
&:hover { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
span { |
|||
font-size: 14px; |
|||
|
|||
&:nth-child(1) { |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
ul { |
|||
visibility: hidden; |
|||
position: absolute; |
|||
} |
|||
} |
|||
|
|||
.usdAmount { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.submit { |
|||
margin-top: 50px; |
|||
text-align: center; |
|||
|
|||
.button { |
|||
width: 235px; |
|||
margin: 0 auto; |
|||
padding: 20px 10px; |
|||
background: #31343f; |
|||
opacity: 0.5; |
|||
cursor: pointer; |
|||
transition: 0.25s all; |
|||
|
|||
&.active { |
|||
background: $gold; |
|||
opacity: 1.0; |
|||
|
|||
&:hover { |
|||
background: darken($gold, 5%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 371 B |
|
After Width: | Height: | Size: 897 B |
|
After Width: | Height: | Size: 299 B |
|
After Width: | Height: | Size: 282 B |
Loading…
Reference in new issue