[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 03/03: pending transaction, finally!
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 03/03: pending transaction, finally! |
|
Date: |
Fri, 11 Mar 2022 15:15:19 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit ab68ecc7332281a43ce4acf28302f85a3c8f401a
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Mar 11 11:14:27 2022 -0300
pending transaction, finally!
---
.../.storybook/preview.js | 2 +-
.../babel.config-linaria.json | 30 +++++
.../taler-wallet-webextension/rollup.config.js | 4 +
.../src/components/Banner.stories.tsx | 2 +-
.../src/components/Banner.tsx | 16 ++-
.../src/components/PendingTransactions.stories.tsx | 143 +++++++++++++++++++++
.../src/components/PendingTransactions.tsx | 34 ++++-
.../taler-wallet-webextension/src/mui/Button.tsx | 2 +-
.../src/popup/BalancePage.tsx | 24 +---
.../src/popupEntryPoint.tsx | 2 +
.../src/walletEntryPoint.tsx | 10 ++
11 files changed, 236 insertions(+), 33 deletions(-)
diff --git a/packages/taler-wallet-webextension/.storybook/preview.js
b/packages/taler-wallet-webextension/.storybook/preview.js
index 9c1365d3..02d8a0e0 100644
--- a/packages/taler-wallet-webextension/.storybook/preview.js
+++ b/packages/taler-wallet-webextension/.storybook/preview.js
@@ -128,7 +128,7 @@ export const decorators = [
<Story />
</div>
}
- if (kind.startsWith('mui')) {
+ if (kind.startsWith('mui') || kind.startsWith('component')) {
return <div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Story />
</div>
diff --git a/packages/taler-wallet-webextension/babel.config-linaria.json
b/packages/taler-wallet-webextension/babel.config-linaria.json
new file mode 100644
index 00000000..abf87db8
--- /dev/null
+++ b/packages/taler-wallet-webextension/babel.config-linaria.json
@@ -0,0 +1,30 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+ /**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+/*
+ * Linaria need pre-process typscript files into javascript before running.
+ * We choose to use the default preact-cli config.
+ * This file should be used from @linaria/rollup plugin only
+ */
+{
+ "presets": [
+ "preact-cli/babel",
+ ]
+}
diff --git a/packages/taler-wallet-webextension/rollup.config.js
b/packages/taler-wallet-webextension/rollup.config.js
index edbc6962..8058ce25 100644
--- a/packages/taler-wallet-webextension/rollup.config.js
+++ b/packages/taler-wallet-webextension/rollup.config.js
@@ -71,6 +71,10 @@ const makePlugins = () => [
image(),
linaria({
+ babelOptions: {
+ babelrc: false,
+ configFile: './babel.config-linaria.json',
+ },
sourceMap: process.env.NODE_ENV !== 'production',
}),
diff --git
a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 665b0de6..4d5b2220 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -91,7 +91,7 @@ export const PendingOperation = () => (
<Wrapper>
<Banner
title="PENDING TRANSACTIONS"
- style={{ backgroundColor: "lightblue", padding: 8 }}
+ style={{ backgroundColor: "lightcyan", padding: 8 }}
elements={[
{
icon: (
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx
b/packages/taler-wallet-webextension/src/components/Banner.tsx
index 09dfac81..37affd5b 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -29,16 +29,24 @@ export function Banner({ title, elements, confirm, ...rest
}: Props) {
</Grid>
</Grid>
)}
- <Grid container wrap="nowrap" spacing={1} alignItems="center">
+ <Grid container columns={1}>
{elements.map((e, i) => (
- <Fragment key={i}>
+ <Grid
+ container
+ item
+ xs={1}
+ key={i}
+ wrap="nowrap"
+ spacing={1}
+ alignItems="center"
+ >
{e.icon && (
- <Grid item>
+ <Grid item xs={"auto"}>
<Avatar>{e.icon}</Avatar>
</Grid>
)}
<Grid item>{e.description}</Grid>
- </Fragment>
+ </Grid>
))}
</Grid>
{confirm && (
diff --git
a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
new file mode 100644
index 00000000..658a41aa
--- /dev/null
+++
b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
@@ -0,0 +1,143 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { PendingTransactionsView as TestedComponent } from
"./PendingTransactions";
+import { Fragment, h, VNode } from "preact";
+import { createExample } from "../test-utils";
+import { Transaction, TransactionType } from "@gnu-taler/taler-util";
+
+export default {
+ title: "component/PendingTransactions",
+ component: TestedComponent,
+};
+
+export const OnePendingTransaction = createExample(TestedComponent, {
+ transactions: [
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ ],
+});
+
+export const ThreePendingTransactions = createExample(TestedComponent, {
+ transactions: [
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ ],
+});
+
+export const TenPendingTransactions = createExample(TestedComponent, {
+ transactions: [
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ {
+ amountEffective: "USD:10",
+ type: TransactionType.Withdrawal,
+ timestamp: {
+ t_ms: 1,
+ },
+ } as Transaction,
+ ],
+});
diff --git
a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index 99f43a62..b2e567d7 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -1,20 +1,42 @@
-import { Amounts, Transaction } from "@gnu-taler/taler-util";
+import { Amounts, NotificationType, Transaction } from "@gnu-taler/taler-util";
import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, h, JSX } from "preact";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
import { Avatar } from "../mui/Avatar";
import { Typography } from "../mui/Typography";
import Banner from "./Banner";
import { Time } from "./Time";
+import * as wxApi from "../wxApi";
-interface Props {
- transactions: Transaction[];
+interface Props extends JSX.HTMLAttributes {}
+
+export function PendingTransactions({}: Props) {
+ const state = useAsyncAsHook(wxApi.getTransactions, [
+ NotificationType.WithdrawGroupFinished,
+ ]);
+ const transactions =
+ !state || state.hasError ? [] : state.response.transactions;
+
+ if (!state || state.hasError) {
+ return <Fragment />;
+ }
+ return <PendingTransactionsView transactions={transactions} />;
}
-export function PendingTransactions({ transactions }: Props) {
+export function PendingTransactionsView({
+ transactions,
+}: {
+ transactions: Transaction[];
+}) {
return (
<Banner
title="PENDING OPERATIONS"
- style={{ backgroundColor: "lightblue", padding: 8 }}
+ style={{
+ backgroundColor: "lightcyan",
+ maxHeight: 150,
+ padding: 8,
+ overflowY: transactions.length > 3 ? "scroll" : "hidden",
+ }}
elements={transactions.map((t) => {
const amount = Amounts.parseOrThrow(t.amountEffective);
return {
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx
b/packages/taler-wallet-webextension/src/mui/Button.tsx
index b185504e..ccca360f 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -15,7 +15,7 @@ interface Props {
startIcon?: VNode;
variant?: "contained" | "outlined" | "text";
color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
- onClick: () => void;
+ onClick?: () => void;
}
const baseStyle = css`
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index e85c00d6..53b4e151 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -28,7 +28,6 @@ import { JustInDevMode } from "../components/JustInDevMode";
import { Loading } from "../components/Loading";
import { LoadingError } from "../components/LoadingError";
import { MultiActionButton } from "../components/MultiActionButton";
-import PendingTransactions from "../components/PendingTransactions";
import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
import { AddNewActionView } from "../wallet/AddNewActionView";
@@ -46,19 +45,10 @@ export function BalancePage({
goToWalletHistory,
}: Props): VNode {
const [addingAction, setAddingAction] = useState(false);
- const state = useAsyncAsHook(
- async () => ({
- balance: await wxApi.getBalance(),
- pending: await wxApi.getTransactions(),
- }),
- [NotificationType.WithdrawGroupFinished],
- );
- const balances =
- !state || state.hasError ? [] : state.response.balance.balances;
- const pending =
- !state || state.hasError
- ? []
- : state.response.pending.transactions.filter((t) => t.pending);
+ const state = useAsyncAsHook(wxApi.getBalance, [
+ NotificationType.WithdrawGroupFinished,
+ ]);
+ const balances = !state || state.hasError ? [] : state.response.balances;
if (!state) {
return <Loading />;
@@ -80,7 +70,6 @@ export function BalancePage({
return (
<BalanceView
balances={balances}
- pending={pending}
goToWalletManualWithdraw={goToWalletManualWithdraw}
goToWalletDeposit={goToWalletDeposit}
goToWalletHistory={goToWalletHistory}
@@ -90,7 +79,6 @@ export function BalancePage({
}
export interface BalanceViewProps {
balances: Balance[];
- pending: Transaction[];
goToWalletManualWithdraw: () => void;
goToAddAction: () => void;
goToWalletDeposit: (currency: string) => void;
@@ -99,7 +87,6 @@ export interface BalanceViewProps {
export function BalanceView({
balances,
- pending,
goToWalletManualWithdraw,
goToWalletDeposit,
goToWalletHistory,
@@ -117,9 +104,6 @@ export function BalanceView({
return (
<Fragment>
- {/* {pending.length > 0 ? (
- <PendingTransactions transactions={pending} />
- ) : undefined} */}
<section>
<BalanceTable
balances={balances}
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 56d1e60e..6c9afbe8 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -26,6 +26,7 @@ import { Fragment, h, render, VNode } from "preact";
import Router, { route, Route } from "preact-router";
import { Match } from "preact-router/match";
import { useEffect } from "preact/hooks";
+import PendingTransactions from "./components/PendingTransactions";
import { PopupBox } from "./components/styled";
import { DevContextProvider } from "./context/devContext";
import { IoCProviderForRuntime } from "./context/iocContext";
@@ -82,6 +83,7 @@ function Application(): VNode {
<DevContextProvider>
{({ devMode }: { devMode: boolean }) => (
<IoCProviderForRuntime>
+ <PendingTransactions />
<Match>
{({ path }: { path: string }) => <PopupNavBar path={path} />}
</Match>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index f2240cdf..df969c02 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -27,6 +27,7 @@ import Router, { route, Route } from "preact-router";
import Match from "preact-router/match";
import { useEffect, useState } from "preact/hooks";
import { LogoHeader } from "./components/LogoHeader";
+import PendingTransactions from "./components/PendingTransactions";
import {
NavigationHeader,
NavigationHeaderHolder,
@@ -112,6 +113,15 @@ function Application(): VNode {
);
}}
</Match>
+ <div
+ style={{
+ backgroundColor: "lightcyan",
+ display: "flex",
+ justifyContent: "center",
+ }}
+ >
+ <PendingTransactions />
+ </div>
<WalletBox>
{globalNotification && (
<SuccessBox onClick={clearNotification}>
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.