1 files changed, 26 insertions, 46 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 6dde30b39..d628b68e8 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -15,23 +15,24 @@
  */
 
 import * as utils from "@gnu-taler/taler-util";
-import { AbsoluteTime } from "@gnu-taler/taler-util";
 import {
+  AbsoluteTime,
   ProviderInfo,
   ProviderPaymentStatus,
   ProviderPaymentType,
-  WalletApiOperation,
-} from "@gnu-taler/taler-wallet-core";
-import { Fragment, h, VNode } from "preact";
+} from "@gnu-taler/taler-util";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+import { ErrorAlertView } from "../components/CurrentAlerts.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
-import { PaymentStatus, SmallLightText } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
-import { useTranslationContext } from "../context/translation.js";
+import { PaymentStatus, SmallLightText } from "../components/styled/index.js";
+import { alertFromError } from "../context/alert.js";
+import { useBackendContext } from "../context/backend.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
-import { wxApi } from "../wxApi.js";
 
 interface Props {
   pid: string;
@@ -47,12 +48,10 @@ export function ProviderDetailPage({
   onWithdraw,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
+  const api = useBackendContext();
   async function getProviderInfo(): Promise<ProviderInfo | null> {
     //create a first list of backup info by currency
-    const status = await wxApi.wallet.call(
-      WalletApiOperation.GetBackupInfo,
-      {},
-    );
+    const status = await api.wallet.call(WalletApiOperation.GetBackupInfo, {});
 
     const providers = status.providers.filter(
       (p) => p.syncProviderBaseUrl === providerURL,
@@ -67,14 +66,12 @@ export function ProviderDetailPage({
   }
   if (state.hasError) {
     return (
-      <LoadingError
-        title={
-          <i18n.Translate>
-            There was an error loading the provider detail for &quot;
-            {providerURL}&quot;
-          </i18n.Translate>
-        }
-        error={state}
+      <ErrorAlertView
+        error={alertFromError(
+          i18n,
+          i18n.str`There was an error loading the provider detail for &quot;${providerURL}&quot;`,
+          state,
+        )}
       />
     );
   }
@@ -103,7 +100,7 @@ export function ProviderDetailPage({
     <ProviderView
       info={info}
       onSync={async () =>
-        wxApi.wallet
+        api.wallet
           .call(WalletApiOperation.RunBackupCycle, {
             providers: [providerURL],
           })
@@ -120,7 +117,7 @@ export function ProviderDetailPage({
         onWithdraw(info.paymentStatus.amount);
       }}
       onDelete={() =>
-        wxApi.wallet
+        api.wallet
           .call(WalletApiOperation.RemoveBackupProvider, {
             provider: providerURL,
           })
@@ -155,7 +152,7 @@ export function ProviderView({
 }: ViewProps): VNode {
   const { i18n } = useTranslationContext();
   const lb = info.lastSuccessfulBackupTimestamp
-    ? AbsoluteTime.fromTimestamp(info.lastSuccessfulBackupTimestamp)
+    ? AbsoluteTime.fromPreciseTimestamp(info.lastSuccessfulBackupTimestamp)
     : undefined;
   const isPaid =
     info.paymentStatus.type === ProviderPaymentType.Paid ||
@@ -272,9 +269,7 @@ function Error({ info }: { info: ProviderInfo }): VNode {
   if (info.lastError) {
     return (
       <ErrorMessage
-        title={
-          <i18n.Translate>This provider has reported an error</i18n.Translate>
-        }
+        title={i18n.str`This provider has reported an error`}
         description={info.lastError.hint}
       />
     );
@@ -284,32 +279,17 @@ function Error({ info }: { info: ProviderInfo }): VNode {
       case "backup-conflicting-device":
         return (
           <ErrorMessage
-            title={
-              <Fragment>
-                <i18n.Translate>
-                  There is conflict with another backup from{" "}
-                  <b>{info.backupProblem.otherDeviceId}</b>
-                </i18n.Translate>
-              </Fragment>
-            }
+            title={i18n.str`There is conflict with another backup from &quot;${info.backupProblem.otherDeviceId}&quot;`}
           />
         );
       case "backup-unreadable":
-        return (
-          <ErrorMessage
-            title={<i18n.Translate>Backup is not readable</i18n.Translate>}
-          />
-        );
+        return <ErrorMessage title={i18n.str`Backup is not readable`} />;
       default:
         return (
           <ErrorMessage
-            title={
-              <Fragment>
-                <i18n.Translate>
-                  Unknown backup problem: {JSON.stringify(info.backupProblem)}
-                </i18n.Translate>
-              </Fragment>
-            }
+            title={i18n.str`Unknown backup problem: ${JSON.stringify(
+              info.backupProblem,
+            )}`}
           />
         );
     }