reserveCreated new design

4 files changed, 24 insertions, 23 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
index 894c8a791..ae93f8a40 100644
--- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
@@ -24,18 +24,18 @@ import {
   formatDuration,
   intervalToDuration,
 } from "date-fns";
-import { Fragment, JSX, VNode, h } from "preact";
+import { Fragment, h, VNode } from "preact";
 import {
   BoldLight,
   ButtonPrimary,
   ButtonSuccess,
   Centered,
-  CenteredText,
   CenteredBoldText,
+  CenteredText,
   PopupBox,
   RowBorderGray,
-  SmallText,
   SmallLightText,
+  SmallText,
 } from "../components/styled";
 import { useBackupStatus } from "../hooks/useBackupStatus";
 import { Pages } from "../NavigationBar";
@@ -72,8 +72,9 @@ export function BackupView({
   return (
     <PopupBox>
       <section>
-        {providers.map((provider) => (
+        {providers.map((provider, idx) => (
           <BackupLayout
+            key={idx}
             status={provider.paymentStatus}
             timestamp={provider.lastSuccessfulBackupTimestamp}
             id={provider.syncProviderBaseUrl}
@@ -117,7 +118,7 @@ interface TransactionLayoutProps {
   active: boolean;
 }
 
-function BackupLayout(props: TransactionLayoutProps): JSX.Element {
+function BackupLayout(props: TransactionLayoutProps): VNode {
   const date = !props.timestamp ? undefined : new Date(props.timestamp.t_ms);
   const dateStr = date?.toLocaleString([], {
     dateStyle: "medium",
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 2913f60e0..a23c81cd1 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -18,17 +18,14 @@ import {
   amountFractionalBase,
   Amounts,
   Balance,
-  BalancesResponse,
   i18n,
 } from "@gnu-taler/taler-util";
-import { JSX, h, Fragment } from "preact";
-import { ErrorMessage } from "../components/ErrorMessage";
+import { h, VNode } from "preact";
 import {
-  PopupBox,
-  Centered,
   ButtonPrimary,
   ErrorBox,
   Middle,
+  PopupBox,
 } from "../components/styled/index";
 import { BalancesHook, useBalances } from "../hooks/useBalances";
 import { PageLink, renderAmount } from "../renderHtml";
@@ -37,7 +34,7 @@ export function BalancePage({
   goToWalletManualWithdraw,
 }: {
   goToWalletManualWithdraw: () => void;
-}) {
+}): VNode {
   const balance = useBalances();
   return (
     <BalanceView
@@ -53,11 +50,11 @@ export interface BalanceViewProps {
   goToWalletManualWithdraw: () => void;
 }
 
-function formatPending(entry: Balance): JSX.Element {
-  let incoming: JSX.Element | undefined;
-  let payment: JSX.Element | undefined;
+function formatPending(entry: Balance): VNode {
+  let incoming: VNode | undefined;
+  let payment: VNode | undefined;
 
-  const available = Amounts.parseOrThrow(entry.available);
+  // const available = Amounts.parseOrThrow(entry.available);
   const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming);
   const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing);
 
@@ -105,8 +102,8 @@ export function BalanceView({
   balance,
   Linker,
   goToWalletManualWithdraw,
-}: BalanceViewProps) {
-  function Content() {
+}: BalanceViewProps): VNode {
+  function Content(): VNode {
     if (!balance) {
       return <span />;
     }
@@ -139,7 +136,7 @@ export function BalanceView({
     return (
       <section data-expanded data-centered>
         <table style={{ width: "100%" }}>
-          {balance.response.balances.map((entry) => {
+          {balance.response.balances.map((entry, idx) => {
             const av = Amounts.parseOrThrow(entry.available);
             // Create our number formatter.
             let formatter;
@@ -168,7 +165,7 @@ export function BalanceView({
             const fontSize =
               v.length < 8 ? "3em" : v.length < 13 ? "2em" : "1em";
             return (
-              <tr>
+              <tr key={idx}>
                 <td
                   style={{
                     height: 50,
diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx
index 8722c1cf8..b0e8543fc 100644
--- a/packages/taler-wallet-webextension/src/popup/Debug.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx
@@ -14,12 +14,12 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { JSX, h } from "preact";
+import { h, VNode } from "preact";
 import { Diagnostics } from "../components/Diagnostics";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";
 import * as wxApi from "../wxApi";
 
-export function DeveloperPage(props: any): JSX.Element {
+export function DeveloperPage(): VNode {
   const [status, timedOut] = useDiagnostics();
   return (
     <div>
@@ -36,6 +36,7 @@ export function DeveloperPage(props: any): JSX.Element {
 
 export function reload(): void {
   try {
+    // eslint-disable-next-line no-undef
     chrome.runtime.reload();
     window.close();
   } catch (e) {
@@ -57,7 +58,9 @@ export async function confirmReset(): Promise<void> {
 
 export function openExtensionPage(page: string) {
   return () => {
+    // eslint-disable-next-line no-undef
     chrome.tabs.create({
+      // eslint-disable-next-line no-undef
       url: chrome.extension.getURL(page),
     });
   };
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx
index 8fe6de16c..2228271dc 100644
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ b/packages/taler-wallet-webextension/src/popup/History.tsx
@@ -21,14 +21,14 @@ import {
   Transaction,
   TransactionsResponse,
 } from "@gnu-taler/taler-util";
-import { h, JSX } from "preact";
+import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { PopupBox } from "../components/styled";
 import { TransactionItem } from "../components/TransactionItem";
 import { useBalances } from "../hooks/useBalances";
 import * as wxApi from "../wxApi";
 
-export function HistoryPage(props: any): JSX.Element {
+export function HistoryPage(): VNode {
   const [transactions, setTransactions] = useState<
     TransactionsResponse | undefined
   >(undefined);