taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

show amount nicely, into a component

Browse Source
This commit is contained in:
Sebastian 2022-04-11 11:33:55 -03:00
parent df7c249c95
commit 2bd6dae00d
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
7 changed files with 70 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/taler-wallet-webextension/src/components/Amount.tsx Normal file
View File

@ -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>
);
}

2
packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
View File

@ -23,7 +23,7 @@ export function ErrorMessage({
description,
}: {
title: VNode;
description?: string;
description?: string | VNode;
}): VNode | null {
const [showErrorDetail, setShowErrorDetail] = useState(false);
return (

20
packages/taler-wallet-webextension/src/cta/Pay.tsx
View File

@ -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}`;
}

2
packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
View File

@ -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}

16
packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
View File

@ -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,

25
packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
View File

@ -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 />

55
packages/taler-wallet-webextension/src/wallet/Transaction.tsx
View File

@ -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