fixes #8228

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>