use translation context from web-utils, don't use match react-router since is broken

7 files changed, 102 insertions, 96 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
index 2c3e963b8..de2319636 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
@@ -19,24 +19,23 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
 import {
   FormErrors,
   FormProvider,
 } from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
+import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { ExchangeBackend, MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
-import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
-import { canonicalizeBaseUrl, ExchangeKeysJson } from "@gnu-taler/taler-util";
+import { request } from "../../../../hooks/backend.js";
 import {
   PAYTO_WIRE_METHOD_LOOKUP,
   URL_REGEX,
 } from "../../../../utils/constants.js";
-import { request } from "../../../../hooks/backend.js";
-import { InputSelector } from "../../../../components/form/InputSelector.js";
 
 type Entity = MerchantBackend.Tips.ReserveCreateRequest;
 
@@ -66,7 +65,7 @@ function ViewStep({
   submitForm,
   setReserve,
 }: ViewProps): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const [wireMethods, setWireMethods] = useState<Array<string>>([]);
   const [exchangeQueryError, setExchangeQueryError] = useState<
     string | undefined
@@ -82,12 +81,12 @@ function ViewStep({
         initial_balance: !reserve.initial_balance
           ? "cannot be empty"
           : !(parseInt(reserve.initial_balance.split(":")[1], 10) > 0)
-          ? i18n`it should be greater than 0`
+          ? i18n.str`it should be greater than 0`
           : undefined,
         exchange_url: !reserve.exchange_url
-          ? i18n`cannot be empty`
+          ? i18n.str`cannot be empty`
           : !URL_REGEX.test(reserve.exchange_url)
-          ? i18n`must be a valid URL`
+          ? i18n.str`must be a valid URL`
           : !exchangeQueryError
           ? undefined
           : exchangeQueryError,
@@ -106,20 +105,20 @@ function ViewStep({
           >
             <InputCurrency<Entity>
               name="initial_balance"
-              label={i18n`Initial balance`}
-              tooltip={i18n`balance prior to deposit`}
+              label={i18n.str`Initial balance`}
+              tooltip={i18n.str`balance prior to deposit`}
             />
             <Input<Entity>
               name="exchange_url"
-              label={i18n`Exchange URL`}
-              tooltip={i18n`URL of exchange`}
+              label={i18n.str`Exchange URL`}
+              tooltip={i18n.str`URL of exchange`}
             />
           </FormProvider>
 
           <div class="buttons is-right mt-5">
             {onBack && (
               <button class="button" onClick={onBack}>
-                <Translate>Cancel</Translate>
+                <i18n.Translate>Cancel</i18n.Translate>
               </button>
             )}
             <AsyncButton
@@ -143,12 +142,12 @@ function ViewStep({
               }}
               data-tooltip={
                 hasErrors
-                  ? i18n`Need to complete marked fields`
+                  ? i18n.str`Need to complete marked fields`
                   : "confirm operation"
               }
               disabled={hasErrors}
             >
-              <Translate>Next</Translate>
+              <i18n.Translate>Next</i18n.Translate>
             </AsyncButton>
           </div>
         </Fragment>
@@ -157,7 +156,9 @@ function ViewStep({
 
     case Steps.WIRE_METHOD: {
       const errors: FormErrors<Entity> = {
-        wire_method: !reserve.wire_method ? i18n`cannot be empty` : undefined,
+        wire_method: !reserve.wire_method
+          ? i18n.str`cannot be empty`
+          : undefined,
       };
 
       const hasErrors = Object.keys(errors).some(
@@ -172,22 +173,22 @@ function ViewStep({
           >
             <InputCurrency<Entity>
               name="initial_balance"
-              label={i18n`Initial balance`}
-              tooltip={i18n`balance prior to deposit`}
+              label={i18n.str`Initial balance`}
+              tooltip={i18n.str`balance prior to deposit`}
               readonly
             />
             <Input<Entity>
               name="exchange_url"
-              label={i18n`Exchange URL`}
-              tooltip={i18n`URL of exchange`}
+              label={i18n.str`Exchange URL`}
+              tooltip={i18n.str`URL of exchange`}
               readonly
             />
             <InputSelector<Entity>
               name="wire_method"
-              label={i18n`Wire method`}
-              tooltip={i18n`method to use for wire transfer`}
+              label={i18n.str`Wire method`}
+              tooltip={i18n.str`method to use for wire transfer`}
               values={wireMethods}
-              placeholder={i18n`Select one wire method`}
+              placeholder={i18n.str`Select one wire method`}
             />
           </FormProvider>
           <div class="buttons is-right mt-5">
@@ -196,19 +197,19 @@ function ViewStep({
                 class="button"
                 onClick={() => setCurrentStep(Steps.EXCHANGE)}
               >
-                <Translate>Back</Translate>
+                <i18n.Translate>Back</i18n.Translate>
               </button>
             )}
             <AsyncButton
               onClick={submitForm}
               data-tooltip={
                 hasErrors
-                  ? i18n`Need to complete marked fields`
+                  ? i18n.str`Need to complete marked fields`
                   : "confirm operation"
               }
               disabled={hasErrors}
             >
-              <Translate>Confirm</Translate>
+              <i18n.Translate>Confirm</i18n.Translate>
             </AsyncButton>
           </div>
         </Fragment>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
index 9bb228e1f..92427f3dc 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
@@ -14,11 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
+import { QR } from "../../../../components/exception/QR.js";
 import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate } from "../../../../i18n/index.js";
-import { QR } from "../../../../components/exception/QR.js";
 
 type Entity = {
   request: MerchantBackend.Tips.ReserveCreateRequest;
@@ -37,7 +37,7 @@ export function CreatedSuccessfully({
   onCreateAnother,
 }: Props): VNode {
   const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`;
-
+  const { i18n } = useTranslationContext();
   return (
     <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
       <div class="field is-horizontal">
@@ -85,16 +85,16 @@ export function CreatedSuccessfully({
         </div>
       </div>
       <p class="is-size-5">
-        <Translate>
+        <i18n.Translate>
           To complete the setup of the reserve, you must now initiate a wire
           transfer using the given wire transfer subject and crediting the
           specified amount to the indicated account of the exchange.
-        </Translate>
+        </i18n.Translate>
       </p>
       <p class="is-size-5">
-        <Translate>
+        <i18n.Translate>
           If your system supports RFC 8905, you can do this by opening this URI:
-        </Translate>
+        </i18n.Translate>
       </p>
       <pre>
         <a target="_blank" rel="noreferrer" href={link}>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
index 8b3ffb4ac..0d39fc298 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx
@@ -19,12 +19,12 @@
  * @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 { NotificationCard } from "../../../../components/menu/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useReservesAPI } from "../../../../hooks/reserves.js";
-import { useTranslator } from "../../../../i18n/index.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatedSuccessfully } from "./CreatedSuccessfully.js";
 import { CreatePage } from "./CreatePage.js";
@@ -35,7 +35,7 @@ interface Props {
 export default function CreateReserve({ onBack, onConfirm }: Props): VNode {
   const { createReserve } = useReservesAPI();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const [createdOk, setCreatedOk] = useState<
     | {
@@ -59,7 +59,7 @@ export default function CreateReserve({ onBack, onConfirm }: Props): VNode {
             .then((r) => setCreatedOk({ request, response: r.data }))
             .catch((error) => {
               setNotif({
-                message: i18n`could not create reserve`,
+                message: i18n.str`could not create reserve`,
                 type: "ERROR",
                 description: error.message,
               });
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
index b0b291859..1d54198c8 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
@@ -20,6 +20,7 @@
  */
 
 import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -29,13 +30,9 @@ import { Input } from "../../../../components/form/Input.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { InputDate } from "../../../../components/form/InputDate.js";
 import { TextField } from "../../../../components/form/TextField.js";
-import {
-  ContinueModal,
-  SimpleModal,
-} from "../../../../components/modal/index.js";
+import { SimpleModal } from "../../../../components/modal/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useTipDetails } from "../../../../hooks/reserves.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { TipInfo } from "./TipInfo.js";
 
 type Entity = MerchantBackend.Tips.ReserveDetail;
@@ -48,7 +45,7 @@ interface Props {
 }
 
 export function DetailPage({ id, selected, onBack }: Props): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const didExchangeAckTransfer = Amounts.isNonZero(
     Amounts.parseOrThrow(selected.exchange_initial_amount),
   );
@@ -62,22 +59,22 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
           <FormProvider object={{ ...selected, id }} valueHandler={null}>
             <InputDate<Entity>
               name="creation_time"
-              label={i18n`Created at`}
+              label={i18n.str`Created at`}
               readonly
             />
             <InputDate<Entity>
               name="expiration_time"
-              label={i18n`Valid until`}
+              label={i18n.str`Valid until`}
               readonly
             />
             <InputCurrency<Entity>
               name="merchant_initial_amount"
-              label={i18n`Created balance`}
+              label={i18n.str`Created balance`}
               readonly
             />
             <TextField<Entity>
               name="exchange_url"
-              label={i18n`Exchange URL`}
+              label={i18n.str`Exchange URL`}
               readonly
             >
               <a target="_blank" rel="noreferrer" href={selected.exchange_url}>
@@ -89,27 +86,27 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
               <Fragment>
                 <InputCurrency<Entity>
                   name="exchange_initial_amount"
-                  label={i18n`Exchange balance`}
+                  label={i18n.str`Exchange balance`}
                   readonly
                 />
                 <InputCurrency<Entity>
                   name="pickup_amount"
-                  label={i18n`Picked up`}
+                  label={i18n.str`Picked up`}
                   readonly
                 />
                 <InputCurrency<Entity>
                   name="committed_amount"
-                  label={i18n`Committed`}
+                  label={i18n.str`Committed`}
                   readonly
                 />
               </Fragment>
             )}
             <Input<Entity>
               name="payto_uri"
-              label={i18n`Account address`}
+              label={i18n.str`Account address`}
               readonly
             />
-            <Input name="id" label={i18n`Subject`} readonly />
+            <Input name="id" label={i18n.str`Subject`} readonly />
           </FormProvider>
 
           {didExchangeAckTransfer ? (
@@ -120,7 +117,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
                     <span class="icon">
                       <i class="mdi mdi-cash-register" />
                     </span>
-                    <Translate>Tips</Translate>
+                    <i18n.Translate>Tips</i18n.Translate>
                   </p>
                 </header>
                 <div class="card-content">
@@ -139,18 +136,18 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
           ) : (
             <Fragment>
               <p class="is-size-5">
-                <Translate>
+                <i18n.Translate>
                   To complete the setup of the reserve, you must now initiate a
                   wire transfer using the given wire transfer subject and
                   crediting the specified amount to the indicated account of the
                   exchange.
-                </Translate>
+                </i18n.Translate>
               </p>
               <p class="is-size-5">
-                <Translate>
+                <i18n.Translate>
                   If your system supports RFC 8905, you can do this by opening
                   this URI:
-                </Translate>
+                </i18n.Translate>
               </p>
               <pre>
                 <a target="_blank" rel="noreferrer" href={link}>
@@ -163,7 +160,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
 
           <div class="buttons is-right mt-5">
             <button class="button" onClick={onBack}>
-              <Translate>Back</Translate>
+              <i18n.Translate>Back</i18n.Translate>
             </button>
           </div>
         </div>
@@ -174,6 +171,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -182,7 +180,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>No tips has been authorized from this reserve</Translate>
+        <i18n.Translate>
+          No tips has been authorized from this reserve
+        </i18n.Translate>
       </p>
     </div>
   );
@@ -193,22 +193,23 @@ interface TableProps {
 }
 
 function Table({ tips }: TableProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>Authorized</Translate>
+              <i18n.Translate>Authorized</i18n.Translate>
             </th>
             <th>
-              <Translate>Picked up</Translate>
+              <i18n.Translate>Picked up</i18n.Translate>
             </th>
             <th>
-              <Translate>Reason</Translate>
+              <i18n.Translate>Reason</i18n.Translate>
             </th>
             <th>
-              <Translate>Expiration</Translate>
+              <i18n.Translate>Expiration</i18n.Translate>
             </th>
           </tr>
         </thead>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
index 5200abedf..3a591c555 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx
@@ -19,8 +19,10 @@
  * @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 * as yup from "yup";
 import {
   FormErrors,
   FormProvider,
@@ -32,10 +34,8 @@ import {
   ContinueModal,
 } from "../../../../components/modal/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { useTranslator } from "../../../../i18n/index.js";
 import { AuthorizeTipSchema } from "../../../../schemas/index.js";
 import { CreatedSuccessfully } from "./CreatedSuccessfully.js";
-import * as yup from "yup";
 
 interface AuthorizeTipModalProps {
   onCancel: () => void;
@@ -54,7 +54,7 @@ export function AuthorizeTipModal({
   // const result = useOrderDetails(id)
   type State = MerchantBackend.Tips.TipCreateRequest;
   const [form, setValue] = useState<Partial<State>>({});
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   // const [errors, setErrors] = useState<FormErrors<State>>({})
   let errors: FormErrors<State> = {};
@@ -104,19 +104,19 @@ export function AuthorizeTipModal({
       >
         <InputCurrency<State>
           name="amount"
-          label={i18n`Amount`}
-          tooltip={i18n`amount of tip`}
+          label={i18n.str`Amount`}
+          tooltip={i18n.str`amount of tip`}
         />
         <Input<State>
           name="justification"
-          label={i18n`Justification`}
+          label={i18n.str`Justification`}
           inputType="multiline"
-          tooltip={i18n`reason for the tip`}
+          tooltip={i18n.str`reason for the tip`}
         />
         <Input<State>
           name="next_url"
-          label={i18n`URL after tip`}
-          tooltip={i18n`URL to visit after tip payment`}
+          label={i18n.str`URL after tip`}
+          tooltip={i18n.str`URL to visit after tip payment`}
         />
       </FormProvider>
     </ConfirmModal>
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
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
index 182b3f72c..9c3255ee8 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx
@@ -19,6 +19,7 @@
  * @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 { Loading } from "../../../../components/exception/loading.js";
@@ -29,10 +30,9 @@ import {
   useInstanceReserves,
   useReservesAPI,
 } from "../../../../hooks/reserves.js";
-import { useTranslator } from "../../../../i18n/index.js";
 import { Notification } from "../../../../utils/types.js";
-import { CardTable } from "./Table.js";
 import { AuthorizeTipModal } from "./AutorizeTipModal.js";
+import { CardTable } from "./Table.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -57,7 +57,7 @@ export default function ListTips({
   const result = useInstanceReserves();
   const { deleteReserve, authorizeTipReserve } = useReservesAPI();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const [reserveForTip, setReserveForTip] = useState<string | undefined>(
     undefined,
   );
@@ -93,7 +93,7 @@ export default function ListTips({
               });
             } catch (error) {
               setNotif({
-                message: i18n`could not create the tip`,
+                message: i18n.str`could not create the tip`,
                 type: "ERROR",
                 description: error instanceof Error ? error.message : undefined,
               });