add i18n where was missing

4 files changed, 130 insertions, 63 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 3ca5b3a02..f81929b21 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, Balance } from "@gnu-taler/taler-util";
+import { Amounts, Balance, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { BalanceTable } from "../components/BalanceTable";
@@ -47,7 +47,12 @@ export function BalancePage({
   }
 
   if (state.hasError) {
-    return <LoadingError title="Could not load balance page" error={state} />;
+    return (
+      <LoadingError
+        title={<Translate>Could not load balance page</Translate>}
+        error={state}
+      />
+    );
   }
 
   if (addingAction) {
@@ -99,17 +104,19 @@ export function BalanceView({
       </section>
       <footer style={{ justifyContent: "space-between" }}>
         <ButtonPrimary onClick={goToWalletManualWithdraw}>
-          Withdraw
+          <Translate>Withdraw</Translate>
         </ButtonPrimary>
         {currencyWithNonZeroAmount.length > 0 && (
           <MultiActionButton
-            label={(s) => `Deposit ${s}`}
+            label={(s) => <Translate>Deposit {s}</Translate>}
             actions={currencyWithNonZeroAmount}
             onClick={(c) => goToWalletDeposit(c)}
           />
         )}
         <JustInDevMode>
-          <ButtonBoxPrimary onClick={goToAddAction}>enter uri</ButtonBoxPrimary>
+          <ButtonBoxPrimary onClick={goToAddAction}>
+            <Translate>Enter URI</Translate>
+          </ButtonBoxPrimary>
         </JustInDevMode>
       </footer>
     </Fragment>
diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
index 3326be8df..b3da48a93 100644
--- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
@@ -20,6 +20,8 @@ import {
   CoinDumpJson,
   ExchangeListItem,
   NotificationType,
+  Translate,
+  i18n,
 } from "@gnu-taler/taler-util";
 import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
 import { format } from "date-fns";
@@ -31,7 +33,6 @@ import { Time } from "../components/Time";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { useDiagnostics } from "../hooks/useDiagnostics";
 import * as wxApi from "../wxApi";
-import BalanceStories from "./Balance.stories";
 
 export function DeveloperPage(): VNode {
   const [status, timedOut] = useDiagnostics();
@@ -149,10 +150,16 @@ export function View({
 
   return (
     <div>
-      <p>Debug tools:</p>
-      <button onClick={confirmReset}>reset</button>
+      <p>
+        <Translate>Debug tools</Translate>:
+      </p>
+      <button onClick={confirmReset}>
+        <Translate>reset</Translate>
+      </button>
       <br />
-      <button onClick={() => fileRef?.current?.click()}>import database</button>
+      <button onClick={() => fileRef?.current?.click()}>
+        <Translate>import database</Translate>
+      </button>
       <input
         ref={fileRef}
         style={{ display: "none" }}
@@ -171,31 +178,36 @@ export function View({
         }}
       />
       <br />
-      <button onClick={onExportDatabase}>export database</button>
+      <button onClick={onExportDatabase}>
+        <Translate>export database</Translate>
+      </button>
       {downloadedDatabase && (
         <div>
-          Database exported at
-          <Time
-            timestamp={{ t_ms: downloadedDatabase.time.getTime() }}
-            format="yyyy/MM/dd HH:mm:ss"
-          />
-          <a
-            href={`data:text/plain;charset=utf-8;base64,${toBase64(
-              downloadedDatabase.content,
-            )}`}
-            download={`taler-wallet-database-${format(
-              downloadedDatabase.time,
-              "yyyy/MM/dd_HH:mm",
-            )}.json`}
-          >
-            {" "}
-            click here{" "}
-          </a>
-          to download
+          <Translate>
+            Database exported at
+            <Time
+              timestamp={{ t_ms: downloadedDatabase.time.getTime() }}
+              format="yyyy/MM/dd HH:mm:ss"
+            />
+            <a
+              href={`data:text/plain;charset=utf-8;base64,${toBase64(
+                downloadedDatabase.content,
+              )}`}
+              download={`taler-wallet-database-${format(
+                downloadedDatabase.time,
+                "yyyy/MM/dd_HH:mm",
+              )}.json`}
+            >
+              <Translate>click here</Translate>
+            </a>
+            to download
+          </Translate>
         </div>
       )}
       <br />
-      <p>Coins:</p>
+      <p>
+        <Translate>Coins</Translate>:
+      </p>
       {Object.keys(money_by_exchange).map((ex) => {
         const allcoins = money_by_exchange[ex];
         allcoins.sort((a, b) => {
@@ -220,7 +232,9 @@ export function View({
       <Diagnostics diagnostics={status} timedOut={timedOut} />
       {operations && operations.length > 0 && (
         <Fragment>
-          <p>Pending operations</p>
+          <p>
+            <Translate>Pending operations</Translate>
+          </p>
           <dl>
             {operations.reverse().map((o) => {
               return (
@@ -257,18 +271,30 @@ function ShowAllCoins({
         <b>{ex}</b>: {total} {currencies[ex]}
       </p>
       <p>
-        <b>usable coins</b>
+        <b>
+          <Translate>usable coins</Translate>
+        </b>
       </p>
       {collapsedUnspent ? (
         <div onClick={() => setCollapsedUnspent(false)}>click to show</div>
       ) : (
         <table onClick={() => setCollapsedUnspent(true)}>
           <tr>
-            <td>id</td>
-            <td>denom</td>
-            <td>value</td>
-            <td>status</td>
-            <td>from refresh?</td>
+            <td>
+              <Translate>id</Translate>
+            </td>
+            <td>
+              <Translate>denom</Translate>
+            </td>
+            <td>
+              <Translate>value</Translate>
+            </td>
+            <td>
+              <Translate>status</Translate>
+            </td>
+            <td>
+              <Translate>from refresh?</Translate>
+            </td>
           </tr>
           {coins.usable.map((c) => {
             return (
@@ -283,17 +309,31 @@ function ShowAllCoins({
           })}
         </table>
       )}
-      <p>spent coins</p>
+      <p>
+        <Translate>spent coins</Translate>
+      </p>
       {collapsedSpent ? (
-        <div onClick={() => setCollapsedSpent(false)}>click to show</div>
+        <div onClick={() => setCollapsedSpent(false)}>
+          <Translate>click to show</Translate>
+        </div>
       ) : (
         <table onClick={() => setCollapsedSpent(true)}>
           <tr>
-            <td>id</td>
-            <td>denom</td>
-            <td>value</td>
-            <td>status</td>
-            <td>refresh?</td>
+            <td>
+              <Translate>id</Translate>
+            </td>
+            <td>
+              <Translate>denom</Translate>
+            </td>
+            <td>
+              <Translate>value</Translate>
+            </td>
+            <td>
+              <Translate>status</Translate>
+            </td>
+            <td>
+              <Translate>from refresh?</Translate>
+            </td>
           </tr>
           {coins.spent.map((c) => {
             return (
@@ -335,8 +375,7 @@ function runIntegrationTest() {}
 export async function confirmReset(): Promise<void> {
   if (
     confirm(
-      "Do you want to IRREVOCABLY DESTROY everything inside your" +
-        " wallet and LOSE ALL YOUR COINS?",
+      i18n.str`Do you want to IRREVOCABLY DESTROY everything inside your wallet and LOSE ALL YOUR COINS?`,
     )
   ) {
     await wxApi.resetDb();
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
index baff0aadf..6e2bf1e63 100644
--- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
+++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
@@ -1,4 +1,4 @@
-import { i18n } from "@gnu-taler/taler-util";
+import { Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { ButtonBoxWarning, WarningBox } from "../components/styled";
 
@@ -11,16 +11,16 @@ export function NoBalanceHelp({
     <WarningBox>
       <p>
         <b>
-          <i18n.Translate>You have no balance to show.</i18n.Translate>
+          <Translate>You have no balance to show.</Translate>
         </b>
         <br />
-        <i18n.Translate>
+        <Translate>
           To withdraw money you can start from your bank site or click the
           "withdraw" button to use a known exchange.
-        </i18n.Translate>
+        </Translate>
       </p>
       <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}>
-        Withdraw
+        <Translate>Withdraw</Translate>
       </ButtonBoxWarning>
     </WarningBox>
   );
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
index 5de457614..a69352c9f 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
@@ -19,7 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
+import {
+  classifyTalerUri,
+  TalerUriType,
+  Translate,
+} from "@gnu-taler/taler-util";
 import { Fragment, h } from "preact";
 import { ButtonPrimary, ButtonSuccess } from "../components/styled";
 import { actionForTalerUri } from "../utils/index";
@@ -52,46 +56,56 @@ export function TalerActionFound({ url, onDismiss }: Props) {
   return (
     <Fragment>
       <section>
-        <h1>Taler Action </h1>
+        <h1>
+          <Translate>Taler Action</Translate>
+        </h1>
         {uriType === TalerUriType.TalerPay && (
           <div>
-            <p>This page has pay action.</p>
+            <p>
+              <Translate>This page has pay action.</Translate>
+            </p>
             <ButtonSuccess
               onClick={() => {
                 navigateTo(actionForTalerUri(uriType, url));
               }}
             >
-              Open pay page
+              <Translate>Open pay page</Translate>
             </ButtonSuccess>
           </div>
         )}
         {uriType === TalerUriType.TalerWithdraw && (
           <div>
-            <p>This page has a withdrawal action.</p>
+            <p>
+              <Translate>This page has a withdrawal action.</Translate>
+            </p>
             <ButtonSuccess
               onClick={() => {
                 navigateTo(actionForTalerUri(uriType, url));
               }}
             >
-              Open withdraw page
+              <Translate>Open withdraw page</Translate>
             </ButtonSuccess>
           </div>
         )}
         {uriType === TalerUriType.TalerTip && (
           <div>
-            <p>This page has a tip action.</p>
+            <p>
+              <Translate>This page has a tip action.</Translate>
+            </p>
             <ButtonSuccess
               onClick={() => {
                 navigateTo(actionForTalerUri(uriType, url));
               }}
             >
-              Open tip page
+              <Translate>Open tip page</Translate>
             </ButtonSuccess>
           </div>
         )}
         {uriType === TalerUriType.TalerNotifyReserve && (
           <div>
-            <p>This page has a notify reserve action.</p>
+            <p>
+              <Translate>This page has a notify reserve action.</Translate>
+            </p>
             <ButtonSuccess
               onClick={() => {
                 navigateTo(actionForTalerUri(uriType, url));
@@ -103,26 +117,33 @@ export function TalerActionFound({ url, onDismiss }: Props) {
         )}
         {uriType === TalerUriType.TalerRefund && (
           <div>
-            <p>This page has a refund action.</p>
+            <p>
+              <Translate>This page has a refund action.</Translate>
+            </p>
             <ButtonSuccess
               onClick={() => {
                 navigateTo(actionForTalerUri(uriType, url));
               }}
             >
-              Open refund page
+              <Translate>Open refund page</Translate>
             </ButtonSuccess>
           </div>
         )}
         {uriType === TalerUriType.Unknown && (
           <div>
-            <p>This page has a malformed taler uri.</p>
+            <p>
+              <Translate>This page has a malformed taler uri.</Translate>
+            </p>
             <p>{url}</p>
           </div>
         )}
       </section>
       <footer>
         <div />
-        <ButtonPrimary onClick={() => onDismiss()}> Dismiss </ButtonPrimary>
+        <ButtonPrimary onClick={() => onDismiss()}>
+          {" "}
+          <Translate>Dismiss</Translate>{" "}
+        </ButtonPrimary>
       </footer>
     </Fragment>
   );