1 files changed, 39 insertions, 32 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 98c6d166c..93770312e 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -14,21 +14,30 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, Balance, NotificationType } from "@gnu-taler/taler-util";
+import {
+  Amounts,
+  NotificationType,
+  WalletBalance,
+} from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { BalanceTable } from "../components/BalanceTable.js";
+import { ErrorAlertView } from "../components/CurrentAlerts.js";
 import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
 import { MultiActionButton } from "../components/MultiActionButton.js";
-import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import {
+  ErrorAlert,
+  alertFromError,
+  useAlertContext,
+} from "../context/alert.js";
+import { useBackendContext } from "../context/backend.js";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
-import { compose, StateViewMap } from "../utils/index.js";
+import { StateViewMap, compose } from "../utils/index.js";
 import { AddNewActionView } from "../wallet/AddNewActionView.js";
-import { wxApi } from "../wxApi.js";
 import { NoBalanceHelp } from "./NoBalanceHelp.js";
 
 export interface Props {
@@ -47,7 +56,7 @@ export namespace State {
 
   export interface Error {
     status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface Action {
@@ -59,7 +68,7 @@ export namespace State {
   export interface Balances {
     status: "balance";
     error: undefined;
-    balances: Balance[];
+    balances: WalletBalance[];
     addAction: ButtonHandler;
     goToWalletDeposit: (currency: string) => Promise<void>;
     goToWalletHistory: (currency: string) => Promise<void>;
@@ -67,10 +76,14 @@ export namespace State {
   }
 }
 
-function useComponentState(
-  { goToWalletDeposit, goToWalletHistory, goToWalletManualWithdraw }: Props,
-  api: typeof wxApi,
-): State {
+function useComponentState({
+  goToWalletDeposit,
+  goToWalletHistory,
+  goToWalletManualWithdraw,
+}: Props): State {
+  const api = useBackendContext();
+  const { i18n } = useTranslationContext();
+  const { pushAlertOnError } = useAlertContext();
   const [addingAction, setAddingAction] = useState(false);
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetBalances, {}),
@@ -78,7 +91,7 @@ function useComponentState(
 
   useEffect(() =>
     api.listener.onUpdateNotification(
-      [NotificationType.WithdrawGroupFinished],
+      [NotificationType.TransactionStateTransition],
       state?.retry,
     ),
   );
@@ -92,7 +105,8 @@ function useComponentState(
   if (state.hasError) {
     return {
       status: "error",
-      error: state,
+      error: alertFromError(          i18n,
+        i18n.str`Could not load the balance`, state),
     };
   }
   if (addingAction) {
@@ -100,7 +114,7 @@ function useComponentState(
       status: "action",
       error: undefined,
       cancel: {
-        onClick: async () => setAddingAction(false),
+        onClick: pushAlertOnError(async () => setAddingAction(false)),
       },
     };
   }
@@ -109,10 +123,10 @@ function useComponentState(
     error: undefined,
     balances: state.response.balances,
     addAction: {
-      onClick: async () => setAddingAction(true),
+      onClick: pushAlertOnError(async () => setAddingAction(true)),
     },
     goToWalletManualWithdraw: {
-      onClick: goToWalletManualWithdraw,
+      onClick: pushAlertOnError(goToWalletManualWithdraw),
     },
     goToWalletDeposit,
     goToWalletHistory,
@@ -121,27 +135,17 @@ function useComponentState(
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  error: ErrorView,
+  error: ErrorAlertView,
   action: ActionView,
   balance: BalanceView,
 };
 
 export const BalancePage = compose(
   "BalancePage",
-  (p: Props) => useComponentState(p, wxApi),
+  (p: Props) => useComponentState(p),
   viewMapping,
 );
 
-function ErrorView({ error }: State.Error): VNode {
-  const { i18n } = useTranslationContext();
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load balance page</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 function ActionView({ cancel }: State.Action): VNode {
   return <AddNewActionView onCancel={cancel.onClick!} />;
 }
@@ -150,7 +154,10 @@ export function BalanceView(state: State.Balances): VNode {
   const { i18n } = useTranslationContext();
   const currencyWithNonZeroAmount = state.balances
     .filter((b) => !Amounts.isZero(b.available))
-    .map((b) => b.available.split(":")[0]);
+    .map((b) => {
+      b.flags
+      return b.available.split(":")[0]
+    });
 
   if (state.balances.length === 0) {
     return (
@@ -177,7 +184,7 @@ export function BalanceView(state: State.Balances): VNode {
         </Button>
         {currencyWithNonZeroAmount.length > 0 && (
           <MultiActionButton
-            label={(s) => <i18n.Translate>Send {s}</i18n.Translate>}
+            label={(s) => i18n.str`Send ${s}`}
             actions={currencyWithNonZeroAmount}
             onClick={(c) => state.goToWalletDeposit(c)}
           />