diff options
author | Sebastian <sebasjm@gmail.com> | 2023-10-19 09:15:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-10-19 09:15:14 -0300 |
commit | 93420e064eb2a54b966e9b874ff6c62d4efcd70b (patch) | |
tree | 952d4992856cf6263fdc8302f2cbdfba483a4378 /packages/demobank-ui/src/pages | |
parent | 6bc2ca85e7238dbd9a88643e540a73cee6c918c7 (diff) | |
download | wallet-core-93420e064eb2a54b966e9b874ff6c62d4efcd70b.tar.xz |
justify balance
Diffstat (limited to 'packages/demobank-ui/src/pages')
-rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 27 |
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> |