diff options
Diffstat (limited to 'packages')
16 files changed, 427 insertions, 177 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 609c82e10..3a15cf1fb 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -54,7 +54,9 @@ export function BankDetailsByPaytoType({ borderRadius: 4, }} > - <p style={{ marginTop: 0 }}>Bitcoin transfer details</p> + <p style={{ marginTop: 0 }}> + <i18n.Translate>Bitcoin transfer details</i18n.Translate> + </p> <p> <i18n.Translate> The exchange need a transaction with 3 output, one output is the @@ -140,7 +142,9 @@ export function BankDetailsByPaytoType({ borderRadius: 4, }} > - <p style={{ marginTop: 0 }}>Bank transfer details</p> + <p style={{ marginTop: 0 }}> + <i18n.Translate>Bank transfer details</i18n.Translate> + </p> <table> {accountPart} <Row diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 8d4121277..f95647d42 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -22,7 +22,7 @@ import { Grid } from "../mui/Grid.js"; import { Paper } from "../mui/Paper.js"; interface Props extends JSX.HTMLAttributes<HTMLDivElement> { - title?: string; + titleHead?: VNode; elements: { icon?: VNode; description: VNode; @@ -34,15 +34,18 @@ interface Props extends JSX.HTMLAttributes<HTMLDivElement> { }; } -export function Banner({ title, elements, confirm, ...rest }: Props): VNode { +export function Banner({ + titleHead, + elements, + confirm, + ...rest +}: Props): VNode { return ( <Fragment> <Paper elevation={0} {...rest}> - {title && ( + {titleHead && ( <Grid container> - <Grid item> - <Typography>{title}</Typography> - </Grid> + <Grid item>{titleHead}</Grid> </Grid> )} <Grid container columns={1}> diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index 05995395b..e9688da21 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -21,6 +21,7 @@ import { } from "@gnu-taler/taler-util"; import { Fragment, h, JSX, VNode } from "preact"; import { useEffect } from "preact/hooks"; +import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Avatar } from "../mui/Avatar.js"; import { Typography } from "../mui/Typography.js"; @@ -67,9 +68,10 @@ export function PendingTransactionsView({ goToTransaction: (id: string) => Promise<void>; transactions: Transaction[]; }): VNode { + const { i18n } = useTranslationContext(); return ( <Banner - title="PENDING OPERATIONS" + titleHead={<i18n.Translate>PENDING OPERATIONS</i18n.Translate>} style={{ backgroundColor: "lightcyan", maxHeight: 150, diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx index b7d8376bd..7c1d2c6fc 100644 --- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx +++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx @@ -172,39 +172,54 @@ export function HiddenView({ showHandler }: States.Hidden): VNode { export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { const createdAt = AbsoluteTime.fromTimestamp(contractTerms.timestamp); + const { i18n } = useTranslationContext(); return ( <Modal title="Full detail" onClose={hideHandler}> <div style={{ overflowY: "auto", height: "95%", padding: 5 }}> <ContractTermsTable> <tr> - <td>Order Id</td> + <td> + <i18n.Translate>Order Id</i18n.Translate> + </td> <td>{contractTerms.orderId}</td> </tr> <tr> - <td>Summary</td> + <td> + <i18n.Translate>Summary</i18n.Translate> + </td> <td>{contractTerms.summary}</td> </tr> <tr> - <td>Amount</td> + <td> + <i18n.Translate>Amount</i18n.Translate> + </td> <td> <Amount value={contractTerms.amount} /> </td> </tr> <tr> - <td>Merchant name</td> + <td> + <i18n.Translate>Merchant name</i18n.Translate> + </td> <td>{contractTerms.merchant.name}</td> </tr> <tr> - <td>Merchant jurisdiction</td> + <td> + <i18n.Translate>Merchant jurisdiction</i18n.Translate> + </td> <td>{locationAsText(contractTerms.merchant.jurisdiction)}</td> </tr> <tr> - <td>Merchant address</td> + <td> + <i18n.Translate>Merchant address</i18n.Translate> + </td> <td>{locationAsText(contractTerms.merchant.address)}</td> </tr> <tr> - <td>Merchant logo</td> + <td> + <i18n.Translate>Merchant logo</i18n.Translate> + </td> <td> <div> <img @@ -215,15 +230,21 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Merchant website</td> + <td> + <i18n.Translate>Merchant website</i18n.Translate> + </td> <td>{contractTerms.merchant.website}</td> </tr> <tr> - <td>Merchant email</td> + <td> + <i18n.Translate>Merchant email</i18n.Translate> + </td> <td>{contractTerms.merchant.email}</td> </tr> <tr> - <td>Merchant public key</td> + <td> + <i18n.Translate>Merchant public key</i18n.Translate> + </td> <td> <span title={contractTerms.merchantPub}> {contractTerms.merchantPub.substring(0, 6)}... @@ -231,7 +252,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Delivery date</td> + <td> + <i18n.Translate>Delivery date</i18n.Translate> + </td> <td> {contractTerms.deliveryDate && ( <Time @@ -244,11 +267,15 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Delivery location</td> + <td> + <i18n.Translate>Delivery location</i18n.Translate> + </td> <td>{locationAsText(contractTerms.deliveryLocation)}</td> </tr> <tr> - <td>Products</td> + <td> + <i18n.Translate>Products</i18n.Translate> + </td> <td> {!contractTerms.products || contractTerms.products.length === 0 ? "none" @@ -258,7 +285,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Created at</td> + <td> + <i18n.Translate>Created at</i18n.Translate> + </td> <td> {contractTerms.timestamp && ( <Time @@ -271,7 +300,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Refund deadline</td> + <td> + <i18n.Translate>Refund deadline</i18n.Translate> + </td> <td> { <Time @@ -284,7 +315,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Auto refund</td> + <td> + <i18n.Translate>Auto refund</i18n.Translate> + </td> <td> { <Time @@ -302,7 +335,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Pay deadline</td> + <td> + <i18n.Translate>Pay deadline</i18n.Translate> + </td> <td> { <Time @@ -315,11 +350,15 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Fulfillment URL</td> + <td> + <i18n.Translate>Fulfillment URL</i18n.Translate> + </td> <td>{contractTerms.fulfillmentUrl}</td> </tr> <tr> - <td>Fulfillment message</td> + <td> + <i18n.Translate>Fulfillment message</i18n.Translate> + </td> <td>{contractTerms.fulfillmentMessage}</td> </tr> {/* <tr> @@ -327,19 +366,25 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { <td>{contractTerms.public_reorder_url}</td> </tr> */} <tr> - <td>Max deposit fee</td> + <td> + <i18n.Translate>Max deposit fee</i18n.Translate> + </td> <td> <Amount value={contractTerms.maxDepositFee} /> </td> </tr> <tr> - <td>Max fee</td> + <td> + <i18n.Translate>Max fee</i18n.Translate> + </td> <td> <Amount value={contractTerms.maxWireFee} /> </td> </tr> <tr> - <td>Minimum age</td> + <td> + <i18n.Translate>Minimum age</i18n.Translate> + </td> <td>{contractTerms.minimumAge}</td> </tr> {/* <tr> @@ -349,11 +394,15 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> */} <tr> - <td>Wire fee amortization</td> + <td> + <i18n.Translate>Wire fee amortization</i18n.Translate> + </td> <td>{contractTerms.wireFeeAmortization}</td> </tr> <tr> - <td>Auditors</td> + <td> + <i18n.Translate>Auditors</i18n.Translate> + </td> <td> {(contractTerms.allowedAuditors || []).map((e) => ( <Fragment key={e.auditorPub}> @@ -366,7 +415,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Exchanges</td> + <td> + <i18n.Translate>Exchanges</i18n.Translate> + </td> <td> {(contractTerms.allowedExchanges || []).map((e) => ( <Fragment key={e.exchangePub}> diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx index 18e593283..c5ed9a4cf 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx @@ -58,12 +58,16 @@ export function CreatedView({ <i18n.Translate>Digital cash invoice</i18n.Translate> </SubTitle> <section> - <p>Show this QR to pay the invoice</p> + <p> + <i18n.Translate>Show this QR to pay the invoice</i18n.Translate> + </p> <QR text={talerUri} /> </section> <section> or - <Button onClick={copyToClipboard.onClick}>Copy the invoice URI</Button> + <Button onClick={copyToClipboard.onClick}> + <i18n.Translate>Copy the invoice URI</i18n.Translate> + </Button> </section> <section> <Link upperCased onClick={cancel.onClick}> @@ -155,7 +159,7 @@ export function ReadyView({ variant="contained" color="success" > - Create + <i18n.Translate>Create</i18n.Translate> </Button> </section> <section> diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx index 21b666abd..8484680bf 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx @@ -14,23 +14,16 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Amounts, PreparePayResultType } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { Amount } from "../../components/Amount.js"; import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; import { LoadingError } from "../../components/LoadingError.js"; import { LogoHeader } from "../../components/LogoHeader.js"; import { Part } from "../../components/Part.js"; -import { - Link, - SubTitle, - WalletAction, - WarningBox, -} from "../../components/styled/index.js"; +import { Link, SubTitle, WalletAction } from "../../components/styled/index.js"; import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; -import { Button } from "../../mui/Button.js"; -import { ButtonsSection, PayWithMobile } from "../Payment/views.js"; +import { ButtonsSection } from "../Payment/views.js"; import { State } from "./index.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx index 51121d4ca..433980621 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx @@ -116,14 +116,16 @@ export function ReadyView({ /> </section> <section> - <p>How do you want to transfer?</p> + <p> + <i18n.Translate>How do you want to transfer?</i18n.Translate> + </p> <Button disabled={invalid} onClick={create.onClick} variant="contained" color="success" > - Create + <i18n.Translate>Create</i18n.Translate> </Button> </section> <section> diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx index 161296b97..7d2e15726 100644 --- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx +++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -15,11 +15,11 @@ */ import { css } from "@linaria/core"; import { Fragment, h, VNode } from "preact"; +import { useTranslationContext } from "../context/translation.js"; import { Alert } from "../mui/Alert.js"; import { Button } from "../mui/Button.js"; import { ButtonHandler } from "../mui/handlers.js"; import { Paper } from "../mui/Paper.js"; -import { Typography } from "../mui/Typography.js"; const margin = css` margin: 1em; @@ -30,6 +30,7 @@ export function NoBalanceHelp({ }: { goToWalletManualWithdraw: ButtonHandler; }): VNode { + const { i18n } = useTranslationContext(); return ( <Paper class={margin}> <Alert title="Your wallet is empty." severity="info"> @@ -39,7 +40,7 @@ export function NoBalanceHelp({ variant="outlined" onClick={goToWalletManualWithdraw.onClick} > - <Typography>Get digital cash</Typography> + <i18n.Translate>Get digital cash</i18n.Translate> </Button> </Alert> </Paper> diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx index 097ed529d..3eccad93e 100644 --- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx +++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx @@ -21,14 +21,10 @@ import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { platform } from "../platform/api.js"; -import { - ButtonPrimary, - ButtonSuccess, - Title, -} from "../components/styled/index.js"; +import { Title } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { Button } from "../mui/Button.js"; +import { platform } from "../platform/api.js"; export interface Props { url: string; diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index d67fa413a..0cd375b7c 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -18,7 +18,6 @@ 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"; diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx index fa1a606f7..3143aafa1 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx @@ -329,14 +329,16 @@ export function DestinationSelectionGetCash({ }} /> <Button onClick={async () => setCurrency(undefined)}> - Change currency + <i18n.Translate>Change currency</i18n.Translate> </Button> </Grid> <Grid container spacing={1} columns={1}> {previous.length > 0 ? ( <Fragment> - <p>Use previous origins:</p> + <p> + <i18n.Translate>Use previous origins:</i18n.Translate> + </p> <Grid item xs={1}> <Paper style={{ padding: 8 }}> <ContactTable> @@ -354,35 +356,45 @@ export function DestinationSelectionGetCash({ ) : undefined} {previous.length > 0 ? ( <Grid item> - <p>Or specify a new origin for the money</p> + <p> + <i18n.Translate> + Or specify the origin of the money + </i18n.Translate> + </p> </Grid> ) : ( <Grid item> - <p>Specify a origin for the money</p> + <p> + <i18n.Translate>Specify the origin of the money</i18n.Translate> + </p> </Grid> )} <Grid item container columns={2} spacing={1}> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <p>From my bank account</p> + <p> + <i18n.Translate>From my bank account</i18n.Translate> + </p> <Button disabled={invalid} onClick={async () => goToWalletManualWithdraw(currencyAndAmount) } > - Withdraw + <i18n.Translate>Withdraw</i18n.Translate> </Button> </Paper> </Grid> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <p>From another wallet</p> + <p> + <i18n.Translate>From another wallet</i18n.Translate> + </p> <Button disabled={invalid} onClick={async () => goToWalletWalletInvoice(currencyAndAmount)} > - Invoice + <i18n.Translate>Invoice</i18n.Translate> </Button> </Paper> </Grid> @@ -428,7 +440,11 @@ export function DestinationSelectionSendCash({ const previous = previous1; if (!currency) { - return <div>currency not provided</div>; + return ( + <div> + <i18n.Translate>currency not provided</i18n.Translate> + </div> + ); } const currencyAndAmount = `${currency}:${amount}`; const parsedAmount = Amounts.parse(currencyAndAmount); @@ -459,7 +475,9 @@ export function DestinationSelectionSendCash({ <Grid container spacing={1} columns={1}> {previous.length > 0 ? ( <Fragment> - <p>Use previous destinations:</p> + <p> + <i18n.Translate>Use previous destinations:</i18n.Translate> + </p> <Grid item xs={1}> <Paper style={{ padding: 8 }}> <ContactTable> @@ -477,33 +495,45 @@ export function DestinationSelectionSendCash({ ) : undefined} {previous.length > 0 ? ( <Grid item> - <p>Or specify a new destination for the money</p> + <p> + <i18n.Translate> + Or specify the destination of the money + </i18n.Translate> + </p> </Grid> ) : ( <Grid item> - <p>Specify a destination for the money</p> + <p> + <i18n.Translate> + Specify the destination of the money + </i18n.Translate> + </p> </Grid> )} <Grid item container columns={2} spacing={1}> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <p>To my bank account</p> + <p> + <i18n.Translate>To my bank account</i18n.Translate> + </p> <Button disabled={invalid} onClick={async () => goToWalletBankDeposit(currencyAndAmount)} > - Deposit + <i18n.Translate>Deposit</i18n.Translate> </Button> </Paper> </Grid> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <p>To another wallet</p> + <p> + <i18n.Translate>To another wallet</i18n.Translate> + </p> <Button disabled={invalid} onClick={async () => goToWalletWalletSend(currencyAndAmount)} > - Send + <i18n.Translate>Send</i18n.Translate> </Button> </Paper> </Grid> diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index a6bd2e7dc..4cd90700f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -114,7 +114,11 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function NoExchangesView(state: State.NoExchanges): VNode { const { i18n } = useTranslationContext(); - return <div>no exchanges</div>; + return ( + <div> + <i18n.Translate>no exchanges</i18n.Translate> + </div> + ); } export function ComparingView({ @@ -157,19 +161,23 @@ export function ComparingView({ </p> <ButtonGroup> <Button variant="outlined" onClick={onReset.onClick}> - Reset + <i18n.Translate>Reset</i18n.Translate> </Button> <Button variant="contained" onClick={onSelect.onClick}> - Use this exchange + <i18n.Translate>Use this exchange</i18n.Translate> </Button> </ButtonGroup> </div> </section> <section> <dl> - <dt>Auditors</dt> + <dt> + <i18n.Translate>Auditors</i18n.Translate> + </dt> {selected.auditors.length === 0 ? ( - <dd style={{ color: "red" }}>Doesn't have auditors</dd> + <dd style={{ color: "red" }}> + <i18n.Translate>Doesn't have auditors</i18n.Translate> + </dd> ) : ( selected.auditors.map((a) => { <dd>{a.auditor_url}</dd>; @@ -178,63 +186,99 @@ export function ComparingView({ </dl> <table> <tr> - <td>currency</td> + <td> + <i18n.Translate>currency</i18n.Translate> + </td> <td>{selected.currency}</td> </tr> </table> </section> <section> - <h2>Operations</h2> - <p>Deposits</p> + <h2> + <i18n.Translate>Operations</i18n.Translate> + </h2> + <p> + <i18n.Translate>Deposits</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> <RenderFeePairByValue list={pairTimeline.deposit} /> </tbody> </FeeDescriptionTable> - <p>Withdrawals</p> + <p> + <i18n.Translate>Withdrawals</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> <RenderFeePairByValue list={pairTimeline.withdraw} /> </tbody> </FeeDescriptionTable> - <p>Refunds</p> + <p> + <i18n.Translate>Refunds</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> <RenderFeePairByValue list={pairTimeline.refund} /> </tbody> </FeeDescriptionTable>{" "} - <p>Refresh</p> + <p> + <i18n.Translate>Refresh</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> @@ -246,8 +290,12 @@ export function ComparingView({ <table> <thead> <tr> - <td>Wallet operations</td> - <td>Fee</td> + <td> + <i18n.Translate>Wallet operations</i18n.Translate> + </td> + <td> + <i18n.Translate>Fee</i18n.Translate> + </td> </tr> </thead> <tbody> @@ -331,7 +379,7 @@ export function ReadyView({ </Input> </p> <Button variant="outlined" onClick={onClose.onClick}> - Close + <i18n.Translate>Close</i18n.Translate> </Button> </div> </section> @@ -339,7 +387,9 @@ export function ReadyView({ <dl> <dt>Auditors</dt> {selected.auditors.length === 0 ? ( - <dd style={{ color: "red" }}>Doesn't have auditors</dd> + <dd style={{ color: "red" }}> + <i18n.Translate>Doesn't have auditors</i18n.Translate> + </dd> ) : ( selected.auditors.map((a) => { <dd>{a.auditor_url}</dd>; @@ -348,63 +398,99 @@ export function ReadyView({ </dl> <table> <tr> - <td>currency</td> + <td> + <i18n.Translate>currency</i18n.Translate> + </td> <td>{selected.currency}</td> </tr> </table> </section> <section> - <h2>Operations</h2> - <p>Deposits</p> + <h2> + <i18n.Translate>Operations</i18n.Translate> + </h2> + <p> + <i18n.Translate>Deposits</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> <RenderFeeDescriptionByValue first={timeline.deposit} /> </tbody> </FeeDescriptionTable> - <p>Withdrawals</p> + <p> + <i18n.Translate>Withdrawals</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> <RenderFeeDescriptionByValue first={timeline.withdraw} /> </tbody> </FeeDescriptionTable> - <p>Refunds</p> + <p> + <i18n.Translate>Refunds</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> <RenderFeeDescriptionByValue first={timeline.refund} /> </tbody> </FeeDescriptionTable>{" "} - <p>Refresh</p> + <p> + <i18n.Translate>Refresh</i18n.Translate> + </p> <FeeDescriptionTable> <thead> <tr> <th> </th> - <th>Denomination</th> - <th class="fee">Fee</th> - <th>Until</th> + <th> + <i18n.Translate>Denomination</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Fee</i18n.Translate> + </th> + <th> + <i18n.Translate>Until</i18n.Translate> + </th> </tr> </thead> <tbody> @@ -416,8 +502,12 @@ export function ReadyView({ <table> <thead> <tr> - <td>Wallet operations</td> - <td>Fee</td> + <td> + <i18n.Translate>Wallet operations</i18n.Translate> + </td> + <td> + <i18n.Translate>Fee</i18n.Translate> + </td> </tr> </thead> <tbody> diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index e885a216d..6a8362ddb 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -231,7 +231,9 @@ export function HistoryView({ </section> {datesWithTransaction.length === 0 ? ( <section> - <i18n.Translate>There is no history for this currency</i18n.Translate> + <i18n.Translate> + Your transaction history is empty for this currency. + </i18n.Translate> </section> ) : ( <section> diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx index c574050e0..06897338d 100644 --- a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx +++ b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx @@ -19,6 +19,7 @@ import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { Ref, useEffect, useRef, useState } from "preact/hooks"; import QrScanner from "qr-scanner"; +import { useTranslationContext } from "../context/translation.js"; import { Alert } from "../mui/Alert.js"; import { Button } from "../mui/Button.js"; import { TextField } from "../mui/TextField.js"; @@ -49,6 +50,7 @@ export function QrReaderPage({ onDetected }: Props): VNode { const qrScanner = useRef<QrScanner | null>(null); const [value, onChange] = useState(""); const [active, setActive] = useState(false); + const { i18n } = useTranslationContext(); function start(): void { qrScanner.current!.start(); @@ -96,14 +98,17 @@ export function QrReaderPage({ onDetected }: Props): VNode { }, []); const isValid = check(value); - return ( <Container> {/* <InputFile onChange={(f) => scanImage(imageRef, f)}> Read QR from file </InputFile> <div ref={imageRef} /> */} - <h1>Scan a QR code or enter taler:// URI below</h1> + <h1> + <i18n.Translate> + Scan a QR code or enter taler:// URI below + </i18n.Translate> + </h1> <QrVideo ref={videoRef} /> <TextField label="Taler URI" @@ -114,16 +119,18 @@ export function QrReaderPage({ onDetected }: Props): VNode { /> {isValid && ( <Button variant="contained" onClick={async () => onDetected(value)}> - Open + <i18n.Translate>Open/</i18n.Translate> </Button> )} {!active && !isValid && ( <Fragment> <Alert severity="error"> - URI is not valid. Taler URI should start with `taler://` + <i18n.Translate> + URI is not valid. Taler URI should start with `taler://` + </i18n.Translate> </Alert> <Button variant="contained" onClick={async () => start()}> - Try another + <i18n.Translate>Try another</i18n.Translate> </Button> </Fragment> )} diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index 5219bbb38..28ee229eb 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -231,13 +231,15 @@ export function SettingsView({ </LinkPrimary> </div> - <SubTitle>Troubleshooting</SubTitle> + <SubTitle> + <i18n.Translate>Troubleshooting</i18n.Translate> + </SubTitle> <Checkbox label={<i18n.Translate>Developer mode</i18n.Translate>} name="devMode" description={ <i18n.Translate> - (More options and information useful for debugging) + More options and information useful for debugging </i18n.Translate> } enabled={developerMode} diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index c1f5861e8..3d2a16e8f 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -385,21 +385,25 @@ export function TransactionView({ return ( <tr key={i}> <td> - {<Amount value={r.amountEffective} />}{" "} - <a - href={Pages.balanceTransaction({ - tid: r.transactionId, - })} - > - was refunded - </a>{" "} - on{" "} - { - <Time - timestamp={AbsoluteTime.fromTimestamp(r.timestamp)} - format="dd MMMM yyyy" - /> - } + <i18n.Translate> + {<Amount value={r.amountEffective} />}{" "} + <a + href={Pages.balanceTransaction({ + tid: r.transactionId, + })} + > + was refunded + </a>{" "} + on{" "} + { + <Time + timestamp={AbsoluteTime.fromTimestamp( + r.timestamp, + )} + format="dd MMMM yyyy" + /> + } + </i18n.Translate> </td> </tr> ); @@ -588,16 +592,24 @@ export function TransactionView({ return ( <div> <QR text={text} /> - <Button onClick={copy}>copy</Button> - <Button onClick={toggle}>hide qr</Button> + <Button onClick={copy}> + <i18n.Translate>copy</i18n.Translate> + </Button> + <Button onClick={toggle}> + <i18n.Translate>hide qr</i18n.Translate> + </Button> </div> ); } return ( <div> <div>{text.substring(0, 64)}...</div> - <Button onClick={copy}>copy</Button> - <Button onClick={toggle}>show qr</Button> + <Button onClick={copy}> + <i18n.Translate>copy</i18n.Translate> + </Button> + <Button onClick={toggle}> + <i18n.Translate>show qr</i18n.Translate> + </Button> </div> ); } @@ -612,7 +624,7 @@ export function TransactionView({ total={total} kind="positive" > - Invoice + <i18n.Translate>Invoice</i18n.Translate> </Header> {transaction.info.summary ? ( @@ -659,7 +671,7 @@ export function TransactionView({ total={total} kind="negative" > - Invoice + <i18n.Translate>Invoice</i18n.Translate> </Header> {transaction.info.summary ? ( @@ -698,7 +710,7 @@ export function TransactionView({ total={total} kind="negative" > - Transfer + <i18n.Translate>Transfer</i18n.Translate> </Header> {transaction.info.summary ? ( @@ -745,7 +757,7 @@ export function TransactionView({ total={total} kind="positive" > - Transfer + <i18n.Translate>Transfer</i18n.Translate> </Header> {transaction.info.summary ? ( @@ -922,7 +934,9 @@ function DeliveryDetails({ {date && ( <Fragment> <tr> - <td>Date</td> + <td> + <i18n.Translate>Date</i18n.Translate> + </td> <td> <Time timestamp={AbsoluteTime.fromTimestamp(date)} @@ -965,7 +979,9 @@ export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode { return ( <PurchaseDetailsTable> <tr> - <td>Invoice</td> + <td> + <i18n.Translate>Invoice</i18n.Translate> + </td> <td> <Amount value={amount.raw} maxFracSize={maxFrac} /> </td> @@ -973,7 +989,9 @@ export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode { {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -985,7 +1003,9 @@ export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode { </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={amount.effective} maxFracSize={maxFrac} /> </td> @@ -1006,7 +1026,9 @@ export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode { return ( <PurchaseDetailsTable> <tr> - <td>Transfer</td> + <td> + <i18n.Translate>Transfer</i18n.Translate> + </td> <td> <Amount value={amount.raw} maxFracSize={maxFrac} /> </td> @@ -1014,7 +1036,9 @@ export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode { {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -1026,7 +1050,9 @@ export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode { </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={amount.effective} maxFracSize={maxFrac} /> </td> @@ -1047,7 +1073,9 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { return ( <PurchaseDetailsTable> <tr> - <td>Withdraw</td> + <td> + <i18n.Translate>Withdraw</i18n.Translate> + </td> <td> <Amount value={amount.raw} maxFracSize={maxFrac} /> </td> @@ -1055,7 +1083,9 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -1067,7 +1097,9 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={amount.effective} maxFracSize={maxFrac} /> </td> @@ -1113,7 +1145,9 @@ export function PurchaseDetails({ return ( <PurchaseDetailsTable> <tr> - <td>Price</td> + <td> + <i18n.Translate>Price</i18n.Translate> + </td> <td> <Amount value={price.raw} /> </td> @@ -1121,7 +1155,9 @@ export function PurchaseDetails({ {refund && Amounts.isNonZero(refund.raw) && ( <tr> - <td>Refunded</td> + <td> + <i18n.Translate>Refunded</i18n.Translate> + </td> <td> <Amount value={refund.raw} negative /> </td> @@ -1129,7 +1165,9 @@ export function PurchaseDetails({ )} {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} /> </td> @@ -1141,7 +1179,9 @@ export function PurchaseDetails({ </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={total} /> </td> @@ -1218,7 +1258,9 @@ function RefundDetails({ return ( <PurchaseDetailsTable> <tr> - <td>Amount</td> + <td> + <i18n.Translate>Amount</i18n.Translate> + </td> <td> <Amount value={transaction.amountRaw} maxFracSize={maxFrac} /> </td> @@ -1226,7 +1268,9 @@ function RefundDetails({ {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -1238,7 +1282,9 @@ function RefundDetails({ </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={transaction.amountEffective} maxFracSize={maxFrac} /> </td> @@ -1264,7 +1310,9 @@ function DepositDetails({ return ( <PurchaseDetailsTable> <tr> - <td>Amount</td> + <td> + <i18n.Translate>Amount</i18n.Translate> + </td> <td> <Amount value={transaction.amountRaw} maxFracSize={maxFrac} /> </td> @@ -1272,7 +1320,9 @@ function DepositDetails({ {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -1284,7 +1334,9 @@ function DepositDetails({ </td> </tr> <tr> - <td>Total transfer</td> + <td> + <i18n.Translate>Total transfer</i18n.Translate> + </td> <td> <Amount value={transaction.amountEffective} maxFracSize={maxFrac} /> </td> @@ -1310,13 +1362,17 @@ function RefreshDetails({ return ( <PurchaseDetailsTable> <tr> - <td>Amount</td> + <td> + <i18n.Translate>Amount</i18n.Translate> + </td> <td> <Amount value={transaction.amountRaw} maxFracSize={maxFrac} /> </td> </tr> <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -1327,7 +1383,9 @@ function RefreshDetails({ </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={transaction.amountEffective} maxFracSize={maxFrac} /> </td> @@ -1350,7 +1408,9 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { return ( <PurchaseDetailsTable> <tr> - <td>Amount</td> + <td> + <i18n.Translate>Amount</i18n.Translate> + </td> <td> <Amount value={transaction.amountRaw} maxFracSize={maxFrac} /> </td> @@ -1358,7 +1418,9 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { {Amounts.isNonZero(fee) && ( <tr> - <td>Transaction fees</td> + <td> + <i18n.Translate>Transaction fees</i18n.Translate> + </td> <td> <Amount value={fee} negative maxFracSize={maxFrac} /> </td> @@ -1370,7 +1432,9 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { </td> </tr> <tr> - <td>Total</td> + <td> + <i18n.Translate>Total</i18n.Translate> + </td> <td> <Amount value={transaction.amountEffective} maxFracSize={maxFrac} /> </td> |