Jack Mallers
7 years ago
4 changed files with 0 additions and 449 deletions
@ -1,110 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import Moment from 'react-moment' |
|||
import 'moment-timezone' |
|||
import { MdCheck } from 'react-icons/lib/md' |
|||
import QRCode from 'qrcode.react' |
|||
import Modal from './Modal' |
|||
import CurrencyIcon from '../../../../components/CurrencyIcon' |
|||
import { btc } from '../../../../utils' |
|||
import styles from './Invoices.scss' |
|||
|
|||
const Invoices = ({ |
|||
invoice, |
|||
invoices, |
|||
ticker, |
|||
setInvoice, |
|||
invoiceModalOpen, |
|||
currentTicker |
|||
}) => ( |
|||
<div> |
|||
<Modal isOpen={invoiceModalOpen} resetObject={setInvoice}> |
|||
{ |
|||
invoice ? |
|||
<div className={styles.invoiceModal}> |
|||
<h3>{invoice.memo}</h3> |
|||
<h1> |
|||
<CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} /> |
|||
<span className={styles.value}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(invoice.value, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(invoice.value) |
|||
} |
|||
</span> |
|||
</h1> |
|||
<div className={styles.qrcode}> |
|||
<QRCode value={invoice.payment_request} size={200} /> |
|||
<input |
|||
readOnly |
|||
className={styles.paymentRequest} |
|||
onClick={event => event.target.select()} |
|||
defaultValue={invoice.payment_request} |
|||
/> |
|||
</div> |
|||
<div className={styles.settled}> |
|||
{ |
|||
invoice.settled ? |
|||
<p><MdCheck style={{ verticalAlign: 'top' }} /> Paid</p> |
|||
: |
|||
<p>Not Paid</p> |
|||
} |
|||
</div> |
|||
<p className={styles.date}> |
|||
Created on |
|||
<Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment> |
|||
</p> |
|||
</div> |
|||
: |
|||
null |
|||
} |
|||
</Modal> |
|||
<ul className={styles.invoices}> |
|||
<li className={styles.invoiceTitles}> |
|||
<div className={styles.left}> |
|||
<div>Payment Request</div> |
|||
</div> |
|||
<div className={styles.center}> |
|||
<div>Memo</div> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<div>Amount</div> |
|||
</div> |
|||
</li> |
|||
{ |
|||
invoices.map((invoiceItem, index) => ( |
|||
<li key={index} className={styles.invoice} onClick={() => setInvoice(invoiceItem)}> |
|||
<div className={styles.left}> |
|||
<div className={styles.path}>{`${invoiceItem.payment_request.substring(0, 75)}...`}</div> |
|||
</div> |
|||
<div className={styles.center}> |
|||
<div>{invoiceItem.memo}</div> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<div className={invoiceItem.settled ? styles.settled : null}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(invoiceItem.value, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(invoiceItem.value) |
|||
} |
|||
</div> |
|||
</div> |
|||
</li> |
|||
)) |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
|
|||
Invoices.propTypes = { |
|||
invoice: PropTypes.object, |
|||
invoices: PropTypes.array.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
setInvoice: PropTypes.func.isRequired, |
|||
invoiceModalOpen: PropTypes.bool.isRequired, |
|||
currentTicker: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Invoices |
@ -1,125 +0,0 @@ |
|||
@import '../../../../variables.scss'; |
|||
|
|||
.invoiceModal { |
|||
padding: 40px; |
|||
|
|||
h3 { |
|||
font-size: 24px; |
|||
color: $black; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
h1 { |
|||
text-align: center; |
|||
color: $main; |
|||
margin: 20px 20px 60px 0; |
|||
|
|||
svg { |
|||
font-size: 30px; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
span svg[data-icon='ltc'] { |
|||
width: 30px; |
|||
height: 30px; |
|||
vertical-align: top; |
|||
|
|||
g { |
|||
transform: scale(1.75) translate(-5px, -5px); |
|||
} |
|||
} |
|||
|
|||
.value { |
|||
font-size: 60px; |
|||
} |
|||
} |
|||
|
|||
.qrcode { |
|||
text-align: center; |
|||
|
|||
.paymentRequest { |
|||
text-align: center; |
|||
font-size: 0.5vw; |
|||
margin-top: 20px; |
|||
padding: 5px; |
|||
border-radius: 5px; |
|||
background: $lightgrey; |
|||
border: 1px solid $darkgrey; |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.settled { |
|||
text-align: center; |
|||
color: $main; |
|||
text-transform: uppercase; |
|||
font-size: 20px; |
|||
margin: 30px 0; |
|||
font-weight: bold; |
|||
|
|||
svg { |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
|
|||
.date { |
|||
text-align: center; |
|||
|
|||
time { |
|||
margin-left: 3px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.invoices { |
|||
width: 75%; |
|||
margin: 0 auto; |
|||
background: $white; |
|||
} |
|||
|
|||
.invoice, .invoiceTitles { |
|||
display: flex; |
|||
flex-direction: 'row'; |
|||
padding: 35px 10px; |
|||
border-bottom: 1px solid $grey; |
|||
font-size: 14px; |
|||
|
|||
.left { |
|||
flex: 7; |
|||
} |
|||
|
|||
.center { |
|||
flex: 2; |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
} |
|||
|
|||
.settled { |
|||
color: $main; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.invoiceTitles { |
|||
border: none; |
|||
|
|||
.left, .center, .right { |
|||
color: $black; |
|||
text-transform: uppercase; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.invoice { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: #f0f0f0; |
|||
} |
|||
} |
@ -1,112 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import Moment from 'react-moment' |
|||
import 'moment-timezone' |
|||
import Modal from './Modal' |
|||
import CurrencyIcon from '../../../../components/CurrencyIcon' |
|||
import { btc } from '../../../../utils' |
|||
import styles from './Payments.scss' |
|||
|
|||
const Payments = ({ |
|||
payment, |
|||
payments, |
|||
ticker, |
|||
setPayment, |
|||
paymentModalOpen, |
|||
currentTicker |
|||
}) => ( |
|||
<div> |
|||
<Modal isOpen={paymentModalOpen} resetObject={setPayment}> |
|||
{ |
|||
payment ? |
|||
<div className={styles.paymentModal}> |
|||
<h3>{payment.payment_hash}</h3> |
|||
<h1> |
|||
<CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} /> |
|||
<span className={styles.value}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(payment.value, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(payment.value) |
|||
} |
|||
</span> |
|||
</h1> |
|||
<dl> |
|||
<dt>Fee</dt> |
|||
<dd>{payment.fee}</dd> |
|||
<dt>Date</dt> |
|||
<dd> |
|||
<Moment format='MMM Do'>{payment.creation_date * 1000}</Moment> |
|||
</dd> |
|||
</dl> |
|||
</div> |
|||
: |
|||
null |
|||
} |
|||
</Modal> |
|||
<ul className={styles.payments}> |
|||
<li className={styles.paymentTitles}> |
|||
<div className={styles.left}> |
|||
<div>Public Key</div> |
|||
</div> |
|||
<div className={styles.center}> |
|||
<div>Date</div> |
|||
</div> |
|||
<div className={styles.center}> |
|||
<div>Fee</div> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<div>Amount</div> |
|||
</div> |
|||
</li> |
|||
{ |
|||
payments.map((paymentItem, index) => |
|||
( |
|||
<li key={index} className={styles.payment} onClick={() => setPayment(paymentItem)}> |
|||
<div className={styles.left}> |
|||
<div className={styles.path}>{paymentItem.path[0]}</div> |
|||
</div> |
|||
<div className={styles.center}> |
|||
<div className={styles.date}> |
|||
<Moment format='MMM Do'>{paymentItem.creation_date * 1000}</Moment> |
|||
</div> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<span className={styles.fee}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(paymentItem.fee, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(paymentItem.fee) |
|||
} |
|||
</span> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<span className={styles.value}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(paymentItem.value, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(paymentItem.value) |
|||
} |
|||
</span> |
|||
</div> |
|||
</li> |
|||
) |
|||
) |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
|
|||
Payments.propTypes = { |
|||
payment: PropTypes.object, |
|||
payments: PropTypes.array.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
setPayment: PropTypes.func.isRequired, |
|||
paymentModalOpen: PropTypes.bool.isRequired, |
|||
currentTicker: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Payments |
@ -1,102 +0,0 @@ |
|||
@import '../../../../variables.scss'; |
|||
|
|||
.paymentModal { |
|||
padding: 40px; |
|||
|
|||
h1 { |
|||
text-align: center; |
|||
color: $main; |
|||
margin: 60px 30px 60px 0; |
|||
|
|||
svg { |
|||
font-size: 30px; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
span svg[data-icon='ltc'] { |
|||
width: 30px; |
|||
height: 30px; |
|||
vertical-align: top; |
|||
|
|||
g { |
|||
transform: scale(1.75) translate(-5px, -5px); |
|||
} |
|||
} |
|||
|
|||
.value { |
|||
font-size: 80px; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 14px; |
|||
text-align: center; |
|||
color: $black; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
dt { |
|||
text-align: left; |
|||
float: left; |
|||
clear: left; |
|||
font-weight: 500; |
|||
padding: 20px 35px 19px 0; |
|||
color: $black; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
dd { |
|||
text-align: right; |
|||
font-weight: 400; |
|||
padding: 19px 0; |
|||
margin-left: 0; |
|||
border-top: 1px solid $darkgrey; |
|||
} |
|||
} |
|||
|
|||
.payments { |
|||
width: 75%; |
|||
margin: 0 auto; |
|||
background: $white; |
|||
} |
|||
|
|||
.payment, .paymentTitles { |
|||
display: flex; |
|||
flex-direction: 'row'; |
|||
padding: 35px 10px; |
|||
border-bottom: 1px solid $grey; |
|||
font-size: 14px; |
|||
|
|||
.left, .center, .right { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.center, .right { |
|||
flex: 1; |
|||
} |
|||
|
|||
.left { |
|||
flex: 7; |
|||
} |
|||
} |
|||
|
|||
.paymentTitles { |
|||
border: none; |
|||
|
|||
.left, .center, .right { |
|||
color: $black; |
|||
text-transform: uppercase; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
|
|||
.payment { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: #f0f0f0; |
|||
} |
|||
} |
Loading…
Reference in new issue