Jack Mallers
7 years ago
11 changed files with 6 additions and 742 deletions
@ -1,93 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { MdClose } from 'react-icons/lib/md' |
|||
import Pay from './components/Pay' |
|||
import Request from './components/Request' |
|||
import styles from './Form.scss' |
|||
|
|||
const Form = ({ |
|||
form: { formType, amount, onchainAmount, message, payment_request }, |
|||
setAmount, |
|||
setOnchainAmount, |
|||
setMessage, |
|||
setPaymentRequest, |
|||
ticker: { currency, crypto }, |
|||
isOpen, |
|||
close, |
|||
createInvoice, |
|||
payInvoice, |
|||
sendCoins, |
|||
fetchInvoice, |
|||
formInvoice, |
|||
currentTicker, |
|||
isOnchain, |
|||
isLn, |
|||
sendingTransaction |
|||
}) => ( |
|||
<div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}> |
|||
<div className={styles.container}> |
|||
<div className={styles.esc} onClick={close}> |
|||
<MdClose /> |
|||
</div> |
|||
<div className={styles.content}> |
|||
{ |
|||
formType === 'pay' ? |
|||
<Pay |
|||
sendingTransaction={sendingTransaction} |
|||
invoiceAmount={formInvoice.amount} |
|||
onchainAmount={onchainAmount} |
|||
setOnchainAmount={setOnchainAmount} |
|||
amount={formInvoice.amount} |
|||
payment_request={payment_request} |
|||
setPaymentRequest={setPaymentRequest} |
|||
fetchInvoice={fetchInvoice} |
|||
payInvoice={payInvoice} |
|||
sendCoins={sendCoins} |
|||
currentTicker={currentTicker} |
|||
currency={currency} |
|||
crypto={crypto} |
|||
close={close} |
|||
isOnchain={isOnchain} |
|||
isLn={isLn} |
|||
/> |
|||
: |
|||
<Request |
|||
amount={amount} |
|||
setAmount={setAmount} |
|||
payment_request={payment_request} |
|||
setMessage={setMessage} |
|||
createInvoice={createInvoice} |
|||
message={message} |
|||
currentTicker={currentTicker} |
|||
currency={currency} |
|||
crypto={crypto} |
|||
close={close} |
|||
/> |
|||
|
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
|
|||
Form.propTypes = { |
|||
form: PropTypes.object.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
setAmount: PropTypes.func.isRequired, |
|||
setOnchainAmount: PropTypes.func.isRequired, |
|||
setMessage: PropTypes.func.isRequired, |
|||
setPaymentRequest: PropTypes.func.isRequired, |
|||
isOpen: PropTypes.bool.isRequired, |
|||
close: PropTypes.func.isRequired, |
|||
createInvoice: PropTypes.func.isRequired, |
|||
payInvoice: PropTypes.func.isRequired, |
|||
sendCoins: PropTypes.func.isRequired, |
|||
fetchInvoice: PropTypes.func.isRequired, |
|||
formInvoice: PropTypes.object.isRequired, |
|||
currentTicker: PropTypes.object.isRequired, |
|||
isOnchain: PropTypes.bool.isRequired, |
|||
isLn: PropTypes.bool.isRequired, |
|||
sendingTransaction: PropTypes.bool.isRequired |
|||
} |
|||
|
|||
export default Form |
|||
@ -1,159 +0,0 @@ |
|||
@import '../../../../../variables.scss'; |
|||
|
|||
.formContainer { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: $white; |
|||
z-index: 0; |
|||
opacity: 0; |
|||
transition: all 0.5s; |
|||
|
|||
&.open { |
|||
opacity: 1; |
|||
z-index: 10; |
|||
} |
|||
} |
|||
|
|||
.container { |
|||
position: relative; |
|||
height: 100vh; |
|||
margin: 5%; |
|||
} |
|||
|
|||
.esc { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
color: $darkestgrey; |
|||
cursor: pointer; |
|||
padding: 20px; |
|||
border-radius: 50%; |
|||
|
|||
&:hover { |
|||
color: $bluegrey; |
|||
background: $darkgrey; |
|||
} |
|||
|
|||
&:active { |
|||
color: $white; |
|||
background: $main; |
|||
} |
|||
|
|||
svg { |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
width: 50%; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
.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 { |
|||
cursor: pointer; |
|||
height: 55px; |
|||
min-height: 55px; |
|||
text-transform: none; |
|||
font-size: 18px; |
|||
transition: opacity .2s ease-out; |
|||
background: $main; |
|||
color: $white; |
|||
border: none; |
|||
font-weight: 500; |
|||
padding: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
line-height: 55px; |
|||
|
|||
&:first-child { |
|||
border-right: 1px solid lighten($main, 20%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,149 +0,0 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { FaBolt, FaChain } from 'react-icons/lib/fa' |
|||
import CurrencyIcon from 'components/CurrencyIcon' |
|||
import LoadingBolt from 'components/LoadingBolt' |
|||
import { btc } from 'utils' |
|||
import styles from './Pay.scss' |
|||
|
|||
class Pay extends Component { |
|||
componentDidUpdate(prevProps) { |
|||
const { isOnchain, isLn, fetchInvoice, payment_request } = this.props |
|||
|
|||
if (isOnchain) { this.amountInput.focus() } |
|||
if ((prevProps.payment_request !== payment_request) && isLn) { fetchInvoice(payment_request) } |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
sendingTransaction, |
|||
invoiceAmount, |
|||
onchainAmount, |
|||
setOnchainAmount, |
|||
payment_request, |
|||
setPaymentRequest, |
|||
payInvoice, |
|||
sendCoins, |
|||
currentTicker, |
|||
currency, |
|||
crypto, |
|||
isOnchain, |
|||
isLn |
|||
} = this.props |
|||
|
|||
const payClicked = () => { |
|||
if (!isOnchain && !isLn) { return } |
|||
|
|||
if (isOnchain) { sendCoins({ value: onchainAmount, addr: payment_request, currency, rate: currentTicker.price_usd }) } |
|||
if (isLn) { payInvoice(payment_request) } |
|||
} |
|||
|
|||
const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value)) |
|||
|
|||
return ( |
|||
<div> |
|||
{ |
|||
sendingTransaction ? |
|||
<LoadingBolt /> |
|||
: |
|||
null |
|||
|
|||
} |
|||
<div className={styles.container}> |
|||
<section className={`${styles.amountContainer} ${isLn ? styles.ln : ''}`}> |
|||
<label htmlFor='amount'> |
|||
<CurrencyIcon currency={currency} crypto={crypto} /> |
|||
</label> |
|||
<input |
|||
type='text' |
|||
ref={input => this.amountInput = input} // eslint-disable-line
|
|||
size='' |
|||
style={ |
|||
isLn ? |
|||
{ width: '75%', fontSize: '85px' } |
|||
: |
|||
{ width: `${onchainAmount.length > 1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` } |
|||
} |
|||
value={isLn ? calculateAmount(invoiceAmount) : onchainAmount} |
|||
onChange={event => setOnchainAmount(event.target.value)} |
|||
id='amount' |
|||
readOnly={isLn} |
|||
/> |
|||
</section> |
|||
<div className={styles.inputContainer}> |
|||
<div className={styles.info}> |
|||
{(() => { |
|||
if (isOnchain) { |
|||
return ( |
|||
<span>{`You're about to send ${onchainAmount} ${currency.toUpperCase()} on-chain which should take around 10 minutes`}</span> |
|||
) |
|||
} else if (isLn) { |
|||
return ( |
|||
<span>{`You're about to send ${calculateAmount(invoiceAmount)} ${currency.toUpperCase()} over the Lightning Network which will be instant`}</span> // eslint-disable-line |
|||
) |
|||
} |
|||
return null |
|||
})()} |
|||
</div> |
|||
<aside className={styles.paymentIcon}> |
|||
{(() => { |
|||
if (isOnchain) { |
|||
return ( |
|||
<i> |
|||
<span>on-chain</span> |
|||
<FaChain /> |
|||
</i> |
|||
) |
|||
} else if (isLn) { |
|||
return ( |
|||
<i> |
|||
<span>lightning network</span> |
|||
<FaBolt /> |
|||
</i> |
|||
) |
|||
} |
|||
return null |
|||
})()} |
|||
</aside> |
|||
<section className={styles.input}> |
|||
<input |
|||
type='text' |
|||
placeholder='Payment request or bitcoin address' |
|||
value={payment_request} |
|||
onChange={event => setPaymentRequest(event.target.value)} |
|||
id='paymentRequest' |
|||
/> |
|||
</section> |
|||
</div> |
|||
<section className={styles.buttonGroup}> |
|||
<div className={styles.button} onClick={payClicked}> |
|||
Pay |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Pay.propTypes = { |
|||
sendingTransaction: PropTypes.bool.isRequired, |
|||
invoiceAmount: PropTypes.oneOfType([ |
|||
PropTypes.string, |
|||
PropTypes.number |
|||
]).isRequired, |
|||
onchainAmount: PropTypes.string.isRequired, |
|||
setOnchainAmount: PropTypes.func.isRequired, |
|||
payment_request: PropTypes.string.isRequired, |
|||
setPaymentRequest: PropTypes.func.isRequired, |
|||
fetchInvoice: PropTypes.func.isRequired, |
|||
payInvoice: PropTypes.func.isRequired, |
|||
sendCoins: PropTypes.func.isRequired, |
|||
currentTicker: PropTypes.object.isRequired, |
|||
currency: PropTypes.string.isRequired, |
|||
crypto: PropTypes.string.isRequired, |
|||
isOnchain: PropTypes.bool.isRequired, |
|||
isLn: PropTypes.bool.isRequired |
|||
} |
|||
|
|||
export default Pay |
|||
@ -1,142 +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; |
|||
min-height: 175px; |
|||
|
|||
&.ln { |
|||
opacity: 0.75; |
|||
} |
|||
|
|||
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; |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
|
|||
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 { |
|||
cursor: pointer; |
|||
height: 55px; |
|||
min-height: 55px; |
|||
text-transform: none; |
|||
font-size: 18px; |
|||
transition: opacity .2s ease-out; |
|||
background: $main; |
|||
color: $white; |
|||
border: none; |
|||
font-weight: 500; |
|||
padding: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
line-height: 55px; |
|||
|
|||
&:first-child { |
|||
border-right: 1px solid lighten($main, 20%); |
|||
} |
|||
} |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import Pay from './Pay' |
|||
|
|||
export default Pay |
|||
@ -1,68 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import CurrencyIcon from 'components/CurrencyIcon' |
|||
import styles from './Request.scss' |
|||
|
|||
const Request = ({ |
|||
amount, |
|||
setAmount, |
|||
setMessage, |
|||
createInvoice, |
|||
message, |
|||
currentTicker, |
|||
currency, |
|||
crypto, |
|||
close |
|||
}) => { |
|||
const requestClicked = () => { |
|||
createInvoice(amount, message, currency, currentTicker.price_usd) |
|||
close() |
|||
} |
|||
|
|||
return ( |
|||
<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 => setAmount(event.target.value)} |
|||
id='amount' |
|||
/> |
|||
</section> |
|||
<section className={styles.inputContainer}> |
|||
<label htmlFor='paymentRequest'>Request:</label> |
|||
<input |
|||
type='text' |
|||
placeholder='Dinner, Rent, etc' |
|||
value={message} |
|||
onChange={event => setMessage(event.target.value)} |
|||
id='paymentRequest' |
|||
/> |
|||
</section> |
|||
<section className={styles.buttonGroup}> |
|||
<div className={styles.button} onClick={requestClicked}> |
|||
Request |
|||
</div> |
|||
</section> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
Request.propTypes = { |
|||
amount: PropTypes.string.isRequired, |
|||
setAmount: PropTypes.func.isRequired, |
|||
setMessage: PropTypes.func.isRequired, |
|||
createInvoice: PropTypes.func.isRequired, |
|||
message: PropTypes.string.isRequired, |
|||
currentTicker: PropTypes.object.isRequired, |
|||
currency: PropTypes.string.isRequired, |
|||
crypto: PropTypes.string.isRequired, |
|||
close: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default Request |
|||
@ -1,110 +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; |
|||
} |
|||
} |
|||
|
|||
.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 { |
|||
cursor: pointer; |
|||
height: 55px; |
|||
min-height: 55px; |
|||
text-transform: none; |
|||
font-size: 18px; |
|||
transition: opacity .2s ease-out; |
|||
background: $main; |
|||
color: $white; |
|||
border: none; |
|||
font-weight: 500; |
|||
padding: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
line-height: 55px; |
|||
|
|||
&:first-child { |
|||
border-right: 1px solid lighten($main, 20%); |
|||
} |
|||
} |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import Request from './Request' |
|||
|
|||
export default Request |
|||
@ -1,3 +0,0 @@ |
|||
import Form from './Form' |
|||
|
|||
export default Form |
|||
Loading…
Reference in new issue