add i18n where was missing

14 files changed, 511 insertions, 245 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index d4158973e..d47803212 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
@@ -1,4 +1,8 @@
-import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
+import {
+  classifyTalerUri,
+  TalerUriType,
+  Translate,
+} from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button, ButtonSuccess, InputWithLabel } from "../components/styled";
@@ -8,20 +12,20 @@ export interface Props {
   onCancel: () => void;
 }
 
-function buttonLabelByTalerType(type: TalerUriType): string {
+function buttonLabelByTalerType(type: TalerUriType): VNode {
   switch (type) {
     case TalerUriType.TalerNotifyReserve:
-      return "Open reserve page";
+      return <Translate>Open reserve page</Translate>;
     case TalerUriType.TalerPay:
-      return "Open pay page";
+      return <Translate>Open pay page</Translate>;
     case TalerUriType.TalerRefund:
-      return "Open refund page";
+      return <Translate>Open refund page</Translate>;
     case TalerUriType.TalerTip:
-      return "Open tip page";
+      return <Translate>Open tip page</Translate>;
     case TalerUriType.TalerWithdraw:
-      return "Open withdraw page";
+      return <Translate>Open withdraw page</Translate>;
   }
-  return "";
+  return <Fragment />;
 }
 
 export function AddNewActionView({ onCancel }: Props): VNode {
@@ -47,7 +51,9 @@ export function AddNewActionView({ onCancel }: Props): VNode {
         </InputWithLabel>
       </section>
       <footer>
-        <Button onClick={onCancel}>Back</Button>
+        <Button onClick={onCancel}>
+          <Translate>Back</Translate>
+        </Button>
         {uriType !== TalerUriType.Unknown && (
           <ButtonSuccess
             onClick={() => {
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index daea9e3bd..73fff6e85 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { i18n, Timestamp } from "@gnu-taler/taler-util";
+import { i18n, Timestamp, Translate } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentPaid,
@@ -71,7 +71,10 @@ export function BackupPage({ onAddProvider }: Props): VNode {
   }
   if (status.hasError) {
     return (
-      <LoadingError title="Could not load backup providers" error={status} />
+      <LoadingError
+        title={<Translate>Could not load backup providers</Translate>}
+        error={status}
+      />
     );
   }
 
@@ -122,9 +125,11 @@ export function BackupView({
         ))}
         {!providers.length && (
           <Centered style={{ marginTop: 100 }}>
-            <BoldLight>No backup providers configured</BoldLight>
+            <BoldLight>
+              <Translate>No backup providers configured</Translate>
+            </BoldLight>
             <ButtonSuccess onClick={onAddProvider}>
-              <i18n.Translate>Add provider</i18n.Translate>
+              <Translate>Add provider</Translate>
             </ButtonSuccess>
           </Centered>
         )}
@@ -135,12 +140,14 @@ export function BackupView({
           <div>
             <ButtonPrimary onClick={onSyncAll}>
               {providers.length > 1 ? (
-                <i18n.Translate>Sync all backups</i18n.Translate>
+                <Translate>Sync all backups</Translate>
               ) : (
-                <i18n.Translate>Sync now</i18n.Translate>
+                <Translate>Sync now</Translate>
               )}
             </ButtonPrimary>
-            <ButtonSuccess onClick={onAddProvider}>Add provider</ButtonSuccess>
+            <ButtonSuccess onClick={onAddProvider}>
+              <Translate>Add provider</Translate>
+            </ButtonSuccess>
           </div>
         </footer>
       )}
@@ -176,10 +183,14 @@ function BackupLayout(props: TransactionLayoutProps): VNode {
         </a>
 
         {dateStr && (
-          <SmallText style={{ marginTop: 5 }}>Last synced: {dateStr}</SmallText>
+          <SmallText style={{ marginTop: 5 }}>
+            <Translate>Last synced</Translate>: {dateStr}
+          </SmallText>
         )}
         {!dateStr && (
-          <SmallLightText style={{ marginTop: 5 }}>Not synced</SmallLightText>
+          <SmallLightText style={{ marginTop: 5 }}>
+            <Translate>Not synced</Translate>
+          </SmallLightText>
         )}
       </div>
       <div>
@@ -196,7 +207,9 @@ function BackupLayout(props: TransactionLayoutProps): VNode {
 function ExpirationText({ until }: { until: Timestamp }): VNode {
   return (
     <Fragment>
-      <CenteredText> Expires in </CenteredText>
+      <CenteredText>
+        <Translate>Expires in</Translate>
+      </CenteredText>
       <CenteredBoldText {...{ color: colorByTimeToExpire(until) }}>
         {" "}
         {daysUntil(until)}{" "}
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index 0ca07816e..b0eddeda5 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { AmountJson, Amounts, i18n } from "@gnu-taler/taler-util";
+import { AmountJson, Amounts, i18n, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { ErrorMessage } from "../components/ErrorMessage";
@@ -99,16 +99,22 @@ export function CreateManualWithdraw({
   if (!initialExchange) {
     return (
       <section>
-        <h2>Manual Withdrawal</h2>
+        <h2>
+          <Translate>Manual Withdrawal</Translate>
+        </h2>
         <LightText>
-          Choose a exchange from where the coins will be withdrawn. The exchange
-          will send the coins to this wallet after receiving a wire transfer
-          with the correct subject.
+          <Translate>
+            Choose a exchange from where the coins will be withdrawn. The
+            exchange will send the coins to this wallet after receiving a wire
+            transfer with the correct subject.
+          </Translate>
         </LightText>
         <Centered style={{ marginTop: 100 }}>
-          <BoldLight>No exchange configured</BoldLight>
+          <BoldLight>
+            <Translate>No exchange configured</Translate>
+          </BoldLight>
           <ButtonSuccess onClick={onAddExchange}>
-            <i18n.Translate>Add exchange</i18n.Translate>
+            <Translate>Add exchange</Translate>
           </ButtonSuccess>
         </Centered>
       </section>
@@ -118,20 +124,26 @@ export function CreateManualWithdraw({
   return (
     <Fragment>
       <section>
-        <ErrorMessage
-          title={error && "Can't create the reserve"}
-          description={error}
-        />
-        <h2>Manual Withdrawal</h2>
+        {error && (
+          <ErrorMessage
+            title={<Translate>Can't create the reserve</Translate>}
+            description={error}
+          />
+        )}
+        <h2>
+          <Translate>Manual Withdrawal</Translate>
+        </h2>
         <LightText>
-          Choose a exchange from where the coins will be withdrawn. The exchange
-          will send the coins to this wallet after receiving a wire transfer
-          with the correct subject.
+          <Translate>
+            Choose a exchange from where the coins will be withdrawn. The
+            exchange will send the coins to this wallet after receiving a wire
+            transfer with the correct subject.
+          </Translate>
         </LightText>
         <p>
           <Input>
             <SelectList
-              label="Currency"
+              label={<Translate>Currency</Translate>}
               list={currencyMap}
               name="currency"
               value={currency}
@@ -140,7 +152,7 @@ export function CreateManualWithdraw({
           </Input>
           <Input>
             <SelectList
-              label="Exchange"
+              label={<Translate>Exchange</Translate>}
               list={exchangeMap}
               name="currency"
               value={exchange}
@@ -149,12 +161,14 @@ export function CreateManualWithdraw({
           </Input>
           <div style={{ display: "flex", justifyContent: "space-between" }}>
             <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}>
-              <i18n.Translate>Add exchange</i18n.Translate>
+              <Translate>Add Exchange</Translate>
             </LinkPrimary>
           </div>
           {currency && (
             <InputWithLabel invalid={!!amount && !parsedAmount}>
-              <label>Amount</label>
+              <label>
+                <Translate>Amount</Translate>
+              </label>
               <div>
                 <span>{currency}</span>
                 <input
@@ -173,7 +187,7 @@ export function CreateManualWithdraw({
           disabled={!parsedAmount || !exchange}
           onClick={() => onCreate(exchange, parsedAmount!)}
         >
-          Start withdrawal
+          <Translate>Start withdrawal</Translate>
         </ButtonPrimary>
       </footer>
     </Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index abe830e87..7a5e02d3b 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -19,6 +19,7 @@ import {
   Amounts,
   AmountString,
   PaytoUri,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { Fragment, h, VNode } from "preact";
@@ -132,13 +133,21 @@ export function View({
   }, [amount]);
 
   if (!balance) {
-    return <div>no balance</div>;
+    return (
+      <div>
+        <Translate>no balance</Translate>
+      </div>
+    );
   }
   if (!knownBankAccounts || !knownBankAccounts.length) {
     return (
       <WarningBox>
-        <p>There is no known bank account to send money to</p>
-        <ButtonBoxWarning>Withdraw</ButtonBoxWarning>
+        <p>
+          <Translate>There is no known bank account to send money to</Translate>
+        </p>
+        <ButtonBoxWarning>
+          <Translate>Withdraw</Translate>
+        </ButtonBoxWarning>
       </WarningBox>
     );
   }
@@ -162,11 +171,13 @@ export function View({
 
   return (
     <Fragment>
-      <h2>Send {currency} to your account</h2>
+      <h2>
+        <Translate>Send {currency} to your account</Translate>
+      </h2>
       <section>
         <Input>
           <SelectList
-            label="Bank account IBAN number"
+            label={<Translate>Bank account IBAN number</Translate>}
             list={accountMap}
             name="account"
             value={String(accountIdx)}
@@ -174,7 +185,9 @@ export function View({
           />
         </Input>
         <InputWithLabel invalid={!!error}>
-          <label>Amount</label>
+          <label>
+            <Translate>Amount</Translate>
+          </label>
           <div>
             <span>{currency}</span>
             <input
@@ -196,7 +209,9 @@ export function View({
         {
           <Fragment>
             <InputWithLabel>
-              <label>Deposit fee</label>
+              <label>
+                <Translate>Deposit fee</Translate>
+              </label>
               <div>
                 <span>{currency}</span>
                 <input
@@ -208,7 +223,9 @@ export function View({
             </InputWithLabel>
 
             <InputWithLabel>
-              <label>Total deposit</label>
+              <label>
+                <Translate>Total deposit</Translate>
+              </label>
               <div>
                 <span>{currency}</span>
                 <input
@@ -224,10 +241,14 @@ export function View({
       <footer>
         <div />
         {unableToDeposit ? (
-          <ButtonPrimary disabled>Deposit</ButtonPrimary>
+          <ButtonPrimary disabled>
+            <Translate>Deposit</Translate>
+          </ButtonPrimary>
         ) : (
           <ButtonPrimary onClick={() => onSend(accountURI, amountStr)}>
-            Deposit {Amounts.stringifyValue(totalToDeposit)} {currency}
+            <Translate>
+              Deposit {Amounts.stringifyValue(totalToDeposit)} {currency}
+            </Translate>
           </ButtonPrimary>
         )}
       </footer>
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index 562a2c956..06d8abd2b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
@@ -1,4 +1,4 @@
-import { i18n } from "@gnu-taler/taler-util";
+import { i18n, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button, ButtonSuccess, ButtonWarning } from "../components/styled";
@@ -84,9 +84,11 @@ export function View({
   return (
     <Fragment>
       <section>
-        <h1>Review terms of service</h1>
+        <h1>
+          <Translate>Review terms of service</Translate>
+        </h1>
         <div>
-          Exchange URL:
+          <Translate>Exchange URL</Translate>:
           <a href={url} target="_blank" rel="noreferrer">
             {url}
           </a>
@@ -107,28 +109,28 @@ export function View({
 
       <footer>
         <Button onClick={onCancel}>
-          <i18n.Translate>Cancel</i18n.Translate>
+          <Translate>Cancel</Translate>
         </Button>
         {!terms && (
           <Button disabled>
-            <i18n.Translate>Loading terms..</i18n.Translate>
+            <Translate>Loading terms..</Translate>
           </Button>
         )}
         {terms && (
           <Fragment>
             {needsReview && !reviewed && (
               <ButtonSuccess disabled upperCased onClick={onConfirm}>
-                {i18n.str`Add exchange`}
+                <Translate>Add exchange</Translate>
               </ButtonSuccess>
             )}
             {(terms.status === "accepted" || (needsReview && reviewed)) && (
               <ButtonSuccess upperCased onClick={onConfirm}>
-                {i18n.str`Add exchange`}
+                <Translate>Add exchange</Translate>
               </ButtonSuccess>
             )}
             {terms.status === "notfound" && (
               <ButtonWarning upperCased onClick={onConfirm}>
-                {i18n.str`Add exchange anyway`}
+                <Translate>Add exchange anyway</Translate>
               </ButtonWarning>
             )}
           </Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index c4ba4f2a3..909afc4b7 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -2,6 +2,7 @@ import {
   canonicalizeBaseUrl,
   i18n,
   TalerConfigResponse,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -91,32 +92,46 @@ export function ExchangeSetUrlPage({
     <Fragment>
       <section>
         {!expectedCurrency ? (
-          <h1>Add new exchange</h1>
+          <h1>
+            <Translate>Add new exchange</Translate>
+          </h1>
         ) : (
-          <h2>Add exchange for {expectedCurrency}</h2>
+          <h2>
+            <Translate>Add exchange for {expectedCurrency}</Translate>
+          </h2>
         )}
         {!result && (
-          <LightText>Enter the URL of an exchange you trust.</LightText>
+          <LightText>
+            <Translate>Enter the URL of an exchange you trust.</Translate>
+          </LightText>
         )}
         {result && (
           <LightText>
-            An exchange has been found! Review the information and click next
+            <Translate>
+              An exchange has been found! Review the information and click next
+            </Translate>
           </LightText>
         )}
         {result && expectedCurrency && expectedCurrency !== result.currency && (
           <WarningBox>
-            This exchange doesn't match the expected currency{" "}
-            <b>{expectedCurrency}</b>
+            <Translate>
+              This exchange doesn't match the expected currency
+              <b>{expectedCurrency}</b>
+            </Translate>
           </WarningBox>
         )}
-        <ErrorMessage
-          title={error && "Unable to add this exchange"}
-          description={error}
-        />
-        <ErrorMessage
-          title={confirmationError && "Unable to add this exchange"}
-          description={confirmationError}
-        />
+        {error && (
+          <ErrorMessage
+            title={<Translate>Unable to verify this exchange</Translate>}
+            description={error}
+          />
+        )}
+        {confirmationError && (
+          <ErrorMessage
+            title={<Translate>Unable to add this exchange</Translate>}
+            description={confirmationError}
+          />
+        )}
         <p>
           <Input invalid={!!error}>
             <label>URL</label>
@@ -127,15 +142,23 @@ export function ExchangeSetUrlPage({
               onInput={(e) => updateEndpoint(e.currentTarget.value)}
             />
           </Input>
-          {loading && <div>loading... </div>}
+          {loading && (
+            <div>
+              <Translate>loading</Translate>...
+            </div>
+          )}
           {result && !loading && (
             <Fragment>
               <Input>
-                <label>Version</label>
+                <label>
+                  <Translate>Version</Translate>
+                </label>
                 <input type="text" disabled value={result.version} />
               </Input>
               <Input>
-                <label>Currency</label>
+                <label>
+                  <Translate>Currency</Translate>
+                </label>
                 <input type="text" disabled value={result.currency} />
               </Input>
             </Fragment>
@@ -144,7 +167,7 @@ export function ExchangeSetUrlPage({
       </section>
       <footer>
         <Button onClick={onCancel}>
-          <i18n.Translate>Cancel</i18n.Translate>
+          <Translate>Cancel</Translate>
         </Button>
         <ButtonPrimary
           disabled={
@@ -160,7 +183,7 @@ export function ExchangeSetUrlPage({
             );
           }}
         >
-          <i18n.Translate>Next</i18n.Translate>
+          <Translate>Next</Translate>
         </ButtonPrimary>
       </footer>
     </Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 2fae07525..a3e8ecc67 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -19,6 +19,7 @@ import {
   Balance,
   NotificationType,
   Transaction,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -66,7 +67,7 @@ export function HistoryPage({
   if (transactionQuery.hasError) {
     return (
       <LoadingError
-        title="Could not load the list of transactions"
+        title={<Translate>Could not load the list of transactions</Translate>}
         error={transactionQuery}
       />
     );
@@ -193,21 +194,23 @@ export function HistoryView({
               style={{ marginLeft: 0, marginTop: 8 }}
               onClick={() => goToWalletManualWithdraw(selectedCurrency)}
             >
-              Withdraw
+              <Translate>Withdraw</Translate>
             </ButtonPrimary>
             {currencyAmount && Amounts.isNonZero(currencyAmount) && (
               <ButtonBoxPrimary
                 style={{ marginLeft: 0, marginTop: 8 }}
                 onClick={() => goToWalletDeposit(selectedCurrency)}
               >
-                Deposit
+                <Translate>Deposit</Translate>
               </ButtonBoxPrimary>
             )}
           </div>
         </div>
       </section>
       {datesWithTransaction.length === 0 ? (
-        <section>There is no history for this currency</section>
+        <section>
+          <Translate>There is no history for this currency</Translate>
+        </section>
       ) : (
         <section>
           {datesWithTransaction.map((d, i) => {
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index 1f8603794..8eca733d4 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -19,6 +19,7 @@ import {
   AmountJson,
   Amounts,
   NotificationType,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -95,7 +96,9 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
   if (state.hasError) {
     return (
       <LoadingError
-        title="Could not load the list of known exchanges"
+        title={
+          <Translate>Could not load the list of known exchanges</Translate>
+        }
         error={state}
       />
     );
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 44d1049b9..55e2b62fb 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -19,6 +19,7 @@ import {
   BackupBackupProviderTerms,
   canonicalizeBaseUrl,
   i18n,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -113,15 +114,23 @@ export function SetUrlView({
   return (
     <Fragment>
       <section>
-        <h1> Add backup provider</h1>
-        <ErrorMessage
-          title={error && "Could not get provider information"}
-          description={error}
-        />
-        <LightText> Backup providers may charge for their service</LightText>
+        <h1>
+          <Translate>Add backup provider</Translate>
+        </h1>
+        {error && (
+          <ErrorMessage
+            title={<Translate>Could not get provider information</Translate>}
+            description={error}
+          />
+        )}
+        <LightText>
+          <Translate>Backup providers may charge for their service</Translate>
+        </LightText>
         <p>
           <Input invalid={urlError}>
-            <label>URL</label>
+            <label>
+              <Translate>URL</Translate>
+            </label>
             <input
               type="text"
               placeholder="https://"
@@ -130,7 +139,9 @@ export function SetUrlView({
             />
           </Input>
           <Input>
-            <label>Name</label>
+            <label>
+              <Translate>Name</Translate>
+            </label>
             <input
               type="text"
               disabled={name === undefined}
@@ -142,7 +153,7 @@ export function SetUrlView({
       </section>
       <footer>
         <Button onClick={onCancel}>
-          <i18n.Translate> &lt; Back</i18n.Translate>
+          &lt; <Translate>Back</Translate>
         </Button>
         <ButtonPrimary
           disabled={!value && !urlError}
@@ -153,7 +164,7 @@ export function SetUrlView({
             );
           }}
         >
-          <i18n.Translate>Next</i18n.Translate>
+          <Translate>Next</Translate>
         </ButtonPrimary>
       </footer>
     </Fragment>
@@ -177,29 +188,41 @@ export function ConfirmProviderView({
   return (
     <Fragment>
       <section>
-        <h1>Review terms of service</h1>
+        <h1>
+          <Translate>Review terms of service</Translate>
+        </h1>
         <div>
-          Provider URL:{" "}
+          <Translate>Provider URL</Translate>:{" "}
           <a href={url} target="_blank">
             {url}
           </a>
         </div>
         <SmallLightText>
-          Please review and accept this provider's terms of service
+          <Translate>
+            Please review and accept this provider's terms of service
+          </Translate>
         </SmallLightText>
-        <h2>1. Pricing</h2>
+        <h2>
+          1. <Translate>Pricing</Translate>
+        </h2>
         <p>
-          {Amounts.isZero(provider.annual_fee)
-            ? "free of charge"
-            : `${provider.annual_fee} per year of service`}
+          {Amounts.isZero(provider.annual_fee) ? (
+            <Translate>free of charge</Translate>
+          ) : (
+            <Translate>{provider.annual_fee} per year of service</Translate>
+          )}
         </p>
-        <h2>2. Storage</h2>
+        <h2>
+          2. <Translate>Storage</Translate>
+        </h2>
         <p>
-          {provider.storage_limit_in_megabytes} megabytes of storage per year of
-          service
+          <Translate>
+            {provider.storage_limit_in_megabytes} megabytes of storage per year
+            of service
+          </Translate>
         </p>
         <Checkbox
-          label="Accept terms of service"
+          label={<Translate>Accept terms of service</Translate>}
           name="terms"
           onToggle={() => setAccepted((old) => !old)}
           enabled={accepted}
@@ -207,10 +230,10 @@ export function ConfirmProviderView({
       </section>
       <footer>
         <Button onClick={onCancel}>
-          <i18n.Translate> &lt; Back</i18n.Translate>
+          &lt; <Translate>Back</Translate>
         </Button>
         <ButtonPrimary disabled={!accepted} onClick={onConfirm}>
-          <i18n.Translate>Add provider</i18n.Translate>
+          <Translate>Add provider</Translate>
         </ButtonPrimary>
       </footer>
     </Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 239a7b31d..beeedcda7 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { i18n } from "@gnu-taler/taler-util";
+import { Translate } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentStatus,
@@ -22,6 +22,8 @@ import {
 } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { ErrorMessage } from "../components/ErrorMessage";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import {
   Button,
   ButtonDestructive,
@@ -52,35 +54,24 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode {
   const state = useAsyncAsHook(getProviderInfo);
 
   if (!state) {
-    return (
-      <div>
-        <i18n.Translate>Loading...</i18n.Translate>
-      </div>
-    );
+    return <Loading />;
   }
   if (state.hasError) {
     return (
-      <div>
-        <i18n.Translate>
-          There was an error loading the provider detail for "{providerURL}"
-        </i18n.Translate>
-      </div>
+      <LoadingError
+        title={
+          <Translate>
+            There was an error loading the provider detail for "{providerURL}"
+          </Translate>
+        }
+        error={state}
+      />
     );
   }
 
-  if (state.response === null) {
-    onBack();
-    return (
-      <div>
-        <i18n.Translate>
-          There is not known provider with url "{providerURL}". Redirecting
-          back...
-        </i18n.Translate>
-      </div>
-    );
-  }
   return (
     <ProviderView
+      url={providerURL}
       info={state.response}
       onSync={async () => wxApi.syncOneProvider(providerURL)}
       onDelete={async () => wxApi.removeProvider(providerURL).then(onBack)}
@@ -93,7 +84,8 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode {
 }
 
 export interface ViewProps {
-  info: ProviderInfo;
+  url: string;
+  info: ProviderInfo | null;
   onDelete: () => void;
   onSync: () => void;
   onBack: () => void;
@@ -102,12 +94,30 @@ export interface ViewProps {
 
 export function ProviderView({
   info,
+  url,
   onDelete,
   onSync,
   onBack,
   onExtend,
 }: ViewProps): VNode {
-  const lb = info?.lastSuccessfulBackupTimestamp;
+  if (info === null) {
+    return (
+      <Fragment>
+        <section>
+          <p>
+            <Translate>There is not known provider with url "{url}".</Translate>
+          </p>
+        </section>
+        <footer>
+          <Button onClick={onBack}>
+            &lt; <Translate>Back</Translate>
+          </Button>
+          <div />
+        </footer>
+      </Fragment>
+    );
+  }
+  const lb = info.lastSuccessfulBackupTimestamp;
   const isPaid =
     info.paymentStatus.type === ProviderPaymentType.Paid ||
     info.paymentStatus.type === ProviderPaymentType.TermsChanged;
@@ -125,48 +135,55 @@ export function ProviderView({
       </header>
       <section>
         <p>
-          <b>Last backup:</b> <Time timestamp={lb} format="dd MMMM yyyy" />
+          <b>
+            <Translate>Last backup</Translate>:
+          </b>{" "}
+          <Time timestamp={lb} format="dd MMMM yyyy" />
         </p>
         <ButtonPrimary onClick={onSync}>
-          <i18n.Translate>Back up</i18n.Translate>
+          <Translate>Back up</Translate>
         </ButtonPrimary>
         {info.terms && (
           <Fragment>
             <p>
-              <b>Provider fee:</b> {info.terms && info.terms.annualFee} per year
+              <b>
+                <Translate>Provider fee</Translate>:
+              </b>{" "}
+              {info.terms && info.terms.annualFee}{" "}
+              <Translate>per year</Translate>
             </p>
           </Fragment>
         )}
         <p>{descriptionByStatus(info.paymentStatus)}</p>
         <ButtonPrimary disabled onClick={onExtend}>
-          <i18n.Translate>Extend</i18n.Translate>
+          <Translate>Extend</Translate>
         </ButtonPrimary>
 
         {info.paymentStatus.type === ProviderPaymentType.TermsChanged && (
           <div>
             <p>
-              <i18n.Translate>
+              <Translate>
                 terms has changed, extending the service will imply accepting
                 the new terms of service
-              </i18n.Translate>
+              </Translate>
             </p>
             <table>
               <thead>
                 <tr>
                   <td>&nbsp;</td>
                   <td>
-                    <i18n.Translate>old</i18n.Translate>
+                    <Translate>old</Translate>
                   </td>
                   <td> -&gt;</td>
                   <td>
-                    <i18n.Translate>new</i18n.Translate>
+                    <Translate>new</Translate>
                   </td>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <td>
-                    <i18n.Translate>fee</i18n.Translate>
+                    <Translate>fee</Translate>
                   </td>
                   <td>{info.paymentStatus.oldTerms.annualFee}</td>
                   <td>-&gt;</td>
@@ -174,7 +191,7 @@ export function ProviderView({
                 </tr>
                 <tr>
                   <td>
-                    <i18n.Translate>storage</i18n.Translate>
+                    <Translate>storage</Translate>
                   </td>
                   <td>{info.paymentStatus.oldTerms.storageLimitInMegabytes}</td>
                   <td>-&gt;</td>
@@ -187,11 +204,11 @@ export function ProviderView({
       </section>
       <footer>
         <Button onClick={onBack}>
-          <i18n.Translate> &lt; back</i18n.Translate>
+          &lt; <Translate>back</Translate>
         </Button>
         <div>
           <ButtonDestructive onClick={onDelete}>
-            <i18n.Translate>remove provider</i18n.Translate>
+            <Translate>Remove provider</Translate>
           </ButtonDestructive>
         </div>
       </footer>
@@ -201,7 +218,12 @@ export function ProviderView({
 
 function Error({ info }: { info: ProviderInfo }): VNode {
   if (info.lastError) {
-    return <ErrorMessage title={info.lastError.hint} />;
+    return (
+      <ErrorMessage
+        title={<Translate>This provider has reported an error</Translate>}
+        description={info.lastError.hint}
+      />
+    );
   }
   if (info.backupProblem) {
     switch (info.backupProblem.type) {
@@ -210,24 +232,26 @@ function Error({ info }: { info: ProviderInfo }): VNode {
           <ErrorMessage
             title={
               <Fragment>
-                <i18n.Translate>
+                <Translate>
                   There is conflict with another backup from{" "}
                   <b>{info.backupProblem.otherDeviceId}</b>
-                </i18n.Translate>
+                </Translate>
               </Fragment>
             }
           />
         );
       case "backup-unreadable":
-        return <ErrorMessage title="Backup is not readable" />;
+        return (
+          <ErrorMessage title={<Translate>Backup is not readable</Translate>} />
+        );
       default:
         return (
           <ErrorMessage
             title={
               <Fragment>
-                <i18n.Translate>
+                <Translate>
                   Unknown backup problem: {JSON.stringify(info.backupProblem)}
-                </i18n.Translate>
+                </Translate>
               </Fragment>
             }
           />
@@ -239,16 +263,20 @@ function Error({ info }: { info: ProviderInfo }): VNode {
 
 function descriptionByStatus(status: ProviderPaymentStatus): VNode {
   switch (status.type) {
-    // return i18n.str`no enough balance to make the payment`
-    // return i18n.str`not paid yet`
     case ProviderPaymentType.Paid:
     case ProviderPaymentType.TermsChanged:
       if (status.paidUntil.t_ms === "never") {
-        return <span>{i18n.str`service paid`}</span>;
+        return (
+          <span>
+            <Translate>service paid</Translate>
+          </span>
+        );
       }
       return (
         <Fragment>
-          <b>Backup valid until:</b>{" "}
+          <b>
+            <Translate>Backup valid until</Translate>:
+          </b>{" "}
           <Time timestamp={status.paidUntil} format="dd MMM yyyy" />
         </Fragment>
       );
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 7ccef2daa..7de719fc6 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -1,4 +1,9 @@
-import { AmountJson, Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
+import {
+  AmountJson,
+  Amounts,
+  parsePaytoUri,
+  Translate,
+} from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
 import { QR } from "../components/QR";
@@ -22,15 +27,23 @@ export function ReserveCreated({
   const paytoURI = parsePaytoUri(payto);
   // const url = new URL(paytoURI?.targetPath);
   if (!paytoURI) {
-    return <div>could not parse payto uri from exchange {payto}</div>;
+    return (
+      <div>
+        <Translate>could not parse payto uri from exchange {payto}</Translate>
+      </div>
+    );
   }
   return (
     <Fragment>
       <section>
-        <h1>Exchange is ready for withdrawal!</h1>
+        <h1>
+          <Translate>Exchange is ready for withdrawal</Translate>
+        </h1>
         <p>
-          To complete the process you need to wire{" "}
-          <b>{amountToString(amount)}</b> to the exchange bank account
+          <Translate>
+            To complete the process you need to wire
+            <b>{amountToString(amount)}</b> to the exchange bank account
+          </Translate>
         </p>
         <BankDetailsByPaytoType
           amount={amountToString(amount)}
@@ -40,23 +53,27 @@ export function ReserveCreated({
         />
         <p>
           <WarningBox>
-            Make sure to use the correct subject, otherwise the money will not
-            arrive in this wallet.
+            <Translate>
+              Make sure to use the correct subject, otherwise the money will not
+              arrive in this wallet.
+            </Translate>
           </WarningBox>
         </p>
       </section>
       <section>
         <p>
-          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
+          <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
+          </Translate>
         </p>
         <QR text={payto} />
       </section>
       <footer>
         <div />
         <ButtonDestructive onClick={onCancel}>
-          Cancel withdrawal
+          <Translate>Cancel withdrawal</Translate>
         </ButtonDestructive>
       </footer>
     </Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index ff47620eb..bac884247 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { ExchangeListItem, i18n } from "@gnu-taler/taler-util";
+import { ExchangeListItem, i18n, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
 import {
@@ -81,29 +81,46 @@ export function SettingsView({
     <Fragment>
       <section>
         <h2>
-          <i18n.Translate>Permissions</i18n.Translate>
+          <Translate>Permissions</Translate>
         </h2>
         <Checkbox
-          label="Automatically open wallet based on page content"
+          label={
+            <Translate>
+              Automatically open wallet based on page content
+            </Translate>
+          }
           name="perm"
-          description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)"
+          description={
+            <Translate>
+              Enabling this option below will make using the wallet faster, but
+              requires more permissions from your browser.
+            </Translate>
+          }
           enabled={permissionsEnabled}
           onToggle={togglePermissions}
         />
 
         <h2>
-          <i18n.Translate>Known exchanges</i18n.Translate>
+          <Translate>Known exchanges</Translate>
         </h2>
         {!knownExchanges || !knownExchanges.length ? (
-          <div>No exchange yet!</div>
+          <div>
+            <Translate>No exchange yet</Translate>
+          </div>
         ) : (
           <Fragment>
             <table>
               <thead>
                 <tr>
-                  <th>currency</th>
-                  <th>url</th>
-                  <th>term of service</th>
+                  <th>
+                    <Translate>Currency</Translate>
+                  </th>
+                  <th>
+                    <Translate>URL</Translate>
+                  </th>
+                  <th>
+                    <Translate>Term of Service</Translate>
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -116,12 +133,24 @@ export function SettingsView({
                     );
                     switch (status) {
                       case "accepted":
-                        return <SuccessText>ok</SuccessText>;
+                        return (
+                          <SuccessText>
+                            <Translate>ok</Translate>
+                          </SuccessText>
+                        );
                       case "changed":
-                        return <WarningText>changed!</WarningText>;
+                        return (
+                          <WarningText>
+                            <Translate>changed</Translate>
+                          </WarningText>
+                        );
                       case "new":
                       case "notfound":
-                        return <DestructiveText>not accepted</DestructiveText>;
+                        return (
+                          <DestructiveText>
+                            <Translate>not accepted</Translate>
+                          </DestructiveText>
+                        );
                     }
                   }
                   return (
@@ -143,15 +172,19 @@ export function SettingsView({
         <div style={{ display: "flex", justifyContent: "space-between" }}>
           <div />
           <LinkPrimary href={Pages.settings_exchange_add}>
-            Add an exchange
+            <Translate>Add an exchange</Translate>
           </LinkPrimary>
         </div>
 
         <h2>Config</h2>
         <Checkbox
-          label="Developer mode"
+          label={<Translate>Developer mode</Translate>}
           name="devMode"
-          description="(More options and information useful for debugging)"
+          description={
+            <Translate>
+              (More options and information useful for debugging)
+            </Translate>
+          }
           enabled={developerMode}
           onToggle={toggleDeveloperMode}
         />
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 423a641a3..a43e9b4a0 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -22,6 +22,7 @@ import {
   parsePaytoUri,
   Transaction,
   TransactionType,
+  Translate,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
 import { differenceInSeconds } from "date-fns";
@@ -47,7 +48,6 @@ import {
 } from "../components/styled";
 import { Time } from "../components/Time";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
-import { Pages } from "../NavigationBar";
 import * as wxApi from "../wxApi";
 
 interface Props {
@@ -76,7 +76,9 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
   if (state.hasError) {
     return (
       <LoadingError
-        title="Could not load the transaction information"
+        title={
+          <Translate>Could not load the transaction information</Translate>
+        }
         error={state}
       />
     );
@@ -139,11 +141,17 @@ export function TransactionView({
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
           <ErrorTalerOperation
-            title="There was an error trying to complete the transaction"
+            title={
+              <Translate>
+                There was an error trying to complete the transaction
+              </Translate>
+            }
             error={transaction?.error}
           />
           {transaction.pending && (
-            <WarningBox>This transaction is not completed</WarningBox>
+            <WarningBox>
+              <Translate>This transaction is not completed</Translate>
+            </WarningBox>
           )}
         </section>
         <section>
@@ -151,16 +159,16 @@ export function TransactionView({
         </section>
         <footer>
           <Button onClick={onBack}>
-            <i18n.Translate> &lt; Back </i18n.Translate>
+            &lt; <Translate> Back </Translate>
           </Button>
           <div>
             {showRetry ? (
               <ButtonPrimary onClick={onRetry}>
-                <i18n.Translate>retry</i18n.Translate>
+                <Translate>Retry</Translate>
               </ButtonPrimary>
             ) : null}
             <ButtonDestructive onClick={doCheckBeforeForget}>
-              <i18n.Translate> Forget </i18n.Translate>
+              <Translate>Forget</Translate>
             </ButtonDestructive>
           </div>
         </footer>
@@ -184,24 +192,30 @@ export function TransactionView({
         {confirmBeforeForget ? (
           <Overlay>
             <CenteredDialog>
-              <header>Caution!</header>
+              <header>
+                <Translate>Caution!</Translate>
+              </header>
               <section>
-                If you have already wired money to the exchange you will loose
-                the chance to get the coins form it.
+                <Translate>
+                  If you have already wired money to the exchange you will loose
+                  the chance to get the coins form it.
+                </Translate>
               </section>
               <footer>
                 <Button onClick={() => setConfirmBeforeForget(false)}>
-                  <i18n.Translate> Cancel </i18n.Translate>
+                  <Translate>Cancel</Translate>
                 </Button>
 
                 <ButtonDestructive onClick={onDelete}>
-                  <i18n.Translate> Confirm </i18n.Translate>
+                  <Translate>Confirm</Translate>
                 </ButtonDestructive>
               </footer>
             </CenteredDialog>
           </Overlay>
         ) : undefined}
-        <h2>Withdrawal</h2>
+        <h2>
+          <Translate>Withdrawal</Translate>
+        </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         {transaction.pending ? (
           transaction.withdrawalDetails.type ===
@@ -217,19 +231,21 @@ export function TransactionView({
               />
               <p>
                 <WarningBox>
-                  Make sure to use the correct subject, otherwise the money will
-                  not arrive in this wallet.
+                  <Translate>
+                    Make sure to use the correct subject, otherwise the money
+                    will not arrive in this wallet.
+                  </Translate>
                 </WarningBox>
               </p>
               <Part
                 big
-                title="Total withdrawn"
+                title={<Translate>Total withdrawn</Translate>}
                 text={amountToString(transaction.amountEffective)}
                 kind="positive"
               />
               <Part
                 big
-                title="Exchange fee"
+                title={<Translate>Exchange fee</Translate>}
                 text={amountToString(fee)}
                 kind="negative"
               />
@@ -239,34 +255,38 @@ export function TransactionView({
               {!transaction.withdrawalDetails.confirmed &&
               transaction.withdrawalDetails.bankConfirmationUrl ? (
                 <InfoBox>
-                  The bank is waiting for confirmation. Go to the
-                  <a
-                    href={transaction.withdrawalDetails.bankConfirmationUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    bank site
-                  </a>
+                  <Translate>
+                    The bank is waiting for confirmation. Go to the
+                    <a
+                      href={transaction.withdrawalDetails.bankConfirmationUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <Translate>bank site</Translate>
+                    </a>
+                  </Translate>
                 </InfoBox>
               ) : undefined}
               {transaction.withdrawalDetails.confirmed && (
-                <InfoBox>Waiting for the coins to arrive</InfoBox>
+                <InfoBox>
+                  <Translate>Waiting for the coins to arrive</Translate>
+                </InfoBox>
               )}
               <Part
                 big
-                title="Total withdrawn"
+                title={<Translate>Total withdrawn</Translate>}
                 text={amountToString(transaction.amountEffective)}
                 kind="positive"
               />
               <Part
                 big
-                title="Chosen amount"
+                title={<Translate>Chosen amount</Translate>}
                 text={amountToString(transaction.amountRaw)}
                 kind="neutral"
               />
               <Part
                 big
-                title="Exchange fee"
+                title={<Translate>Exchange fee</Translate>}
                 text={amountToString(fee)}
                 kind="negative"
               />
@@ -276,26 +296,26 @@ export function TransactionView({
           <Fragment>
             <Part
               big
-              title="Total withdrawn"
+              title={<Translate>Total withdrawn</Translate>}
               text={amountToString(transaction.amountEffective)}
               kind="positive"
             />
             <Part
               big
-              title="Chosen amount"
+              title={<Translate>Chosen amount</Translate>}
               text={amountToString(transaction.amountRaw)}
               kind="neutral"
             />
             <Part
               big
-              title="Exchange fee"
+              title={<Translate>Exchange fee</Translate>}
               text={amountToString(fee)}
               kind="negative"
             />
           </Fragment>
         )}
         <Part
-          title="Exchange"
+          title={<Translate>Exchange</Translate>}
           text={new URL(transaction.exchangeBaseUrl).hostname}
           kind="neutral"
         />
@@ -315,30 +335,41 @@ export function TransactionView({
 
     return (
       <TransactionTemplate>
-        <h2>Payment </h2>
+        <h2>
+          <Translate>Payment</Translate>
+        </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title="Total paid"
+          title={<Translate>Total paid</Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="negative"
         />
         <Part
           big
-          title="Purchase amount"
+          title={<Translate>Purchase amount</Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
-        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
         <Part
-          title="Merchant"
+          big
+          title={<Translate>Fee</Translate>}
+          text={amountToString(fee)}
+          kind="negative"
+        />
+        <Part
+          title={<Translate>Merchant</Translate>}
           text={transaction.info.merchant.name}
           kind="neutral"
         />
-        <Part title="Purchase" text={transaction.info.summary} kind="neutral" />
         <Part
-          title="Receipt"
+          title={<Translate>Purchase</Translate>}
+          text={transaction.info.summary}
+          kind="neutral"
+        />
+        <Part
+          title={<Translate>Receipt</Translate>}
           text={`#${transaction.info.orderId}`}
           kind="neutral"
         />
@@ -375,22 +406,29 @@ export function TransactionView({
     ).amount;
     return (
       <TransactionTemplate>
-        <h2>Deposit </h2>
+        <h2>
+          <Translate>Deposit</Translate>
+        </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title="Total send"
+          title={<Translate>Total send</Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="neutral"
         />
         <Part
           big
-          title="Deposit amount"
+          title={<Translate>Deposit amount</Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="positive"
         />
-        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+        <Part
+          big
+          title={<Translate>Fee</Translate>}
+          text={amountToString(fee)}
+          kind="negative"
+        />
       </TransactionTemplate>
     );
   }
@@ -402,22 +440,29 @@ export function TransactionView({
     ).amount;
     return (
       <TransactionTemplate>
-        <h2>Refresh</h2>
+        <h2>
+          <Translate>Refresh</Translate>
+        </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title="Total refresh"
+          title={<Translate>Total refresh</Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="negative"
         />
         <Part
           big
-          title="Refresh amount"
+          title={<Translate>Refresh amount</Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
-        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+        <Part
+          big
+          title={<Translate>Fee</Translate>}
+          text={amountToString(fee)}
+          kind="negative"
+        />
       </TransactionTemplate>
     );
   }
@@ -429,22 +474,29 @@ export function TransactionView({
     ).amount;
     return (
       <TransactionTemplate>
-        <h2>Tip</h2>
+        <h2>
+          <Translate>Tip</Translate>
+        </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title="Total tip"
+          title={<Translate>Total tip</Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="positive"
         />
         <Part
           big
-          title="Received amount"
+          title={<Translate>Received amount</Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
-        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+        <Part
+          big
+          title={<Translate>Fee</Translate>}
+          text={amountToString(fee)}
+          kind="negative"
+        />
       </TransactionTemplate>
     );
   }
@@ -456,30 +508,41 @@ export function TransactionView({
     ).amount;
     return (
       <TransactionTemplate>
-        <h2>Refund</h2>
+        <h2>
+          <Translate>Refund</Translate>
+        </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title="Total refund"
+          title={<Translate>Total refund</Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="positive"
         />
         <Part
           big
-          title="Refund amount"
+          title={<Translate>Refund amount</Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
-        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
         <Part
-          title="Merchant"
+          big
+          title={<Translate>Fee</Translate>}
+          text={amountToString(fee)}
+          kind="negative"
+        />
+        <Part
+          title={<Translate>Merchant</Translate>}
           text={transaction.info.merchant.name}
           kind="neutral"
         />
-        <Part title="Purchase" text={transaction.info.summary} kind="neutral" />
         <Part
-          title="Receipt"
+          title={<Translate>Purchase</Translate>}
+          text={transaction.info.summary}
+          kind="neutral"
+        />
+        <Part
+          title={<Translate>Receipt</Translate>}
           text={`#${transaction.info.orderId}`}
           kind="neutral"
         />
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
index b180fdd05..a251c4254 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
@@ -17,10 +17,10 @@
 /**
  * Welcome page, shown on first installs.
  *
- * @author Florian Dold
+ * @author sebasjm
  */
 
-import { WalletDiagnostics } from "@gnu-taler/taler-util";
+import { Translate, WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
 import { Diagnostics } from "../components/Diagnostics";
@@ -54,24 +54,41 @@ export function View({
 }: ViewProps): VNode {
   return (
     <Fragment>
-      <h1>Browser Extension Installed!</h1>
+      <h1>
+        <Translate>Browser Extension Installed!</Translate>
+      </h1>
       <div>
-        <p>Thank you for installing the wallet.</p>
+        <p>
+          <Translate>Thank you for installing the wallet.</Translate>
+        </p>
         <Diagnostics diagnostics={diagnostics} timedOut={timedOut} />
-        <h2>Permissions</h2>
+        <h2>
+          <Translate>Permissions</Translate>
+        </h2>
         <Checkbox
-          label="Automatically open wallet based on page content"
+          label={
+            <Translate>
+              Automatically open wallet based on page content
+            </Translate>
+          }
           name="perm"
-          description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)"
+          description={
+            <Translate>
+              (Enabling this option below will make using the wallet faster, but
+              requires more permissions from your browser.)
+            </Translate>
+          }
           enabled={permissionsEnabled}
           onToggle={togglePermissions}
         />
-        <h2>Next Steps</h2>
+        <h2>
+          <Translate>Next Steps</Translate>
+        </h2>
         <a href="https://demo.taler.net/" style={{ display: "block" }}>
-          Try the demo »
+          <Translate>Try the demo</Translate> »
         </a>
         <a href="https://demo.taler.net/" style={{ display: "block" }}>
-          Learn how to top up your wallet balance »
+          <Translate>Learn how to top up your wallet balance</Translate> »
         </a>
       </div>
     </Fragment>