[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 03/06: show amount nicely, into a component
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 03/06: show amount nicely, into a component |
|
Date: |
Mon, 11 Apr 2022 16:36:51 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 2bd6dae00d420d3b17a636c206785f06f2f7ae29
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Apr 11 11:33:55 2022 -0300
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(-)
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 00000000..c41f7faf
--- /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 (
+ <Fragment>
+ {amount} {aj.currency}
+ </Fragment>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index f6e2ba2c..7b62a735 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 35962599..f2661308 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({
<section>
<ButtonSuccess upperCased onClick={onClick}>
<i18n.Translate>
- Pay {amountToString(payStatus.amountEffective)}
+ Pay {<Amount value={payStatus.amountEffective} />}
</i18n.Translate>
</ButtonSuccess>
</section>
@@ -276,8 +278,8 @@ export function PaymentRequestView({
{balance ? (
<WarningBox>
<i18n.Translate>
- Your balance of {amountToString(balance)} is not enough to
pay
- for this purchase
+ Your balance of {<Amount value={balance} />} is not enough to
+ pay for this purchase
</i18n.Translate>
</WarningBox>
) : (
@@ -374,14 +376,14 @@ export function PaymentRequestView({
<Part
big
title={<i18n.Translate>Total to pay</i18n.Translate>}
- text={amountToString(payStatus.amountEffective)}
+ text={<Amount value={payStatus.amountEffective} />}
kind="negative"
/>
)}
<Part
big
title={<i18n.Translate>Purchase amount</i18n.Translate>}
- text={amountToString(payStatus.amountRaw)}
+ text={<Amount value={payStatus.amountRaw} />}
kind="neutral"
/>
{Amounts.isNonZero(totalFees) && (
@@ -389,7 +391,7 @@ export function PaymentRequestView({
<Part
big
title={<i18n.Translate>Fee</i18n.Translate>}
- text={amountToString(totalFees)}
+ text={<Amount value={totalFees} />}
kind="negative"
/>
</Fragment>
@@ -493,9 +495,3 @@ function ProductList({ products }: { products: Product[]
}): VNode {
</Fragment>
);
}
-
-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 3fbdadee..a8c6b3c1 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 {
<ReserveCreated
reservePub={success.response.reservePub}
paytoURI={success.paytoURI}
- payto={success.payto}
+ // payto={success.payto}
exchangeBaseUrl={success.exchangeBaseUrl}
amount={success.amount}
onCancel={onCancel}
diff --git
a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
index 4e5595ef..587e24e9 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
@@ -19,6 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { parsePaytoUri } from "@gnu-taler/taler-util";
import { createExample } from "../test-utils.js";
import { ReserveCreated as TestedComponent } from "./ReserveCreated.js";
@@ -30,8 +31,9 @@ export default {
export const TalerBank = createExample(TestedComponent, {
reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
- payto:
+ paytoURI: parsePaytoUri(
"payto://x-taler-bank/bank.taler:5882/exchangeminator?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+ ),
amount: {
currency: "USD",
value: 10,
@@ -42,8 +44,9 @@ export const TalerBank = createExample(TestedComponent, {
export const IBAN = createExample(TestedComponent, {
reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
- payto:
+ paytoURI: parsePaytoUri(
"payto://iban/ASDQWEASDZXCASDQWE?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+ ),
amount: {
currency: "USD",
value: 10,
@@ -54,8 +57,9 @@ export const IBAN = createExample(TestedComponent, {
export const Bitcoin = createExample(TestedComponent, {
reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
- payto:
+ paytoURI: parsePaytoUri(
"payto://bitcoin/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
+ ),
amount: {
currency: "BTC",
value: 0,
@@ -66,8 +70,9 @@ export const Bitcoin = createExample(TestedComponent, {
export const BitcoinRegTest = createExample(TestedComponent, {
reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
- payto:
+ paytoURI: parsePaytoUri(
"payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
+ ),
amount: {
currency: "BTC",
value: 0,
@@ -77,8 +82,9 @@ export const BitcoinRegTest = createExample(TestedComponent, {
});
export const BitcoinTest = createExample(TestedComponent, {
reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
- payto:
+ paytoURI: parsePaytoUri(
"payto://bitcoin/tb1qw508d6qejxtdg4y5r3zarvary0c5xw7kxpjzsx?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
+ ),
amount: {
currency: "BTC",
value: 0,
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 50ab5175..e656393c 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -3,9 +3,12 @@ import {
Amounts,
PaytoUri,
segwitMinAmount,
+ stringifyPaytoUri,
} from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
+import { Amount } from "../components/Amount.js";
import { BankDetailsByPaytoType } from
"../components/BankDetailsByPaytoType.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
import { QR } from "../components/QR.js";
import {
ButtonDestructive,
@@ -13,11 +16,9 @@ import {
WarningBox,
} from "../components/styled/index.js";
import { useTranslationContext } from "../context/translation.js";
-import { amountToString } from "../utils/index.js";
export interface Props {
reservePub: string;
paytoURI: PaytoUri | undefined;
- payto: string;
exchangeBaseUrl: string;
amount: AmountJson;
onCancel: () => 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 (
- <div>
- <i18n.Translate>
- could not parse payto uri from exchange {payto}
- </i18n.Translate>
- </div>
+ <ErrorMessage
+ title={<i18n.Translate>Could not parse the payto URI</i18n.Translate>}
+ description={<i18n.Translate>Please check the uri</i18n.Translate>}
+ />
);
}
function TransferDetails(): VNode {
@@ -97,7 +96,7 @@ export function ReserveCreated({
return (
<section>
<BankDetailsByPaytoType
- amount={amountToString(amount)}
+ amount={<Amount value={amount} />}
exchangeBaseUrl={exchangeBaseUrl}
payto={paytoURI}
subject={reservePub}
@@ -123,7 +122,7 @@ export function ReserveCreated({
<p>
<i18n.Translate>
To complete the process you need to wire{` `}
- <b>{amountToString(amount)}</b> to the exchange bank account
+ <b>{<Amount value={amount} />}</b> to the exchange bank account
</i18n.Translate>
</p>
</section>
@@ -132,11 +131,11 @@ export function ReserveCreated({
<p>
<i18n.Translate>
Alternative, you can also scan this QR code or open{" "}
- <a href={payto}>this link</a> if you have a banking app installed
- that supports RFC 8905
+ <a href={stringifyPaytoUri(paytoURI)}>this link</a> if you have a
+ banking app installed that supports RFC 8905
</i18n.Translate>
</p>
- <QR text={payto} />
+ <QR text={stringifyPaytoUri(paytoURI)} />
</section>
<footer>
<div />
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 8fe6f9f3..62e40d02 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -28,6 +28,7 @@ import { differenceInSeconds } from "date-fns";
import { ComponentChildren, Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
import emptyImg from "../../static/img/empty.png";
+import { Amount } from "../components/Amount.js";
import { BankDetailsByPaytoType } from
"../components/BankDetailsByPaytoType.js";
import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
import { Loading } from "../components/Loading.js";
@@ -180,12 +181,6 @@ export function TransactionView({
);
}
- function amountToString(text: AmountLike): string {
- const aj = Amounts.jsonifyAmount(text);
- const amount = Amounts.stringifyValue(aj);
- return `${amount} ${aj.currency}`;
- }
-
if (transaction.type === TransactionType.Withdrawal) {
const fee = Amounts.sub(
Amounts.parseOrThrow(transaction.amountRaw),
@@ -229,7 +224,7 @@ export function TransactionView({
WithdrawalType.ManualTransfer ? (
<Fragment>
<BankDetailsByPaytoType
- amount={amountToString(transaction.amountRaw)}
+ amount={<Amount value={transaction.amountRaw} />}
exchangeBaseUrl={transaction.exchangeBaseUrl}
payto={parsePaytoUri(
transaction.withdrawalDetails.exchangePaytoUris[0],
@@ -247,13 +242,13 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total withdrawn</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="positive"
/>
<Part
big
title={<i18n.Translate>Exchange fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
</Fragment>
@@ -284,19 +279,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total withdrawn</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="positive"
/>
<Part
big
title={<i18n.Translate>Chosen amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Exchange fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
</Fragment>
@@ -306,19 +301,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total withdrawn</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="positive"
/>
<Part
big
title={<i18n.Translate>Chosen amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Exchange fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
</Fragment>
@@ -355,19 +350,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total paid</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="negative"
/>
<Part
big
title={<i18n.Translate>Purchase amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
<Part
@@ -441,19 +436,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total send</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Deposit amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="positive"
/>
<Part
big
title={<i18n.Translate>Fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
</TransactionTemplate>
@@ -478,19 +473,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total refresh</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="negative"
/>
<Part
big
title={<i18n.Translate>Refresh amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
</TransactionTemplate>
@@ -515,19 +510,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total tip</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="positive"
/>
<Part
big
title={<i18n.Translate>Received amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
</TransactionTemplate>
@@ -552,19 +547,19 @@ export function TransactionView({
<Part
big
title={<i18n.Translate>Total refund</i18n.Translate>}
- text={amountToString(transaction.amountEffective)}
+ text={<Amount value={transaction.amountEffective} />}
kind="positive"
/>
<Part
big
title={<i18n.Translate>Refund amount</i18n.Translate>}
- text={amountToString(transaction.amountRaw)}
+ text={<Amount value={transaction.amountRaw} />}
kind="neutral"
/>
<Part
big
title={<i18n.Translate>Fee</i18n.Translate>}
- text={amountToString(fee)}
+ text={<Amount value={fee} />}
kind="negative"
/>
<Part
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-wallet-core] branch master updated (fae6c420 -> ccb50c63), gnunet, 2022/04/11
- [taler-wallet-core] 04/06: terms of service stories into its own scenarios (removed from withdraw), gnunet, 2022/04/11
- [taler-wallet-core] 02/06: fix ref for copy and paste, gnunet, 2022/04/11
- [taler-wallet-core] 05/06: missing index file, gnunet, 2022/04/11
- [taler-wallet-core] 01/06: add payto stringify, gnunet, 2022/04/11
- [taler-wallet-core] 03/06: show amount nicely, into a component,
gnunet <=
- [taler-wallet-core] 06/06: new test api to test hooks rendering iteration, testing state of withdraw page, gnunet, 2022/04/11