pending transaction, finally!

4 files changed, 184 insertions, 11 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 665b0de6f..4d5b22208 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -91,7 +91,7 @@ export const PendingOperation = () => (
     <Wrapper>
       <Banner
         title="PENDING TRANSACTIONS"
-        style={{ backgroundColor: "lightblue", padding: 8 }}
+        style={{ backgroundColor: "lightcyan", padding: 8 }}
         elements={[
           {
             icon: (
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx
index 09dfac816..37affd5b4 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -29,16 +29,24 @@ export function Banner({ title, elements, confirm, ...rest }: Props) {
             </Grid>
           </Grid>
         )}
-        <Grid container wrap="nowrap" spacing={1} alignItems="center">
+        <Grid container columns={1}>
           {elements.map((e, i) => (
-            <Fragment key={i}>
+            <Grid
+              container
+              item
+              xs={1}
+              key={i}
+              wrap="nowrap"
+              spacing={1}
+              alignItems="center"
+            >
               {e.icon && (
-                <Grid item>
+                <Grid item xs={"auto"}>
                   <Avatar>{e.icon}</Avatar>
                 </Grid>
               )}
               <Grid item>{e.description}</Grid>
-            </Fragment>
+            </Grid>
           ))}
         </Grid>
         {confirm && (
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
new file mode 100644
index 000000000..658a41aa8
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
@@ -0,0 +1,143 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { PendingTransactionsView as TestedComponent } from "./PendingTransactions";
+import { Fragment, h, VNode } from "preact";
+import { createExample } from "../test-utils";
+import { Transaction, TransactionType } from "@gnu-taler/taler-util";
+
+export default {
+  title: "component/PendingTransactions",
+  component: TestedComponent,
+};
+
+export const OnePendingTransaction = createExample(TestedComponent, {
+  transactions: [
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+  ],
+});
+
+export const ThreePendingTransactions = createExample(TestedComponent, {
+  transactions: [
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+  ],
+});
+
+export const TenPendingTransactions = createExample(TestedComponent, {
+  transactions: [
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+    {
+      amountEffective: "USD:10",
+      type: TransactionType.Withdrawal,
+      timestamp: {
+        t_ms: 1,
+      },
+    } as Transaction,
+  ],
+});
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index 99f43a62b..b2e567d7d 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -1,20 +1,42 @@
-import { Amounts, Transaction } from "@gnu-taler/taler-util";
+import { Amounts, NotificationType, Transaction } from "@gnu-taler/taler-util";
 import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, h, JSX } from "preact";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { Avatar } from "../mui/Avatar";
 import { Typography } from "../mui/Typography";
 import Banner from "./Banner";
 import { Time } from "./Time";
+import * as wxApi from "../wxApi";
 
-interface Props {
-  transactions: Transaction[];
+interface Props extends JSX.HTMLAttributes {}
+
+export function PendingTransactions({}: Props) {
+  const state = useAsyncAsHook(wxApi.getTransactions, [
+    NotificationType.WithdrawGroupFinished,
+  ]);
+  const transactions =
+    !state || state.hasError ? [] : state.response.transactions;
+
+  if (!state || state.hasError) {
+    return <Fragment />;
+  }
+  return <PendingTransactionsView transactions={transactions} />;
 }
 
-export function PendingTransactions({ transactions }: Props) {
+export function PendingTransactionsView({
+  transactions,
+}: {
+  transactions: Transaction[];
+}) {
   return (
     <Banner
       title="PENDING OPERATIONS"
-      style={{ backgroundColor: "lightblue", padding: 8 }}
+      style={{
+        backgroundColor: "lightcyan",
+        maxHeight: 150,
+        padding: 8,
+        overflowY: transactions.length > 3 ? "scroll" : "hidden",
+      }}
       elements={transactions.map((t) => {
         const amount = Amounts.parseOrThrow(t.amountEffective);
         return {