show error like bank

1 files changed, 21 insertions, 8 deletions

diff --git a/packages/web-util/src/context/exchange-api.ts b/packages/web-util/src/context/exchange-api.ts
index 6f0b6b9f4..39f889ba9 100644
--- a/packages/web-util/src/context/exchange-api.ts
+++ b/packages/web-util/src/context/exchange-api.ts
@@ -32,7 +32,7 @@ import {
   h,
 } from "preact";
 import { useContext, useEffect, useState } from "preact/hooks";
-import { BrowserFetchHttpLib } from "../index.browser.js";
+import { BrowserFetchHttpLib, ErrorLoading, useTranslationContext } from "../index.browser.js";
 import {
   APIClient,
   ActiviyTracker,
@@ -89,14 +89,11 @@ export const ExchangeApiProvider = ({
   baseUrl: URL;
   evictors?: Evictors;
   children: ComponentChildren;
-  frameOnError: FunctionComponent<{
-    state:
-      | ConfigResultFail<TalerExchangeApi.ExchangeVersionResponse>
-      | undefined;
-  }>;
+  frameOnError: FunctionComponent<{ children: ComponentChildren }>;
 }): VNode => {
   const [checked, setChecked] =
     useState<ConfigResult<TalerExchangeApi.ExchangeVersionResponse>>();
+    const { i18n } = useTranslationContext();
 
   const { getRemoteConfig, VERSION, lib, cancelRequest, onActivity } =
     buildExchangeApiClient(baseUrl, evictors);
@@ -135,8 +132,24 @@ export const ExchangeApiProvider = ({
     };
   }, []);
 
-  if (!checked || checked.type !== "ok") {
-    return h(frameOnError, { state: checked }, []);
+  if (checked === undefined) {
+    return h(frameOnError, {
+      children: h("div", {}, "checking compatibility with server..."),
+    });
+  }
+  if (checked.type === "error") {
+    return h(frameOnError, {
+      children: h(ErrorLoading, { error: checked.error, showDetail: true }),
+    });
+  }
+  if (checked.type === "incompatible") {
+    return h(frameOnError, {
+      children: h(
+        "div",
+        {},
+        i18n.str`The server version is not supported. Supported version "${checked.supported}", server version "${checked.result.version}"`,
+      ),
+    });
   }
 
   const value: ExchangeContextType = {