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/BalancePage.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/BalancePage.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/BalancePage.tsx | 110 |
1 files changed, 21 insertions, 89 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx index 9a2847670..04d79a5ea 100644 --- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx @@ -14,27 +14,23 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { - amountFractionalBase, - Amounts, - Balance, - BalancesResponse, - i18n, -} from "@gnu-taler/taler-util"; -import { h, VNode } from "preact"; -import { ButtonPrimary, Centered, WalletBox } from "../components/styled/index"; -import { BalancesHook, useBalances } from "../hooks/useBalances"; -import { PageLink, renderAmount } from "../renderHtml"; +import { BalancesResponse, i18n } from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; +import { BalanceTable } from "../components/BalanceTable"; +import { ButtonPrimary, ErrorBox } from "../components/styled/index"; +import { HookResponse, useAsyncAsHook } from "../hooks/useAsyncAsHook"; +import { PageLink } from "../renderHtml"; +import * as wxApi from "../wxApi"; export function BalancePage({ goToWalletManualWithdraw, }: { goToWalletManualWithdraw: () => void; }): VNode { - const balance = useBalances(); + const state = useAsyncAsHook(wxApi.getBalance); return ( <BalanceView - balance={balance} + balance={state} Linker={PageLink} goToWalletManualWithdraw={goToWalletManualWithdraw} /> @@ -42,7 +38,7 @@ export function BalancePage({ } export interface BalanceViewProps { - balance: BalancesHook; + balance: HookResponse<BalancesResponse>; Linker: typeof PageLink; goToWalletManualWithdraw: () => void; } @@ -53,18 +49,18 @@ export function BalanceView({ goToWalletManualWithdraw, }: BalanceViewProps): VNode { if (!balance) { - return <span />; + return <div>Loading...</div>; } if (balance.hasError) { return ( - <div> - <p>{i18n.str`Error: could not retrieve balance information.`}</p> + <Fragment> + <ErrorBox>{balance.message}</ErrorBox> <p> Click <Linker pageName="welcome">here</Linker> for help and diagnostics. </p> - </div> + </Fragment> ); } if (balance.response.balances.length === 0) { @@ -77,81 +73,17 @@ export function BalanceView({ </p> ); } - return ( - <ShowBalances - wallet={balance.response} - onWithdraw={goToWalletManualWithdraw} - /> - ); -} - -function formatPending(entry: Balance): VNode { - let incoming: VNode | undefined; - let payment: VNode | undefined; - - // const available = Amounts.parseOrThrow(entry.available); - const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming); - // const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing); - - if (!Amounts.isZero(pendingIncoming)) { - incoming = ( - <span> - <i18n.Translate> - <span style={{ color: "darkgreen" }}> - {"+"} - {renderAmount(entry.pendingIncoming)} - </span>{" "} - incoming - </i18n.Translate> - </span> - ); - } - - const l = [incoming, payment].filter((x) => x !== undefined); - if (l.length === 0) { - return <span />; - } - - if (l.length === 1) { - return <span>({l})</span>; - } - return ( - <span> - ({l[0]}, {l[1]}) - </span> - ); -} -function ShowBalances({ - wallet, - onWithdraw, -}: { - wallet: BalancesResponse; - onWithdraw: () => void; -}): VNode { return ( - <WalletBox> + <Fragment> <section> - <Centered> - {wallet.balances.map((entry) => { - const av = Amounts.parseOrThrow(entry.available); - const v = av.value + av.fraction / amountFractionalBase; - return ( - <p key={av.currency}> - <span> - <span style={{ fontSize: "5em", display: "block" }}>{v}</span>{" "} - <span>{av.currency}</span> - </span> - {formatPending(entry)} - </p> - ); - })} - </Centered> + <BalanceTable balances={balance.response.balances} /> </section> - <footer> - <div /> - <ButtonPrimary onClick={onWithdraw}>Withdraw</ButtonPrimary> + <footer style={{ justifyContent: "space-around" }}> + <ButtonPrimary onClick={goToWalletManualWithdraw}> + Withdraw + </ButtonPrimary> </footer> - </WalletBox> + </Fragment> ); } |