Pass value formatter via context

src/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 import { Navigate, RouterProvider, createBrowserRouter } from 'react-router';
 import SocketService from 'services/SocketService';
 
@@ -23,6 +23,8 @@ import 'utils/semantic';
 
 import 'style.css';
 import { SocketContext } from 'context/SocketContext';
+import { FormatterContext } from 'context/FormatterContext';
+import { createFormatter } from 'utils/Formatter';
 
 global.Promise = Promise as any;
 
@@ -53,18 +55,21 @@ const router = createBrowserRouter(
 const i18n = initI18n();
 const App = () => {
   const prompt = useInstallPrompt();
+  const formatter = useMemo(() => createFormatter(i18n), []);
   return (
     <ErrorBoundary>
       <Suspense fallback={<Loader fullPage={true} text="" />}>
-        <SocketContext.Provider value={SocketService}>
-          <I18nextProvider i18n={i18n}>
-            <InstallPromptContext.Provider value={prompt}>
-              <MeasuredBackground>
-                <RouterProvider router={router} />
-              </MeasuredBackground>
-            </InstallPromptContext.Provider>
-          </I18nextProvider>
-        </SocketContext.Provider>
+        <FormatterContext.Provider value={formatter}>
+          <SocketContext.Provider value={SocketService}>
+            <I18nextProvider i18n={i18n}>
+              <InstallPromptContext.Provider value={prompt}>
+                <MeasuredBackground>
+                  <RouterProvider router={router} />
+                </MeasuredBackground>
+              </InstallPromptContext.Provider>
+            </I18nextProvider>
+          </SocketContext.Provider>
+        </FormatterContext.Provider>
       </Suspense>
     </ErrorBoundary>
   );

src/components/download/layout/sections/PathListItem.tsx

@@ -5,7 +5,7 @@ import IconConstants from 'constants/IconConstants';
 import Icon from 'components/semantic/Icon';
 
 import { toI18nKey } from 'utils/TranslationUtils';
-import { Formatter, useFormatter } from 'utils/ValueFormat';
+import { Formatter, useFormatter } from 'context/FormatterContext';
 
 import * as API from 'types/api';
 import * as UI from 'types/ui';

src/components/file-item-info/FileItemInfoGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { formatRelativeTime, useFormatter } from 'utils/ValueFormat';
+import { useFormatter } from 'context/FormatterContext';
 
 import { DownloadMenu } from 'components/action-menu';
 
@@ -57,7 +57,7 @@ const FileItemInfoGrid: React.FC<FileItemInfoGridProps> = ({
     return translate(text, t, UI.Modules.COMMON);
   };
 
-  const { formatSize } = useFormatter();
+  const { formatSize, formatRelativeTime } = useFormatter();
   return (
     <div className="ui fileitem info segment">
       <Grid columns="two" stackable={true}>

src/components/filebrowser/sections/FileItemList.tsx

@@ -6,7 +6,7 @@ import * as API from 'types/api';
 import * as UI from 'types/ui';
 
 import { translate } from 'utils/TranslationUtils';
-import { useFormatter } from 'utils/ValueFormat';
+import { useFormatter } from 'context/FormatterContext';
 import { useTranslation } from 'react-i18next';
 import Loader from 'components/semantic/Loader';
 import Message from 'components/semantic/Message';

src/components/main/navigation/icon/HashInfoLayout.tsx

@@ -13,7 +13,7 @@ import * as React from 'react';
 import * as API from 'types/api';
 import * as UI from 'types/ui';
 
-import { formatSeconds, useFormatter } from 'utils/ValueFormat';
+import { useFormatter } from 'context/FormatterContext';
 
 interface HashInfoLayoutProps {
   stats: API.HashStats;
@@ -41,7 +41,7 @@ export const HashInfoLayout: React.FC<HashInfoLayoutProps> = ({ stats, moduleT }
     ...stats,
   };
 
-  const { formatSize, formatSpeed } = useFormatter();
+  const { formatSize, formatSpeed, formatSeconds } = useFormatter();
   return (
     <div className="hash-layout">
       <div className="ui list">

src/components/main/navigation/icon/StatisticsIcons.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { useFormatter } from 'utils/ValueFormat';
+import { useFormatter } from 'context/FormatterContext';
 import Icon, { IconType, CornerIconType } from 'components/semantic/Icon';
 
 import HashConstants from 'constants/HashConstants';