feat(ledger): use i18next (#5248)

libs/i18n/src/locales/en/ledger.json

@@ -0,0 +1,18 @@
+{
+  "Date from": "Date from",
+  "Date to": "Date to",
+  "Download": "Download",
+  "Download all to .csv file": "Download all to .csv file",
+  "Download has been started": "Download has been started",
+  "Downloading for {{asset}} from {{startDate}} till {{endDate}}": "Downloading for {{asset}} from {{startDate}} till {{endDate}}",
+  "Export ledger entries": "Export ledger entries",
+  "Get file here": "Get file here",
+  "Please note this can take several minutes.": "Please note this can take several minutes.",
+  "Select asset": "Select asset",
+  "Something went wrong": "Something went wrong",
+  "Still in progress": "Still in progress",
+  "The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC{{offset}}.": "The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC{{offset}}.",
+  "Try again later": "Try again later",
+  "You will be notified here when your file is ready.": "You will be notified here when your file is ready.",
+  "Your file is ready": "Your file is ready"
+}

libs/ledger/__mocks__/react-i18next.ts

@@ -0,0 +1,14 @@
+export const useTranslation = () => ({
+  t: (label: string, replacements?: Record<string, string>) => {
+    let translatedLabel = label;
+    if (typeof replacements === 'object' && replacements !== null) {
+      Object.keys(replacements).forEach((key) => {
+        translatedLabel = translatedLabel.replace(
+          `{{${key}}}`,
+          replacements[key]
+        );
+      });
+    }
+    return translatedLabel;
+  },
+});

libs/ledger/src/lib/ledger-download-store.tsx

@@ -3,8 +3,8 @@ import type { ReactNode } from 'react';
 import { useCallback, useEffect } from 'react';
 import type { Toast } from '@vegaprotocol/ui-toolkit';
 import { useToasts, Intent } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
 import { subscribeWithSelector } from 'zustand/middleware';
+import { useT } from './use-t';
 
 type DownloadSettings = {
   title: string;
@@ -52,14 +52,19 @@ export const useLedgerDownloadFile = create<LedgerDownloadFileStore>()(
   }))
 );
 
-const ErrorContent = ({ message }: { message?: string }) => (
+const ErrorContent = ({ message }: { message?: string }) => {
+  const t = useT();
+  return (
     <>
       <h4 className="mb-1 text-sm">{t('Something went wrong')}</h4>
       <p>{message || t('Try again later')}</p>
     </>
   );
+};
 
-const InfoContent = ({ progress = false }) => (
+const InfoContent = ({ progress = false }) => {
+  const t = useT();
+  return (
     <>
       <p>{t('Please note this can take several minutes.')}</p>
       <p>{t('You will be notified here when your file is ready.')}</p>
@@ -68,8 +73,10 @@ const InfoContent = ({ progress = false }) => (
       </h4>
     </>
   );
+};
 
 export const useLedgerDownloadManager = () => {
+  const t = useT();
   const queue = useLedgerDownloadFile((store) => store.queue);
   const updateQueue = useLedgerDownloadFile((store) => store.updateQueue);
   const removeItem = useLedgerDownloadFile((store) => store.removeItem);
@@ -88,7 +95,8 @@ export const useLedgerDownloadManager = () => {
     [removeToast, removeItem]
   );
 
-  const createToast = (item: DownloadSettings) => {
+  const createToast = useCallback(
+    (item: DownloadSettings) => {
       let content: ReactNode;
       switch (true) {
         case item.isError:
@@ -129,7 +137,9 @@ export const useLedgerDownloadManager = () => {
       } else {
         setToast(toast);
       }
-  };
+    },
+    [hasToast, setToast, onDownloadClose, updateToast, t]
+  );
 
   useEffect(() => {
     queue.forEach((item) => {

libs/ledger/src/lib/ledger-export-form.tsx

@@ -14,9 +14,9 @@ import {
   toNanoSeconds,
   VEGA_ID_REGEX,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { localLoggerFactory } from '@vegaprotocol/logger';
 import { useLedgerDownloadFile } from './ledger-download-store';
+import { useT } from './use-t';
 
 const DEFAULT_EXPORT_FILE_NAME = 'ledger_entries.csv';
 
@@ -70,6 +70,7 @@ interface Props {
 }
 
 export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
+  const t = useT();
   const now = useRef(new Date());
   const [dateFrom, setDateFrom] = useState(() => {
     return formatForInput(subDays(now.current, 7));
@@ -116,11 +117,14 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
   const startDownload = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const title = t('Downloading for %s from %s till %s', [
-      assets[assetId],
-      format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
-      format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
-    ]);
+    const title = t(
+      'Downloading for {{asset}} from {{startDate}} till {{endDate}}',
+      {
+        asset: assets[assetId],
+        startDate: format(new Date(dateFrom), 'dd MMMM yyyy HH:mm'),
+        endDate: format(new Date(dateTo || Date.now()), 'dd MMMM yyyy HH:mm'),
+      }
+    );
 
     const downloadStoreItem = {
       title,
@@ -225,8 +229,8 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
       {offset && (
         <p className="text-xs text-neutral-400 mt-1">
           {t(
-            'The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC%s.',
-            [toHoursAndMinutes(offset)]
+            'The downloaded file uses the UTC time zone for all listed times. Your time zone is UTC{{offset}}.',
+            { offset: toHoursAndMinutes(offset) }
           )}
         </p>
       )}

libs/ledger/src/lib/use-t.jsx

@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+
+export const useT = () => useTranslation('ledger').t;