aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/taler-wallet-webextension/src/components/Banner.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/components/PendingTransactions.tsx24
-rw-r--r--packages/taler-wallet-webextension/src/components/TransactionItem.tsx31
-rw-r--r--packages/taler-wallet-webextension/src/mui/Grid.tsx14
-rw-r--r--packages/taler-wallet-webextension/src/mui/Typography.tsx1
-rw-r--r--packages/taler-wallet-webextension/src/popupEntryPoint.tsx10
-rw-r--r--packages/taler-wallet-webextension/src/walletEntryPoint.tsx6
-rw-r--r--packages/taler-wallet-webextension/src/wxApi.ts1
-rw-r--r--packages/taler-wallet-webextension/tsconfig.json2
9 files changed, 66 insertions, 25 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>
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx
index 345305fe1..d05b91f18 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.tsx
+++ b/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>
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx
index 7ff4a694c..bfaddd7f8 100644
--- a/packages/taler-wallet-webextension/src/mui/Typography.tsx
+++ b/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,
{
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 6c9afbe84..c076f6670 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/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>
@@ -139,6 +143,10 @@ function Application(): VNode {
/>
<Route
+ path={Pages.balance_transaction}
+ component={RedirectToWalletPage}
+ />
+ <Route
path={Pages.balance_manual_withdraw}
component={RedirectToWalletPage}
/>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index df969c029..e37bf149b 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/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 && (
diff --git a/packages/taler-wallet-webextension/src/wxApi.ts b/packages/taler-wallet-webextension/src/wxApi.ts
index 868bd8256..c306b17a9 100644
--- a/packages/taler-wallet-webextension/src/wxApi.ts
+++ b/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();
}
diff --git a/packages/taler-wallet-webextension/tsconfig.json b/packages/taler-wallet-webextension/tsconfig.json
index 25920a120..482282871 100644
--- a/packages/taler-wallet-webextension/tsconfig.json
+++ b/packages/taler-wallet-webextension/tsconfig.json
@@ -35,4 +35,4 @@
"include": [
"src/**/*"
]
-} \ No newline at end of file
+}