more ui

1 files changed, 63 insertions, 59 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index 96ce9c317..c0babd0c9 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -23,8 +23,8 @@ import { Attention } from "../components/Attention.js";
 import { CopyButton } from "../components/CopyButton.js";
 import { LangSelector } from "../components/LangSelector.js";
 import { Loading } from "../components/Loading.js";
-import { useBackendContext } from "../context/backend.js";
 import { useAccountDetails } from "../hooks/access.js";
+import { useBackendState } from "../hooks/backend.js";
 import { getAllBooleanSettings, getLabelForSetting, useSettings } from "../hooks/settings.js";
 import { bankUiSettings } from "../settings.js";
 import { RenderAmount } from "./PaytoWireTransferForm.js";
@@ -49,7 +49,7 @@ export function BankFrame({
   children: ComponentChildren;
 }): VNode {
   const { i18n } = useTranslationContext();
-  const backend = useBackendContext();
+  const backend = useBackendState();
   const [settings, updateSettings] = useSettings();
   const [open, setOpen] = useState(false)
 
@@ -80,9 +80,9 @@ export function BankFrame({
   return (<div class="min-h-full flex flex-col m-0" style="min-height: 100vh;">
     <div class="bg-indigo-600 pb-32">
       <nav class="">
-        <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
+        <div class="mx-auto max-w-7xl px-2 ">
           <div class="relative flex h-16 items-center justify-between ">
-            <div class="flex items-center px-2 lg:px-0">
+            <div class="flex items-center px-2">
               <div class="flex-shrink-0 bg-white rounded-lg">
                 <a href={bankUiSettings.iconLinkURL ?? "#"}>
                   <img
@@ -94,7 +94,7 @@ export function BankFrame({
                 </a>
               </div>
               {bankUiSettings.demoSites &&
-                <div class="hidden sm:block lg:ml-10 ">
+                <div class="hidden sm:block ml-6 ">
                   <div class="flex space-x-4">
                     {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */}
                     {bankUiSettings.demoSites.map(([name, url]) => {
@@ -161,41 +161,26 @@ export function BankFrame({
                       <div class="relative mt-6 flex-1 px-4 sm:px-6">
                         <nav class="flex flex-1 flex-col" aria-label="Sidebar">
                           <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                            <li>
-                              <a href="#"
-                                class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
-                                onClick={() => {
-                                  backend.logOut();
-                                  setOpen(false)
-                                  updateSettings("currentWithdrawalOperationId", undefined);
-                                }}
-                              >
-                                <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-                                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-                                </svg>
-                                <i18n.Translate>Log out</i18n.Translate>
-                              </a>
-                            </li>
+                            {backend.state.status === "loggedIn" ?
+                              <li>
+                                <a href="#"
+                                  class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                                  onClick={() => {
+                                    backend.logOut();
+                                    setOpen(false)
+                                    updateSettings("currentWithdrawalOperationId", undefined);
+                                  }}
+                                >
+                                  <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+                                  </svg>
+                                  <i18n.Translate>Log out</i18n.Translate>
+                                </a>
+                              </li>
+                              : undefined}
                             <li>
                               <LangSelector />
                             </li>
-                            {bankUiSettings.demoSites &&
-                              <li class="sm:hidden">
-                                <div class="text-xs font-semibold leading-6 text-gray-400">
-                                  <i18n.Translate>Sites</i18n.Translate>
-                                </div>
-                                <ul role="list" class="space-y-1">
-                                  {bankUiSettings.demoSites.map(([name, url]) => {
-                                    return <li>
-                                      <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
-                                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">&gt;</span>
-                                        <span class="truncate">{name}</span>
-                                      </a>
-                                    </li>
-                                  })}
-                                </ul>
-                              </li>
-                            }
                             <li>
                               <div class="text-xs font-semibold leading-6 text-gray-400">
                                 <i18n.Translate>Preferences</i18n.Translate>
@@ -220,6 +205,23 @@ export function BankFrame({
                                 })}
                               </ul>
                             </li>
+                            {bankUiSettings.demoSites &&
+                              <li class="sm:hidden">
+                                <div class="text-xs font-semibold leading-6 text-gray-400">
+                                  <i18n.Translate>Sites</i18n.Translate>
+                                </div>
+                                <ul role="list" class="space-y-1">
+                                  {bankUiSettings.demoSites.map(([name, url]) => {
+                                    return <li>
+                                      <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
+                                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">&gt;</span>
+                                        <span class="truncate">{name}</span>
+                                      </a>
+                                    </li>
+                                  })}
+                                </ul>
+                              </li>
+                            }
                           </ul>
                         </nav>
                       </div>
@@ -342,28 +344,30 @@ function Footer() {
 
 function WelcomeAccount({ account: accountName }: { account: string }): VNode {
   const { i18n } = useTranslationContext();
-
-  const result = useAccountDetails(accountName);
-  if (!result) {
-    return <Loading />
-  }
-  if (result instanceof TalerError) {
-    return <div />
-  }
-
-  const payto = result.type === "fail" ? undefined : parsePaytoUri(result.body.payto_uri)
-  const info = !payto || !payto.isKnown ? undefined
-    : payto.targetType === "iban" ? { account: payto.iban, uri: stringifyPaytoUri(payto) }
-      : payto.targetType === "x-taler-bank" ? { account: payto.account, uri: stringifyPaytoUri(payto) }
-        : undefined;
-
-  return <i18n.Translate>
-    Welcome,  <span class="whitespace-nowrap">{accountName}</span> {info !== undefined ?
-      <small class="whitespace-nowrap">
-        (<a href={info.uri}>{info.account}</a> <CopyButton getContent={() => info.uri} />)
-      </small>
-      : <Fragment />}!
-  </i18n.Translate>
+  return <a href="#/my-profile" class="underline underline-offset-2">
+    <i18n.Translate>Welcome,  <span class="whitespace-nowrap">{accountName}</span></i18n.Translate>
+  </a>
+  // const result = useAccountDetails(accountName);
+  // if (!result) {
+  //   return <Loading />
+  // }
+  // if (result instanceof TalerError) {
+  //   return <div />
+  // }
+
+  // const payto = result.type === "fail" ? undefined : parsePaytoUri(result.body.payto_uri)
+  // const info = !payto || !payto.isKnown ? undefined
+  //   : payto.targetType === "iban" ? { account: payto.iban, uri: stringifyPaytoUri(payto) }
+  //     : payto.targetType === "x-taler-bank" ? { account: payto.account, uri: stringifyPaytoUri(payto) }
+  //       : undefined;
+
+  // return <i18n.Translate>
+  //   Welcome,  <span class="whitespace-nowrap">{accountName}</span> {info !== undefined ?
+  //     <small class="whitespace-nowrap">
+  //       (<a href={info.uri}>{info.account}</a> <CopyButton getContent={() => info.uri} />)
+  //     </small>
+  //     : <Fragment />}!
+  // </i18n.Translate>
 
 }