pending transaction, finally!

1 files changed, 28 insertions, 6 deletions

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 {