feat: add qrscanner for addresses and invoices

package.json

@@ -26,6 +26,7 @@
         "sass": "^1.69.5",
         "typescript": "^5.2.2",
         "vite": "^4.5.1",
+        "vite-plugin-mkcert": "^1.16.0",
         "vite-plugin-node-polyfills": "^0.15.0",
         "vite-plugin-solid": "^2.7.2",
         "vitest": "^0.32.4"

src/Create.jsx

@@ -9,8 +9,10 @@ import ConnectMetamask from "./components/ConnectMetamask";
 import { CreateButton, setButtonLabel } from "./components/CreateButton";
 import Fees from "./components/Fees";
 import InvoiceInput from "./components/InvoiceInput";
+import QrScan from "./components/QrScan";
 import Reverse from "./components/Reverse";
 import { RBTC, sideReceive, sideSend } from "./consts";
+import { isMobile } from "./helper";
 import t from "./i18n";
 import {
     addressValid,
@@ -40,6 +42,7 @@ import {
     setSendAmountFormatted,
     setSendAmountValid,
     setValid,
+    wasmSupported,
     webln,
 } from "./signals";
 import { calculateReceiveAmount, calculateSendAmount } from "./utils/calculate";
@@ -293,6 +296,9 @@ const Create = () => {
                 </Show>
                 <InvoiceInput />
             </Show>
+            <Show when={isMobile && wasmSupported()}>
+                <QrScan />
+            </Show>
             <CreateButton />
             <AssetSelect />
         </div>

src/components/AddressInput.tsx

@@ -1,10 +1,11 @@
-import { createEffect } from "solid-js";
+import { createEffect, on } from "solid-js";
 
 import { decodeAddress } from "../compat";
 import { RBTC } from "../consts";
 import t from "../i18n";
 import {
     asset,
+    onchainAddress,
     reverse,
     sendAmountValid,
     setAddressValid,
@@ -39,11 +40,13 @@ const AddressInput = () => {
         }
     };
 
-    createEffect(() => {
-        if (sendAmountValid() && reverse() && asset() !== RBTC) {
-            validateAddress(inputRef);
-        }
-    });
+    createEffect(
+        on([sendAmountValid, onchainAddress], () => {
+            if (reverse() && asset() !== RBTC) {
+                validateAddress(inputRef);
+            }
+        }),
+    );
 
     return (
         <input
@@ -57,6 +60,7 @@ const AddressInput = () => {
             name="onchainAddress"
             autocomplete="off"
             placeholder={t("onchain_address", { asset: asset() })}
+            value={onchainAddress()}
         />
     );
 };

src/components/QrScan.tsx

@@ -0,0 +1,86 @@
+import log from "loglevel";
+import QrScanner from "qr-scanner";
+import { Show, createSignal, onCleanup, onMount } from "solid-js";
+
+import t from "../i18n";
+import {
+    camera,
+    reverse,
+    setCamera,
+    setInvoice,
+    setOnchainAddress,
+} from "../signals";
+import "../style/qrscan.scss";
+
+const QrScan = () => {
+    let qrRef: HTMLVideoElement;
+    let qrScanner: QrScanner;
+
+    const [scanning, setScanning] = createSignal(false);
+
+    onMount(async () => {
+        const hasCamera = await QrScanner.hasCamera();
+        log.debug("detecting camera: ", hasCamera);
+        if (!hasCamera) {
+            return;
+        }
+        setCamera(hasCamera);
+    });
+
+    const startScan = () => {
+        setScanning(true);
+        if (qrScanner === undefined) {
+            qrScanner = new QrScanner(
+                qrRef,
+                (result) => {
+                    log.debug("scanned qr code:", result.data);
+                    if (reverse()) {
+                        setOnchainAddress("");
+                        setOnchainAddress(result.data);
+                    } else {
+                        setInvoice("");
+                        setInvoice(result.data);
+                    }
+                    stopScan();
+                },
+                {},
+            );
+        }
+        qrScanner.start();
+    };
+
+    const stopScan = () => {
+        if (scanning()) {
+            qrScanner.destroy();
+            setScanning(false);
+            qrScanner = undefined;
+        }
+    };
+
+    onCleanup(() => {
+        stopScan();
+    });
+
+    return (
+        <>
+            <Show when={camera()}>
+                <Show when={!scanning()}>
+                    <button class="btn btn-light" onClick={startScan}>
+                        {t("scan_qr_code")}
+                    </button>
+                </Show>
+                <Show when={scanning()}>
+                    <div id="video-wrapper">
+                        <video id="qr-scanner" ref={qrRef}></video>
+                        <span class="close" onClick={stopScan}>
+                            X
+                        </span>
+                    </div>
+                </Show>
+                <hr />
+            </Show>
+        </>
+    );
+};
+
+export default QrScan;

src/i18n/i18n.ts

@@ -157,6 +157,7 @@ const dict = {
             'Press "{{ button }}" in order to open your connected wallet and confirm the displayed transaction.',
         fetch_lnurl: "Fetch invoice from LNURL/LNAddress",
         invalid_address: "Invalid {{ asset }} address",
+        scan_qr_code: "Scan QR Code",
     },
     de: {
         language: "Deutsch",
@@ -323,6 +324,7 @@ const dict = {
             '"{{ button }}" klicken um das verbundene Wallet zu öffnen und bestätige die angezeigte Transaktion.',
         fetch_lnurl: "Hole Rechnung von LNURL/LNAdresse",
         invalid_address: "Ungültige {{ asset }} Adresse",
+        scan_qr_code: "QR Code scannen",
     },
     es: {
         language: "Español",
@@ -488,6 +490,7 @@ const dict = {
             'Pulse "{{ button }}" para abrir su monedero conectado y confirmar la transacción mostrada.',
         fetch_lnurl: "Obtener factura de LNURL/LNAddress",
         invalid_address: "Dirección {{ asset }} inválida",
+        scan_qr_code: "Escanear código QR",
     },
     zh: {
         language: "中文",
@@ -639,6 +642,7 @@ const dict = {
             "按“{{ button }}”以打开已连接的钱包并确认显示的交易。",
         fetch_lnurl: "从LNURL/LNAddress获取发票",
         invalid_address: "无效的{{ asset }}地址",
+        scan_qr_code: "扫描 QR 码",
     },
 };
 

src/signals.js

@@ -17,7 +17,6 @@ export const [config, setConfig] = createSignal(0);
 
 export const [online, setOnline] = createSignal(true);
 export const [wasmSupported, setWasmSupported] = createSignal(true);
-export const [webln, setWebln] = createSignal(false);
 
 // fees
 export const [boltzFee, setBoltzFee] = createSignal(0);
@@ -106,6 +105,9 @@ export const [sendAmountValid, setSendAmountValid] = createSignal(true);
 export const [notification, setNotification] = createSignal("");
 export const [notificationType, setNotificationType] = createSignal("");
 
+export const [webln, setWebln] = createSignal(false);
+export const [camera, setCamera] = createSignal(false);
+
 // effects
 createRoot(() => {
     createEffect(() => setReverse(assetReceive() !== LN));

src/style/qrscan.scss

@@ -0,0 +1,31 @@
+#video-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 2;
+    background: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #14283f;
+    font-weight: 800;
+    font-size: 23px;
+    width: 42px;
+}
+
+video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

tests/components/AddressInput.spec.tsx

@@ -39,11 +39,9 @@ describe("AddressInput", () => {
                 target: { value: address },
             });
 
-            expect(setAddressValid).toHaveBeenCalledTimes(2);
             expect(setAddressValid).toHaveBeenCalledWith(valid);
 
             if (valid) {
-                expect(setOnchainAddress).toHaveBeenCalledTimes(1);
                 expect(setOnchainAddress).toHaveBeenCalledWith(address);
             } else {
                 expect(input.className).toEqual("invalid");

tests/components/QrScan.spec.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@solidjs/testing-library";
+import { describe, expect, test } from "vitest";
+
+import QrScan from "../../src/components/QrScan";
+import t from "../../src/i18n";
+import * as signals from "../../src/signals";
+
+describe("QrScan", () => {
+    test("should render the QrScan component", async () => {
+        render(() => <QrScan />);
+        signals.setCamera(true);
+        const button = await screen.findByText(t("scan_qr_code"));
+        expect(button).not.toBeUndefined();
+    });
+});

vite.config.js

@@ -1,10 +1,12 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
+import mkcert from "vite-plugin-mkcert";
 
 export default defineConfig({
-    plugins: [solidPlugin(), nodePolyfills()],
+    plugins: [solidPlugin(), nodePolyfills(), mkcert()],
     server: {
+        https: true,
         cors: { origin: "*" },
     },
     build: {