diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 4c2367008..a5c9f2837 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -304,6 +304,18 @@ export const Overlay = styled.div`
cursor: pointer;
`;
+export const NotifyUpdateFadeOut = styled.div`
+ border: 2px solid red;
+ transition: all 0.4s ease-out;
+ animation: fadeout 1s forwards;
+ animation-delay: 0.1s;
+ @keyframes fadeout {
+ to {
+ border-color: #f5f5f5;
+ }
+ }
+`;
+
export const CenteredDialog = styled.div`
position: absolute;
text-align: left;
diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx
new file mode 100644
index 000000000..1239a03e9
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.stories.tsx
@@ -0,0 +1,47 @@
+/*
+ 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
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { PendingTaskType } from "@gnu-taler/taler-wallet-core";
+import { createExample } from "../test-utils";
+import { View as TestedComponent } from "./DeveloperPage";
+
+export default {
+ title: "wallet/developer",
+ component: TestedComponent,
+ argTypes: {
+ setDeviceName: () => Promise.resolve(),
+ },
+};
+
+export const AllOff = createExample(TestedComponent, {
+ operations: [
+ {
+ type: PendingTaskType.ExchangeUpdate,
+ exchangeBaseUrl: "http://exchange.url.",
+ givesLifeness: false,
+ lastError: undefined,
+ timestampDue: {
+ t_ms: 123123213,
+ },
+ retryInfo: undefined,
+ },
+ ],
+});
diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
similarity index 55%
rename from packages/taler-wallet-webextension/src/popup/Debug.tsx
rename to packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
index 8b5d41657..494f8ecbf 100644
--- a/packages/taler-wallet-webextension/src/popup/Debug.tsx
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
@@ -14,22 +14,71 @@
TALER; see the file COPYING. If not, see
*/
-import { h, VNode } from "preact";
+import { NotificationType } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, VNode } from "preact";
import { Diagnostics } from "../components/Diagnostics";
+import { NotifyUpdateFadeOut } from "../components/styled/index";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
import { useDiagnostics } from "../hooks/useDiagnostics";
import * as wxApi from "../wxApi";
export function DeveloperPage(): VNode {
const [status, timedOut] = useDiagnostics();
+ const listenAllEvents = Array.from({ length: 1 });
+ listenAllEvents.includes = () => true; // includes every event
+ const operationsResponse = useAsyncAsHook(
+ wxApi.getPendingOperations,
+ listenAllEvents,
+ );
+
+ const operations =
+ operationsResponse === undefined
+ ? []
+ : operationsResponse.hasError
+ ? []
+ : operationsResponse.response.pendingOperations;
+
+ return ;
+}
+export interface Props {
+ status: any;
+ timedOut: boolean;
+ operations: PendingTaskInfo[];
+}
+
+function hashObjectId(o: any): string {
+ return JSON.stringify(o);
+}
+
+export function View({ status, timedOut, operations }: Props): VNode {
return (