1 files changed, 14 insertions, 9 deletions

diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx
index 8834b8084..98ab301a3 100644
--- a/packages/taler-wallet-webextension/src/stories.tsx
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -20,7 +20,11 @@
  */
 import { Fragment, FunctionComponent, h } from "preact";
 import { LogoHeader } from "./components/LogoHeader.js";
-import { PopupBox, WalletBox } from "./components/styled/index.js";
+import {
+  PopupBox,
+  WalletAction,
+  WalletBox,
+} from "./components/styled/index.js";
 import { strings } from "./i18n/strings.js";
 import { PopupNavBar, WalletNavBar } from "./NavigationBar.js";
 
@@ -30,7 +34,8 @@ import * as mui from "./mui/index.stories.js";
 import * as popup from "./popup/index.stories.js";
 import * as wallet from "./wallet/index.stories.js";
 
-import { renderStories } from "@gnu-taler/web-util/lib/index.browser";
+import { renderStories } from "@gnu-taler/web-util/browser";
+import { AlertProvider } from "./context/alert.js";
 
 function main(): void {
   renderStories(
@@ -52,28 +57,28 @@ function getWrapperForGroup(group: string): FunctionComponent {
     case "popup":
       return function PopupWrapper({ children }: any) {
         return (
-          <Fragment>
+          <AlertProvider>
             <PopupNavBar />
             <PopupBox>{children}</PopupBox>
-          </Fragment>
+          </AlertProvider>
         );
       };
     case "wallet":
       return function WalletWrapper({ children }: any) {
         return (
-          <Fragment>
+          <AlertProvider>
             <LogoHeader />
             <WalletNavBar />
             <WalletBox>{children}</WalletBox>
-          </Fragment>
+          </AlertProvider>
         );
       };
     case "cta":
       return function WalletWrapper({ children }: any) {
         return (
-          <Fragment>
-            <WalletBox>{children}</WalletBox>
-          </Fragment>
+          <AlertProvider>
+            <WalletAction>{children}</WalletAction>
+          </AlertProvider>
         );
       };
     default: