Merge pull request #11 from atlantabitdevs/receive

Implement copy invoice

.gitignore

@@ -29,4 +29,7 @@ sketch
 .env
 
 eslintrc.json
-frontend/eslintrc.json
+frontend/eslintrc.json
+.eslintignore
+backend/.eslintignore
+.tsconfig.json

frontend/src/routes/Receive.js

@@ -1,8 +1,46 @@
 import { CaretDownIcon, ContactsIcon, CopyIcon, EditIcon, QrCodeIcon, ShareIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { useEffect, useState } from "react";
 import Button from "../components/Button";
 import InputText from "../components/InputText";
 
 const Receive = () => {
+  const [paymentInvoice, setPaymentInvoice] = useState('lnbcrt10u1p38wdlrdpgf4ujq3nfwfehggzzd96xxmmfdcs9qcted4jkuappnp4qdnruvuevwuqskwrqva9jpax24rczdf2qeetaupsr40qcppqy8rtypp5zym6sjac2srj06ww8s0ehe5jwq0y25w2z4ugjnqjm83vc4n0u4hssp5r5x9xrp7l36euve6qr262n9n22v9gsxsh6exnxjnvg39424gtgys9qyysgqcqpcgafsss7sev079jjdvwlhelh9mys02p4t0pzg0y2y9k8sshxrhcfhwph2ttd8j2gg8h7um5usrv3z267dha3uar6urrp67fqul6yun5cqz0gkk9');
+  console.log(paymentInvoice)
+  const [copied, setCopied] = useState(false);
+  const paymentInvoiceConst = 'lnbcrt10u1p38wdlrdpgf4ujq3nfwfehggzzd96xxmmfdcs9qcted4jkuappnp4qdnruvuevwuqskwrqva9jpax24rczdf2qeetaupsr40qcppqy8rtypp5zym6sjac2srj06ww8s0ehe5jwq0y25w2z4ugjnqjm83vc4n0u4hssp5r5x9xrp7l36euve6qr262n9n22v9gsxsh6exnxjnvg39424gtgys9qyysgqcqpcgafsss7sev079jjdvwlhelh9mys02p4t0pzg0y2y9k8sshxrhcfhwph2ttd8j2gg8h7um5usrv3z267dha3uar6urrp67fqul6yun5cqz0gkk9';
+
+  const invoiceUrl = 'http://localhost:8080'
+
+  const getInvoice = async () => {
+    // const response = await fetch(invoiceUrl);
+    // return response.json();
+    console.log('simulated http request')
+  };
+
+  // useEffect(() => {
+  //   // request invoice from back end
+  //   setPaymentInvoice(getInvoice());
+
+  // }, [])
+
+  const copyTextToClipboard = async (text) => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(JSON.stringify(text));
+    } else {
+      return document.execCommand('copy', true, text);
+    }
+  }
+
+  const handleCopy = () => {
+    setCopied(true);
+    copyTextToClipboard(paymentInvoice);
+    setTimeout(() => {
+      setCopied(false)
+    }, 2000);
+  };
+
+
+
   return (
     <>
       <div className="min-h-screen">
@@ -13,6 +51,9 @@ const Receive = () => {
           <div className="tile">
             <QrCodeIcon />
           </div>
+          <div className={`flex justify-center mb-2 ${copied ? "" : "invisible"}`}>
+            <p>Invoice copied to clipboard!</p>
+          </div>
           <div className="flex justify-around align-center space-x-4">
             <div className="outline outline-1 rounded-md basis-1/2">
               <Button style="free" size="small">
@@ -21,7 +62,7 @@ const Receive = () => {
               </Button>
             </div>
             <div className="outline outline-1 rounded-md basis-1/2">
-              <Button style="free" size="small">
+              <Button style="free" size="small" onClick={handleCopy}>
                 <CopyIcon className="w-8 h-8" />
                 <div>Copy</div>
               </Button>