add i18n where was missing

9 files changed, 288 insertions, 167 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
index 39ccdbac0..5adc641f4 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
@@ -35,6 +35,7 @@ import {
   NotificationType,
   PreparePayResult,
   PreparePayResultType,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { OperationFailedError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
@@ -108,7 +109,11 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
   }, [talerPayUri, foundAmountStr]);
 
   if (!talerPayUri) {
-    return <span>missing pay uri</span>;
+    return (
+      <span>
+        <Translate>missing pay uri</Translate>
+      </span>
+    );
   }
 
   if (!payStatus) {
@@ -116,10 +121,16 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
       return (
         <WalletAction>
           <LogoHeader />
-          <h2>{i18n.str`Digital cash payment`}</h2>
+          <h2>
+            <Translate>Digital cash payment</Translate>
+          </h2>
           <section>
             <ErrorTalerOperation
-              title="Could not get the payment information for this order"
+              title={
+                <Translate>
+                  Could not get the payment information for this order
+                </Translate>
+              }
               error={payErrMsg?.operationError}
             />
           </section>
@@ -130,15 +141,25 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
       return (
         <WalletAction>
           <LogoHeader />
-          <h2>{i18n.str`Digital cash payment`}</h2>
+          <h2>
+            <Translate>Digital cash payment</Translate>
+          </h2>
           <section>
-            <p>Could not get the payment information for this order</p>
+            <p>
+              <Translate>
+                Could not get the payment information for this order
+              </Translate>
+            </p>
             <ErrorBox>{payErrMsg}</ErrorBox>
           </section>
         </WalletAction>
       );
     }
-    return <span>Loading payment information ...</span>;
+    return (
+      <span>
+        <Translate>Loading payment information</Translate> ...
+      </span>
+    );
   }
 
   const onClick = async (): Promise<void> => {
@@ -183,20 +204,32 @@ export function PaymentRequestView({
     <WalletAction>
       <LogoHeader />
 
-      <h2>{i18n.str`Digital cash deposit`}</h2>
+      <h2>
+        <Translate>Digital cash deposit</Translate>
+      </h2>
       {payStatus.status === PreparePayResultType.AlreadyConfirmed &&
         (payStatus.paid ? (
-          <SuccessBox> Already paid </SuccessBox>
+          <SuccessBox>
+            <Translate>Already paid</Translate>
+          </SuccessBox>
         ) : (
-          <WarningBox> Already claimed </WarningBox>
+          <WarningBox>
+            <Translate>Already claimed</Translate>
+          </WarningBox>
         ))}
       {payResult && payResult.type === ConfirmPayResultType.Done && (
         <SuccessBox>
-          <h3>Payment complete</h3>
+          <h3>
+            <Translate>Payment complete</Translate>
+          </h3>
           <p>
-            {!payResult.contractTerms.fulfillment_message
-              ? "You will now be sent back to the merchant you came from."
-              : payResult.contractTerms.fulfillment_message}
+            {!payResult.contractTerms.fulfillment_message ? (
+              <Translate>
+                You will now be sent back to the merchant you came from.
+              </Translate>
+            ) : (
+              payResult.contractTerms.fulfillment_message
+            )}
           </p>
         </SuccessBox>
       )}
@@ -205,7 +238,7 @@ export function PaymentRequestView({
           Amounts.isNonZero(totalFees) && (
             <Part
               big
-              title="Total to pay"
+              title={<Translate>Total to pay</Translate>}
               text={amountToPretty(
                 Amounts.parseOrThrow(payStatus.amountEffective),
               )}
@@ -214,7 +247,7 @@ export function PaymentRequestView({
           )}
         <Part
           big
-          title="Purchase amount"
+          title={<Translate>Purchase amount</Translate>}
           text={amountToPretty(Amounts.parseOrThrow(payStatus.amountRaw))}
           kind="neutral"
         />
@@ -222,21 +255,25 @@ export function PaymentRequestView({
           <Fragment>
             <Part
               big
-              title="Fee"
+              title={<Translate>Fee</Translate>}
               text={amountToPretty(totalFees)}
               kind="negative"
             />
           </Fragment>
         )}
         <Part
-          title="Merchant"
+          title={<Translate>Merchant</Translate>}
           text={contractTerms.merchant.name}
           kind="neutral"
         />
-        <Part title="Purchase" text={contractTerms.summary} kind="neutral" />
+        <Part
+          title={<Translate>Purchase</Translate>}
+          text={contractTerms.summary}
+          kind="neutral"
+        />
         {contractTerms.order_id && (
           <Part
-            title="Receipt"
+            title={<Translate>Receipt</Translate>}
             text={`#${contractTerms.order_id}`}
             kind="neutral"
           />
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 7f5f42e8d..7ed0d072f 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -37,10 +37,12 @@ import {
   PreparePayResult,
   PreparePayResultType,
   Product,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { OperationFailedError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { ErrorMessage } from "../components/ErrorMessage";
 import { Loading } from "../components/Loading";
 import { LoadingError } from "../components/LoadingError";
 import { LogoHeader } from "../components/LogoHeader";
@@ -106,7 +108,12 @@ export function PayPage({
   }
 
   if (hook.hasError) {
-    return <LoadingError title="Could not load pay status" error={hook} />;
+    return (
+      <LoadingError
+        title={<Translate>Could not load pay status</Translate>}
+        error={hook}
+      />
+    );
   }
 
   const foundBalance = hook.response.balance.balances.find(
@@ -178,9 +185,13 @@ export function PaymentRequestView({
 
   if (!contractTerms) {
     return (
-      <span>
-        Error: did not get contract terms from merchant or wallet backend.
-      </span>
+      <ErrorMessage
+        title={
+          <Translate>
+            Could not load contract terms from merchant or wallet backend.
+          </Translate>
+        }
+      />
     );
   }
 
@@ -192,13 +203,6 @@ export function PaymentRequestView({
     totalFees = Amounts.sub(amountEffective, amountRaw).amount;
   }
 
-  // let merchantName: VNode;
-  // if (contractTerms.merchant && contractTerms.merchant.name) {
-  //   merchantName = <strong>{contractTerms.merchant.name}</strong>;
-  // } else {
-  // merchantName = <strong>(pub: {contractTerms.merchant_pub})</strong>;
-  // }
-
   function Alternative(): VNode {
     const [showQR, setShowQR] = useState<boolean>(false);
     const privateUri =
@@ -209,12 +213,21 @@ export function PaymentRequestView({
     return (
       <section>
         <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
-          {!showQR ? i18n.str`Pay with a mobile phone` : i18n.str`Hide QR`}
+          {!showQR ? (
+            <Translate>Pay with a mobile phone</Translate>
+          ) : (
+            <Translate>Hide QR</Translate>
+          )}
         </LinkSuccess>
         {showQR && (
           <div>
             <QR text={privateUri} />
-            Scan the QR code or <a href={privateUri}>click here</a>
+            <Translate>
+              Scan the QR code or
+              <a href={privateUri}>
+                <Translate>click here</Translate>
+              </a>
+            </Translate>
           </div>
         )}
       </section>
@@ -227,7 +240,9 @@ export function PaymentRequestView({
         return (
           <section>
             <div>
-              <p>Processing...</p>
+              <p>
+                <Translate>Processing</Translate>...
+              </p>
             </div>
           </section>
         );
@@ -239,7 +254,9 @@ export function PaymentRequestView({
         <Fragment>
           <section>
             <ButtonSuccess upperCased onClick={onClick}>
-              {i18n.str`Pay`} {amountToString(payStatus.amountEffective)}
+              <Translate>
+                Pay {amountToString(payStatus.amountEffective)}
+              </Translate>
             </ButtonSuccess>
           </section>
           <Alternative />
@@ -252,18 +269,22 @@ export function PaymentRequestView({
           <section>
             {balance ? (
               <WarningBox>
-                Your balance of {amountToString(balance)} is not enough to pay
-                for this purchase
+                <Translate>
+                  Your balance of {amountToString(balance)} is not enough to pay
+                  for this purchase
+                </Translate>
               </WarningBox>
             ) : (
               <WarningBox>
-                Your balance is not enough to pay for this purchase.
+                <Translate>
+                  Your balance is not enough to pay for this purchase.
+                </Translate>
               </WarningBox>
             )}
           </section>
           <section>
             <ButtonSuccess upperCased onClick={goToWalletManualWithdraw}>
-              {i18n.str`Withdraw digital cash`}
+              <Translate>Withdraw digital cash</Translate>
             </ButtonSuccess>
           </section>
           <Alternative />
@@ -276,7 +297,7 @@ export function PaymentRequestView({
           <section>
             {payStatus.paid && contractTerms.fulfillment_message && (
               <Part
-                title="Merchant message"
+                title={<Translate>Merchant message</Translate>}
                 text={contractTerms.fulfillment_message}
                 kind="neutral"
               />
@@ -293,31 +314,48 @@ export function PaymentRequestView({
     <WalletAction>
       <LogoHeader />
 
-      <h2>{i18n.str`Digital cash payment`}</h2>
+      <h2>
+        <Translate>Digital cash payment</Translate>
+      </h2>
       {payStatus.status === PreparePayResultType.AlreadyConfirmed &&
         (payStatus.paid ? (
           payStatus.contractTerms.fulfillment_url ? (
             <SuccessBox>
-              Already paid, you are going to be redirected to{" "}
-              <a href={payStatus.contractTerms.fulfillment_url}>
-                {payStatus.contractTerms.fulfillment_url}
-              </a>
+              <Translate>
+                Already paid, you are going to be redirected to{" "}
+                <a href={payStatus.contractTerms.fulfillment_url}>
+                  {payStatus.contractTerms.fulfillment_url}
+                </a>
+              </Translate>
             </SuccessBox>
           ) : (
-            <SuccessBox> Already paid </SuccessBox>
+            <SuccessBox>
+              <Translate>Already paid</Translate>
+            </SuccessBox>
           )
         ) : (
-          <WarningBox> Already claimed </WarningBox>
+          <WarningBox>
+            <Translate>Already claimed</Translate>
+          </WarningBox>
         ))}
       {payResult && payResult.type === ConfirmPayResultType.Done && (
         <SuccessBox>
-          <h3>Payment complete</h3>
+          <h3>
+            <Translate>Payment complete</Translate>
+          </h3>
           <p>
-            {!payResult.contractTerms.fulfillment_message
-              ? payResult.contractTerms.fulfillment_url
-                ? `You are going to be redirected to ${payResult.contractTerms.fulfillment_url}`
-                : "You can close this page."
-              : payResult.contractTerms.fulfillment_message}
+            {!payResult.contractTerms.fulfillment_message ? (
+              payResult.contractTerms.fulfillment_url ? (
+                <Translate>
+                  You are going to be redirected to $
+                  {payResult.contractTerms.fulfillment_url}
+                </Translate>
+              ) : (
+                <Translate>You can close this page.</Translate>
+              )
+            ) : (
+              payResult.contractTerms.fulfillment_message
+            )}
           </p>
         </SuccessBox>
       )}
@@ -326,14 +364,14 @@ export function PaymentRequestView({
           Amounts.isNonZero(totalFees) && (
             <Part
               big
-              title="Total to pay"
+              title={<Translate>Total to pay</Translate>}
               text={amountToString(payStatus.amountEffective)}
               kind="negative"
             />
           )}
         <Part
           big
-          title="Purchase amount"
+          title={<Translate>Purchase amount</Translate>}
           text={amountToString(payStatus.amountRaw)}
           kind="neutral"
         />
@@ -341,21 +379,25 @@ export function PaymentRequestView({
           <Fragment>
             <Part
               big
-              title="Fee"
+              title={<Translate>Fee</Translate>}
               text={amountToString(totalFees)}
               kind="negative"
             />
           </Fragment>
         )}
         <Part
-          title="Merchant"
+          title={<Translate>Merchant</Translate>}
           text={contractTerms.merchant.name}
           kind="neutral"
         />
-        <Part title="Purchase" text={contractTerms.summary} kind="neutral" />
+        <Part
+          title={<Translate>Purchase</Translate>}
+          text={contractTerms.summary}
+          kind="neutral"
+        />
         {contractTerms.order_id && (
           <Part
-            title="Receipt"
+            title={<Translate>Receipt</Translate>}
             text={`#${contractTerms.order_id}`}
             kind="neutral"
           />
@@ -373,7 +415,7 @@ function ProductList({ products }: { products: Product[] }): VNode {
   return (
     <Fragment>
       <SmallLightText style={{ margin: ".5em" }}>
-        List of products
+        <Translate>List of products</Translate>
       </SmallLightText>
       <dl>
         {products.map((p, i) => {
@@ -415,15 +457,18 @@ function ProductList({ products }: { products: Product[] }): VNode {
                   {p.quantity ?? 1} x {p.description}
                 </dt>
                 <dd>
-                  Total{` `}
-                  {p.price
-                    ? `${Amounts.stringifyValue(
-                        Amounts.mult(
-                          Amounts.parseOrThrow(p.price),
-                          p.quantity ?? 1,
-                        ).amount,
-                      )} ${p}`
-                    : "free"}
+                  <Translate>Total</Translate>
+                  {` `}
+                  {p.price ? (
+                    `${Amounts.stringifyValue(
+                      Amounts.mult(
+                        Amounts.parseOrThrow(p.price),
+                        p.quantity ?? 1,
+                      ).amount,
+                    )} ${p}`
+                  ) : (
+                    <Translate>free</Translate>
+                  )}
                 </dd>
               </div>
             </div>
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index cecd1ac00..ec32cc37a 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -17,10 +17,10 @@
 /**
  * Page that shows refund status for purchases.
  *
- * @author Florian Dold
+ * @author sebasjm
  */
 
-import { Amounts, ApplyRefundResponse } from "@gnu-taler/taler-util";
+import { Amounts, ApplyRefundResponse, Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { AmountView } from "../renderHtml";
@@ -37,20 +37,28 @@ export function View({ applyResult }: ViewProps): VNode {
     <section class="main">
       <h1>GNU Taler Wallet</h1>
       <article class="fade">
-        <h2>Refund Status</h2>
+        <h2>
+          <Translate>Refund Status</Translate>
+        </h2>
         <p>
-          The product <em>{applyResult.info.summary}</em> has received a total
-          effective refund of{" "}
+          <Translate>
+            The product <em>{applyResult.info.summary}</em> has received a total
+            effective refund of{" "}
+          </Translate>
           <AmountView amount={applyResult.amountRefundGranted} />.
         </p>
         {applyResult.pendingAtExchange ? (
-          <p>Refund processing is still in progress.</p>
+          <p>
+            <Translate>Refund processing is still in progress.</Translate>
+          </p>
         ) : null}
         {!Amounts.isZero(applyResult.amountRefundGone) ? (
           <p>
-            The refund amount of{" "}
-            <AmountView amount={applyResult.amountRefundGone} /> could not be
-            applied.
+            <Translate>
+              The refund amount of{" "}
+              <AmountView amount={applyResult.amountRefundGone} /> could not be
+              applied.
+            </Translate>
           </p>
         ) : null}
       </article>
@@ -82,15 +90,27 @@ export function RefundPage({ talerRefundUri }: Props): VNode {
   console.log("rendering");
 
   if (!talerRefundUri) {
-    return <span>missing taler refund uri</span>;
+    return (
+      <span>
+        <Translate>missing taler refund uri</Translate>
+      </span>
+    );
   }
 
   if (errMsg) {
-    return <span>Error: {errMsg}</span>;
+    return (
+      <span>
+        <Translate>Error: {errMsg}</Translate>
+      </span>
+    );
   }
 
   if (!applyResult) {
-    return <span>Updating refund status</span>;
+    return (
+      <span>
+        <Translate>Updating refund status</Translate>
+      </span>
+    );
   }
 
   return <View applyResult={applyResult} />;
diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
index 584da6d29..00f7bd211 100644
--- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.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 { CheckboxOutlined } from "../components/CheckboxOutlined";
 import { ExchangeXmlTos } from "../components/ExchangeToS";
@@ -34,7 +34,7 @@ export function TermsOfServiceSection({
             {terms.status === "notfound" && (
               <section>
                 <WarningText>
-                  {i18n.str`Exchange doesn't have terms of service`}
+                  <Translate>Exchange doesn't have terms of service</Translate>
                 </WarningText>
               </section>
             )}
@@ -46,21 +46,21 @@ export function TermsOfServiceSection({
           {terms.status === "notfound" && (
             <section>
               <WarningText>
-                {i18n.str`Exchange doesn't have terms of service`}
+                <Translate>Exchange doesn't have terms of service</Translate>
               </WarningText>
             </section>
           )}
           {terms.status === "new" && (
             <section>
               <ButtonSuccess upperCased onClick={() => onReview(true)}>
-                {i18n.str`Review exchange terms of service`}
+                <Translate>Review exchange terms of service</Translate>
               </ButtonSuccess>
             </section>
           )}
           {terms.status === "changed" && (
             <section>
               <ButtonWarning upperCased onClick={() => onReview(true)}>
-                {i18n.str`Review new version of terms of service`}
+                <Translate>Review new version of terms of service</Translate>
               </ButtonWarning>
             </section>
           )}
@@ -72,7 +72,7 @@ export function TermsOfServiceSection({
         {onReview && (
           <section>
             <LinkSuccess upperCased onClick={() => onReview(true)}>
-              {i18n.str`Show terms of service`}
+              <Translate>Show terms of service</Translate>
             </LinkSuccess>
           </section>
         )}
@@ -80,7 +80,9 @@ export function TermsOfServiceSection({
           <CheckboxOutlined
             name="terms"
             enabled={reviewed}
-            label={i18n.str`I accept the exchange terms of service`}
+            label={
+              <Translate>I accept the exchange terms of service</Translate>
+            }
             onToggle={() => {
               onAccept(!reviewed);
               if (onReview) onReview(false);
@@ -95,7 +97,9 @@ export function TermsOfServiceSection({
       {terms.status !== "notfound" && !terms.content && (
         <section>
           <WarningBox>
-            The exchange reply with a empty terms of service
+            <Translate>
+              The exchange reply with a empty terms of service
+            </Translate>
           </WarningBox>
         </section>
       )}
@@ -116,7 +120,7 @@ export function TermsOfServiceSection({
           )}
           {terms.content.type === "pdf" && (
             <a href={terms.content.location.toString()} download="tos.pdf">
-              Download Terms of Service
+              <Translate>Download Terms of Service</Translate>
             </a>
           )}
         </section>
@@ -124,7 +128,7 @@ export function TermsOfServiceSection({
       {reviewed && onReview && (
         <section>
           <LinkSuccess upperCased onClick={() => onReview(false)}>
-            {i18n.str`Hide terms of service`}
+            <Translate>Hide terms of service</Translate>
           </LinkSuccess>
         </section>
       )}
@@ -133,7 +137,9 @@ export function TermsOfServiceSection({
           <CheckboxOutlined
             name="terms"
             enabled={reviewed}
-            label={i18n.str`I accept the exchange terms of service`}
+            label={
+              <Translate>I accept the exchange terms of service</Translate>
+            }
             onToggle={() => {
               onAccept(!reviewed);
               if (onReview) onReview(false);
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index 3f8b09bd1..9bb03b7ac 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -17,10 +17,10 @@
 /**
  * Page shown to the user to accept or ignore a tip from a merchant.
  *
- * @author Florian Dold <dold@taler.net>
+ * @author sebasjm <dold@taler.net>
  */
 
-import { PrepareTipResult } from "@gnu-taler/taler-util";
+import { PrepareTipResult, Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
@@ -46,21 +46,29 @@ export function View({
       <article class="fade">
         {prepareTipResult.accepted ? (
           <span>
-            Tip from <code>{prepareTipResult.merchantBaseUrl}</code> accepted.
-            Check your transactions list for more details.
+            <Translate>
+              Tip from <code>{prepareTipResult.merchantBaseUrl}</code> accepted.
+              Check your transactions list for more details.
+            </Translate>
           </span>
         ) : (
           <div>
             <p>
-              The merchant <code>{prepareTipResult.merchantBaseUrl}</code> is
-              offering you a tip of{" "}
-              <strong>
-                <AmountView amount={prepareTipResult.tipAmountEffective} />
-              </strong>{" "}
-              via the exchange <code>{prepareTipResult.exchangeBaseUrl}</code>
+              <Translate>
+                The merchant <code>{prepareTipResult.merchantBaseUrl}</code> is
+                offering you a tip of{" "}
+                <strong>
+                  <AmountView amount={prepareTipResult.tipAmountEffective} />
+                </strong>{" "}
+                via the exchange <code>{prepareTipResult.exchangeBaseUrl}</code>
+              </Translate>
             </p>
-            <button onClick={onAccept}>Accept tip</button>
-            <button onClick={onIgnore}>Ignore</button>
+            <button onClick={onAccept}>
+              <Translate>Accept tip</Translate>
+            </button>
+            <button onClick={onIgnore}>
+              <Translate>Ignore</Translate>
+            </button>
           </div>
         )}
       </article>
@@ -98,11 +106,19 @@ export function TipPage({ talerTipUri }: Props): VNode {
   };
 
   if (!talerTipUri) {
-    return <span>missing tip uri</span>;
+    return (
+      <span>
+        <Translate>missing tip uri</Translate>
+      </span>
+    );
   }
 
   if (tipIgnored) {
-    return <span>You've ignored the tip.</span>;
+    return (
+      <span>
+        <Translate>You've ignored the tip.</Translate>
+      </span>
+    );
   }
 
   if (!prepareTipResult) {
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 8f45a047c..7d36a6084 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -18,7 +18,7 @@
  * Page shown to the user to confirm creation
  * of a reserve, usually requested by the bank.
  *
- * @author Florian Dold
+ * @author sebasjm
  */
 
 import {
@@ -26,6 +26,7 @@ import {
   Amounts,
   ExchangeListItem,
   i18n,
+  Translate,
   WithdrawUriInfoResponse,
 } from "@gnu-taler/taler-util";
 import { OperationFailedError } from "@gnu-taler/taler-wallet-core";
@@ -117,37 +118,46 @@ export function View({
   return (
     <WalletAction>
       <LogoHeader />
-      <h2>{i18n.str`Digital cash withdrawal`}</h2>
+      <h2>
+        <Translate>Digital cash withdrawal</Translate>
+      </h2>
 
       {withdrawError && (
         <ErrorTalerOperation
-          title="Could not finish the withdrawal operation"
+          title={
+            <Translate>Could not finish the withdrawal operation</Translate>
+          }
           error={withdrawError.operationError}
         />
       )}
 
       <section>
         <Part
-          title="Total to withdraw"
+          title={<Translate>Total to withdraw</Translate>}
           text={amountToString(Amounts.sub(amount, withdrawalFee).amount)}
           kind="positive"
         />
         {Amounts.isNonZero(withdrawalFee) && (
           <Fragment>
             <Part
-              title="Chosen amount"
+              title={<Translate>Chosen amount</Translate>}
               text={amountToString(amount)}
               kind="neutral"
             />
             <Part
-              title="Exchange fee"
+              title={<Translate>Exchange fee</Translate>}
               text={amountToString(withdrawalFee)}
               kind="negative"
             />
           </Fragment>
         )}
         {exchangeBaseUrl && (
-          <Part title="Exchange" text={exchangeBaseUrl} kind="neutral" big />
+          <Part
+            title={<Translate>Exchange</Translate>}
+            text={exchangeBaseUrl}
+            kind="neutral"
+            big
+          />
         )}
       </section>
       {!reviewing && (
@@ -156,7 +166,7 @@ export function View({
             <Fragment>
               <div>
                 <SelectList
-                  label="Known exchanges"
+                  label={<Translate>Known exchanges</Translate>}
                   list={exchanges}
                   value={nextExchange}
                   name="switchingExchange"
@@ -172,14 +182,16 @@ export function View({
                   setSwitchingExchange(false);
                 }}
               >
-                {nextExchange === undefined
-                  ? i18n.str`Cancel exchange selection`
-                  : i18n.str`Confirm exchange selection`}
+                {nextExchange === undefined ? (
+                  <Translate>Cancel exchange selection</Translate>
+                ) : (
+                  <Translate>Confirm exchange selection</Translate>
+                )}
               </LinkSuccess>
             </Fragment>
           ) : (
             <LinkSuccess upperCased onClick={() => setSwitchingExchange(true)}>
-              {i18n.str`Switch exchange`}
+              <Translate>Switch exchange</Translate>
             </LinkSuccess>
           )}
         </section>
@@ -198,7 +210,7 @@ export function View({
             disabled={!exchangeBaseUrl || confirmDisabled}
             onClick={doWithdrawAndCheckError}
           >
-            {i18n.str`Confirm withdrawal`}
+            <Translate>Confirm withdrawal</Translate>
           </ButtonSuccess>
         )}
         {terms.status === "notfound" && (
@@ -207,7 +219,7 @@ export function View({
             disabled={!exchangeBaseUrl}
             onClick={doWithdrawAndCheckError}
           >
-            {i18n.str`Withdraw anyway`}
+            <Translate>Withdraw anyway</Translate>
           </ButtonWarning>
         )}
       </section>
@@ -270,7 +282,7 @@ export function WithdrawPageWithParsedURI({
   if (detailsHook.hasError) {
     return (
       <LoadingError
-        title="Could not load the withdrawal details"
+        title={<Translate>Could not load the withdrawal details</Translate>}
         error={detailsHook}
       />
     );
@@ -293,9 +305,7 @@ export function WithdrawPageWithParsedURI({
 
   const onWithdraw = async (): Promise<void> => {
     if (!exchange) return;
-    console.log("accepting exchange", exchange);
     const res = await wxApi.acceptWithdrawal(uri, exchange);
-    console.log("accept withdrawal response", res);
     if (res.confirmTransferUrl) {
       document.location.href = res.confirmTransferUrl;
     }
@@ -327,7 +337,7 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
   if (!talerWithdrawUri) {
     return (
       <span>
-        <i18n.Translate>missing withdraw uri</i18n.Translate>
+        <Translate>missing withdraw uri</Translate>
       </span>
     );
   }
@@ -337,7 +347,7 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
   if (uriInfoHook.hasError) {
     return (
       <LoadingError
-        title="Could not get the info from the URI"
+        title={<Translate>Could not get the info from the URI</Translate>}
         error={uriInfoHook}
       />
     );
diff --git a/packages/taler-wallet-webextension/src/cta/payback.tsx b/packages/taler-wallet-webextension/src/cta/payback.tsx
deleted file mode 100644
index 1c81b48a0..000000000
--- a/packages/taler-wallet-webextension/src/cta/payback.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- This file is part of TALER
- (C) 2017 Inria
-
- TALER is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import { h, VNode } from "preact";
-
-/**
- * View and edit auditors.
- *
- * @author Florian Dold
- */
-
-/**
- * Imports.
- */
-
-export function makePaybackPage(): VNode {
-  return <div>not implemented</div>;
-}
diff --git a/packages/taler-wallet-webextension/src/cta/reset-required.tsx b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
index 75c4c1962..e8c5a0dff 100644
--- a/packages/taler-wallet-webextension/src/cta/reset-required.tsx
+++ b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
@@ -17,9 +17,10 @@
 /**
  * Page to inform the user when a database reset is required.
  *
- * @author Florian Dold
+ * @author sebasjm
  */
 
+import { Translate } from "@gnu-taler/taler-util";
 import { Component, h, VNode } from "preact";
 import * as wxApi from "../wxApi";
 
@@ -49,14 +50,20 @@ class ResetNotification extends Component<any, State> {
     if (this.state.resetRequired) {
       return (
         <div>
-          <h1>Manual Reset Required</h1>
+          <h1>
+            <Translate>Manual Reset Required</Translate>
+          </h1>
           <p>
-            The wallet&apos;s database in your browser is incompatible with the{" "}
-            currently installed wallet. Please reset manually.
+            <Translate>
+              The wallet&apos;s database in your browser is incompatible with
+              the currently installed wallet. Please reset manually.
+            </Translate>
           </p>
           <p>
-            Once the database format has stabilized, we will provide automatic
-            upgrades.
+            <Translate>
+              Once the database format has stabilized, we will provide automatic
+              upgrades.
+            </Translate>
           </p>
           <input
             id="check"
@@ -67,7 +74,7 @@ class ResetNotification extends Component<any, State> {
             }}
           />{" "}
           <label htmlFor="check">
-            I understand that I will lose all my data
+            <Translate>I understand that I will lose all my data</Translate>
           </label>
           <br />
           <button
@@ -75,15 +82,21 @@ class ResetNotification extends Component<any, State> {
             disabled={!this.state.checked}
             onClick={() => wxApi.resetDb()}
           >
-            Reset
+            <Translate>Reset</Translate>
           </button>
         </div>
       );
     }
     return (
       <div>
-        <h1>Everything is fine!</h1>A reset is not required anymore, you can
-        close this page.
+        <h1>
+          <Translate>Everything is fine!</Translate>
+        </h1>
+        <p>
+          <Translate>
+            A reset is not required anymore, you can close this page.
+          </Translate>
+        </p>
       </div>
     );
   }
diff --git a/packages/taler-wallet-webextension/src/cta/return-coins.tsx b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
index 55f0297d4..22b373899 100644
--- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx
+++ b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
@@ -14,16 +14,21 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 /**
  * Return coins to own bank account.
  *
- * @author Florian Dold
+ * @author sebasjm
  */
 
 /**
  * Imports.
  */
 export function createReturnCoinsPage(): VNode {
-  return <span>Not implemented yet.</span>;
+  return (
+    <span>
+      <Translate>Not implemented yet.</Translate>
+    </span>
+  );
 }