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/reserves/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
index b0b291859..1d54198c8 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx
@@ -20,6 +20,7 @@
  */
 
 import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -29,13 +30,9 @@ import { Input } from "../../../../components/form/Input.js";
 import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { InputDate } from "../../../../components/form/InputDate.js";
 import { TextField } from "../../../../components/form/TextField.js";
-import {
-  ContinueModal,
-  SimpleModal,
-} from "../../../../components/modal/index.js";
+import { SimpleModal } from "../../../../components/modal/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useTipDetails } from "../../../../hooks/reserves.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import { TipInfo } from "./TipInfo.js";
 
 type Entity = MerchantBackend.Tips.ReserveDetail;
@@ -48,7 +45,7 @@ interface Props {
 }
 
 export function DetailPage({ id, selected, onBack }: Props): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const didExchangeAckTransfer = Amounts.isNonZero(
     Amounts.parseOrThrow(selected.exchange_initial_amount),
   );
@@ -62,22 +59,22 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
           <FormProvider object={{ ...selected, id }} valueHandler={null}>
             <InputDate<Entity>
               name="creation_time"
-              label={i18n`Created at`}
+              label={i18n.str`Created at`}
               readonly
             />
             <InputDate<Entity>
               name="expiration_time"
-              label={i18n`Valid until`}
+              label={i18n.str`Valid until`}
               readonly
             />
             <InputCurrency<Entity>
               name="merchant_initial_amount"
-              label={i18n`Created balance`}
+              label={i18n.str`Created balance`}
               readonly
             />
             <TextField<Entity>
               name="exchange_url"
-              label={i18n`Exchange URL`}
+              label={i18n.str`Exchange URL`}
               readonly
             >
               <a target="_blank" rel="noreferrer" href={selected.exchange_url}>
@@ -89,27 +86,27 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
               <Fragment>
                 <InputCurrency<Entity>
                   name="exchange_initial_amount"
-                  label={i18n`Exchange balance`}
+                  label={i18n.str`Exchange balance`}
                   readonly
                 />
                 <InputCurrency<Entity>
                   name="pickup_amount"
-                  label={i18n`Picked up`}
+                  label={i18n.str`Picked up`}
                   readonly
                 />
                 <InputCurrency<Entity>
                   name="committed_amount"
-                  label={i18n`Committed`}
+                  label={i18n.str`Committed`}
                   readonly
                 />
               </Fragment>
             )}
             <Input<Entity>
               name="payto_uri"
-              label={i18n`Account address`}
+              label={i18n.str`Account address`}
               readonly
             />
-            <Input name="id" label={i18n`Subject`} readonly />
+            <Input name="id" label={i18n.str`Subject`} readonly />
           </FormProvider>
 
           {didExchangeAckTransfer ? (
@@ -120,7 +117,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
                     <span class="icon">
                       <i class="mdi mdi-cash-register" />
                     </span>
-                    <Translate>Tips</Translate>
+                    <i18n.Translate>Tips</i18n.Translate>
                   </p>
                 </header>
                 <div class="card-content">
@@ -139,18 +136,18 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
           ) : (
             <Fragment>
               <p class="is-size-5">
-                <Translate>
+                <i18n.Translate>
                   To complete the setup of the reserve, you must now initiate a
                   wire transfer using the given wire transfer subject and
                   crediting the specified amount to the indicated account of the
                   exchange.
-                </Translate>
+                </i18n.Translate>
               </p>
               <p class="is-size-5">
-                <Translate>
+                <i18n.Translate>
                   If your system supports RFC 8905, you can do this by opening
                   this URI:
-                </Translate>
+                </i18n.Translate>
               </p>
               <pre>
                 <a target="_blank" rel="noreferrer" href={link}>
@@ -163,7 +160,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
 
           <div class="buttons is-right mt-5">
             <button class="button" onClick={onBack}>
-              <Translate>Back</Translate>
+              <i18n.Translate>Back</i18n.Translate>
             </button>
           </div>
         </div>
@@ -174,6 +171,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -182,7 +180,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>No tips has been authorized from this reserve</Translate>
+        <i18n.Translate>
+          No tips has been authorized from this reserve
+        </i18n.Translate>
       </p>
     </div>
   );
@@ -193,22 +193,23 @@ interface TableProps {
 }
 
 function Table({ tips }: TableProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>Authorized</Translate>
+              <i18n.Translate>Authorized</i18n.Translate>
             </th>
             <th>
-              <Translate>Picked up</Translate>
+              <i18n.Translate>Picked up</i18n.Translate>
             </th>
             <th>
-              <Translate>Reason</Translate>
+              <i18n.Translate>Reason</i18n.Translate>
             </th>
             <th>
-              <Translate>Expiration</Translate>
+              <i18n.Translate>Expiration</i18n.Translate>
             </th>
           </tr>
         </thead>