1 files changed, 13 insertions, 12 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index d5f072828..6ade0718a 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -16,7 +16,6 @@
 
 import {
   Amounts,
-  BackupBackupProviderTerms,
   canonicalizeBaseUrl,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
@@ -31,22 +30,28 @@ import {
   SubTitle,
   Title,
 } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useBackendContext } from "../context/backend.js";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../mui/Button.js";
 import { queryToSlashConfig } from "../utils/index.js";
-import { wxApi } from "../wxApi.js";
 
 interface Props {
   currency: string;
   onBack: () => Promise<void>;
 }
 
+interface BackupBackupProviderTerms {
+  annual_fee: string;
+  storage_limit_in_megabytes: number;
+  supported_protocol_version: string;
+}
+
 export function ProviderAddPage({ onBack }: Props): VNode {
   const [verifying, setVerifying] = useState<
     | { url: string; name: string; provider: BackupBackupProviderTerms }
     | undefined
   >(undefined);
-
+  const api = useBackendContext();
   if (!verifying) {
     return (
       <SetUrlView
@@ -70,7 +75,7 @@ export function ProviderAddPage({ onBack }: Props): VNode {
         setVerifying(undefined);
       }}
       onConfirm={() => {
-        return wxApi.wallet
+        return api.wallet
           .call(WalletApiOperation.AddBackupProvider, {
             backupProviderBaseUrl: verifying.url,
             name: verifying.name,
@@ -127,11 +132,7 @@ export function SetUrlView({
         </Title>
         {error && (
           <ErrorMessage
-            title={
-              <i18n.Translate>
-                Could not get provider information
-              </i18n.Translate>
-            }
+            title={i18n.str`Could not get provider information`}
             description={error}
           />
         )}
@@ -223,7 +224,7 @@ export function ConfirmProviderView({
         </SubTitle>
         <p>
           {Amounts.isZero(provider.annual_fee) ? (
-            <i18n.Translate>free of charge</i18n.Translate>
+            i18n.str`free of charge`
           ) : (
             <i18n.Translate>
               {provider.annual_fee} per year of service
@@ -240,7 +241,7 @@ export function ConfirmProviderView({
           </i18n.Translate>
         </p>
         <Checkbox
-          label={<i18n.Translate>Accept terms of service</i18n.Translate>}
+          label={i18n.str`Accept terms of service`}
           name="terms"
           onToggle={async () => setAccepted((old) => !old)}
           enabled={accepted}