1 files changed, 27 insertions, 23 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
index 2341fb80a..e38d375f9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx
@@ -19,11 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { StateUpdater, useState } from "preact/hooks";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 
 type Entity = MerchantBackend.Transfers.TransferDetails & WithId;
 
@@ -49,7 +49,7 @@ export function CardTable({
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="card has-table">
@@ -58,10 +58,13 @@ export function CardTable({
           <span class="icon">
             <i class="mdi mdi-bank" />
           </span>
-          <Translate>Transfers</Translate>
+          <i18n.Translate>Transfers</i18n.Translate>
         </p>
         <div class="card-header-icon" aria-label="more options">
-          <span class="has-tooltip-left" data-tooltip={i18n`add new transfer`}>
+          <span
+            class="has-tooltip-left"
+            data-tooltip={i18n.str`add new transfer`}
+          >
             <button class="button is-info" type="button" onClick={onCreate}>
               <span class="icon is-small">
                 <i class="mdi mdi-plus mdi-36px" />
@@ -117,42 +120,42 @@ function Table({
   hasMoreAfter,
   hasMoreBefore,
 }: TableProps): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       {onLoadMoreBefore && (
         <button
           class="button is-fullwidth"
-          data-tooltip={i18n`load more transfers before the first one`}
+          data-tooltip={i18n.str`load more transfers before the first one`}
           disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
-          <Translate>load newer transfers</Translate>
+          <i18n.Translate>load newer transfers</i18n.Translate>
         </button>
       )}
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>ID</Translate>
+              <i18n.Translate>ID</i18n.Translate>
             </th>
             <th>
-              <Translate>Credit</Translate>
+              <i18n.Translate>Credit</i18n.Translate>
             </th>
             <th>
-              <Translate>Address</Translate>
+              <i18n.Translate>Address</i18n.Translate>
             </th>
             <th>
-              <Translate>Exchange URL</Translate>
+              <i18n.Translate>Exchange URL</i18n.Translate>
             </th>
             <th>
-              <Translate>Confirmed</Translate>
+              <i18n.Translate>Confirmed</i18n.Translate>
             </th>
             <th>
-              <Translate>Verified</Translate>
+              <i18n.Translate>Verified</i18n.Translate>
             </th>
             <th>
-              <Translate>Executed at</Translate>
+              <i18n.Translate>Executed at</i18n.Translate>
             </th>
             <th />
           </tr>
@@ -165,23 +168,23 @@ function Table({
                 <td>{i.credit_amount}</td>
                 <td>{i.payto_uri}</td>
                 <td>{i.exchange_url}</td>
-                <td>{i.confirmed ? i18n`yes` : i18n`no`}</td>
-                <td>{i.verified ? i18n`yes` : i18n`no`}</td>
+                <td>{i.confirmed ? i18n.str`yes` : i18n.str`no`}</td>
+                <td>{i.verified ? i18n.str`yes` : i18n.str`no`}</td>
                 <td>
                   {i.execution_time
                     ? i.execution_time.t_s == "never"
-                      ? i18n`never`
+                      ? i18n.str`never`
                       : format(
                           i.execution_time.t_s * 1000,
                           "yyyy/MM/dd HH:mm:ss",
                         )
-                    : i18n`unknown`}
+                    : i18n.str`unknown`}
                 </td>
                 <td>
                   {i.verified === undefined ? (
                     <button
                       class="button is-danger is-small has-tooltip-left"
-                      data-tooltip={i18n`delete selected transfer from the database`}
+                      data-tooltip={i18n.str`delete selected transfer from the database`}
                       onClick={() => onDelete(i)}
                     >
                       Delete
@@ -196,11 +199,11 @@ function Table({
       {onLoadMoreAfter && (
         <button
           class="button is-fullwidth"
-          data-tooltip={i18n`load more transfer after the last one`}
+          data-tooltip={i18n.str`load more transfer after the last one`}
           disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
-          <Translate>load older transfers</Translate>
+          <i18n.Translate>load older transfers</i18n.Translate>
         </button>
       )}
     </div>
@@ -208,6 +211,7 @@ function Table({
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -216,9 +220,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>
+        <i18n.Translate>
           There is no transfer yet, add more pressing the + sign
-        </Translate>
+        </i18n.Translate>
       </p>
     </div>
   );