[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: pending clickable
From: |
gnunet |
Subject: |
[taler-wallet-core] branch master updated: pending clickable |
Date: |
Fri, 11 Mar 2022 20:20:07 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 9e7ee06a pending clickable
9e7ee06a is described below
commit 9e7ee06ad1870339d011a0be27867cc36f94490d
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Mar 11 16:18:26 2022 -0300
pending clickable
---
.../src/components/Banner.tsx | 2 ++
.../src/components/PendingTransactions.tsx | 24 +++++++++++++----
.../src/components/TransactionItem.tsx | 31 ++++++++++++++++------
.../taler-wallet-webextension/src/mui/Grid.tsx | 14 +++++-----
.../src/mui/Typography.tsx | 1 -
.../src/popupEntryPoint.tsx | 10 ++++++-
.../src/walletEntryPoint.tsx | 6 ++++-
packages/taler-wallet-webextension/src/wxApi.ts | 1 -
packages/taler-wallet-webextension/tsconfig.json | 2 +-
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 37affd5b..77d79d87 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 b2e567d7..eed31beb 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 abcca9c2..b17dfce8 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 345305fe..d05b91f1 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 7ff4a694..bfaddd7f 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 6c9afbe8..c076f667 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>
@@ -138,6 +142,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 df969c02..e37bf149 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 868bd825..c306b17a 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 25920a12..48228287 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
+}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: pending clickable,
gnunet <=