use translation context from web-utils, don't use match react-router since is broken

2 files changed, 9 insertions, 9 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx b/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx
index 510bc29b8..aa50dfa91 100644
--- a/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx
+++ b/packages/merchant-backoffice-ui/src/components/exception/AsyncButton.tsx
@@ -22,7 +22,7 @@
 import { ComponentChildren, h } from "preact";
 import { LoadingModal } from "../modal/index.js";
 import { useAsync } from "../../hooks/async.js";
-import { Translate } from "../../i18n/index.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 type Props = {
   children: ComponentChildren;
@@ -33,14 +33,14 @@ type Props = {
 
 export function AsyncButton({ onClick, disabled, children, ...rest }: Props) {
   const { isSlow, isLoading, request, cancel } = useAsync(onClick);
-
+  const { i18n } = useTranslationContext();
   if (isSlow) {
     return <LoadingModal onCancel={cancel} />;
   }
   if (isLoading) {
     return (
       <button class="button">
-        <Translate>Loading...</Translate>
+        <i18n.Translate>Loading...</i18n.Translate>
       </button>
     );
   }
diff --git a/packages/merchant-backoffice-ui/src/components/exception/login.tsx b/packages/merchant-backoffice-ui/src/components/exception/login.tsx
index d1898915d..552e76ed6 100644
--- a/packages/merchant-backoffice-ui/src/components/exception/login.tsx
+++ b/packages/merchant-backoffice-ui/src/components/exception/login.tsx
@@ -19,11 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
 import { useInstanceContext } from "../../context/instance.js";
-import { Translate, useTranslator } from "../../i18n/index.js";
 import { Notification } from "../../utils/types.js";
 
 interface Props {
@@ -51,7 +51,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
   const [token, setToken] = useState(currentToken);
 
   const [url, setURL] = useState(backendUrl);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="columns is-centered">
@@ -61,13 +61,13 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
             class="modal-card-head"
             style={{ border: "1px solid", borderBottom: 0 }}
           >
-            <p class="modal-card-title">{i18n`Login required`}</p>
+            <p class="modal-card-title">{i18n.str`Login required`}</p>
           </header>
           <section
             class="modal-card-body"
             style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }}
           >
-            <Translate>Please enter your access token.</Translate>
+            <i18n.Translate>Please enter your access token.</i18n.Translate>
             <div class="field is-horizontal">
               <div class="field-label is-normal">
                 <label class="label">URL</label>
@@ -95,7 +95,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
             <div class="field is-horizontal">
               <div class="field-label is-normal">
                 <label class="label">
-                  <Translate>Access Token</Translate>
+                  <i18n.Translate>Access Token</i18n.Translate>
                 </label>
               </div>
               <div class="field-body">
@@ -133,7 +133,7 @@ export function LoginModal({ onConfirm, withMessage }: Props): VNode {
                 onConfirm(url, normalizeToken(token));
               }}
             >
-              <Translate>Confirm</Translate>
+              <i18n.Translate>Confirm</i18n.Translate>
             </button>
           </footer>
         </div>