we are force to use i18n.Translate, otherwise pogen won't find the tag

8 files changed, 135 insertions, 113 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
index 5adc641f4..82d898d77 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
@@ -111,7 +111,7 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
   if (!talerPayUri) {
     return (
       <span>
-        <Translate>missing pay uri</Translate>
+        <i18n.Translate>missing pay uri</i18n.Translate>
       </span>
     );
   }
@@ -122,14 +122,14 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
         <WalletAction>
           <LogoHeader />
           <h2>
-            <Translate>Digital cash payment</Translate>
+            <i18n.Translate>Digital cash payment</i18n.Translate>
           </h2>
           <section>
             <ErrorTalerOperation
               title={
-                <Translate>
+                <i18n.Translate>
                   Could not get the payment information for this order
-                </Translate>
+                </i18n.Translate>
               }
               error={payErrMsg?.operationError}
             />
@@ -142,13 +142,13 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
         <WalletAction>
           <LogoHeader />
           <h2>
-            <Translate>Digital cash payment</Translate>
+            <i18n.Translate>Digital cash payment</i18n.Translate>
           </h2>
           <section>
             <p>
-              <Translate>
+              <i18n.Translate>
                 Could not get the payment information for this order
-              </Translate>
+              </i18n.Translate>
             </p>
             <ErrorBox>{payErrMsg}</ErrorBox>
           </section>
@@ -157,7 +157,7 @@ export function DepositPage({ talerPayUri, goBack }: Props): VNode {
     }
     return (
       <span>
-        <Translate>Loading payment information</Translate> ...
+        <i18n.Translate>Loading payment information</i18n.Translate> ...
       </span>
     );
   }
@@ -205,28 +205,28 @@ export function PaymentRequestView({
       <LogoHeader />
 
       <h2>
-        <Translate>Digital cash deposit</Translate>
+        <i18n.Translate>Digital cash deposit</i18n.Translate>
       </h2>
       {payStatus.status === PreparePayResultType.AlreadyConfirmed &&
         (payStatus.paid ? (
           <SuccessBox>
-            <Translate>Already paid</Translate>
+            <i18n.Translate>Already paid</i18n.Translate>
           </SuccessBox>
         ) : (
           <WarningBox>
-            <Translate>Already claimed</Translate>
+            <i18n.Translate>Already claimed</i18n.Translate>
           </WarningBox>
         ))}
       {payResult && payResult.type === ConfirmPayResultType.Done && (
         <SuccessBox>
           <h3>
-            <Translate>Payment complete</Translate>
+            <i18n.Translate>Payment complete</i18n.Translate>
           </h3>
           <p>
             {!payResult.contractTerms.fulfillment_message ? (
-              <Translate>
+              <i18n.Translate>
                 You will now be sent back to the merchant you came from.
-              </Translate>
+              </i18n.Translate>
             ) : (
               payResult.contractTerms.fulfillment_message
             )}
@@ -238,7 +238,7 @@ export function PaymentRequestView({
           Amounts.isNonZero(totalFees) && (
             <Part
               big
-              title={<Translate>Total to pay</Translate>}
+              title={<i18n.Translate>Total to pay</i18n.Translate>}
               text={amountToPretty(
                 Amounts.parseOrThrow(payStatus.amountEffective),
               )}
@@ -247,7 +247,7 @@ export function PaymentRequestView({
           )}
         <Part
           big
-          title={<Translate>Purchase amount</Translate>}
+          title={<i18n.Translate>Purchase amount</i18n.Translate>}
           text={amountToPretty(Amounts.parseOrThrow(payStatus.amountRaw))}
           kind="neutral"
         />
@@ -255,25 +255,25 @@ export function PaymentRequestView({
           <Fragment>
             <Part
               big
-              title={<Translate>Fee</Translate>}
+              title={<i18n.Translate>Fee</i18n.Translate>}
               text={amountToPretty(totalFees)}
               kind="negative"
             />
           </Fragment>
         )}
         <Part
-          title={<Translate>Merchant</Translate>}
+          title={<i18n.Translate>Merchant</i18n.Translate>}
           text={contractTerms.merchant.name}
           kind="neutral"
         />
         <Part
-          title={<Translate>Purchase</Translate>}
+          title={<i18n.Translate>Purchase</i18n.Translate>}
           text={contractTerms.summary}
           kind="neutral"
         />
         {contractTerms.order_id && (
           <Part
-            title={<Translate>Receipt</Translate>}
+            title={<i18n.Translate>Receipt</i18n.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 7ed0d072f..4fe44dcff 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -110,7 +110,7 @@ export function PayPage({
   if (hook.hasError) {
     return (
       <LoadingError
-        title={<Translate>Could not load pay status</Translate>}
+        title={<i18n.Translate>Could not load pay status</i18n.Translate>}
         error={hook}
       />
     );
@@ -187,9 +187,9 @@ export function PaymentRequestView({
     return (
       <ErrorMessage
         title={
-          <Translate>
+          <i18n.Translate>
             Could not load contract terms from merchant or wallet backend.
-          </Translate>
+          </i18n.Translate>
         }
       />
     );
@@ -214,20 +214,20 @@ export function PaymentRequestView({
       <section>
         <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
           {!showQR ? (
-            <Translate>Pay with a mobile phone</Translate>
+            <i18n.Translate>Pay with a mobile phone</i18n.Translate>
           ) : (
-            <Translate>Hide QR</Translate>
+            <i18n.Translate>Hide QR</i18n.Translate>
           )}
         </LinkSuccess>
         {showQR && (
           <div>
             <QR text={privateUri} />
-            <Translate>
+            <i18n.Translate>
               Scan the QR code or
               <a href={privateUri}>
-                <Translate>click here</Translate>
+                <i18n.Translate>click here</i18n.Translate>
               </a>
-            </Translate>
+            </i18n.Translate>
           </div>
         )}
       </section>
@@ -241,7 +241,7 @@ export function PaymentRequestView({
           <section>
             <div>
               <p>
-                <Translate>Processing</Translate>...
+                <i18n.Translate>Processing</i18n.Translate>...
               </p>
             </div>
           </section>
@@ -254,9 +254,9 @@ export function PaymentRequestView({
         <Fragment>
           <section>
             <ButtonSuccess upperCased onClick={onClick}>
-              <Translate>
+              <i18n.Translate>
                 Pay {amountToString(payStatus.amountEffective)}
-              </Translate>
+              </i18n.Translate>
             </ButtonSuccess>
           </section>
           <Alternative />
@@ -269,22 +269,22 @@ export function PaymentRequestView({
           <section>
             {balance ? (
               <WarningBox>
-                <Translate>
+                <i18n.Translate>
                   Your balance of {amountToString(balance)} is not enough to pay
                   for this purchase
-                </Translate>
+                </i18n.Translate>
               </WarningBox>
             ) : (
               <WarningBox>
-                <Translate>
+                <i18n.Translate>
                   Your balance is not enough to pay for this purchase.
-                </Translate>
+                </i18n.Translate>
               </WarningBox>
             )}
           </section>
           <section>
             <ButtonSuccess upperCased onClick={goToWalletManualWithdraw}>
-              <Translate>Withdraw digital cash</Translate>
+              <i18n.Translate>Withdraw digital cash</i18n.Translate>
             </ButtonSuccess>
           </section>
           <Alternative />
@@ -297,7 +297,7 @@ export function PaymentRequestView({
           <section>
             {payStatus.paid && contractTerms.fulfillment_message && (
               <Part
-                title={<Translate>Merchant message</Translate>}
+                title={<i18n.Translate>Merchant message</i18n.Translate>}
                 text={contractTerms.fulfillment_message}
                 kind="neutral"
               />
@@ -315,43 +315,43 @@ export function PaymentRequestView({
       <LogoHeader />
 
       <h2>
-        <Translate>Digital cash payment</Translate>
+        <i18n.Translate>Digital cash payment</i18n.Translate>
       </h2>
       {payStatus.status === PreparePayResultType.AlreadyConfirmed &&
         (payStatus.paid ? (
           payStatus.contractTerms.fulfillment_url ? (
             <SuccessBox>
-              <Translate>
+              <i18n.Translate>
                 Already paid, you are going to be redirected to{" "}
                 <a href={payStatus.contractTerms.fulfillment_url}>
                   {payStatus.contractTerms.fulfillment_url}
                 </a>
-              </Translate>
+              </i18n.Translate>
             </SuccessBox>
           ) : (
             <SuccessBox>
-              <Translate>Already paid</Translate>
+              <i18n.Translate>Already paid</i18n.Translate>
             </SuccessBox>
           )
         ) : (
           <WarningBox>
-            <Translate>Already claimed</Translate>
+            <i18n.Translate>Already claimed</i18n.Translate>
           </WarningBox>
         ))}
       {payResult && payResult.type === ConfirmPayResultType.Done && (
         <SuccessBox>
           <h3>
-            <Translate>Payment complete</Translate>
+            <i18n.Translate>Payment complete</i18n.Translate>
           </h3>
           <p>
             {!payResult.contractTerms.fulfillment_message ? (
               payResult.contractTerms.fulfillment_url ? (
-                <Translate>
+                <i18n.Translate>
                   You are going to be redirected to $
                   {payResult.contractTerms.fulfillment_url}
-                </Translate>
+                </i18n.Translate>
               ) : (
-                <Translate>You can close this page.</Translate>
+                <i18n.Translate>You can close this page.</i18n.Translate>
               )
             ) : (
               payResult.contractTerms.fulfillment_message
@@ -364,14 +364,14 @@ export function PaymentRequestView({
           Amounts.isNonZero(totalFees) && (
             <Part
               big
-              title={<Translate>Total to pay</Translate>}
+              title={<i18n.Translate>Total to pay</i18n.Translate>}
               text={amountToString(payStatus.amountEffective)}
               kind="negative"
             />
           )}
         <Part
           big
-          title={<Translate>Purchase amount</Translate>}
+          title={<i18n.Translate>Purchase amount</i18n.Translate>}
           text={amountToString(payStatus.amountRaw)}
           kind="neutral"
         />
@@ -379,25 +379,25 @@ export function PaymentRequestView({
           <Fragment>
             <Part
               big
-              title={<Translate>Fee</Translate>}
+              title={<i18n.Translate>Fee</i18n.Translate>}
               text={amountToString(totalFees)}
               kind="negative"
             />
           </Fragment>
         )}
         <Part
-          title={<Translate>Merchant</Translate>}
+          title={<i18n.Translate>Merchant</i18n.Translate>}
           text={contractTerms.merchant.name}
           kind="neutral"
         />
         <Part
-          title={<Translate>Purchase</Translate>}
+          title={<i18n.Translate>Purchase</i18n.Translate>}
           text={contractTerms.summary}
           kind="neutral"
         />
         {contractTerms.order_id && (
           <Part
-            title={<Translate>Receipt</Translate>}
+            title={<i18n.Translate>Receipt</i18n.Translate>}
             text={`#${contractTerms.order_id}`}
             kind="neutral"
           />
@@ -415,7 +415,7 @@ function ProductList({ products }: { products: Product[] }): VNode {
   return (
     <Fragment>
       <SmallLightText style={{ margin: ".5em" }}>
-        <Translate>List of products</Translate>
+        <i18n.Translate>List of products</i18n.Translate>
       </SmallLightText>
       <dl>
         {products.map((p, i) => {
@@ -457,7 +457,7 @@ function ProductList({ products }: { products: Product[] }): VNode {
                   {p.quantity ?? 1} x {p.description}
                 </dt>
                 <dd>
-                  <Translate>Total</Translate>
+                  <i18n.Translate>Total</i18n.Translate>
                   {` `}
                   {p.price ? (
                     `${Amounts.stringifyValue(
@@ -467,7 +467,7 @@ function ProductList({ products }: { products: Product[] }): VNode {
                       ).amount,
                     )} ${p}`
                   ) : (
-                    <Translate>free</Translate>
+                    <i18n.Translate>free</i18n.Translate>
                   )}
                 </dd>
               </div>
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index ec32cc37a..8ce008bcd 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -20,7 +20,7 @@
  * @author sebasjm
  */
 
-import { Amounts, ApplyRefundResponse, Translate } from "@gnu-taler/taler-util";
+import { Amounts, ApplyRefundResponse, i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { AmountView } from "../renderHtml";
@@ -38,27 +38,29 @@ export function View({ applyResult }: ViewProps): VNode {
       <h1>GNU Taler Wallet</h1>
       <article class="fade">
         <h2>
-          <Translate>Refund Status</Translate>
+          <i18n.Translate>Refund Status</i18n.Translate>
         </h2>
         <p>
-          <Translate>
+          <i18n.Translate>
             The product <em>{applyResult.info.summary}</em> has received a total
             effective refund of{" "}
-          </Translate>
+          </i18n.Translate>
           <AmountView amount={applyResult.amountRefundGranted} />.
         </p>
         {applyResult.pendingAtExchange ? (
           <p>
-            <Translate>Refund processing is still in progress.</Translate>
+            <i18n.Translate>
+              Refund processing is still in progress.
+            </i18n.Translate>
           </p>
         ) : null}
         {!Amounts.isZero(applyResult.amountRefundGone) ? (
           <p>
-            <Translate>
+            <i18n.Translate>
               The refund amount of{" "}
               <AmountView amount={applyResult.amountRefundGone} /> could not be
               applied.
-            </Translate>
+            </i18n.Translate>
           </p>
         ) : null}
       </article>
@@ -92,7 +94,7 @@ export function RefundPage({ talerRefundUri }: Props): VNode {
   if (!talerRefundUri) {
     return (
       <span>
-        <Translate>missing taler refund uri</Translate>
+        <i18n.Translate>missing taler refund uri</i18n.Translate>
       </span>
     );
   }
@@ -100,7 +102,7 @@ export function RefundPage({ talerRefundUri }: Props): VNode {
   if (errMsg) {
     return (
       <span>
-        <Translate>Error: {errMsg}</Translate>
+        <i18n.Translate>Error: {errMsg}</i18n.Translate>
       </span>
     );
   }
@@ -108,7 +110,7 @@ export function RefundPage({ talerRefundUri }: Props): VNode {
   if (!applyResult) {
     return (
       <span>
-        <Translate>Updating refund status</Translate>
+        <i18n.Translate>Updating refund status</i18n.Translate>
       </span>
     );
   }
diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
index 00f7bd211..1244b7915 100644
--- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
@@ -34,7 +34,9 @@ export function TermsOfServiceSection({
             {terms.status === "notfound" && (
               <section>
                 <WarningText>
-                  <Translate>Exchange doesn't have terms of service</Translate>
+                  <i18n.Translate>
+                    Exchange doesn't have terms of service
+                  </i18n.Translate>
                 </WarningText>
               </section>
             )}
@@ -46,21 +48,27 @@ export function TermsOfServiceSection({
           {terms.status === "notfound" && (
             <section>
               <WarningText>
-                <Translate>Exchange doesn't have terms of service</Translate>
+                <i18n.Translate>
+                  Exchange doesn't have terms of service
+                </i18n.Translate>
               </WarningText>
             </section>
           )}
           {terms.status === "new" && (
             <section>
               <ButtonSuccess upperCased onClick={() => onReview(true)}>
-                <Translate>Review exchange terms of service</Translate>
+                <i18n.Translate>
+                  Review exchange terms of service
+                </i18n.Translate>
               </ButtonSuccess>
             </section>
           )}
           {terms.status === "changed" && (
             <section>
               <ButtonWarning upperCased onClick={() => onReview(true)}>
-                <Translate>Review new version of terms of service</Translate>
+                <i18n.Translate>
+                  Review new version of terms of service
+                </i18n.Translate>
               </ButtonWarning>
             </section>
           )}
@@ -72,7 +80,7 @@ export function TermsOfServiceSection({
         {onReview && (
           <section>
             <LinkSuccess upperCased onClick={() => onReview(true)}>
-              <Translate>Show terms of service</Translate>
+              <i18n.Translate>Show terms of service</i18n.Translate>
             </LinkSuccess>
           </section>
         )}
@@ -81,7 +89,9 @@ export function TermsOfServiceSection({
             name="terms"
             enabled={reviewed}
             label={
-              <Translate>I accept the exchange terms of service</Translate>
+              <i18n.Translate>
+                I accept the exchange terms of service
+              </i18n.Translate>
             }
             onToggle={() => {
               onAccept(!reviewed);
@@ -97,9 +107,9 @@ export function TermsOfServiceSection({
       {terms.status !== "notfound" && !terms.content && (
         <section>
           <WarningBox>
-            <Translate>
+            <i18n.Translate>
               The exchange reply with a empty terms of service
-            </Translate>
+            </i18n.Translate>
           </WarningBox>
         </section>
       )}
@@ -120,7 +130,7 @@ export function TermsOfServiceSection({
           )}
           {terms.content.type === "pdf" && (
             <a href={terms.content.location.toString()} download="tos.pdf">
-              <Translate>Download Terms of Service</Translate>
+              <i18n.Translate>Download Terms of Service</i18n.Translate>
             </a>
           )}
         </section>
@@ -128,7 +138,7 @@ export function TermsOfServiceSection({
       {reviewed && onReview && (
         <section>
           <LinkSuccess upperCased onClick={() => onReview(false)}>
-            <Translate>Hide terms of service</Translate>
+            <i18n.Translate>Hide terms of service</i18n.Translate>
           </LinkSuccess>
         </section>
       )}
@@ -138,7 +148,9 @@ export function TermsOfServiceSection({
             name="terms"
             enabled={reviewed}
             label={
-              <Translate>I accept the exchange terms of service</Translate>
+              <i18n.Translate>
+                I accept the exchange terms of service
+              </i18n.Translate>
             }
             onToggle={() => {
               onAccept(!reviewed);
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index 9bb03b7ac..ff86ce8c7 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -20,7 +20,7 @@
  * @author sebasjm <dold@taler.net>
  */
 
-import { PrepareTipResult, Translate } from "@gnu-taler/taler-util";
+import { PrepareTipResult, i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
@@ -46,28 +46,28 @@ export function View({
       <article class="fade">
         {prepareTipResult.accepted ? (
           <span>
-            <Translate>
+            <i18n.Translate>
               Tip from <code>{prepareTipResult.merchantBaseUrl}</code> accepted.
               Check your transactions list for more details.
-            </Translate>
+            </i18n.Translate>
           </span>
         ) : (
           <div>
             <p>
-              <Translate>
+              <i18n.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>
+              </i18n.Translate>
             </p>
             <button onClick={onAccept}>
-              <Translate>Accept tip</Translate>
+              <i18n.Translate>Accept tip</i18n.Translate>
             </button>
             <button onClick={onIgnore}>
-              <Translate>Ignore</Translate>
+              <i18n.Translate>Ignore</i18n.Translate>
             </button>
           </div>
         )}
@@ -108,7 +108,7 @@ export function TipPage({ talerTipUri }: Props): VNode {
   if (!talerTipUri) {
     return (
       <span>
-        <Translate>missing tip uri</Translate>
+        <i18n.Translate>missing tip uri</i18n.Translate>
       </span>
     );
   }
@@ -116,7 +116,7 @@ export function TipPage({ talerTipUri }: Props): VNode {
   if (tipIgnored) {
     return (
       <span>
-        <Translate>You've ignored the tip.</Translate>
+        <i18n.Translate>You've ignored the tip.</i18n.Translate>
       </span>
     );
   }
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 7d36a6084..7c9745ddc 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -119,13 +119,15 @@ export function View({
     <WalletAction>
       <LogoHeader />
       <h2>
-        <Translate>Digital cash withdrawal</Translate>
+        <i18n.Translate>Digital cash withdrawal</i18n.Translate>
       </h2>
 
       {withdrawError && (
         <ErrorTalerOperation
           title={
-            <Translate>Could not finish the withdrawal operation</Translate>
+            <i18n.Translate>
+              Could not finish the withdrawal operation
+            </i18n.Translate>
           }
           error={withdrawError.operationError}
         />
@@ -133,19 +135,19 @@ export function View({
 
       <section>
         <Part
-          title={<Translate>Total to withdraw</Translate>}
+          title={<i18n.Translate>Total to withdraw</i18n.Translate>}
           text={amountToString(Amounts.sub(amount, withdrawalFee).amount)}
           kind="positive"
         />
         {Amounts.isNonZero(withdrawalFee) && (
           <Fragment>
             <Part
-              title={<Translate>Chosen amount</Translate>}
+              title={<i18n.Translate>Chosen amount</i18n.Translate>}
               text={amountToString(amount)}
               kind="neutral"
             />
             <Part
-              title={<Translate>Exchange fee</Translate>}
+              title={<i18n.Translate>Exchange fee</i18n.Translate>}
               text={amountToString(withdrawalFee)}
               kind="negative"
             />
@@ -153,7 +155,7 @@ export function View({
         )}
         {exchangeBaseUrl && (
           <Part
-            title={<Translate>Exchange</Translate>}
+            title={<i18n.Translate>Exchange</i18n.Translate>}
             text={exchangeBaseUrl}
             kind="neutral"
             big
@@ -166,7 +168,7 @@ export function View({
             <Fragment>
               <div>
                 <SelectList
-                  label={<Translate>Known exchanges</Translate>}
+                  label={<i18n.Translate>Known exchanges</i18n.Translate>}
                   list={exchanges}
                   value={nextExchange}
                   name="switchingExchange"
@@ -183,15 +185,15 @@ export function View({
                 }}
               >
                 {nextExchange === undefined ? (
-                  <Translate>Cancel exchange selection</Translate>
+                  <i18n.Translate>Cancel exchange selection</i18n.Translate>
                 ) : (
-                  <Translate>Confirm exchange selection</Translate>
+                  <i18n.Translate>Confirm exchange selection</i18n.Translate>
                 )}
               </LinkSuccess>
             </Fragment>
           ) : (
             <LinkSuccess upperCased onClick={() => setSwitchingExchange(true)}>
-              <Translate>Switch exchange</Translate>
+              <i18n.Translate>Switch exchange</i18n.Translate>
             </LinkSuccess>
           )}
         </section>
@@ -210,7 +212,7 @@ export function View({
             disabled={!exchangeBaseUrl || confirmDisabled}
             onClick={doWithdrawAndCheckError}
           >
-            <Translate>Confirm withdrawal</Translate>
+            <i18n.Translate>Confirm withdrawal</i18n.Translate>
           </ButtonSuccess>
         )}
         {terms.status === "notfound" && (
@@ -219,7 +221,7 @@ export function View({
             disabled={!exchangeBaseUrl}
             onClick={doWithdrawAndCheckError}
           >
-            <Translate>Withdraw anyway</Translate>
+            <i18n.Translate>Withdraw anyway</i18n.Translate>
           </ButtonWarning>
         )}
       </section>
@@ -282,7 +284,9 @@ export function WithdrawPageWithParsedURI({
   if (detailsHook.hasError) {
     return (
       <LoadingError
-        title={<Translate>Could not load the withdrawal details</Translate>}
+        title={
+          <i18n.Translate>Could not load the withdrawal details</i18n.Translate>
+        }
         error={detailsHook}
       />
     );
@@ -337,7 +341,7 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
   if (!talerWithdrawUri) {
     return (
       <span>
-        <Translate>missing withdraw uri</Translate>
+        <i18n.Translate>missing withdraw uri</i18n.Translate>
       </span>
     );
   }
@@ -347,7 +351,9 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
   if (uriInfoHook.hasError) {
     return (
       <LoadingError
-        title={<Translate>Could not get the info from the URI</Translate>}
+        title={
+          <i18n.Translate>Could not get the info from the URI</i18n.Translate>
+        }
         error={uriInfoHook}
       />
     );
diff --git a/packages/taler-wallet-webextension/src/cta/reset-required.tsx b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
index e8c5a0dff..350c32d76 100644
--- a/packages/taler-wallet-webextension/src/cta/reset-required.tsx
+++ b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
@@ -20,7 +20,7 @@
  * @author sebasjm
  */
 
-import { Translate } from "@gnu-taler/taler-util";
+import { i18n } from "@gnu-taler/taler-util";
 import { Component, h, VNode } from "preact";
 import * as wxApi from "../wxApi";
 
@@ -51,19 +51,19 @@ class ResetNotification extends Component<any, State> {
       return (
         <div>
           <h1>
-            <Translate>Manual Reset Required</Translate>
+            <i18n.Translate>Manual Reset Required</i18n.Translate>
           </h1>
           <p>
-            <Translate>
+            <i18n.Translate>
               The wallet&apos;s database in your browser is incompatible with
               the currently installed wallet. Please reset manually.
-            </Translate>
+            </i18n.Translate>
           </p>
           <p>
-            <Translate>
+            <i18n.Translate>
               Once the database format has stabilized, we will provide automatic
               upgrades.
-            </Translate>
+            </i18n.Translate>
           </p>
           <input
             id="check"
@@ -74,7 +74,9 @@ class ResetNotification extends Component<any, State> {
             }}
           />{" "}
           <label htmlFor="check">
-            <Translate>I understand that I will lose all my data</Translate>
+            <i18n.Translate>
+              I understand that I will lose all my data
+            </i18n.Translate>
           </label>
           <br />
           <button
@@ -82,7 +84,7 @@ class ResetNotification extends Component<any, State> {
             disabled={!this.state.checked}
             onClick={() => wxApi.resetDb()}
           >
-            <Translate>Reset</Translate>
+            <i18n.Translate>Reset</i18n.Translate>
           </button>
         </div>
       );
@@ -90,12 +92,12 @@ class ResetNotification extends Component<any, State> {
     return (
       <div>
         <h1>
-          <Translate>Everything is fine!</Translate>
+          <i18n.Translate>Everything is fine!</i18n.Translate>
         </h1>
         <p>
-          <Translate>
+          <i18n.Translate>
             A reset is not required anymore, you can close this page.
-          </Translate>
+          </i18n.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 22b373899..1d688fa06 100644
--- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx
+++ b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Translate } from "@gnu-taler/taler-util";
+import { i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 /**
  * Return coins to own bank account.
@@ -28,7 +28,7 @@ import { h, VNode } from "preact";
 export function createReturnCoinsPage(): VNode {
   return (
     <span>
-      <Translate>Not implemented yet.</Translate>
+      <i18n.Translate>Not implemented yet.</i18n.Translate>
     </span>
   );
 }