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

1 files changed, 28 insertions, 28 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
index 9dfa33840..c497773d9 100644
--- a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
+++ b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslator } from "../../i18n/index.js";
 import { Entity } from "../../paths/admin/create/CreatePage.js";
 import { Input } from "../form/Input.js";
 import { InputCurrency } from "../form/InputCurrency.js";
@@ -39,7 +39,7 @@ export function DefaultInstanceFormFields({
   readonlyId?: boolean;
   showId: boolean;
 }): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const backend = useBackendContext();
   return (
     <Fragment>
@@ -48,86 +48,86 @@ export function DefaultInstanceFormFields({
           name="id"
           addonBefore={`${backend.url}/instances/`}
           readonly={readonlyId}
-          label={i18n`Identifier`}
-          tooltip={i18n`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`}
+          label={i18n.str`Identifier`}
+          tooltip={i18n.str`Name of the instance in URLs. The 'default' instance is special in that it is used to administer other instances.`}
         />
       )}
 
       <Input<Entity>
         name="name"
-        label={i18n`Business name`}
-        tooltip={i18n`Legal name of the business represented by this instance.`}
+        label={i18n.str`Business name`}
+        tooltip={i18n.str`Legal name of the business represented by this instance.`}
       />
 
       <Input<Entity>
         name="email"
-        label={i18n`Email`}
-        tooltip={i18n`Contact email`}
+        label={i18n.str`Email`}
+        tooltip={i18n.str`Contact email`}
       />
 
       <Input<Entity>
         name="website"
-        label={i18n`Website URL`}
-        tooltip={i18n`URL.`}
+        label={i18n.str`Website URL`}
+        tooltip={i18n.str`URL.`}
       />
 
       <InputImage<Entity>
         name="logo"
-        label={i18n`Logo`}
-        tooltip={i18n`Logo image.`}
+        label={i18n.str`Logo`}
+        tooltip={i18n.str`Logo image.`}
       />
 
       <InputPaytoForm<Entity>
         name="payto_uris"
-        label={i18n`Bank account`}
-        tooltip={i18n`URI specifying bank account for crediting revenue.`}
+        label={i18n.str`Bank account`}
+        tooltip={i18n.str`URI specifying bank account for crediting revenue.`}
       />
 
       <InputCurrency<Entity>
         name="default_max_deposit_fee"
-        label={i18n`Default max deposit fee`}
-        tooltip={i18n`Maximum deposit fees this merchant is willing to pay per order by default.`}
+        label={i18n.str`Default max deposit fee`}
+        tooltip={i18n.str`Maximum deposit fees this merchant is willing to pay per order by default.`}
       />
 
       <InputCurrency<Entity>
         name="default_max_wire_fee"
-        label={i18n`Default max wire fee`}
-        tooltip={i18n`Maximum wire fees this merchant is willing to pay per wire transfer by default.`}
+        label={i18n.str`Default max wire fee`}
+        tooltip={i18n.str`Maximum wire fees this merchant is willing to pay per wire transfer by default.`}
       />
 
       <Input<Entity>
         name="default_wire_fee_amortization"
-        label={i18n`Default wire fee amortization`}
-        tooltip={i18n`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`}
+        label={i18n.str`Default wire fee amortization`}
+        tooltip={i18n.str`Number of orders excess wire transfer fees will be divided by to compute per order surcharge.`}
       />
 
       <InputGroup
         name="address"
-        label={i18n`Address`}
-        tooltip={i18n`Physical location of the merchant.`}
+        label={i18n.str`Address`}
+        tooltip={i18n.str`Physical location of the merchant.`}
       >
         <InputLocation name="address" />
       </InputGroup>
 
       <InputGroup
         name="jurisdiction"
-        label={i18n`Jurisdiction`}
-        tooltip={i18n`Jurisdiction for legal disputes with the merchant.`}
+        label={i18n.str`Jurisdiction`}
+        tooltip={i18n.str`Jurisdiction for legal disputes with the merchant.`}
       >
         <InputLocation name="jurisdiction" />
       </InputGroup>
 
       <InputDuration<Entity>
         name="default_pay_delay"
-        label={i18n`Default payment delay`}
+        label={i18n.str`Default payment delay`}
         withForever
-        tooltip={i18n`Time customers have to pay an order before the offer expires by default.`}
+        tooltip={i18n.str`Time customers have to pay an order before the offer expires by default.`}
       />
 
       <InputDuration<Entity>
         name="default_wire_transfer_delay"
-        label={i18n`Default wire transfer delay`}
-        tooltip={i18n`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`}
+        label={i18n.str`Default wire transfer delay`}
+        tooltip={i18n.str`Maximum time an exchange is allowed to delay wiring funds to the merchant, enabling it to aggregate smaller payments into larger wire transfers and reducing wire fees.`}
         withForever
       />
     </Fragment>