use latest linaria lib

50 files changed, 180 insertions, 166 deletions

diff --git a/packages/demobank-ui/dev.mjs b/packages/demobank-ui/dev.mjs
index 0c8289156..b1bfc12eb 100755
--- a/packages/demobank-ui/dev.mjs
+++ b/packages/demobank-ui/dev.mjs
@@ -16,7 +16,7 @@
  */
 
 import { serve } from "@gnu-taler/web-util/node";
-import { initializeDev, getFilesInDirectory } from "@gnu-taler/web-util/build";
+import { initializeDev } from "@gnu-taler/web-util/build";
 
 const devEntryPoints = ["src/stories.tsx", "src/index.tsx"];
 
@@ -26,6 +26,7 @@ const build = initializeDev({
     assets: ["src/index.html"],
   },
   destination: "./dist/dev",
+  public: "/app",
   css: "sass",
 });
 
diff --git a/packages/taler-wallet-webextension/babel.config-linaria.json b/packages/demobank-ui/src/pages/BankFrame.stories.tsx
index dc9d579f3..a64885489 100644
--- a/packages/taler-wallet-webextension/babel.config-linaria.json
+++ b/packages/demobank-ui/src/pages/BankFrame.stories.tsx
@@ -13,18 +13,17 @@
  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/>
  */
+
 /**
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-/*
- * Linaria need pre-process typscript files into javascript before running.
- * We choose to use the default preact-cli config.
- * This file should be used from @linaria/rollup plugin only
- */
-{
-  "presets": [
-    "preact-cli/babel",
-  ],
-  "plugins": ["./trim-extension.cjs"],
-}
+
+import * as tests from "@gnu-taler/web-util/testing";
+import { BankFrame } from "./BankFrame.js";
+
+export default {
+  title: "bank frame",
+};
+
+export const Ready = tests.createExample(BankFrame, {});
diff --git a/packages/demobank-ui/src/pages/index.stories.tsx b/packages/demobank-ui/src/pages/index.stories.tsx
index 10ce479a1..168e9938e 100644
--- a/packages/demobank-ui/src/pages/index.stories.tsx
+++ b/packages/demobank-ui/src/pages/index.stories.tsx
@@ -17,3 +17,4 @@
 export * as qr from "./QrCodeSection.stories.js";
 export * as po from "./PaymentOptions.stories.js";
 export * as ptf from "./PaytoWireTransferForm.stories.js";
+export * as frame from "./BankFrame.stories.js";
diff --git a/packages/taler-wallet-webextension/build.mjs b/packages/taler-wallet-webextension/build.mjs
index 889ba7d05..230a850e2 100755
--- a/packages/taler-wallet-webextension/build.mjs
+++ b/packages/taler-wallet-webextension/build.mjs
@@ -15,53 +15,12 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import {
-  build,
-  computeConfig,
-  getFilesInDirectory,
-} from "@gnu-taler/web-util/build";
 import linaria from "@linaria/esbuild";
-import esbuild from "esbuild";
-import path from "path";
-import fs from "fs";
-
-const BASE = process.cwd();
+import { build, getFilesInDirectory } from "@gnu-taler/web-util/build";
 
 const allStaticFiles = getFilesInDirectory("static");
 
-// await build({
-//   source: {
-//     js: [
-//       "src/popupEntryPoint.tsx",
-//       "src/walletEntryPoint.tsx",
-//       "src/background.ts",
-//       "src/taler-wallet-interaction-loader.ts",
-//       "src/taler-wallet-interaction-support.ts",
-//       "src/browserWorkerEntry.ts",
-//     ],
-//     assets: allStaticFiles,
-//   },
-//   destination: "./dist/prod",
-//   css: "linaria",
-// });
-function copyFilesPlugin(files) {
-  return {
-    name: "copy-files",
-    setup(build) {
-      const outDir = build.initialOptions.outdir;
-      if (outDir === undefined)
-        throw Error("esbuild build options does not specify outdir");
-      build.onEnd(() => {
-        for (const file of files) {
-          const name = path.parse(file).base;
-          fs.copyFileSync(file, path.join(outDir, name));
-        }
-      });
-    },
-  };
-}
-
-const buildConfig2 = computeConfig({
+await build({
   source: {
     js: [
       "src/popupEntryPoint.tsx",
@@ -75,45 +34,17 @@ const buildConfig2 = computeConfig({
   },
   destination: "./dist/prod",
   css: "linaria",
-});
-
-const preact = path.join(
-  BASE,
-  "node_modules",
-  "preact",
-  "compat",
-  "dist",
-  "compat.module.js",
-);
-const preactCompatPlugin = {
-  name: "preact-compat",
-  setup(build) {
-    build.onResolve({ filter: /^(react-dom|react)$/ }, (args) => ({
-      path: preact,
-    }));
-  },
-};
-
-const asd = linaria.default({
-  babelOptions: {
-    babelrc: false,
-    configFile: "./babel.config-linaria.json",
+  linariaPlugin: () => {
+    // linaria has a bug if this run in web-util library
+    return linaria({
+      babelOptions: {
+        presets: [
+          "@babel/preset-typescript",
+          "@babel/preset-react",
+          "@linaria",
+        ],
+      },
+      sourceMap: true,
+    });
   },
-  sourceMap: true,
-});
-
-// buildConfig2.plugins = [
-//   preactCompatPlugin,
-//   copyFilesPlugin(allStaticFiles),
-//   asd,
-// ];
-
-// console.log(JSON.stringify(buildConfig, undefined, 2));
-// console.log(JSON.stringify(buildConfig2, undefined, 2));
-
-await esbuild.build(buildConfig2).catch((e) => {
-  // eslint-disable-next-line no-undef
-  console.log(e);
-  // eslint-disable-next-line no-undef
-  process.exit(1);
 });
diff --git a/packages/taler-wallet-webextension/clean_and_build.sh b/packages/taler-wallet-webextension/clean_and_build.sh
index 1c01e3a4a..fa8d514f2 100755
--- a/packages/taler-wallet-webextension/clean_and_build.sh
+++ b/packages/taler-wallet-webextension/clean_and_build.sh
@@ -5,7 +5,7 @@ set -e
 rm -rf dist lib tsconfig.tsbuildinfo .linaria-cache
 
 echo typecheck and bundle...
-node build-fast-with-linaria.mjs &
+node build.mjs &
 pnpm tsc --noEmit &
 wait -n
 wait -n
diff --git a/packages/taler-wallet-webextension/dev.mjs b/packages/taler-wallet-webextension/dev.mjs
index 94df79f3d..1ded20c7f 100755
--- a/packages/taler-wallet-webextension/dev.mjs
+++ b/packages/taler-wallet-webextension/dev.mjs
@@ -15,18 +15,52 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import linaria from "@linaria/esbuild";
 import { serve } from "@gnu-taler/web-util/node";
-import esbuild from "esbuild";
-import { buildConfig } from "./build-fast-with-linaria.mjs";
+import { initializeDev, getFilesInDirectory } from "@gnu-taler/web-util/build";
 
-buildConfig.inject = ["./node_modules/@gnu-taler/web-util/lib/live-reload.mjs"];
+const allStaticFiles = getFilesInDirectory("static");
+
+const devEntryPoints = [
+  "src/popupEntryPoint.tsx",
+  "src/walletEntryPoint.tsx",
+  "src/background.ts",
+  "src/taler-wallet-interaction-loader.ts",
+  "src/taler-wallet-interaction-support.ts",
+  "src/browserWorkerEntry.ts",
+  "src/stories.tsx",
+];
+
+const build = initializeDev({
+  source: {
+    js: devEntryPoints,
+    assets: allStaticFiles,
+  },
+  destination: "./dist/dev",
+  public: "/app",
+  css: "linaria",
+  linariaPlugin: () => {
+    // linaria has a bug if this run in web-util library
+    return linaria({
+      babelOptions: {
+        presets: [
+          "@babel/preset-typescript",
+          "@babel/preset-react",
+          "@linaria",
+        ],
+      },
+      sourceMap: true,
+    });
+  },
+});
+
+await build();
 
 serve({
-  folder: "./dist",
+  folder: "./dist/dev",
   port: 8080,
   source: "./src",
-  development: true,
-  onUpdate: async () => esbuild.build(buildConfig),
+  onSourceUpdate: build,
 });
 
 // FIXME: create a mocha test in the browser as it was before
diff --git a/packages/taler-wallet-webextension/pack.sh b/packages/taler-wallet-webextension/pack.sh
index ca05f36de..f83948a4d 100755
--- a/packages/taler-wallet-webextension/pack.sh
+++ b/packages/taler-wallet-webextension/pack.sh
@@ -13,11 +13,14 @@ fi
 
 vers_manifest=$(jq -r '.version' manifest-common.json)
 
+
+# Create version form Manifest v2
 zipfile="taler-wallet-webextension-${vers_manifest}.zip"
 
 TEMP_DIR=$(mktemp -d)
 jq -s 'add | .name = "GNU Taler Wallet" ' manifest-common.json manifest-v2.json > $TEMP_DIR/manifest.json
-cp -r dist static $TEMP_DIR
+cp -r static $TEMP_DIR
+cp -r dist/prod $TEMP_DIR/dist
 
 find $TEMP_DIR/dist \( -name "test.*" -o -name "*.test.*" -o -name "stories.*" -o -name "*.dev.*" \) -delete
 [[ "$ENV" == "prod" ]] && find $TEMP_DIR/dist \( -name "*.map" \) -delete
@@ -35,11 +38,14 @@ mkdir -p extension/v2/unpacked
 echo "Packed webextension: extension/v2/$zipfile"
 cp -rf src extension/v2/unpacked
 
+# Create version form Manifest v3
 zipfile="taler-wallet-webextension-${vers_manifest}.zip"
 
 TEMP_DIR=$(mktemp -d)
 jq -s 'add | .name = "GNU Taler Wallet" ' manifest-common.json manifest-v3.json > $TEMP_DIR/manifest.json
-cp -r dist static service_worker.js $TEMP_DIR
+cp -r static $TEMP_DIR
+cp -r dist/prod $TEMP_DIR/dist
+cp -r service_worker.js $TEMP_DIR
 
 find $TEMP_DIR/dist \( -name "test.*" -o -name "*.test.*" -o -name "stories.*" -o -name "*.dev.*" \) -delete
 [[ "$ENV" == "prod" ]] && find $TEMP_DIR/dist \( -name "*.map" \) -delete
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json
index 3b2417527..bb2bbb4b5 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -10,9 +10,9 @@
   "private": false,
   "scripts": {
     "clean": "rimraf dist lib tsconfig.tsbuildinfo",
-    "test": "mocha --require source-map-support/register 'dist/**/*.test.js' 'dist/**/test.js'",
+    "test": "./test.mjs && mocha --require source-map-support/register 'dist/test/**/*.test.js' 'dist/test/**/test.js'",
     "test:coverage": "nyc pnpm test",
-    "compile": "tsc && ./build-fast-with-linaria.mjs",
+    "compile": "tsc && ./build.mjs",
     "prepare": "tsc",
     "dev": "./dev.mjs",
     "pretty": "prettier --write src",
@@ -44,27 +44,21 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "7.18.9",
-    "@babel/plugin-transform-modules-commonjs": "7.18.6",
-    "@babel/plugin-transform-react-jsx-source": "7.18.6",
-    "@babel/plugin-transform-typescript": "^7.20.13",
+    "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "7.18.6",
-    "@babel/runtime": "7.18.9",
     "@gnu-taler/pogen": "workspace:*",
     "@gnu-taler/web-util": "workspace:*",
-    "@linaria/babel-preset": "3.0.0-beta.22",
-    "@linaria/core": "3.0.0-beta.22",
-    "@linaria/react": "3.0.0-beta.22",
-    "@linaria/webpack-loader": "3.0.0-beta.22",
+    "@linaria/babel-preset": "^4.4.5",
+    "@linaria/core": "^4.2.10",
+    "@linaria/esbuild": "^4.2.11",
+    "@linaria/react": "^4.3.8",
     "@types/chai": "^4.3.0",
     "@types/chrome": "0.0.197",
     "@types/history": "^4.7.8",
     "@types/mocha": "^9.0.0",
     "@types/node": "^18.11.17",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
     "chai": "^4.3.6",
-    "esbuild": "^0.17.7",
+    "esbuild": "^0.17.19",
     "mocha": "^9.2.0",
     "nyc": "^15.1.0",
     "polished": "^4.1.4",
@@ -82,4 +76,4 @@
   "pogen": {
     "domain": "taler-wallet-webex"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 8a41ee68e..dd2d31c3d 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -34,9 +34,9 @@ import {
 } from "./components/styled/index.js";
 import { useBackendContext } from "./context/backend.js";
 import { useAsyncAsHook } from "./hooks/useAsyncAsHook.js";
-import qrIcon from "./svg/qr_code_24px.svg";
-import settingsIcon from "./svg/settings_black_24dp.svg";
-import warningIcon from "./svg/warning_24px.svg";
+import qrIcon from "./svg/qr_code_24px.inline.svg";
+import settingsIcon from "./svg/settings_black_24dp.inline.svg";
+import warningIcon from "./svg/warning_24px.inline.svg";
 import { parseTalerUri, TalerUriAction } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 60b100478..ee2dbfc69 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -24,7 +24,7 @@ import { Avatar } from "../mui/Avatar.js";
 import { Typography } from "../mui/Typography.js";
 import { Banner } from "./Banner.js";
 import { SvgIcon } from "./styled/index.js";
-import wifiIcon from "../svg/wifi.svg";
+import wifiIcon from "../svg/wifi.inline.svg";
 export default {
   title: "banner",
   component: Banner,
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index 11f526865..0a53d33ba 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -16,7 +16,7 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import arrowDown from "../svg/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.inline.svg";
 import { ErrorBox } from "./styled/index.js";
 
 export function ErrorMessage({
diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index 2979c28e5..3298840e2 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
@@ -16,7 +16,7 @@
 import { TalerErrorDetail, TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import arrowDown from "../svg/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.inline.svg";
 import { ErrorBox } from "./styled/index.js";
 import { EnabledBySettings } from "./EnabledBySettings.js";
 
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
index 28bef9320..b0209f855 100644
--- a/packages/taler-wallet-webextension/src/components/Loading.tsx
+++ b/packages/taler-wallet-webextension/src/components/Loading.tsx
@@ -17,7 +17,7 @@ import { css } from "@linaria/core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import ProgressIcon from "../svg/progress.svg";
+import ProgressIcon from "../svg/progress.inline.svg";
 import { CenteredText } from "./styled/index.js";
 
 const fadeIn = css`
diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
index 7b9701336..2330b1b95 100644
--- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
+++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
@@ -15,7 +15,7 @@
  */
 
 import { h, VNode } from "preact";
-import logo from "../svg/logo-2021.svg";
+import logo from "../svg/logo-2021.inline.svg";
 
 export function LogoHeader(): VNode {
   return (
diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx
index 3fea063d3..11fa72181 100644
--- a/packages/taler-wallet-webextension/src/components/Modal.tsx
+++ b/packages/taler-wallet-webextension/src/components/Modal.tsx
@@ -17,7 +17,7 @@
 import { styled } from "@linaria/react";
 import { ComponentChildren, h, VNode } from "preact";
 import { ButtonHandler } from "../mui/handlers.js";
-import closeIcon from "../svg/close_24px.svg";
+import closeIcon from "../svg/close_24px.inline.svg";
 import { Link, LinkPrimary, LinkWarning } from "./styled/index.js";
 
 interface Props {
diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index d6a730a4f..7d3cf3f57 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -17,7 +17,7 @@ import { TranslatedString } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button } from "../mui/Button.js";
-import arrowDown from "../svg/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.inline.svg";
 import { ParagraphClickable } from "./styled/index.js";
 
 export interface Props {
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index d4eab21ee..b95bbf3b7 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -96,7 +96,7 @@ const CollasibleBox = styled.div`
     }
   }
 `;
-import arrowDown from "../svg/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.inline.svg";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
 export function PartCollapsible({ text, title, big, showSign }: Props): VNode {
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index e36502333..92b8d2667 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -16,7 +16,7 @@
 
 // need to import linaria types, otherwise compiler will complain
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type * as Linaria from "@linaria/core";
+// import type * as Linaria from "@linaria/core";
 
 import { styled } from "@linaria/react";
 
@@ -24,7 +24,7 @@ export const PaymentStatus = styled.div<{ color: string }>`
   padding: 5px;
   border-radius: 5px;
   color: white;
-  background-color: ${(p) => p.color};
+  background-color: ${(p: any) => p.color};
 `;
 
 export const WalletAction = styled.div`
@@ -100,7 +100,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
     width: 800px;
   }
   & > section {
-    padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
+    padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")};
 
     margin-bottom: auto;
     overflow: auto;
@@ -168,7 +168,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
   justify-content: space-between;
 
   & > section {
-    padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
+    padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")};
     // this margin will send the section up when used with a header
     margin-bottom: auto;
     overflow-y: auto;
@@ -411,7 +411,8 @@ export const Button = styled.button<{ upperCased?: boolean }>`
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
-  text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")};
+  text-transform: ${({ upperCased }: any) =>
+    upperCased ? "uppercase" : "none"};
 
   font-family: inherit;
   font-size: 100%;
@@ -461,7 +462,8 @@ export const Link = styled.a<{ upperCased?: boolean }>`
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
-  text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")};
+  text-transform: ${({ upperCased }: any) =>
+    upperCased ? "uppercase" : "none"};
 
   font-family: inherit;
   font-size: 100%;
@@ -539,7 +541,7 @@ export const LinkPrimary = styled(Link)`
 `;
 
 export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>`
-  font-size: ${({ small }) => (small ? "small" : "inherit")};
+  font-size: ${({ small }: any) => (small ? "small" : "inherit")};
   background-color: #0042b2;
   border-color: #0042b2;
 `;
@@ -717,13 +719,13 @@ export const Input = styled.div<{ invalid?: boolean }>`
   & label {
     display: block;
     padding: 5px;
-    color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
+    color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")};
   }
   & input {
     display: block;
     padding: 5px;
     width: calc(100% - 4px - 10px);
-    border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
+    border-color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")};
   }
 `;
 
@@ -735,7 +737,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>`
     font-weight: bold;
     margin-left: 0.5em;
     padding: 5px;
-    color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
+    color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")};
   }
 
   & div {
@@ -761,7 +763,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>`
     /* border-color: lightgray; */
     border-bottom-right-radius: 0.25em;
     border-top-right-radius: 0.25em;
-    border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")};
+    border-color: ${({ invalid }: any) => (!invalid ? "lightgray" : "red")};
   }
   margin-bottom: 16px;
 `;
@@ -859,8 +861,8 @@ interface SvgIconProps {
 }
 export const SvgIcon = styled.div<SvgIconProps>`
   & > svg {
-    fill: ${({ color }) => color};
-    transform: ${({ transform }) => (transform ? transform : "")};
+    fill: ${({ color }: any) => color};
+    transform: ${({ transform }: any) => (transform ? transform : "")};
   }
   /* width: 24px;
   height: 24px; */
@@ -868,7 +870,7 @@ export const SvgIcon = styled.div<SvgIconProps>`
   margin-right: 8px;
   display: inline;
   padding: 4px;
-  cursor: ${({ onClick }) => (onClick ? "pointer" : "inherit")};
+  cursor: ${({ onClick }: any) => (onClick ? "pointer" : "inherit")};
 `;
 
 export const Icon = styled.div`
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
index 1917b01d9..18da2609c 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@@ -27,7 +27,7 @@ import {
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
-import editIcon from "../../svg/edit_24px.svg";
+import editIcon from "../../svg/edit_24px.inline.svg";
 import {
   ExchangeDetails,
   getAmountWithFee,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 4405d57b8..50bf99a0c 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -25,7 +25,7 @@ import { Input, LinkSuccess, SvgIcon } from "../../components/styled/index.js";
 import { TermsOfService } from "../../components/TermsOfService/index.js";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
-import editIcon from "../../svg/edit_24px.svg";
+import editIcon from "../../svg/edit_24px.inline.svg";
 import {
   ExchangeDetails,
   getAmountWithFee,
diff --git a/packages/taler-wallet-webextension/src/mui/Alert.tsx b/packages/taler-wallet-webextension/src/mui/Alert.tsx
index d44472ca5..22ea0b8ab 100644
--- a/packages/taler-wallet-webextension/src/mui/Alert.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Alert.tsx
@@ -17,11 +17,11 @@ import { TranslatedString } from "@gnu-taler/taler-util";
 import { css } from "@linaria/core";
 import { ComponentChildren, h, VNode } from "preact";
 // eslint-disable-next-line import/extensions
-import CloseIcon from "../svg/close_24px.svg";
-import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.svg";
-import InfoOutlinedIcon from "../svg/info_outlined_24px.svg";
-import ReportProblemOutlinedIcon from "../svg/report_problem_outlined_24px.svg";
-import SuccessOutlinedIcon from "../svg/success_outlined_24px.svg";
+import CloseIcon from "../svg/close_24px.inline.svg";
+import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.inline.svg";
+import InfoOutlinedIcon from "../svg/info_outlined_24px.inline.svg";
+import ReportProblemOutlinedIcon from "../svg/report_problem_outlined_24px.inline.svg";
+import SuccessOutlinedIcon from "../svg/success_outlined_24px.inline.svg";
 import { IconButton } from "./Button.js";
 import { darken, lighten } from "./colors/manipulation.js";
 import { Paper } from "./Paper.js";
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index 65af81849..5506caa42 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -21,8 +21,8 @@
 
 import { Button } from "./Button.js";
 import { Fragment, h, VNode } from "preact";
-import DeleteIcon from "../svg/delete_24px.svg";
-import SendIcon from "../svg/send_24px.svg";
+import DeleteIcon from "../svg/delete_24px.inline.svg";
+import SendIcon from "../svg/send_24px.inline.svg";
 import { styled } from "@linaria/react";
 
 export default {
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
index f5b70f07c..f7b5040e4 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
@@ -15,7 +15,6 @@
  */
 import { css } from "@linaria/core";
 import { h, VNode } from "preact";
-// eslint-disable-next-line import/extensions
 import { Colors, theme } from "../style.js";
 import { useFormControl } from "./FormControl.js";
 import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase.js";
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx
index 3fcf3ac1e..99adf2a76 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/packages/taler-wallet-webextension/src/mui/style.tsx
@@ -56,8 +56,6 @@ export interface Spacing {
   (top: number, right: number, bottom: number, left: number): string;
 }
 
-export const theme = createTheme();
-
 const zIndex = {
   mobileStepper: 1000,
   speedDial: 1050,
@@ -68,6 +66,8 @@ const zIndex = {
   tooltip: 1500,
 };
 
+export const theme = createTheme();
+
 export const ripple = css`
   background-position: center;
 
diff --git a/packages/taler-wallet-webextension/src/svg/check_24px.svg b/packages/taler-wallet-webextension/src/svg/check_24px.inline.svg
index 522695ef3..522695ef3 100644
--- a/packages/taler-wallet-webextension/src/svg/check_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/check_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/chevron-down.svg b/packages/taler-wallet-webextension/src/svg/chevron-down.inline.svg
index 0e1c0aeda..0e1c0aeda 100644
--- a/packages/taler-wallet-webextension/src/svg/chevron-down.svg
+++ b/packages/taler-wallet-webextension/src/svg/chevron-down.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/close_24px.svg b/packages/taler-wallet-webextension/src/svg/close_24px.inline.svg
index 8b7eb6e84..8b7eb6e84 100644
--- a/packages/taler-wallet-webextension/src/svg/close_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/close_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/delete_24px.svg b/packages/taler-wallet-webextension/src/svg/delete_24px.inline.svg
index ead7caa9f..ead7caa9f 100644
--- a/packages/taler-wallet-webextension/src/svg/delete_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/delete_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/download_24px.svg b/packages/taler-wallet-webextension/src/svg/download_24px.inline.svg
index c4ec1c354..c4ec1c354 100644
--- a/packages/taler-wallet-webextension/src/svg/download_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/download_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/edit_24px.svg b/packages/taler-wallet-webextension/src/svg/edit_24px.inline.svg
index a4b3c9f6b..a4b3c9f6b 100644
--- a/packages/taler-wallet-webextension/src/svg/edit_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/edit_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.inline.svg
index 4a0daa1e9..4a0daa1e9 100644
--- a/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.inline.svg
index 80dad95cc..80dad95cc 100644
--- a/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/logo-2021.svg b/packages/taler-wallet-webextension/src/svg/logo-2021.inline.svg
index 8c5ff3e5b..8c5ff3e5b 100644
--- a/packages/taler-wallet-webextension/src/svg/logo-2021.svg
+++ b/packages/taler-wallet-webextension/src/svg/logo-2021.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/progress.svg b/packages/taler-wallet-webextension/src/svg/progress.inline.svg
index c7284a545..c7284a545 100644
--- a/packages/taler-wallet-webextension/src/svg/progress.svg
+++ b/packages/taler-wallet-webextension/src/svg/progress.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg b/packages/taler-wallet-webextension/src/svg/qr_code_24px.inline.svg
index c0c158359..c0c158359 100644
--- a/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/qr_code_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.inline.svg
index ed32f6f28..ed32f6f28 100644
--- a/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg b/packages/taler-wallet-webextension/src/svg/ri-bank-line.inline.svg
index 8d987df79..8d987df79 100644
--- a/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg
+++ b/packages/taler-wallet-webextension/src/svg/ri-bank-line.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/send_24px.svg b/packages/taler-wallet-webextension/src/svg/send_24px.inline.svg
index 6e41d1c9e..6e41d1c9e 100644
--- a/packages/taler-wallet-webextension/src/svg/send_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/send_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.inline.svg
index adcd50405..adcd50405 100644
--- a/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg
+++ b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.inline.svg
index c6130b495..c6130b495 100644
--- a/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/upload_24px.svg b/packages/taler-wallet-webextension/src/svg/upload_24px.inline.svg
index c604ef78d..c604ef78d 100644
--- a/packages/taler-wallet-webextension/src/svg/upload_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/upload_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/warning_24px.svg b/packages/taler-wallet-webextension/src/svg/warning_24px.inline.svg
index d27c4c6ec..d27c4c6ec 100644
--- a/packages/taler-wallet-webextension/src/svg/warning_24px.svg
+++ b/packages/taler-wallet-webextension/src/svg/warning_24px.inline.svg
diff --git a/packages/taler-wallet-webextension/src/svg/wifi.svg b/packages/taler-wallet-webextension/src/svg/wifi.inline.svg
index ad712435d..ad712435d 100644
--- a/packages/taler-wallet-webextension/src/svg/wifi.svg
+++ b/packages/taler-wallet-webextension/src/svg/wifi.inline.svg
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index aef271442..31a71e249 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -66,7 +66,7 @@ import {
 } from "../cta/Withdraw/index.js";
 import { strings } from "../i18n/strings.js";
 import { platform } from "../platform/foreground.js";
-import CloseIcon from "../svg/close_24px.svg";
+import CloseIcon from "../svg/close_24px.inline.svg";
 import { AddBackupProviderPage } from "./AddBackupProvider/index.js";
 import { BackupPage } from "./BackupPage.js";
 import { DepositPage } from "./DepositPage/index.js";
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
index b1542943a..47c5ffea1 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
@@ -30,8 +30,8 @@ import { Button } from "../../mui/Button.js";
 import { Grid } from "../../mui/Grid.js";
 import { Paper } from "../../mui/Paper.js";
 import { Pages } from "../../NavigationBar.js";
-import arrowIcon from "../../svg/chevron-down.svg";
-import bankIcon from "../../svg/ri-bank-line.svg";
+import arrowIcon from "../../svg/chevron-down.inline.svg";
+import bankIcon from "../../svg/ri-bank-line.inline.svg";
 import { assertUnreachable } from "../../utils/index.js";
 import { Contact, State } from "./index.js";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index 447b07ece..be720f10e 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -28,7 +28,7 @@ import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { Button } from "../../mui/Button.js";
-import arrowDown from "../../svg/chevron-down.svg";
+import arrowDown from "../../svg/chevron-down.inline.svg";
 import { State } from "./index.js";
 
 const ButtonGroup = styled.div`
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 0ea0f8da1..34eb9be8c 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -40,8 +40,8 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { NoBalanceHelp } from "../popup/NoBalanceHelp.js";
-import DownloadIcon from "../svg/download_24px.svg";
-import UploadIcon from "../svg/upload_24px.svg";
+import DownloadIcon from "../svg/download_24px.inline.svg";
+import UploadIcon from "../svg/upload_24px.inline.svg";
 
 interface Props {
   currency?: string;
@@ -262,7 +262,9 @@ export function HistoryView({
               <Fragment key={i}>
                 <DateSeparator>
                   <Time
-                    timestamp={AbsoluteTime.fromMilliseconds(Number.parseInt(d, 10))}
+                    timestamp={AbsoluteTime.fromMilliseconds(
+                      Number.parseInt(d, 10),
+                    )}
                     format="dd MMMM yyyy"
                   />
                 </DateSeparator>
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
index 1b4678b8a..4d045ee13 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
@@ -33,9 +33,9 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
 import { TextFieldHandler } from "../../mui/handlers.js";
 import { TextField } from "../../mui/TextField.js";
-import checkIcon from "../../svg/check_24px.svg";
-import deleteIcon from "../../svg/delete_24px.svg";
-import warningIcon from "../../svg/warning_24px.svg";
+import checkIcon from "../../svg/check_24px.inline.svg";
+import deleteIcon from "../../svg/delete_24px.inline.svg";
+import warningIcon from "../../svg/warning_24px.inline.svg";
 import { State } from "./index.js";
 
 type AccountType = "bitcoin" | "x-taler-bank" | "iban";
diff --git a/packages/taler-wallet-webextension/static/wallet.html b/packages/taler-wallet-webextension/static/wallet.html
index 3246ac8f8..32a98130b 100644
--- a/packages/taler-wallet-webextension/static/wallet.html
+++ b/packages/taler-wallet-webextension/static/wallet.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>GNU Taler Wallet - WebExtension</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="/dist/walletEntryPoint.css" />
     <link rel="stylesheet" type="text/css" href="/static/font/import.css" />
diff --git a/packages/taler-wallet-webextension/test.mjs b/packages/taler-wallet-webextension/test.mjs
new file mode 100755
index 000000000..f3538fb5f
--- /dev/null
+++ b/packages/taler-wallet-webextension/test.mjs
@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2022 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 linaria from "@linaria/esbuild";
+import { build, getFilesInDirectory } from "@gnu-taler/web-util/build";
+
+const allTestFiles = getFilesInDirectory("src", /.test.tsx?$/);
+const allStaticFiles = getFilesInDirectory("static");
+
+await build({
+  source: {
+    js: allTestFiles,
+    assets: allStaticFiles,
+  },
+  destination: "./dist/test",
+  css: "linaria",
+  linariaPlugin: () => {
+    // linaria has a bug if this run in web-util library
+    return linaria({
+      babelOptions: {
+        presets: [
+          "@babel/preset-typescript",
+          "@babel/preset-react",
+          "@linaria",
+        ],
+      },
+      sourceMap: true,
+    });
+  },
+});