1 files changed, 11 insertions, 11 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
index cad989980..c77f7737b 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.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 { FormProvider } from "../../../../components/form/FormProvider.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { CardTable } from "./Table.js";
 
 export interface Props {
@@ -61,7 +61,7 @@ export function ListPage({
 }: Props): VNode {
   const form = { payto_uri: payTo };
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <section class="section is-main-section">
       <div class="columns">
@@ -73,10 +73,10 @@ export function ListPage({
           >
             <InputSelector
               name="payto_uri"
-              label={i18n`Address`}
+              label={i18n.str`Address`}
               values={accounts}
-              placeholder={i18n`Select one account`}
-              tooltip={i18n`filter by account address`}
+              placeholder={i18n.str`Select one account`}
+              tooltip={i18n.str`filter by account address`}
             />
           </FormProvider>
         </div>
@@ -87,30 +87,30 @@ export function ListPage({
           <li class={isAllTransfers ? "is-active" : ""}>
             <div
               class="has-tooltip-right"
-              data-tooltip={i18n`remove all filters`}
+              data-tooltip={i18n.str`remove all filters`}
             >
               <a onClick={onShowAll}>
-                <Translate>All</Translate>
+                <i18n.Translate>All</i18n.Translate>
               </a>
             </div>
           </li>
           <li class={isVerifiedTransfers ? "is-active" : ""}>
             <div
               class="has-tooltip-right"
-              data-tooltip={i18n`only show wire transfers confirmed by the merchant`}
+              data-tooltip={i18n.str`only show wire transfers confirmed by the merchant`}
             >
               <a onClick={onShowVerified}>
-                <Translate>Verified</Translate>
+                <i18n.Translate>Verified</i18n.Translate>
               </a>
             </div>
           </li>
           <li class={isNonVerifiedTransfers ? "is-active" : ""}>
             <div
               class="has-tooltip-right"
-              data-tooltip={i18n`only show wire transfers claimed by the exchange`}
+              data-tooltip={i18n.str`only show wire transfers claimed by the exchange`}
             >
               <a onClick={onShowUnverified}>
-                <Translate>Unverified</Translate>
+                <i18n.Translate>Unverified</i18n.Translate>
               </a>
             </div>
           </li>