1 files changed, 9 insertions, 8 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx
index 799978683..d900168b4 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx
@@ -18,14 +18,15 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { Translate, useTranslator } from "../../i18n/index.js";
 import { InputProps, useField } from "./useField.js";
 
 export type Props<T> = InputProps<T>;
 
 const TokenStatus = ({ prev, post }: any) => {
+  const { i18n } = useTranslationContext();
   if (
     (prev === undefined || prev === null) &&
     (post === undefined || post === null)
@@ -33,11 +34,11 @@ const TokenStatus = ({ prev, post }: any) => {
     return null;
   return prev === post ? null : post === null ? (
     <span class="tag is-danger is-align-self-center ml-2">
-      <Translate>Deleting</Translate>
+      <i18n.Translate>Deleting</i18n.Translate>
     </span>
   ) : (
     <span class="tag is-warning is-align-self-center ml-2">
-      <Translate>Changing</Translate>
+      <i18n.Translate>Changing</i18n.Translate>
     </span>
   );
 };
@@ -55,7 +56,7 @@ export function InputSecured<T>({
   const [active, setActive] = useState(false);
   const [newValue, setNuewValue] = useState("");
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <Fragment>
@@ -84,7 +85,7 @@ export function InputSecured<T>({
                     <i class="mdi mdi-lock-reset" />
                   </div>
                   <span>
-                    <Translate>Manage access token</Translate>
+                    <i18n.Translate>Manage access token</i18n.Translate>
                   </span>
                 </button>
                 <TokenStatus prev={initial} post={value} />
@@ -125,7 +126,7 @@ export function InputSecured<T>({
                       <i class="mdi mdi-lock-outline" />
                     </div>
                     <span>
-                      <Translate>Update</Translate>
+                      <i18n.Translate>Update</i18n.Translate>
                     </span>
                   </button>
                 </div>
@@ -154,7 +155,7 @@ export function InputSecured<T>({
                       <i class="mdi mdi-lock-open-variant" />
                     </div>
                     <span>
-                      <Translate>Remove</Translate>
+                      <i18n.Translate>Remove</i18n.Translate>
                     </span>
                   </button>
                 </div>
@@ -171,7 +172,7 @@ export function InputSecured<T>({
                       <i class="mdi mdi-lock-open-variant" />
                     </div>
                     <span>
-                      <Translate>Cancel</Translate>
+                      <i18n.Translate>Cancel</i18n.Translate>
                     </span>
                   </button>
                 </div>