diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
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 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 ( + <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 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({ <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 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 { <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 4e5595ef6..587e24e98 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 50ab5175f..e656393ca 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 8fe6f9f32..62e40d029 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 |