1 files changed, 28 insertions, 27 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>