add a taler action from the history page

1 files changed, 38 insertions, 19 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx
index b23b4781f..f897299d8 100644
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ b/packages/taler-wallet-webextension/src/popup/History.tsx
@@ -23,10 +23,11 @@ import {
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { PopupBox } from "../components/styled";
+import { ButtonPrimary } from "../components/styled/index";
 import { TransactionItem } from "../components/TransactionItem";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import * as wxApi from "../wxApi";
+import { AddNewActionView } from "./AddNewActionView";
 
 export function HistoryPage(): VNode {
   const [transactions, setTransactions] = useState<
@@ -45,6 +46,12 @@ export function HistoryPage(): VNode {
     fetchData();
   }, []);
 
+  const [addingAction, setAddingAction] = useState(false);
+
+  if (addingAction) {
+    return <AddNewActionView onCancel={() => setAddingAction(false)} />;
+  }
+
   if (!transactions) {
     return <div>Loading ...</div>;
   }
@@ -53,6 +60,7 @@ export function HistoryPage(): VNode {
     <HistoryView
       balances={balanceWithoutError}
       list={[...transactions.transactions].reverse()}
+      onAddNewAction={() => setAddingAction(true)}
     />
   );
 }
@@ -65,31 +73,42 @@ function amountToString(c: AmountString): string {
 export function HistoryView({
   list,
   balances,
+  onAddNewAction,
 }: {
   list: Transaction[];
   balances: Balance[];
+  onAddNewAction: () => void;
 }): VNode {
   const multiCurrency = balances.length > 1;
   return (
     <Fragment>
-      {balances.length > 0 && (
-        <header>
-          {multiCurrency ? (
-            <div class="title">
-              Balance:{" "}
-              <ul style={{ margin: 0 }}>
-                {balances.map((b, i) => (
-                  <li key={i}>{b.available}</li>
-                ))}
-              </ul>
-            </div>
-          ) : (
-            <div class="title">
-              Balance: <span>{amountToString(balances[0].available)}</span>
-            </div>
-          )}
-        </header>
-      )}
+      <header>
+        {balances.length > 0 ? (
+          <Fragment>
+            {multiCurrency ? (
+              <div class="title">
+                Balance:{" "}
+                <ul style={{ margin: 0 }}>
+                  {balances.map((b, i) => (
+                    <li key={i}>{b.available}</li>
+                  ))}
+                </ul>
+              </div>
+            ) : (
+              <div class="title">
+                Balance: <span>{amountToString(balances[0].available)}</span>
+              </div>
+            )}
+          </Fragment>
+        ) : (
+          <div />
+        )}
+        <div>
+          <ButtonPrimary onClick={onAddNewAction}>
+            <b>+</b>
+          </ButtonPrimary>
+        </div>
+      </header>
       {list.length === 0 ? (
         <section data-expanded data-centered>
           <p>