fix #7152

1 files changed, 8 insertions, 16 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 8786b2ff7..96f0f6dd9 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -19,12 +19,13 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } 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 { alertFromError, ErrorAlert } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.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";
@@ -47,7 +48,7 @@ export namespace State {
 
   export interface Error {
     status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface Action {
@@ -73,6 +74,7 @@ function useComponentState({
   goToWalletManualWithdraw,
 }: Props): State {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   const [addingAction, setAddingAction] = useState(false);
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetBalances, {}),
@@ -94,7 +96,7 @@ function useComponentState({
   if (state.hasError) {
     return {
       status: "error",
-      error: state,
+      error: alertFromError(i18n.str`Could not load the balance`, state),
     };
   }
   if (addingAction) {
@@ -123,7 +125,7 @@ function useComponentState({
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  error: ErrorView,
+  error: ErrorAlertView,
   action: ActionView,
   balance: BalanceView,
 };
@@ -134,16 +136,6 @@ export const BalancePage = compose(
   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!} />;
 }
@@ -179,7 +171,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)}
           />