pending clickable

3 files changed, 44 insertions, 13 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx
index 37affd5b4..77d79d873 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -11,6 +11,7 @@ interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   elements: {
     icon?: VNode;
     description: VNode;
+    action?: () => void;
   }[];
   confirm?: {
     label: string;
@@ -39,6 +40,7 @@ export function Banner({ title, elements, confirm, ...rest }: Props) {
               wrap="nowrap"
               spacing={1}
               alignItems="center"
+              onClick={e.action}
             >
               {e.icon && (
                 <Grid item xs={"auto"}>
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>
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index abcca9c26..b17dfce88 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -29,6 +29,7 @@ import imageHandHeart from "../../static/img/ri-hand-heart-line.svg";
 import imageRefresh from "../../static/img/ri-refresh-line.svg";
 import imageRefund from "../../static/img/ri-refund-2-line.svg";
 import imageShoppingCart from "../../static/img/ri-shopping-cart-line.svg";
+import { Avatar } from "../mui/Avatar";
 import { Pages } from "../NavigationBar";
 import {
   Column,
@@ -51,7 +52,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           debitCreditIndicator={"credit"}
           title={new URL(tx.exchangeBaseUrl).hostname}
           timestamp={tx.timestamp}
-          iconPath={imageBank}
+          iconPath={"W"}
           pending={tx.pending}
         />
       );
@@ -64,7 +65,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.info.merchant.name}
           subtitle={tx.info.summary}
           timestamp={tx.timestamp}
-          iconPath={imageShoppingCart}
+          iconPath={"P"}
           pending={tx.pending}
         />
       );
@@ -76,7 +77,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           debitCreditIndicator={"credit"}
           title={tx.info.merchant.name}
           timestamp={tx.timestamp}
-          iconPath={imageRefund}
+          iconPath={"R"}
           pending={tx.pending}
         />
       );
@@ -88,7 +89,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           debitCreditIndicator={"credit"}
           title={new URL(tx.merchantBaseUrl).hostname}
           timestamp={tx.timestamp}
-          iconPath={imageHandHeart}
+          iconPath={"T"}
           pending={tx.pending}
         />
       );
@@ -100,7 +101,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           debitCreditIndicator={"credit"}
           title={new URL(tx.exchangeBaseUrl).hostname}
           timestamp={tx.timestamp}
-          iconPath={imageRefresh}
+          iconPath={"R"}
           pending={tx.pending}
         />
       );
@@ -112,7 +113,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           debitCreditIndicator={"debit"}
           title={tx.targetPaytoUri}
           timestamp={tx.timestamp}
-          iconPath={imageBank}
+          iconPath={"D"}
           pending={tx.pending}
         />
       );
@@ -121,8 +122,22 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
 
 function TransactionLayout(props: TransactionLayoutProps): VNode {
   return (
-    <HistoryRow href={Pages.balance_transaction.replace(":tid", props.id)}>
-      <img src={props.iconPath} />
+    <HistoryRow
+      href={Pages.balance_transaction.replace(":tid", props.id)}
+      style={{
+        backgroundColor: props.pending ? "lightcyan" : "inherit",
+        alignItems: "center",
+      }}
+    >
+      <Avatar
+        style={{
+          border: "solid gray 1px",
+          color: "gray",
+          boxSizing: "border-box",
+        }}
+      >
+        {props.iconPath}
+      </Avatar>
       <Column>
         <LargeText>
           <div>{props.title}</div>