Add QR code scanner for withdrawal invoices (#600)

Co-authored-by: ekzyis <ek@stacker.news>

package-lock.json

@@ -17,6 +17,7 @@
         "@opensearch-project/opensearch": "^2.4.0",
         "@prisma/client": "^5.4.2",
         "@slack/web-api": "^6.9.0",
+        "@yudiel/react-qr-scanner": "^1.1.10",
         "acorn": "^8.10.0",
         "ajv": "^8.12.0",
         "async-retry": "^1.3.1",
@@ -4056,6 +4057,38 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@yudiel/react-qr-scanner": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@yudiel/react-qr-scanner/-/react-qr-scanner-1.1.10.tgz",
+      "integrity": "sha512-+YIHbnocynkkGgyMK8MMkn1NBnJRwJntdm4shQ+linm4NdGdSAavLYxJYwnk2PixZyVu/GZ3Uc2aM0XWlBq+Zw==",
+      "dependencies": {
+        "@zxing/library": "^0.20.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@zxing/library": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.20.0.tgz",
+      "integrity": "sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==",
+      "dependencies": {
+        "ts-custom-error": "^3.2.1"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -14838,6 +14871,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/ts-invariant": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
@@ -19143,6 +19184,29 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "@yudiel/react-qr-scanner": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@yudiel/react-qr-scanner/-/react-qr-scanner-1.1.10.tgz",
+      "integrity": "sha512-+YIHbnocynkkGgyMK8MMkn1NBnJRwJntdm4shQ+linm4NdGdSAavLYxJYwnk2PixZyVu/GZ3Uc2aM0XWlBq+Zw==",
+      "requires": {
+        "@zxing/library": "^0.20.0"
+      }
+    },
+    "@zxing/library": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.20.0.tgz",
+      "integrity": "sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==",
+      "requires": {
+        "@zxing/text-encoding": "~0.9.0",
+        "ts-custom-error": "^3.2.1"
+      }
+    },
+    "@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -26765,6 +26829,11 @@
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.0.2.tgz",
       "integrity": "sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w=="
     },
+    "ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A=="
+    },
     "ts-invariant": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",

package.json

@@ -20,6 +20,7 @@
     "@opensearch-project/opensearch": "^2.4.0",
     "@prisma/client": "^5.4.2",
     "@slack/web-api": "^6.9.0",
+    "@yudiel/react-qr-scanner": "^1.1.10",
     "acorn": "^8.10.0",
     "ajv": "^8.12.0",
     "async-retry": "^1.3.1",
@@ -109,4 +110,4 @@
     "eslint": "^8.51.0",
     "standard": "^17.1.0"
   }
-}
+}

pages/wallet.js

@@ -22,6 +22,11 @@ import HiddenWalletSummary from '../components/hidden-wallet-summary'
 import AccordianItem from '../components/accordian-item'
 import { lnAddrOptions } from '../lib/lnurl'
 import useDebounceCallback from '../components/use-debounce-callback'
+import { QrScanner } from '@yudiel/react-qr-scanner'
+import CameraIcon from '../svgs/camera-line.svg'
+import { useShowModal } from '../components/modal'
+import { useField } from 'formik'
+import { useToast } from '../components/toast'
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })
 
@@ -239,6 +244,7 @@ export function InvWithdrawal () {
           required
           autoFocus
           clear
+          append={<InvoiceScanner fieldName='invoice' />}
         />
         <Input
           label='max fee'
@@ -252,6 +258,36 @@ export function InvWithdrawal () {
   )
 }
 
+function InvoiceScanner ({ fieldName }) {
+  const showModal = useShowModal()
+  const [,, helpers] = useField(fieldName)
+  const toaster = useToast()
+  return (
+    <InputGroup.Text
+      style={{ cursor: 'pointer' }}
+      onClick={() => {
+        showModal(onClose => {
+          return (
+            <QrScanner
+              onDecode={(result) => {
+                helpers.setValue(result.replace(/^lightning:/, '').toLowerCase())
+                onClose()
+              }}
+              onError={(error) => {
+                toaster.danger(error?.message || error?.toString?.())
+              }}
+            />
+          )
+        })
+      }}
+    >
+      <CameraIcon
+        height={20} width={20} fill='var(--bs-body-color)'
+      />
+    </InputGroup.Text>
+  )
+}
+
 function LnQRWith ({ k1, encodedUrl }) {
   const router = useRouter()
   const query = gql`

svgs/camera-line.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        d="M9.82843 5L7.82843 7H4V19H20V7H16.1716L14.1716 5H9.82843ZM9 3H15L17 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V6C2 5.44772 2.44772 5 3 5H7L9 3ZM12 18C8.96243 18 6.5 15.5376 6.5 12.5C6.5 9.46243 8.96243 7 12 7C15.0376 7 17.5 9.46243 17.5 12.5C17.5 15.5376 15.0376 18 12 18ZM12 16C13.933 16 15.5 14.433 15.5 12.5C15.5 10.567 13.933 9 12 9C10.067 9 8.5 10.567 8.5 12.5C8.5 14.433 10.067 16 12 16Z">
+    </path>
+</svg>