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>
-              &nbsp;-&nbsp;
-              <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>
+                &nbsp;-&nbsp;
+                <Time
+                  timestamp={AbsoluteTime.fromTimestamp(t.timestamp)}
+                  format="dd MMMM yyyy"
+                />
+              </Grid>
+            </Grid>
+          );
+        })}
+      </Banner>
+    </div>
   );
 }