diff options
Diffstat (limited to 'packages/demobank-ui/src/pages')
7 files changed, 79 insertions, 55 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 29334cae4..fc8dfd599 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -27,6 +27,7 @@ import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import logo from "../assets/logo-2021.svg"; import { useAccountDetails } from "../hooks/access.js"; import { Attention } from "../components/Attention.js"; +import { RenderAmount } from "./PaytoWireTransferForm.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; @@ -87,7 +88,7 @@ export function BankFrame({ class="h-8 w-auto" src={logo} alt="Taler" - style={{ height: 35, margin: 10 }} + style={{ height: "1.5rem", margin: ".5rem" }} /> </a> </div> @@ -322,10 +323,10 @@ function MaybeShowDebugInfo({ info }: { info: any }): VNode { const [settings] = useSettings() if (settings.showDebugInfo) { return <pre class="whitespace-break-spaces "> - {info} - </pre> + {info} + </pre> } - return <Fragment /> + return <Fragment /> } @@ -333,19 +334,19 @@ function StatusBanner(): VNode { const notifs = useNotifications() if (notifs.length === 0) return <Fragment /> return <div class="fixed z-20 w-full p-4"> { - notifs.map(n => { - switch (n.message.type) { - case "error": - return <Attention type="danger" title={n.message.title} onClose={() => { - n.remove() - }}> - {n.message.description && - <div class="mt-2 text-sm text-red-700"> - {n.message.description} - </div> - } - <MaybeShowDebugInfo info={n.message.debug} /> - {/* <a href="#" class="text-gray-500"> + notifs.map(n => { + switch (n.message.type) { + case "error": + return <Attention type="danger" title={n.message.title} onClose={() => { + n.remove() + }}> + {n.message.description && + <div class="mt-2 text-sm text-red-700"> + {n.message.description} + </div> + } + <MaybeShowDebugInfo info={n.message.debug} /> + {/* <a href="#" class="text-gray-500"> show debug info </a> {n.message.debug && @@ -353,13 +354,13 @@ function StatusBanner(): VNode { {n.message.debug} </div> } */} - </Attention> - case "info": - return <Attention type="success" title={n.message.title} onClose={() => { - n.remove(); - }} /> - } - })} + </Attention> + case "info": + return <Attention type="success" title={n.message.title} onClose={() => { + n.remove(); + }} /> + } + })} </div> } @@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode { const result = useAccountDetails(account); if (!result.ok) return <div /> - return <div> - {Amounts.currencyOf(result.data.balance.amount)} - {result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} - {Amounts.stringifyValue(result.data.balance.amount)} - </div> + return <RenderAmount + value={Amounts.parseOrThrow(result.data.balance.amount)} + negative={result.data.balance.credit_debit_indicator === "debit"} + /> } diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index fef272831..f60ba3270 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ const { i18n } = useTranslationContext(); const [settings] = useSettings(); - const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer"); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); return ( <div class="mt-2"> @@ -47,7 +47,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("charge-wallet") }} /> <span class="flex flex-1"> - <div class="text-lg mr-2">💵</div> + <div class="text-4xl mr-4 my-auto">💵</div> <span class="flex flex-col"> <span id="project-type-0-label" class="block text-sm font-medium text-gray-900"> <i18n.Translate>a <b>Taler</b> wallet</i18n.Translate> @@ -76,7 +76,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("wire-transfer") }} /> <span class="flex flex-1"> - <div class="text-lg mr-2">↔</div> + <div class="text-4xl mr-4 my-auto">↔</div> <span class="flex flex-col"> <span id="project-type-1-label" class="block text-sm font-medium text-gray-900"> <i18n.Translate>another bank account</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 785dc4264..b3fd51670 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -39,6 +39,8 @@ import { undefinedIfEmpty, validateIBAN, } from "../utils.js"; +import { useConfigState } from "../hooks/config.js"; +import { useConfigContext } from "../context/config.js"; const logger = new Logger("PaytoWireTransferForm"); @@ -55,7 +57,7 @@ export function PaytoWireTransferForm({ onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(true); + const [isRawPayto, setIsRawPayto] = useState(false); // FIXME: remove this const [iban, setIban] = useState<string | undefined>("DE4745461198061"); const [subject, setSubject] = useState<string | undefined>("ASD"); @@ -285,7 +287,7 @@ export function PaytoWireTransferForm({ <div class="sm:col-span-5"> <label for="amount" class="block text-sm font-medium leading-6 text-gray-900">{i18n.str`Amount`}</label> - <Amount + <InputAmount name="amount" left currency={limit.currency} @@ -372,7 +374,9 @@ export function doAutoFocus(element: HTMLElement | null) { } } -export function Amount( +const FRAC_SEPARATOR = "." + +export function InputAmount( { currency, name, @@ -390,6 +394,7 @@ export function Amount( }, ref: Ref<HTMLInputElement>, ): VNode { + const cfg = useConfigContext() return ( <div class="mt-2"> <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600"> @@ -409,10 +414,14 @@ export function Amount( autocomplete="off" value={value ?? ""} disabled={!onChange} - onInput={(e): void => { - if (onChange) { - onChange(e.currentTarget.value); + onInput={(e) => { + if (!onChange) return; + const l = e.currentTarget.value.length + const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR) + if (sep_pos !== -1 && l - sep_pos - 1 > cfg.currency_fraction_limit) { + e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + cfg.currency_fraction_limit + 1) } + onChange(e.currentTarget.value); }} /> </div> @@ -421,3 +430,21 @@ export function Amount( ); } +export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode { + const cfg = useConfigContext() + const str = Amounts.stringifyValue(value) + const sep_pos = str.indexOf(FRAC_SEPARATOR) + if (sep_pos !== -1 && str.length - sep_pos - 1 > cfg.currency_fraction_digits) { + const limit = sep_pos + cfg.currency_fraction_digits + 1 + const normal = str.substring(0, limit) + const small = str.substring(limit) + return <span class="whitespace-nowrap"> + {negative ? "-" : undefined} + {value.currency} {normal} <sup class="-ml-2">{small}</sup> + </span> + } + return <span class="whitespace-nowrap"> + {negative ? "-" : undefined} + {value.currency} {str} + </span> +}
\ No newline at end of file diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 7357223b7..da299b1c8 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -34,13 +34,13 @@ import { forwardRef } from "preact/compat"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; -import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js"; +import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js"; import { useSettings } from "../hooks/settings.js"; import { OperationState } from "./OperationState/index.js"; import { Attention } from "../components/Attention.js"; const logger = new Logger("WalletWithdrawForm"); -const RefAmount = forwardRef(Amount); +const RefAmount = forwardRef(InputAmount); function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index 208d4b859..ddcd2492d 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -38,6 +38,7 @@ import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAccessAnonAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; import { useSettings } from "../hooks/settings.js"; +import { RenderAmount } from "./PaytoWireTransferForm.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); @@ -318,7 +319,7 @@ export function WithdrawalConfirmationQuestion({ <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> - {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)} + <RenderAmount value={details.amount} /> </dd> </div> </dl> diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx index f99b320a4..a6899e679 100644 --- a/packages/demobank-ui/src/pages/admin/AccountList.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -4,6 +4,7 @@ import { handleNotOkResult } from "../HomePage.js"; import { AccountAction } from "./Home.js"; import { Amounts } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { RenderAmount } from "../PaytoWireTransferForm.js"; interface Props { onAction: (type: AccountAction, account: string) => void; @@ -88,12 +89,7 @@ export function AccountList({ account, onAction, onCreateAccount }: Props): VNod i18n.str`unknown` ) : ( <span class="amount"> - {balanceIsDebit ? <b>-</b> : null} - <span class="value">{`${Amounts.stringifyValue( - balance, - )}`}</span> - - <span class="currency">{`${balance.currency}`}</span> + <RenderAmount value={balance} negative={balanceIsDebit} /> </span> )} </td> diff --git a/packages/demobank-ui/src/pages/business/Home.tsx b/packages/demobank-ui/src/pages/business/Home.tsx index 2945cb65a..1a84effcd 100644 --- a/packages/demobank-ui/src/pages/business/Home.tsx +++ b/packages/demobank-ui/src/pages/business/Home.tsx @@ -45,7 +45,7 @@ import { undefinedIfEmpty, } from "../../utils.js"; import { handleNotOkResult } from "../HomePage.js"; -import { Amount } from "../PaytoWireTransferForm.js"; +import { InputAmount } from "../PaytoWireTransferForm.js"; import { ShowAccountDetails } from "../ShowAccountDetails.js"; import { UpdateAccountPassword } from "../UpdateAccountPassword.js"; @@ -342,7 +342,7 @@ function CreateCashout({ </label> <div style={{ display: "flex" }}> - <Amount + <InputAmount name="amount" currency={amount.currency} value={form.amount} @@ -372,7 +372,7 @@ function CreateCashout({ </fieldset> <fieldset> <label for="balance-now">{i18n.str`Balance now`}</label> - <Amount + <InputAmount name="banace-now" currency={balance.currency} value={Amounts.stringifyValue(balance)} @@ -382,7 +382,7 @@ function CreateCashout({ <label for="total-cost" style={{ fontWeight: "bold", color: "red" }} >{i18n.str`Total cost`}</label> - <Amount + <InputAmount name="total-cost" currency={balance.currency} value={Amounts.stringifyValue(calc.debit)} @@ -390,7 +390,7 @@ function CreateCashout({ </fieldset> <fieldset> <label for="balance-after">{i18n.str`Balance after`}</label> - <Amount + <InputAmount name="balance-after" currency={balance.currency} value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""} @@ -400,7 +400,7 @@ function CreateCashout({ <Fragment> <fieldset> <label for="amount-conversiojn">{i18n.str`Amount after conversion`}</label> - <Amount + <InputAmount name="amount-conversion" currency={fiatCurrency} value={Amounts.stringifyValue(calc.beforeFee)} @@ -409,7 +409,7 @@ function CreateCashout({ <fieldset> <label form="cashout-fee">{i18n.str`Cashout fee`}</label> - <Amount + <InputAmount name="cashout-fee" currency={fiatCurrency} value={Amounts.stringifyValue(sellFee)} @@ -421,7 +421,7 @@ function CreateCashout({ <label for="total" style={{ fontWeight: "bold", color: "green" }} >{i18n.str`Total cashout transfer`}</label> - <Amount + <InputAmount name="total" currency={fiatCurrency} value={Amounts.stringifyValue(calc.credit)} |