diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/PendingTransactions.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | 46 |
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; |