Refactor translation and use only a parametric item

public/locales/en/group.json

@@ -32,10 +32,7 @@
   "invitation_expiry": "invitation Expiry Time",
   "join_requests": "join requests",
   "question": {
-    "cancel_ban": "would you like to perform a CANCEL_GROUP_BAN transaction?",
+    "perform_transaction": "would you like to perform a {{action}} transaction?",
-    "create_group": "would you like to perform an CREATE_GROUP transaction?",
-    "group_invite": "would you like to perform a GROUP_INVITE transaction?",
-    "join_group": "would you like to perform an JOIN_GROUP transaction?",
     "provide_thread": "please provide a thread title"
   },
   "message": {

src/components/Chat/GroupAnnouncements.tsx

@@ -31,6 +31,7 @@ import {
 import { RequestQueueWithPromise } from '../../utils/queue/queue';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { addDataPublishesFunc, getDataPublishesFunc } from '../Group/Group';
+import { useTranslation } from 'react-i18next';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -101,6 +102,7 @@ export const decryptPublishes = async (encryptedMessages: any[], secretKey) => {
     console.log(error);
   }
 };
+
 export const handleUnencryptedPublishes = (publishes) => {
   let publishesData = [];
   publishes.forEach((pub) => {
@@ -149,6 +151,7 @@ export const GroupAnnouncements = ({
     editorRef.current = editorInstance;
   };
   const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+  const { t } = useTranslation(['core', 'group']);
 
   const triggerRerender = () => {
     forceUpdate(); // Trigger re-render by updating the state
@@ -209,7 +212,6 @@ export const GroupAnnouncements = ({
     )
       return;
     setIsLoading(true);
-    // initWebsocketMessageGroup()
     hasInitializedWebsocket.current = true;
   }, [secretKey, isPrivate]);
 
@@ -287,7 +289,10 @@ export const GroupAnnouncements = ({
       const fee = await getFee('ARBITRARY');
 
       await show({
-        message: 'Would you like to perform a ARBITRARY transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'ARBITRARY',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
 
@@ -329,7 +334,7 @@ export const GroupAnnouncements = ({
         setTempData(selectedGroup);
         clearEditorContent();
       }
-      // send chat message
+      // TODO send chat message
     } catch (error) {
       if (!error) return;
       setInfoSnack({

src/components/GlobalActions/JoinGroup.tsx

@@ -1,8 +1,7 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import {
   Box,
-  Button,
   ButtonBase,
   CircularProgress,
   Dialog,
@@ -11,13 +10,14 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { CustomButton, CustomButtonAccept } from '../../styles/App-styles';
+import { CustomButtonAccept } from '../../styles/App-styles';
 import { getBaseApiReact, MyContext } from '../../App';
 import { getFee } from '../../background';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { FidgetSpinner } from 'react-loader-spinner';
 import { useAtom, useSetAtom } from 'jotai';
 import { memberGroupsAtom, txListAtom } from '../../atoms/global';
+import { useTranslation } from 'react-i18next';
 
 export const JoinGroup = () => {
   const { show } = useContext(MyContext);
@@ -29,7 +29,9 @@ export const JoinGroup = () => {
   const [isLoadingInfo, setIsLoadingInfo] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'group']);
   const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
+
   const handleJoinGroup = async (e) => {
     setGroupInfo(null);
     const groupId = e?.detail?.groupId;
@@ -41,6 +43,7 @@ export const JoinGroup = () => {
         const groupData = await response.json();
         setGroupInfo(groupData);
       } catch (error) {
+        console.log(error);
       } finally {
         setIsLoadingInfo(false);
       }
@@ -60,12 +63,16 @@ export const JoinGroup = () => {
       (item) => +item?.groupId === +groupInfo?.groupId
     );
   }, [memberGroups, groupInfo]);
+
   const joinGroup = async (group, isOpen) => {
     try {
       const groupId = group.groupId;
       const fee = await getFee('JOIN_GROUP');
       await show({
-        message: 'Would you like to perform an JOIN_GROUP transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'JOIN_GROUP',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingJoinGroup(true);

src/components/Group/AddGroup.tsx

@@ -118,7 +118,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
       const fee = await getFee('CREATE_GROUP');
 
       await show({
-        message: t('group:question.create_group', {
+        message: t('group:question.perform_transaction', {
+          action: 'CREATE_GROUP',
           postProcess: 'capitalize',
         }),
         publishFee: fee.fee + ' QORT',

src/components/Group/AddGroupList.tsx

@@ -113,7 +113,8 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
       const fee = await getFee('JOIN_GROUP');
 
       await show({
-        message: t('group:question.join_group', {
+        message: t('group:question.perform_transaction', {
+          action: 'JOIN_GROUP',
           postProcess: 'capitalize',
         }),
         publishFee: fee.fee + ' QORT',

src/components/Group/Forum/NewThread.tsx

@@ -208,12 +208,6 @@ export const NewThread = ({
       }
 
       if (errorMsg) {
-        // dispatch(
-        //   setNotification({
-        //     msg: errorMsg,
-        //     alertType: "error",
-        //   })
-        // );
         throw new Error(errorMsg);
       }
 
@@ -221,13 +215,18 @@ export const NewThread = ({
 
       if (!htmlContent?.trim() || htmlContent?.trim() === '<p></p>')
         throw new Error('Please provide a first message to the thread');
+
       const fee = await getFee('ARBITRARY');
       let feeToShow = fee.fee;
+
       if (!isMessage) {
         feeToShow = +feeToShow * 2;
       }
       await show({
-        message: 'Would you like to perform a ARBITRARY transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'ARBITRARY',
+          postProcess: 'capitalize',
+        }),
         publishFee: feeToShow + ' QORT',
       });
 
@@ -516,7 +515,6 @@ export const NewThread = ({
               overrideMobile
               customEditorHeight="240px"
             />
-
           </Box>
         </InstanceListContainer>
 

src/components/Group/InviteMember.tsx

@@ -16,7 +16,8 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
     try {
       const fee = await getFee('GROUP_INVITE');
       await show({
-        message: t('group:question.group_invite', {
+        message: t('group:question.perform_transaction', {
+          action: 'GROUP_INVITE',
           postProcess: 'capitalize',
         }),
         publishFee: fee.fee + ' QORT',

src/components/Group/ListOfBans.tsx

@@ -88,7 +88,10 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
     try {
       const fee = await getFee('CANCEL_GROUP_BAN');
       await show({
-        message: t('group:question.cancel_ban', { postProcess: 'capitalize' }),
+        message: t('group:question.perform_transaction', {
+          action: 'CANCEL_GROUP_BAN',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingUnban(true);

src/components/Group/ListOfGroupPromotions.tsx

@@ -51,6 +51,11 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { getFee } from '../../background';
 import { useAtom, useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
+const THIRTY_MINUTES = 30 * 60 * 1000; // 30 minutes in milliseconds
+const uid = new ShortUniqueId({ length: 8 });
+
 export const requestQueuePromos = new RequestQueueWithPromise(3);
 
 export function utf8ToBase64(inputString: string): string {
@@ -65,13 +70,11 @@ export function utf8ToBase64(inputString: string): string {
   return base64String;
 }
 
-const uid = new ShortUniqueId({ length: 8 });
-
 export function getGroupId(str) {
   const match = str.match(/group-(\d+)-/);
   return match ? match[1] : null;
 }
-const THIRTY_MINUTES = 30 * 60 * 1000; // 30 minutes in milliseconds
+
 export const ListOfGroupPromotions = () => {
   const [popoverAnchor, setPopoverAnchor] = useState(null);
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
@@ -98,6 +101,7 @@ export const ListOfGroupPromotions = () => {
   const setTxList = useSetAtom(txListAtom);
 
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'group']);
   const listRef = useRef();
   const rowVirtualizer = useVirtualizer({
     count: promotions.length,
@@ -120,6 +124,7 @@ export const ListOfGroupPromotions = () => {
       console.log(error);
     }
   }, []);
+
   const getPromotions = useCallback(async () => {
     try {
       setPromotionTimeInterval(Date.now());
@@ -213,6 +218,7 @@ export const ListOfGroupPromotions = () => {
     setPopoverAnchor(null);
     setOpenPopoverIndex(null);
   };
+
   const publishPromo = async () => {
     try {
       setIsLoadingPublish(true);
@@ -264,7 +270,10 @@ export const ListOfGroupPromotions = () => {
       const groupId = group.groupId;
       const fee = await getFee('JOIN_GROUP');
       await show({
-        message: 'Would you like to perform an JOIN_GROUP transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'JOIN_GROUP',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingJoinGroup(true);

src/components/Group/ListOfInvites.tsx

@@ -18,6 +18,7 @@ import { getNameInfo } from './Group';
 import { getFee } from '../../background';
 import { LoadingButton } from '@mui/lab';
 import { getBaseApiReact } from '../../App';
+import { useTranslation } from 'react-i18next';
 
 export const getMemberInvites = async (groupNumber) => {
   const response = await fetch(
@@ -59,7 +60,7 @@ export const ListOfInvites = ({
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
   const [isLoadingCancelInvite, setIsLoadingCancelInvite] = useState(false);
-
+  const { t } = useTranslation(['core', 'group']);
   const listRef = useRef();
 
   const getInvites = async (groupId) => {
@@ -92,8 +93,12 @@ export const ListOfInvites = ({
     try {
       // TODO translate
       const fee = await getFee('CANCEL_GROUP_INVITE');
+
       await show({
-        message: 'Would you like to perform a CANCEL_GROUP_INVITE transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'CANCEL_GROUP_INVITE',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingCancelInvite(true);

src/components/Group/ListOfJoinRequests.tsx

@@ -95,7 +95,10 @@ export const ListOfJoinRequests = ({
     try {
       const fee = await getFee('GROUP_INVITE'); // TODO translate
       await show({
-        message: 'Would you like to perform a GROUP_INVITE transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'GROUP_INVITE',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingAccept(true);

src/components/Group/ListOfMembers.tsx

@@ -19,6 +19,7 @@ import {
 import { LoadingButton } from '@mui/lab';
 import { getFee } from '../../background';
 import { getBaseApiReact } from '../../App';
+import { useTranslation } from 'react-i18next';
 
 const cache = new CellMeasurerCache({
   fixedWidth: true,
@@ -41,6 +42,7 @@ const ListOfMembers = ({
   const [isLoadingMakeAdmin, setIsLoadingMakeAdmin] = useState(false);
   const [isLoadingRemoveAdmin, setIsLoadingRemoveAdmin] = useState(false);
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'group']);
   const listRef = useRef();
 
   const handlePopoverOpen = (event, index) => {
@@ -57,7 +59,10 @@ const ListOfMembers = ({
     try {
       const fee = await getFee('GROUP_KICK');
       await show({
-        message: 'Would you like to perform a GROUP_KICK transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'GROUP_KICK',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
 
@@ -106,7 +111,10 @@ const ListOfMembers = ({
     try {
       const fee = await getFee('GROUP_BAN'); // TODO translate
       await show({
-        message: 'Would you like to perform a GROUP_BAN transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'GROUP_BAN',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingBan(true);
@@ -155,7 +163,10 @@ const ListOfMembers = ({
     try {
       const fee = await getFee('ADD_GROUP_ADMIN');
       await show({
-        message: 'Would you like to perform a ADD_GROUP_ADMIN transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'ADD_GROUP_ADMIN',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingMakeAdmin(true);
@@ -203,7 +214,10 @@ const ListOfMembers = ({
     try {
       const fee = await getFee('REMOVE_GROUP_ADMIN');
       await show({
-        message: 'Would you like to perform a REMOVE_GROUP_ADMIN transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'REMOVE_GROUP_ADMIN',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingRemoveAdmin(true);

src/components/Group/ManageMembers.tsx

@@ -75,7 +75,10 @@ export const ManageMembers = ({
       setIsLoadingLeave(true);
       const fee = await getFee('LEAVE_GROUP'); // TODO translate
       await show({
-        message: 'Would you like to perform an LEAVE_GROUP transaction?',
+        message: t('group:question.perform_transaction', {
+          action: 'LEAVE_GROUP',
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
 

src/components/Group/UserListOfInvites.tsx

@@ -99,7 +99,8 @@ export const UserListOfInvites = ({
       const fee = await getFee('JOIN_GROUP');
 
       await show({
-        message: t('group:question.join_group', {
+        message: t('group:question.perform_transaction', {
+          action: 'JOIN_GROUP',
           postProcess: 'capitalize',
         }),
         publishFee: fee.fee + ' QORT',