diff --git a/.gitignore b/.gitignore index a06db9c9..f40da82d 100644 --- a/.gitignore +++ b/.gitignore @@ -50,3 +50,6 @@ main.js.map .idea npm-debug.log.* + +# lnd binary +resources/bin/* \ No newline at end of file diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js index b82c464b..a22cac3c 100644 --- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js @@ -7,6 +7,7 @@ import 'moment-timezone' import QRCode from 'qrcode.react' import { MdCheck } from 'react-icons/lib/md' +import { FaCircle } from 'react-icons/lib/fa' import CurrencyIcon from 'components/CurrencyIcon' import { btc } from 'utils' @@ -16,20 +17,33 @@ import styles from './Invoice.scss' const Invoice = ({ invoice, ticker, currentTicker }) => (
-

{invoice.memo}

-

- - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(invoice.value, currentTicker.price_usd) - : - btc.satoshisToBtc(invoice.value) - } - -

+
+ { + !invoice.settled && +

+ + Not Paid +

+ } +
+
+

{invoice.memo}

+

+ + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(invoice.value, currentTicker.price_usd) + : + btc.satoshisToBtc(invoice.value) + } + + BTC +

+
- + +
+
( defaultValue={invoice.payment_request} />
-
- { - invoice.settled ? -

Paid

- : -

Not Paid

- } -

Created on {invoice.creation_date * 1000} diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss index 6a55e812..3880bfb0 100644 --- a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss +++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss @@ -1,72 +1,75 @@ @import '../../../../../../variables.scss'; .container { - padding: 40px; + .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: 24px; + font-size: 20px; color: $black; font-weight: bold; - text-align: center; - margin-bottom: 10px; + padding: 10px 40px; } h1 { - text-align: center; color: $main; - margin: 20px 20px 60px 0; + padding: 10px 40px; - svg { + .value { font-size: 30px; - vertical-align: top; } - span svg[data-icon='ltc'] { - width: 30px; - height: 30px; + i { + margin-left: 2px; vertical-align: top; - - g { - transform: scale(1.75) translate(-5px, -5px); - } - } - - .value { - font-size: 60px; } } .qrcode { text-align: center; + margin-top: 40px; + + } + + .input { + padding: 10px 40px; .paymentRequest { text-align: center; - font-size: 0.5vw; - margin-top: 20px; - padding: 5px; - border-radius: 5px; + font-size: 12px; + padding: 15px; background: $lightgrey; - border: 1px solid $darkgrey; + border: 1px solid transparent; 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; + width: 90%; + margin: 20px auto 0 auto; } } .date { text-align: center; + padding-bottom: 40px; + margin-top: 20px; time { margin-left: 3px; diff --git a/app/routes/activity/components/components/Modal/Modal.js b/app/routes/activity/components/components/Modal/Modal.js index 383316f5..b53a98df 100644 --- a/app/routes/activity/components/components/Modal/Modal.js +++ b/app/routes/activity/components/components/Modal/Modal.js @@ -6,6 +6,10 @@ import Transaction from './Transaction' import Payment from './Payment' import Invoice from './Invoice' +import { MdClose } from 'react-icons/lib/md' + +import styles from './Modal.scss' + const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker }) => { const MODAL_COMPONENTS = { TRANSACTION: Transaction, @@ -23,7 +27,9 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker right: '0', bottom: 'auto', width: '40%', - margin: '50px auto' + margin: '50px auto', + borderRadius: 'none', + padding: '0' } } @@ -41,6 +47,11 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker parentSelector={() => document.body} style={customStyles} > +

+ hideActivityModal()}> + + +
) diff --git a/app/routes/activity/components/components/Modal/Modal.scss b/app/routes/activity/components/components/Modal/Modal.scss new file mode 100644 index 00000000..b8288b87 --- /dev/null +++ b/app/routes/activity/components/components/Modal/Modal.scss @@ -0,0 +1,13 @@ +@import '../../../../../variables.scss'; + +.closeContainer { + background: $lightgrey; + text-align: right; + padding: 10px; + + span { + color: $darkestgrey; + font-size: 20px; + cursor: pointer; + } +} \ No newline at end of file diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.js b/app/routes/activity/components/components/Modal/Payment/Payment.js index 6b27adf2..41f55619 100644 --- a/app/routes/activity/components/components/Modal/Payment/Payment.js +++ b/app/routes/activity/components/components/Modal/Payment/Payment.js @@ -12,21 +12,30 @@ import styles from './Payment.scss' const Payment = ({ payment, ticker, currentTicker }) => (
-

{payment.payment_hash}

-

- - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(payment.value, currentTicker.price_usd) - : - btc.satoshisToBtc(payment.value) - } - -

+
+
+

Sent

+

+ + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(payment.value, currentTicker.price_usd) + : + btc.satoshisToBtc(payment.value) + } + + + BTC + +

+
+

{payment.payment_hash}

+
Fee
{payment.fee}
+
Hops
+
{payment.path.length}
Date
{payment.creation_date * 1000} diff --git a/app/routes/activity/components/components/Modal/Payment/Payment.scss b/app/routes/activity/components/components/Modal/Payment/Payment.scss index 304fce58..6c88b58f 100644 --- a/app/routes/activity/components/components/Modal/Payment/Payment.scss +++ b/app/routes/activity/components/components/Modal/Payment/Payment.scss @@ -1,38 +1,44 @@ @import '../../../../../../variables.scss'; .container { - padding: 40px; + 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 { - text-align: center; color: $main; - margin: 60px 30px 60px 0; - svg { - font-size: 30px; - vertical-align: top; + .value { + font-size: 24px; } - span svg[data-icon='ltc'] { - width: 30px; - height: 30px; + i { + margin-left: 2px; 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; + color: $darkestgrey; + } + + dl { + padding: 40px 40px 40px 40px; } dt { @@ -48,8 +54,8 @@ dd { text-align: right; font-weight: 400; - padding: 19px 0; + padding: 30px 0 10px 0; margin-left: 0; - border-top: 1px solid $darkgrey; + border-bottom: 1px solid $darkgrey; } } \ No newline at end of file diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.js b/app/routes/activity/components/components/Modal/Transaction/Transaction.js index 80290714..f1359842 100644 --- a/app/routes/activity/components/components/Modal/Transaction/Transaction.js +++ b/app/routes/activity/components/components/Modal/Transaction/Transaction.js @@ -1,3 +1,4 @@ +import { shell } from 'electron' import React from 'react' import PropTypes from 'prop-types' @@ -12,31 +13,42 @@ import styles from './Transaction.scss' const Transaction = ({ transaction, ticker, currentTicker }) => (
-

- { - transaction.amount < 0 ? - 'Sent' - : - 'Received' - } -

-

{transaction.tx_hash}

-

- - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(transaction.amount, currentTicker.price_usd) - : - btc.satoshisToBtc(transaction.amount) - } - -

+
+
+

+ { + transaction.amount < 0 ? + 'Sent' + : + 'Received' + } +

+

+ + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(transaction.amount, currentTicker.price_usd) + : + btc.satoshisToBtc(transaction.amount) + } + + BTC +

+
+

shell.openExternal(`https://testnet.smartbit.com.au/tx/${transaction.tx_hash}`)}>{transaction.tx_hash}

+
Confirmations
{transaction.num_confirmations}
Fee
-
{transaction.total_fees}
+
+ { + ticker.currency === 'usd' ? + btc.satoshisToUsd(transaction.total_fees) + : + btc.satoshisToBtc(transaction.total_fees) + } +
Date
{transaction.time_stamp * 1000} diff --git a/app/routes/activity/components/components/Modal/Transaction/Transaction.scss b/app/routes/activity/components/components/Modal/Transaction/Transaction.scss index 283de75b..f7c3d0ba 100644 --- a/app/routes/activity/components/components/Modal/Transaction/Transaction.scss +++ b/app/routes/activity/components/components/Modal/Transaction/Transaction.scss @@ -1,48 +1,57 @@ @import '../../../../../../variables.scss'; .container { - padding: 40px; + header { + padding: 5px 40px 20px 40px; + background: $lightgrey; + + .title { + display: flex; + flex-direction: row; + + h2 { + text-transform: uppercase; + } + } + } h1 { text-align: center; color: $main; - margin: 60px 30px 60px 0; - svg { - font-size: 30px; - vertical-align: top; + .value { + font-size: 24px; } - span svg[data-icon='ltc'] { - width: 30px; - height: 30px; + i { + margin-left: 2px; vertical-align: top; - - g { - transform: scale(1.75) translate(-5px, -5px); - } - } - - .value { - font-size: 75px; } } h3 { font-size: 14px; text-align: center; - color: $black; - font-weight: bold; + color: $darkestgrey; + cursor: pointer; + + &:hover { + text-decoration: underline; + } } h2 { text-align: center; + margin-right: 10px; margin-bottom: 30px; text-transform: uppercase; - letter-spacing: 1.5px; font-size: 24px; } + dl { + padding: 40px 40px 40px 40px; + } + dt { text-align: left; float: left; @@ -56,8 +65,8 @@ dd { text-align: right; font-weight: 400; - padding: 19px 0; + padding: 30px 0 10px 0; margin-left: 0; - border-top: 1px solid $darkgrey; + border-bottom: 1px solid $darkgrey; } -} \ No newline at end of file +}