1 files changed, 24 insertions, 20 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
index 86b79d1dd..36768855d 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx
@@ -19,10 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 
 type Entity = MerchantBackend.Tips.ReserveStatusEntry & WithId;
 
@@ -51,7 +51,7 @@ export function CardTable({
     return prev;
   }, new Array<Array<Entity>>([], []));
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <Fragment>
@@ -62,7 +62,7 @@ export function CardTable({
               <span class="icon">
                 <i class="mdi mdi-cash" />
               </span>
-              <Translate>Reserves not yet funded</Translate>
+              <i18n.Translate>Reserves not yet funded</i18n.Translate>
             </p>
           </header>
           <div class="card-content">
@@ -86,11 +86,14 @@ export function CardTable({
             <span class="icon">
               <i class="mdi mdi-cash" />
             </span>
-            <Translate>Reserves ready</Translate>
+            <i18n.Translate>Reserves ready</i18n.Translate>
           </p>
           <div class="card-header-icon" aria-label="more options" />
           <div class="card-header-icon" aria-label="more options">
-            <span class="has-tooltip-left" data-tooltip={i18n`add new reserve`}>
+            <span
+              class="has-tooltip-left"
+              data-tooltip={i18n.str`add new reserve`}
+            >
               <button class="button is-info" type="button" onClick={onCreate}>
                 <span class="icon is-small">
                   <i class="mdi mdi-plus mdi-36px" />
@@ -127,26 +130,26 @@ interface TableProps {
 }
 
 function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>Created at</Translate>
+              <i18n.Translate>Created at</i18n.Translate>
             </th>
             <th>
-              <Translate>Expires at</Translate>
+              <i18n.Translate>Expires at</i18n.Translate>
             </th>
             <th>
-              <Translate>Initial</Translate>
+              <i18n.Translate>Initial</i18n.Translate>
             </th>
             <th>
-              <Translate>Picked up</Translate>
+              <i18n.Translate>Picked up</i18n.Translate>
             </th>
             <th>
-              <Translate>Committed</Translate>
+              <i18n.Translate>Committed</i18n.Translate>
             </th>
             <th />
           </tr>
@@ -196,7 +199,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode {
                   <div class="buttons is-right">
                     <button
                       class="button is-small is-danger has-tooltip-left"
-                      data-tooltip={i18n`delete selected reserve from the database`}
+                      data-tooltip={i18n.str`delete selected reserve from the database`}
                       type="button"
                       onClick={(): void => onDelete(i)}
                     >
@@ -204,7 +207,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode {
                     </button>
                     <button
                       class="button is-small is-info has-tooltip-left"
-                      data-tooltip={i18n`authorize new tip from selected reserve`}
+                      data-tooltip={i18n.str`authorize new tip from selected reserve`}
                       type="button"
                       onClick={(): void => onNewTip(i)}
                     >
@@ -222,6 +225,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode {
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -230,10 +234,10 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>
+        <i18n.Translate>
           There is no ready reserves yet, add more pressing the + sign or fund
           them
-        </Translate>
+        </i18n.Translate>
       </p>
     </div>
   );
@@ -244,20 +248,20 @@ function TableWithoutFund({
   onSelect,
   onDelete,
 }: TableProps): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>Created at</Translate>
+              <i18n.Translate>Created at</i18n.Translate>
             </th>
             <th>
-              <Translate>Expires at</Translate>
+              <i18n.Translate>Expires at</i18n.Translate>
             </th>
             <th>
-              <Translate>Expected Balance</Translate>
+              <i18n.Translate>Expected Balance</i18n.Translate>
             </th>
             <th />
           </tr>
@@ -296,7 +300,7 @@ function TableWithoutFund({
                     <button
                       class="button is-small is-danger jb-modal has-tooltip-left"
                       type="button"
-                      data-tooltip={i18n`delete selected reserve from the database`}
+                      data-tooltip={i18n.str`delete selected reserve from the database`}
                       onClick={(): void => onDelete(i)}
                     >
                       Delete