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

1 files changed, 14 insertions, 11 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx
index c10121fb3..7966a2cdd 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx
@@ -19,16 +19,16 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 
 export interface Props {
   status: MerchantBackend.Instances.AccountKycRedirects;
 }
 
 export function ListPage({ status }: Props): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <section class="section is-main-section">
@@ -38,7 +38,7 @@ export function ListPage({ status }: Props): VNode {
             <span class="icon">
               <i class="mdi mdi-clock" />
             </span>
-            <Translate>Pending KYC verification</Translate>
+            <i18n.Translate>Pending KYC verification</i18n.Translate>
           </p>
 
           <div class="card-header-icon" aria-label="more options" />
@@ -63,7 +63,7 @@ export function ListPage({ status }: Props): VNode {
               <span class="icon">
                 <i class="mdi mdi-clock" />
               </span>
-              <Translate>Timed out</Translate>
+              <i18n.Translate>Timed out</i18n.Translate>
             </p>
 
             <div class="card-header-icon" aria-label="more options" />
@@ -93,19 +93,20 @@ interface TimedOutTableProps {
 }
 
 function PendingTable({ entries }: PendingTableProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>Exchange</Translate>
+              <i18n.Translate>Exchange</i18n.Translate>
             </th>
             <th>
-              <Translate>Target account</Translate>
+              <i18n.Translate>Target account</i18n.Translate>
             </th>
             <th>
-              <Translate>KYC URL</Translate>
+              <i18n.Translate>KYC URL</i18n.Translate>
             </th>
           </tr>
         </thead>
@@ -130,19 +131,20 @@ function PendingTable({ entries }: PendingTableProps): VNode {
 }
 
 function TimedOutTable({ entries }: TimedOutTableProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>Exchange</Translate>
+              <i18n.Translate>Exchange</i18n.Translate>
             </th>
             <th>
-              <Translate>Code</Translate>
+              <i18n.Translate>Code</i18n.Translate>
             </th>
             <th>
-              <Translate>Http Status</Translate>
+              <i18n.Translate>Http Status</i18n.Translate>
             </th>
           </tr>
         </thead>
@@ -163,6 +165,7 @@ function TimedOutTable({ entries }: TimedOutTableProps): VNode {
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -171,7 +174,7 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>No pending kyc verification!</Translate>
+        <i18n.Translate>No pending kyc verification!</i18n.Translate>
       </p>
     </div>
   );