diff options
Diffstat (limited to 'packages')
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 9c1365d3a..02d8a0e06 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 000000000..abf87db8a --- /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 edbc69622..8058ce252 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 665b0de6f..4d5b22208 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 09dfac816..37affd5b4 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 000000000..658a41aa8 --- /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 99f43a62b..b2e567d7d 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 b185504e4..ccca360fa 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 e85c00d60..53b4e1518 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 56d1e60e8..6c9afbe84 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 f2240cdf1..df969c029 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}> |