aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/taler-wallet-webextension/package.json1
-rw-r--r--packages/taler-wallet-webextension/src/NavigationBar.tsx47
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx13
-rw-r--r--packages/taler-wallet-webextension/src/mui/InputFile.tsx78
-rw-r--r--packages/taler-wallet-webextension/src/popup/Application.tsx1
-rw-r--r--packages/taler-wallet-webextension/src/svg/qr_code_24px.svg1
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Application.tsx10
-rw-r--r--packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx29
-rw-r--r--packages/taler-wallet-webextension/src/wallet/QrReader.tsx146
-rw-r--r--packages/taler-wallet-webextension/src/wallet/index.stories.tsx2
10 files changed, 311 insertions, 17 deletions
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json
index b62bae081..8d823e60d 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -27,6 +27,7 @@
"history": "4.10.1",
"preact": "^10.6.5",
"preact-router": "3.2.1",
+ "qr-scanner": "^1.4.1",
"qrcode-generator": "^1.4.4",
"tslib": "^2.3.1",
"ws": "7.4.5"
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index f782575de..edcf44d35 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -33,6 +33,7 @@ import {
} from "./components/styled/index.js";
import { useTranslationContext } from "./context/translation.js";
import settingsIcon from "./svg/settings_black_24dp.svg";
+import qrIcon from "./svg/qr_code_24px.svg";
/**
* List of pages used by the wallet
@@ -101,6 +102,7 @@ export const Pages = {
),
backupProviderAdd: "/backup/provider/add",
+ qr: "/qr",
settings: "/settings",
settingsExchangeAdd: pageDefinition<{ currency?: string }>(
"/settings/exchange/add/:currency?",
@@ -127,13 +129,22 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
<a href={Pages.backup} class={path.startsWith("/backup") ? "active" : ""}>
<i18n.Translate>Backup</i18n.Translate>
</a>
- <a href={Pages.settings}>
- <SvgIcon
- title={i18n.str`Settings`}
- dangerouslySetInnerHTML={{ __html: settingsIcon }}
- color="white"
- />
- </a>
+ <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}>
+ <a href={Pages.qr}>
+ <SvgIcon
+ title={i18n.str`QR Reader`}
+ dangerouslySetInnerHTML={{ __html: qrIcon }}
+ color="white"
+ />
+ </a>
+ <a href={Pages.settings}>
+ <SvgIcon
+ title={i18n.str`Settings`}
+ dangerouslySetInnerHTML={{ __html: settingsIcon }}
+ color="white"
+ />
+ </a>
+ </div>
</NavigationHeader>
);
}
@@ -162,12 +173,24 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode {
</a>
</JustInDevMode>
- <a
- href={Pages.settings}
- class={path.startsWith("/settings") ? "active" : ""}
+ <div
+ style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}
>
- <i18n.Translate>Settings</i18n.Translate>
- </a>
+ <a href={Pages.qr}>
+ <SvgIcon
+ title={i18n.str`QR Reader`}
+ dangerouslySetInnerHTML={{ __html: qrIcon }}
+ color="white"
+ />
+ </a>
+ <a href={Pages.settings}>
+ <SvgIcon
+ title={i18n.str`Settings`}
+ dangerouslySetInnerHTML={{ __html: settingsIcon }}
+ color="white"
+ />
+ </a>
+ </div>
</NavigationHeader>
</NavigationHeaderHolder>
);
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 2430be7c1..70f996743 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -820,7 +820,8 @@ export const NavigationHeader = styled.div`
width: 500px;
}
- & > a {
+ & > a,
+ & > div {
color: #f8faf7;
display: inline-block;
width: 100%;
@@ -837,18 +838,20 @@ export const NavigationHeader = styled.div`
}
`;
-export const SvgIcon = styled.div<{
+interface SvgIconProps {
title: string;
color: string;
onClick?: any;
-}>`
+}
+export const SvgIcon = styled.div<SvgIconProps>`
& > svg {
fill: ${({ color }) => color};
}
width: 24px;
height: 24px;
- margin-left: auto;
+ margin-left: 8px;
margin-right: 8px;
+ display: inline;
padding: 4px;
cursor: ${({ onClick }) => (onClick ? "pointer" : "inherit")};
`;
@@ -857,7 +860,7 @@ export const Icon = styled.div`
background-color: gray;
width: 24px;
height: 24px;
- margin-left: auto;
+ margin-left: 8px;
margin-right: 8px;
padding: 4px;
`;
diff --git a/packages/taler-wallet-webextension/src/mui/InputFile.tsx b/packages/taler-wallet-webextension/src/mui/InputFile.tsx
new file mode 100644
index 000000000..2b67dc99b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/InputFile.tsx
@@ -0,0 +1,78 @@
+/*
+ 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 { ComponentChildren, h, VNode } from "preact";
+import { useRef, useState } from "preact/hooks";
+import { Button } from "./Button.js";
+// import { MAX_IMAGE_SIZE as MAX_IMAGE_UPLOAD_SIZE } from "../../utils/constants";
+// import { InputProps, useField } from "./useField";
+
+const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
+
+interface Props {
+ children: ComponentChildren;
+ onChange: (v: string) => void;
+}
+
+export function InputFile<T>({ onChange, children }: Props): VNode {
+ const image = useRef<HTMLInputElement>(null);
+
+ const [sizeError, setSizeError] = useState(false);
+
+ return (
+ <div>
+ <p>
+ <Button
+ variant="contained"
+ onClick={async () => image.current?.click()}
+ >
+ {children}
+ </Button>
+ <input
+ ref={image}
+ style={{ display: "none" }}
+ type="file"
+ name={String(name)}
+ onChange={(e) => {
+ const f: FileList | null = e.currentTarget.files;
+ if (!f || f.length != 1) {
+ return;
+ }
+ if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
+ setSizeError(true);
+ return;
+ }
+ setSizeError(false);
+ return f[0].arrayBuffer().then((b) => {
+ const b64 = btoa(
+ new Uint8Array(b).reduce(
+ (data, byte) => data + String.fromCharCode(byte),
+ "",
+ ),
+ );
+ return onChange(`data:${f[0].type};base64,${b64}` as any);
+ });
+ }}
+ />
+ </p>
+ {sizeError && <p>Image should be smaller than 1 MB</p>}
+ </div>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index 521679237..be3c8a2f8 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -133,6 +133,7 @@ export function Application(): VNode {
path={Pages.backupProviderAdd}
component={RedirectToWalletPage}
/>
+ <Route path={Pages.qr} component={RedirectToWalletPage} />
<Route path={Pages.settings} component={RedirectToWalletPage} />
<Route
path={Pages.settingsExchangeAdd.pattern}
diff --git a/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg b/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg
new file mode 100644
index 000000000..c0c158359
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M3,11h8V3H3V11z M5,5h4v4H5V5z"/><path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z"/><path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z"/><rect height="2" width="2" x="19" y="19"/><rect height="2" width="2" x="13" y="13"/><rect height="2" width="2" x="15" y="15"/><rect height="2" width="2" x="13" y="17"/><rect height="2" width="2" x="15" y="19"/><rect height="2" width="2" x="17" y="17"/><rect height="2" width="2" x="17" y="13"/><rect height="2" width="2" x="19" y="15"/></g></g></svg> \ No newline at end of file
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,
];