Jack Mallers
7 years ago
43 changed files with 129 additions and 691 deletions
@ -1,74 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
import Moment from 'react-moment' |
|||
import 'moment-timezone' |
|||
|
|||
import QRCode from 'qrcode.react' |
|||
import copy from 'copy-to-clipboard' |
|||
import { showNotification } from 'notifications' |
|||
|
|||
import { FaCircle, FaCopy } from 'react-icons/lib/fa' |
|||
|
|||
import { btc } from 'utils' |
|||
|
|||
import styles from './Invoice.scss' |
|||
|
|||
|
|||
const Invoice = ({ invoice, ticker, currentTicker }) => { |
|||
const copyPaymentRequest = () => { |
|||
copy(invoice.payment_request) |
|||
showNotification('Noice', 'Successfully copied to clipboard') |
|||
} |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<div className={styles.settled}> |
|||
{ |
|||
!invoice.settled && |
|||
<p> |
|||
<FaCircle /> |
|||
<span>Not Paid</span> |
|||
</p> |
|||
} |
|||
</div> |
|||
<header> |
|||
<h3>{invoice.memo}</h3> |
|||
<h1> |
|||
<span className={styles.value}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(invoice.value, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(invoice.value) |
|||
} |
|||
</span> |
|||
<i>BTC</i> |
|||
</h1> |
|||
</header> |
|||
<div className={styles.qrcode}> |
|||
<QRCode value={invoice.payment_request} size={150} /> |
|||
</div> |
|||
<div className={styles.input}> |
|||
<p className={styles.invoiceAddress}> |
|||
<span>{invoice.payment_request}</span> |
|||
<span onClick={copyPaymentRequest} className='hint--left' data-hint='Copy Invoice'> |
|||
<FaCopy /> |
|||
</span> |
|||
</p> |
|||
</div> |
|||
<p className={styles.date}> |
|||
Created on |
|||
<Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment> |
|||
</p> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
Invoice.propTypes = { |
|||
invoice: PropTypes.object.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
currentTicker: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Invoice |
|||
@ -1,106 +0,0 @@ |
|||
@import '../../../../../../variables.scss'; |
|||
|
|||
.container { |
|||
.settled { |
|||
position: absolute; |
|||
top: 0; |
|||
padding: 10px 0 10px 40px; |
|||
color: $darkestgrey; |
|||
|
|||
svg { |
|||
line-height: 20px; |
|||
font-size: 10px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
span { |
|||
font-size: 12px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
|
|||
header { |
|||
background: $lightgrey; |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 20px; |
|||
color: $black; |
|||
font-weight: bold; |
|||
padding: 10px 40px; |
|||
} |
|||
|
|||
h1 { |
|||
color: $main; |
|||
padding: 10px 40px; |
|||
|
|||
.value { |
|||
font-size: 30px; |
|||
} |
|||
|
|||
i { |
|||
margin-left: 2px; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
|
|||
.qrcode { |
|||
text-align: center; |
|||
margin-top: 40px; |
|||
|
|||
} |
|||
|
|||
.input { |
|||
padding: 10px 40px; |
|||
.paymentRequest { |
|||
text-align: center; |
|||
font-size: 12px; |
|||
padding: 15px; |
|||
background: $lightgrey; |
|||
border: 1px solid transparent; |
|||
display: block; |
|||
width: 90%; |
|||
margin: 20px auto 0 auto; |
|||
} |
|||
} |
|||
|
|||
.date { |
|||
text-align: center; |
|||
padding-bottom: 40px; |
|||
margin-top: 20px; |
|||
|
|||
time { |
|||
margin-left: 3px; |
|||
} |
|||
} |
|||
|
|||
.invoiceAddress { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-family: 'Roboto'; |
|||
font-size: 14px; |
|||
font-weight: 200; |
|||
background: $lightgrey; |
|||
|
|||
span { |
|||
padding: 15px; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
flex: 9; |
|||
overflow-x: scroll; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
background: $darkgrey; |
|||
color: $black; |
|||
cursor: pointer; |
|||
transition: all 0.25s; |
|||
|
|||
&:hover { |
|||
background: $darkestgrey; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import Invoice from './Invoice' |
|||
|
|||
export default Invoice |
|||
@ -1,63 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import ReactModal from 'react-modal' |
|||
import { MdClose } from 'react-icons/lib/md' |
|||
import Isvg from 'react-inlinesvg' |
|||
|
|||
import Transaction from './Transaction' |
|||
import Payment from './Payment' |
|||
import Invoice from './Invoice' |
|||
|
|||
import x from 'icons/x.svg' |
|||
import styles from './Modal.scss' |
|||
|
|||
const Modal = ({ |
|||
modalType, modalProps, hideActivityModal, ticker, currentTicker |
|||
}) => { |
|||
const MODAL_COMPONENTS = { |
|||
TRANSACTION: Transaction, |
|||
PAYMENT: Payment, |
|||
INVOICE: Invoice |
|||
} |
|||
|
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
borderRadius: 'none', |
|||
padding: '0' |
|||
} |
|||
} |
|||
|
|||
if (!modalType) { return null } |
|||
|
|||
const SpecificModal = MODAL_COMPONENTS[modalType] |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<div className={styles.closeContainer}> |
|||
<span onClick={() => hideActivityModal()}> |
|||
<Isvg src={x} /> |
|||
</span> |
|||
</div> |
|||
<SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} /> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
Modal.propTypes = { |
|||
modalType: PropTypes.string, |
|||
modalProps: PropTypes.object.isRequired, |
|||
hideActivityModal: PropTypes.func.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
currentTicker: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Modal |
|||
@ -1,27 +0,0 @@ |
|||
@import '../../../../../variables.scss'; |
|||
|
|||
.container { |
|||
position: relative; |
|||
height: 100vh; |
|||
background: $spaceblue; |
|||
} |
|||
|
|||
.closeContainer { |
|||
text-align: right; |
|||
padding: 20px 40px 0px; |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
opacity: 1.0; |
|||
transition: 0.25s all; |
|||
|
|||
&:hover { |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
|
|||
svg { |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
@ -1,52 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
import Moment from 'react-moment' |
|||
import 'moment-timezone' |
|||
|
|||
import { btc } from 'utils' |
|||
|
|||
import styles from './Payment.scss' |
|||
|
|||
|
|||
const Payment = ({ payment, ticker, currentTicker }) => ( |
|||
<div className={styles.container}> |
|||
<header> |
|||
<div className={styles.title}> |
|||
<h2>Sent</h2> |
|||
<h1> |
|||
<span className={styles.value}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(payment.value, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(payment.value) |
|||
} |
|||
</span> |
|||
<i> |
|||
BTC |
|||
</i> |
|||
</h1> |
|||
</div> |
|||
<h3>{payment.payment_hash}</h3> |
|||
</header> |
|||
<dl> |
|||
<dt>Fee</dt> |
|||
<dd>{payment.fee}</dd> |
|||
<dt>Hops</dt> |
|||
<dd>{payment.path.length}</dd> |
|||
<dt>Date</dt> |
|||
<dd> |
|||
<Moment format='MMM Do'>{payment.creation_date * 1000}</Moment> |
|||
</dd> |
|||
</dl> |
|||
</div> |
|||
) |
|||
|
|||
Payment.propTypes = { |
|||
payment: PropTypes.object.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
currentTicker: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Payment |
|||
@ -1,61 +0,0 @@ |
|||
@import '../../../../../../variables.scss'; |
|||
|
|||
.container { |
|||
header { |
|||
padding: 5px 40px 20px 40px; |
|||
background: $lightgrey; |
|||
|
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-bottom: 30px; |
|||
|
|||
h2 { |
|||
text-transform: uppercase; |
|||
font-size: 24px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
h1 { |
|||
color: $main; |
|||
|
|||
.value { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
i { |
|||
margin-left: 2px; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 14px; |
|||
text-align: center; |
|||
color: $darkestgrey; |
|||
} |
|||
|
|||
dl { |
|||
padding: 40px 40px 40px 40px; |
|||
} |
|||
|
|||
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: 30px 0 10px 0; |
|||
margin-left: 0; |
|||
border-bottom: 1px solid $darkgrey; |
|||
} |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import Payment from './Payment' |
|||
|
|||
export default Payment |
|||
@ -1,64 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
import Moment from 'react-moment' |
|||
import 'moment-timezone' |
|||
|
|||
import { btc, blockExplorer } from 'utils' |
|||
|
|||
import styles from './Transaction.scss' |
|||
|
|||
|
|||
const Transaction = ({ transaction, ticker, currentTicker }) => ( |
|||
<div className={styles.container}> |
|||
<header> |
|||
<div className={styles.title}> |
|||
<h2> |
|||
{ |
|||
transaction.amount < 0 ? |
|||
'Sent' |
|||
: |
|||
'Received' |
|||
} |
|||
</h2> |
|||
<h1> |
|||
<span className={styles.value}> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(transaction.amount, currentTicker.price_usd) |
|||
: |
|||
btc.satoshisToBtc(transaction.amount) |
|||
} |
|||
</span> |
|||
<i>BTC</i> |
|||
</h1> |
|||
</div> |
|||
<h3 onClick={() => blockExplorer.showTransaction(transaction.tx_hash)}>{transaction.tx_hash}</h3> |
|||
</header> |
|||
<dl> |
|||
<dt>Confirmations</dt> |
|||
<dd>{transaction.num_confirmations}</dd> |
|||
<dt>Fee</dt> |
|||
<dd> |
|||
{ |
|||
ticker.currency === 'usd' ? |
|||
btc.satoshisToUsd(transaction.total_fees) |
|||
: |
|||
btc.satoshisToBtc(transaction.total_fees) |
|||
} |
|||
</dd> |
|||
<dt>Date</dt> |
|||
<dd> |
|||
<Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment> |
|||
</dd> |
|||
</dl> |
|||
</div> |
|||
) |
|||
|
|||
Transaction.propTypes = { |
|||
transaction: PropTypes.object.isRequired, |
|||
ticker: PropTypes.object.isRequired, |
|||
currentTicker: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Transaction |
|||
@ -1,72 +0,0 @@ |
|||
@import '../../../../../../variables.scss'; |
|||
|
|||
.container { |
|||
header { |
|||
padding: 5px 40px 20px 40px; |
|||
background: $lightgrey; |
|||
|
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
|
|||
h2 { |
|||
text-transform: uppercase; |
|||
} |
|||
} |
|||
} |
|||
|
|||
h1 { |
|||
text-align: center; |
|||
color: $main; |
|||
|
|||
.value { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
i { |
|||
margin-left: 2px; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 14px; |
|||
text-align: center; |
|||
color: $darkestgrey; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
|
|||
h2 { |
|||
text-align: center; |
|||
margin-right: 10px; |
|||
margin-bottom: 30px; |
|||
text-transform: uppercase; |
|||
font-size: 24px; |
|||
} |
|||
|
|||
dl { |
|||
padding: 40px 40px 40px 40px; |
|||
} |
|||
|
|||
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: 30px 0 10px 0; |
|||
margin-left: 0; |
|||
border-bottom: 1px solid $darkgrey; |
|||
} |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import Transaction from './Transaction' |
|||
|
|||
export default Transaction |
|||
@ -1,3 +0,0 @@ |
|||
import Modal from './Modal' |
|||
|
|||
export default Modal |
|||
Loading…
Reference in new issue