From 67fe4e8c20dd810aa6bf124c457bf8161ce56589 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 1 Jun 2023 12:22:04 -0300
Subject: move folder to catch up the reload on save

---
 .../taler-wallet-webextension/dev-html/.gitignore  |   4 -
 .../taler-wallet-webextension/dev-html/index.html  |  68 ---------------
 .../taler-wallet-webextension/dev-html/popup.html  |  39 ---------
 .../dev-html/static/font/import.css                |  35 --------
 .../dev-html/static/font/roboto-italic-400.ttf     | Bin 130872 -> 0 bytes
 .../dev-html/static/font/roboto-normal-300.tff     | Bin 128256 -> 0 bytes
 .../dev-html/static/font/roboto-normal-400.ttf     | Bin 129584 -> 0 bytes
 .../dev-html/static/font/roboto-normal-500.ttf     | Bin 129768 -> 0 bytes
 .../dev-html/static/font/roboto-normal-700.ttf     | Bin 128676 -> 0 bytes
 .../dev-html/stories.html                          |  12 ---
 .../taler-wallet-webextension/dev-html/tests.html  |  23 -----
 .../taler-wallet-webextension/dev-html/wallet.html |  29 -------
 .../taler-wallet-webextension/src/spa/index.html   |  93 +++++++++++++++++++++
 .../src/spa/manifest.json                          |  82 ++++++++++++++++++
 .../taler-wallet-webextension/src/spa/popup.html   |  39 +++++++++
 .../src/spa/service_worker.js                      |  11 +++
 .../src/spa/static/font/import.css                 |  35 ++++++++
 .../src/spa/static/font/roboto-italic-400.ttf      | Bin 0 -> 130872 bytes
 .../src/spa/static/font/roboto-normal-300.tff      | Bin 0 -> 128256 bytes
 .../src/spa/static/font/roboto-normal-400.ttf      | Bin 0 -> 129584 bytes
 .../src/spa/static/font/roboto-normal-500.ttf      | Bin 0 -> 129768 bytes
 .../src/spa/static/font/roboto-normal-700.ttf      | Bin 0 -> 128676 bytes
 .../taler-wallet-webextension/src/spa/stories.html |  12 +++
 .../taler-wallet-webextension/src/spa/tests.html   |  23 +++++
 .../taler-wallet-webextension/src/spa/wallet.html  |  29 +++++++
 25 files changed, 324 insertions(+), 210 deletions(-)
 delete mode 100644 packages/taler-wallet-webextension/dev-html/.gitignore
 delete mode 100644 packages/taler-wallet-webextension/dev-html/index.html
 delete mode 100644 packages/taler-wallet-webextension/dev-html/popup.html
 delete mode 100644 packages/taler-wallet-webextension/dev-html/static/font/import.css
 delete mode 100644 packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf
 delete mode 100644 packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff
 delete mode 100644 packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf
 delete mode 100644 packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf
 delete mode 100644 packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf
 delete mode 100644 packages/taler-wallet-webextension/dev-html/stories.html
 delete mode 100644 packages/taler-wallet-webextension/dev-html/tests.html
 delete mode 100644 packages/taler-wallet-webextension/dev-html/wallet.html
 create mode 100644 packages/taler-wallet-webextension/src/spa/index.html
 create mode 100644 packages/taler-wallet-webextension/src/spa/manifest.json
 create mode 100644 packages/taler-wallet-webextension/src/spa/popup.html
 create mode 100644 packages/taler-wallet-webextension/src/spa/service_worker.js
 create mode 100644 packages/taler-wallet-webextension/src/spa/static/font/import.css
 create mode 100644 packages/taler-wallet-webextension/src/spa/static/font/roboto-italic-400.ttf
 create mode 100644 packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-300.tff
 create mode 100644 packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-400.ttf
 create mode 100644 packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-500.ttf
 create mode 100644 packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-700.ttf
 create mode 100644 packages/taler-wallet-webextension/src/spa/stories.html
 create mode 100644 packages/taler-wallet-webextension/src/spa/tests.html
 create mode 100644 packages/taler-wallet-webextension/src/spa/wallet.html

(limited to 'packages/taler-wallet-webextension')

diff --git a/packages/taler-wallet-webextension/dev-html/.gitignore b/packages/taler-wallet-webextension/dev-html/.gitignore
deleted file mode 100644
index c4f051f4f..000000000
--- a/packages/taler-wallet-webextension/dev-html/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-/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
deleted file mode 100644
index 4b7fe34e8..000000000
--- a/packages/taler-wallet-webextension/dev-html/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<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";
-      }
-      function openPage() {
-        window.frames["other"].location =
-          document.getElementById("page-url").value;
-      }
-    </script>
-    <input id="page-url" type="text" />
-    <button onclick="openPage()">open</button>
-    <a
-      href='javascript:void(window.frames["other"].location = "http://bank.taler:5882")'
-      >open local bank</a
-    >
-    <hr />
-    <iframe
-      id="other-window"
-      name="other"
-      src="http://bank.taler:5882"
-      width="100%"
-      height="325"
-    >
-    </iframe>
-    <hr />
-    <button value="asd" onclick="openPopup()">open popup</button><br />
-    <iframe
-      id="popup-window"
-      name="popup"
-      src="about:blank"
-      width="500"
-      height="325"
-    >
-    </iframe>
-    <hr />
-    <button value="asd" onclick="closeWallet();openWallet()">
-      reload wallet page
-    </button>
-    <br />
-    <iframe
-      id="wallet-window"
-      name="wallet"
-      src="/wallet.html"
-      width="800"
-      height="100%"
-    >
-    </iframe>
-    <hr />
-    <iframe src="/tests.html" name="wallet" width="800" height="100%"> </iframe>
-    <hr />
-    <iframe src="/stories.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/dev-html/popup.html b/packages/taler-wallet-webextension/dev-html/popup.html
deleted file mode 100644
index 93a886d54..000000000
--- a/packages/taler-wallet-webextension/dev-html/popup.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      html {
-        font-family: sans-serif; /* 1 */
-      }
-      body {
-        margin: 0;
-      }
-    </style>
-    <style>
-      html {
-      }
-      h1 {
-        font-size: 2em;
-      }
-      input {
-        font: inherit;
-      }
-      body {
-        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>
-    <taler-popup id="container" class="popup-container"></taler-popup>
-  </body>
-</html>
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/import.css b/packages/taler-wallet-webextension/dev-html/static/font/import.css
deleted file mode 100644
index 05edddb51..000000000
--- a/packages/taler-wallet-webextension/dev-html/static/font/import.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/static/font/roboto-italic-400.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(/static/font/roboto-normal-300.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/static/font/roboto-normal-400.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(/static/font/roboto-normal-500.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(/static/font/roboto-normal-700.ttf) format('truetype');
-}
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf b/packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf
deleted file mode 100644
index 1e746d17f..000000000
Binary files a/packages/taler-wallet-webextension/dev-html/static/font/roboto-italic-400.ttf and /dev/null differ
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff
deleted file mode 100644
index ec821b577..000000000
Binary files a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-300.tff and /dev/null differ
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf
deleted file mode 100644
index 9d4b32b47..000000000
Binary files a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-400.ttf and /dev/null differ
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf
deleted file mode 100644
index 4b4e1c656..000000000
Binary files a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-500.ttf and /dev/null differ
diff --git a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf b/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf
deleted file mode 100644
index 58d877c58..000000000
Binary files a/packages/taler-wallet-webextension/dev-html/static/font/roboto-normal-700.ttf and /dev/null differ
diff --git a/packages/taler-wallet-webextension/dev-html/stories.html b/packages/taler-wallet-webextension/dev-html/stories.html
deleted file mode 100644
index b07c4bd1c..000000000
--- a/packages/taler-wallet-webextension/dev-html/stories.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Stories</title>
-    <link rel="stylesheet" type="text/css" href="/dist/stories.css" />
-    <link rel="stylesheet" type="text/css" href="/static/font/import.css" />
-    <script src="/dist/stories.js"></script>
-  </head>
-  <body>
-    <taler-stories id="container"></taler-stories>
-  </body>
-</html>
diff --git a/packages/taler-wallet-webextension/dev-html/tests.html b/packages/taler-wallet-webextension/dev-html/tests.html
deleted file mode 100644
index 4b3ec93b5..000000000
--- a/packages/taler-wallet-webextension/dev-html/tests.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Mocha Tests</title>
-    <link rel="stylesheet" href="/mocha.css" />
-  </head>
-  <body>
-    <div id="mocha"></div>
-    <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>
-    <!-- load your test files here -->
-
-    <script>
-      mocha.run();
-    </script>
-  </body>
-</html>
diff --git a/packages/taler-wallet-webextension/dev-html/wallet.html b/packages/taler-wallet-webextension/dev-html/wallet.html
deleted file mode 100644
index ff8616847..000000000
--- a/packages/taler-wallet-webextension/dev-html/wallet.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" type="text/css" href="/dist/walletEntryPoint.css" />
-    <style>
-      html {
-        font-family: sans-serif; /* 1 */
-      }
-      h1 {
-        font-size: 2em;
-      }
-      input {
-        font: inherit;
-      }
-      body {
-        margin: 0;
-        font-size: 100%;
-        padding: 0;
-        background-color: #f8faf7;
-        font-family: Arial, Helvetica, sans-serif;
-      }
-    </style>
-    <script src="/dist/walletEntryPoint.dev.js"></script>
-  </head>
-
-  <body>
-    <div id="container" class="wallet-container"></div>
-  </body>
-</html>
diff --git a/packages/taler-wallet-webextension/src/spa/index.html b/packages/taler-wallet-webextension/src/spa/index.html
new file mode 100644
index 000000000..f352c7bf4
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/index.html
@@ -0,0 +1,93 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="manifest.json" />
+    <style>
+      .overlay {
+        position: absolute;
+        top: 0px;
+        display: none;
+width: 100%;
+height: 100%;
+background-color: rgba(0,0,0,0.5);
+color:white;
+justify-content: center;
+      }
+      .overlay > iframe {
+        margin: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      function openPopup() {
+        document.getElementById("popup-overlay").style.display = "flex"
+        window.frames["popup"].location = "popup.html";
+        window.frames["popup"]
+      }
+      function closePopup() {
+        document.getElementById("popup-overlay").style.display = "none"
+      }
+      function redirectWallet(url) {
+        window.frames["wallet"].location = url
+      }
+      function openWallet() {
+        redirectWallet("wallet.html")
+      }
+      function closeWallet() {
+        redirectWallet("about:blank")
+      }
+      function openPage() {
+        window.frames["other"].location =
+          document.getElementById("page-url").value;
+      }
+    </script>
+    <button value="asd" onclick="openPopup()">open popup</button>
+    <button value="asd" onclick="closeWallet();openWallet()">
+      reload wallet page
+    </button>
+<br />
+    <iframe
+      id="wallet-window"
+      name="wallet"
+      src="wallet.html"
+      width="1000"
+      height="100%"
+    >
+    <input id="page-url" type="text" />
+    <button onclick="openPage()">open</button>
+    <!-- <a
+      href='javascript:void(window.frames["other"].location = "http://bank.taler:5882")'
+      >open local bank</a
+    >
+    <hr />
+    <iframe
+      id="other-window"
+      name="other"
+      src="http://bank.taler:5882"
+      width="100%"
+      height="325"
+    >
+    </iframe> -->
+    <hr />
+    <div class="overlay" id="popup-overlay">
+      <iframe
+      id="popup-window"
+      name="popup"
+      src="about:blank"
+      width="500"
+      height="325"
+    >
+  </iframe>
+    </div>
+    <hr />
+    </iframe>
+    <!-- <hr />
+    <iframe src="tests.html" name="wallet" width="800" height="100%"> </iframe> -->
+    <!-- <hr />
+    <iframe src="stories.html" name="wallet" width="800" height="100%"> -->
+    </iframe>
+    <hr />
+    <script type="module" src="background.dev.js"></script>
+  </body>
+</html>
diff --git a/packages/taler-wallet-webextension/src/spa/manifest.json b/packages/taler-wallet-webextension/src/spa/manifest.json
new file mode 100644
index 000000000..d871bf7e8
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/manifest.json
@@ -0,0 +1,82 @@
+{
+  "name": "GNU Taler Wallet",
+  "description": "Privacy preserving and transparent payments",
+  "author": "GNU Taler Developers",
+  "version": "0.9.3.13",
+  "version_name": "0.9.3-dev.13",
+  "icons": {
+    "16": "static/img/taler-logo-16.png",
+    "19": "static/img/taler-logo-19.png",
+    "32": "static/img/taler-logo-32.png",
+    "38": "static/img/taler-logo-38.png",
+    "48": "static/img/taler-logo-48.png",
+    "64": "static/img/taler-logo-64.png",
+    "128": "static/img/taler-logo-128.png",
+    "256": "static/img/taler-logo-256.png",
+    "512": "static/img/taler-logo-512.png"
+  },
+  "manifest_version": 3,
+  "minimum_chrome_version": "88",
+  "permissions": [
+    "unlimitedStorage",
+    "storage",
+    "activeTab",
+    "scripting",
+    "declarativeContent",
+    "alarms"
+  ],
+  "commands": {
+    "_execute_action": {
+      "suggested_key": {
+        "default": "Alt+W"
+      }
+    }
+  },
+  "content_scripts": [
+    {
+      "id": "taler-wallet-interaction",
+      "matches": [
+        "file://*/*",
+        "http://*/*",
+        "https://*/*"
+      ],
+      "js": [
+        "dist/taler-wallet-interaction-loader.js"
+      ]
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "static/wallet.html",
+        "dist/taler-wallet-interaction-loader.js.map",
+        "dist/taler-wallet-interaction-loader.js",
+        "dist/taler-wallet-interaction-support.js.map",
+        "dist/taler-wallet-interaction-support.js"
+      ],
+      "matches": [
+        "https://*/*",
+        "http://*/*",
+        "file://*/*"
+      ]
+    }
+  ],
+  "action": {
+    "default_icon": {
+      "16": "static/img/taler-logo-16.png",
+      "19": "static/img/taler-logo-19.png",
+      "32": "static/img/taler-logo-32.png",
+      "38": "static/img/taler-logo-38.png",
+      "48": "static/img/taler-logo-48.png",
+      "64": "static/img/taler-logo-64.png",
+      "128": "static/img/taler-logo-128.png",
+      "256": "static/img/taler-logo-256.png",
+      "512": "static/img/taler-logo-512.png"
+    },
+    "default_title": "GNU Taler Wallet",
+    "default_popup": "static/popup.html"
+  },
+  "background": {
+    "service_worker": "service_worker.js"
+  }
+}
diff --git a/packages/taler-wallet-webextension/src/spa/popup.html b/packages/taler-wallet-webextension/src/spa/popup.html
new file mode 100644
index 000000000..34d1d019c
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/popup.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html {
+        font-family: sans-serif; /* 1 */
+      }
+      body {
+        margin: 0;
+      }
+    </style>
+    <style>
+      html {
+      }
+      h1 {
+        font-size: 2em;
+      }
+      input {
+        font: inherit;
+      }
+      body {
+        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="popupEntryPoint.dev.css" />
+    <script type="module" src="popupEntryPoint.dev.js"></script>
+  </head>
+
+  <body>
+    <taler-popup id="container" class="popup-container"></taler-popup>
+  </body>
+</html>
diff --git a/packages/taler-wallet-webextension/src/spa/service_worker.js b/packages/taler-wallet-webextension/src/spa/service_worker.js
new file mode 100644
index 000000000..38064e245
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/service_worker.js
@@ -0,0 +1,11 @@
+/* eslint-disable no-undef */
+/**
+ * Wrapper to catch any initialization error and show it in the logs
+ */
+try {
+  importScripts("dist/background.js");
+  self.skipWaiting();
+  console.log("SERVICE WORKER init: ok");
+} catch (e) {
+  console.error("SERVICE WORKER failed:", e);
+}
diff --git a/packages/taler-wallet-webextension/src/spa/static/font/import.css b/packages/taler-wallet-webextension/src/spa/static/font/import.css
new file mode 100644
index 000000000..05edddb51
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/static/font/import.css
@@ -0,0 +1,35 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/static/font/roboto-italic-400.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(/static/font/roboto-normal-300.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/static/font/roboto-normal-400.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(/static/font/roboto-normal-500.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/static/font/roboto-normal-700.ttf) format('truetype');
+}
diff --git a/packages/taler-wallet-webextension/src/spa/static/font/roboto-italic-400.ttf b/packages/taler-wallet-webextension/src/spa/static/font/roboto-italic-400.ttf
new file mode 100644
index 000000000..1e746d17f
Binary files /dev/null and b/packages/taler-wallet-webextension/src/spa/static/font/roboto-italic-400.ttf differ
diff --git a/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-300.tff b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-300.tff
new file mode 100644
index 000000000..ec821b577
Binary files /dev/null and b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-300.tff differ
diff --git a/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-400.ttf b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-400.ttf
new file mode 100644
index 000000000..9d4b32b47
Binary files /dev/null and b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-400.ttf differ
diff --git a/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-500.ttf b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-500.ttf
new file mode 100644
index 000000000..4b4e1c656
Binary files /dev/null and b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-500.ttf differ
diff --git a/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-700.ttf b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-700.ttf
new file mode 100644
index 000000000..58d877c58
Binary files /dev/null and b/packages/taler-wallet-webextension/src/spa/static/font/roboto-normal-700.ttf differ
diff --git a/packages/taler-wallet-webextension/src/spa/stories.html b/packages/taler-wallet-webextension/src/spa/stories.html
new file mode 100644
index 000000000..f18307669
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/stories.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stories</title>
+    <link rel="stylesheet" type="text/css" href="stories.css" />
+    <link rel="stylesheet" type="text/css" href="/static/font/import.css" />
+    <script src="stories.js"></script>
+  </head>
+  <body>
+    <taler-stories id="container"></taler-stories>
+  </body>
+</html>
diff --git a/packages/taler-wallet-webextension/src/spa/tests.html b/packages/taler-wallet-webextension/src/spa/tests.html
new file mode 100644
index 000000000..383f13d03
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/tests.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mocha Tests</title>
+    <link rel="stylesheet" href="/mocha.css" />
+  </head>
+  <body>
+    <div id="mocha"></div>
+    <script src="/mocha.js"></script>
+    <script>
+      mocha.setup("bdd");
+    </script>
+
+    <!-- load code you want to test here -->
+    <script src="stories.test.js"></script>
+    <script src="hooks/useTalerActionURL.test.js"></script>
+    <!-- load your test files here -->
+
+    <script>
+      mocha.run();
+    </script>
+  </body>
+</html>
diff --git a/packages/taler-wallet-webextension/src/spa/wallet.html b/packages/taler-wallet-webextension/src/spa/wallet.html
new file mode 100644
index 000000000..366615dff
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/spa/wallet.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="walletEntryPoint.dev.css" />
+    <style>
+      html {
+        font-family: sans-serif; /* 1 */
+      }
+      h1 {
+        font-size: 2em;
+      }
+      input {
+        font: inherit;
+      }
+      body {
+        margin: 0;
+        font-size: 100%;
+        padding: 0;
+        background-color: #f8faf7;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+    </style>
+    <script type="module" src="walletEntryPoint.dev.js"></script>
+  </head>
+
+  <body>
+    <div id="container" class="wallet-container"></div>
+  </body>
+</html>
-- 
cgit v1.2.3