packages/taler-wallet-webextension/src/components/PendingTransactions.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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;