esbuild configuration

28 files changed, 202 insertions, 66 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 85e1f1884..680c34a9b 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -24,10 +24,15 @@
 /**
  * Imports.
  */
-import { VNode, h } from "preact";
+import { h, VNode } from "preact";
 import { JustInDevMode } from "./components/JustInDevMode";
-import { NavigationHeader, NavigationHeaderHolder } from "./components/styled";
+import {
+  NavigationHeader,
+  NavigationHeaderHolder,
+  SvgIcon,
+} from "./components/styled";
 import { useTranslationContext } from "./context/translation";
+import settingsIcon from "./svg/settings_black_24dp.svg";
 
 /**
  * List of pages used by the wallet
@@ -72,7 +77,11 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
       </a>
       <a />
       <a href="/settings">
-        <div class="settings-icon" title={i18n.str`Settings`} />
+        <SvgIcon
+          title={i18n.str`Settings`}
+          dangerouslySetInnerHTML={{ __html: settingsIcon }}
+          color="white"
+        />
       </a>
     </NavigationHeader>
   );
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 4d5b22208..258bd0676 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -22,7 +22,7 @@
 import { Banner } from "./Banner";
 import { Fragment, h, VNode } from "preact";
 import { Avatar } from "../mui/Avatar";
-import { Icon } from "./styled";
+import { Icon, SvgIcon } from "./styled";
 import { Typography } from "../mui/Typography";
 
 export default {
@@ -48,7 +48,7 @@ function Wrapper({ children }: any) {
   );
 }
 function SignalWifiOffIcon({ ...rest }: any): VNode {
-  return <Icon {...rest} />;
+  return <SvgIcon {...rest} />;
 }
 
 export const BasicExample = () => (
@@ -67,7 +67,7 @@ export const BasicExample = () => (
       <Banner
         elements={[
           {
-            icon: <SignalWifiOffIcon />,
+            icon: <SignalWifiOffIcon color="gray" />,
             description: (
               <Typography>
                 You have lost connection to the internet. This app is offline.
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index 085bf0b82..d6765c13d 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -15,7 +15,7 @@
  */
 import { VNode, h, ComponentChildren } from "preact";
 import { useState } from "preact/hooks";
-import arrowDown from "../../static/img/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.svg";
 import { ErrorBox } from "./styled";
 
 export function ErrorMessage({
@@ -36,7 +36,10 @@ export function ErrorMessage({
               setShowErrorDetail((v) => !v);
             }}
           >
-            <img style={{ height: "1.5em" }} src={arrowDown} />
+            <div
+              style={{ height: "1.5em" }}
+              dangerouslySetInnerHTML={{ __html: arrowDown }}
+            />
           </button>
         )}
       </div>
diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index 38d6ec561..9fd8f7a03 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 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import arrowDown from "../../static/img/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.svg";
 import { useDevContext } from "../context/devContext";
 import { ErrorBox } from "./styled";
 
@@ -45,12 +45,12 @@ export function ErrorTalerOperation({
               setShowErrorDetail((v) => !v);
             }}
           >
-            <img
+            <div
               style={{
                 transform: !showErrorDetail ? undefined : "scaleY(-1)",
                 height: 24,
               }}
-              src={arrowDown}
+              dangerouslySetInnerHTML={{ __html: arrowDown }}
             />
           </button>
         )}
diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
index 6c47dc92a..573221614 100644
--- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
+++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
@@ -15,6 +15,7 @@
  */
 
 import { h } from "preact";
+import logo from "../svg/logo-2021.svg";
 
 export function LogoHeader() {
   return (
@@ -25,14 +26,10 @@ export function LogoHeader() {
         margin: "2em",
       }}
     >
-      <img
-        style={{
-          width: 150,
-          height: 70,
-        }}
-        src="/static/img/logo-2021.svg"
-        width="150"
-      />
+      <div
+        style={{ width: 150, height: 70 }}
+        dangerouslySetInnerHTML={{ __html: logo }}
+      ></div>
     </div>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index 1f46cf82c..866bd0379 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -1,5 +1,5 @@
 import { h, VNode } from "preact";
-import arrowDown from "../../static/img/chevron-down.svg";
+import arrowDown from "../svg/chevron-down.svg";
 import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled";
 import { useState } from "preact/hooks";
 
@@ -91,7 +91,10 @@ export function MultiActionButton({
           borderBottomLeftRadius: 0,
         }}
       >
-        <img style={{ height: 14 }} src={arrowDown} />
+        <div
+          style={{ height: 14 }}
+          dangerouslySetInnerHTML={{ __html: arrowDown }}
+        />
       </ButtonPrimary>
     </div>
   );
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 608e4af7c..13e3189fb 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -778,9 +778,6 @@ export const WarningBox = styled(ErrorBox)`
   border-color: #ffecb5;
 `;
 
-import settingsIcon from "../../../static/img/settings_black_24dp.svg";
-import wifiIcon from "../../../static/img/wifi.svg";
-
 export const NavigationHeaderHolder = styled.div`
   width: 100%;
   display: flex;
@@ -809,27 +806,25 @@ export const NavigationHeader = styled.div`
     line-height: 35px;
   }
 
-  & > a > div.settings-icon {
-    mask: url(${settingsIcon}) no-repeat center;
-    background-color: white;
-    width: 24px;
-    height: 24px;
-    margin-left: auto;
-    margin-right: 8px;
-    padding: 4px;
-  }
   & > a.active {
     background-color: #f8faf7;
     color: #0042b2;
     font-weight: bold;
   }
-  & > a.active > div.settings-icon {
-    background-color: #0042b2;
+`;
+
+export const SvgIcon = styled.div<{ color: string }>`
+  & > svg {
+    fill: ${({ color }) => color};
   }
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding: 4px;
 `;
 
 export const Icon = styled.div`
-  mask: url(${wifiIcon}) no-repeat center;
   background-color: gray;
   width: 24px;
   height: 24px;
diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts
index 95c77cd76..082b3a05c 100644
--- a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts
@@ -17,11 +17,10 @@ import { useTalerActionURL } from "./useTalerActionURL"
 import { mountHook } from "../test-utils";
 import { IoCProviderForTesting } from "../context/iocContext";
 import { h, VNode } from "preact";
-import { act } from "preact/test-utils";
+import { expect } from "chai";
 
 describe('useTalerActionURL hook', () => {
 
-  // eslint-disable-next-line jest/expect-expect
   it('should be set url to undefined when dismiss', async () => {
 
     const ctx = ({ children }: { children: any }): VNode => {
@@ -36,24 +35,25 @@ describe('useTalerActionURL hook', () => {
 
     {
       const [url] = result.current!
-      if (url !== undefined) throw Error('invalid')
+      expect(url).undefined;
     }
 
-    await waitNextUpdate()
+    await waitNextUpdate("waiting for useEffect")
 
     {
       const [url] = result.current!
-      if (url !== "asd") throw Error(`invalid: ${url}`)
+      expect(url).equals("asd");
     }
 
-    await act(() => {
-      const [, setDismissed] = result.current!
-      setDismissed(true)
-    })
+    const [, setDismissed] = result.current!
+    setDismissed(true)
+
+    await waitNextUpdate("after dismiss")
 
     {
       const [url] = result.current!
       if (url !== undefined) throw Error('invalid')
+      expect(url).undefined;
     }
 
   })
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index a6863add3..9750c6a94 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";
 import { Fragment, h } from "preact";
-import DeleteIcon from "../../static/img/delete_24px.svg";
-import SendIcon from "../../static/img/send_24px.svg";
+import DeleteIcon from "../svg/delete_24px.svg";
+import SendIcon from "../svg/send_24px.svg";
 import { styled } from "@linaria/react";
 
 export default {
diff --git a/packages/taler-wallet-webextension/src/mui/index.stories.tsx b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
new file mode 100644
index 000000000..7755c6f6a
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
@@ -0,0 +1,27 @@
+/*
+ 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/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import * as a1 from "./Button.stories";
+import * as a3 from "./Grid.stories";
+import * as a4 from "./Paper.stories";
+import * as a5 from "./TextField.stories";
+
+export default [a1, a3, a4, a5];
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 9de12da4c..2dc0f81e3 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -119,7 +119,7 @@ export function BalanceView({
         {currencyWithNonZeroAmount.length > 0 && (
           <MultiActionButton
             label={(s) => (
-              <i18n.Translate debug>Deposit {<span>{s}</span>}</i18n.Translate>
+              <i18n.Translate>Deposit {<span>{s}</span>}</i18n.Translate>
             )}
             actions={currencyWithNonZeroAmount}
             onClick={(c) => goToWalletDeposit(c)}
diff --git a/packages/taler-wallet-webextension/src/stories.test.ts b/packages/taler-wallet-webextension/src/stories.test.ts
index db697460f..dc33dbde5 100644
--- a/packages/taler-wallet-webextension/src/stories.test.ts
+++ b/packages/taler-wallet-webextension/src/stories.test.ts
@@ -20,6 +20,7 @@
  */
 import * as popup from "./popup/index.stories";
 import * as wallet from "./wallet/index.stories";
+import * as mui from "./mui/index.stories";
 
 import { setupI18n } from "@gnu-taler/taler-util";
 import { renderNodeOrBrowser } from "./test-utils";
@@ -40,7 +41,7 @@ function testThisStory(st: any): any {
 }
 
 describe("render every storybook example", () => {
-  [popup, wallet].forEach(function testAll(st: any) {
+  [popup, wallet, mui].forEach(function testAll(st: any) {
     if (Array.isArray(st.default)) {
       st.default.forEach(testAll)
     } else {
diff --git a/packages/taler-wallet-webextension/src/svg/chevron-down.svg b/packages/taler-wallet-webextension/src/svg/chevron-down.svg
new file mode 100644
index 000000000..36adbc1c6
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/chevron-down.svg
@@ -0,0 +1,7 @@
+<?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>
diff --git a/packages/taler-wallet-webextension/src/svg/delete_24px.svg b/packages/taler-wallet-webextension/src/svg/delete_24px.svg
new file mode 100644
index 000000000..0d0b74d16
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/delete_24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/logo-2021.svg b/packages/taler-wallet-webextension/src/svg/logo-2021.svg
new file mode 100644
index 000000000..8c5ff3e5b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/logo-2021.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 90">
+  <g fill="#0042b3" fill-rule="evenodd" stroke-width=".3">
+    <path d="M86.7 1.1c15.6 0 29 9.4 36 23.2h-5.9A35.1 35.1 0 0086.7 6.5C67 6.5 51 23.6 51 44.7c0 10.4 3.8 19.7 10 26.6a31.4 31.4 0 01-4.2 3A45.2 45.2 0 0146 44.7c0-24 18.2-43.6 40.7-43.6zm35.8 64.3a40.4 40.4 0 01-39 22.8c3-1.5 6-3.5 8.6-5.7a35.6 35.6 0 0024.6-17.1z" />
+    <path d="M64.2 1.1l3.1.1c-3 1.6-5.9 3.5-8.5 5.8a37.5 37.5 0 00-30.2 37.7c0 14.3 7.3 26.7 18 33.3a29.6 29.6 0 01-8.5.2c-9-8-14.6-20-14.6-33.5 0-24 18.2-43.6 40.7-43.6zm5.4 81.4a35.6 35.6 0 0024.6-17.1h5.9a40.4 40.4 0 01-39 22.8c3-1.5 5.9-3.5 8.5-5.7zm24.8-58.2a37 37 0 00-12.6-12.8 29.6 29.6 0 018.5-.2c4 3.6 7.4 8 9.9 13z" />
+    <path d="M41.8 1.1c1 0 2 0 3.1.2-3 1.5-5.9 3.4-8.5 5.6A37.5 37.5 0 006.1 44.7c0 21.1 16 38.3 35.7 38.3 12.6 0 23.6-7 30-17.6h5.8a40.4 40.4 0 01-35.8 23C19.3 88.4 1 68.8 1 44.7c0-24 18.2-43.6 40.7-43.6zm30.1 23.2a38.1 38.1 0 00-4.5-6.1c1.3-1.2 2.7-2.2 4.3-3 2.3 2.7 4.4 5.8 6 9.1z" />
+  </g>
+  <path d="M76.1 34.4h9.2v-5H61.9v5H71v26h5.1zM92.6 52.9h13.7l3 7.4h5.3l-12.7-31.2h-4.7L84.5 60.3h5.2zm11.8-4.9h-9.9l5-12.4zM123.8 29.4h-4.6v31h20.6v-5h-16zM166.5 29.4H145v31h21.6v-5H150v-8.3h14.5v-4.9h-14.5v-8h16.4zM191.2 39.5c0 1.6-.5 2.8-1.6 3.8s-2.6 1.4-4.4 1.4h-7.4V34.3h7.4c1.9 0 3.4.4 4.4 1.3 1 .9 1.6 2.2 1.6 3.9zm6 20.8l-7.7-11.7c1-.3 1.9-.7 2.7-1.3a8.8 8.8 0 003.6-4.6c.4-1 .5-2.2.5-3.5 0-1.5-.2-2.9-.7-4.1a8.4 8.4 0 00-2.1-3.1c-1-.8-2-1.5-3.4-2-1.3-.4-2.8-.6-4.5-.6h-12.9v31h5V49.4h6.5l7 10.8z" />
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg b/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg
new file mode 100644
index 000000000..8d987df79
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
diff --git a/packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg b/packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg
new file mode 100644
index 000000000..5203d49f5
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 15h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355zM15 4H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z"/></svg>
diff --git a/packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg b/packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg
new file mode 100644
index 000000000..a9c195eac
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 9a1 1 0 0 1 1 1 6.97 6.97 0 0 1 4.33 1.5h2.17c1.332 0 2.53.579 3.353 1.499L19 13a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.79 0-5.15-.603-7.06-1.658A.998.998 0 0 1 5 20H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h3zm1.001 3L6 17.021l.045.033C7.84 18.314 10.178 19 13 19c3.004 0 5.799-1.156 7.835-3.13l.133-.133-.12-.1a2.994 2.994 0 0 0-1.643-.63L19 15l-2.112-.001c.073.322.112.657.112 1.001v1H8v-2l6.79-.001-.034-.078a2.501 2.501 0 0 0-2.092-1.416L12.5 13.5H9.57A4.985 4.985 0 0 0 6.002 12zM4 11H3v7h1v-7zm9.646-7.425L14 3.93l.354-.354a2.5 2.5 0 1 1 3.535 3.536L14 11l-3.89-3.89a2.5 2.5 0 1 1 3.536-3.535zm-2.12 1.415a.5.5 0 0 0-.06.637l.058.069L14 8.17l2.476-2.474a.5.5 0 0 0 .058-.638l-.058-.07a.5.5 0 0 0-.638-.057l-.07.058-1.769 1.768-1.767-1.77-.068-.056a.5.5 0 0 0-.638.058z"/></svg>
diff --git a/packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg b/packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg
new file mode 100644
index 000000000..6efa8554b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5.463 4.433A9.961 9.961 0 0 1 12 2c5.523 0 10 4.477 10 10 0 2.136-.67 4.116-1.81 5.74L17 12h3A8 8 0 0 0 6.46 6.228l-.997-1.795zm13.074 15.134A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12c0-2.136.67-4.116 1.81-5.74L7 12H4a8 8 0 0 0 13.54 5.772l.997 1.795z"/></svg>
diff --git a/packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg b/packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg
new file mode 100644
index 000000000..5805daf09
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5.671 4.257c3.928-3.219 9.733-2.995 13.4.672 3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0A9.993 9.993 0 0 1 2.25 9.767l.077-.313 1.934.51a8 8 0 1 0 3.053-4.45l-.221.166 1.017 1.017-4.596 1.06 1.06-4.596 1.096 1.096zM13 6v2h2.5v2H10a.5.5 0 0 0-.09.992L10 11h4a2.5 2.5 0 1 1 0 5h-1v2h-2v-2H8.5v-2H14a.5.5 0 0 0 .09-.992L14 13h-4a2.5 2.5 0 1 1 0-5h1V6h2z"/></svg>
diff --git a/packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg b/packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg
new file mode 100644
index 000000000..50dabf446
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 16V4H2V2h3a1 1 0 0 1 1 1v12h12.438l2-8H8V5h13.72a1 1 0 0 1 .97 1.243l-2.5 10a1 1 0 0 1-.97.757H5a1 1 0 0 1-1-1zm2 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
diff --git a/packages/taler-wallet-webextension/src/svg/send_24px.svg b/packages/taler-wallet-webextension/src/svg/send_24px.svg
new file mode 100644
index 000000000..95fe7a4c6
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/send_24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg
new file mode 100644
index 000000000..adcd50405
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+  <g>
+    <path d="M0,0h24v24H0V0z" fill="none" />
+    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/svg/spinner-bars.svg b/packages/taler-wallet-webextension/src/svg/spinner-bars.svg
new file mode 100644
index 000000000..f6f7dfcb3
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/spinner-bars.svg
@@ -0,0 +1,53 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="30" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="90" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+</svg>
diff --git a/packages/taler-wallet-webextension/src/svg/wifi.svg b/packages/taler-wallet-webextension/src/svg/wifi.svg
new file mode 100644
index 000000000..ad712435d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/svg/wifi.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px">
+  <path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/test-utils.ts b/packages/taler-wallet-webextension/src/test-utils.ts
index 30b37ab8c..24dba8c7b 100644
--- a/packages/taler-wallet-webextension/src/test-utils.ts
+++ b/packages/taler-wallet-webextension/src/test-utils.ts
@@ -14,10 +14,16 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { PendingTestFunction, TestFunction } from "mocha";
-import { ComponentChildren, Fragment, FunctionalComponent, h as create, render as renderIntoDom, VNode } from "preact";
+import { ComponentChildren, Fragment, FunctionalComponent, h as create, options, render as renderIntoDom, VNode } from "preact";
 import { render as renderToString } from "preact-render-to-string";
 
+// When doing tests we want the requestAnimationFrame to be as fast as possible.
+// without this option the RAF will timeout after 100ms making the tests slower
+options.requestAnimationFrame = (fn: () => void) => {
+  // console.log("RAF called")
+  return fn()
+}
+
 export function createExample<Props>(
   Component: FunctionalComponent<Props>,
   props: Partial<Props>,
@@ -59,7 +65,7 @@ export function renderNodeOrBrowser(Component: any, args: any): void {
 interface Mounted<T> {
   unmount: () => void;
   result: { current: T | null };
-  waitNextUpdate: () => Promise<void>;
+  waitNextUpdate: (s?: string) => Promise<void>;
 }
 
 const isNode = typeof window === "undefined"
@@ -84,10 +90,11 @@ export function mountHook<T>(callback: () => T, Context?: ({ children }: { child
   const vdom = !Context ? create(Component, {}) : create(Context, { children: [create(Component, {})] },);
 
   // waiter callback
-  async function waitNextUpdate(): Promise<void> {
+  async function waitNextUpdate(_label = ""): Promise<void> {
+    if (_label) _label = `. label: "${_label}"`
     await new Promise((res, rej) => {
       const tid = setTimeout(() => {
-        rej(Error("waiting for an update but the hook didn't make one"))
+        rej(Error(`waiting for an update but the hook didn't make one${_label}`))
       }, 100)
 
       listener.push(() => {
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index 05c518508..bea8f0029 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -19,6 +19,8 @@ import {
   AmountJson,
   Amounts,
   NotificationType,
+  parsePaytoUri,
+  PaytoUri,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -41,6 +43,8 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
         response: AcceptManualWithdrawalResult;
         exchangeBaseUrl: string;
         amount: AmountJson;
+        paytoURI: PaytoUri | undefined;
+        payto: string;
       }
     | undefined
   >(undefined);
@@ -60,7 +64,12 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
         exchangeBaseUrl,
         Amounts.stringify(amount),
       );
-      setSuccess({ exchangeBaseUrl, response, amount });
+      const payto = response.exchangePaytoUris[0];
+      const paytoURI = parsePaytoUri(payto);
+      if (paytoURI && paytoURI.isKnown && paytoURI.targetType === "bitcoin") {
+        paytoURI.generateSegwitAddress(response.reservePub);
+      }
+      setSuccess({ exchangeBaseUrl, response, amount, paytoURI, payto });
     } catch (e) {
       if (e instanceof Error) {
         setError(e.message);
@@ -75,7 +84,8 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
     return (
       <ReserveCreated
         reservePub={success.response.reservePub}
-        payto={success.response.exchangePaytoUris[0]}
+        paytoURI={success.paytoURI}
+        payto={success.payto}
         exchangeBaseUrl={success.exchangeBaseUrl}
         amount={success.amount}
         onCancel={onCancel}
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 526daa7a1..84a2a7441 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -4,6 +4,7 @@ import {
   Amounts,
   segwitMinAmount,
   generateFakeSegwitAddress,
+  PaytoUri,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
@@ -13,6 +14,7 @@ import { useTranslationContext } from "../context/translation";
 import { amountToString } from "../utils/index";
 export interface Props {
   reservePub: string;
+  paytoURI: PaytoUri | undefined;
   payto: string;
   exchangeBaseUrl: string;
   amount: AmountJson;
@@ -21,13 +23,13 @@ export interface Props {
 
 export function ReserveCreated({
   reservePub,
+  paytoURI,
   payto,
   onCancel,
   exchangeBaseUrl,
   amount,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
-  const paytoURI = parsePaytoUri(payto);
   if (!paytoURI) {
     return (
       <div>
@@ -39,11 +41,7 @@ export function ReserveCreated({
   }
   function TransferDetails(): VNode {
     if (!paytoURI) return <Fragment />;
-    if (paytoURI.targetType === "bitcoin") {
-      const { segwitAddr1, segwitAddr2 } = generateFakeSegwitAddress(
-        reservePub,
-        paytoURI.targetPath,
-      );
+    if (paytoURI.isKnown && paytoURI.targetType === "bitcoin") {
       const min = segwitMinAmount();
       return (
         <section>
@@ -64,10 +62,10 @@ export function ReserveCreated({
                 {paytoURI.targetPath} {Amounts.stringifyValue(amount)} BTC
               </li>
               <li>
-                {segwitAddr1} {Amounts.stringifyValue(min)} BTC
+                {paytoURI.addr1} {Amounts.stringifyValue(min)} BTC
               </li>
               <li>
-                {segwitAddr2} {Amounts.stringifyValue(min)} BTC
+                {paytoURI.addr2} {Amounts.stringifyValue(min)} BTC
               </li>
             </ul>
             <i18n.Translate>
@@ -79,10 +77,10 @@ export function ReserveCreated({
                 {paytoURI.targetPath},{Amounts.stringifyValue(amount)}
               </li>
               <li>
-                {segwitAddr1},{Amounts.stringifyValue(min)}
+                {paytoURI.addr1},{Amounts.stringifyValue(min)}
               </li>
               <li>
-                {segwitAddr2},{Amounts.stringifyValue(min)}
+                {paytoURI.addr2},{Amounts.stringifyValue(min)}
               </li>
             </ul>
             <i18n.Translate>