add a taler action from the history page

1 files changed, 40 insertions, 20 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index bc8ef734a..58db0360b 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -21,10 +21,12 @@ import {
   Transaction,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { DateSeparator } from "../components/styled";
+import { useState } from "preact/hooks";
+import { ButtonPrimary, DateSeparator } from "../components/styled";
 import { Time } from "../components/Time";
 import { TransactionItem } from "../components/TransactionItem";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { AddNewActionView } from "../popup/AddNewActionView";
 import * as wxApi from "../wxApi";
 
 export function HistoryPage(): VNode {
@@ -37,6 +39,12 @@ export function HistoryPage(): VNode {
     NotificationType.WithdrawGroupFinished,
   ]);
 
+  const [addingAction, setAddingAction] = useState(false);
+
+  if (addingAction) {
+    return <AddNewActionView onCancel={() => setAddingAction(false)} />;
+  }
+
   if (!transactionQuery) {
     return <div>Loading ...</div>;
   }
@@ -48,6 +56,7 @@ export function HistoryPage(): VNode {
     <HistoryView
       balances={balanceWithoutError}
       list={[...transactionQuery.response.transactions].reverse()}
+      onAddNewAction={() => setAddingAction(true)}
     />
   );
 }
@@ -65,9 +74,11 @@ function normalizeToDay(x: number): number {
 export function HistoryView({
   list,
   balances,
+  onAddNewAction,
 }: {
   list: Transaction[];
   balances: Balance[];
+  onAddNewAction: () => void;
 }): VNode {
   const byDate = list.reduce((rv, x) => {
     const theDate =
@@ -83,25 +94,34 @@ export function HistoryView({
 
   return (
     <Fragment>
-      {balances.length > 0 && (
-        <header>
-          {balances.length === 1 && (
-            <div class="title">
-              Balance: <span>{amountToString(balances[0].available)}</span>
-            </div>
-          )}
-          {balances.length > 1 && (
-            <div class="title">
-              Balance:{" "}
-              <ul style={{ margin: 0 }}>
-                {balances.map((b, i) => (
-                  <li key={i}>{b.available}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </header>
-      )}
+      <header>
+        {balances.length > 0 ? (
+          <Fragment>
+            {balances.length === 1 && (
+              <div class="title">
+                Balance: <span>{amountToString(balances[0].available)}</span>
+              </div>
+            )}
+            {balances.length > 1 && (
+              <div class="title">
+                Balance:{" "}
+                <ul style={{ margin: 0 }}>
+                  {balances.map((b, i) => (
+                    <li key={i}>{b.available}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </Fragment>
+        ) : (
+          <div />
+        )}
+        <div>
+          <ButtonPrimary onClick={onAddNewAction}>
+            <b>+</b>
+          </ButtonPrimary>
+        </div>
+      </header>
       <section>
         {Object.keys(byDate).map((d, i) => {
           return (