remove deprecated notifications, implement isOffline

11 files changed, 89 insertions, 8 deletions

diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 92b8d2667..47b3c8e08 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -799,6 +799,17 @@ export const ErrorBox = styled.div`
   }
 `;
 
+export const RedBanner = styled.div`
+  width: 80%;
+  padding: 4px;
+  text-align: center;
+  background: red;
+  border: 1px solid #df3a3a;
+  border-radius: 4px;
+  font-weight: bold;
+  margin: 4px;
+`;
+
 export const InfoBox = styled(ErrorBox)`
   color: black;
   background-color: #d1e7dd;
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
index 10f1ee849..c6512cd12 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
@@ -49,7 +49,7 @@ export function useComponentState({
 
   useEffect(() =>
     api.listener.onUpdateNotification(
-      [NotificationType.CoinWithdrawn],
+      [NotificationType.TransactionStateTransition],
       hook?.retry,
     ),
   );
@@ -123,7 +123,9 @@ export function useComponentState({
     raw,
     goToWalletManualWithdraw,
     summary,
-    expiration: expiration ? AbsoluteTime.fromProtocolTimestamp(expiration) : undefined,
+    expiration: expiration
+      ? AbsoluteTime.fromProtocolTimestamp(expiration)
+      : undefined,
   };
 
   if (!foundBalance) {
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/state.ts b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
index 586ef377c..4468438d1 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
@@ -54,7 +54,7 @@ export function useComponentState({
   useEffect(
     () =>
       api.listener.onUpdateNotification(
-        [NotificationType.CoinWithdrawn],
+        [NotificationType.TransactionStateTransition],
         hook?.retry,
       ),
     [hook],
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/test.ts b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
index 655f21eb9..e2935fc4e 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
@@ -541,7 +541,9 @@ describe("Payment CTA states", () => {
           // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1"));
           expect(state.payHandler.onClick).not.undefined;
 
-          handler.notifyEventFromWallet(NotificationType.CoinWithdrawn);
+          handler.notifyEventFromWallet(
+            NotificationType.TransactionStateTransition,
+          );
         },
         (state) => {
           if (state.status !== "ready") expect.fail();
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
index a33361be8..4a0b2911a 100644
--- a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
@@ -128,7 +128,7 @@ export function useComponentState({
   }
   const errors = undefinedIfEmpty({
     amount: amount && Amounts.isZero(amount) ? i18n.str`required` : undefined,
-    summary: !summary ? i18n.str`required` : undefined,
+    summary: summary !== undefined && !summary ? i18n.str`required` : undefined,
   });
   return {
     status: "fill-template",
diff --git a/packages/taler-wallet-webextension/src/hooks/useIsOnline.ts b/packages/taler-wallet-webextension/src/hooks/useIsOnline.ts
new file mode 100644
index 000000000..8d26bf3b6
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/hooks/useIsOnline.ts
@@ -0,0 +1,14 @@
+import { codecForBoolean } from "@gnu-taler/taler-util";
+import { buildStorageKey, useMemoryStorage } from "@gnu-taler/web-util/browser";
+import { platform } from "../platform/foreground.js";
+import { useEffect } from "preact/hooks";
+
+export function useIsOnline(): boolean {
+  const { value, update } = useMemoryStorage("online", true);
+  useEffect(() => {
+    return platform.listenNetworkConnectionState((state) => {
+      update(state === "on");
+    });
+  });
+  return value;
+}
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts b/packages/taler-wallet-webextension/src/platform/api.ts
index f985cc4f8..e3e97264d 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -286,4 +286,11 @@ export interface ForegroundPlatformAPI {
   listenToWalletBackground(
     listener: (message: MessageFromBackend) => void,
   ): () => void;
+
+  /**
+   * Notify when platform went offline
+   */
+  listenNetworkConnectionState(
+    listener: (state: "on" | "off") => void,
+  ): () => void;
 }
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts
index 0f6b5fb0d..34057a310 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -58,6 +58,7 @@ const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   sendMessageToBackground,
   useServiceWorkerAsBackgroundProcess,
   keepAlive,
+  listenNetworkConnectionState,
 };
 
 export default api;
@@ -762,3 +763,20 @@ async function findTalerUriInActiveTab(): Promise<string | undefined> {
   if (!tab || tab.id === undefined) return;
   return findTalerUriInTab(tab.id);
 }
+
+function listenNetworkConnectionState(
+  notify: (state: "on" | "off") => void,
+): () => void {
+  function notifyOffline() {
+    notify("off");
+  }
+  function notifyOnline() {
+    notify("on");
+  }
+  window.addEventListener("offline", notifyOffline);
+  window.addEventListener("online", notifyOnline);
+  return () => {
+    window.removeEventListener("offline", notifyOffline);
+    window.removeEventListener("online", notifyOnline);
+  };
+}
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts b/packages/taler-wallet-webextension/src/platform/dev.ts
index 005421876..976ac05f5 100644
--- a/packages/taler-wallet-webextension/src/platform/dev.ts
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -34,6 +34,7 @@ const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
   keepAlive: (cb: VoidFunction) => cb(),
   findTalerUriInActiveTab: async () => undefined,
   findTalerUriInClipboard: async () => undefined,
+  listenNetworkConnectionState,
   getPermissionsApi: () => ({
     addPermissionsListener: () => undefined,
     containsHostPermissions: async () => true,
@@ -197,3 +198,20 @@ interface IframeMessageCommand {
 }
 
 export default api;
+
+function listenNetworkConnectionState(
+  notify: (state: "on" | "off") => void,
+): () => void {
+  function notifyOffline() {
+    notify("off");
+  }
+  function notifyOnline() {
+    notify("on");
+  }
+  window.addEventListener("offline", notifyOffline);
+  window.addEventListener("online", notifyOnline);
+  return () => {
+    window.removeEventListener("offline", notifyOffline);
+    window.removeEventListener("online", notifyOnline);
+  };
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 31a71e249..13afccb6c 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -44,6 +44,7 @@ import { LogoHeader } from "../components/LogoHeader.js";
 import PendingTransactions from "../components/PendingTransactions.js";
 import {
   LinkPrimary,
+  RedBanner,
   SubTitle,
   WalletAction,
   WalletBox,
@@ -80,6 +81,7 @@ import { QrReaderPage } from "./QrReader.js";
 import { SettingsPage } from "./Settings.js";
 import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
+import { useIsOnline } from "../hooks/useIsOnline.js";
 
 export function Application(): VNode {
   const { i18n } = useTranslationContext();
@@ -585,8 +587,15 @@ function WalletTemplate({
   children: ComponentChildren;
   goToTransaction?: (id: string) => Promise<void>;
 }): VNode {
+  const online = useIsOnline();
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
+      {!online && (
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <RedBanner>{i18n.str`Network is offline`}</RedBanner>
+        </div>
+      )}
       <LogoHeader />
       <WalletNavBar path={path} />
       {goToTransaction ? (
diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
index 388a331e6..c5e5c3c07 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
@@ -47,8 +47,6 @@ export function DeveloperPage(): VNode {
   const [status, timedOut] = useDiagnostics();
 
   const listenAllEvents = Array.from<NotificationType>({ length: 1 });
-  //FIXME: waiting for retry notification make a always increasing loop of notifications
-  listenAllEvents.includes = (e) => e !== "waiting-for-retry"; // includes every event
 
   const api = useBackendContext();
 
@@ -405,7 +403,9 @@ export function View({
           <i18n.Translate>
             Database exported at
             <Time
-              timestamp={AbsoluteTime.fromMilliseconds(downloadedDatabase.time.getTime())}
+              timestamp={AbsoluteTime.fromMilliseconds(
+                downloadedDatabase.time.getTime(),
+              )}
               format="yyyy/MM/dd HH:mm:ss"
             />
             <a