diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/History.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/History.tsx | 122 |
1 files changed, 81 insertions, 41 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx index 1447da9b0..8fe6de16c 100644 --- a/packages/taler-wallet-webextension/src/popup/History.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.tsx @@ -14,7 +14,13 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountString, Balance, i18n, Transaction, TransactionsResponse } from "@gnu-taler/taler-util"; +import { + AmountString, + Balance, + i18n, + Transaction, + TransactionsResponse, +} from "@gnu-taler/taler-util"; import { h, JSX } from "preact"; import { useEffect, useState } from "preact/hooks"; import { PopupBox } from "../components/styled"; @@ -22,13 +28,14 @@ import { TransactionItem } from "../components/TransactionItem"; import { useBalances } from "../hooks/useBalances"; import * as wxApi from "../wxApi"; - export function HistoryPage(props: any): JSX.Element { const [transactions, setTransactions] = useState< TransactionsResponse | undefined >(undefined); - const balance = useBalances() - const balanceWithoutError = balance?.hasError ? [] : (balance?.response.balances || []) + const balance = useBalances(); + const balanceWithoutError = balance?.hasError + ? [] + : balance?.response.balances || []; useEffect(() => { const fetchData = async (): Promise<void> => { @@ -42,46 +49,79 @@ export function HistoryPage(props: any): JSX.Element { return <div>Loading ...</div>; } - return <HistoryView balances={balanceWithoutError} list={[...transactions.transactions].reverse()} />; + return ( + <HistoryView + balances={balanceWithoutError} + list={[...transactions.transactions].reverse()} + /> + ); } function amountToString(c: AmountString) { - const idx = c.indexOf(':') - return `${c.substring(idx + 1)} ${c.substring(0, idx)}` + const idx = c.indexOf(":"); + return `${c.substring(idx + 1)} ${c.substring(0, idx)}`; } - - -export function HistoryView({ list, balances }: { list: Transaction[], balances: Balance[] }) { - const multiCurrency = balances.length > 1 - return <PopupBox noPadding> - {balances.length > 0 && <header> - {multiCurrency ? <div class="title"> - Balance: <ul style={{ margin: 0 }}> - {balances.map(b => <li>{b.available}</li>)} - </ul> - </div> : <div class="title"> - Balance: <span>{amountToString(balances[0].available)}</span> - </div>} - </header>} - {list.length === 0 ? <section data-expanded data-centered> - <p><i18n.Translate> - You have no history yet, here you will be able to check your last transactions. - </i18n.Translate></p> - </section> : - <section> - {list.slice(0, 3).map((tx, i) => ( - <TransactionItem key={i} tx={tx} multiCurrency={multiCurrency} /> - ))} - </section> - } - <footer style={{ justifyContent: 'space-around' }}> - {list.length > 0 && - <a target="_blank" - rel="noopener noreferrer" - style={{ color: 'darkgreen', textDecoration: 'none' }} - href={chrome.extension ? chrome.extension.getURL(`/static/wallet.html#/history`) : '#'}>VIEW MORE TRANSACTIONS</a> - } - </footer> - </PopupBox> +export function HistoryView({ + list, + balances, +}: { + list: Transaction[]; + balances: Balance[]; +}) { + const multiCurrency = balances.length > 1; + return ( + <PopupBox noPadding> + {balances.length > 0 && ( + <header> + {multiCurrency ? ( + <div class="title"> + Balance:{" "} + <ul style={{ margin: 0 }}> + {balances.map((b) => ( + <li>{b.available}</li> + ))} + </ul> + </div> + ) : ( + <div class="title"> + Balance: <span>{amountToString(balances[0].available)}</span> + </div> + )} + </header> + )} + {list.length === 0 ? ( + <section data-expanded data-centered> + <p> + <i18n.Translate> + You have no history yet, here you will be able to check your last + transactions. + </i18n.Translate> + </p> + </section> + ) : ( + <section> + {list.slice(0, 3).map((tx, i) => ( + <TransactionItem key={i} tx={tx} multiCurrency={multiCurrency} /> + ))} + </section> + )} + <footer style={{ justifyContent: "space-around" }}> + {list.length > 0 && ( + <a + target="_blank" + rel="noopener noreferrer" + style={{ color: "darkgreen", textDecoration: "none" }} + href={ + chrome.extension + ? chrome.extension.getURL(`/static/wallet.html#/history`) + : "#" + } + > + VIEW MORE TRANSACTIONS + </a> + )} + </footer> + </PopupBox> + ); } |