1 files changed, 9 insertions, 9 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
index 5180c671c..7376a88cb 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/list/View.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/View.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 { MerchantBackend } from "../../../declaration.js";
 import { CardTable as CardTableActive } from "./TableActive.js";
-import { useState } from "preact/hooks";
-import { Translate, useTranslator } from "../../../i18n/index.js";
 
 interface Props {
   instances: MerchantBackend.Instances.Instance[];
@@ -48,7 +48,7 @@ export function View({
   const showIsActive = show === "active" ? "is-active" : "";
   const showIsDeleted = show === "deleted" ? "is-active" : "";
   const showAll = show === null ? "is-active" : "";
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const showingInstances = showIsDeleted
     ? instances.filter((i) => i.deleted)
@@ -66,30 +66,30 @@ export function View({
                 <li class={showIsActive}>
                   <div
                     class="has-tooltip-right"
-                    data-tooltip={i18n`Only show active instances`}
+                    data-tooltip={i18n.str`Only show active instances`}
                   >
                     <a onClick={() => setShow("active")}>
-                      <Translate>Active</Translate>
+                      <i18n.Translate>Active</i18n.Translate>
                     </a>
                   </div>
                 </li>
                 <li class={showIsDeleted}>
                   <div
                     class="has-tooltip-right"
-                    data-tooltip={i18n`Only show deleted instances`}
+                    data-tooltip={i18n.str`Only show deleted instances`}
                   >
                     <a onClick={() => setShow("deleted")}>
-                      <Translate>Deleted</Translate>
+                      <i18n.Translate>Deleted</i18n.Translate>
                     </a>
                   </div>
                 </li>
                 <li class={showAll}>
                   <div
                     class="has-tooltip-right"
-                    data-tooltip={i18n`Show all instances`}
+                    data-tooltip={i18n.str`Show all instances`}
                   >
                     <a onClick={() => setShow(null)}>
-                      <Translate>All</Translate>
+                      <i18n.Translate>All</i18n.Translate>
                     </a>
                   </div>
                 </li>