better /config error

1 files changed, 13 insertions, 5 deletions

diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
index ebda31035..a587c6f1e 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -29,6 +29,8 @@ 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";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
 /**
@@ -76,12 +78,18 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode {
   if (checked === undefined) {
     return <Loading />
   }
-  if (checked === false) {
-    return <div>
-      the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}"
-    </div>
+  if (typeof checked ===  "string") {
+    return <BankFrame>
+      the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}", server version "{checked}"
+    </BankFrame>
   }
-  return <Fragment>{children}</Fragment>
+  if (checked === true) {
+    return <Fragment>{children}</Fragment>
+  }
+  
+  return <BankFrame>
+    <ErrorLoading error={checked}/>
+  </BankFrame>
 }
 
 function localStorageProvider(): Map<unknown, unknown> {