gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[taler-wallet-core] 03/03: new dev environment


From: gnunet
Subject: [taler-wallet-core] 03/03: new dev environment
Date: Fri, 25 Mar 2022 20:58:15 +0100

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository wallet-core.

commit ddfb40e50cef0abddc7690b23562b1ca5aeb3fdd
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Mar 25 16:57:27 2022 -0300

    new dev environment
---
 .../taler-wallet-webextension/dev-html/.gitignore  |   4 +
 .../taler-wallet-webextension/dev-html/index.html  |  48 ++++
 .../{static/wallet.html => dev-html/popup.html}    |  16 +-
 .../tests.html}                                    |   9 +-
 .../{static => dev-html}/wallet.html               |   6 +-
 .../run-wallet-in-browser.html                     |  14 --
 .../taler-wallet-webextension/serve-esbuild.mjs    |  22 ++
 .../src/{background.ts => background.dev.ts}       |  16 +-
 .../taler-wallet-webextension/src/background.ts    |   4 +-
 .../src/browserWorkerEntry.ts                      |  12 +-
 .../src/components/styled/index.tsx                |   2 +-
 .../src/hooks/useExtendedPermissions.ts            |  35 +--
 .../taler-wallet-webextension/src/platform/api.ts  | 123 +++++++++-
 .../src/platform/chrome.ts                         |  38 ++-
 .../taler-wallet-webextension/src/platform/dev.ts  | 159 ++++++++++++
 .../{popupEntryPoint.tsx => popup/Application.tsx} |  66 ++---
 .../src/popup/TalerActionFound.tsx                 |   2 +-
 .../src/popupEntryPoint.dev.tsx                    |  54 +++++
 .../src/popupEntryPoint.tsx                        | 186 ++------------
 .../src/svg/chevron-down.svg                       |   9 +-
 .../src/wallet/AddNewActionView.tsx                |   2 +-
 .../Application.tsx}                               |  87 ++-----
 .../src/wallet/DepositPage.tsx                     |   3 -
 .../src/walletEntryPoint.dev.tsx                   |  54 +++++
 .../src/walletEntryPoint.tsx                       | 266 ++-------------------
 packages/taler-wallet-webextension/src/wxApi.ts    |   6 +-
 .../taler-wallet-webextension/src/wxBackend.ts     |   5 +-
 .../taler-wallet-webextension/static/wallet.html   |   2 +-
 28 files changed, 585 insertions(+), 665 deletions(-)

diff --git a/packages/taler-wallet-webextension/dev-html/.gitignore 
b/packages/taler-wallet-webextension/dev-html/.gitignore
new file mode 100644
index 00000000..c4f051f4
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/.gitignore
@@ -0,0 +1,4 @@
+/mocha.css
+/mocha.js
+/mocha.js.map
+/manifest.json
diff --git a/packages/taler-wallet-webextension/dev-html/index.html 
b/packages/taler-wallet-webextension/dev-html/index.html
new file mode 100644
index 00000000..c0919e9b
--- /dev/null
+++ b/packages/taler-wallet-webextension/dev-html/index.html
@@ -0,0 +1,48 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="./manifest.json" />
+  </head>
+  <body>
+    <script>
+      function openPopup() {
+        window.frames["popup"].location = "/popup.html";
+      }
+      function openWallet() {
+        window.frames["wallet"].location = "/wallet.html";
+      }
+      function closeWallet() {
+        window.frames["wallet"].location = "about:blank";
+      }
+    </script>
+    <input type="text" />
+    <button value="asd" onclick="openPopup()">open popup</button>
+    <button value="asd" onclick="closeWallet();openWallet()">
+      reload wallet page
+    </button>
+    <hr />
+    <iframe
+      id="popup-window"
+      name="popup"
+      src="about:blank"
+      name="popup"
+      width="500"
+      height="325"
+    >
+    </iframe>
+    <hr />
+    <iframe
+      id="wallet-window"
+      name="wallet"
+      src="about:blank"
+      name="wallet"
+      width="800"
+      height="100%"
+    >
+    </iframe>
+    <hr />
+    <iframe src="/tests.html" name="wallet" width="800" height="100%"> 
</iframe>
+    <hr />
+    <script src="/dist/background.dev.js"></script>
+  </body>
+</html>
diff --git a/packages/taler-wallet-webextension/static/wallet.html 
b/packages/taler-wallet-webextension/dev-html/popup.html
similarity index 68%
copy from packages/taler-wallet-webextension/static/wallet.html
copy to packages/taler-wallet-webextension/dev-html/popup.html
index f9dd8a19..93a886d5 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/packages/taler-wallet-webextension/dev-html/popup.html
@@ -2,13 +2,17 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" />
-    <link rel="icon" href="/static/img/icon.png" />
-    <script src="/dist/walletEntryPoint.js"></script>
     <style>
       html {
         font-family: sans-serif; /* 1 */
       }
+      body {
+        margin: 0;
+      }
+    </style>
+    <style>
+      html {
+      }
       h1 {
         font-size: 2em;
       }
@@ -19,13 +23,17 @@
         margin: 0;
         font-size: 100%;
         padding: 0;
+        overflow: hidden;
         background-color: #f8faf7;
         font-family: Arial, Helvetica, sans-serif;
       }
     </style>
+
+    <link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" />
+    <script src="/dist/popupEntryPoint.dev.js"></script>
   </head>
 
   <body>
-    <div id="container" class="wallet-container"></div>
+    <taler-popup id="container" class="popup-container"></taler-popup>
   </body>
 </html>
diff --git a/packages/taler-wallet-webextension/run-test-in-browser.html 
b/packages/taler-wallet-webextension/dev-html/tests.html
similarity index 57%
rename from packages/taler-wallet-webextension/run-test-in-browser.html
rename to packages/taler-wallet-webextension/dev-html/tests.html
index b027c071..4b3ec93b 100644
--- a/packages/taler-wallet-webextension/run-test-in-browser.html
+++ b/packages/taler-wallet-webextension/dev-html/tests.html
@@ -2,19 +2,18 @@
 <html>
   <head>
     <title>Mocha Tests</title>
-    <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
+    <link rel="stylesheet" href="/mocha.css" />
   </head>
   <body>
     <div id="mocha"></div>
-    <script src="node_modules/mocha/mocha.js"></script>
+    <script src="/mocha.js"></script>
     <script>
       mocha.setup("bdd");
     </script>
 
     <!-- load code you want to test here -->
-
-    <script src="dist/stories.test.js"></script>
-    <script src="dist/hooks/useTalerActionURL.test.js"></script>
+    <script src="/dist/stories.test.js"></script>
+    <script src="/dist/hooks/useTalerActionURL.test.js"></script>
     <!-- load your test files here -->
 
     <script>
diff --git a/packages/taler-wallet-webextension/static/wallet.html 
b/packages/taler-wallet-webextension/dev-html/wallet.html
similarity index 70%
copy from packages/taler-wallet-webextension/static/wallet.html
copy to packages/taler-wallet-webextension/dev-html/wallet.html
index f9dd8a19..ff861684 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/packages/taler-wallet-webextension/dev-html/wallet.html
@@ -1,10 +1,7 @@
-<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" />
-    <link rel="icon" href="/static/img/icon.png" />
-    <script src="/dist/walletEntryPoint.js"></script>
+    <link rel="stylesheet" type="text/css" href="/dist/walletEntryPoint.css" />
     <style>
       html {
         font-family: sans-serif; /* 1 */
@@ -23,6 +20,7 @@
         font-family: Arial, Helvetica, sans-serif;
       }
     </style>
+    <script src="/dist/walletEntryPoint.dev.js"></script>
   </head>
 
   <body>
diff --git a/packages/taler-wallet-webextension/run-wallet-in-browser.html 
b/packages/taler-wallet-webextension/run-wallet-in-browser.html
deleted file mode 100644
index d0ee34ac..00000000
--- a/packages/taler-wallet-webextension/run-wallet-in-browser.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<html>
-  <head>
-    <link rel="manifest" href="./manifest.json" />
-  </head>
-  <body>
-    <iframe src="./static/popup.html" name="popup" width="500" height="400">
-      algo
-    </iframe>
-    <hr />
-    <iframe src="./static/wallet.html" name="wallet" width="800" height="100%">
-      otroe
-    </iframe>
-  </body>
-</html>
diff --git a/packages/taler-wallet-webextension/serve-esbuild.mjs 
b/packages/taler-wallet-webextension/serve-esbuild.mjs
new file mode 100644
index 00000000..0fa2723a
--- /dev/null
+++ b/packages/taler-wallet-webextension/serve-esbuild.mjs
@@ -0,0 +1,22 @@
+
+import linaria from '@linaria/esbuild'
+import esbuild from 'esbuild'
+import { buildConfig } from "./build-fast-with-linaria.mjs"
+import fs from 'fs';
+
+fs.writeFileSync("dev-html/manifest.json", fs.readFileSync("manifest-v2.json"))
+fs.writeFileSync("dev-html/mocha.css", 
fs.readFileSync("node_modules/mocha/mocha.css"))
+fs.writeFileSync("dev-html/mocha.js", 
fs.readFileSync("node_modules/mocha/mocha.js"))
+fs.writeFileSync("dev-html/mocha.js.map", 
fs.readFileSync("node_modules/mocha/mocha.js.map"))
+
+const server = await esbuild
+  .serve({
+    servedir: 'dev-html',
+  }, { ...buildConfig, outdir: 'dev-html/dist' })
+  .catch((e) => {
+    console.log(e)
+    process.exit(1)
+  });
+
+console.log("ready!", server.port);
+
diff --git a/packages/taler-wallet-webextension/src/background.ts 
b/packages/taler-wallet-webextension/src/background.dev.ts
similarity index 71%
copy from packages/taler-wallet-webextension/src/background.ts
copy to packages/taler-wallet-webextension/src/background.dev.ts
index 9c572c17..1493ec24 100644
--- a/packages/taler-wallet-webextension/src/background.ts
+++ b/packages/taler-wallet-webextension/src/background.dev.ts
@@ -24,21 +24,11 @@
  * Imports.
  */
 import { platform, setupPlatform } from "./platform/api";
-import firefoxAPI from "./platform/firefox"
-import chromeAPI from "./platform/chrome"
+import devAPI from "./platform/dev"
 import { wxMain } from "./wxBackend";
 
-const isFirefox = typeof (window as any)['InstallTrigger'] !== 'undefined'
-
-//FIXME: create different entry point for any platform instead of 
-//switching in runtime
-if (isFirefox) {
-  console.log("Wallet setup for Firefox API")
-  setupPlatform(firefoxAPI)
-} else {
-  console.log("Wallet setup for Chrome API")
-  setupPlatform(chromeAPI)
-}
+console.log("Wallet setup for Dev API")
+setupPlatform(devAPI)
 
 try {
   platform.registerOnInstalled(() => {
diff --git a/packages/taler-wallet-webextension/src/background.ts 
b/packages/taler-wallet-webextension/src/background.ts
index 9c572c17..7cda6e9e 100644
--- a/packages/taler-wallet-webextension/src/background.ts
+++ b/packages/taler-wallet-webextension/src/background.ts
@@ -30,8 +30,8 @@ import { wxMain } from "./wxBackend";
 
 const isFirefox = typeof (window as any)['InstallTrigger'] !== 'undefined'
 
-//FIXME: create different entry point for any platform instead of 
-//switching in runtime
+// FIXME: create different entry point for any platform instead of 
+// switching in runtime
 if (isFirefox) {
   console.log("Wallet setup for Firefox API")
   setupPlatform(firefoxAPI)
diff --git a/packages/taler-wallet-webextension/src/browserWorkerEntry.ts 
b/packages/taler-wallet-webextension/src/browserWorkerEntry.ts
index 4494b9af..f14e03d7 100644
--- a/packages/taler-wallet-webextension/src/browserWorkerEntry.ts
+++ b/packages/taler-wallet-webextension/src/browserWorkerEntry.ts
@@ -32,7 +32,7 @@ const worker: Worker = self as any as Worker;
 async function handleRequest(
   operation: string,
   id: number,
-  args: string[],
+  req: unknown,
 ): Promise<void> {
   const impl = nativeCrypto;
 
@@ -42,7 +42,7 @@ async function handleRequest(
   }
 
   try {
-    const result = await (impl as any)[operation](...args);
+    const result = await (impl as any)[operation](req);
     worker.postMessage({ result, id });
   } catch (e) {
     logger.error("error during operation", e);
@@ -51,9 +51,9 @@ async function handleRequest(
 }
 
 worker.onmessage = (msg: MessageEvent) => {
-  const args = msg.data.args;
-  if (!Array.isArray(args)) {
-    console.error("args must be array");
+  const req = msg.data.req;
+  if (typeof req !== "object") {
+    console.error("request must be an object");
     return;
   }
   const id = msg.data.id;
@@ -67,7 +67,7 @@ worker.onmessage = (msg: MessageEvent) => {
     return;
   }
 
-  handleRequest(operation, id, args).catch((e) => {
+  handleRequest(operation, id, req).catch((e) => {
     console.error("error in browser worker", e);
   });
 };
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx 
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 13e3189f..e1b4dd2a 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -143,7 +143,7 @@ export const Middle = styled.div`
 export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>`
   height: 290px;
   width: 500px;
-  overflow-y: scroll;
+  overflow-y: visible;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git 
a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts 
b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
index 66d71070..a3580174 100644
--- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
@@ -40,41 +40,18 @@ async function handleExtendedPerm(isEnabled: boolean, 
onChange: (value: boolean)
   if (!isEnabled) {
     // We set permissions here, since apparently FF wants this to be done
     // as the result of an input event ...
-    const granted = await 
platform.getPermissionsApi().request(getReadRequestPermissions());
-    console.log("permissions granted:", granted);
-    const lastError = platform.getLastError();
-    if (lastError) {
+    let granted: boolean;
+    try {
+      granted = await 
platform.getPermissionsApi().request(getReadRequestPermissions());
+    } catch (lastError) {
       console.error("error requesting permissions");
       console.error(lastError);
       onChange(false);
-      return;
+      return
     }
-    // try {
+    console.log("permissions granted:", granted);
     const res = await wxApi.setExtendedPermissions(granted);
     onChange(res.newValue);
-    // } finally {
-    //   return
-    // }
-
-    // return new Promise<void>((res) => {
-    //   platform.getPermissionsApi().request(getReadRequestPermissions(), 
async (granted: boolean) => {
-    //     console.log("permissions granted:", granted);
-    //     const lastError = getLastError()
-    //     if (lastError) {
-    //       console.error("error requesting permissions");
-    //       console.error(lastError);
-    //       onChange(false);
-    //       return;
-    //     }
-    //     try {
-    //       const res = await wxApi.setExtendedPermissions(granted);
-    //       onChange(res.newValue);
-    //     } finally {
-    //       res()
-    //     }
-
-    //   });
-    // })
   }
   await wxApi.setExtendedPermissions(false).then(r => onChange(r.newValue));
   return
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts 
b/packages/taler-wallet-webextension/src/platform/api.ts
index 9b4e02ff..112f9721 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -38,7 +38,7 @@ export interface CrossBrowserPermissionsApi {
   request(p: Permissions): Promise<boolean>;
   remove(p: Permissions): Promise<boolean>;
 
-  addPermissionsListener(callback: (p: Permissions) => void): void;
+  addPermissionsListener(callback: (p: Permissions, lastError?: string) => 
void): void;
 
 }
 
@@ -57,31 +57,132 @@ export interface WalletVersion {
  */
 export interface PlatformAPI {
   /**
+   * FIXME: should not be needed
+   * 
    * check if the platform is firefox
    */
   isFirefox(): boolean;
+
   /**
-   * 
+   * Permission API for checking and add a listener
    */
   getPermissionsApi(): CrossBrowserPermissionsApi;
+
+  /**
+   * Backend API
+   * 
+   * Register a callback to be called when the wallet is ready to start
+   * @param callback 
+   */
   notifyWhenAppIsReady(callback: () => void): void;
-  openWalletURIFromPopup(uriType: TalerUriType, talerUri: string): void;
+
+  /**
+   * Popup API
+   * 
+   * Used when an TalerURI is found and open up from the popup UI.
+   * Closes the popup and open the URI into the wallet UI.
+   * 
+   * @param talerUri 
+   */
+  openWalletURIFromPopup(talerUri: string): void;
+
+  /**
+   * Backend API
+   * 
+   * Open a page into the wallet UI
+   * @param page 
+   */
   openWalletPage(page: string): void;
+
+  /**
+   * Popup API
+   * 
+   * Open a page into the wallet UI and closed the popup
+   * @param page 
+   */
   openWalletPageFromPopup(page: string): void;
-  setMessageToWalletBackground(operation: string, payload: any): 
Promise<CoreApiResponse>;
-  listenToWalletNotifications(listener: (m: any) => void): () => void;
-  sendMessageToAllChannels(message: MessageFromBackend): void;
-  registerAllIncomingConnections(): void;
-  registerOnNewMessage(onNewMessage: (message: any, sender: any, callback: 
any) => void): void;
-  registerReloadOnNewVersion(): void;
+
+  /**
+   * Backend API
+   * 
+   * When a tab has been detected to have a Taler action the background process
+   * can use this function to redirect the tab to the wallet UI
+   *  
+   * @param tabId 
+   * @param page 
+   */
   redirectTabToWalletPage(tabId: number, page: string): void;
+
+  /**
+   * Get the wallet version from manifest
+   */
   getWalletVersion(): WalletVersion;
+
+
+  /**
+   * Backend API
+   */
+  registerAllIncomingConnections(): void;
+  /**
+   * Backend API
+   */
+  registerReloadOnNewVersion(): void;
+  /**
+   * Backend API
+   */
   registerTalerHeaderListener(onHeader: (tabId: number, url: string) => void): 
void;
+  /**
+   * Backend API
+   */
   registerOnInstalled(callback: () => void): void;
+
+  /**
+   * Backend API
+   * 
+   * Check if background process run as service worker. This is used from the 
+   * wallet use different http api and crypto worker.
+   */
   useServiceWorkerAsBackgroundProcess(): boolean;
-  getLastError(): string | undefined;
-  searchForTalerLinks(): string | undefined;
+
+  /**
+   * Popup API
+   * 
+   * Read the current tab html and try to find any Taler URI or QR code 
present.
+   * 
+   * @return Taler URI if found
+   */
   findTalerUriInActiveTab(): Promise<string | undefined>;
+
+  /**
+   * Used from the frontend to send commands to the wallet
+   * 
+   * @param operation 
+   * @param payload 
+   * 
+   * @return response from the backend
+   */
+  sendMessageToWalletBackground(operation: string, payload: any): 
Promise<CoreApiResponse>;
+
+  /**
+   * Used from the frontend to receive notifications about new information
+   * @param listener 
+   * @return function to unsubscribe the listener 
+   */
+  listenToWalletBackground(listener: (message: MessageFromBackend) => void): 
() => void;
+
+  /**
+   * Use by the wallet backend to receive operations from frontend (popup & 
wallet)
+   * and send a response back.
+   * 
+   * @param onNewMessage 
+   */
+  listenToAllChannels(onNewMessage: (message: any, sender: any, sendResponse: 
(r: CoreApiResponse) => void) => void): void;
+
+  /**
+   * Used by the wallet backend to send notification about new information
+   * @param message 
+   */
+  sendMessageToAllChannels(message: MessageFromBackend): void;
 }
 
 export let platform: PlatformAPI = undefined as any;
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts 
b/packages/taler-wallet-webextension/src/platform/chrome.ts
index dada23c5..91ccc220 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -14,17 +14,16 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { TalerUriType } from "@gnu-taler/taler-util";
+import { classifyTalerUri, CoreApiResponse, TalerUriType } from 
"@gnu-taler/taler-util";
 import { getReadRequestPermissions } from "../permissions";
 import { CrossBrowserPermissionsApi, MessageFromBackend, Permissions, 
PlatformAPI } from "./api.js";
 
 const api: PlatformAPI = {
   isFirefox,
   findTalerUriInActiveTab,
-  getLastError,
   getPermissionsApi,
   getWalletVersion,
-  listenToWalletNotifications,
+  listenToWalletBackground,
   notifyWhenAppIsReady,
   openWalletPage,
   openWalletPageFromPopup,
@@ -32,12 +31,11 @@ const api: PlatformAPI = {
   redirectTabToWalletPage,
   registerAllIncomingConnections,
   registerOnInstalled,
-  registerOnNewMessage,
+  listenToAllChannels,
   registerReloadOnNewVersion,
   registerTalerHeaderListener,
-  searchForTalerLinks,
   sendMessageToAllChannels,
-  setMessageToWalletBackground,
+  sendMessageToWalletBackground,
   useServiceWorkerAsBackgroundProcess
 }
 
@@ -50,7 +48,7 @@ function isFirefox(): boolean {
 export function contains(p: Permissions): Promise<boolean> {
   return new Promise((res, rej) => {
     chrome.permissions.contains(p, (resp) => {
-      const le = getLastError()
+      const le = chrome.runtime.lastError?.message
       if (le) {
         rej(le)
       }
@@ -62,7 +60,7 @@ export function contains(p: Permissions): Promise<boolean> {
 export async function request(p: Permissions): Promise<boolean> {
   return new Promise((res, rej) => {
     chrome.permissions.request(p, (resp) => {
-      const le = getLastError()
+      const le = chrome.runtime.lastError?.message
       if (le) {
         rej(le)
       }
@@ -74,7 +72,7 @@ export async function request(p: Permissions): 
Promise<boolean> {
 export async function remove(p: Permissions): Promise<boolean> {
   return new Promise((res, rej) => {
     chrome.permissions.remove(p, (resp) => {
-      const le = getLastError()
+      const le = chrome.runtime.lastError?.message
       if (le) {
         rej(le)
       }
@@ -83,9 +81,12 @@ export async function remove(p: Permissions): 
Promise<boolean> {
   })
 }
 
-function addPermissionsListener(callback: (p: Permissions) => void): void {
+function addPermissionsListener(callback: (p: Permissions, lastError?: string) 
=> void): void {
   console.log("addPermissionListener is not supported for Firefox");
-  chrome.permissions.onAdded.addListener(callback)
+  chrome.permissions.onAdded.addListener((perm: Permissions) => {
+    const lastError = chrome.runtime.lastError?.message;
+    callback(perm, lastError)
+  })
 }
 
 function getPermissionsApi(): CrossBrowserPermissionsApi {
@@ -107,7 +108,9 @@ function notifyWhenAppIsReady(callback: () => void) {
 }
 
 
-function openWalletURIFromPopup(uriType: TalerUriType, talerUri: string) {
+function openWalletURIFromPopup(talerUri: string) {
+  const uriType = classifyTalerUri(talerUri);
+
   let url: string | undefined = undefined;
   switch (uriType) {
     case TalerUriType.TalerWithdraw:
@@ -150,7 +153,7 @@ function openWalletPageFromPopup(page: string) {
   );
 }
 
-async function setMessageToWalletBackground(operation: string, payload: any): 
Promise<any> {
+async function sendMessageToWalletBackground(operation: string, payload: any): 
Promise<any> {
   return new Promise<any>((resolve, reject) => {
     chrome.runtime.sendMessage({ operation, payload, id: "(none)" }, (resp) => 
{
       if (chrome.runtime.lastError) {
@@ -164,7 +167,7 @@ async function setMessageToWalletBackground(operation: 
string, payload: any): Pr
 }
 
 let notificationPort: chrome.runtime.Port | undefined;
-function listenToWalletNotifications(listener: (m: any) => void) {
+function listenToWalletBackground(listener: (m: any) => void) {
   if (notificationPort === undefined) {
     notificationPort = chrome.runtime.connect({ name: "notifications" })
   }
@@ -203,7 +206,7 @@ function registerAllIncomingConnections() {
   });
 }
 
-function registerOnNewMessage(cb: (message: any, sender: any, callback: any) 
=> void) {
+function listenToAllChannels(cb: (message: any, sender: any, callback: (r: 
CoreApiResponse) => void) => void) {
   chrome.runtime.onMessage.addListener((m, s, c) => {
     cb(m, s, c)
 
@@ -311,11 +314,6 @@ function useServiceWorkerAsBackgroundProcess() {
   return chrome.runtime.getManifest().manifest_version === 3
 }
 
-function getLastError() {
-  return chrome.runtime.lastError?.message;
-}
-
-
 function searchForTalerLinks(): string | undefined {
   let found;
   found = document.querySelector("a[href^='taler://'")
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts 
b/packages/taler-wallet-webextension/src/platform/dev.ts
new file mode 100644
index 00000000..a761bb01
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -0,0 +1,159 @@
+/*
+ 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 { classifyTalerUri, CoreApiResponse, TalerUriType } from 
"@gnu-taler/taler-util";
+import { MessageFromBackend, PlatformAPI } from "./api";
+
+const frames = ["popup", "wallet"]
+
+const api: PlatformAPI = ({
+  isFirefox: () => false,
+  findTalerUriInActiveTab: async () => undefined,
+  getPermissionsApi: () => ({
+    addPermissionsListener: () => undefined, contains: async () => true, 
remove: async () => false, request: async () => false
+  }),
+  getWalletVersion: () => ({
+    version: 'none'
+  }),
+  notifyWhenAppIsReady: (fn: () => void) => {
+    let total = frames.length
+    function waitAndNotify() {
+      total--
+      if (total < 1) {
+        console.log('done')
+        fn()
+      }
+    }
+    frames.forEach(f => {
+      const theFrame = window.frames[f as any]
+      if (theFrame.location.href === 'about:blank') {
+        waitAndNotify()
+      } else {
+        theFrame.addEventListener("load", waitAndNotify)
+      }
+    })
+  },
+
+  openWalletPage: (page: string) => {
+    window.frames['wallet' as any].location = `/wallet.html#${page}`
+  },
+  openWalletPageFromPopup: (page: string) => {
+    window.parent.frames['wallet' as any].location = `/wallet.html#${page}`
+    window.location.href = "about:blank"
+  },
+  openWalletURIFromPopup: (page: string) => {
+    alert('openWalletURIFromPopup not implemented yet')
+  },
+  redirectTabToWalletPage: (tabId: number, page: string) => {
+    alert('redirectTabToWalletPage not implemented yet')
+  },
+
+  registerAllIncomingConnections: () => undefined,
+  registerOnInstalled: (fn: () => void) => fn(),
+  registerReloadOnNewVersion: () => undefined,
+  registerTalerHeaderListener: () => undefined,
+
+  useServiceWorkerAsBackgroundProcess: () => false,
+
+  listenToAllChannels: (fn: (m: any, s: any, c: (r: CoreApiResponse) => void) 
=> void) => {
+    window.addEventListener("message", (event: 
MessageEvent<IframeMessageType>) => {
+      if (event.data.type !== 'command') return
+      const sender = event.data.header.replyMe
+      fn(event.data.body, sender, (resp: CoreApiResponse) => {
+        if (event.source) {
+          const msg: IframeMessageResponse = {
+            type: "response",
+            header: { responseId: sender },
+            body: resp
+          }
+          window.parent.postMessage(msg)
+        }
+      })
+    })
+  },
+  sendMessageToAllChannels: (message: MessageFromBackend) => {
+    Array.from(window.frames).forEach(w => {
+      try {
+        w.postMessage({
+          header: {}, body: message
+        });
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  },
+  listenToWalletBackground: (onNewMessage: (m: MessageFromBackend) => void) => 
{
+    function listener(event: MessageEvent<IframeMessageType>) {
+      if (event.data.type !== 'notification') return
+      onNewMessage(event.data.body)
+    }
+    window.parent.addEventListener("message", listener)
+    return () => {
+      window.parent.removeEventListener("message", listener)
+    }
+  },
+  sendMessageToWalletBackground: async (operation: string, payload: any) => {
+    const replyMe = `reply-${Math.floor(Math.random() * 100000)}`
+    const message: IframeMessageCommand = {
+      type: 'command',
+      header: { replyMe },
+      body: { operation, payload, id: "(none)" }
+    }
+    window.parent.postMessage(message)
+
+    return new Promise((res, rej) => {
+      function listener(event: MessageEvent<IframeMessageType>) {
+        if (event.data.type !== "response" || event.data.header.responseId !== 
replyMe) {
+          return
+        }
+        res(event.data.body)
+        window.parent.removeEventListener("message", listener)
+      }
+      window.parent.addEventListener("message", listener, {
+
+      })
+    })
+
+  },
+})
+
+type IframeMessageType = IframeMessageNotification | IframeMessageResponse | 
IframeMessageCommand;
+interface IframeMessageNotification {
+  type: "notification";
+  header: {
+  },
+  body: MessageFromBackend
+}
+interface IframeMessageResponse {
+  type: "response";
+  header: {
+    responseId: string;
+  },
+  body: CoreApiResponse
+}
+
+interface IframeMessageCommand {
+  type: "command";
+  header: {
+    replyMe: string;
+  },
+  body: {
+    operation: any, id: string, payload: any
+  }
+}
+
+export default api;
+
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/popup/Application.tsx
similarity index 74%
copy from packages/taler-wallet-webextension/src/popupEntryPoint.tsx
copy to packages/taler-wallet-webextension/src/popup/Application.tsx
index dfb12666..71b2d6c4 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -20,64 +20,26 @@
  * @author sebasjm
  */
 
-import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
-import { Fragment, h, render, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
 import { Match } from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
-import PendingTransactions from "./components/PendingTransactions";
-import { PopupBox } from "./components/styled";
-import { DevContextProvider } from "./context/devContext";
-import { IoCProviderForRuntime } from "./context/iocContext";
+import PendingTransactions from "../components/PendingTransactions";
+import { PopupBox } from "../components/styled";
+import { DevContextProvider } from "../context/devContext";
+import { IoCProviderForRuntime } from "../context/iocContext";
 import {
   TranslationProvider,
   useTranslationContext,
-} from "./context/translation";
-import { useTalerActionURL } from "./hooks/useTalerActionURL";
-import { strings } from "./i18n/strings";
-import { Pages, PopupNavBar } from "./NavigationBar";
-import { platform, setupPlatform } from "./platform/api";
-import chromeAPI from "./platform/chrome";
-import firefoxAPI from "./platform/firefox";
-import { BalancePage } from "./popup/BalancePage";
-import { TalerActionFound } from "./popup/TalerActionFound";
-import { BackupPage } from "./wallet/BackupPage";
-import { ProviderDetailPage } from "./wallet/ProviderDetailPage";
-
-function main(): void {
-  try {
-    const container = document.getElementById("container");
-    if (!container) {
-      throw Error("container not found, can't mount page contents");
-    }
-    render(<Application />, container);
-  } catch (e) {
-    console.error("got error", e);
-    if (e instanceof Error) {
-      document.body.innerText = `Fatal error: "${e.message}".  Please report 
this bug at https://bugs.gnunet.org/.`;
-    }
-  }
-}
-
-setupI18n("en", strings);
-
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
-const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
-if (isFirefox) {
-  console.log("Wallet setup for Firefox API");
-  setupPlatform(firefoxAPI);
-} else {
-  console.log("Wallet setup for Chrome API");
-  setupPlatform(chromeAPI);
-}
-
-if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", main);
-} else {
-  main();
-}
+} from "../context/translation";
+import { useTalerActionURL } from "../hooks/useTalerActionURL";
+import { Pages, PopupNavBar } from "../NavigationBar";
+import { platform } from "../platform/api";
+import { BackupPage } from "../wallet/BackupPage";
+import { ProviderDetailPage } from "../wallet/ProviderDetailPage";
+import { BalancePage } from "./BalancePage";
+import { TalerActionFound } from "./TalerActionFound";
 
 function CheckTalerActionComponent(): VNode {
   const [talerActionUrl] = useTalerActionURL();
@@ -90,7 +52,7 @@ function CheckTalerActionComponent(): VNode {
   return <Fragment />;
 }
 
-function Application(): VNode {
+export function Application(): VNode {
   const hash_history = createHashHistory();
   return (
     <TranslationProvider>
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx 
b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
index a1082ad9..2af6526c 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
@@ -34,7 +34,7 @@ export function TalerActionFound({ url, onDismiss }: Props) {
   const uriType = classifyTalerUri(url);
   const { i18n } = useTranslationContext();
   function redirectToWallet() {
-    platform.openWalletURIFromPopup(uriType, url);
+    platform.openWalletURIFromPopup(url);
   }
   return (
     <Fragment>
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx 
b/packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx
new file mode 100644
index 00000000..551b47bf
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx
@@ -0,0 +1,54 @@
+/*
+ This file is part of GNU Taler
+ (C) 2020 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/>
+ */
+
+/**
+ * Main entry point for extension pages.
+ *
+ * @author sebasjm
+ */
+
+import { setupI18n } from "@gnu-taler/taler-util";
+import { Fragment, h, render } from "preact";
+import { strings } from "./i18n/strings";
+import { setupPlatform } from "./platform/api";
+import devAPI from "./platform/dev";
+import { Application } from "./popup/Application";
+
+console.log("Wallet setup for Dev API");
+setupPlatform(devAPI);
+
+function main(): void {
+  try {
+    const container = document.getElementById("container");
+    if (!container) {
+      throw Error("container not found, can't mount page contents");
+    }
+    render(<Application />, container);
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report 
this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+setupI18n("en", strings);
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", main);
+} else {
+  main();
+}
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index dfb12666..d68918f7 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -21,29 +21,23 @@
  */
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { createHashHistory } from "history";
-import { Fragment, h, render, VNode } from "preact";
-import Router, { route, Route } from "preact-router";
-import { Match } from "preact-router/match";
-import { useEffect, useState } from "preact/hooks";
-import PendingTransactions from "./components/PendingTransactions";
-import { PopupBox } from "./components/styled";
-import { DevContextProvider } from "./context/devContext";
-import { IoCProviderForRuntime } from "./context/iocContext";
-import {
-  TranslationProvider,
-  useTranslationContext,
-} from "./context/translation";
-import { useTalerActionURL } from "./hooks/useTalerActionURL";
+import { Fragment, h, render } from "preact";
 import { strings } from "./i18n/strings";
-import { Pages, PopupNavBar } from "./NavigationBar";
-import { platform, setupPlatform } from "./platform/api";
+import { setupPlatform } from "./platform/api";
 import chromeAPI from "./platform/chrome";
 import firefoxAPI from "./platform/firefox";
-import { BalancePage } from "./popup/BalancePage";
-import { TalerActionFound } from "./popup/TalerActionFound";
-import { BackupPage } from "./wallet/BackupPage";
-import { ProviderDetailPage } from "./wallet/ProviderDetailPage";
+import { Application } from "./popup/Application";
+
+//FIXME: create different entry point for any platform instead of
+//switching in runtime
+const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
+if (isFirefox) {
+  console.log("Wallet setup for Firefox API");
+  setupPlatform(firefoxAPI);
+} else {
+  console.log("Wallet setup for Chrome API");
+  setupPlatform(chromeAPI);
+}
 
 function main(): void {
   try {
@@ -62,160 +56,8 @@ function main(): void {
 
 setupI18n("en", strings);
 
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
-const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
-if (isFirefox) {
-  console.log("Wallet setup for Firefox API");
-  setupPlatform(firefoxAPI);
-} else {
-  console.log("Wallet setup for Chrome API");
-  setupPlatform(chromeAPI);
-}
-
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", main);
 } else {
   main();
 }
-
-function CheckTalerActionComponent(): VNode {
-  const [talerActionUrl] = useTalerActionURL();
-
-  useEffect(() => {
-    if (talerActionUrl)
-      route(Pages.cta.replace(":action", encodeURIComponent(talerActionUrl)));
-  }, [talerActionUrl]);
-
-  return <Fragment />;
-}
-
-function Application(): VNode {
-  const hash_history = createHashHistory();
-  return (
-    <TranslationProvider>
-      <DevContextProvider>
-        {({ devMode }: { devMode: boolean }) => (
-          <IoCProviderForRuntime>
-            <PendingTransactions
-              goToTransaction={(txId: string) =>
-                route(Pages.balance_transaction.replace(":tid", txId))
-              }
-            />
-            <Match>
-              {({ path }: { path: string }) => <PopupNavBar path={path} />}
-            </Match>
-            <CheckTalerActionComponent />
-            <PopupBox devMode={devMode}>
-              <Router history={hash_history}>
-                <Route
-                  path={Pages.balance}
-                  component={BalancePage}
-                  goToWalletManualWithdraw={() =>
-                    route(
-                      Pages.balance_manual_withdraw.replace(":currency?", ""),
-                    )
-                  }
-                  goToWalletDeposit={(currency: string) =>
-                    route(Pages.balance_deposit.replace(":currency", currency))
-                  }
-                  goToWalletHistory={(currency: string) =>
-                    route(Pages.balance_history.replace(":currency?", 
currency))
-                  }
-                />
-
-                <Route
-                  path={Pages.cta}
-                  component={function Action({ action }: { action: string }) {
-                    const [, setDismissed] = useTalerActionURL();
-
-                    return (
-                      <TalerActionFound
-                        url={decodeURIComponent(action)}
-                        onDismiss={() => {
-                          setDismissed(true);
-                          route(Pages.balance);
-                        }}
-                      />
-                    );
-                  }}
-                />
-
-                <Route
-                  path={Pages.backup}
-                  component={BackupPage}
-                  onAddProvider={() => {
-                    route(Pages.backup_provider_add);
-                  }}
-                />
-                <Route
-                  path={Pages.backup_provider_detail}
-                  component={ProviderDetailPage}
-                  onBack={() => {
-                    route(Pages.backup);
-                  }}
-                />
-
-                <Route
-                  path={Pages.balance_transaction}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.balance_manual_withdraw}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.balance_deposit}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.balance_history}
-                  component={RedirectToWalletPage}
-                />
-                <Route
-                  path={Pages.backup_provider_add}
-                  component={RedirectToWalletPage}
-                />
-                <Route path={Pages.settings} component={RedirectToWalletPage} 
/>
-                <Route
-                  path={Pages.settings_exchange_add}
-                  component={RedirectToWalletPage}
-                />
-                <Route path={Pages.dev} component={RedirectToWalletPage} />
-
-                <Route default component={Redirect} to={Pages.balance} />
-              </Router>
-            </PopupBox>
-          </IoCProviderForRuntime>
-        )}
-      </DevContextProvider>
-    </TranslationProvider>
-  );
-}
-
-function RedirectToWalletPage(): VNode {
-  const page = (document.location.hash || "#/").replace("#", "");
-  const [showText, setShowText] = useState(false);
-  useEffect(() => {
-    platform.openWalletPageFromPopup(page);
-    setTimeout(() => {
-      setShowText(true);
-    }, 250);
-  });
-  const { i18n } = useTranslationContext();
-  if (!showText) return <Fragment />;
-  return (
-    <span>
-      <i18n.Translate>
-        this popup is being closed and you are being redirected to {page}
-      </i18n.Translate>
-    </span>
-  );
-}
-
-function Redirect({ to }: { to: string }): null {
-  useEffect(() => {
-    route(to, true);
-  });
-  return null;
-}
diff --git a/packages/taler-wallet-webextension/src/svg/chevron-down.svg 
b/packages/taler-wallet-webextension/src/svg/chevron-down.svg
index 36adbc1c..0e1c0aed 100644
--- a/packages/taler-wallet-webextension/src/svg/chevron-down.svg
+++ b/packages/taler-wallet-webextension/src/svg/chevron-down.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 
6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; 
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
-        width="92px" height="92px" viewBox="0 0 92 92" enable-background="new 
0 0 92 92" xml:space="preserve">
-<path id="XMLID_467_" 
d="M46,63c-1.1,0-2.1-0.4-2.9-1.2l-25-26c-1.5-1.6-1.5-4.1,0.1-5.7c1.6-1.5,4.1-1.5,5.7,0.1l22.1,23l22.1-23
-       
c1.5-1.6,4.1-1.6,5.7-0.1c1.6,1.5,1.6,4.1,0.1,5.7l-25,26C48.1,62.6,47.1,63,46,63z"/>
-</svg>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; 
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" viewBox="0 0 92 92" 
enable-background="new 0 0 92 92" xml:space="preserve">
+       <path id="XMLID_467_" 
d="M46,63c-1.1,0-2.1-0.4-2.9-1.2l-25-26c-1.5-1.6-1.5-4.1,0.1-5.7c1.6-1.5,4.1-1.5,5.7,0.1l22.1,23l22.1-23
+       
c1.5-1.6,4.1-1.6,5.7-0.1c1.6,1.5,1.6,4.1,0.1,5.7l-25,26C48.1,62.6,47.1,63,46,63z"
 />
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx 
b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index bebf036c..751dbfba 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
@@ -15,7 +15,7 @@ export function AddNewActionView({ onCancel }: Props): VNode {
   const { i18n } = useTranslationContext();
 
   function redirectToWallet() {
-    platform.openWalletURIFromPopup(uriType, url);
+    platform.openWalletURIFromPopup(url);
   }
 
   return (
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/wallet/Application.tsx
similarity index 76%
copy from packages/taler-wallet-webextension/src/walletEntryPoint.tsx
copy to packages/taler-wallet-webextension/src/wallet/Application.tsx
index e7cb1f5e..2116b500 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -20,77 +20,38 @@
  * @author sebasjm
  */
 
-import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
-import { Fragment, h, render, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
 import Match from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
-import { LogoHeader } from "./components/LogoHeader";
-import PendingTransactions from "./components/PendingTransactions";
-import { SuccessBox, WalletBox } from "./components/styled";
-import { DevContextProvider } from "./context/devContext";
-import { IoCProviderForRuntime } from "./context/iocContext";
+import { LogoHeader } from "../components/LogoHeader";
+import PendingTransactions from "../components/PendingTransactions";
+import { SuccessBox, WalletBox } from "../components/styled";
+import { DevContextProvider } from "../context/devContext";
+import { IoCProviderForRuntime } from "../context/iocContext";
 import {
   TranslationProvider,
   useTranslationContext,
-} from "./context/translation";
-import { PayPage } from "./cta/Pay";
-import { RefundPage } from "./cta/Refund";
-import { TipPage } from "./cta/Tip";
-import { WithdrawPage } from "./cta/Withdraw";
-import { strings } from "./i18n/strings";
-import { Pages, WalletNavBar } from "./NavigationBar";
-import { setupPlatform } from "./platform/api";
-import chromeAPI from "./platform/chrome";
-import firefoxAPI from "./platform/firefox";
-import { DeveloperPage } from "./popup/DeveloperPage";
-import { BackupPage } from "./wallet/BackupPage";
-import { DepositPage } from "./wallet/DepositPage";
-import { ExchangeAddPage } from "./wallet/ExchangeAddPage";
-import { HistoryPage } from "./wallet/History";
-import { ManualWithdrawPage } from "./wallet/ManualWithdrawPage";
-import { ProviderAddPage } from "./wallet/ProviderAddPage";
-import { ProviderDetailPage } from "./wallet/ProviderDetailPage";
-import { SettingsPage } from "./wallet/Settings";
-import { TransactionPage } from "./wallet/Transaction";
-import { WelcomePage } from "./wallet/Welcome";
+} from "../context/translation";
+import { PayPage } from "../cta/Pay";
+import { RefundPage } from "../cta/Refund";
+import { TipPage } from "../cta/Tip";
+import { WithdrawPage } from "../cta/Withdraw";
+import { Pages, WalletNavBar } from "../NavigationBar";
+import { DeveloperPage } from "../popup/DeveloperPage";
+import { BackupPage } from "./BackupPage";
+import { DepositPage } from "./DepositPage";
+import { ExchangeAddPage } from "./ExchangeAddPage";
+import { HistoryPage } from "./History";
+import { ManualWithdrawPage } from "./ManualWithdrawPage";
+import { ProviderAddPage } from "./ProviderAddPage";
+import { ProviderDetailPage } from "./ProviderDetailPage";
+import { SettingsPage } from "./Settings";
+import { TransactionPage } from "./Transaction";
+import { WelcomePage } from "./Welcome";
 
-function main(): void {
-  try {
-    const container = document.getElementById("container");
-    if (!container) {
-      throw Error("container not found, can't mount page contents");
-    }
-    render(<Application />, container);
-  } catch (e) {
-    console.error("got error", e);
-    if (e instanceof Error) {
-      document.body.innerText = `Fatal error: "${e.message}".  Please report 
this bug at https://bugs.gnunet.org/.`;
-    }
-  }
-}
-
-setupI18n("en", strings);
-
-const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
-if (isFirefox) {
-  console.log("Wallet setup for Firefox API");
-  setupPlatform(firefoxAPI);
-} else {
-  console.log("Wallet setup for Chrome API");
-  setupPlatform(chromeAPI);
-}
-
-if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", main);
-} else {
-  main();
-}
-
-function Application(): VNode {
+export function Application(): VNode {
   const [globalNotification, setGlobalNotification] = useState<
     VNode | undefined
   >(undefined);
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx 
b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index b420c7eb..df93b0c4 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -253,9 +253,6 @@ export function View({
               There is no known bank account to send money to
             </i18n.Translate>
           </p>
-          <ButtonBoxWarning>
-            <i18n.Translate>Withdraw</i18n.Translate>
-          </ButtonBoxWarning>
         </WarningBox>
         <footer>
           <Button onClick={onCancel}>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.dev.tsx 
b/packages/taler-wallet-webextension/src/walletEntryPoint.dev.tsx
new file mode 100644
index 00000000..ceceaf04
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.dev.tsx
@@ -0,0 +1,54 @@
+/*
+ This file is part of GNU Taler
+ (C) 2020 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/>
+ */
+
+/**
+ * Main entry point for extension pages.
+ *
+ * @author sebasjm
+ */
+
+import { setupI18n } from "@gnu-taler/taler-util";
+import { Fragment, h, render } from "preact";
+import { strings } from "./i18n/strings";
+import { setupPlatform } from "./platform/api";
+import devAPI from "./platform/dev";
+import { Application } from "./wallet/Application";
+
+console.log("Wallet setup for Dev API");
+setupPlatform(devAPI);
+
+function main(): void {
+  try {
+    const container = document.getElementById("container");
+    if (!container) {
+      throw Error("container not found, can't mount page contents");
+    }
+    render(<Application />, container);
+  } catch (e) {
+    console.error("got error", e);
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report 
this bug at https://bugs.gnunet.org/.`;
+    }
+  }
+}
+
+setupI18n("en", strings);
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", main);
+} else {
+  main();
+}
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index e7cb1f5e..549eee50 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -21,40 +21,24 @@
  */
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { createHashHistory } from "history";
-import { Fragment, h, render, VNode } from "preact";
-import Router, { route, Route } from "preact-router";
-import Match from "preact-router/match";
-import { useEffect, useState } from "preact/hooks";
-import { LogoHeader } from "./components/LogoHeader";
-import PendingTransactions from "./components/PendingTransactions";
-import { SuccessBox, WalletBox } from "./components/styled";
-import { DevContextProvider } from "./context/devContext";
-import { IoCProviderForRuntime } from "./context/iocContext";
-import {
-  TranslationProvider,
-  useTranslationContext,
-} from "./context/translation";
-import { PayPage } from "./cta/Pay";
-import { RefundPage } from "./cta/Refund";
-import { TipPage } from "./cta/Tip";
-import { WithdrawPage } from "./cta/Withdraw";
+import { Fragment, h, render } from "preact";
 import { strings } from "./i18n/strings";
-import { Pages, WalletNavBar } from "./NavigationBar";
 import { setupPlatform } from "./platform/api";
 import chromeAPI from "./platform/chrome";
 import firefoxAPI from "./platform/firefox";
-import { DeveloperPage } from "./popup/DeveloperPage";
-import { BackupPage } from "./wallet/BackupPage";
-import { DepositPage } from "./wallet/DepositPage";
-import { ExchangeAddPage } from "./wallet/ExchangeAddPage";
-import { HistoryPage } from "./wallet/History";
-import { ManualWithdrawPage } from "./wallet/ManualWithdrawPage";
-import { ProviderAddPage } from "./wallet/ProviderAddPage";
-import { ProviderDetailPage } from "./wallet/ProviderDetailPage";
-import { SettingsPage } from "./wallet/Settings";
-import { TransactionPage } from "./wallet/Transaction";
-import { WelcomePage } from "./wallet/Welcome";
+import { Application } from "./wallet/Application";
+
+const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
+
+//FIXME: create different entry point for any platform instead of
+//switching in runtime
+if (isFirefox) {
+  console.log("Wallet setup for Firefox API");
+  setupPlatform(firefoxAPI);
+} else {
+  console.log("Wallet setup for Chrome API");
+  setupPlatform(chromeAPI);
+}
 
 function main(): void {
   try {
@@ -73,230 +57,8 @@ function main(): void {
 
 setupI18n("en", strings);
 
-const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
-if (isFirefox) {
-  console.log("Wallet setup for Firefox API");
-  setupPlatform(firefoxAPI);
-} else {
-  console.log("Wallet setup for Chrome API");
-  setupPlatform(chromeAPI);
-}
-
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", main);
 } else {
   main();
 }
-
-function Application(): VNode {
-  const [globalNotification, setGlobalNotification] = useState<
-    VNode | undefined
-  >(undefined);
-  const hash_history = createHashHistory();
-  function clearNotification(): void {
-    setGlobalNotification(undefined);
-  }
-  function clearNotificationWhenMovingOut(): void {
-    // const movingOutFromNotification =
-    //   globalNotification && e.url !== globalNotification.to;
-    if (globalNotification) {
-      //&& movingOutFromNotification) {
-      setGlobalNotification(undefined);
-    }
-  }
-  const { i18n } = useTranslationContext();
-
-  return (
-    <TranslationProvider>
-      <DevContextProvider>
-        <IoCProviderForRuntime>
-          {/* <Match/> won't work in the first render if <Router /> is not 
called first */}
-          {/* https://github.com/preactjs/preact-router/issues/415 */}
-          <Router history={hash_history} />
-          <Match>
-            {({ path }: { path: string }) => {
-              if (path && path.startsWith("/cta")) return;
-              return (
-                <Fragment>
-                  <LogoHeader />
-                  <WalletNavBar path={path} />
-                  <div
-                    style={{
-                      backgroundColor: "lightcyan",
-                      display: "flex",
-                      justifyContent: "center",
-                    }}
-                  >
-                    <PendingTransactions
-                      goToTransaction={(txId: string) =>
-                        route(Pages.balance_transaction.replace(":tid", txId))
-                      }
-                    />
-                  </div>
-                </Fragment>
-              );
-            }}
-          </Match>
-          <WalletBox>
-            {globalNotification && (
-              <SuccessBox onClick={clearNotification}>
-                <div>{globalNotification}</div>
-              </SuccessBox>
-            )}
-            <Router
-              history={hash_history}
-              onChange={clearNotificationWhenMovingOut}
-            >
-              <Route path={Pages.welcome} component={WelcomePage} />
-
-              {/**
-               * BALANCE
-               */}
-
-              <Route
-                path={Pages.balance_history}
-                component={HistoryPage}
-                goToWalletDeposit={(currency: string) =>
-                  route(Pages.balance_deposit.replace(":currency", currency))
-                }
-                goToWalletManualWithdraw={(currency?: string) =>
-                  route(
-                    Pages.balance_manual_withdraw.replace(
-                      ":currency?",
-                      currency || "",
-                    ),
-                  )
-                }
-              />
-              <Route
-                path={Pages.balance_transaction}
-                component={TransactionPage}
-                goToWalletHistory={(currency?: string) => {
-                  route(
-                    Pages.balance_history.replace(":currency?", currency || 
""),
-                  );
-                }}
-              />
-
-              <Route
-                path={Pages.balance_manual_withdraw}
-                component={ManualWithdrawPage}
-                onCancel={() => {
-                  route(Pages.balance);
-                }}
-              />
-
-              <Route
-                path={Pages.balance_deposit}
-                component={DepositPage}
-                onCancel={(currency: string) => {
-                  route(Pages.balance_history.replace(":currency?", currency));
-                }}
-                onSuccess={(currency: string) => {
-                  route(Pages.balance_history.replace(":currency?", currency));
-                  setGlobalNotification(
-                    <i18n.Translate>
-                      All done, your transaction is in progress
-                    </i18n.Translate>,
-                  );
-                }}
-              />
-              {/**
-               * PENDING
-               */}
-              <Route path={Pages.settings} component={SettingsPage} />
-
-              {/**
-               * BACKUP
-               */}
-              <Route
-                path={Pages.backup}
-                component={BackupPage}
-                onAddProvider={() => {
-                  route(Pages.backup_provider_add);
-                }}
-              />
-              <Route
-                path={Pages.backup_provider_detail}
-                component={ProviderDetailPage}
-                onBack={() => {
-                  route(Pages.backup);
-                }}
-              />
-              <Route
-                path={Pages.backup_provider_add}
-                component={ProviderAddPage}
-                onBack={() => {
-                  route(Pages.backup);
-                }}
-              />
-
-              {/**
-               * SETTINGS
-               */}
-              <Route
-                path={Pages.settings_exchange_add}
-                component={ExchangeAddPage}
-                onBack={() => {
-                  route(Pages.balance);
-                }}
-              />
-
-              {/**
-               * DEV
-               */}
-
-              <Route path={Pages.dev} component={DeveloperPage} />
-
-              {/**
-               * CALL TO ACTION
-               */}
-              <Route
-                path={Pages.cta_pay}
-                component={PayPage}
-                goToWalletManualWithdraw={(currency?: string) =>
-                  route(
-                    Pages.balance_manual_withdraw.replace(
-                      ":currency?",
-                      currency || "",
-                    ),
-                  )
-                }
-                goBack={() => route(Pages.balance)}
-              />
-              <Route path={Pages.cta_refund} component={RefundPage} />
-              <Route path={Pages.cta_tips} component={TipPage} />
-              <Route path={Pages.cta_withdraw} component={WithdrawPage} />
-
-              {/**
-               * NOT FOUND
-               * all redirects should be at the end
-               */}
-              <Route
-                path={Pages.balance}
-                component={Redirect}
-                to={Pages.balance_history.replace(":currency?", "")}
-              />
-
-              <Route
-                default
-                component={Redirect}
-                to={Pages.balance_history.replace(":currency?", "")}
-              />
-            </Router>
-          </WalletBox>
-        </IoCProviderForRuntime>
-      </DevContextProvider>
-    </TranslationProvider>
-  );
-}
-
-function Redirect({ to }: { to: string }): null {
-  useEffect(() => {
-    console.log("got some wrong route", to);
-    route(to, true);
-  });
-  return null;
-}
diff --git a/packages/taler-wallet-webextension/src/wxApi.ts 
b/packages/taler-wallet-webextension/src/wxApi.ts
index dd53a4fe..01db2fd9 100644
--- a/packages/taler-wallet-webextension/src/wxApi.ts
+++ b/packages/taler-wallet-webextension/src/wxApi.ts
@@ -97,7 +97,7 @@ export interface UpgradeResponse {
 async function callBackend(operation: string, payload: any): Promise<any> {
   let response: CoreApiResponse;
   try {
-    response = await platform.setMessageToWalletBackground(operation, payload);
+    response = await platform.sendMessageToWalletBackground(operation, 
payload);
   } catch (e) {
     console.log("Error calling backend");
     throw new Error(`Error contacting backend: ${e}`);
@@ -417,11 +417,11 @@ export function onUpdateNotification(
   messageTypes: Array<NotificationType>,
   doCallback: () => void,
 ): () => void {
-  const listener = (message: MessageFromBackend): void => {
+  const onNewMessage = (message: MessageFromBackend): void => {
     const shouldNotify = messageTypes.includes(message.type);
     if (shouldNotify) {
       doCallback();
     }
   };
-  return platform.listenToWalletNotifications(listener);
+  return platform.listenToWalletBackground(onNewMessage);
 }
diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts 
b/packages/taler-wallet-webextension/src/wxBackend.ts
index 048c8fc7..6b73acd0 100644
--- a/packages/taler-wallet-webextension/src/wxBackend.ts
+++ b/packages/taler-wallet-webextension/src/wxBackend.ts
@@ -269,7 +269,7 @@ export async function wxMain(): Promise<void> {
 
   // Handlers for messages coming directly from the content
   // script on the page
-  platform.registerOnNewMessage((message, sender, callback) => {
+  platform.listenToAllChannels((message, sender, callback) => {
     afterWalletIsInitialized.then(() => {
       dispatch(message, sender, callback);
     });
@@ -285,8 +285,7 @@ export async function wxMain(): Promise<void> {
 
   // On platforms that support it, also listen to external
   // modification of permissions.
-  platform.getPermissionsApi().addPermissionsListener((perm) => {
-    const lastError = platform.getLastError()
+  platform.getPermissionsApi().addPermissionsListener((perm, lastError) => {
     if (lastError) {
       console.error(lastError);
       return;
diff --git a/packages/taler-wallet-webextension/static/wallet.html 
b/packages/taler-wallet-webextension/static/wallet.html
index f9dd8a19..2c9c74b7 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/packages/taler-wallet-webextension/static/wallet.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" type="text/css" href="/dist/popupEntryPoint.css" />
+    <link rel="stylesheet" type="text/css" href="/dist/walletEntryPoint.css" />
     <link rel="icon" href="/static/img/icon.png" />
     <script src="/dist/walletEntryPoint.js"></script>
     <style>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]