1 files changed, 44 insertions, 15 deletions
diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
index ea86da518..7cf658681 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -15,16 +15,23 @@
  */
 
 import {
+  LibtoolVersion,
   getGlobalLogLevel,
   setGlobalLogLevelFromString,
 } from "@gnu-taler/taler-util";
-import { TranslationProvider } from "@gnu-taler/web-util/browser";
-import { FunctionalComponent, h } from "preact";
+import { TranslationProvider, useApiContext } from "@gnu-taler/web-util/browser";
+import { ComponentChildren, Fragment, FunctionalComponent, VNode, h } from "preact";
 import { SWRConfig } from "swr";
-import { BackendStateProvider } from "../context/backend.js";
+import { BackendStateProvider, useBackendContext } from "../context/backend.js";
 import { strings } from "../i18n/strings.js";
-import { Routing } from "../pages/Routing.js";
-
+import { Routing } from "./Routing.js";
+import { useEffect, useState } from "preact/hooks";
+import { Loading } from "./Loading.js";
+import { getInitialBackendBaseURL } from "../hooks/backend.js";
+import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js";
+import { ErrorLoading } from "./ErrorLoading.js";
+import { BankFrame } from "../pages/BankFrame.js";
+import { ConfigStateProvider } from "../context/config.js";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
 /**
@@ -48,22 +55,44 @@ const App: FunctionalComponent = () => {
   return (
     <TranslationProvider source={strings}>
       <BackendStateProvider>
-        <SWRConfig
-          value={{
-            provider: WITH_LOCAL_STORAGE_CACHE
-              ? localStorageProvider
-              : undefined,
-          }}
-        >
-          <Routing />
-        </SWRConfig>
+        <VersionCheck>
+          <SWRConfig
+            value={{
+              provider: WITH_LOCAL_STORAGE_CACHE
+                ? localStorageProvider
+                : undefined,
+            }}
+          >
+            <Routing />
+          </SWRConfig>
+        </VersionCheck>
       </BackendStateProvider>
-    </TranslationProvider>
+    </TranslationProvider >
   );
 };
 (window as any).setGlobalLogLevelFromString = setGlobalLogLevelFromString;
 (window as any).getGlobalLevel = getGlobalLogLevel;
 
+function VersionCheck({ children }: { children: ComponentChildren }): VNode {
+  const checked = useConfigState()
+
+  if (checked === undefined) {
+    return <Loading />
+  }
+  if (checked.type === "wrong") {
+    return <BankFrame>
+      the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}", server version "{checked}"
+    </BankFrame>
+  }
+  if (checked.type === "ok") {
+    return <ConfigStateProvider value={checked.result}>{children}</ConfigStateProvider>
+  }
+
+  return <BankFrame>
+    <ErrorLoading error={checked.result} />
+  </BankFrame>
+}
+
 function localStorageProvider(): Map<unknown, unknown> {
   const map = new Map(JSON.parse(localStorage.getItem("app-cache") || "[]"));