diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-11 11:14:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-11 11:15:07 -0300 |
commit | ab68ecc7332281a43ce4acf28302f85a3c8f401a (patch) | |
tree | dc449a317f5a777788918eac381089af2fdda5d9 /packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | |
parent | 9337734a245001f40fe8033e11f2df062fd7560b (diff) | |
download | wallet-core-ab68ecc7332281a43ce4acf28302f85a3c8f401a.tar.xz |
pending transaction, finally!
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/PendingTransactions.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | 34 |
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 { |