1 files changed, 34 insertions, 11 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 372db847c..46fe02225 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -25,13 +25,17 @@ import { createHashHistory } from "history";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
 import { useEffect } from "preact/hooks";
+import { CurrentAlerts } from "../components/CurrentAlerts.js";
 import { LogoHeader } from "../components/LogoHeader.js";
 import PendingTransactions from "../components/PendingTransactions.js";
 import {
+  Link,
+  LinkPrimary,
   SubTitle,
   WalletAction,
   WalletBox,
 } from "../components/styled/index.js";
+import { AlertProvider } from "../context/alert.js";
 import { DevContextProvider } from "../context/devContext.js";
 import { IoCProviderForRuntime } from "../context/iocContext.js";
 import {
@@ -66,6 +70,7 @@ import { QrReaderPage } from "./QrReader.js";
 import { SettingsPage } from "./Settings.js";
 import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
+import CloseIcon from "../svg/close_24px.svg";
 
 export function Application(): VNode {
   const { i18n } = useTranslationContext();
@@ -495,15 +500,6 @@ function matchesRoute(url: string, route: string): boolean {
   return !result ? false : true;
 }
 
-function shouldShowPendingOperations(url: string): boolean {
-  return [
-    Pages.balanceHistory.pattern,
-    Pages.dev,
-    Pages.settings,
-    Pages.backup,
-  ].some((p) => matchesRoute(url, p));
-}
-
 function CallToActionTemplate({
   title,
   children,
@@ -511,11 +507,35 @@ function CallToActionTemplate({
   title: TranslatedString;
   children: ComponentChildren;
 }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <WalletAction>
       <LogoHeader />
+      <section style={{ display: "flex", justifyContent: "right", margin: 0 }}>
+        <LinkPrimary href={Pages.balance}>
+          <div
+            style={{
+              height: 24,
+              width: 24,
+              marginLeft: 4,
+              marginRight: 4,
+              border: "1px solid black",
+              borderRadius: 12,
+            }}
+            dangerouslySetInnerHTML={{ __html: CloseIcon }}
+          />
+        </LinkPrimary>
+      </section>
       <SubTitle>{title}</SubTitle>
-      {children}
+      <AlertProvider>
+        <CurrentAlerts />
+        {children}
+      </AlertProvider>
+      <section style={{ display: "flex", justifyContent: "right" }}>
+        <LinkPrimary href={Pages.balance}>
+          <i18n.Translate>Return to wallet</i18n.Translate>
+        </LinkPrimary>
+      </section>
     </WalletAction>
   );
 }
@@ -536,7 +556,10 @@ function WalletTemplate({
       {goToTransaction ? (
         <PendingTransactions goToTransaction={goToTransaction} />
       ) : undefined}
-      <WalletBox>{children}</WalletBox>
+      <CurrentAlerts />
+      <WalletBox>
+        <AlertProvider>{children}</AlertProvider>
+      </WalletBox>
     </Fragment>
   );
 }