Jack Mallers
7 years ago
11 changed files with 298 additions and 40 deletions
@ -0,0 +1,45 @@ |
|||||
|
// @flow
|
||||
|
import React, { Component } from 'react' |
||||
|
import Moment from 'react-moment' |
||||
|
import 'moment-timezone' |
||||
|
import { satoshisToBtc } from '../../../../utils/bitcoin' |
||||
|
import styles from './Invoices.scss' |
||||
|
|
||||
|
class Invoices extends Component { |
||||
|
render() { |
||||
|
const { invoices } = this.props |
||||
|
return ( |
||||
|
<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((invoice, index) => ( |
||||
|
<li key={index} className={styles.invoice}> |
||||
|
<div className={styles.left}> |
||||
|
<div className={styles.path}>{invoice.payment_request}</div> |
||||
|
</div> |
||||
|
<div className={styles.center}> |
||||
|
<div>{invoice.memo}</div> |
||||
|
</div> |
||||
|
<div className={styles.right}> |
||||
|
<div className={invoice.settled ? styles.settled : null}>{satoshisToBtc(invoice.value, 2500)}</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
</ul> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Invoices |
@ -0,0 +1,42 @@ |
|||||
|
.invoices { |
||||
|
width: 75%; |
||||
|
margin: 0 auto; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.invoice, .invoiceTitles { |
||||
|
display: flex; |
||||
|
flex-direction: 'row'; |
||||
|
padding: 35px 10px; |
||||
|
border-bottom: 1px solid #f2f2f2; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
.left { |
||||
|
flex: 7; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.center { |
||||
|
flex: 2; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.settled { |
||||
|
color: #00c730; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.invoiceTitles { |
||||
|
border: none; |
||||
|
|
||||
|
.left, .center, .right { |
||||
|
color: #000; |
||||
|
text-transform: uppercase; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
@ -0,0 +1,53 @@ |
|||||
|
// @flow
|
||||
|
import React, { Component } from 'react' |
||||
|
import Moment from 'react-moment' |
||||
|
import 'moment-timezone' |
||||
|
import { satoshisToBtc } from '../../../../utils/bitcoin' |
||||
|
import styles from './Payments.scss' |
||||
|
|
||||
|
class Payments extends Component { |
||||
|
render() { |
||||
|
const { payments } = this.props |
||||
|
return ( |
||||
|
<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((payment, index) => ( |
||||
|
<li key={index} className={styles.payment}> |
||||
|
<div className={styles.left}> |
||||
|
<div className={styles.path}>{payment.path[0]}</div> |
||||
|
</div> |
||||
|
<div className={styles.center}> |
||||
|
<div className={styles.date}> |
||||
|
<Moment format="MMMM Do">{payment.creation_date * 1000}</Moment> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={styles.right}> |
||||
|
<span className={styles.fee}>{payment.fee === '0' ? '0' : satoshisToBtc(payment.fee, 2500)}</span> |
||||
|
</div> |
||||
|
<div className={styles.right}> |
||||
|
<span className={styles.value}>{satoshisToBtc(payment.value, 2500)}</span> |
||||
|
</div> |
||||
|
</li> |
||||
|
) |
||||
|
) |
||||
|
} |
||||
|
</ul> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Payments |
@ -0,0 +1,37 @@ |
|||||
|
.payments { |
||||
|
width: 75%; |
||||
|
margin: 0 auto; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.payment, .paymentTitles { |
||||
|
display: flex; |
||||
|
flex-direction: 'row'; |
||||
|
padding: 35px 10px; |
||||
|
border-bottom: 1px solid #f2f2f2; |
||||
|
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: #000; |
||||
|
text-transform: uppercase; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
@ -0,0 +1,23 @@ |
|||||
|
import sb from 'satoshi-bitcoin' |
||||
|
|
||||
|
export function btcToSatoshis(btc) { |
||||
|
if (btc == undefined || btc === '') return |
||||
|
|
||||
|
return sb.toSatoshi(btc) |
||||
|
} |
||||
|
|
||||
|
export function satoshisToBtc(satoshis) { |
||||
|
if (satoshis == undefined || satoshis === '') return |
||||
|
|
||||
|
return sb.toBitcoin(satoshis).toFixed(8) |
||||
|
} |
||||
|
|
||||
|
export function satoshisToUsd(satoshis, price) { |
||||
|
if (satoshis == undefined || satoshis === '') return |
||||
|
|
||||
|
return btcToUsd(satoshisToBtc(satoshis), price) |
||||
|
} |
||||
|
|
||||
|
export function btcToUsd(btc, price) { |
||||
|
return (btc * price).toFixed(2) |
||||
|
} |
Loading…
Reference in new issue