Add translations

src/components/Group/BlockedUsersModal.tsx

@@ -138,6 +138,7 @@ export const BlockedUsersModal = () => {
     } catch (error) {
       setOpenSnackGlobal(true);
       setInfoSnackCustom({
+        //TODO translate
         type: 'error',
         message: error?.message || 'Unable to block user',
       });

src/components/Group/Group.tsx

@@ -2388,6 +2388,7 @@ export const Group = ({
                 : 'flex',
           }}
         ></AuthenticatedContainerInnerRight>
+
         <LoadingSnackbar
           open={isLoadingGroup}
           info={{

src/components/Group/GroupInvites.tsx

@@ -17,8 +17,9 @@ import { useTranslation } from 'react-i18next';
 export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = useState([]);
   const [isExpanded, setIsExpanded] = useState(false);
-
   const [loading, setLoading] = useState(true);
+  const { t } = useTranslation(['auth', 'core', 'group']);
+  const theme = useTheme();
 
   const getJoinRequests = async () => {
     try {
@@ -37,9 +38,6 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
     }
   };
 
-  const { t } = useTranslation(['auth', 'core', 'group']);
-  const theme = useTheme();
-
   useEffect(() => {
     if (myAddress) {
       getJoinRequests();
@@ -75,6 +73,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
           {groupsWithJoinRequests?.length > 0 &&
             ` (${groupsWithJoinRequests?.length})`}
         </Typography>
+
         {isExpanded ? (
           <ExpandLessIcon
             sx={{
@@ -113,6 +112,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
               <CustomLoader />
             </Box>
           )}
+
           {!loading && groupsWithJoinRequests.length === 0 && (
             <Box
               sx={{
@@ -136,6 +136,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
               </Typography>
             </Box>
           )}
+
           <List
             sx={{
               width: '100%',

src/components/Group/GroupJoinRequests.tsx

@@ -149,6 +149,7 @@ export const GroupJoinRequests = ({
             ?.length > 0 &&
             ` (${filteredJoinRequests?.filter((group) => group?.data?.length > 0)?.length})`}
         </Typography>
+
         {isExpanded ? (
           <ExpandLessIcon
             sx={{
@@ -163,6 +164,7 @@ export const GroupJoinRequests = ({
           />
         )}
       </ButtonBase>
+
       <Collapse in={isExpanded} timeout="auto" unmountOnExit>
         <Box
           sx={{
@@ -186,6 +188,7 @@ export const GroupJoinRequests = ({
               <CustomLoader />
             </Box>
           )}
+
           {!loading &&
             (filteredJoinRequests.length === 0 ||
               filteredJoinRequests?.filter((group) => group?.data?.length > 0)
@@ -212,6 +215,7 @@ export const GroupJoinRequests = ({
                 </Typography>
               </Box>
             )}
+
           <List
             className="scrollable-container"
             sx={{
@@ -267,7 +271,7 @@ export const GroupJoinRequests = ({
                           fontSize: '13px',
                           fontWeight: 400,
                         },
-                      }}
+                      }} // TODO translate
                       primary={`${group?.group?.groupName} has ${group?.data?.length} pending join requests.`}
                     />
                   </ListItemButton>

src/components/Group/GroupList.tsx

@@ -29,7 +29,6 @@ import {
   isRunningPublicNodeAtom,
   timestampEnterDataSelector,
 } from '../../atoms/global';
-
 import { timeDifferenceForNotificationChats } from './Group';
 import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
@@ -56,23 +55,23 @@ export const GroupList = ({
   return (
     <div
       style={{
-        display: 'flex',
-        width: '380px',
-        flexDirection: 'column',
         alignItems: 'flex-start',
-        height: '100%',
         background: theme.palette.background.surface,
         borderRadius: '0px 15px 15px 0px',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
         padding: '0px 2px',
+        width: '380px',
       }}
     >
       <Box
         sx={{
-          width: '100%',
           alignItems: 'center',
-          justifyContent: 'center',
           display: 'flex',
           gap: '10px',
+          justifyContent: 'center',
+          width: '100%',
         }}
       >
         <ButtonBase
@@ -252,7 +251,7 @@ const GroupItem = React.memo(
           padding: '10px',
           width: '100%',
           '&:hover': {
-            backgroundColor: 'action.hover', // background on hover
+            backgroundColor: 'action.hover',
           },
         }}
       >
@@ -296,7 +295,7 @@ const GroupItem = React.memo(
                     theme.palette.text.primary,
                   fontSize: '16px',
                 },
-              }} // Change the color of the primary text
+              }}
               secondaryTypographyProps={{
                 style: {
                   color:

src/components/Group/HomeDesktop.tsx

@@ -1,5 +1,5 @@
 import { Box, Divider, Typography, useTheme } from '@mui/material';
-import React from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Spacer } from '../../common/Spacer';
 import { ThingsToDoInitial } from './ThingsToDoInitial';
 import { GroupJoinRequests } from './GroupJoinRequests';
@@ -28,28 +28,28 @@ export const HomeDesktop = ({
   setDesktopViewMode,
   desktopViewMode,
 }) => {
-  const [checked1, setChecked1] = React.useState(false);
+  const [checked1, setChecked1] = useState(false);
-  const [checked2, setChecked2] = React.useState(false);
+  const [checked2, setChecked2] = useState(false);
 
   const { t } = useTranslation(['auth', 'core', 'group']);
   const theme = useTheme();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (balance && +balance >= 6) {
       setChecked1(true);
     }
   }, [balance]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (name) setChecked2(true);
   }, [name]);
 
-  const isLoaded = React.useMemo(() => {
+  const isLoaded = useMemo(() => {
     if (userInfo !== null) return true;
     return false;
   }, [userInfo]);
 
-  const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(() => {
+  const hasDoneNameAndBalanceAndIsLoaded = useMemo(() => {
     if (isLoaded && checked1 && checked2) return true;
     return false;
   }, [checked1, isLoaded, checked2]);
@@ -136,14 +136,6 @@ export const HomeDesktop = ({
 
               {desktopViewMode === 'home' && (
                 <>
-                  {/* <Box sx={{
-            width: '330px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}>
-          <ListOfThreadPostsWatched />
-          </Box> */}
                   {hasDoneNameAndBalanceAndIsLoaded && (
                     <>
                       <Box

src/components/Group/ListOfBans.tsx

@@ -87,6 +87,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
   const handleCancelBan = async (address) => {
     try {
       const fee = await getFee('CANCEL_GROUP_BAN');
+
       await show({
         message: t('core:message.question.perform_transaction', {
           action: 'CANCEL_GROUP_BAN',
@@ -94,6 +95,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
         }),
         publishFee: fee.fee + ' QORT',
       });
+
       setIsLoadingUnban(true);
       new Promise((res, rej) => {
         window
@@ -125,7 +127,11 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
           .catch((error) => {
             setInfoSnack({
               type: 'error',
-              message: error.message || 'An error occurred',
+              message:
+                error.message ||
+                t('core:message.error.generic', {
+                  postProcess: 'capitalizeFirst',
+                }),
             });
             setOpenSnack(true);
             rej(error);

src/components/Group/ListOfGroupPromotions.tsx

@@ -1,10 +1,4 @@
-import React, {
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
 import {
   Avatar,
   Box,
@@ -88,7 +82,7 @@ export const ListOfGroupPromotions = () => {
   const [promotionTimeInterval, setPromotionTimeInterval] = useAtom(
     promotionTimeIntervalAtom
   );
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const [openSnack, setOpenSnack] = useState(false);
   const [infoSnack, setInfoSnack] = useState(null);
   const [fee, setFee] = useState(null);
@@ -101,7 +95,7 @@ export const ListOfGroupPromotions = () => {
   const listRef = useRef(null);
   const rowVirtualizer = useVirtualizer({
     count: promotions.length,
-    getItemKey: React.useCallback(
+    getItemKey: useCallback(
       (index) => promotions[index]?.identifier,
       [promotions]
     ),
@@ -495,6 +489,7 @@ export const ListOfGroupPromotions = () => {
                 <CustomLoader />
               </Box>
             )}
+
             {!loading && promotions.length === 0 && (
               <Box
                 sx={{
@@ -518,6 +513,7 @@ export const ListOfGroupPromotions = () => {
                 </Typography>
               </Box>
             )}
+
             <div
               style={{
                 height: '600px',
@@ -776,6 +772,7 @@ export const ListOfGroupPromotions = () => {
                                     }}
                                   />
                                 )}
+
                                 {promotion?.isOpen === true && (
                                   <NoEncryptionGmailerrorredIcon
                                     sx={{
@@ -783,6 +780,7 @@ export const ListOfGroupPromotions = () => {
                                     }}
                                   />
                                 )}
+
                                 <Typography
                                   sx={{
                                     fontSize: '15px',

src/components/Group/ListOfJoinRequests.tsx

@@ -210,13 +210,13 @@ export const ListOfJoinRequests = ({
               >
                 <Box
                   sx={{
-                    width: '325px',
+                    alignItems: 'center',
-                    height: '250px',
                     display: 'flex',
                     flexDirection: 'column',
-                    alignItems: 'center',
                     gap: '10px',
+                    height: '250px',
                     padding: '10px',
+                    width: '325px',
                   }}
                 >
                   <LoadingButton
@@ -261,12 +261,12 @@ export const ListOfJoinRequests = ({
       </p>
       <div
         style={{
-          position: 'relative',
-          height: '500px',
-          width: '100%',
           display: 'flex',
           flexDirection: 'column',
           flexShrink: 1,
+          height: '500px',
+          position: 'relative',
+          width: '100%',
         }}
       >
         <AutoSizer>

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -117,6 +117,7 @@ export const ListOfThreadPostsWatched = () => {
             <CustomLoader />
           </Box>
         )}
+
         {!loading && posts.length === 0 && (
           <Box
             sx={{
@@ -140,6 +141,7 @@ export const ListOfThreadPostsWatched = () => {
             </Typography>
           </Box>
         )}
+
         {posts?.length > 0 && (
           <List
             className="scrollable-container"
@@ -172,7 +174,7 @@ export const ListOfThreadPostsWatched = () => {
                   }
                 >
                   <ListItemButton disableRipple role={undefined} dense>
-                    <ListItemText
+                    <ListItemText //TODO translate
                       primary={`New post in ${post?.thread?.threadData?.title}`}
                     />
                   </ListItemButton>

src/components/Group/ManageMembers.tsx

@@ -367,9 +367,9 @@ export const ManageMembers = ({
           {value === 0 && (
             <Box
               sx={{
-                width: '100%',
-                padding: '25px',
                 maxWidth: '750px',
+                padding: '25px',
+                width: '100%',
               }}
             >
               <Button
@@ -398,9 +398,9 @@ export const ManageMembers = ({
           {value === 1 && (
             <Box
               sx={{
-                width: '100%',
-                padding: '25px',
                 maxWidth: '750px',
+                padding: '25px',
+                width: '100%',
               }}
             >
               <InviteMember
@@ -415,9 +415,9 @@ export const ManageMembers = ({
           {value === 2 && (
             <Box
               sx={{
-                width: '100%',
-                padding: '25px',
                 maxWidth: '750px',
+                padding: '25px',
+                width: '100%',
               }}
             >
               <ListOfInvites
@@ -432,8 +432,8 @@ export const ManageMembers = ({
           {value === 3 && (
             <Box
               sx={{
-                width: '100%',
                 padding: '25px',
+                width: '100%',
                 maxWidth: '750px',
               }}
             >
@@ -449,9 +449,9 @@ export const ManageMembers = ({
           {value === 4 && (
             <Box
               sx={{
-                width: '100%',
-                padding: '25px',
                 maxWidth: '750px',
+                padding: '25px',
+                width: '100%',
               }}
             >
               <ListOfJoinRequests

src/components/Group/QMailMessages.tsx

@@ -210,6 +210,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
               <CustomLoader />
             </Box>
           )}
+
           {!loading && mails.length === 0 && (
             <Box
               sx={{

src/components/Group/Settings.tsx

@@ -199,6 +199,7 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
               postProcess: 'capitalizeFirstChar',
             })}
           />
+
           {window?.electronAPI && (
             <FormControlLabel
               control={
@@ -320,6 +321,7 @@ const ExportPrivateKey = ({ rawWallet }) => {
             autoComplete="off"
             onChange={(e) => setPassword(e.target.value)}
           />
+
           {privateKey && (
             <Button
               variant="outlined"

src/components/Group/WalletsAppWrapper.tsx

@@ -12,8 +12,10 @@ import { AppsNavBarLeft, AppsNavBarParent } from '../Apps/Apps-styles';
 import { NavBack } from '../../assets/Icons/NavBack.tsx';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 export const WalletsAppWrapper = () => {
+  const { t } = useTranslation(['auth', 'core', 'group']);
   const iframeRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const [navigationController, setNavigationController] = useAtom(
@@ -87,7 +89,9 @@ export const WalletsAppWrapper = () => {
                 justifyContent: 'space-between',
               }}
             >
-              <Typography>Q-Wallets</Typography>
+              <Typography>
+                {t('core:q_apps.q_wallets', { postProcess: 'capitalizeFirst' })}
+              </Typography>
 
               <ButtonBase onClick={handleClose}>
                 <CloseIcon

src/components/UserLookup.tsx/UserLookup.tsx

@@ -513,7 +513,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                       {t('core:amount', { postProcess: 'capitalizeFirst' })}
                     </TableCell>
                     <TableCell>
-                      {t('core:time', { postProcess: 'capitalizeFirst' })}
+                      {t('core:time.time', { postProcess: 'capitalizeFirst' })}
                     </TableCell>
                   </TableRow>
                 </TableHead>

src/i18n/locales/en/core.json

@@ -296,7 +296,8 @@
     "about": "about this Q-App",
     "q_mail": "q-mail",
     "q_manager": "q-manager",
-    "q_sandbox": "q-Sandbox"
+    "q_sandbox": "q-Sandbox",
+    "q_wallets": "q-Wallets"
   },
   "receiver": "receiver",
   "sender": "sender",
@@ -319,9 +320,9 @@
     "hour_one": "{{count}} hour",
     "hour_other": "{{count}} hours",
     "minute_one": "{{count}} minute",
-    "minute_other": "{{count}} minutes"
+    "minute_other": "{{count}} minutes",
+    "time": "time"
   },
-  "time": "time",
   "title": "title",
   "tutorial": "tutorial",
   "user_lookup": "user lookup",