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

14 files changed, 243 insertions, 218 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index d47803212..229fab7be 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
@@ -1,8 +1,4 @@
-import {
-  classifyTalerUri,
-  TalerUriType,
-  Translate,
-} from "@gnu-taler/taler-util";
+import { classifyTalerUri, TalerUriType, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button, ButtonSuccess, InputWithLabel } from "../components/styled";
@@ -15,15 +11,15 @@ export interface Props {
 function buttonLabelByTalerType(type: TalerUriType): VNode {
   switch (type) {
     case TalerUriType.TalerNotifyReserve:
-      return <Translate>Open reserve page</Translate>;
+      return <i18n.Translate>Open reserve page</i18n.Translate>;
     case TalerUriType.TalerPay:
-      return <Translate>Open pay page</Translate>;
+      return <i18n.Translate>Open pay page</i18n.Translate>;
     case TalerUriType.TalerRefund:
-      return <Translate>Open refund page</Translate>;
+      return <i18n.Translate>Open refund page</i18n.Translate>;
     case TalerUriType.TalerTip:
-      return <Translate>Open tip page</Translate>;
+      return <i18n.Translate>Open tip page</i18n.Translate>;
     case TalerUriType.TalerWithdraw:
-      return <Translate>Open withdraw page</Translate>;
+      return <i18n.Translate>Open withdraw page</i18n.Translate>;
   }
   return <Fragment />;
 }
@@ -52,7 +48,7 @@ export function AddNewActionView({ onCancel }: Props): VNode {
       </section>
       <footer>
         <Button onClick={onCancel}>
-          <Translate>Back</Translate>
+          <i18n.Translate>Back</i18n.Translate>
         </Button>
         {uriType !== TalerUriType.Unknown && (
           <ButtonSuccess
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 73fff6e85..a5821d48b 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -72,7 +72,7 @@ export function BackupPage({ onAddProvider }: Props): VNode {
   if (status.hasError) {
     return (
       <LoadingError
-        title={<Translate>Could not load backup providers</Translate>}
+        title={<i18n.Translate>Could not load backup providers</i18n.Translate>}
         error={status}
       />
     );
@@ -126,10 +126,10 @@ export function BackupView({
         {!providers.length && (
           <Centered style={{ marginTop: 100 }}>
             <BoldLight>
-              <Translate>No backup providers configured</Translate>
+              <i18n.Translate>No backup providers configured</i18n.Translate>
             </BoldLight>
             <ButtonSuccess onClick={onAddProvider}>
-              <Translate>Add provider</Translate>
+              <i18n.Translate>Add provider</i18n.Translate>
             </ButtonSuccess>
           </Centered>
         )}
@@ -140,13 +140,13 @@ export function BackupView({
           <div>
             <ButtonPrimary onClick={onSyncAll}>
               {providers.length > 1 ? (
-                <Translate>Sync all backups</Translate>
+                <i18n.Translate>Sync all backups</i18n.Translate>
               ) : (
-                <Translate>Sync now</Translate>
+                <i18n.Translate>Sync now</i18n.Translate>
               )}
             </ButtonPrimary>
             <ButtonSuccess onClick={onAddProvider}>
-              <Translate>Add provider</Translate>
+              <i18n.Translate>Add provider</i18n.Translate>
             </ButtonSuccess>
           </div>
         </footer>
@@ -184,12 +184,12 @@ function BackupLayout(props: TransactionLayoutProps): VNode {
 
         {dateStr && (
           <SmallText style={{ marginTop: 5 }}>
-            <Translate>Last synced</Translate>: {dateStr}
+            <i18n.Translate>Last synced</i18n.Translate>: {dateStr}
           </SmallText>
         )}
         {!dateStr && (
           <SmallLightText style={{ marginTop: 5 }}>
-            <Translate>Not synced</Translate>
+            <i18n.Translate>Not synced</i18n.Translate>
           </SmallLightText>
         )}
       </div>
@@ -208,7 +208,7 @@ function ExpirationText({ until }: { until: Timestamp }): VNode {
   return (
     <Fragment>
       <CenteredText>
-        <Translate>Expires in</Translate>
+        <i18n.Translate>Expires in</i18n.Translate>
       </CenteredText>
       <CenteredBoldText {...{ color: colorByTimeToExpire(until) }}>
         {" "}
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index b0eddeda5..96644be28 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -100,21 +100,21 @@ export function CreateManualWithdraw({
     return (
       <section>
         <h2>
-          <Translate>Manual Withdrawal</Translate>
+          <i18n.Translate>Manual Withdrawal</i18n.Translate>
         </h2>
         <LightText>
-          <Translate>
+          <i18n.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>
+          </i18n.Translate>
         </LightText>
         <Centered style={{ marginTop: 100 }}>
           <BoldLight>
-            <Translate>No exchange configured</Translate>
+            <i18n.Translate>No exchange configured</i18n.Translate>
           </BoldLight>
           <ButtonSuccess onClick={onAddExchange}>
-            <Translate>Add exchange</Translate>
+            <i18n.Translate>Add exchange</i18n.Translate>
           </ButtonSuccess>
         </Centered>
       </section>
@@ -126,24 +126,24 @@ export function CreateManualWithdraw({
       <section>
         {error && (
           <ErrorMessage
-            title={<Translate>Can't create the reserve</Translate>}
+            title={<i18n.Translate>Can't create the reserve</i18n.Translate>}
             description={error}
           />
         )}
         <h2>
-          <Translate>Manual Withdrawal</Translate>
+          <i18n.Translate>Manual Withdrawal</i18n.Translate>
         </h2>
         <LightText>
-          <Translate>
+          <i18n.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>
+          </i18n.Translate>
         </LightText>
         <p>
           <Input>
             <SelectList
-              label={<Translate>Currency</Translate>}
+              label={<i18n.Translate>Currency</i18n.Translate>}
               list={currencyMap}
               name="currency"
               value={currency}
@@ -152,7 +152,7 @@ export function CreateManualWithdraw({
           </Input>
           <Input>
             <SelectList
-              label={<Translate>Exchange</Translate>}
+              label={<i18n.Translate>Exchange</i18n.Translate>}
               list={exchangeMap}
               name="currency"
               value={exchange}
@@ -161,13 +161,13 @@ export function CreateManualWithdraw({
           </Input>
           <div style={{ display: "flex", justifyContent: "space-between" }}>
             <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}>
-              <Translate>Add Exchange</Translate>
+              <i18n.Translate>Add Exchange</i18n.Translate>
             </LinkPrimary>
           </div>
           {currency && (
             <InputWithLabel invalid={!!amount && !parsedAmount}>
               <label>
-                <Translate>Amount</Translate>
+                <i18n.Translate>Amount</i18n.Translate>
               </label>
               <div>
                 <span>{currency}</span>
@@ -187,7 +187,7 @@ export function CreateManualWithdraw({
           disabled={!parsedAmount || !exchange}
           onClick={() => onCreate(exchange, parsedAmount!)}
         >
-          <Translate>Start withdrawal</Translate>
+          <i18n.Translate>Start withdrawal</i18n.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 7a5e02d3b..d1d618e9f 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -19,7 +19,7 @@ import {
   Amounts,
   AmountString,
   PaytoUri,
-  Translate,
+  i18n,
 } from "@gnu-taler/taler-util";
 import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { Fragment, h, VNode } from "preact";
@@ -135,7 +135,7 @@ export function View({
   if (!balance) {
     return (
       <div>
-        <Translate>no balance</Translate>
+        <i18n.Translate>no balance</i18n.Translate>
       </div>
     );
   }
@@ -143,10 +143,12 @@ export function View({
     return (
       <WarningBox>
         <p>
-          <Translate>There is no known bank account to send money to</Translate>
+          <i18n.Translate>
+            There is no known bank account to send money to
+          </i18n.Translate>
         </p>
         <ButtonBoxWarning>
-          <Translate>Withdraw</Translate>
+          <i18n.Translate>Withdraw</i18n.Translate>
         </ButtonBoxWarning>
       </WarningBox>
     );
@@ -172,12 +174,12 @@ export function View({
   return (
     <Fragment>
       <h2>
-        <Translate>Send {currency} to your account</Translate>
+        <i18n.Translate>Send {currency} to your account</i18n.Translate>
       </h2>
       <section>
         <Input>
           <SelectList
-            label={<Translate>Bank account IBAN number</Translate>}
+            label={<i18n.Translate>Bank account IBAN number</i18n.Translate>}
             list={accountMap}
             name="account"
             value={String(accountIdx)}
@@ -186,7 +188,7 @@ export function View({
         </Input>
         <InputWithLabel invalid={!!error}>
           <label>
-            <Translate>Amount</Translate>
+            <i18n.Translate>Amount</i18n.Translate>
           </label>
           <div>
             <span>{currency}</span>
@@ -210,7 +212,7 @@ export function View({
           <Fragment>
             <InputWithLabel>
               <label>
-                <Translate>Deposit fee</Translate>
+                <i18n.Translate>Deposit fee</i18n.Translate>
               </label>
               <div>
                 <span>{currency}</span>
@@ -224,7 +226,7 @@ export function View({
 
             <InputWithLabel>
               <label>
-                <Translate>Total deposit</Translate>
+                <i18n.Translate>Total deposit</i18n.Translate>
               </label>
               <div>
                 <span>{currency}</span>
@@ -242,13 +244,13 @@ export function View({
         <div />
         {unableToDeposit ? (
           <ButtonPrimary disabled>
-            <Translate>Deposit</Translate>
+            <i18n.Translate>Deposit</i18n.Translate>
           </ButtonPrimary>
         ) : (
           <ButtonPrimary onClick={() => onSend(accountURI, amountStr)}>
-            <Translate>
+            <i18n.Translate>
               Deposit {Amounts.stringifyValue(totalToDeposit)} {currency}
-            </Translate>
+            </i18n.Translate>
           </ButtonPrimary>
         )}
       </footer>
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index 06d8abd2b..1ffca827b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
@@ -85,10 +85,10 @@ export function View({
     <Fragment>
       <section>
         <h1>
-          <Translate>Review terms of service</Translate>
+          <i18n.Translate>Review terms of service</i18n.Translate>
         </h1>
         <div>
-          <Translate>Exchange URL</Translate>:
+          <i18n.Translate>Exchange URL</i18n.Translate>:
           <a href={url} target="_blank" rel="noreferrer">
             {url}
           </a>
@@ -109,28 +109,28 @@ export function View({
 
       <footer>
         <Button onClick={onCancel}>
-          <Translate>Cancel</Translate>
+          <i18n.Translate>Cancel</i18n.Translate>
         </Button>
         {!terms && (
           <Button disabled>
-            <Translate>Loading terms..</Translate>
+            <i18n.Translate>Loading terms..</i18n.Translate>
           </Button>
         )}
         {terms && (
           <Fragment>
             {needsReview && !reviewed && (
               <ButtonSuccess disabled upperCased onClick={onConfirm}>
-                <Translate>Add exchange</Translate>
+                <i18n.Translate>Add exchange</i18n.Translate>
               </ButtonSuccess>
             )}
             {(terms.status === "accepted" || (needsReview && reviewed)) && (
               <ButtonSuccess upperCased onClick={onConfirm}>
-                <Translate>Add exchange</Translate>
+                <i18n.Translate>Add exchange</i18n.Translate>
               </ButtonSuccess>
             )}
             {terms.status === "notfound" && (
               <ButtonWarning upperCased onClick={onConfirm}>
-                <Translate>Add exchange anyway</Translate>
+                <i18n.Translate>Add exchange anyway</i18n.Translate>
               </ButtonWarning>
             )}
           </Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index 909afc4b7..7199ce90c 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -93,42 +93,46 @@ export function ExchangeSetUrlPage({
       <section>
         {!expectedCurrency ? (
           <h1>
-            <Translate>Add new exchange</Translate>
+            <i18n.Translate>Add new exchange</i18n.Translate>
           </h1>
         ) : (
           <h2>
-            <Translate>Add exchange for {expectedCurrency}</Translate>
+            <i18n.Translate>Add exchange for {expectedCurrency}</i18n.Translate>
           </h2>
         )}
         {!result && (
           <LightText>
-            <Translate>Enter the URL of an exchange you trust.</Translate>
+            <i18n.Translate>
+              Enter the URL of an exchange you trust.
+            </i18n.Translate>
           </LightText>
         )}
         {result && (
           <LightText>
-            <Translate>
+            <i18n.Translate>
               An exchange has been found! Review the information and click next
-            </Translate>
+            </i18n.Translate>
           </LightText>
         )}
         {result && expectedCurrency && expectedCurrency !== result.currency && (
           <WarningBox>
-            <Translate>
+            <i18n.Translate>
               This exchange doesn't match the expected currency
               <b>{expectedCurrency}</b>
-            </Translate>
+            </i18n.Translate>
           </WarningBox>
         )}
         {error && (
           <ErrorMessage
-            title={<Translate>Unable to verify this exchange</Translate>}
+            title={
+              <i18n.Translate>Unable to verify this exchange</i18n.Translate>
+            }
             description={error}
           />
         )}
         {confirmationError && (
           <ErrorMessage
-            title={<Translate>Unable to add this exchange</Translate>}
+            title={<i18n.Translate>Unable to add this exchange</i18n.Translate>}
             description={confirmationError}
           />
         )}
@@ -144,20 +148,20 @@ export function ExchangeSetUrlPage({
           </Input>
           {loading && (
             <div>
-              <Translate>loading</Translate>...
+              <i18n.Translate>loading</i18n.Translate>...
             </div>
           )}
           {result && !loading && (
             <Fragment>
               <Input>
                 <label>
-                  <Translate>Version</Translate>
+                  <i18n.Translate>Version</i18n.Translate>
                 </label>
                 <input type="text" disabled value={result.version} />
               </Input>
               <Input>
                 <label>
-                  <Translate>Currency</Translate>
+                  <i18n.Translate>Currency</i18n.Translate>
                 </label>
                 <input type="text" disabled value={result.currency} />
               </Input>
@@ -167,7 +171,7 @@ export function ExchangeSetUrlPage({
       </section>
       <footer>
         <Button onClick={onCancel}>
-          <Translate>Cancel</Translate>
+          <i18n.Translate>Cancel</i18n.Translate>
         </Button>
         <ButtonPrimary
           disabled={
@@ -183,7 +187,7 @@ export function ExchangeSetUrlPage({
             );
           }}
         >
-          <Translate>Next</Translate>
+          <i18n.Translate>Next</i18n.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 a3e8ecc67..e0a1c588e 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -19,7 +19,7 @@ import {
   Balance,
   NotificationType,
   Transaction,
-  Translate,
+  i18n,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -67,7 +67,11 @@ export function HistoryPage({
   if (transactionQuery.hasError) {
     return (
       <LoadingError
-        title={<Translate>Could not load the list of transactions</Translate>}
+        title={
+          <i18n.Translate>
+            Could not load the list of transactions
+          </i18n.Translate>
+        }
         error={transactionQuery}
       />
     );
@@ -194,14 +198,14 @@ export function HistoryView({
               style={{ marginLeft: 0, marginTop: 8 }}
               onClick={() => goToWalletManualWithdraw(selectedCurrency)}
             >
-              <Translate>Withdraw</Translate>
+              <i18n.Translate>Withdraw</i18n.Translate>
             </ButtonPrimary>
             {currencyAmount && Amounts.isNonZero(currencyAmount) && (
               <ButtonBoxPrimary
                 style={{ marginLeft: 0, marginTop: 8 }}
                 onClick={() => goToWalletDeposit(selectedCurrency)}
               >
-                <Translate>Deposit</Translate>
+                <i18n.Translate>Deposit</i18n.Translate>
               </ButtonBoxPrimary>
             )}
           </div>
@@ -209,7 +213,7 @@ export function HistoryView({
       </section>
       {datesWithTransaction.length === 0 ? (
         <section>
-          <Translate>There is no history for this currency</Translate>
+          <i18n.Translate>There is no history for this currency</i18n.Translate>
         </section>
       ) : (
         <section>
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index 8eca733d4..d9a1544a7 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -19,7 +19,7 @@ import {
   AmountJson,
   Amounts,
   NotificationType,
-  Translate,
+  i18n,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -97,7 +97,9 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
     return (
       <LoadingError
         title={
-          <Translate>Could not load the list of known exchanges</Translate>
+          <i18n.Translate>
+            Could not load the list of known exchanges
+          </i18n.Translate>
         }
         error={state}
       />
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 55e2b62fb..6bb5b6836 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -115,21 +115,27 @@ export function SetUrlView({
     <Fragment>
       <section>
         <h1>
-          <Translate>Add backup provider</Translate>
+          <i18n.Translate>Add backup provider</i18n.Translate>
         </h1>
         {error && (
           <ErrorMessage
-            title={<Translate>Could not get provider information</Translate>}
+            title={
+              <i18n.Translate>
+                Could not get provider information
+              </i18n.Translate>
+            }
             description={error}
           />
         )}
         <LightText>
-          <Translate>Backup providers may charge for their service</Translate>
+          <i18n.Translate>
+            Backup providers may charge for their service
+          </i18n.Translate>
         </LightText>
         <p>
           <Input invalid={urlError}>
             <label>
-              <Translate>URL</Translate>
+              <i18n.Translate>URL</i18n.Translate>
             </label>
             <input
               type="text"
@@ -140,7 +146,7 @@ export function SetUrlView({
           </Input>
           <Input>
             <label>
-              <Translate>Name</Translate>
+              <i18n.Translate>Name</i18n.Translate>
             </label>
             <input
               type="text"
@@ -153,7 +159,7 @@ export function SetUrlView({
       </section>
       <footer>
         <Button onClick={onCancel}>
-          &lt; <Translate>Back</Translate>
+          &lt; <i18n.Translate>Back</i18n.Translate>
         </Button>
         <ButtonPrimary
           disabled={!value && !urlError}
@@ -164,7 +170,7 @@ export function SetUrlView({
             );
           }}
         >
-          <Translate>Next</Translate>
+          <i18n.Translate>Next</i18n.Translate>
         </ButtonPrimary>
       </footer>
     </Fragment>
@@ -189,40 +195,42 @@ export function ConfirmProviderView({
     <Fragment>
       <section>
         <h1>
-          <Translate>Review terms of service</Translate>
+          <i18n.Translate>Review terms of service</i18n.Translate>
         </h1>
         <div>
-          <Translate>Provider URL</Translate>:{" "}
+          <i18n.Translate>Provider URL</i18n.Translate>:{" "}
           <a href={url} target="_blank">
             {url}
           </a>
         </div>
         <SmallLightText>
-          <Translate>
+          <i18n.Translate>
             Please review and accept this provider's terms of service
-          </Translate>
+          </i18n.Translate>
         </SmallLightText>
         <h2>
-          1. <Translate>Pricing</Translate>
+          1. <i18n.Translate>Pricing</i18n.Translate>
         </h2>
         <p>
           {Amounts.isZero(provider.annual_fee) ? (
-            <Translate>free of charge</Translate>
+            <i18n.Translate>free of charge</i18n.Translate>
           ) : (
-            <Translate>{provider.annual_fee} per year of service</Translate>
+            <i18n.Translate>
+              {provider.annual_fee} per year of service
+            </i18n.Translate>
           )}
         </p>
         <h2>
-          2. <Translate>Storage</Translate>
+          2. <i18n.Translate>Storage</i18n.Translate>
         </h2>
         <p>
-          <Translate>
+          <i18n.Translate>
             {provider.storage_limit_in_megabytes} megabytes of storage per year
             of service
-          </Translate>
+          </i18n.Translate>
         </p>
         <Checkbox
-          label={<Translate>Accept terms of service</Translate>}
+          label={<i18n.Translate>Accept terms of service</i18n.Translate>}
           name="terms"
           onToggle={() => setAccepted((old) => !old)}
           enabled={accepted}
@@ -230,10 +238,10 @@ export function ConfirmProviderView({
       </section>
       <footer>
         <Button onClick={onCancel}>
-          &lt; <Translate>Back</Translate>
+          &lt; <i18n.Translate>Back</i18n.Translate>
         </Button>
         <ButtonPrimary disabled={!accepted} onClick={onConfirm}>
-          <Translate>Add provider</Translate>
+          <i18n.Translate>Add provider</i18n.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 beeedcda7..65049d6b6 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 { Translate } from "@gnu-taler/taler-util";
+import { i18n } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentStatus,
@@ -60,9 +60,9 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode {
     return (
       <LoadingError
         title={
-          <Translate>
+          <i18n.Translate>
             There was an error loading the provider detail for "{providerURL}"
-          </Translate>
+          </i18n.Translate>
         }
         error={state}
       />
@@ -105,12 +105,14 @@ export function ProviderView({
       <Fragment>
         <section>
           <p>
-            <Translate>There is not known provider with url "{url}".</Translate>
+            <i18n.Translate>
+              There is not known provider with url "{url}".
+            </i18n.Translate>
           </p>
         </section>
         <footer>
           <Button onClick={onBack}>
-            &lt; <Translate>Back</Translate>
+            &lt; <i18n.Translate>Back</i18n.Translate>
           </Button>
           <div />
         </footer>
@@ -136,54 +138,54 @@ export function ProviderView({
       <section>
         <p>
           <b>
-            <Translate>Last backup</Translate>:
+            <i18n.Translate>Last backup</i18n.Translate>:
           </b>{" "}
           <Time timestamp={lb} format="dd MMMM yyyy" />
         </p>
         <ButtonPrimary onClick={onSync}>
-          <Translate>Back up</Translate>
+          <i18n.Translate>Back up</i18n.Translate>
         </ButtonPrimary>
         {info.terms && (
           <Fragment>
             <p>
               <b>
-                <Translate>Provider fee</Translate>:
+                <i18n.Translate>Provider fee</i18n.Translate>:
               </b>{" "}
               {info.terms && info.terms.annualFee}{" "}
-              <Translate>per year</Translate>
+              <i18n.Translate>per year</i18n.Translate>
             </p>
           </Fragment>
         )}
         <p>{descriptionByStatus(info.paymentStatus)}</p>
         <ButtonPrimary disabled onClick={onExtend}>
-          <Translate>Extend</Translate>
+          <i18n.Translate>Extend</i18n.Translate>
         </ButtonPrimary>
 
         {info.paymentStatus.type === ProviderPaymentType.TermsChanged && (
           <div>
             <p>
-              <Translate>
+              <i18n.Translate>
                 terms has changed, extending the service will imply accepting
                 the new terms of service
-              </Translate>
+              </i18n.Translate>
             </p>
             <table>
               <thead>
                 <tr>
                   <td>&nbsp;</td>
                   <td>
-                    <Translate>old</Translate>
+                    <i18n.Translate>old</i18n.Translate>
                   </td>
                   <td> -&gt;</td>
                   <td>
-                    <Translate>new</Translate>
+                    <i18n.Translate>new</i18n.Translate>
                   </td>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <td>
-                    <Translate>fee</Translate>
+                    <i18n.Translate>fee</i18n.Translate>
                   </td>
                   <td>{info.paymentStatus.oldTerms.annualFee}</td>
                   <td>-&gt;</td>
@@ -191,7 +193,7 @@ export function ProviderView({
                 </tr>
                 <tr>
                   <td>
-                    <Translate>storage</Translate>
+                    <i18n.Translate>storage</i18n.Translate>
                   </td>
                   <td>{info.paymentStatus.oldTerms.storageLimitInMegabytes}</td>
                   <td>-&gt;</td>
@@ -204,11 +206,11 @@ export function ProviderView({
       </section>
       <footer>
         <Button onClick={onBack}>
-          &lt; <Translate>back</Translate>
+          &lt; <i18n.Translate>back</i18n.Translate>
         </Button>
         <div>
           <ButtonDestructive onClick={onDelete}>
-            <Translate>Remove provider</Translate>
+            <i18n.Translate>Remove provider</i18n.Translate>
           </ButtonDestructive>
         </div>
       </footer>
@@ -220,7 +222,9 @@ function Error({ info }: { info: ProviderInfo }): VNode {
   if (info.lastError) {
     return (
       <ErrorMessage
-        title={<Translate>This provider has reported an error</Translate>}
+        title={
+          <i18n.Translate>This provider has reported an error</i18n.Translate>
+        }
         description={info.lastError.hint}
       />
     );
@@ -232,26 +236,28 @@ function Error({ info }: { info: ProviderInfo }): VNode {
           <ErrorMessage
             title={
               <Fragment>
-                <Translate>
+                <i18n.Translate>
                   There is conflict with another backup from{" "}
                   <b>{info.backupProblem.otherDeviceId}</b>
-                </Translate>
+                </i18n.Translate>
               </Fragment>
             }
           />
         );
       case "backup-unreadable":
         return (
-          <ErrorMessage title={<Translate>Backup is not readable</Translate>} />
+          <ErrorMessage
+            title={<i18n.Translate>Backup is not readable</i18n.Translate>}
+          />
         );
       default:
         return (
           <ErrorMessage
             title={
               <Fragment>
-                <Translate>
+                <i18n.Translate>
                   Unknown backup problem: {JSON.stringify(info.backupProblem)}
-                </Translate>
+                </i18n.Translate>
               </Fragment>
             }
           />
@@ -268,14 +274,14 @@ function descriptionByStatus(status: ProviderPaymentStatus): VNode {
       if (status.paidUntil.t_ms === "never") {
         return (
           <span>
-            <Translate>service paid</Translate>
+            <i18n.Translate>service paid</i18n.Translate>
           </span>
         );
       }
       return (
         <Fragment>
           <b>
-            <Translate>Backup valid until</Translate>:
+            <i18n.Translate>Backup valid until</i18n.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 7de719fc6..2c0e2fd31 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -1,9 +1,4 @@
-import {
-  AmountJson,
-  Amounts,
-  parsePaytoUri,
-  Translate,
-} from "@gnu-taler/taler-util";
+import { AmountJson, parsePaytoUri, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
 import { QR } from "../components/QR";
@@ -29,7 +24,9 @@ export function ReserveCreated({
   if (!paytoURI) {
     return (
       <div>
-        <Translate>could not parse payto uri from exchange {payto}</Translate>
+        <i18n.Translate>
+          could not parse payto uri from exchange {payto}
+        </i18n.Translate>
       </div>
     );
   }
@@ -37,13 +34,13 @@ export function ReserveCreated({
     <Fragment>
       <section>
         <h1>
-          <Translate>Exchange is ready for withdrawal</Translate>
+          <i18n.Translate>Exchange is ready for withdrawal</i18n.Translate>
         </h1>
         <p>
-          <Translate>
+          <i18n.Translate>
             To complete the process you need to wire
             <b>{amountToString(amount)}</b> to the exchange bank account
-          </Translate>
+          </i18n.Translate>
         </p>
         <BankDetailsByPaytoType
           amount={amountToString(amount)}
@@ -53,27 +50,27 @@ export function ReserveCreated({
         />
         <p>
           <WarningBox>
-            <Translate>
+            <i18n.Translate>
               Make sure to use the correct subject, otherwise the money will not
               arrive in this wallet.
-            </Translate>
+            </i18n.Translate>
           </WarningBox>
         </p>
       </section>
       <section>
         <p>
-          <Translate>
+          <i18n.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>
+          </i18n.Translate>
         </p>
         <QR text={payto} />
       </section>
       <footer>
         <div />
         <ButtonDestructive onClick={onCancel}>
-          <Translate>Cancel withdrawal</Translate>
+          <i18n.Translate>Cancel withdrawal</i18n.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 bac884247..3bb3fa865 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -81,31 +81,31 @@ export function SettingsView({
     <Fragment>
       <section>
         <h2>
-          <Translate>Permissions</Translate>
+          <i18n.Translate>Permissions</i18n.Translate>
         </h2>
         <Checkbox
           label={
-            <Translate>
+            <i18n.Translate>
               Automatically open wallet based on page content
-            </Translate>
+            </i18n.Translate>
           }
           name="perm"
           description={
-            <Translate>
+            <i18n.Translate>
               Enabling this option below will make using the wallet faster, but
               requires more permissions from your browser.
-            </Translate>
+            </i18n.Translate>
           }
           enabled={permissionsEnabled}
           onToggle={togglePermissions}
         />
 
         <h2>
-          <Translate>Known exchanges</Translate>
+          <i18n.Translate>Known exchanges</i18n.Translate>
         </h2>
         {!knownExchanges || !knownExchanges.length ? (
           <div>
-            <Translate>No exchange yet</Translate>
+            <i18n.Translate>No exchange yet</i18n.Translate>
           </div>
         ) : (
           <Fragment>
@@ -113,13 +113,13 @@ export function SettingsView({
               <thead>
                 <tr>
                   <th>
-                    <Translate>Currency</Translate>
+                    <i18n.Translate>Currency</i18n.Translate>
                   </th>
                   <th>
-                    <Translate>URL</Translate>
+                    <i18n.Translate>URL</i18n.Translate>
                   </th>
                   <th>
-                    <Translate>Term of Service</Translate>
+                    <i18n.Translate>Term of Service</i18n.Translate>
                   </th>
                 </tr>
               </thead>
@@ -135,20 +135,20 @@ export function SettingsView({
                       case "accepted":
                         return (
                           <SuccessText>
-                            <Translate>ok</Translate>
+                            <i18n.Translate>ok</i18n.Translate>
                           </SuccessText>
                         );
                       case "changed":
                         return (
                           <WarningText>
-                            <Translate>changed</Translate>
+                            <i18n.Translate>changed</i18n.Translate>
                           </WarningText>
                         );
                       case "new":
                       case "notfound":
                         return (
                           <DestructiveText>
-                            <Translate>not accepted</Translate>
+                            <i18n.Translate>not accepted</i18n.Translate>
                           </DestructiveText>
                         );
                     }
@@ -172,18 +172,18 @@ export function SettingsView({
         <div style={{ display: "flex", justifyContent: "space-between" }}>
           <div />
           <LinkPrimary href={Pages.settings_exchange_add}>
-            <Translate>Add an exchange</Translate>
+            <i18n.Translate>Add an exchange</i18n.Translate>
           </LinkPrimary>
         </div>
 
         <h2>Config</h2>
         <Checkbox
-          label={<Translate>Developer mode</Translate>}
+          label={<i18n.Translate>Developer mode</i18n.Translate>}
           name="devMode"
           description={
-            <Translate>
+            <i18n.Translate>
               (More options and information useful for debugging)
-            </Translate>
+            </i18n.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 a43e9b4a0..cae70d60d 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -22,7 +22,6 @@ import {
   parsePaytoUri,
   Transaction,
   TransactionType,
-  Translate,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
 import { differenceInSeconds } from "date-fns";
@@ -77,7 +76,9 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
     return (
       <LoadingError
         title={
-          <Translate>Could not load the transaction information</Translate>
+          <i18n.Translate>
+            Could not load the transaction information
+          </i18n.Translate>
         }
         error={state}
       />
@@ -142,15 +143,15 @@ export function TransactionView({
         <section style={{ padding: 8, textAlign: "center" }}>
           <ErrorTalerOperation
             title={
-              <Translate>
+              <i18n.Translate>
                 There was an error trying to complete the transaction
-              </Translate>
+              </i18n.Translate>
             }
             error={transaction?.error}
           />
           {transaction.pending && (
             <WarningBox>
-              <Translate>This transaction is not completed</Translate>
+              <i18n.Translate>This transaction is not completed</i18n.Translate>
             </WarningBox>
           )}
         </section>
@@ -159,16 +160,16 @@ export function TransactionView({
         </section>
         <footer>
           <Button onClick={onBack}>
-            &lt; <Translate> Back </Translate>
+            &lt; <i18n.Translate> Back </i18n.Translate>
           </Button>
           <div>
             {showRetry ? (
               <ButtonPrimary onClick={onRetry}>
-                <Translate>Retry</Translate>
+                <i18n.Translate>Retry</i18n.Translate>
               </ButtonPrimary>
             ) : null}
             <ButtonDestructive onClick={doCheckBeforeForget}>
-              <Translate>Forget</Translate>
+              <i18n.Translate>Forget</i18n.Translate>
             </ButtonDestructive>
           </div>
         </footer>
@@ -193,28 +194,28 @@ export function TransactionView({
           <Overlay>
             <CenteredDialog>
               <header>
-                <Translate>Caution!</Translate>
+                <i18n.Translate>Caution!</i18n.Translate>
               </header>
               <section>
-                <Translate>
+                <i18n.Translate>
                   If you have already wired money to the exchange you will loose
                   the chance to get the coins form it.
-                </Translate>
+                </i18n.Translate>
               </section>
               <footer>
                 <Button onClick={() => setConfirmBeforeForget(false)}>
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </Button>
 
                 <ButtonDestructive onClick={onDelete}>
-                  <Translate>Confirm</Translate>
+                  <i18n.Translate>Confirm</i18n.Translate>
                 </ButtonDestructive>
               </footer>
             </CenteredDialog>
           </Overlay>
         ) : undefined}
         <h2>
-          <Translate>Withdrawal</Translate>
+          <i18n.Translate>Withdrawal</i18n.Translate>
         </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         {transaction.pending ? (
@@ -231,21 +232,21 @@ export function TransactionView({
               />
               <p>
                 <WarningBox>
-                  <Translate>
+                  <i18n.Translate>
                     Make sure to use the correct subject, otherwise the money
                     will not arrive in this wallet.
-                  </Translate>
+                  </i18n.Translate>
                 </WarningBox>
               </p>
               <Part
                 big
-                title={<Translate>Total withdrawn</Translate>}
+                title={<i18n.Translate>Total withdrawn</i18n.Translate>}
                 text={amountToString(transaction.amountEffective)}
                 kind="positive"
               />
               <Part
                 big
-                title={<Translate>Exchange fee</Translate>}
+                title={<i18n.Translate>Exchange fee</i18n.Translate>}
                 text={amountToString(fee)}
                 kind="negative"
               />
@@ -255,38 +256,40 @@ export function TransactionView({
               {!transaction.withdrawalDetails.confirmed &&
               transaction.withdrawalDetails.bankConfirmationUrl ? (
                 <InfoBox>
-                  <Translate>
+                  <i18n.Translate>
                     The bank is waiting for confirmation. Go to the
                     <a
                       href={transaction.withdrawalDetails.bankConfirmationUrl}
                       target="_blank"
                       rel="noreferrer"
                     >
-                      <Translate>bank site</Translate>
+                      <i18n.Translate>bank site</i18n.Translate>
                     </a>
-                  </Translate>
+                  </i18n.Translate>
                 </InfoBox>
               ) : undefined}
               {transaction.withdrawalDetails.confirmed && (
                 <InfoBox>
-                  <Translate>Waiting for the coins to arrive</Translate>
+                  <i18n.Translate>
+                    Waiting for the coins to arrive
+                  </i18n.Translate>
                 </InfoBox>
               )}
               <Part
                 big
-                title={<Translate>Total withdrawn</Translate>}
+                title={<i18n.Translate>Total withdrawn</i18n.Translate>}
                 text={amountToString(transaction.amountEffective)}
                 kind="positive"
               />
               <Part
                 big
-                title={<Translate>Chosen amount</Translate>}
+                title={<i18n.Translate>Chosen amount</i18n.Translate>}
                 text={amountToString(transaction.amountRaw)}
                 kind="neutral"
               />
               <Part
                 big
-                title={<Translate>Exchange fee</Translate>}
+                title={<i18n.Translate>Exchange fee</i18n.Translate>}
                 text={amountToString(fee)}
                 kind="negative"
               />
@@ -296,26 +299,26 @@ export function TransactionView({
           <Fragment>
             <Part
               big
-              title={<Translate>Total withdrawn</Translate>}
+              title={<i18n.Translate>Total withdrawn</i18n.Translate>}
               text={amountToString(transaction.amountEffective)}
               kind="positive"
             />
             <Part
               big
-              title={<Translate>Chosen amount</Translate>}
+              title={<i18n.Translate>Chosen amount</i18n.Translate>}
               text={amountToString(transaction.amountRaw)}
               kind="neutral"
             />
             <Part
               big
-              title={<Translate>Exchange fee</Translate>}
+              title={<i18n.Translate>Exchange fee</i18n.Translate>}
               text={amountToString(fee)}
               kind="negative"
             />
           </Fragment>
         )}
         <Part
-          title={<Translate>Exchange</Translate>}
+          title={<i18n.Translate>Exchange</i18n.Translate>}
           text={new URL(transaction.exchangeBaseUrl).hostname}
           kind="neutral"
         />
@@ -336,40 +339,40 @@ export function TransactionView({
     return (
       <TransactionTemplate>
         <h2>
-          <Translate>Payment</Translate>
+          <i18n.Translate>Payment</i18n.Translate>
         </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title={<Translate>Total paid</Translate>}
+          title={<i18n.Translate>Total paid</i18n.Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="negative"
         />
         <Part
           big
-          title={<Translate>Purchase amount</Translate>}
+          title={<i18n.Translate>Purchase amount</i18n.Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
         <Part
           big
-          title={<Translate>Fee</Translate>}
+          title={<i18n.Translate>Fee</i18n.Translate>}
           text={amountToString(fee)}
           kind="negative"
         />
         <Part
-          title={<Translate>Merchant</Translate>}
+          title={<i18n.Translate>Merchant</i18n.Translate>}
           text={transaction.info.merchant.name}
           kind="neutral"
         />
         <Part
-          title={<Translate>Purchase</Translate>}
+          title={<i18n.Translate>Purchase</i18n.Translate>}
           text={transaction.info.summary}
           kind="neutral"
         />
         <Part
-          title={<Translate>Receipt</Translate>}
+          title={<i18n.Translate>Receipt</i18n.Translate>}
           text={`#${transaction.info.orderId}`}
           kind="neutral"
         />
@@ -407,25 +410,25 @@ export function TransactionView({
     return (
       <TransactionTemplate>
         <h2>
-          <Translate>Deposit</Translate>
+          <i18n.Translate>Deposit</i18n.Translate>
         </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title={<Translate>Total send</Translate>}
+          title={<i18n.Translate>Total send</i18n.Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="neutral"
         />
         <Part
           big
-          title={<Translate>Deposit amount</Translate>}
+          title={<i18n.Translate>Deposit amount</i18n.Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="positive"
         />
         <Part
           big
-          title={<Translate>Fee</Translate>}
+          title={<i18n.Translate>Fee</i18n.Translate>}
           text={amountToString(fee)}
           kind="negative"
         />
@@ -441,25 +444,25 @@ export function TransactionView({
     return (
       <TransactionTemplate>
         <h2>
-          <Translate>Refresh</Translate>
+          <i18n.Translate>Refresh</i18n.Translate>
         </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title={<Translate>Total refresh</Translate>}
+          title={<i18n.Translate>Total refresh</i18n.Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="negative"
         />
         <Part
           big
-          title={<Translate>Refresh amount</Translate>}
+          title={<i18n.Translate>Refresh amount</i18n.Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
         <Part
           big
-          title={<Translate>Fee</Translate>}
+          title={<i18n.Translate>Fee</i18n.Translate>}
           text={amountToString(fee)}
           kind="negative"
         />
@@ -475,25 +478,25 @@ export function TransactionView({
     return (
       <TransactionTemplate>
         <h2>
-          <Translate>Tip</Translate>
+          <i18n.Translate>Tip</i18n.Translate>
         </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title={<Translate>Total tip</Translate>}
+          title={<i18n.Translate>Total tip</i18n.Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="positive"
         />
         <Part
           big
-          title={<Translate>Received amount</Translate>}
+          title={<i18n.Translate>Received amount</i18n.Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
         <Part
           big
-          title={<Translate>Fee</Translate>}
+          title={<i18n.Translate>Fee</i18n.Translate>}
           text={amountToString(fee)}
           kind="negative"
         />
@@ -509,40 +512,40 @@ export function TransactionView({
     return (
       <TransactionTemplate>
         <h2>
-          <Translate>Refund</Translate>
+          <i18n.Translate>Refund</i18n.Translate>
         </h2>
         <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" />
         <br />
         <Part
           big
-          title={<Translate>Total refund</Translate>}
+          title={<i18n.Translate>Total refund</i18n.Translate>}
           text={amountToString(transaction.amountEffective)}
           kind="positive"
         />
         <Part
           big
-          title={<Translate>Refund amount</Translate>}
+          title={<i18n.Translate>Refund amount</i18n.Translate>}
           text={amountToString(transaction.amountRaw)}
           kind="neutral"
         />
         <Part
           big
-          title={<Translate>Fee</Translate>}
+          title={<i18n.Translate>Fee</i18n.Translate>}
           text={amountToString(fee)}
           kind="negative"
         />
         <Part
-          title={<Translate>Merchant</Translate>}
+          title={<i18n.Translate>Merchant</i18n.Translate>}
           text={transaction.info.merchant.name}
           kind="neutral"
         />
         <Part
-          title={<Translate>Purchase</Translate>}
+          title={<i18n.Translate>Purchase</i18n.Translate>}
           text={transaction.info.summary}
           kind="neutral"
         />
         <Part
-          title={<Translate>Receipt</Translate>}
+          title={<i18n.Translate>Receipt</i18n.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 a251c4254..37ad97afd 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
@@ -20,7 +20,7 @@
  * @author sebasjm
  */
 
-import { Translate, WalletDiagnostics } from "@gnu-taler/taler-util";
+import { i18n, WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
 import { Diagnostics } from "../components/Diagnostics";
@@ -55,40 +55,43 @@ export function View({
   return (
     <Fragment>
       <h1>
-        <Translate>Browser Extension Installed!</Translate>
+        <i18n.Translate>Browser Extension Installed!</i18n.Translate>
       </h1>
       <div>
         <p>
-          <Translate>Thank you for installing the wallet.</Translate>
+          <i18n.Translate>Thank you for installing the wallet.</i18n.Translate>
         </p>
         <Diagnostics diagnostics={diagnostics} timedOut={timedOut} />
         <h2>
-          <Translate>Permissions</Translate>
+          <i18n.Translate>Permissions</i18n.Translate>
         </h2>
         <Checkbox
           label={
-            <Translate>
+            <i18n.Translate>
               Automatically open wallet based on page content
-            </Translate>
+            </i18n.Translate>
           }
           name="perm"
           description={
-            <Translate>
+            <i18n.Translate>
               (Enabling this option below will make using the wallet faster, but
               requires more permissions from your browser.)
-            </Translate>
+            </i18n.Translate>
           }
           enabled={permissionsEnabled}
           onToggle={togglePermissions}
         />
         <h2>
-          <Translate>Next Steps</Translate>
+          <i18n.Translate>Next Steps</i18n.Translate>
         </h2>
         <a href="https://demo.taler.net/" style={{ display: "block" }}>
-          <Translate>Try the demo</Translate> »
+          <i18n.Translate>Try the demo</i18n.Translate> »
         </a>
         <a href="https://demo.taler.net/" style={{ display: "block" }}>
-          <Translate>Learn how to top up your wallet balance</Translate> »
+          <i18n.Translate>
+            Learn how to top up your wallet balance
+          </i18n.Translate>{" "}
+          »
         </a>
       </div>
     </Fragment>