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

1 files changed, 27 insertions, 26 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
index d7acdf023..1365a59da 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
@@ -19,21 +19,20 @@
  * @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 {
-  FormProvider,
   FormErrors,
+  FormProvider,
 } from "../../../components/form/FormProvider.js";
+import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { UpdateTokenModal } from "../../../components/modal/index.js";
 import { useInstanceContext } from "../../../context/instance.js";
 import { MerchantBackend } from "../../../declaration.js";
-import { Translate, useTranslator } from "../../../i18n/index.js";
-import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { PAYTO_REGEX } from "../../../utils/constants.js";
-import { Amounts } from "@gnu-taler/taler-util";
 import { undefinedIfEmpty } from "../../../utils/table.js";
 
 type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage & {
@@ -95,50 +94,52 @@ export function UpdatePage({
 
   const [value, valueHandler] = useState<Partial<Entity>>(convert(selected));
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   const errors: FormErrors<Entity> = {
-    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,
     }),
   };
@@ -160,7 +161,7 @@ export function UpdatePage({
               <div class="level-left">
                 <div class="level-item">
                   <span class="is-size-4">
-                    <Translate>Instance id</Translate>: <b>{id}</b>
+                    <i18n.Translate>Instance id</i18n.Translate>: <b>{id}</b>
                   </span>
                 </div>
               </div>
@@ -169,7 +170,7 @@ export function UpdatePage({
                   <h1 class="title">
                     <button
                       class="button is-danger"
-                      data-tooltip={i18n`Change the authorization method use for this instance.`}
+                      data-tooltip={i18n.str`Change the authorization method use for this instance.`}
                       onClick={(): void => {
                         setActive(!active);
                       }}
@@ -178,7 +179,7 @@ export function UpdatePage({
                         <i class="mdi mdi-lock-reset" />
                       </div>
                       <span>
-                        <Translate>Manage access token</Translate>
+                        <i18n.Translate>Manage access token</i18n.Translate>
                       </span>
                     </button>
                   </h1>
@@ -229,19 +230,19 @@ export function UpdatePage({
                 onClick={onBack}
                 data-tooltip="cancel operation"
               >
-                <Translate>Cancel</Translate>
+                <i18n.Translate>Cancel</i18n.Translate>
               </button>
 
               <AsyncButton
                 onClick={submit}
                 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>
           </div>