adding missing i18n

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

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

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,

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

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>

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 {

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>

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>

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;

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";

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>

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&apos;t have auditors</dd>
+            <dd style={{ color: "red" }}>
+              <i18n.Translate>Doesn&apos;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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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&apos;t have auditors</dd>
+            <dd style={{ color: "red" }}>
+              <i18n.Translate>Doesn&apos;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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

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>

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

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}

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>