justify balance

1 files changed, 13 insertions, 14 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index acd994fee..96ce9c317 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, TalerError, TranslatedString, parsePaytoUri } from "@gnu-taler/taler-util";
+import { Amounts, TalerError, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
@@ -237,9 +237,7 @@ export function BankFrame({
           <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div class=" flex flex-wrap items-center justify-between sm:flex-nowrap">
               <h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount account={account} /></h3>
-              <div>
-                <h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance account={account} /></h3>
-              </div>
+              <h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance account={account} /></h3>
             </div>
           </div>
 
@@ -342,27 +340,28 @@ function Footer() {
   );
 }
 
-function WelcomeAccount({ account }: { account: string }): VNode {
+function WelcomeAccount({ account: accountName }: { account: string }): VNode {
   const { i18n } = useTranslationContext();
 
-  const result = useAccountDetails(account);
+  const result = useAccountDetails(accountName);
   if (!result) {
     return <Loading />
   }
   if (result instanceof TalerError) {
     return <div />
   }
-  if (result.type === "fail") return <div />
 
-  const payto = parsePaytoUri(result.body.payto_uri)
-  if (!payto) 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;
 
-  const accountNumber = !payto.isKnown ? undefined : payto.targetType === "iban" ? payto.iban : payto.targetType === "x-taler-bank" ? payto.account : undefined;
   return <i18n.Translate>
-    Welcome,  {account} {accountNumber !== undefined ?
-      <span>
-        (<a href={result.body.payto_uri}>{accountNumber}</a> <CopyButton getContent={() => result.body.payto_uri} />)
-      </span>
+    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>