aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/taler-wallet-webextension/src/components/Diagnostics.tsx76
-rw-r--r--packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx47
-rw-r--r--packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx24
-rw-r--r--packages/taler-wallet-webextension/src/pages/welcome.tsx206
-rw-r--r--packages/taler-wallet-webextension/src/popup/popup.stories.tsx (renamed from packages/taler-wallet-webextension/src/pages/popup.stories.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/popup/popup.tsx (renamed from packages/taler-wallet-webextension/src/pages/popup.tsx)7
-rw-r--r--packages/taler-wallet-webextension/src/popupEntryPoint.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/wallet/pay.tsx (renamed from packages/taler-wallet-webextension/src/pages/pay.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/payback.tsx (renamed from packages/taler-wallet-webextension/src/pages/payback.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/refund.tsx (renamed from packages/taler-wallet-webextension/src/pages/refund.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/reset-required.tsx (renamed from packages/taler-wallet-webextension/src/pages/reset-required.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/return-coins.tsx (renamed from packages/taler-wallet-webextension/src/pages/return-coins.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/tip.tsx (renamed from packages/taler-wallet-webextension/src/pages/tip.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/welcome.tsx83
-rw-r--r--packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx (renamed from packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/wallet/withdraw.tsx (renamed from packages/taler-wallet-webextension/src/pages/withdraw.tsx)0
-rw-r--r--packages/taler-wallet-webextension/src/walletEntryPoint.tsx11
17 files changed, 240 insertions, 216 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
new file mode 100644
index 000000000..146b0dd3e
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -0,0 +1,76 @@
+import { useState, useEffect } from "preact/hooks";
+import { getDiagnostics } from "../wxApi";
+import { PageLink } from "../renderHtml";
+import { WalletDiagnostics } from "@gnu-taler/taler-util";
+import { JSX } from "preact/jsx-runtime";
+
+
+export function Diagnostics(): JSX.Element | null {
+ const [timedOut, setTimedOut] = useState(false);
+ const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>(
+ undefined
+ );
+
+ useEffect(() => {
+ let gotDiagnostics = false;
+ setTimeout(() => {
+ if (!gotDiagnostics) {
+ console.error("timed out");
+ setTimedOut(true);
+ }
+ }, 1000);
+ const doFetch = async (): Promise<void> => {
+ const d = await getDiagnostics();
+ console.log("got diagnostics", d);
+ gotDiagnostics = true;
+ setDiagnostics(d);
+ };
+ console.log("fetching diagnostics");
+ doFetch();
+ }, []);
+
+ if (timedOut) {
+ return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
+ }
+
+ if (diagnostics) {
+ if (diagnostics.errors.length === 0) {
+ return null;
+ } else {
+ return (
+ <div
+ style={{
+ borderLeft: "0.5em solid red",
+ paddingLeft: "1em",
+ paddingTop: "0.2em",
+ paddingBottom: "0.2em",
+ }}
+ >
+ <p>Problems detected:</p>
+ <ol>
+ {diagnostics.errors.map((errMsg) => (
+ <li key={errMsg}>{errMsg}</li>
+ ))}
+ </ol>
+ {diagnostics.firefoxIdbProblem ? (
+ <p>
+ Please check in your <code>about:config</code> settings that you
+ have IndexedDB enabled (check the preference name{" "}
+ <code>dom.indexedDB.enabled</code>).
+ </p>
+ ) : null}
+ {diagnostics.dbOutdated ? (
+ <p>
+ Your wallet database is outdated. Currently automatic migration is
+ not supported. Please go{" "}
+ <PageLink pageName="/reset-required">here</PageLink> to reset
+ the wallet database.
+ </p>
+ ) : null}
+ </div>
+ );
+ }
+ }
+
+ return <p>Running diagnostics ...</p>;
+}
diff --git a/packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx b/packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx
new file mode 100644
index 000000000..50f4feb62
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx
@@ -0,0 +1,47 @@
+/*
+ This file is part of GNU Taler
+ (C) 2019 Taler Systems SA
+
+ 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 { JSX } from "preact/jsx-runtime";
+
+export function PermissionsCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element {
+ return (
+ <div>
+ <input
+ checked={enabled}
+ onClick={onToggle}
+ type="checkbox"
+ id="checkbox-perm"
+ style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} />
+ <label
+ htmlFor="checkbox-perm"
+ style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+ >
+ Automatically open wallet based on page content
+ </label>
+ <span
+ style={{
+ color: "#383838",
+ fontSize: "smaller",
+ display: "block",
+ marginLeft: "2em",
+ }}
+ >
+ (Enabling this option below will make using the wallet faster, but
+ requires more permissions from your browser.)
+ </span>
+ </div>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx
new file mode 100644
index 000000000..f5c788cf6
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx
@@ -0,0 +1,24 @@
+import { useState, useEffect } from "preact/hooks";
+import * as wxApi from "../wxApi";
+import { handleExtendedPerm } from "../wallet/welcome";
+
+
+export function useExtendedPermissions(): [boolean, () => void] {
+ const [enabled, setEnabled] = useState(false);
+
+ const toggle = () => {
+ setEnabled(v => !v);
+ handleExtendedPerm(enabled).then(result => {
+ setEnabled(result);
+ });
+ };
+
+ useEffect(() => {
+ async function getExtendedPermValue(): Promise<void> {
+ const res = await wxApi.getExtendedPermissions();
+ setEnabled(res.newValue);
+ }
+ getExtendedPermValue();
+ }, []);
+ return [enabled, toggle];
+}
diff --git a/packages/taler-wallet-webextension/src/pages/welcome.tsx b/packages/taler-wallet-webextension/src/pages/welcome.tsx
deleted file mode 100644
index 808143189..000000000
--- a/packages/taler-wallet-webextension/src/pages/welcome.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2019 Taler Systems SA
-
- 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/>
- */
-
-/**
- * Welcome page, shown on first installs.
- *
- * @author Florian Dold
- */
-
-import { useState, useEffect, useMemo, useCallback } from "preact/hooks";
-import { getDiagnostics } from "../wxApi";
-import { PageLink } from "../renderHtml";
-import * as wxApi from "../wxApi";
-import { getPermissionsApi } from "../compat";
-import { extendedPermissions } from "../permissions";
-import { WalletDiagnostics } from "@gnu-taler/taler-util";
-import { Fragment, JSX } from "preact/jsx-runtime";
-
-export function Diagnostics(): JSX.Element | null {
- const [timedOut, setTimedOut] = useState(false);
- const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>(
- undefined,
- );
-
- useEffect(() => {
- let gotDiagnostics = false;
- setTimeout(() => {
- if (!gotDiagnostics) {
- console.error("timed out");
- setTimedOut(true);
- }
- }, 1000);
- const doFetch = async (): Promise<void> => {
- const d = await getDiagnostics();
- console.log("got diagnostics", d);
- gotDiagnostics = true;
- setDiagnostics(d);
- };
- console.log("fetching diagnostics");
- doFetch();
- }, []);
-
- if (timedOut) {
- return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
- }
-
- if (diagnostics) {
- if (diagnostics.errors.length === 0) {
- return null;
- } else {
- return (
- <div
- style={{
- borderLeft: "0.5em solid red",
- paddingLeft: "1em",
- paddingTop: "0.2em",
- paddingBottom: "0.2em",
- }}
- >
- <p>Problems detected:</p>
- <ol>
- {diagnostics.errors.map((errMsg) => (
- <li key={errMsg}>{errMsg}</li>
- ))}
- </ol>
- {diagnostics.firefoxIdbProblem ? (
- <p>
- Please check in your <code>about:config</code> settings that you
- have IndexedDB enabled (check the preference name{" "}
- <code>dom.indexedDB.enabled</code>).
- </p>
- ) : null}
- {diagnostics.dbOutdated ? (
- <p>
- Your wallet database is outdated. Currently automatic migration is
- not supported. Please go{" "}
- <PageLink pageName="/reset-required">here</PageLink> to reset
- the wallet database.
- </p>
- ) : null}
- </div>
- );
- }
- }
-
- return <p>Running diagnostics ...</p>;
-}
-
-
-async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> {
- let nextVal: boolean | undefined;
-
- if (!isEnabled) {
- const granted = await new Promise<boolean>((resolve, reject) => {
- // We set permissions here, since apparently FF wants this to be done
- // as the result of an input event ...
- getPermissionsApi().request(extendedPermissions, (granted: boolean) => {
- if (chrome.runtime.lastError) {
- console.error("error requesting permissions");
- console.error(chrome.runtime.lastError);
- reject(chrome.runtime.lastError);
- return;
- }
- console.log("permissions granted:", granted);
- resolve(granted);
- });
- });
- const res = await wxApi.setExtendedPermissions(granted);
- nextVal = res.newValue;
- } else {
- const res = await wxApi.setExtendedPermissions(false);
- nextVal = res.newValue;
- }
- console.log("new permissions applied:", nextVal ?? false);
- return nextVal ?? false
-}
-
-export function useExtendedPermissions(): [boolean, () => void] {
- const [enabled, setEnabled] = useState(false);
-
- const toggle = () => {
- setEnabled(v => !v)
- handleExtendedPerm(enabled).then( result => {
- setEnabled(result)
- } )
- }
-
- useEffect(() => {
- async function getExtendedPermValue(): Promise<void> {
- const res = await wxApi.getExtendedPermissions();
- setEnabled(res.newValue);
- }
- getExtendedPermValue();
- },[]);
- return [enabled, toggle]
-}
-
-export function PermissionsCheckbox({enabled, onToggle}: {enabled:boolean, onToggle: () => void}): JSX.Element {
- return (
- <div>
- <input
- checked={enabled}
- onClick={onToggle}
- type="checkbox"
- id="checkbox-perm"
- style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
- />
- <label
- htmlFor="checkbox-perm"
- style={{ marginLeft: "0.5em", fontWeight: "bold" }}
- >
- Automatically open wallet based on page content
- </label>
- <span
- style={{
- color: "#383838",
- fontSize: "smaller",
- display: "block",
- marginLeft: "2em",
- }}
- >
- (Enabling this option below will make using the wallet faster, but
- requires more permissions from your browser.)
- </span>
- </div>
- );
-}
-
-export function Welcome(): JSX.Element {
- const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
- return (
- <>
- <p>Thank you for installing the wallet.</p>
- <Diagnostics />
- <h2>Permissions</h2>
- <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/>
- <h2>Next Steps</h2>
- <a href="https://demo.taler.net/" style={{ display: "block" }}>
- Try the demo »
- </a>
- <a href="https://demo.taler.net/" style={{ display: "block" }}>
- Learn how to top up your wallet balance »
- </a>
- </>
- );
-}
-
-/**
- * @deprecated to be removed
- */
-export function createWelcomePage(): JSX.Element {
- return <Welcome />;
-}
diff --git a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/popup.stories.tsx
index 0cb51a336..0cb51a336 100644
--- a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/popup.stories.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx
index 7759b1819..0f76d7728 100644
--- a/packages/taler-wallet-webextension/src/pages/popup.tsx
+++ b/packages/taler-wallet-webextension/src/popup/popup.tsx
@@ -41,12 +41,13 @@ import {
} from "@gnu-taler/taler-util";
import { format } from "date-fns";
import { Component, ComponentChildren, Fragment, JSX } from "preact";
-import { route, Route, Router } from 'preact-router';
-import { Match } from 'preact-router/match';
+import { route } from 'preact-router';
import { useEffect, useState } from "preact/hooks";
+import { Diagnostics } from "../components/Diagnostics";
+import { PermissionsCheckbox } from "../components/PermissionsCheckbox";
+import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
import { PageLink, renderAmount } from "../renderHtml";
import * as wxApi from "../wxApi";
-import { PermissionsCheckbox, useExtendedPermissions, Diagnostics } from "./welcome";
export enum Pages {
balance = '/balance',
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 0ef5a4896..926ae7aa7 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -27,7 +27,7 @@ import { useEffect, useState } from "preact/hooks";
import {
actionForTalerUri, findTalerUriInActiveTab, Pages, WalletBalanceView, WalletDebug, WalletHistory,
WalletNavBar, WalletSettings, WalletTransaction, WalletTransactionView
-} from "./pages/popup";
+} from "./popup/popup";
import Match from "preact-router/match";
import Router, { route, Route } from "preact-router";
// import { Application } from "./Application";
diff --git a/packages/taler-wallet-webextension/src/pages/pay.tsx b/packages/taler-wallet-webextension/src/wallet/pay.tsx
index e958cd484..e958cd484 100644
--- a/packages/taler-wallet-webextension/src/pages/pay.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/pay.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/payback.tsx b/packages/taler-wallet-webextension/src/wallet/payback.tsx
index 4233b1f96..4233b1f96 100644
--- a/packages/taler-wallet-webextension/src/pages/payback.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/payback.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/wallet/refund.tsx
index 1991bc9d8..1991bc9d8 100644
--- a/packages/taler-wallet-webextension/src/pages/refund.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/refund.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/reset-required.tsx b/packages/taler-wallet-webextension/src/wallet/reset-required.tsx
index 0be7c09c5..0be7c09c5 100644
--- a/packages/taler-wallet-webextension/src/pages/reset-required.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/reset-required.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/return-coins.tsx b/packages/taler-wallet-webextension/src/wallet/return-coins.tsx
index 2273d1454..2273d1454 100644
--- a/packages/taler-wallet-webextension/src/pages/return-coins.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/return-coins.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/tip.tsx b/packages/taler-wallet-webextension/src/wallet/tip.tsx
index d832976d8..d832976d8 100644
--- a/packages/taler-wallet-webextension/src/pages/tip.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/tip.tsx
diff --git a/packages/taler-wallet-webextension/src/wallet/welcome.tsx b/packages/taler-wallet-webextension/src/wallet/welcome.tsx
new file mode 100644
index 000000000..9be62bf8b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/welcome.tsx
@@ -0,0 +1,83 @@
+/*
+ This file is part of GNU Taler
+ (C) 2019 Taler Systems SA
+
+ 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/>
+ */
+
+/**
+ * Welcome page, shown on first installs.
+ *
+ * @author Florian Dold
+ */
+
+import * as wxApi from "../wxApi";
+import { getPermissionsApi } from "../compat";
+import { extendedPermissions } from "../permissions";
+import { Fragment, JSX } from "preact/jsx-runtime";
+import { PermissionsCheckbox } from "../components/PermissionsCheckbox";
+import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
+import { Diagnostics } from "../components/Diagnostics";
+
+export async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> {
+ let nextVal: boolean | undefined;
+
+ if (!isEnabled) {
+ const granted = await new Promise<boolean>((resolve, reject) => {
+ // We set permissions here, since apparently FF wants this to be done
+ // as the result of an input event ...
+ getPermissionsApi().request(extendedPermissions, (granted: boolean) => {
+ if (chrome.runtime.lastError) {
+ console.error("error requesting permissions");
+ console.error(chrome.runtime.lastError);
+ reject(chrome.runtime.lastError);
+ return;
+ }
+ console.log("permissions granted:", granted);
+ resolve(granted);
+ });
+ });
+ const res = await wxApi.setExtendedPermissions(granted);
+ nextVal = res.newValue;
+ } else {
+ const res = await wxApi.setExtendedPermissions(false);
+ nextVal = res.newValue;
+ }
+ console.log("new permissions applied:", nextVal ?? false);
+ return nextVal ?? false
+}
+
+export function Welcome(): JSX.Element {
+ const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
+ return (
+ <>
+ <p>Thank you for installing the wallet.</p>
+ <Diagnostics />
+ <h2>Permissions</h2>
+ <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/>
+ <h2>Next Steps</h2>
+ <a href="https://demo.taler.net/" style={{ display: "block" }}>
+ Try the demo »
+ </a>
+ <a href="https://demo.taler.net/" style={{ display: "block" }}>
+ Learn how to top up your wallet balance »
+ </a>
+ </>
+ );
+}
+
+/**
+ * @deprecated to be removed
+ */
+export function createWelcomePage(): JSX.Element {
+ return <Welcome />;
+}
diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx b/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx
index 86f0eec90..86f0eec90 100644
--- a/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx
diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/wallet/withdraw.tsx
index cb96fa4df..cb96fa4df 100644
--- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/withdraw.tsx
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index 607c87d39..2d1671dd4 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -25,11 +25,11 @@ import { setupI18n } from "@gnu-taler/taler-util";
import { strings } from "./i18n/strings";
import { createHashHistory } from 'history';
-import { WithdrawalDialog } from "./pages/withdraw";
-import { Welcome } from "./pages/welcome";
-import { TalerPayDialog } from "./pages/pay";
-import { RefundStatusView } from "./pages/refund";
-import { TalerTipDialog } from './pages/tip';
+import { WithdrawalDialog } from "./wallet/withdraw";
+import { Welcome } from "./wallet/welcome";
+import { TalerPayDialog } from "./wallet/pay";
+import { RefundStatusView } from "./wallet/refund";
+import { TalerTipDialog } from './wallet/tip';
import Router, { route, Route } from "preact-router";
@@ -64,7 +64,6 @@ enum Pages {
return_coins = '/return-coins',
tips = '/tips',
withdraw = '/withdraw',
- // popup = '/popup/:rest*',
}
function Application() {