1 files changed, 57 insertions, 32 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
index 33182a38d..5fa08f8a6 100644
--- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
@@ -14,68 +14,87 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { BalancesResponse, i18n } from "@gnu-taler/taler-util";
+import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BalanceTable } from "../components/BalanceTable";
-import { ButtonPrimary, Centered, ErrorBox } from "../components/styled";
-import { HookResponse, useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { Loading } from "../components/Loading";
+import { MultiActionButton } from "../components/MultiActionButton";
+import {
+  ButtonPrimary,
+  Centered,
+  ErrorBox,
+  SuccessBox,
+} from "../components/styled";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
+interface Props {
+  goToWalletDeposit: (currency: string) => void;
+  goToWalletHistory: (currency: string) => void;
+  goToWalletManualWithdraw: () => void;
+}
+
 export function BalancePage({
   goToWalletManualWithdraw,
   goToWalletDeposit,
-}: {
-  goToWalletDeposit: (currency: string) => void;
-  goToWalletManualWithdraw: () => void;
-}): VNode {
+  goToWalletHistory,
+}: Props): VNode {
   const state = useAsyncAsHook(wxApi.getBalance);
+
+  const balances = !state || state.hasError ? [] : state.response.balances;
+
+  if (!state) {
+    return <Loading />;
+  }
+
+  if (state.hasError) {
+    return (
+      <Fragment>
+        <ErrorBox>{state.message}</ErrorBox>
+        <p>
+          Click <PageLink pageName="welcome">here</PageLink> for help and
+          diagnostics.
+        </p>
+      </Fragment>
+    );
+  }
+
   return (
     <BalanceView
-      balance={state}
-      Linker={PageLink}
+      balances={balances}
       goToWalletManualWithdraw={goToWalletManualWithdraw}
       goToWalletDeposit={goToWalletDeposit}
+      goToWalletHistory={goToWalletHistory}
     />
   );
 }
 
 export interface BalanceViewProps {
-  balance: HookResponse<BalancesResponse>;
-  Linker: typeof PageLink;
+  balances: Balance[];
   goToWalletManualWithdraw: () => void;
   goToWalletDeposit: (currency: string) => void;
+  goToWalletHistory: (currency: string) => void;
 }
 
 export function BalanceView({
-  balance,
-  Linker,
+  balances,
   goToWalletManualWithdraw,
   goToWalletDeposit,
+  goToWalletHistory,
 }: BalanceViewProps): VNode {
-  if (!balance) {
-    return <div>Loading...</div>;
-  }
+  const currencyWithNonZeroAmount = balances
+    .filter((b) => !Amounts.isZero(b.available))
+    .map((b) => b.available.split(":")[0]);
 
-  if (balance.hasError) {
-    return (
-      <Fragment>
-        <ErrorBox>{balance.message}</ErrorBox>
-        <p>
-          Click <Linker pageName="welcome">here</Linker> for help and
-          diagnostics.
-        </p>
-      </Fragment>
-    );
-  }
-  if (balance.response.balances.length === 0) {
+  if (balances.length === 0) {
     return (
       <Fragment>
         <p>
           <Centered style={{ marginTop: 100 }}>
             <i18n.Translate>
               You have no balance to show. Need some{" "}
-              <Linker pageName="/welcome">help</Linker> getting started?
+              <PageLink pageName="/welcome">help</PageLink> getting started?
             </i18n.Translate>
           </Centered>
         </p>
@@ -93,15 +112,21 @@ export function BalanceView({
     <Fragment>
       <section>
         <BalanceTable
-          balances={balance.response.balances}
-          goToWalletDeposit={goToWalletDeposit}
+          balances={balances}
+          goToWalletHistory={goToWalletHistory}
         />
       </section>
       <footer style={{ justifyContent: "space-between" }}>
-        <div />
         <ButtonPrimary onClick={goToWalletManualWithdraw}>
           Withdraw
         </ButtonPrimary>
+        {currencyWithNonZeroAmount.length > 0 && (
+          <MultiActionButton
+            label={(s) => `Deposit ${s}`}
+            actions={currencyWithNonZeroAmount}
+            onClick={(c) => goToWalletDeposit(c)}
+          />
+        )}
       </footer>
     </Fragment>
   );