From 372ddff91798cf9247eaf045f0d0ce33694fd880 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 1 Oct 2023 12:50:43 -0300 Subject: [PATCH] render amount and limit input --- .../src/components/Cashouts/views.tsx | 5 +- .../src/components/Transactions/views.tsx | 23 ++++---- packages/demobank-ui/src/components/app.tsx | 7 ++- packages/demobank-ui/src/context/config.ts | 52 +++++++++++++++++ packages/demobank-ui/src/declaration.d.ts | 24 +++++++- packages/demobank-ui/src/hooks/config.ts | 22 ++++--- packages/demobank-ui/src/pages/BankFrame.tsx | 58 +++++++++---------- .../demobank-ui/src/pages/PaymentOptions.tsx | 6 +- .../src/pages/PaytoWireTransferForm.tsx | 39 +++++++++++-- .../src/pages/WalletWithdrawForm.tsx | 4 +- .../pages/WithdrawalConfirmationQuestion.tsx | 3 +- .../src/pages/admin/AccountList.tsx | 8 +-- .../demobank-ui/src/pages/business/Home.tsx | 16 ++--- .../src/components/HistoryItem.tsx | 30 +++++----- 14 files changed, 201 insertions(+), 96 deletions(-) create mode 100644 packages/demobank-ui/src/context/config.ts diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx index 4b7649fb6..a32deb266 100644 --- a/packages/demobank-ui/src/components/Cashouts/views.tsx +++ b/packages/demobank-ui/src/components/Cashouts/views.tsx @@ -19,6 +19,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State } from "./index.js"; import { format } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; +import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); @@ -62,8 +63,8 @@ export function ReadyView({ cashouts, onSelected }: State.Ready): VNode { ? format(item.confirmation_time, "dd/MM/yyyy HH:mm:ss") : "-"} - {Amounts.stringifyValue(item.amount_debit)} - {Amounts.stringifyValue(item.amount_credit)} + + {item.status} { const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss") const amount = - {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${item.amount.currency - }` - ) : ( - <{i18n.str`invalid value`}> - )} + { } return ( @@ -86,20 +81,26 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
Amount
- {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( - `${Amounts.stringifyValue(item.amount)}` + {item.negative ? i18n.str`sent` : i18n.str`received`} + + {item.amount ? ( + ) : ( <{i18n.str`invalid value`}> )}
+
Counterpart
- {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart} + {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart}
- {amount} + {item.amount ? ( + ) : ( + <{i18n.str`invalid value`}> + )} {item.counterpart} {item.subject} diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx index f15a9ee6a..7cf658681 100644 --- a/packages/demobank-ui/src/components/app.tsx +++ b/packages/demobank-ui/src/components/app.tsx @@ -31,6 +31,7 @@ import { getInitialBackendBaseURL } from "../hooks/backend.js"; import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js"; import { ErrorLoading } from "./ErrorLoading.js"; import { BankFrame } from "../pages/BankFrame.js"; +import { ConfigStateProvider } from "../context/config.js"; const WITH_LOCAL_STORAGE_CACHE = false; /** @@ -84,11 +85,11 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode { } if (checked.type === "ok") { - return {children} + return {children} } - + return - + } diff --git a/packages/demobank-ui/src/context/config.ts b/packages/demobank-ui/src/context/config.ts new file mode 100644 index 000000000..a2cde18eb --- /dev/null +++ b/packages/demobank-ui/src/context/config.ts @@ -0,0 +1,52 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +import { ComponentChildren, createContext, h, VNode } from "preact"; +import { useContext } from "preact/hooks"; + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +export type Type = Required; + +const initial: Type = { + name: "", + version: "0:0:0", + currency_fraction_digits: 2, + currency_fraction_limit: 2, + fiat_currency: "", + have_cashout: false, +}; +const Context = createContext(initial); + +export const useConfigContext = (): Type => useContext(Context); + +export const ConfigStateProvider = ({ + value, + children, +}: { + value: Type, + children: ComponentChildren; +}): VNode => { + + return h(Context.Provider, { + value, + children, + }); +}; + diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts index bd7edf033..5c55cfade 100644 --- a/packages/demobank-ui/src/declaration.d.ts +++ b/packages/demobank-ui/src/declaration.d.ts @@ -107,9 +107,27 @@ namespace SandboxBackend { name: string; // API version in the form $n:$n:$n version: string; - // Contains ratios and fees related to buying - // and selling the circuit currency. - ratios_and_fees: RatiosAndFees; + // If 'true', the server provides local currency + // conversion support. + // If missing or false, some parts of the API + // are not supported and return 404. + have_cashout?: boolean; + + // Fiat currency. That is the currency in which + // cash-out operations ultimately wire money. + // Only applicable if have_cashout=true. + fiat_currency?: string; + + // How many digits should the amounts be rendered + // with by default. Small capitals should + // be used to render fractions beyond the number + // given here (like on gas stations). + currency_fraction_digits?: number; + + // How many decimal digits an operation can + // have. Wire transfers with more decimal + // digits will not be accepted. + currency_fraction_limit?: number; } interface RatiosAndFees { // Exchange rate to buy the circuit currency from fiat. diff --git a/packages/demobank-ui/src/hooks/config.ts b/packages/demobank-ui/src/hooks/config.ts index bb5134510..a3bd294db 100644 --- a/packages/demobank-ui/src/hooks/config.ts +++ b/packages/demobank-ui/src/hooks/config.ts @@ -18,13 +18,13 @@ async function getConfigState( return result.data; } -type Result = undefined - | { type: "ok", result: SandboxBackend.Config } +export type ConfigResult = undefined + | { type: "ok", result: Required } | { type: "wrong", result: SandboxBackend.Config } | { type: "error", result: HttpError } -export function useConfigState(): Result { - const [checked, setChecked] = useState() +export function useConfigState(): ConfigResult { + const [checked, setChecked] = useState() const { request } = useApiContext(); useEffect(() => { @@ -32,15 +32,23 @@ export function useConfigState(): Result { .then((result) => { const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version) if (r?.compatible) { - setChecked({ type: "ok",result }); + const complete: Required = { + currency_fraction_digits: result.currency_fraction_digits ?? 2, + currency_fraction_limit: result.currency_fraction_limit ?? 2, + fiat_currency: "", + have_cashout: result.have_cashout ?? false, + name: result.name, + version: result.version, + } + setChecked({ type: "ok", result: complete }); } else { - setChecked({ type: "wrong",result }) + setChecked({ type: "wrong", result }) } }) .catch((error: unknown) => { if (error instanceof RequestError) { const result = error.cause - setChecked({ type:"error", result }); + setChecked({ type: "error", result }); } }); }, []); 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" }} /> @@ -322,10 +323,10 @@ function MaybeShowDebugInfo({ info }: { info: any }): VNode { const [settings] = useSettings() if (settings.showDebugInfo) { return 
-    {info}
-
+ {info} + } - return + return } @@ -333,19 +334,19 @@ function StatusBanner(): VNode { const notifs = useNotifications() if (notifs.length === 0) return return
{ - notifs.map(n => { - switch (n.message.type) { - case "error": - return { - n.remove() - }}> - {n.message.description && -
- {n.message.description} -
- } - - {/* + notifs.map(n => { + switch (n.message.type) { + case "error": + return { + n.remove() + }}> + {n.message.description && +
+ {n.message.description} +
+ } + + {/* show debug info {n.message.debug && @@ -353,13 +354,13 @@ function StatusBanner(): VNode { {n.message.debug}
} */} - - case "info": - return { - n.remove(); - }} /> - } - })} + + case "info": + return { + n.remove(); + }} /> + } + })} } @@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode { const result = useAccountDetails(account); if (!result.ok) return
- return
- {Amounts.currencyOf(result.data.balance.amount)} -  {result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} - {Amounts.stringifyValue(result.data.balance.amount)} -
+ return } 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 (
@@ -47,7 +47,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("charge-wallet") }} /> -
💵
+
💵
a Taler wallet @@ -76,7 +76,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("wire-transfer") }} /> -
↔
+
↔
another bank account 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("DE4745461198061"); const [subject, setSubject] = useState("ASD"); @@ -285,7 +287,7 @@ export function PaytoWireTransferForm({
- , ): VNode { + const cfg = useConfigContext() return (
@@ -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); }} />
@@ -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 + {negative ? "-" : undefined} + {value.currency} {normal} {small} + + } + return + {negative ? "-" : undefined} + {value.currency} {str} + +} \ 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({
Amount
- {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)} +
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` ) : ( - {balanceIsDebit ? - : null} - {`${Amounts.stringifyValue( - balance, - )}`} -   - {`${balance.currency}`} + )} 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({
-
- {i18n.str`Total cost`} -
-
- - {i18n.str`Total cashout transfer`} - @@ -88,8 +88,8 @@ export function HistoryItem(props: { tx: Transaction }): VNode { ? i18n.str`Need approval in the Bank` : i18n.str`Exchange is waiting the wire transfer` : tx.withdrawalDetails.type === WithdrawalType.ManualTransfer - ? i18n.str`Exchange is waiting the wire transfer` - : "" //pending but no message + ? i18n.str`Exchange is waiting the wire transfer` + : "" //pending but no message : undefined } /> @@ -267,14 +267,14 @@ function Layout(props: LayoutProps): VNode { style={{ backgroundColor: props.currentState === TransactionMajorState.Pending || - props.currentState === TransactionMajorState.Dialog + props.currentState === TransactionMajorState.Dialog ? "lightcyan" : props.currentState === TransactionMajorState.Failed - ? "#ff000040" - : props.currentState === TransactionMajorState.Aborted || - props.currentState === TransactionMajorState.Aborting - ? "#00000010" - : "inherit", + ? "#ff000040" + : props.currentState === TransactionMajorState.Aborted || + props.currentState === TransactionMajorState.Aborting + ? "#00000010" + : "inherit", alignItems: "center", }} > @@ -353,10 +353,10 @@ function TransactionAmount(props: TransactionAmountProps): VNode { props.currentState !== TransactionMajorState.Done ? "gray" : sign === "+" - ? "darkgreen" - : sign === "-" - ? "darkred" - : undefined, + ? "darkgreen" + : sign === "-" + ? "darkred" + : undefined, }} >