Jack Mallers
7 years ago
4 changed files with 0 additions and 485 deletions
@ -1,152 +0,0 @@ |
|||||
import React, { Component } from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
|
|
||||
import { FaBolt, FaChain } from 'react-icons/lib/fa' |
|
||||
import LoadingBolt from 'components/LoadingBolt' |
|
||||
import CurrencyIcon from 'components/CurrencyIcon' |
|
||||
|
|
||||
import styles from './PayForm.scss' |
|
||||
|
|
||||
class PayForm 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, |
|
||||
inputCaption, |
|
||||
showPayLoadingScreen, |
|
||||
payFormIsValid: { errors, isValid }, |
|
||||
|
|
||||
setPayAmount, |
|
||||
onPayAmountBlur, |
|
||||
|
|
||||
setPayInput, |
|
||||
onPayInputBlur, |
|
||||
|
|
||||
onPaySubmit |
|
||||
} = this.props |
|
||||
|
|
||||
return ( |
|
||||
<div className={styles.container}> |
|
||||
{showPayLoadingScreen && <LoadingBolt />} |
|
||||
|
|
||||
<section className={`${styles.amountContainer} ${isLn ? styles.ln : ''} ${showErrors.amount && styles.error}`}> |
|
||||
<label htmlFor='amount'> |
|
||||
<CurrencyIcon currency={currency} crypto={crypto} /> |
|
||||
</label> |
|
||||
<input |
|
||||
type='number' |
|
||||
min='0' |
|
||||
ref={(input) => { this.amountInput = input }} |
|
||||
size='' |
|
||||
style={ |
|
||||
isLn ? |
|
||||
{ width: '75%', fontSize: '85px' } |
|
||||
: |
|
||||
{ width: `${amount.length > 1 ? (amount.length * 20) - 5 : 35}%`, fontSize: `${190 - (amount.length ** 2)}px` } |
|
||||
} |
|
||||
value={currentAmount} |
|
||||
onChange={event => setPayAmount(event.target.value)} |
|
||||
onBlur={onPayAmountBlur} |
|
||||
id='amount' |
|
||||
readOnly={isLn} |
|
||||
/> |
|
||||
</section> |
|
||||
<section className={`${styles.errorMessage} ${showErrors.amount && styles.active}`}> |
|
||||
{showErrors.amount && |
|
||||
<span>{errors.amount}</span> |
|
||||
} |
|
||||
</section> |
|
||||
<div className={styles.inputContainer}> |
|
||||
<div className={styles.info}> |
|
||||
<span>{inputCaption}</span> |
|
||||
</div> |
|
||||
<aside className={styles.paymentIcon}> |
|
||||
{isOnchain && |
|
||||
<i> |
|
||||
<span>on-chain</span> |
|
||||
<FaChain /> |
|
||||
</i> |
|
||||
} |
|
||||
{isLn && |
|
||||
<i> |
|
||||
<span>lightning network</span> |
|
||||
<FaBolt /> |
|
||||
</i> |
|
||||
} |
|
||||
</aside> |
|
||||
<section className={`${styles.input} ${showErrors.payInput && styles.error}`}> |
|
||||
<input |
|
||||
type='text' |
|
||||
placeholder='Payment request or bitcoin address' |
|
||||
value={payInput} |
|
||||
onChange={event => setPayInput(event.target.value)} |
|
||||
onBlur={onPayInputBlur} |
|
||||
id='paymentRequest' |
|
||||
/> |
|
||||
</section> |
|
||||
<section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}> |
|
||||
{showErrors.payInput && |
|
||||
<span>{errors.payInput}</span> |
|
||||
} |
|
||||
</section> |
|
||||
</div> |
|
||||
<section className={styles.buttonGroup}> |
|
||||
<div className={`buttonPrimary ${styles.button} ${isValid && styles.active}`} onClick={onPaySubmit}>Pay</div> |
|
||||
</section> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
PayForm.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 |
|
||||
]).isRequired, |
|
||||
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 PayForm |
|
||||
@ -1,166 +0,0 @@ |
|||||
@import '../../variables.scss'; |
|
||||
|
|
||||
.container { |
|
||||
margin: 0 auto; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 75vh; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.amountContainer { |
|
||||
position: relative; |
|
||||
color: $main; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
min-height: 175px; |
|
||||
border-bottom: 1px solid transparent; |
|
||||
|
|
||||
&.ln { |
|
||||
opacity: 0.75; |
|
||||
} |
|
||||
|
|
||||
&.error { |
|
||||
border-color: $red; |
|
||||
} |
|
||||
|
|
||||
label, input[type=number], input[type=text] { |
|
||||
color: inherit; |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
svg { |
|
||||
width: 85px; |
|
||||
height: 85px; |
|
||||
} |
|
||||
|
|
||||
svg[data-icon='ltc'] { |
|
||||
margin-right: 10px; |
|
||||
|
|
||||
g { |
|
||||
transform: scale(1.75) translate(-5px, -5px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
input[type=number], input[type=text] { |
|
||||
width: 100px; |
|
||||
font-size: 180px; |
|
||||
border: none; |
|
||||
outline: 0; |
|
||||
-webkit-appearance: none; |
|
||||
font-weight: 200; |
|
||||
} |
|
||||
|
|
||||
input[type=number] { |
|
||||
&::-webkit-inner-spin-button, &::-webkit-outer-spin-button { |
|
||||
-webkit-appearance: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.inputContainer { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
padding: 40px 0; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
.info { |
|
||||
margin-bottom: 10px; |
|
||||
min-height: 19px; |
|
||||
} |
|
||||
|
|
||||
.paymentIcon { |
|
||||
position: absolute; |
|
||||
width: 20%; |
|
||||
left: calc(-12.5% - 75px); |
|
||||
top: 42px; |
|
||||
color: $main; |
|
||||
font-size: 50px; |
|
||||
text-align: center; |
|
||||
|
|
||||
span { |
|
||||
text-transform: uppercase; |
|
||||
display: block; |
|
||||
font-size: 12px; |
|
||||
font-weight: 200; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.input { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
font-size: 18px; |
|
||||
height: auto; |
|
||||
min-height: 55px; |
|
||||
border: 1px solid $traditionalgrey; |
|
||||
border-radius: 6px; |
|
||||
position: relative; |
|
||||
padding: 0 20px; |
|
||||
|
|
||||
&.error { |
|
||||
border-color: $red; |
|
||||
} |
|
||||
|
|
||||
label, input[type=number], input[type=text] { |
|
||||
font-size: inherit; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
padding-top: 19px; |
|
||||
padding-bottom: 12px; |
|
||||
color: $traditionalgrey; |
|
||||
} |
|
||||
|
|
||||
input[type=text] { |
|
||||
width: 100%; |
|
||||
border: none; |
|
||||
outline: 0; |
|
||||
-webkit-appearance: none; |
|
||||
height: 55px; |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.errorMessage { |
|
||||
margin: 10px 0; |
|
||||
min-height: 20px; |
|
||||
color: $red; |
|
||||
opacity: 0; |
|
||||
transition: all 0.25s ease; |
|
||||
|
|
||||
&.active { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.buttonGroup { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
border-radius: 6px; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.button { |
|
||||
width: 100%; |
|
||||
margin-bottom: 20px; |
|
||||
font-weight: bold; |
|
||||
cursor: pointer; |
|
||||
text-transform: uppercase; |
|
||||
letter-spacing: .2px; |
|
||||
|
|
||||
&:first-child { |
|
||||
border-right: 1px solid lighten($main, 20%); |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
opacity: 1; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,64 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import CurrencyIcon from 'components/CurrencyIcon' |
|
||||
import styles from './RequestForm.scss' |
|
||||
|
|
||||
const RequestForm = ({ |
|
||||
requestform: { amount, memo }, |
|
||||
currency, |
|
||||
crypto, |
|
||||
|
|
||||
setRequestAmount, |
|
||||
setRequestMemo, |
|
||||
|
|
||||
onRequestSubmit |
|
||||
}) => ( |
|
||||
<div className={styles.container}> |
|
||||
<section className={styles.amountContainer}> |
|
||||
<label htmlFor='amount'> |
|
||||
<CurrencyIcon currency={currency} crypto={crypto} /> |
|
||||
</label> |
|
||||
<input |
|
||||
type='text' |
|
||||
size='' |
|
||||
style={{ width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }} |
|
||||
value={amount} |
|
||||
onChange={event => setRequestAmount(event.target.value)} |
|
||||
id='amount' |
|
||||
/> |
|
||||
</section> |
|
||||
<section className={styles.inputContainer}> |
|
||||
<label htmlFor='memo'> |
|
||||
Request: |
|
||||
</label> |
|
||||
<input |
|
||||
type='text' |
|
||||
placeholder='Dinner, Rent, etc' |
|
||||
value={memo} |
|
||||
onChange={event => setRequestMemo(event.target.value)} |
|
||||
id='memo' |
|
||||
/> |
|
||||
</section> |
|
||||
<section className={styles.buttonGroup}> |
|
||||
<div className={`buttonPrimary ${styles.button}`} onClick={onRequestSubmit}> |
|
||||
Request |
|
||||
</div> |
|
||||
</section> |
|
||||
</div> |
|
||||
) |
|
||||
|
|
||||
RequestForm.propTypes = { |
|
||||
requestform: PropTypes.shape({ |
|
||||
amount: PropTypes.string.isRequired, |
|
||||
memo: PropTypes.string |
|
||||
}).isRequired, |
|
||||
currency: PropTypes.string.isRequired, |
|
||||
crypto: PropTypes.string.isRequired, |
|
||||
|
|
||||
setRequestAmount: PropTypes.func.isRequired, |
|
||||
setRequestMemo: PropTypes.func.isRequired, |
|
||||
|
|
||||
onRequestSubmit: PropTypes.func.isRequired |
|
||||
} |
|
||||
|
|
||||
export default RequestForm |
|
||||
@ -1,103 +0,0 @@ |
|||||
@import '../../variables.scss'; |
|
||||
|
|
||||
.container { |
|
||||
margin: 0 auto; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 75vh; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.amountContainer { |
|
||||
color: $main; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
min-height: 120px; |
|
||||
margin-bottom: 20px; |
|
||||
|
|
||||
label, input[type=text] { |
|
||||
color: inherit; |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
svg { |
|
||||
width: 85px; |
|
||||
height: 85px; |
|
||||
} |
|
||||
|
|
||||
svg[data-icon='ltc'] { |
|
||||
margin-right: 10px; |
|
||||
|
|
||||
g { |
|
||||
transform: scale(1.75) translate(-5px, -5px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
input[type=text] { |
|
||||
width: 100px; |
|
||||
font-size: 180px; |
|
||||
border: none; |
|
||||
outline: 0; |
|
||||
-webkit-appearance: none; |
|
||||
font-weight: 200; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.inputContainer { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
font-size: 18px; |
|
||||
height: auto; |
|
||||
min-height: 55px; |
|
||||
margin-bottom: 20px; |
|
||||
border: 1px solid $traditionalgrey; |
|
||||
border-radius: 6px; |
|
||||
position: relative; |
|
||||
padding: 0 20px; |
|
||||
|
|
||||
label, input[type=text] { |
|
||||
font-size: inherit; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
padding-top: 19px; |
|
||||
padding-bottom: 12px; |
|
||||
color: $traditionalgrey; |
|
||||
} |
|
||||
|
|
||||
input[type=text] { |
|
||||
width: 100%; |
|
||||
border: none; |
|
||||
outline: 0; |
|
||||
-webkit-appearance: none; |
|
||||
height: 55px; |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.buttonGroup { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
border-radius: 6px; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.button { |
|
||||
width: 100%; |
|
||||
margin-bottom: 20px; |
|
||||
font-weight: bold; |
|
||||
cursor: pointer; |
|
||||
text-transform: uppercase; |
|
||||
letter-spacing: .2px; |
|
||||
|
|
||||
&:first-child { |
|
||||
border-right: 1px solid lighten($main, 20%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue