diff --git a/packages/taler-util/src/amounts.ts b/packages/taler-util/src/amounts.ts index 98cd4ad62..d65390a1e 100644 --- a/packages/taler-util/src/amounts.ts +++ b/packages/taler-util/src/amounts.ts @@ -444,4 +444,28 @@ export class Amounts { return s; } + + /** + * Number of fractional digits needed to fully represent the amount + * @param a amount + * @returns + */ + static maxFractionalDigits(a: AmountJson): number { + if (a.fraction === 0) return 0; + if (a.fraction < 0) { + console.error("amount fraction can not be negative", a); + return 0; + } + let i = 0; + let check = true; + let rest = a.fraction; + while (rest > 0 && check) { + check = rest % 10 === 0; + rest = rest / 10; + i++; + } + return amountFractionalLength - i + 1; + } + } + diff --git a/packages/taler-wallet-webextension/src/components/Amount.stories.tsx b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx new file mode 100644 index 000000000..caf35d57e --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx @@ -0,0 +1,114 @@ +/* + 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { styled } from "@linaria/react"; +import { Fragment, h, VNode } from "preact"; +import { Amount } from "./Amount.js"; + +export default { + title: "components/amount", + component: Amount, +}; + +const Table = styled.table` + td { + padding: 4px; + } + td { + border-bottom: 1px solid black; + } +`; + +function ProductTable( + prods: string[], + AmountRender: (p: { value: string; index: number }) => VNode = Amount, +): VNode { + return ( + + + + + + {prods.map((value, i) => { + return ( + + + + + ); + })} +
productprice
p{i} + + {/* */} +
+ ); +} + +export const WithoutFixedSizeDefault = (): VNode => + ProductTable(["ARS:19", "ARS:0.1", "ARS:10.02"]); + +export const WithFixedSizeZero = (): VNode => + ProductTable(["ARS:19", "ARS:0.1", "ARS:10.02"], ({ value }) => { + return ; + }); + +export const WithFixedSizeFour = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value }) => { + return ; + }, + ); + +export const WithFixedSizeFourNegative = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + + ); + }, + ); + +export const WithFixedSizeFourOverflow = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + + ); + }, + ); + +export const WithFixedSizeFourAccounting = (): VNode => + ProductTable( + ["ARS:19", "ARS:0.1", "ARS:10123123.02", "ARS:10.0123", "ARS:10.0123123"], + ({ value, index }) => { + return ( + + ); + }, + ); diff --git a/packages/taler-wallet-webextension/src/components/Amount.tsx b/packages/taler-wallet-webextension/src/components/Amount.tsx index 8b97896bb..09f65473c 100644 --- a/packages/taler-wallet-webextension/src/components/Amount.tsx +++ b/packages/taler-wallet-webextension/src/components/Amount.tsx @@ -13,15 +13,95 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ -import { AmountJson, Amounts, AmountString } from "@gnu-taler/taler-util"; -import { h, VNode, Fragment } from "preact"; +import { + amountFractionalBase, + amountFractionalLength, + AmountJson, + Amounts, + AmountString, +} from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; -export function Amount({ value }: { value: AmountJson | AmountString }): VNode { +export function Amount({ + value, + maxFracSize, + negative, + hideCurrency, + signType = "standard", + signDisplay = "auto", +}: { + negative?: boolean; + value: AmountJson | AmountString; + maxFracSize?: number; + hideCurrency?: boolean; + signType?: "accounting" | "standard"; + signDisplay?: "auto" | "always" | "never" | "exceptZero"; +}): VNode { const aj = Amounts.jsonifyAmount(value); - const amount = Amounts.stringifyValue(aj, 2); + const minFractional = + maxFracSize !== undefined && maxFracSize < 2 ? maxFracSize : 2; + const af = aj.fraction % amountFractionalBase; + let s = ""; + if ((af && maxFracSize) || minFractional > 0) { + s += "."; + let n = af; + for ( + let i = 0; + (maxFracSize === undefined || i < maxFracSize) && + i < amountFractionalLength; + i++ + ) { + if (!n && i >= minFractional) { + break; + } + s = s + Math.floor((n / amountFractionalBase) * 10).toString(); + n = (n * 10) % amountFractionalBase; + } + } + const fontSize = 18; + const letterSpacing = 0; + const mult = 0.7; return ( - - {amount} {aj.currency} - + + + {negative ? (signType === "accounting" ? "(" : "-") : ""} + + {aj.value} + + + {s} + {negative && signType === "accounting" ? ")" : ""} + + + {hideCurrency ? undefined : ( + +   + {aj.currency} + + )} + ); } diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index ef2a9f243..ec5d1e7aa 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -77,12 +77,16 @@ export function BankDetailsByPaytoType({ - + {payto.segwitAddrs.map((addr, i) => ( - + ))}
{payto.targetPath}{Amounts.stringifyValue(amount)} BTC + BTC +
{addr}{Amounts.stringifyValue(min)} BTC + BTC +
diff --git a/packages/taler-wallet-webextension/src/components/index.stories.tsx b/packages/taler-wallet-webextension/src/components/index.stories.tsx index b98606f6f..053b27f79 100644 --- a/packages/taler-wallet-webextension/src/components/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/index.stories.tsx @@ -19,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import * as a1 from "./Banner.stories.js"; + import * as a1 from "./Banner.stories.js"; import * as a2 from "./PendingTransactions.stories.js"; +import * as a3 from "./Amount.stories.js"; -export default [a1, a2]; +export default [a1, a2, a3]; diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx index 04f7515e8..250df7426 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx @@ -78,7 +78,11 @@ export const WithSomeBankAccounts = createExample(TestedComponent, { value: "10:USD", }, cancelHandler: {}, - depositHandler: {}, + depositHandler: { + onClick: async () => { + return; + }, + }, totalFee: Amounts.getZero("USD"), totalToDeposit: Amounts.parseOrThrow("USD:10"), // onCalculateFee: alwaysReturnFeeToOne, diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index a0dbcb3c0..290c5ca24 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -18,6 +18,7 @@ import { AmountJson, Amounts, PaytoUri } from "@gnu-taler/taler-util"; import { DepositGroupFees } from "@gnu-taler/taler-wallet-core/src/operations/deposits"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; +import { Amount } from "../components/Amount.js"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { SelectList } from "../components/SelectList.js"; @@ -361,7 +362,7 @@ export function View({ state }: ViewProps): VNode { ) : ( diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index b49d6cfe7..ae43a7b09 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -428,6 +428,8 @@ export const DepositTalerBank = createExample(TestedComponent, { export const DepositBitcoin = createExample(TestedComponent, { transaction: { ...exampleData.deposit, + amountRaw: "BITCOINBTC:0.0000011", + amountEffective: "BITCOINBTC:0.00000092", targetPaytoUri: "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", }, diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index d1cb72a78..1f195a2bf 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -16,6 +16,7 @@ import { AbsoluteTime, + amountFractionalLength, AmountJson, Amounts, Location, @@ -749,7 +750,7 @@ function PurchaseDetails({ Refunded - + )} @@ -828,17 +829,20 @@ function RefundDetails({ }): VNode { const { i18n } = useTranslationContext(); - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount; + const r = Amounts.parseOrThrow(transaction.amountRaw); + const e = Amounts.parseOrThrow(transaction.amountEffective); + const fee = Amounts.sub(r, e).amount; + + const maxFrac = [r, e, fee] + .map((a) => Amounts.maxFractionalDigits(a)) + .reduce((c, p) => Math.max(c, p), 0); return ( Amount - + @@ -846,7 +850,7 @@ function RefundDetails({ Transaction fees - + )} @@ -858,7 +862,7 @@ function RefundDetails({ Total - + @@ -871,18 +875,20 @@ function DepositDetails({ transaction: TransactionDeposit; }): VNode { const { i18n } = useTranslationContext(); + const r = Amounts.parseOrThrow(transaction.amountRaw); + const e = Amounts.parseOrThrow(transaction.amountEffective); + const fee = Amounts.sub(r, e).amount; - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount; + const maxFrac = [r, e, fee] + .map((a) => Amounts.maxFractionalDigits(a)) + .reduce((c, p) => Math.max(c, p), 0); return ( Amount - + @@ -890,7 +896,7 @@ function DepositDetails({ Transaction fees - + )} @@ -902,7 +908,7 @@ function DepositDetails({ Total transfer - + @@ -915,17 +921,26 @@ function RefreshDetails({ }): VNode { const { i18n } = useTranslationContext(); - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount; + const r = Amounts.parseOrThrow(transaction.amountRaw); + const e = Amounts.parseOrThrow(transaction.amountEffective); + const fee = Amounts.sub(r, e).amount; + + const maxFrac = [r, e, fee] + .map((a) => Amounts.maxFractionalDigits(a)) + .reduce((c, p) => Math.max(c, p), 0); return ( Amount - + + + + + Transaction fees + + @@ -934,9 +949,9 @@ function RefreshDetails({ - Transaction fees + Total - + @@ -946,17 +961,20 @@ function RefreshDetails({ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { const { i18n } = useTranslationContext(); - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount; + const r = Amounts.parseOrThrow(transaction.amountRaw); + const e = Amounts.parseOrThrow(transaction.amountEffective); + const fee = Amounts.sub(r, e).amount; + + const maxFrac = [r, e, fee] + .map((a) => Amounts.maxFractionalDigits(a)) + .reduce((c, p) => Math.max(c, p), 0); return ( Amount - + @@ -964,7 +982,7 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { Transaction fees - + )} @@ -976,7 +994,7 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { Total - + @@ -990,17 +1008,20 @@ function WithdrawDetails({ }): VNode { const { i18n } = useTranslationContext(); - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount; + const r = Amounts.parseOrThrow(transaction.amountRaw); + const e = Amounts.parseOrThrow(transaction.amountEffective); + const fee = Amounts.sub(r, e).amount; + + const maxFrac = [r, e, fee] + .map((a) => Amounts.maxFractionalDigits(a)) + .reduce((c, p) => Math.max(c, p), 0); return ( Withdraw - + @@ -1008,7 +1029,7 @@ function WithdrawDetails({ Transaction fees - + )} @@ -1020,7 +1041,7 @@ function WithdrawDetails({ Total - + @@ -1059,9 +1080,8 @@ function Header({ } + text={} kind={kind} - showSign />