qr reader

4 files changed, 187 insertions, 0 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index f6cef7e90..f559e54db 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -51,6 +51,8 @@ import { ProviderDetailPage } from "./ProviderDetailPage.js";
 import { SettingsPage } from "./Settings.js";
 import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
+import { QrReaderPage } from "./QrReader.js";
+import { platform } from "../platform/api.js";
 
 export function Application(): VNode {
   const [globalNotification, setGlobalNotification] = useState<
@@ -162,6 +164,14 @@ export function Application(): VNode {
               {/**
                * PENDING
                */}
+              <Route
+                path={Pages.qr}
+                component={QrReaderPage}
+                onDetected={(talerActionUrl: string) => {
+                  platform.openWalletURIFromPopup(talerActionUrl);
+                }}
+              />
+
               <Route path={Pages.settings} component={SettingsPage} />
 
               {/**
diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
new file mode 100644
index 000000000..ba5a78570
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { createExample } from "../test-utils.js";
+import { QrReaderPage } from "./QrReader.js";
+
+export default {
+  title: "wallet/qr",
+};
+
+export const Reading = createExample(QrReaderPage, {});
diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
new file mode 100644
index 000000000..9c9ab7ce4
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
@@ -0,0 +1,146 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
+import { styled } from "@linaria/react";
+import { Fragment, h, VNode } from "preact";
+import { Ref, useEffect, useRef, useState } from "preact/hooks";
+import QrScanner from "qr-scanner";
+import { Alert } from "../mui/Alert.js";
+import { Button } from "../mui/Button.js";
+import { TextField } from "../mui/TextField.js";
+
+const QrVideo = styled.video`
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8px;
+  background-color: black;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > * {
+    margin-bottom: 20px;
+  }
+`;
+
+interface Props {
+  onDetected: (url: string) => void;
+}
+
+export function QrReaderPage({ onDetected }: Props): VNode {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  // const imageRef = useRef<HTMLImageElement>(null);
+  const qrScanner = useRef<QrScanner | null>(null);
+  const [value, onChange] = useState("");
+  const [active, setActive] = useState(false);
+
+  function start(): void {
+    qrScanner.current!.start();
+    onChange("");
+    setActive(true);
+  }
+  function stop(): void {
+    qrScanner.current!.stop();
+    setActive(false);
+  }
+
+  function check(v: string) {
+    return (
+      v.startsWith("taler://") && classifyTalerUri(v) !== TalerUriType.Unknown
+    );
+  }
+
+  useEffect(() => {
+    if (!videoRef.current) {
+      console.log("vide was not ready");
+      return;
+    }
+    const elem = videoRef.current;
+    setTimeout(() => {
+      qrScanner.current = new QrScanner(
+        elem,
+        ({ data, cornerPoints }) => {
+          if (check(data)) {
+            onDetected(data);
+            return;
+          }
+          onChange(data);
+          stop();
+        },
+        {
+          maxScansPerSecond: 5, //default 25
+          highlightScanRegion: true,
+        },
+      );
+      start();
+    }, 1);
+    return () => {
+      qrScanner.current?.destroy();
+    };
+  }, []);
+
+  const isValid = check(value);
+
+  return (
+    <Container>
+      {/* <InputFile onChange={(f) => scanImage(imageRef, f)}>
+        Read QR from file
+      </InputFile>
+      <div ref={imageRef} /> */}
+      <QrVideo ref={videoRef} />
+      <TextField
+        label="Taler URI"
+        variant="standard"
+        fullWidth
+        value={value}
+        onChange={onChange}
+      />
+      {isValid && (
+        <Button variant="contained" onClick={async () => onDetected(value)}>
+          Open
+        </Button>
+      )}
+      {!active && !isValid && (
+        <Fragment>
+          <Alert severity="error">
+            URI is not valid. Taler URI should start with `taler://`
+          </Alert>
+          <Button variant="contained" onClick={async () => start()}>
+            Try another
+          </Button>
+        </Fragment>
+      )}
+    </Container>
+  );
+}
+
+async function scanImage(
+  imageRef: Ref<HTMLImageElement>,
+  image: string,
+): Promise<void> {
+  const imageEl = new Image();
+  imageEl.src = image;
+  imageEl.width = 200;
+  imageRef.current!.appendChild(imageEl);
+  QrScanner.scanImage(image, {
+    alsoTryWithoutScanRegion: true,
+  })
+    .then((result) => console.log(result))
+    .catch((error) => console.log(error || "No QR code found."));
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index 4754721de..fc09ea541 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -34,6 +34,7 @@ import * as a13 from "./Transaction.stories.js";
 import * as a14 from "./Welcome.stories.js";
 import * as a15 from "./AddNewActionView.stories.js";
 import * as a16 from "./DeveloperPage.stories.js";
+import * as a17 from "./QrReader.stories.js";
 
 export default [
   a1,
@@ -51,4 +52,5 @@ export default [
   a14,
   a15,
   a16,
+  a17,
 ];