dd53: label balance in history

2 files changed, 42 insertions, 27 deletions

diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
index b8bcaa391..b92929ceb 100644
--- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
+++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
@@ -15,8 +15,10 @@
  */
 
 import { Amounts, ScopeType, WalletBalance } from "@gnu-taler/taler-util";
-import { VNode, h } from "preact";
-import { TableWithRoundRows as TableWithRoundedRows } from "./styled/index.js";
+import { Fragment, VNode, h } from "preact";
+import {
+  TableWithRoundRows as TableWithRoundedRows
+} from "./styled/index.js";
 
 export function BalanceTable({
   balances,
@@ -25,33 +27,42 @@ export function BalanceTable({
   balances: WalletBalance[];
   goToWalletHistory: (currency: string) => void;
 }): VNode {
+  // const { i18n } = useTranslationContext();
   return (
-    <TableWithRoundedRows>
-      {balances.map((entry, idx) => {
-        const av = Amounts.parseOrThrow(entry.available);
+    <Fragment>
+      {/* <SubTitle>
+        <i18n.Translate>Exchange Entries</i18n.Translate>
+      </SubTitle> */}
+      <TableWithRoundedRows>
+        {balances.map((entry, idx) => {
+          const av = Amounts.parseOrThrow(entry.available);
 
-        return (
-          <tr
-            key={idx}
-            onClick={() => goToWalletHistory(av.currency)}
-            style={{ cursor: "pointer" }}
-          >
-            <td>{av.currency}</td>
-            <td
-              style={{
-                fontSize: "2em",
-                textAlign: "right",
-                width: "100%",
-              }}
+          return (
+            <tr
+              key={idx}
+              onClick={() => goToWalletHistory(av.currency)}
+              style={{ cursor: "pointer" }}
             >
-              {Amounts.stringifyValue(av, 2)}
-              <div style={{ fontSize: "small", color: "grey" }}>
-                {entry.scopeInfo.type === ScopeType.Exchange || entry.scopeInfo.type === ScopeType.Auditor ? entry.scopeInfo.url : undefined}
-              </div>
-            </td>
-          </tr>
-        );
-      })}
-    </TableWithRoundedRows>
+              <td>{av.currency}</td>
+              <td
+                style={{
+                  fontSize: "2em",
+                  textAlign: "right",
+                  width: "100%",
+                }}
+              >
+                {Amounts.stringifyValue(av, 2)}
+                <div style={{ fontSize: "small", color: "grey" }}>
+                  {entry.scopeInfo.type === ScopeType.Exchange ||
+                  entry.scopeInfo.type === ScopeType.Auditor
+                    ? entry.scopeInfo.url
+                    : undefined}
+                </div>
+              </td>
+            </tr>
+          );
+        })}
+      </TableWithRoundedRows>
+    </Fragment>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 233bd8f28..12a032b51 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -36,6 +36,7 @@ import {
   CenteredText,
   DateSeparator,
   NiceSelect,
+  SubTitle,
 } from "../components/styled/index.js";
 import { alertFromError, useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
@@ -157,6 +158,9 @@ export function HistoryView({
   return (
     <Fragment>
       <section>
+        <SubTitle style={{marginBottom: 0}}>
+          <i18n.Translate>Balance</i18n.Translate>
+        </SubTitle>
         <div
           style={{
             display: "flex",