From 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 15 Nov 2021 11:18:58 -0300 Subject: prettier --- .../src/popup/BalancePage.tsx | 219 +++++++++++++-------- 1 file changed, 137 insertions(+), 82 deletions(-) (limited to 'packages/taler-wallet-webextension/src/popup/BalancePage.tsx') diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index 8e5c5c42e..2913f60e0 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -15,20 +15,37 @@ */ import { - amountFractionalBase, Amounts, - Balance, BalancesResponse, - i18n + amountFractionalBase, + Amounts, + Balance, + BalancesResponse, + i18n, } from "@gnu-taler/taler-util"; import { JSX, h, Fragment } from "preact"; import { ErrorMessage } from "../components/ErrorMessage"; -import { PopupBox, Centered, ButtonPrimary, ErrorBox, Middle } from "../components/styled/index"; +import { + PopupBox, + Centered, + ButtonPrimary, + ErrorBox, + Middle, +} 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 +export function BalancePage({ + goToWalletManualWithdraw, +}: { + goToWalletManualWithdraw: () => void; +}) { + const balance = useBalances(); + return ( + + ); } export interface BalanceViewProps { balance: BalancesHook; @@ -46,22 +63,26 @@ function formatPending(entry: Balance): JSX.Element { if (!Amounts.isZero(pendingIncoming)) { incoming = ( - - - {"+"} - {renderAmount(entry.pendingIncoming)} - {" "} - + + + + {"+"} + {renderAmount(entry.pendingIncoming)} + {" "} + + ); } if (!Amounts.isZero(pendingOutgoing)) { payment = ( - - - {"-"} - {renderAmount(entry.pendingOutgoing)} - {" "} - + + + + {"-"} + {renderAmount(entry.pendingOutgoing)} + {" "} + + ); } @@ -80,76 +101,110 @@ function formatPending(entry: Balance): JSX.Element { ); } - -export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) { - +export function BalanceView({ + balance, + Linker, + goToWalletManualWithdraw, +}: BalanceViewProps) { function Content() { if (!balance) { - return + return ; } if (balance.hasError) { - return (
- {balance.message} -

- Click here for help and - diagnostics. -

-
) + return ( +
+ {balance.message} +

+ Click here for help and + diagnostics. +

+
+ ); } if (balance.response.balances.length === 0) { - return (
- -

- You have no balance to show. Need some{" "} - help getting started? -

- -
) + return ( +
+ +

+ + You have no balance to show. Need some{" "} + help getting started? + +

+ +
+ ); } - return
- {balance.response.balances.map((entry) => { - const av = Amounts.parseOrThrow(entry.available); - // Create our number formatter. - let formatter; - try { - formatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: av.currency, - currencyDisplay: 'symbol' - // These options are needed to round to whole numbers if that's what you want. - //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) - //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) - }); - } catch { - formatter = new Intl.NumberFormat('en-US', { - // style: 'currency', - // currency: av.currency, - // These options are needed to round to whole numbers if that's what you want. - //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) - //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) - }); - } - - const v = formatter.format(av.value + av.fraction / amountFractionalBase); - const fontSize = v.length < 8 ? '3em' : (v.length < 13 ? '2em' : '1em') - return ( - - - - - ); - })}
{v}{av.currency}{formatPending(entry)}
-
+ return ( +
+ + {balance.response.balances.map((entry) => { + const av = Amounts.parseOrThrow(entry.available); + // Create our number formatter. + let formatter; + try { + formatter = new Intl.NumberFormat("en-US", { + style: "currency", + currency: av.currency, + currencyDisplay: "symbol", + // These options are needed to round to whole numbers if that's what you want. + //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) + //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) + }); + } catch { + formatter = new Intl.NumberFormat("en-US", { + // style: 'currency', + // currency: av.currency, + // These options are needed to round to whole numbers if that's what you want. + //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) + //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) + }); + } + + const v = formatter.format( + av.value + av.fraction / amountFractionalBase, + ); + const fontSize = + v.length < 8 ? "3em" : v.length < 13 ? "2em" : "1em"; + return ( + + + + + + ); + })} +
+ {v} + + {av.currency} + + {formatPending(entry)} +
+
+ ); } - return - {/*
*/} - - {/*
*/} -
-
- Withdraw -
- + return ( + + {/*
*/} + + {/*
*/} + + + ); } -- cgit v1.2.3