diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.stories.tsx | 16 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.tsx | 128 |
2 files changed, 71 insertions, 73 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index cc87cb992..c28e4188f 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -162,11 +162,6 @@ const exampleData = { } as TransactionPeerPullDebit, }; -export const NoBalance = tests.createExample(TestedComponent, { - transactions: [], - balances: [], -}); - export const SomeBalanceWithNoTransactions = tests.createExample( TestedComponent, { @@ -186,6 +181,7 @@ export const SomeBalanceWithNoTransactions = tests.createExample( }, }, ], + balanceIndex: 0, }, ); @@ -206,6 +202,8 @@ export const OneSimpleTransaction = tests.createExample(TestedComponent, { }, }, ], + balanceIndex: 0, + }); export const TwoTransactionsAndZeroBalance = tests.createExample( @@ -227,6 +225,7 @@ export const TwoTransactionsAndZeroBalance = tests.createExample( }, }, ], + balanceIndex: 0, }, ); @@ -254,6 +253,7 @@ export const OneTransactionPending = tests.createExample(TestedComponent, { }, }, ], + balanceIndex: 0, }); export const SomeTransactions = tests.createExample(TestedComponent, { @@ -288,6 +288,7 @@ export const SomeTransactions = tests.createExample(TestedComponent, { }, }, ], + balanceIndex: 0, }); export const SomeTransactionsInDifferentStates = tests.createExample( @@ -381,6 +382,7 @@ export const SomeTransactionsInDifferentStates = tests.createExample( }, }, ], + balanceIndex: 0, }, ); @@ -424,6 +426,7 @@ export const SomeTransactionsWithTwoCurrencies = tests.createExample( }, }, ], + balanceIndex: 0, }, ); @@ -496,6 +499,7 @@ export const FiveOfficialCurrencies = tests.createExample(TestedComponent, { }, }, ], + balanceIndex: 0, }); export const FiveOfficialCurrenciesWithHighValue = tests.createExample( @@ -569,6 +573,7 @@ export const FiveOfficialCurrenciesWithHighValue = tests.createExample( }, }, ], + balanceIndex: 0, }, ); @@ -594,4 +599,5 @@ export const PeerToPeer = tests.createExample(TestedComponent, { }, }, ], + balanceIndex: 0, }); diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 41b03424c..1cf7021d5 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -18,6 +18,7 @@ import { AbsoluteTime, Amounts, NotificationType, + ScopeInfo, ScopeType, Transaction, WalletBalance, @@ -57,10 +58,16 @@ export function HistoryPage({ }: Props): VNode { const { i18n } = useTranslationContext(); const api = useBackendContext(); - const state = useAsyncAsHook(async () => ({ - b: await api.wallet.call(WalletApiOperation.GetBalances, {}), - tx: await api.wallet.call(WalletApiOperation.GetTransactions, {}), - })); + const [balanceIndex, setBalanceIndex] = useState<number>(0); + + const state = useAsyncAsHook(async () => { + 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 + }) + return { b, tx } + }, [balanceIndex]); useEffect(() => { return api.listener.onUpdateNotification( @@ -68,6 +75,7 @@ export function HistoryPage({ state?.retry, ); }); + const { pushAlertOnError } = useAlertContext(); if (!state) { return <Loading />; @@ -84,10 +92,20 @@ export function HistoryPage({ ); } + if (!state.response.b.balances.length) { + return ( + <NoBalanceHelp + goToWalletManualWithdraw={{ + onClick: pushAlertOnError(goToWalletManualWithdraw), + }} + /> + ); + } return ( <HistoryView + balanceIndex={balanceIndex} + changeBalanceIndex={b => setBalanceIndex(b)} balances={state.response.b.balances} - defaultCurrency={currency} goToWalletManualWithdraw={goToWalletManualWithdraw} goToWalletDeposit={goToWalletDeposit} transactions={[...state.response.tx.transactions].reverse()} @@ -95,66 +113,49 @@ export function HistoryPage({ ); } -const term = 1000 * 60 * 60 * 24; -function normalizeToDay(x: number): number { - return Math.round(x / term) * term; -} - export function HistoryView({ - defaultCurrency, - transactions, balances, + balanceIndex, + changeBalanceIndex, + transactions, goToWalletManualWithdraw, goToWalletDeposit, }: { + balanceIndex: number, + changeBalanceIndex: (s: number) => void; goToWalletDeposit: (currency: string) => Promise<void>; goToWalletManualWithdraw: (currency?: string) => Promise<void>; - defaultCurrency?: string; transactions: Transaction[]; balances: WalletBalance[]; }): VNode { const { i18n } = useTranslationContext(); - const { pushAlertOnError } = useAlertContext(); - const transactionByCurrency = transactions.reduce((prev, cur) => { - const c = Amounts.parseOrThrow(cur.amountEffective).currency; - if (!prev[c]) { - prev[c] = []; - } - prev[c].push(cur); - return prev; - }, {} as Record<string, Transaction[]>); + // const currencies = balances + // .filter((b) => { + // const av = Amounts.parseOrThrow(b.available); + // return ( + // Amounts.isNonZero(av) || + // (transactionByCurrency[av.currency] && + // transactionByCurrency[av.currency].length > 0) + // ); + // }); - const currencies = balances - .filter((b) => { - const av = Amounts.parseOrThrow(b.available); - return ( - Amounts.isNonZero(av) || - (transactionByCurrency[av.currency] && - transactionByCurrency[av.currency].length > 0) - ); - }); + // const defaultCurrencyIndex = balances.findIndex( + // (c) => c.scopeInfo.currency === defaultCurrency, + // ); + // const [currencyIndex, setCurrencyIndex] = useState( + // defaultCurrencyIndex === -1 ? 0 : defaultCurrencyIndex, + // ); + // const selectedCurrency = + // balances.length > 0 ? balances[currencyIndex] : undefined; + const balance = balances[balanceIndex]; - const defaultCurrencyIndex = currencies.findIndex( - (c) => c.scopeInfo.currency === defaultCurrency, - ); - const [currencyIndex, setCurrencyIndex] = useState( - defaultCurrencyIndex === -1 ? 0 : defaultCurrencyIndex, - ); - const selectedCurrency = - currencies.length > 0 ? currencies[currencyIndex] : undefined; - - const currencyAmount = balances[currencyIndex] - ? Amounts.jsonifyAmount(balances[currencyIndex].available) + const available = balance + ? Amounts.jsonifyAmount(balance.available) : undefined; - const ts = - selectedCurrency === undefined - ? [] - : transactionByCurrency[selectedCurrency.scopeInfo.currency] ?? []; - const datesWithTransaction: string[] = []; - const byDate = ts.reduce((rv, x) => { + const byDate = transactions.reduce((rv, x) => { const startDay = x.timestamp.t_s === "never" ? 0 : startOfDay(x.timestamp.t_s * 1000).getTime(); if (startDay) { @@ -168,15 +169,6 @@ export function HistoryView({ return rv; }, {} as { [x: string]: Transaction[] }); - if (balances.length === 0 || !selectedCurrency) { - return ( - <NoBalanceHelp - goToWalletManualWithdraw={{ - onClick: pushAlertOnError(goToWalletManualWithdraw), - }} - /> - ); - } return ( <Fragment> <section> @@ -194,9 +186,9 @@ export function HistoryView({ display: "flex", }} > - {currencies.length === 1 ? ( + {balances.length === 1 ? ( <CenteredText style={{ fontSize: "x-large", margin: 8 }}> - {selectedCurrency} + {balance.scopeInfo.currency} </CenteredText> ) : ( <NiceSelect style={{ flexDirection: "column" }}> @@ -204,12 +196,12 @@ export function HistoryView({ style={{ fontSize: "x-large", }} - value={currencyIndex} + value={balanceIndex} onChange={(e) => { - setCurrencyIndex(Number(e.currentTarget.value)); + changeBalanceIndex(Number.parseInt(e.currentTarget.value, 10)); }} > - {currencies.map((entry, index) => { + {balances.map((entry, index) => { return ( <option value={index} key={entry.scopeInfo.currency}> {entry.scopeInfo.currency} @@ -218,11 +210,11 @@ export function HistoryView({ })} </select> <div style={{ fontSize: "small", color: "grey" }}> - {selectedCurrency.scopeInfo.type === ScopeType.Exchange || selectedCurrency.scopeInfo.type === ScopeType.Auditor ? selectedCurrency.scopeInfo.url : undefined} + {balance.scopeInfo.type === ScopeType.Exchange || balance.scopeInfo.type === ScopeType.Auditor ? balance.scopeInfo.url : undefined} </div> </NiceSelect> )} - {currencyAmount && ( + {available && ( <CenteredBoldText style={{ display: "inline-block", @@ -230,7 +222,7 @@ export function HistoryView({ margin: 8, }} > - {Amounts.stringifyValue(currencyAmount, 2)} + {Amounts.stringifyValue(available, 2)} </CenteredBoldText> )} </div> @@ -239,17 +231,17 @@ export function HistoryView({ tooltip="Transfer money to the wallet" startIcon={DownloadIcon} variant="contained" - onClick={() => goToWalletManualWithdraw(selectedCurrency.scopeInfo.currency)} + onClick={() => goToWalletManualWithdraw(balance.scopeInfo.currency)} > <i18n.Translate>Add</i18n.Translate> </Button> - {currencyAmount && Amounts.isNonZero(currencyAmount) && ( + {available && Amounts.isNonZero(available) && ( <Button tooltip="Transfer money from the wallet" startIcon={UploadIcon} variant="outlined" color="primary" - onClick={() => goToWalletDeposit(selectedCurrency.scopeInfo.currency)} + onClick={() => goToWalletDeposit(balance.scopeInfo.currency)} > <i18n.Translate>Send</i18n.Translate> </Button> |