pending clickable

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"}>

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>

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)}>
+    <HistoryRow
-      <img src={props.iconPath} />
+      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>

packages/taler-wallet-webextension/src/mui/Grid.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren, createContext } from "preact";
+import { h, JSX, VNode, ComponentChildren, createContext } from "preact";
 import { useContext } from "preact/hooks";
 import { theme } from "./style";
 
@@ -31,7 +31,7 @@ const zeroMinWidthStyle = css`
 type GridSizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type SpacingSizes = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
-export interface Props {
+export interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   columns?: number | Partial<ResponsiveSize>;
   container?: boolean;
   item?: boolean;
@@ -226,6 +226,8 @@ export function Grid({
   justifyContent,
   zeroMinWidth = false,
   children,
+  onClick,
+  ...rest
 }: Props): VNode {
   const cc = useContext(GridContext);
   const columns = !cp ? cc : toResponsive(cp);
@@ -234,12 +236,7 @@ export function Grid({
   const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing);
 
   const ssize = toResponsive({ xs, md, lg, xl, sm } as any);
-  console.log(ssize);
 
-  if (container) {
-    console.log(rowSpacing);
-    console.log(columnSpacing);
-  }
   const spacingStyles = !container
     ? {}
     : {
@@ -312,7 +309,10 @@ export function Grid({
           justifyContent,
           alignItems,
           flexWrap: wrap,
+          cursor: onClick ? "pointer" : "inherit",
         }}
+        onClick={onClick}
+        {...rest}
       >
         {children}
       </div>

packages/taler-wallet-webextension/src/mui/Typography.tsx

@@ -75,7 +75,6 @@ export function Typography({
       : {
           textAlign: align,
         };
-  console.log("typograph", cmp, variant);
   return h(
     cmp,
     {

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -83,7 +83,11 @@ function Application(): VNode {
       <DevContextProvider>
         {({ devMode }: { devMode: boolean }) => (
           <IoCProviderForRuntime>
-            <PendingTransactions />
+            <PendingTransactions
+              goToTransaction={(txId: string) =>
+                route(Pages.balance_transaction.replace(":tid", txId))
+              }
+            />
             <Match>
               {({ path }: { path: string }) => <PopupNavBar path={path} />}
             </Match>
@@ -138,6 +142,10 @@ function Application(): VNode {
                   }}
                 />
 
+                <Route
+                  path={Pages.balance_transaction}
+                  component={RedirectToWalletPage}
+                />
                 <Route
                   path={Pages.balance_manual_withdraw}
                   component={RedirectToWalletPage}

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -120,7 +120,11 @@ function Application(): VNode {
                 justifyContent: "center",
               }}
             >
-              <PendingTransactions />
+              <PendingTransactions
+                goToTransaction={(txId: string) =>
+                  route(Pages.balance_transaction.replace(":tid", txId))
+                }
+              />
             </div>
             <WalletBox>
               {globalNotification && (

packages/taler-wallet-webextension/src/wxApi.ts

@@ -395,7 +395,6 @@ export function onUpdateNotification(messageTypes: Array<NotificationType>, doCa
   const port = chrome.runtime.connect({ name: "notifications" });
   const listener = (message: MessageFromBackend): void => {
     const shouldNotify = messageTypes.includes(message.type)
-    console.log("Notification arrived, should notify?", shouldNotify, message.type, messageTypes)
     if (shouldNotify) {
       doCallback();
     }

packages/taler-wallet-webextension/tsconfig.json

@@ -35,4 +35,4 @@
   "include": [
     "src/**/*"
   ]
-}
+}