diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/PendingTransactions.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | 24 |
1 files changed, 19 insertions, 5 deletions
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index b2e567d7d..eed31beb4 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -8,24 +8,35 @@ import Banner from "./Banner"; import { Time } from "./Time"; import * as wxApi from "../wxApi"; -interface Props extends JSX.HTMLAttributes {} +interface Props extends JSX.HTMLAttributes { + goToTransaction: (id: string) => void; +} -export function PendingTransactions({}: Props) { +export function PendingTransactions({ goToTransaction }: Props) { const state = useAsyncAsHook(wxApi.getTransactions, [ NotificationType.WithdrawGroupFinished, ]); const transactions = - !state || state.hasError ? [] : state.response.transactions; + !state || state.hasError + ? [] + : state.response.transactions.filter((t) => t.pending); - if (!state || state.hasError) { + if (!state || state.hasError || !transactions.length) { return <Fragment />; } - return <PendingTransactionsView transactions={transactions} />; + return ( + <PendingTransactionsView + goToTransaction={goToTransaction} + transactions={transactions} + /> + ); } export function PendingTransactionsView({ transactions, + goToTransaction, }: { + goToTransaction: (id: string) => void; transactions: Transaction[]; }) { return ( @@ -35,6 +46,8 @@ export function PendingTransactionsView({ backgroundColor: "lightcyan", maxHeight: 150, padding: 8, + flexGrow: 1, + maxWidth: 500, overflowY: transactions.length > 3 ? "scroll" : "hidden", }} elements={transactions.map((t) => { @@ -51,6 +64,7 @@ export function PendingTransactionsView({ {t.type.substring(0, 1)} </Avatar> ), + action: () => goToTransaction(t.transactionId), description: ( <Typography> <b> |