From 2bd6dae00d420d3b17a636c206785f06f2f7ae29 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 11 Apr 2022 11:33:55 -0300 Subject: show amount nicely, into a component --- .../src/components/Amount.tsx | 12 +++++ .../src/components/ErrorMessage.tsx | 2 +- packages/taler-wallet-webextension/src/cta/Pay.tsx | 20 ++++---- .../src/wallet/ManualWithdrawPage.tsx | 2 +- .../src/wallet/ReserveCreated.stories.tsx | 16 +++++-- .../src/wallet/ReserveCreated.tsx | 25 +++++----- .../src/wallet/Transaction.tsx | 55 ++++++++++------------ 7 files changed, 70 insertions(+), 62 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/Amount.tsx (limited to 'packages/taler-wallet-webextension/src') diff --git a/packages/taler-wallet-webextension/src/components/Amount.tsx b/packages/taler-wallet-webextension/src/components/Amount.tsx new file mode 100644 index 000000000..c41f7faf6 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Amount.tsx @@ -0,0 +1,12 @@ +import { AmountJson, Amounts, AmountString } from "@gnu-taler/taler-util"; +import { h, VNode, Fragment } from "preact"; + +export function Amount({ value }: { value: AmountJson | AmountString }): VNode { + const aj = Amounts.jsonifyAmount(value); + const amount = Amounts.stringifyValue(aj, 2); + return ( + + {amount} {aj.currency} + + ); +} diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index f6e2ba2cf..7b62a7355 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -23,7 +23,7 @@ export function ErrorMessage({ description, }: { title: VNode; - description?: string; + description?: string | VNode; }): VNode | null { const [showErrorDetail, setShowErrorDetail] = useState(false); return ( diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 359625999..f2661308c 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -29,6 +29,7 @@ import { AmountJson, AmountLike, Amounts, + AmountString, ConfirmPayResult, ConfirmPayResultDone, ConfirmPayResultType, @@ -41,6 +42,7 @@ import { import { TalerError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; +import { Amount } from "../components/Amount.js"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; @@ -261,7 +263,7 @@ export function PaymentRequestView({
- Pay {amountToString(payStatus.amountEffective)} + Pay {}
@@ -276,8 +278,8 @@ export function PaymentRequestView({ {balance ? ( - Your balance of {amountToString(balance)} is not enough to pay - for this purchase + Your balance of {} is not enough to + pay for this purchase ) : ( @@ -374,14 +376,14 @@ export function PaymentRequestView({ Total to pay} - text={amountToString(payStatus.amountEffective)} + text={} kind="negative" /> )} Purchase amount} - text={amountToString(payStatus.amountRaw)} + text={} kind="neutral" /> {Amounts.isNonZero(totalFees) && ( @@ -389,7 +391,7 @@ export function PaymentRequestView({ Fee} - text={amountToString(totalFees)} + text={} kind="negative" /> @@ -493,9 +495,3 @@ function ProductList({ products }: { products: Product[] }): VNode { ); } - -function amountToString(text: AmountLike): string { - const aj = Amounts.jsonifyAmount(text); - const amount = Amounts.stringifyValue(aj, 2); - return `${amount} ${aj.currency}`; -} diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index 3fbdadee4..a8c6b3c1a 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -85,7 +85,7 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { void; @@ -26,7 +27,6 @@ export interface Props { export function ReserveCreated({ reservePub, paytoURI, - payto, onCancel, exchangeBaseUrl, amount, @@ -34,11 +34,10 @@ export function ReserveCreated({ const { i18n } = useTranslationContext(); if (!paytoURI) { return ( -
- - could not parse payto uri from exchange {payto} - -
+ Could not parse the payto URI} + description={Please check the uri} + /> ); } function TransferDetails(): VNode { @@ -97,7 +96,7 @@ export function ReserveCreated({ return (
} exchangeBaseUrl={exchangeBaseUrl} payto={paytoURI} subject={reservePub} @@ -123,7 +122,7 @@ export function ReserveCreated({

To complete the process you need to wire{` `} - {amountToString(amount)} to the exchange bank account + {} to the exchange bank account

@@ -132,11 +131,11 @@ export function ReserveCreated({

Alternative, you can also scan this QR code or open{" "} - this link if you have a banking app installed - that supports RFC 8905 + this link if you have a + banking app installed that supports RFC 8905

- +