pending operations

1 files changed, 46 insertions, 0 deletions

diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
new file mode 100644
index 000000000..99f43a62b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -0,0 +1,46 @@
+import { Amounts, Transaction } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Typography } from "../mui/Typography";
+import Banner from "./Banner";
+import { Time } from "./Time";
+
+interface Props {
+  transactions: Transaction[];
+}
+
+export function PendingTransactions({ transactions }: Props) {
+  return (
+    <Banner
+      title="PENDING OPERATIONS"
+      style={{ backgroundColor: "lightblue", padding: 8 }}
+      elements={transactions.map((t) => {
+        const amount = Amounts.parseOrThrow(t.amountEffective);
+        return {
+          icon: (
+            <Avatar
+              style={{
+                border: "solid blue 1px",
+                color: "blue",
+                boxSizing: "border-box",
+              }}
+            >
+              {t.type.substring(0, 1)}
+            </Avatar>
+          ),
+          description: (
+            <Typography>
+              <b>
+                {amount.currency} {Amounts.stringifyValue(amount)}
+              </b>{" "}
+              - <Time timestamp={t.timestamp} format="dd MMMM yyyy" />
+            </Typography>
+          ),
+        };
+      })}
+    />
+  );
+}
+
+export default PendingTransactions;