diff options
author | Sebastian <sebasjm@gmail.com> | 2024-04-12 12:34:03 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-04-12 12:34:03 -0300 |
commit | 6a153202729b6a8ecfbe610abaabbc24bf8f94ba (patch) | |
tree | 6ebb3bf08f56e79238ee2f524713dc9ae14132a3 /packages/taler-wallet-webextension | |
parent | 1657e3136941f99b2b5e7d5e5cc8a2d8122628fa (diff) | |
download | wallet-core-6a153202729b6a8ecfbe610abaabbc24bf8f94ba.tar.xz |
dd53: Android has different order of items on top
Diffstat (limited to 'packages/taler-wallet-webextension')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.tsx | 150 |
1 files changed, 82 insertions, 68 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index b27bf3f51..3d1ab15b6 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -20,7 +20,7 @@ import { NotificationType, ScopeType, Transaction, - WalletBalance + WalletBalance, } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; @@ -62,14 +62,15 @@ export function HistoryPage({ const [balanceIndex, setBalanceIndex] = useState<number>(0); const [settings] = useSettings(); const state = useAsyncAsHook(async () => { - const b = await api.wallet.call(WalletApiOperation.GetBalances, {}) - const balance = b.balances.length > 0 ? b.balances[balanceIndex] : undefined + const b = await api.wallet.call(WalletApiOperation.GetBalances, {}); + const balance = + b.balances.length > 0 ? b.balances[balanceIndex] : undefined; const tx = await api.wallet.call(WalletApiOperation.GetTransactions, { scopeInfo: balance?.scopeInfo, sort: "descending", includeRefreshes: settings.showRefeshTransactions, - }) - return { b, tx } + }); + return { b, tx }; }, [balanceIndex]); useEffect(() => { @@ -108,7 +109,7 @@ export function HistoryPage({ return ( <HistoryView balanceIndex={balanceIndex} - changeBalanceIndex={b => setBalanceIndex(b)} + changeBalanceIndex={(b) => setBalanceIndex(b)} balances={state.response.b.balances} goToWalletManualWithdraw={goToWalletManualWithdraw} goToWalletDeposit={goToWalletDeposit} @@ -125,7 +126,7 @@ export function HistoryView({ goToWalletManualWithdraw, goToWalletDeposit, }: { - balanceIndex: number, + balanceIndex: number; changeBalanceIndex: (s: number) => void; goToWalletDeposit: (currency: string) => Promise<void>; goToWalletManualWithdraw: (currency?: string) => Promise<void>; @@ -141,86 +142,45 @@ export function HistoryView({ : undefined; const datesWithTransaction: string[] = []; - const byDate = transactions.reduce((rv, x) => { - const startDay = - x.timestamp.t_s === "never" ? 0 : startOfDay(x.timestamp.t_s * 1000).getTime(); - if (startDay) { - if (!rv[startDay]) { - rv[startDay] = []; - datesWithTransaction.push(String(startDay)); + const byDate = transactions.reduce( + (rv, x) => { + const startDay = + x.timestamp.t_s === "never" + ? 0 + : startOfDay(x.timestamp.t_s * 1000).getTime(); + if (startDay) { + if (!rv[startDay]) { + rv[startDay] = []; + datesWithTransaction.push(String(startDay)); + } + rv[startDay].push(x); } - rv[startDay].push(x); - } - return rv; - }, {} as { [x: string]: Transaction[] }); + return rv; + }, + {} as { [x: string]: Transaction[] }, + ); return ( <Fragment> <section> - <SubTitle style={{marginBottom: 0}}> - <i18n.Translate>Balance</i18n.Translate> - </SubTitle> <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", + marginRight: 20, }} > - <div - style={{ - width: "fit-content", - display: "flex", - }} - > - {balances.length === 1 ? ( - <CenteredText style={{ fontSize: "x-large", margin: 8 }}> - {balance.scopeInfo.currency} - </CenteredText> - ) : ( - <NiceSelect style={{ flexDirection: "column" }}> - <select - style={{ - fontSize: "x-large", - }} - value={balanceIndex} - onChange={(e) => { - changeBalanceIndex(Number.parseInt(e.currentTarget.value, 10)); - }} - > - {balances.map((entry, index) => { - return ( - <option value={index} key={entry.scopeInfo.currency}> - {entry.scopeInfo.currency} - </option> - ); - })} - </select> - <div style={{ fontSize: "small", color: "grey" }}> - {balance.scopeInfo.type === ScopeType.Exchange || balance.scopeInfo.type === ScopeType.Auditor ? balance.scopeInfo.url : undefined} - </div> - </NiceSelect> - )} - {available && ( - <CenteredBoldText - style={{ - display: "inline-block", - fontSize: "x-large", - margin: 8, - }} - > - {Amounts.stringifyValue(available, 2)} - </CenteredBoldText> - )} - </div> <div> <Button tooltip="Transfer money to the wallet" startIcon={DownloadIcon} variant="contained" - onClick={() => goToWalletManualWithdraw(balance.scopeInfo.currency)} + onClick={() => + goToWalletManualWithdraw(balance.scopeInfo.currency) + } > <i18n.Translate>Receive</i18n.Translate> </Button> @@ -236,6 +196,60 @@ export function HistoryView({ </Button> )} </div> + <div style={{display:"flex", flexDirection:"column"}}> + <h3 style={{marginBottom: 0}}>Balance</h3> + <div + style={{ + width: "fit-content", + display: "flex", + }} + > + {balances.length === 1 ? ( + <CenteredText style={{ fontSize: "x-large", margin: 8 }}> + {balance.scopeInfo.currency} + </CenteredText> + ) : ( + <NiceSelect style={{ flexDirection: "column" }}> + <select + style={{ + fontSize: "x-large", + }} + value={balanceIndex} + onChange={(e) => { + changeBalanceIndex( + Number.parseInt(e.currentTarget.value, 10), + ); + }} + > + {balances.map((entry, index) => { + return ( + <option value={index} key={entry.scopeInfo.currency}> + {entry.scopeInfo.currency} + </option> + ); + })} + </select> + <div style={{ fontSize: "small", color: "grey" }}> + {balance.scopeInfo.type === ScopeType.Exchange || + balance.scopeInfo.type === ScopeType.Auditor + ? balance.scopeInfo.url + : undefined} + </div> + </NiceSelect> + )} + {available && ( + <CenteredBoldText + style={{ + display: "inline-block", + fontSize: "x-large", + margin: 8, + }} + > + {Amounts.stringifyValue(available, 2)} + </CenteredBoldText> + )} + </div> + </div> </div> </section> {datesWithTransaction.length === 0 ? ( |