split wallet/popup components. created hooks, components, context folder

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>;
+}

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>
+  );
+}

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];
+}

packages/taler-wallet-webextension/src/pages/welcome.tsx

@@ -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 />;
-}

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 { route } from 'preact-router';
-import { Match } from 'preact-router/match';
 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',

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";

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 />;
+}

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 { WithdrawalDialog } from "./wallet/withdraw";
-import { Welcome } from "./pages/welcome";
+import { Welcome } from "./wallet/welcome";
-import { TalerPayDialog } from "./pages/pay";
+import { TalerPayDialog } from "./wallet/pay";
-import { RefundStatusView } from "./pages/refund";
+import { RefundStatusView } from "./wallet/refund";
-import { TalerTipDialog } from './pages/tip';
+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() {