diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/BalancePage.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/BalancePage.tsx | 129 |
1 files changed, 80 insertions, 49 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx index eb5a0447c..f3c08a3e8 100644 --- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx @@ -15,19 +15,30 @@ */ import { - amountFractionalBase, Amounts, - Balance, BalancesResponse, - i18n + amountFractionalBase, + Amounts, + Balance, + BalancesResponse, + i18n, } from "@gnu-taler/taler-util"; -import { JSX } from "preact"; +import { JSX, h } from "preact"; import { ButtonPrimary, Centered, WalletBox } from "../components/styled/index"; import { BalancesHook, useBalances } from "../hooks/useBalances"; import { PageLink, renderAmount } from "../renderHtml"; - -export function BalancePage({ goToWalletManualWithdraw }: { goToWalletManualWithdraw: () => void }) { - const balance = useBalances() - return <BalanceView balance={balance} Linker={PageLink} goToWalletManualWithdraw={goToWalletManualWithdraw} /> +export function BalancePage({ + goToWalletManualWithdraw, +}: { + goToWalletManualWithdraw: () => void; +}) { + const balance = useBalances(); + return ( + <BalanceView + balance={balance} + Linker={PageLink} + goToWalletManualWithdraw={goToWalletManualWithdraw} + /> + ); } export interface BalanceViewProps { @@ -36,9 +47,13 @@ export interface BalanceViewProps { goToWalletManualWithdraw: () => void; } -export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) { +export function BalanceView({ + balance, + Linker, + goToWalletManualWithdraw, +}: BalanceViewProps) { if (!balance) { - return <span /> + return <span />; } if (balance.hasError) { @@ -50,19 +65,24 @@ export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: Balan diagnostics. </p> </div> - ) + ); } if (balance.response.balances.length === 0) { return ( - <p><i18n.Translate> - You have no balance to show. Need some{" "} - <Linker pageName="/welcome">help</Linker> getting started? - </i18n.Translate></p> - ) + <p> + <i18n.Translate> + You have no balance to show. Need some{" "} + <Linker pageName="/welcome">help</Linker> getting started? + </i18n.Translate> + </p> + ); } - return <ShowBalances wallet={balance.response} - onWithdraw={goToWalletManualWithdraw} - /> + return ( + <ShowBalances + wallet={balance.response} + onWithdraw={goToWalletManualWithdraw} + /> + ); } function formatPending(entry: Balance): JSX.Element { @@ -75,13 +95,15 @@ function formatPending(entry: Balance): JSX.Element { if (!Amounts.isZero(pendingIncoming)) { incoming = ( - <span><i18n.Translate> - <span style={{ color: "darkgreen" }}> - {"+"} - {renderAmount(entry.pendingIncoming)} - </span>{" "} - incoming - </i18n.Translate></span> + <span> + <i18n.Translate> + <span style={{ color: "darkgreen" }}> + {"+"} + {renderAmount(entry.pendingIncoming)} + </span>{" "} + incoming + </i18n.Translate> + </span> ); } @@ -100,27 +122,36 @@ function formatPending(entry: Balance): JSX.Element { ); } - -function ShowBalances({ wallet, onWithdraw }: { wallet: BalancesResponse, onWithdraw: () => void }) { - return <WalletBox> - <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> - </section> - <footer> - <div /> - <ButtonPrimary onClick={onWithdraw} >Withdraw</ButtonPrimary> - </footer> - </WalletBox> +function ShowBalances({ + wallet, + onWithdraw, +}: { + wallet: BalancesResponse; + onWithdraw: () => void; +}) { + return ( + <WalletBox> + <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> + </section> + <footer> + <div /> + <ButtonPrimary onClick={onWithdraw}>Withdraw</ButtonPrimary> + </footer> + </WalletBox> + ); } |