fix permission api, grouping all cta into same path

15 files changed, 224 insertions, 237 deletions

diff --git a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
index e9f03d0fa..6efa1d181 100644
--- a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts
@@ -13,20 +13,30 @@
  You should have received a copy of the GNU General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { NotificationType } from "@gnu-taler/taler-util";
+import { NotificationType, TalerErrorDetails } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
+import { OperationFailedError } from "@gnu-taler/taler-wallet-core";
 
 interface HookOk<T> {
   hasError: false;
   response: T;
 }
 
-interface HookError {
+export type HookError = HookGenericError | HookOperationalError
+
+export interface HookGenericError {
   hasError: true;
+  operational: false,
   message: string;
 }
 
+export interface HookOperationalError {
+  hasError: true;
+  operational: true,
+  details: TalerErrorDetails;
+}
+
 export type HookResponse<T> = HookOk<T> | HookError | undefined;
 
 //"withdraw-group-finished"
@@ -41,8 +51,10 @@ export function useAsyncAsHook<T>(
         const response = await fn();
         setHookResponse({ hasError: false, response });
       } catch (e) {
-        if (e instanceof Error) {
-          setHookResponse({ hasError: true, message: e.message });
+        if (e instanceof OperationFailedError) {
+          setHookResponse({ hasError: true, operational: true, details: e.operationError });
+        } else if (e instanceof Error) {
+          setHookResponse({ hasError: true, operational: false, message: e.message });
         }
       }
     }
diff --git a/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts b/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts
deleted file mode 100644
index df1e82676..000000000
--- a/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2021 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 {
-  ProviderInfo,
-  ProviderPaymentPaid,
-  ProviderPaymentStatus,
-  ProviderPaymentType,
-} from "@gnu-taler/taler-wallet-core";
-import { useEffect, useState } from "preact/hooks";
-import * as wxApi from "../wxApi";
-
-export interface BackupStatus {
-  deviceName: string;
-  providers: ProviderInfo[];
-  sync: () => Promise<void>;
-}
-
-function getStatusTypeOrder(t: ProviderPaymentStatus) {
-  return [
-    ProviderPaymentType.InsufficientBalance,
-    ProviderPaymentType.TermsChanged,
-    ProviderPaymentType.Unpaid,
-    ProviderPaymentType.Paid,
-    ProviderPaymentType.Pending,
-  ].indexOf(t.type);
-}
-
-function getStatusPaidOrder(a: ProviderPaymentPaid, b: ProviderPaymentPaid) {
-  return a.paidUntil.t_ms === "never"
-    ? -1
-    : b.paidUntil.t_ms === "never"
-      ? 1
-      : a.paidUntil.t_ms - b.paidUntil.t_ms;
-}
-
-export function useBackupStatus(): BackupStatus | undefined {
-  const [status, setStatus] = useState<BackupStatus | undefined>(undefined);
-
-  useEffect(() => {
-    async function run() {
-      //create a first list of backup info by currency
-      const status = await wxApi.getBackupInfo();
-
-      const providers = status.providers.sort((a, b) => {
-        if (
-          a.paymentStatus.type === ProviderPaymentType.Paid &&
-          b.paymentStatus.type === ProviderPaymentType.Paid
-        ) {
-          return getStatusPaidOrder(a.paymentStatus, b.paymentStatus);
-        }
-        return (
-          getStatusTypeOrder(a.paymentStatus) -
-          getStatusTypeOrder(b.paymentStatus)
-        );
-      });
-
-      async function sync() {
-        await wxApi.syncAllProviders();
-      }
-
-      setStatus({ deviceName: status.deviceId, providers, sync });
-    }
-    run();
-  }, []);
-
-  return status;
-}
diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
index aaab0aa43..12a913b1f 100644
--- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
@@ -17,16 +17,13 @@
 import { useState, useEffect } from "preact/hooks";
 import * as wxApi from "../wxApi";
 import { getPermissionsApi } from "../compat";
-import { extendedPermissions } from "../permissions";
+import { getReadRequestPermissions } from "../permissions";
 
 export function useExtendedPermissions(): [boolean, () => void] {
   const [enabled, setEnabled] = useState(false);
 
   const toggle = () => {
-    setEnabled((v) => !v);
-    handleExtendedPerm(enabled).then((result) => {
-      setEnabled(result);
-    });
+    handleExtendedPerm(enabled, setEnabled)
   };
 
   useEffect(() => {
@@ -39,30 +36,22 @@ export function useExtendedPermissions(): [boolean, () => void] {
   return [enabled, toggle];
 }
 
-async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> {
-  let nextVal: boolean | undefined;
-
+function handleExtendedPerm(isEnabled: boolean, onChange: (value: boolean) => void): void {
   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);
-      });
+    // We set permissions here, since apparently FF wants this to be done
+    // as the result of an input event ...
+    getPermissionsApi().request(getReadRequestPermissions(), async (granted: boolean) => {
+      if (chrome.runtime.lastError) {
+        console.error("error requesting permissions");
+        console.error(chrome.runtime.lastError);
+        onChange(false);
+        return;
+      }
+      console.log("permissions granted:", granted);
+      const res = await wxApi.setExtendedPermissions(granted);
+      onChange(res.newValue);
     });
-    const res = await wxApi.setExtendedPermissions(granted);
-    nextVal = res.newValue;
   } else {
-    const res = await wxApi.setExtendedPermissions(false);
-    nextVal = res.newValue;
+    wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
   }
-  console.log("new permissions applied:", nextVal ?? false);
-  return nextVal ?? false;
 }
diff --git a/packages/taler-wallet-webextension/src/permissions.ts b/packages/taler-wallet-webextension/src/permissions.ts
index 909433bb8..6b6f99a8e 100644
--- a/packages/taler-wallet-webextension/src/permissions.ts
+++ b/packages/taler-wallet-webextension/src/permissions.ts
@@ -14,7 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-export const extendedPermissions = {
-  permissions: ["webRequest"],
-  origins: ["http://*/*", "https://*/*"],
-};
+export const getReadRequestPermissions = () =>
+  chrome.runtime.getManifest().manifest_version === 3 ? ({
+    permissions: ["webRequest"],
+    origins: ["http://*/*", "https://*/*"],
+  }) : ({
+    permissions: ["webRequest", "webRequestBlocking"],
+    origins: ["http://*/*", "https://*/*"],
+  });
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 014d3b18e..a5f24470e 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -17,12 +17,13 @@
 import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BalanceTable } from "../components/BalanceTable";
-import { ButtonPrimary, ErrorBox } from "../components/styled";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
+import { MultiActionButton } from "../components/MultiActionButton";
+import { ButtonPrimary } from "../components/styled";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
-import { MultiActionButton } from "../components/MultiActionButton";
-import { Loading } from "../components/Loading";
 
 interface Props {
   goToWalletDeposit: (currency: string) => void;
@@ -42,15 +43,7 @@ export function BalancePage({
   }
 
   if (state.hasError) {
-    return (
-      <Fragment>
-        <ErrorBox>{state.message}</ErrorBox>
-        <p>
-          Click <PageLink pageName="welcome">here</PageLink> for help and
-          diagnostics.
-        </p>
-      </Fragment>
-    );
+    return <LoadingError title="Could not load balance page" error={state} />;
   }
 
   return (
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index ecb49b01d..f7174c3c5 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -98,7 +98,7 @@ function Application(): VNode {
                 component={BalancePage}
                 goToWalletManualWithdraw={() =>
                   goToWalletPage(
-                    Pages.manual_withdraw.replace(":currency?", ""),
+                    Pages.balance_manual_withdraw.replace(":currency?", ""),
                   )
                 }
                 goToWalletHistory={(currency: string) =>
@@ -128,9 +128,9 @@ function Application(): VNode {
               <Route path={Pages.last_activity} component={LastActivityPage} />
 
               <Route
-                path={Pages.transaction}
+                path={Pages.balance_transaction}
                 component={({ tid }: { tid: string }) =>
-                  goToWalletPage(Pages.transaction.replace(":tid", tid))
+                  goToWalletPage(Pages.balance_transaction.replace(":tid", tid))
                 }
               />
 
@@ -138,18 +138,18 @@ function Application(): VNode {
                 path={Pages.backup}
                 component={BackupPage}
                 onAddProvider={() => {
-                  route(Pages.provider_add);
+                  route(Pages.backup_provider_add);
                 }}
               />
               <Route
-                path={Pages.provider_detail}
+                path={Pages.backup_provider_detail}
                 component={ProviderDetailPage}
                 onBack={() => {
                   route(Pages.backup);
                 }}
               />
               <Route
-                path={Pages.provider_add}
+                path={Pages.backup_provider_add}
                 component={ProviderAddPage}
                 onBack={() => {
                   route(Pages.backup);
@@ -157,7 +157,7 @@ function Application(): VNode {
               />
 
               <Route
-                path={Pages.exchange_add}
+                path={Pages.settings_exchange_add}
                 component={ExchangeAddPage}
                 onBack={() => {
                   route(Pages.balance);
diff --git a/packages/taler-wallet-webextension/src/utils/index.ts b/packages/taler-wallet-webextension/src/utils/index.ts
index 55898d181..cef0595d3 100644
--- a/packages/taler-wallet-webextension/src/utils/index.ts
+++ b/packages/taler-wallet-webextension/src/utils/index.ts
@@ -193,19 +193,19 @@ export function actionForTalerUri(
 ): string | undefined {
   switch (uriType) {
     case TalerUriType.TalerWithdraw:
-      return makeExtensionUrlWithParams("static/wallet.html#/withdraw", {
+      return makeExtensionUrlWithParams("static/wallet.html#/cta/withdraw", {
         talerWithdrawUri: talerUri,
       });
     case TalerUriType.TalerPay:
-      return makeExtensionUrlWithParams("static/wallet.html#/pay", {
+      return makeExtensionUrlWithParams("static/wallet.html#/cta/pay", {
         talerPayUri: talerUri,
       });
     case TalerUriType.TalerTip:
-      return makeExtensionUrlWithParams("static/wallet.html#/tip", {
+      return makeExtensionUrlWithParams("static/wallet.html#/cta/tip", {
         talerTipUri: talerUri,
       });
     case TalerUriType.TalerRefund:
-      return makeExtensionUrlWithParams("static/wallet.html#/refund", {
+      return makeExtensionUrlWithParams("static/wallet.html#/cta/refund", {
         talerRefundUri: talerUri,
       });
     case TalerUriType.TalerNotifyReserve:
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 0b0af25ab..daea9e3bd 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -17,7 +17,9 @@
 import { i18n, Timestamp } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
+  ProviderPaymentPaid,
   ProviderPaymentStatus,
+  ProviderPaymentType,
 } from "@gnu-taler/taler-wallet-core";
 import {
   differenceInMonths,
@@ -25,6 +27,8 @@ import {
   intervalToDuration,
 } from "date-fns";
 import { Fragment, h, VNode } from "preact";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import {
   BoldLight,
   ButtonPrimary,
@@ -36,23 +40,58 @@ import {
   SmallLightText,
   SmallText,
 } from "../components/styled";
-import { useBackupStatus } from "../hooks/useBackupStatus";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { Pages } from "../NavigationBar";
+import * as wxApi from "../wxApi";
 
 interface Props {
   onAddProvider: () => void;
 }
 
+// interface BackupStatus {
+//   deviceName: string;
+//   providers: ProviderInfo[];
+// }
+
+// async function getBackupInfoOrdered(): BackupStatus {
+//   //create a first list of backup info by currency
+//   const status = await wxApi.getBackupInfo();
+
+//   return { deviceName: status.deviceId, providers };
+// }
+
+// async function sync() {
+//   await wxApi.syncAllProviders();
+// }
+
 export function BackupPage({ onAddProvider }: Props): VNode {
-  const status = useBackupStatus();
+  const status = useAsyncAsHook(wxApi.getBackupInfo);
   if (!status) {
-    return <div>Loading...</div>;
+    return <Loading />;
+  }
+  if (status.hasError) {
+    return (
+      <LoadingError title="Could not load backup providers" error={status} />
+    );
   }
+
+  const providers = status.response.providers.sort((a, b) => {
+    if (
+      a.paymentStatus.type === ProviderPaymentType.Paid &&
+      b.paymentStatus.type === ProviderPaymentType.Paid
+    ) {
+      return getStatusPaidOrder(a.paymentStatus, b.paymentStatus);
+    }
+    return (
+      getStatusTypeOrder(a.paymentStatus) - getStatusTypeOrder(b.paymentStatus)
+    );
+  });
+
   return (
     <BackupView
-      providers={status.providers}
+      providers={providers}
       onAddProvider={onAddProvider}
-      onSyncAll={status.sync}
+      onSyncAll={wxApi.syncAllProviders}
     />
   );
 }
@@ -128,7 +167,7 @@ function BackupLayout(props: TransactionLayoutProps): VNode {
     <RowBorderGray>
       <div style={{ color: !props.active ? "grey" : undefined }}>
         <a
-          href={Pages.provider_detail.replace(
+          href={Pages.backup_provider_detail.replace(
             ":pid",
             encodeURIComponent(props.id),
           )}
@@ -194,3 +233,21 @@ function daysUntil(d: Timestamp): string {
   });
   return `${str}`;
 }
+
+function getStatusTypeOrder(t: ProviderPaymentStatus) {
+  return [
+    ProviderPaymentType.InsufficientBalance,
+    ProviderPaymentType.TermsChanged,
+    ProviderPaymentType.Unpaid,
+    ProviderPaymentType.Paid,
+    ProviderPaymentType.Pending,
+  ].indexOf(t.type);
+}
+
+function getStatusPaidOrder(a: ProviderPaymentPaid, b: ProviderPaymentPaid) {
+  return a.paidUntil.t_ms === "never"
+    ? -1
+    : b.paidUntil.t_ms === "never"
+    ? 1
+    : a.paidUntil.t_ms - b.paidUntil.t_ms;
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
index 5fa08f8a6..111ac86c6 100644
--- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
@@ -18,13 +18,9 @@ import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BalanceTable } from "../components/BalanceTable";
 import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import { MultiActionButton } from "../components/MultiActionButton";
-import {
-  ButtonPrimary,
-  Centered,
-  ErrorBox,
-  SuccessBox,
-} from "../components/styled";
+import { ButtonPrimary, Centered } from "../components/styled";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
@@ -49,15 +45,7 @@ export function BalancePage({
   }
 
   if (state.hasError) {
-    return (
-      <Fragment>
-        <ErrorBox>{state.message}</ErrorBox>
-        <p>
-          Click <PageLink pageName="welcome">here</PageLink> for help and
-          diagnostics.
-        </p>
-      </Fragment>
-    );
+    return <LoadingError title="Could not load balance page" error={state} />;
   }
 
   return (
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index f346d6bf3..d8e46cc46 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -1,6 +1,5 @@
 import {
   canonicalizeBaseUrl,
-  ExchangeListItem,
   i18n,
   TalerConfigResponse,
 } from "@gnu-taler/taler-util";
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 7912d169a..a295ca28f 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -23,12 +23,12 @@ import {
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import {
   ButtonBoxPrimary,
   ButtonBoxWarning,
   ButtonPrimary,
   DateSeparator,
-  ErrorBox,
   NiceSelect,
   WarningBox,
 } from "../components/styled";
@@ -62,10 +62,10 @@ export function HistoryPage({
 
   if (transactionQuery.hasError) {
     return (
-      <Fragment>
-        <ErrorBox>{transactionQuery.message}</ErrorBox>
-        <p>There was an error loading the transactions.</p>
-      </Fragment>
+      <LoadingError
+        title="Could not load the list of transactions"
+        error={transactionQuery}
+      />
     );
   }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index c7958eb8a..86c3c1456 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -14,23 +14,23 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { VNode, h, Fragment } from "preact";
-import { useState } from "preact/hooks";
-import { CreateManualWithdraw } from "./CreateManualWithdraw";
-import * as wxApi from "../wxApi";
 import {
   AcceptManualWithdrawalResult,
   AmountJson,
   Amounts,
   NotificationType,
 } from "@gnu-taler/taler-util";
-import { ReserveCreated } from "./ReserveCreated";
+import { h, VNode } from "preact";
 import { route } from "preact-router";
-import { Pages } from "../NavigationBar";
+import { useState } from "preact/hooks";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { Pages } from "../NavigationBar";
+import * as wxApi from "../wxApi";
+import { CreateManualWithdraw } from "./CreateManualWithdraw";
 import { ExchangeAddPage } from "./ExchangeAddPage";
-import { Loading } from "../components/Loading";
-import { ErrorBox } from "../components/styled";
+import { ReserveCreated } from "./ReserveCreated";
 
 export function ManualWithdrawPage({ currency }: { currency?: string }): VNode {
   const [success, setSuccess] = useState<
@@ -92,12 +92,13 @@ export function ManualWithdrawPage({ currency }: { currency?: string }): VNode {
   }
   if (state.hasError) {
     return (
-      <Fragment>
-        <ErrorBox>{state.message}</ErrorBox>
-        <p>There was an error getting the known exchanges</p>
-      </Fragment>
+      <LoadingError
+        title="Could not load the list of known exchanges"
+        error={state}
+      />
     );
   }
+
   const exchangeList = state.response.exchanges.reduce(
     (p, c) => ({
       ...p,
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 293448785..ff47620eb 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -142,7 +142,9 @@ export function SettingsView({
         )}
         <div style={{ display: "flex", justifyContent: "space-between" }}>
           <div />
-          <LinkPrimary href={Pages.exchange_add}>Add an exchange</LinkPrimary>
+          <LinkPrimary href={Pages.settings_exchange_add}>
+            Add an exchange
+          </LinkPrimary>
         </div>
 
         <h2>Config</h2>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index 978d6fde5..85e38d85a 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -78,6 +78,9 @@ function Application(): VNode {
     string | undefined
   >(undefined);
   const hash_history = createHashHistory();
+  function clearNotification(): void {
+    setGlobalNotification(undefined);
+  }
   return (
     <div>
       <DevContextProvider>
@@ -94,21 +97,36 @@ function Application(): VNode {
             </Match>
             <WalletBox>
               {globalNotification && (
-                <SuccessBox onClick={() => setGlobalNotification(undefined)}>
+                <SuccessBox onClick={clearNotification}>
                   <div>{globalNotification}</div>
                 </SuccessBox>
               )}
-              <Router history={hash_history}>
+              <Router
+                history={hash_history}
+                onChange={() => {
+                  // const movingOutFromNotification =
+                  //   globalNotification && e.url !== globalNotification.to;
+                  if (globalNotification) {
+                    setGlobalNotification(undefined);
+                  }
+                }}
+              >
                 <Route path={Pages.welcome} component={WelcomePage} />
 
+                {/**
+                 * BALANCE
+                 */}
+
                 <Route
                   path={Pages.balance}
                   component={BalancePage}
                   goToWalletManualWithdraw={() =>
-                    route(Pages.manual_withdraw.replace(":currency?", ""))
+                    route(
+                      Pages.balance_manual_withdraw.replace(":currency?", ""),
+                    )
                   }
                   goToWalletDeposit={(currency: string) =>
-                    route(Pages.deposit.replace(":currency", currency))
+                    route(Pages.balance_deposit.replace(":currency", currency))
                   }
                   goToWalletHistory={(currency: string) =>
                     route(Pages.balance_history.replace(":currency", currency))
@@ -118,11 +136,11 @@ function Application(): VNode {
                   path={Pages.balance_history}
                   component={HistoryPage}
                   goToWalletDeposit={(currency: string) =>
-                    route(Pages.deposit.replace(":currency", currency))
+                    route(Pages.balance_deposit.replace(":currency", currency))
                   }
                   goToWalletManualWithdraw={(currency?: string) =>
                     route(
-                      Pages.manual_withdraw.replace(
+                      Pages.balance_manual_withdraw.replace(
                         ":currency?",
                         currency || "",
                       ),
@@ -130,78 +148,85 @@ function Application(): VNode {
                   }
                 />
                 <Route
+                  path={Pages.balance_transaction}
+                  component={TransactionPage}
+                />
+
+                <Route
+                  path={Pages.balance_manual_withdraw}
+                  component={ManualWithdrawPage}
+                />
+
+                <Route
+                  path={Pages.balance_deposit}
+                  component={DepositPage}
+                  onSuccess={(currency: string) => {
+                    route(Pages.balance_history.replace(":currency", currency));
+                    setGlobalNotification(
+                      "All done, your transaction is in progress",
+                    );
+                  }}
+                />
+                {/**
+                 * LAST ACTIVITY
+                 */}
+                <Route
                   path={Pages.last_activity}
                   component={LastActivityPage}
                 />
-                <Route path={Pages.transaction} component={TransactionPage} />
                 <Route path={Pages.settings} component={SettingsPage} />
+
+                {/**
+                 * BACKUP
+                 */}
                 <Route
                   path={Pages.backup}
                   component={BackupPage}
                   onAddProvider={() => {
-                    route(Pages.provider_add);
+                    route(Pages.backup_provider_add);
                   }}
                 />
                 <Route
-                  path={Pages.provider_detail}
+                  path={Pages.backup_provider_detail}
                   component={ProviderDetailPage}
                   onBack={() => {
                     route(Pages.backup);
                   }}
                 />
                 <Route
-                  path={Pages.provider_add}
+                  path={Pages.backup_provider_add}
                   component={ProviderAddPage}
                   onBack={() => {
                     route(Pages.backup);
                   }}
                 />
 
+                {/**
+                 * SETTINGS
+                 */}
                 <Route
-                  path={Pages.exchange_add}
+                  path={Pages.settings_exchange_add}
                   component={ExchangeAddPage}
                   onBack={() => {
                     route(Pages.balance);
                   }}
                 />
 
-                <Route
-                  path={Pages.manual_withdraw}
-                  component={ManualWithdrawPage}
-                />
-
-                <Route
-                  path={Pages.deposit}
-                  component={DepositPage}
-                  onSuccess={(currency: string) => {
-                    route(Pages.balance_history.replace(":currency", currency));
-                    setGlobalNotification(
-                      "All done, your transaction is in progress",
-                    );
-                  }}
-                />
-                <Route
-                  path={Pages.reset_required}
-                  component={() => <div>no yet implemented</div>}
-                />
-                <Route
-                  path={Pages.payback}
-                  component={() => <div>no yet implemented</div>}
-                />
-                <Route
-                  path={Pages.return_coins}
-                  component={() => <div>no yet implemented</div>}
-                />
+                {/**
+                 * DEV
+                 */}
 
                 <Route path={Pages.dev} component={DeveloperPage} />
 
-                {/** call to action */}
+                {/**
+                 * CALL TO ACTION
+                 */}
                 <Route
-                  path={Pages.pay}
+                  path={Pages.cta_pay}
                   component={PayPage}
                   goToWalletManualWithdraw={(currency?: string) =>
                     route(
-                      Pages.manual_withdraw.replace(
+                      Pages.balance_manual_withdraw.replace(
                         ":currency?",
                         currency || "",
                       ),
@@ -209,15 +234,13 @@ function Application(): VNode {
                   }
                   goBack={() => route(Pages.balance)}
                 />
-                <Route
-                  path={Pages.pay}
-                  component={PayPage}
-                  goBack={() => route(Pages.balance)}
-                />
-                <Route path={Pages.refund} component={RefundPage} />
-                <Route path={Pages.tips} component={TipPage} />
-                <Route path={Pages.withdraw} component={WithdrawPage} />
+                <Route path={Pages.cta_refund} component={RefundPage} />
+                <Route path={Pages.cta_tips} component={TipPage} />
+                <Route path={Pages.cta_withdraw} component={WithdrawPage} />
 
+                {/**
+                 * NOT FOUND
+                 */}
                 <Route default component={Redirect} to={Pages.balance} />
               </Router>
             </WalletBox>
@@ -230,7 +253,7 @@ function Application(): VNode {
 
 function Redirect({ to }: { to: string }): null {
   useEffect(() => {
-    console.log("go some wrong route");
+    console.log("got some wrong route", to);
     route(to, true);
   });
   return null;
diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts
index 412f33f12..3feb232d6 100644
--- a/packages/taler-wallet-webextension/src/wxBackend.ts
+++ b/packages/taler-wallet-webextension/src/wxBackend.ts
@@ -40,7 +40,7 @@ import {
 import { BrowserCryptoWorkerFactory } from "./browserCryptoWorkerFactory";
 import { BrowserHttpLib } from "./browserHttpLib";
 import { getPermissionsApi, isFirefox } from "./compat";
-import { extendedPermissions } from "./permissions";
+import { getReadRequestPermissions } from "./permissions";
 import { SynchronousCryptoWorkerFactory } from "./serviceWorkerCryptoWorkerFactory.js";
 import { ServiceWorkerHttpLib } from "./serviceWorkerHttpLib";
 
@@ -128,7 +128,7 @@ async function dispatch(
     }
     case "wxGetExtendedPermissions": {
       const res = await new Promise((resolve, reject) => {
-        getPermissionsApi().contains(extendedPermissions, (result: boolean) => {
+        getPermissionsApi().contains(getReadRequestPermissions(), (result: boolean) => {
           resolve(result);
         });
       });
@@ -143,7 +143,7 @@ async function dispatch(
         r = wrapResponse({ newValue: true });
       } else {
         await new Promise<void>((resolve, reject) => {
-          getPermissionsApi().remove(extendedPermissions, (rem) => {
+          getPermissionsApi().remove(getReadRequestPermissions(), (rem) => {
             console.log("permissions removed:", rem);
             resolve();
           });
@@ -339,7 +339,7 @@ function headerListener(
         switch (uriType) {
           case TalerUriType.TalerWithdraw:
             return makeSyncWalletRedirect(
-              "/static/wallet.html#/withdraw",
+              "/static/wallet.html#/cta/withdraw",
               details.tabId,
               details.url,
               {
@@ -348,7 +348,7 @@ function headerListener(
             );
           case TalerUriType.TalerPay:
             return makeSyncWalletRedirect(
-              "/static/wallet.html#/pay",
+              "/static/wallet.html#/cta/pay",
               details.tabId,
               details.url,
               {
@@ -357,7 +357,7 @@ function headerListener(
             );
           case TalerUriType.TalerTip:
             return makeSyncWalletRedirect(
-              "/static/wallet.html#/tip",
+              "/static/wallet.html#/cta/tip",
               details.tabId,
               details.url,
               {
@@ -366,7 +366,7 @@ function headerListener(
             );
           case TalerUriType.TalerRefund:
             return makeSyncWalletRedirect(
-              "/static/wallet.html#/refund",
+              "/static/wallet.html#/cta/refund",
               details.tabId,
               details.url,
               {
@@ -402,7 +402,7 @@ function setupHeaderListener(): void {
   }
   console.log("setting up header listener");
   // Handlers for catching HTTP requests
-  getPermissionsApi().contains(extendedPermissions, (result: boolean) => {
+  getPermissionsApi().contains(getReadRequestPermissions(), (result: boolean) => {
     if (
       "webRequest" in chrome &&
       "onHeadersReceived" in chrome.webRequest &&