1 files changed, 50 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx
index abd14848f..0187989af 100644
--- a/packages/demobank-ui/src/pages/AccountPage/views.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx
@@ -23,6 +23,7 @@ import { State } from "./index.js";
 import { CopyButton } from "../../components/CopyButton.js";
 import { bankUiSettings } from "../../settings.js";
 import { useBusinessAccountDetails } from "../../hooks/circuit.js";
+import { useSettings } from "../../hooks/settings.js";
 
 export function InvalidIbanView({ error }: State.InvalidIban) {
   return (
@@ -78,9 +79,58 @@ function ImportantMessage(): VNode {
 
 }
 
+function ShowDemoInfo():VNode {
+  const { i18n } = useTranslationContext();
+  const [settings, updateSettings] = useSettings();
+  if (!settings.showDemoDescription) return <Fragment />
+  return <div class="rounded-md bg-blue-50 p-4">
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+      </svg>
+    </div>
+    <div class="ml-3">
+      <h3 class="text-sm font-bold text-blue-800">
+        <i18n.Translate>This is a demo bank!</i18n.Translate>
+      </h3>
+      <div class="mt-2 text-sm text-blue-700">
+        <p>
+          <i18n.Translate>
+            This part of the demo shows how a bank that supports Taler
+            directly would work. In addition to using your own bank
+            account, you can also see the transaction history of some{" "}
+            <a href="/public-accounts">Public Accounts</a>.
+          </i18n.Translate>
+        </p>
+        <p class="mt-3 text-sm flex justify-end">
+          <button type="button" class="inline-flex font-semibold items-center rounded bg-white px-2 py-1 text-xs text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            onClick={(e) => {
+              e.preventDefault();
+              updateSettings("showDemoDescription", false);
+            }}
+          >
+            Close
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+            </svg>
+          </button>
+        </p>
+
+      </div>
+    </div>
+  </div>
+</div>
+}
+
 export function ReadyView({ account, limit, goToBusinessAccount }: State.Ready): VNode<{}> {
+  const { i18n } = useTranslationContext();
+
   return <Fragment>
     <MaybeBusinessButton account={account} onClick={goToBusinessAccount} />
+
+    <ShowDemoInfo />
+    
     <PaymentOptions limit={limit} />
     <Transactions account={account} />
   </Fragment>;