1 files changed, 27 insertions, 26 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
index 6fcabb18b..bf5f5d7c9 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
@@ -19,20 +19,19 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { Amounts } from "@gnu-taler/taler-util";
+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 { AsyncButton } from "../../../components/exception/AsyncButton.js";
 import {
   FormErrors,
   FormProvider,
 } from "../../../components/form/FormProvider.js";
+import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { SetTokenNewInstanceModal } from "../../../components/modal/index.js";
 import { MerchantBackend } from "../../../declaration.js";
-import { Translate, useTranslator } from "../../../i18n/index.js";
-import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { INSTANCE_ID_REGEX, PAYTO_REGEX } from "../../../utils/constants.js";
-import { Amounts } from "@gnu-taler/taler-util";
 import { undefinedIfEmpty } from "../../../utils/table.js";
 
 export type Entity = MerchantBackend.Instances.InstanceConfigurationMessage & {
@@ -61,55 +60,57 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
   const [isTokenDialogActive, updateIsTokenDialogActive] =
     useState<boolean>(false);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const errors: FormErrors<Entity> = {
     id: !value.id
-      ? i18n`required`
+      ? i18n.str`required`
       : !INSTANCE_ID_REGEX.test(value.id)
-      ? i18n`is not valid`
+      ? i18n.str`is not valid`
       : undefined,
-    name: !value.name ? i18n`required` : undefined,
+    name: !value.name ? i18n.str`required` : undefined,
     payto_uris:
       !value.payto_uris || !value.payto_uris.length
-        ? i18n`required`
+        ? i18n.str`required`
         : undefinedIfEmpty(
             value.payto_uris.map((p) => {
-              return !PAYTO_REGEX.test(p) ? i18n`is not valid` : undefined;
+              return !PAYTO_REGEX.test(p) ? i18n.str`is not valid` : undefined;
             }),
           ),
     default_max_deposit_fee: !value.default_max_deposit_fee
-      ? i18n`required`
+      ? i18n.str`required`
       : !Amounts.parse(value.default_max_deposit_fee)
-      ? i18n`invalid format`
+      ? i18n.str`invalid format`
       : undefined,
     default_max_wire_fee: !value.default_max_wire_fee
-      ? i18n`required`
+      ? i18n.str`required`
       : !Amounts.parse(value.default_max_wire_fee)
-      ? i18n`invalid format`
+      ? i18n.str`invalid format`
       : undefined,
     default_wire_fee_amortization:
       value.default_wire_fee_amortization === undefined
-        ? i18n`required`
+        ? i18n.str`required`
         : isNaN(value.default_wire_fee_amortization)
-        ? i18n`is not a number`
+        ? i18n.str`is not a number`
         : value.default_wire_fee_amortization < 1
-        ? i18n`must be 1 or greater`
+        ? i18n.str`must be 1 or greater`
         : undefined,
-    default_pay_delay: !value.default_pay_delay ? i18n`required` : undefined,
+    default_pay_delay: !value.default_pay_delay
+      ? i18n.str`required`
+      : undefined,
     default_wire_transfer_delay: !value.default_wire_transfer_delay
-      ? i18n`required`
+      ? i18n.str`required`
       : undefined,
     address: undefinedIfEmpty({
       address_lines:
         value.address?.address_lines && value.address?.address_lines.length > 7
-          ? i18n`max 7 lines`
+          ? i18n.str`max 7 lines`
           : undefined,
     }),
     jurisdiction: undefinedIfEmpty({
       address_lines:
         value.address?.address_lines && value.address?.address_lines.length > 7
-          ? i18n`max 7 lines`
+          ? i18n.str`max 7 lines`
           : undefined,
     }),
   };
@@ -174,14 +175,14 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
               <h1 class="title">
                 <button
                   class="button is-danger has-tooltip-bottom"
-                  data-tooltip={i18n`change authorization configuration`}
+                  data-tooltip={i18n.str`change authorization configuration`}
                   onClick={() => updateIsTokenDialogActive(true)}
                 >
                   <div class="icon is-centered">
                     <i class="mdi mdi-lock-reset" />
                   </div>
                   <span>
-                    <Translate>Set access token</Translate>
+                    <i18n.Translate>Set access token</i18n.Translate>
                   </span>
                 </button>
               </h1>
@@ -205,7 +206,7 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
             <div class="buttons is-right mt-5">
               {onBack && (
                 <button class="button" onClick={onBack}>
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </button>
               )}
               <AsyncButton
@@ -213,11 +214,11 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
                 disabled={!isTokenSet || hasErrors}
                 data-tooltip={
                   hasErrors
-                    ? i18n`Need to complete marked fields and choose authorization method`
+                    ? i18n.str`Need to complete marked fields and choose authorization method`
                     : "confirm operation"
                 }
               >
-                <Translate>Confirm</Translate>
+                <i18n.Translate>Confirm</i18n.Translate>
               </AsyncButton>
             </div>
           </div>