use useTWithOpt

apps/app/src/components/InstallerForm.tsx

@@ -9,11 +9,14 @@ import { useRouter } from 'next/router';
 import { i18n as i18nConfig } from '^/config/next-i18next.config';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
+import { useTWithOpt } from '~/client/util/t-with-opt';
 import { toastError } from '~/client/util/toastr';
 import type { IErrorV3 } from '~/interfaces/errors/v3-error';
 
+
 import styles from './InstallerForm.module.scss';
 
+
 const moduleClass = styles['installer-form'] ?? '';
 
 type Props = {
@@ -27,6 +30,8 @@ const InstallerForm = memo((props: Props): JSX.Element => {
 
   const router = useRouter();
 
+  const tWithOpt = useTWithOpt();
+
   const isSupportedLang = AllLang.includes(i18n.language as Lang);
 
   const [isValidUserName, setValidUserName] = useState(true);
@@ -35,13 +40,6 @@ const InstallerForm = memo((props: Props): JSX.Element => {
 
   const [registerErrors, setRegisterErrors] = useState<IErrorV3[]>([]);
 
-  const tWithOpt = useCallback((key: string, opt?: any) => {
-    if (typeof opt === 'object') {
-      return t(key, opt).toString();
-    }
-    return t(key);
-  }, [t]);
-
   const checkUserName = useCallback(async(event) => {
     const axios = require('axios').create({
       headers: {

apps/app/src/components/LoginForm/LoginForm.tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
 import ReactCardFlip from 'react-card-flip';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
+import { useTWithOpt } from '~/client/util/t-with-opt';
 import type { IExternalAccountLoginError } from '~/interfaces/errors/external-account-login-error';
 import { LoginErrorCode } from '~/interfaces/errors/login-error';
 import type { IErrorV3 } from '~/interfaces/errors/v3-error';
@@ -21,6 +22,7 @@ import { ExternalAuthButton } from './ExternalAuthButton';
 
 import styles from './LoginForm.module.scss';
 
+
 const moduleClass = styles['login-form'];
 
 
@@ -73,6 +75,8 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
 
   const isRegistrationEnabled = isLocalStrategySetup && registrationMode !== RegistrationMode.CLOSED;
 
+  const tWithOpt = useTWithOpt();
+
   useEffect(() => {
     const { hash } = window.location;
     if (hash === '#register') {
@@ -80,13 +84,6 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
     }
   }, []);
 
-  const tWithOpt = useCallback((key: string, opt?: any) => {
-    if (typeof opt === 'object') {
-      return t(key, opt).toString();
-    }
-    return t(key);
-  }, [t]);
-
   const resetLoginErrors = useCallback(() => {
     if (loginErrors.length === 0) return;
     setLoginErrors([]);