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

1 files changed, 4 insertions, 4 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
index 59aa7a1d2..4ab415e85 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
@@ -19,12 +19,12 @@
  * @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 { FormProvider } from "../../../components/form/FormProvider.js";
 import { Input } from "../../../components/form/Input.js";
 import { MerchantBackend } from "../../../declaration.js";
-import { useTranslator } from "../../../i18n/index.js";
 
 type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage;
 interface Props {
@@ -49,7 +49,7 @@ function convert(
 export function DetailPage({ selected }: Props): VNode {
   const [value, valueHandler] = useState<Partial<Entity>>(convert(selected));
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div>
@@ -73,11 +73,11 @@ export function DetailPage({ selected }: Props): VNode {
           <div class="column" />
           <div class="column is-6">
             <FormProvider<Entity> object={value} valueHandler={valueHandler}>
-              <Input<Entity> name="name" readonly label={i18n`Name`} />
+              <Input<Entity> name="name" readonly label={i18n.str`Name`} />
               <Input<Entity>
                 name="payto_uris"
                 readonly
-                label={i18n`Account address`}
+                label={i18n.str`Account address`}
               />
             </FormProvider>
           </div>