diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js index 540f2b99..ed248760 100644 --- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js @@ -5,56 +5,64 @@ 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 } from 'react-icons/lib/fa' +import { FaCircle, FaCopy } from 'react-icons/lib/fa' import { btc } from 'utils' import styles from './Invoice.scss' -const Invoice = ({ invoice, ticker, currentTicker }) => ( -
-
- { - !invoice.settled && +const Invoice = ({ invoice, ticker, currentTicker }) => { + const copyOnClick = (data) => { + copy(data) + showNotification('Noice', 'Successfully copied to clipboard') + } + return ( +
+
+ { + !invoice.settled &&

Not Paid

- } -
-
-

{invoice.memo}

-

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

-
-
- -
-
- event.target.select()} - defaultValue={invoice.payment_request} - /> -
-

+ } +

+
+

{invoice.memo}

+

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

+
+
+ +
+
+

+ {invoice.payment_request} + copyOnClick(invoice.payment_request)} className='hint--left' data-hint='Copy Invoice'> + + +

+
+

Created on - {invoice.creation_date * 1000} -

-
-) + {invoice.creation_date * 1000} +

+
+ ) +} Invoice.propTypes = { invoice: PropTypes.object.isRequired, diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss index 3880bfb0..cddadb64 100644 --- a/app/routes/activity/components/components/Modal/Invoice/Invoice.scss +++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.scss @@ -53,7 +53,7 @@ .input { padding: 10px 40px; - + .paymentRequest { text-align: center; font-size: 12px; @@ -75,4 +75,33 @@ margin-left: 3px; } } + + .hello { + 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; + } + } + } } \ No newline at end of file