1 files changed, 21 insertions, 21 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
index 5b041df7c..5303d14d9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx
@@ -19,6 +19,7 @@
  * @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 { AsyncButton } from "../../../../components/exception/AsyncButton.js";
@@ -31,7 +32,6 @@ import { InputCurrency } from "../../../../components/form/InputCurrency.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { useConfigContext } from "../../../../context/config.js";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 import {
   CROCKFORD_BASE32_REGEX,
   URL_REGEX,
@@ -46,7 +46,7 @@ interface Props {
 }
 
 export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   const { currency } = useConfigContext();
 
   const [state, setState] = useState<Partial<Entity>>({
@@ -58,18 +58,18 @@ export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
 
   const errors: FormErrors<Entity> = {
     wtid: !state.wtid
-      ? i18n`cannot be empty`
+      ? i18n.str`cannot be empty`
       : !CROCKFORD_BASE32_REGEX.test(state.wtid)
-      ? i18n`check the id, does not look valid`
+      ? i18n.str`check the id, does not look valid`
       : state.wtid.length !== 52
-      ? i18n`should have 52 characters, current ${state.wtid.length}`
+      ? i18n.str`should have 52 characters, current ${state.wtid.length}`
       : undefined,
-    payto_uri: !state.payto_uri ? i18n`cannot be empty` : undefined,
-    credit_amount: !state.credit_amount ? i18n`cannot be empty` : undefined,
+    payto_uri: !state.payto_uri ? i18n.str`cannot be empty` : undefined,
+    credit_amount: !state.credit_amount ? i18n.str`cannot be empty` : undefined,
     exchange_url: !state.exchange_url
-      ? i18n`cannot be empty`
+      ? i18n.str`cannot be empty`
       : !URL_REGEX.test(state.exchange_url)
-      ? i18n`URL doesn't have the right format`
+      ? i18n.str`URL doesn't have the right format`
       : undefined,
   };
 
@@ -95,46 +95,46 @@ export function CreatePage({ accounts, onCreate, onBack }: Props): VNode {
             >
               <InputSelector
                 name="payto_uri"
-                label={i18n`Credited bank account`}
+                label={i18n.str`Credited bank account`}
                 values={accounts}
-                placeholder={i18n`Select one account`}
-                tooltip={i18n`Bank account of the merchant where the payment was received`}
+                placeholder={i18n.str`Select one account`}
+                tooltip={i18n.str`Bank account of the merchant where the payment was received`}
               />
               <Input<Entity>
                 name="wtid"
-                label={i18n`Wire transfer ID`}
+                label={i18n.str`Wire transfer ID`}
                 help=""
-                tooltip={i18n`unique identifier of the wire transfer used by the exchange, must be 52 characters long`}
+                tooltip={i18n.str`unique identifier of the wire transfer used by the exchange, must be 52 characters long`}
               />
               <Input<Entity>
                 name="exchange_url"
-                label={i18n`Exchange URL`}
-                tooltip={i18n`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`}
+                label={i18n.str`Exchange URL`}
+                tooltip={i18n.str`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`}
                 help="http://exchange.taler:8081/"
               />
               <InputCurrency<Entity>
                 name="credit_amount"
-                label={i18n`Amount credited`}
-                tooltip={i18n`Actual amount that was wired to the merchant's bank account`}
+                label={i18n.str`Amount credited`}
+                tooltip={i18n.str`Actual amount that was wired to the merchant's bank account`}
               />
             </FormProvider>
 
             <div class="buttons is-right mt-5">
               {onBack && (
                 <button class="button" onClick={onBack}>
-                  <Translate>Cancel</Translate>
+                  <i18n.Translate>Cancel</i18n.Translate>
                 </button>
               )}
               <AsyncButton
                 disabled={hasErrors}
                 data-tooltip={
                   hasErrors
-                    ? i18n`Need to complete marked fields`
+                    ? i18n.str`Need to complete marked fields`
                     : "confirm operation"
                 }
                 onClick={submitForm}
               >
-                <Translate>Confirm</Translate>
+                <i18n.Translate>Confirm</i18n.Translate>
               </AsyncButton>
             </div>
           </div>