taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

pending clickable

Browse Source
This commit is contained in:
Sebastian 2022-03-11 16:18:26 -03:00
parent ab68ecc733
commit 9e7ee06ad1
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
9 changed files with 66 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/taler-wallet-webextension/src/components/Banner.tsx
View File

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

24
packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
View File

@ -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>

31
packages/taler-wallet-webextension/src/components/TransactionItem.tsx
View File

@ -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>

14
packages/taler-wallet-webextension/src/mui/Grid.tsx
View File

@ -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>

1
packages/taler-wallet-webextension/src/mui/Typography.tsx
View File

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

10
packages/taler-wallet-webextension/src/popupEntryPoint.tsx
View File

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

6
packages/taler-wallet-webextension/src/walletEntryPoint.tsx
View File

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

1
packages/taler-wallet-webextension/src/wxApi.ts
View File

@ -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();
}

2
packages/taler-wallet-webextension/tsconfig.json
View File

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