Merge pull request #117 from NahomAgidew/feature/copy-invoice-button

added button to copy invoice

app/routes/activity/components/components/Modal/Invoice/Invoice.js

@@ -5,15 +5,23 @@ 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 }) => (
+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}>
         {
@@ -42,12 +50,12 @@ const Invoice = ({ invoice, ticker, currentTicker }) => (
         <QRCode value={invoice.payment_request} size={150} />
       </div>
       <div className={styles.input}>
-      <input
-        readOnly
-        className={styles.paymentRequest}
-        onClick={event => event.target.select()}
-        defaultValue={invoice.payment_request}
-      />
+        <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
@@ -55,6 +63,7 @@ const Invoice = ({ invoice, ticker, currentTicker }) => (
       </p>
     </div>
   )
+}
 
 Invoice.propTypes = {
   invoice: PropTypes.object.isRequired,

app/routes/activity/components/components/Modal/Invoice/Invoice.scss

@@ -53,7 +53,6 @@
 
   .input {
     padding: 10px 40px;
-
     .paymentRequest {
       text-align: center;
       font-size: 12px;
@@ -75,4 +74,33 @@
       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;
+        }
+      }
+  }
 }