diff options
author | Sebastian <sebasjm@gmail.com> | 2023-01-04 11:24:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-01-04 11:38:00 -0300 |
commit | 24cac493dded00ef40e0e30a0d2263e4f35c3e29 (patch) | |
tree | 1bbd1fb4f9149af349358491c3720750d031d255 /packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | |
parent | 7d02e4212346b7b7b88197259a7e74554e1b10a3 (diff) | |
download | wallet-core-24cac493dded00ef40e0e30a0d2263e4f35c3e29.tar.xz |
fix #7522
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/PendingTransactions.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/PendingTransactions.tsx | 102 |
1 files changed, 65 insertions, 37 deletions
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index 85b43fb4e..e41ff2836 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -26,6 +26,7 @@ import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Avatar } from "../mui/Avatar.js"; +import { Grid } from "../mui/Grid.js"; import { Typography } from "../mui/Typography.js"; import Banner from "./Banner.js"; import { Time } from "./Time.js"; @@ -34,6 +35,11 @@ interface Props extends JSX.HTMLAttributes { goToTransaction: (id: string) => Promise<void>; } +/** + * this cache will save the tx from the previous render + */ +const cache = { tx: [] as Transaction[] }; + export function PendingTransactions({ goToTransaction }: Props): VNode { const api = useBackendContext(); const state = useAsyncAsHook(() => @@ -49,12 +55,13 @@ export function PendingTransactions({ goToTransaction }: Props): VNode { const transactions = !state || state.hasError - ? [] + ? cache.tx : state.response.transactions.filter((t) => t.pending); - if (!state || state.hasError || !transactions.length) { + if (!transactions.length) { return <Fragment />; } + cache.tx = transactions; return ( <PendingTransactionsView goToTransaction={goToTransaction} @@ -72,46 +79,67 @@ export function PendingTransactionsView({ }): VNode { const { i18n } = useTranslationContext(); return ( - <Banner - titleHead={<i18n.Translate>PENDING OPERATIONS</i18n.Translate>} + <div style={{ backgroundColor: "lightcyan", - maxHeight: 150, - padding: 8, - flexGrow: 1, - maxWidth: 500, - overflowY: transactions.length > 3 ? "scroll" : "hidden", + display: "flex", + justifyContent: "center", }} - elements={transactions.map((t) => { - const amount = Amounts.parseOrThrow(t.amountEffective); - return { - icon: ( - <Avatar - style={{ - border: "solid blue 1px", - color: "blue", - boxSizing: "border-box", + > + <Banner + titleHead={<i18n.Translate>PENDING OPERATIONS</i18n.Translate>} + style={{ + backgroundColor: "lightcyan", + maxHeight: 150, + padding: 8, + flexGrow: 1, + maxWidth: 500, + overflowY: transactions.length > 3 ? "scroll" : "hidden", + }} + > + {transactions.map((t, i) => { + const amount = Amounts.parseOrThrow(t.amountEffective); + return ( + <Grid + container + item + xs={1} + key={i} + wrap="nowrap" + role="button" + spacing={1} + alignItems="center" + onClick={() => { + goToTransaction(t.transactionId); }} > - {t.type.substring(0, 1)} - </Avatar> - ), - action: () => goToTransaction(t.transactionId), - description: ( - <Fragment> - <Typography inline bold> - {amount.currency} {Amounts.stringifyValue(amount)} - </Typography> - - - <Time - timestamp={AbsoluteTime.fromTimestamp(t.timestamp)} - format="dd MMMM yyyy" - /> - </Fragment> - ), - }; - })} - /> + <Grid item xs={"auto"}> + <Avatar + style={{ + border: "solid blue 1px", + color: "blue", + boxSizing: "border-box", + }} + > + {t.type.substring(0, 1)} + </Avatar> + </Grid> + + <Grid item> + <Typography inline bold> + {amount.currency} {Amounts.stringifyValue(amount)} + </Typography> + - + <Time + timestamp={AbsoluteTime.fromTimestamp(t.timestamp)} + format="dd MMMM yyyy" + /> + </Grid> + </Grid> + ); + })} + </Banner> + </div> ); } |