[web] Copy invoice

dnjooiopa · Apr 25, 2024 · 37fd209 · 37fd209
1 parent f3e4201
commit 37fd209
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -16,7 +16,8 @@
     "next-qrcode": "^2.5.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.1.0"
+    "react-icons": "^5.1.0",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",

diff --git a/web/src/app/(auth)/receive/Receive.tsx b/web/src/app/(auth)/receive/Receive.tsx
@@ -2,6 +2,8 @@
 
 import { FC, useState } from 'react'
 import { useQRCode } from 'next-qrcode'
+import { useCopyToClipboard } from 'usehooks-ts'
+import { FaCopy } from 'react-icons/fa'
 
 const Receive: FC<{}> = () => {
   const { Canvas: QRCanvas } = useQRCode()
@@ -10,6 +12,10 @@ const Receive: FC<{}> = () => {
   const [description, setDescription] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [invoice, setInvoice] = useState<string>('')
+  const [copied, setCopied] = useState<boolean>(false)
+  const [openInvoice, setOpenInvoice] = useState<boolean>(false)
+
+  const [_, copy] = useCopyToClipboard()
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -64,10 +70,38 @@ const Receive: FC<{}> = () => {
 
       {invoice && (
         <div className="flex flex-col">
-          <div className="mx-auto mt-6">
+          <div className="mx-auto mt-4">
             <QRCanvas text={invoice} options={{ width: 256 }} />
           </div>
-          <p className="mt-2 break-words">{invoice}</p>
+
+          <div className="mt-3 mx-auto">
+            {!copied ? (
+              <button
+                className="flex gap-1 rounded bg-gray-700 p-2 items-center"
+                onClick={() => {
+                  setCopied(true)
+                  setTimeout(() => setCopied(false), 2000)
+                  copy(invoice)
+                }}
+              >
+                <FaCopy className="cursor-pointer w-[32px] h-[32px]" />
+                <span>Copy</span>
+              </button>
+            ) : (
+              <p>Copied</p>
+            )}
+          </div>
+
+          <button
+            className="mt-3 p-2 rounded bg-gray-700"
+            onClick={() => {
+              setOpenInvoice(!openInvoice)
+            }}
+          >
+            {openInvoice ? 'Hide invoice' : 'Show invoice'}
+          </button>
+
+          {openInvoice && <p className="mt-1 break-words">{invoice}</p>}
         </div>
       )}
     </div>

diff --git a/web/src/app/(auth)/receive/page.tsx b/web/src/app/(auth)/receive/page.tsx
@@ -8,7 +8,7 @@ interface IPageProps {}
 const Page = ({}: IPageProps) => {
   return (
     <Fragment>
-      <div className="flex items-start mb-8">
+      <div className="flex items-start">
         <Link href="/">
           <button className="py-1 px-2 rounded border border-gray-700">{`<-back`}</button>
         </Link>

diff --git a/web/src/app/(auth)/send/page.tsx b/web/src/app/(auth)/send/page.tsx
@@ -8,7 +8,7 @@ interface IPageProps {}
 const Page = ({}: IPageProps) => {
   return (
     <Fragment>
-      <div className="flex items-start mb-8">
+      <div className="flex items-start">
         <Link href="/">
           <button className="py-1 px-2 rounded border border-gray-700">{`<-back`}</button>
         </Link>