diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-19 14:51:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-19 14:51:35 -0300 |
commit | a35604fd562a72e4e266bf6a4255d89d3c1374a1 (patch) | |
tree | d0c4df01a89dc78c412be6da3aba3cec343937ff /packages/taler-wallet-webextension/src/wallet/History.tsx | |
parent | 60cfb0e78f3afed92f315c1394da717329db9564 (diff) | |
download | wallet-core-a35604fd562a72e4e266bf6a4255d89d3c1374a1.tar.xz |
some changes:
- simplify design to reuse more components (from wallet instead of popup)
- simplify hooks (useAsyncAsHook)
- updateNotification from backend now filter events by type
- new balance design proposed by Belen
- more information when the withdrawal is in process
- manual withdrawal implementation
- some bugs killed
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/History.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.tsx | 33 |
1 files changed, 14 insertions, 19 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 6b1a21852..bc8ef734a 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -17,42 +17,37 @@ import { AmountString, Balance, + NotificationType, Transaction, - TransactionsResponse, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; -import { DateSeparator, WalletBox } from "../components/styled"; +import { DateSeparator } from "../components/styled"; import { Time } from "../components/Time"; import { TransactionItem } from "../components/TransactionItem"; -import { useBalances } from "../hooks/useBalances"; +import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import * as wxApi from "../wxApi"; export function HistoryPage(): VNode { - const [transactions, setTransactions] = useState< - TransactionsResponse | undefined - >(undefined); - const balance = useBalances(); + const balance = useAsyncAsHook(wxApi.getBalance); const balanceWithoutError = balance?.hasError ? [] : balance?.response.balances || []; - useEffect(() => { - const fetchData = async (): Promise<void> => { - const res = await wxApi.getTransactions(); - setTransactions(res); - }; - fetchData(); - }, []); + const transactionQuery = useAsyncAsHook(wxApi.getTransactions, [ + NotificationType.WithdrawGroupFinished, + ]); - if (!transactions) { + if (!transactionQuery) { return <div>Loading ...</div>; } + if (transactionQuery.hasError) { + return <div>There was an error loading the transactions.</div>; + } return ( <HistoryView balances={balanceWithoutError} - list={[...transactions.transactions].reverse()} + list={[...transactionQuery.response.transactions].reverse()} /> ); } @@ -87,7 +82,7 @@ export function HistoryView({ const multiCurrency = balances.length > 1; return ( - <WalletBox noPadding> + <Fragment> {balances.length > 0 && ( <header> {balances.length === 1 && ( @@ -128,6 +123,6 @@ export function HistoryView({ ); })} </section> - </WalletBox> + </Fragment> ); } |