diff options
Diffstat (limited to 'packages')
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, ]; |
