Add translations to app

public/locales/en/core.json

@@ -1,15 +1,20 @@
 {
   "action": {
     "add": "add",
+    "accept": "accept",
     "cancel": "cancel",
     "change": "change",
     "choose": "choose",
     "close": "close",
     "continue": "continue",
+    "continue_logout": "continue to logout",
+    "decline": "decline",
     "edit": "edit",
     "export": "export",
     "import": "import",
-    "logout": "logout"
+    "logout": "logout",
+    "refetch_page": "refetch page",
+    "return_to_thread": "return to threads"
   },
   "core": {
     "block_height": "block height",
@@ -18,25 +23,23 @@
     "version": "core version"
   },
   "description": "description",
+  "fee": {
+    "payment": "payment fee",
+    "publish": "publish fee"
+  },
   "page": {
     "last": "last",
     "first": "first",
     "previous": "previous"
   },
   "downloading_qdn": "downloading from QDN",
-  "edit": "edit",
-  "export": "export",
-  "import": "import",
   "last_height": "last height",
   "loading": "loading...",
   "loading_posts": "loading posts... please wait.",
-  "logout": "logout",
   "minting_status": "minting status",
   "next": "next",
   "payment_notification": "payment notification",
   "price": "price",
-  "refetch_page": "refetch page",
-  "return_to_thread": "return to Threads",
   "q_mail": "q-mail",
   "result": {
     "error": {
@@ -51,9 +54,14 @@
       "synchronizing": "synchronizing"
     },
     "success": {
-      "publish_qdn": "successfully published to QDN"
+      "group_creation": "successfully created group. It may take a couple of minutes for the changes to propagate",
+      "publish_qdn": "successfully published to QDN",
+      "request_read": "I have read this request"
     }
   },
+  "question": {
+    "perform_create_group": "would you like to perform an CREATE_GROUP transaction?"
+  },
   "save_options": {
     "no_pinned_changes": "you currently do not have any changes to your pinned apps",
     "overwrite_changes": "the app was unable to download your existing QDN-saved pinned apps. Would you like to overwrite those changes?",

src/App.tsx

@@ -2079,7 +2079,6 @@ function App() {
             />
           </Box>
         )}
-
         {isShowQortalRequest && !isMainWindow && (
           <>
             <Spacer height="120px" />
@@ -2362,7 +2361,6 @@ function App() {
             <ErrorText>{sendPaymentError}</ErrorText>
           </>
         )}
-
         {extState === 'web-app-request-payment' && !isMainWindow && (
           <>
             <Spacer height="100px" />
@@ -3176,8 +3174,9 @@ function App() {
             >
               Close
             </CustomButton>
-          </>
+          </> // TODO translate
         )}
+
         {countdown && (
           <Box
             style={{
@@ -3221,12 +3220,18 @@ function App() {
               </DialogContentText>
               {message?.paymentFee && (
                 <DialogContentText id="alert-dialog-description2">
-                  payment fee: {message.paymentFee}
+                  {t('core:fee.payment', {
+                    postProcess: 'capitalize',
+                  })}
+                  : {message.paymentFee}
                 </DialogContentText>
               )}
               {message?.publishFee && (
                 <DialogContentText id="alert-dialog-description2">
-                  publish fee: {message.publishFee}
+                  {t('core:fee.publish', {
+                    postProcess: 'capitalize',
+                  })}
+                  : {message.publishFee}
                 </DialogContentText>
               )}
             </DialogContent>
@@ -3247,7 +3252,9 @@ function App() {
                 onClick={onOk}
                 autoFocus
               >
-                accept
+                {t('core:action.accept', {
+                  postProcess: 'capitalize',
+                })}
               </Button>
               <Button
                 sx={{
@@ -3264,7 +3271,9 @@ function App() {
                 variant="contained"
                 onClick={onCancel}
               >
-                decline
+                {t('core:action.decline', {
+                  postProcess: 'capitalize',
+                })}
               </Button>
             </DialogActions>
           </Dialog>
@@ -3285,7 +3294,9 @@ function App() {
             </DialogContent>
             <DialogActions>
               <Button variant="contained" onClick={onOkInfo} autoFocus>
-                Close
+                {t('core:action.close', {
+                  postProcess: 'capitalize',
+                })}
               </Button>
             </DialogActions>
           </Dialog>
@@ -3304,14 +3315,18 @@ function App() {
             </DialogContent>
             <DialogActions>
               <Button variant="contained" onClick={onCancelUnsavedChanges}>
-                Cancel
+                {t('core:action.cancel', {
+                  postProcess: 'capitalize',
+                })}
               </Button>
               <Button
                 variant="contained"
                 onClick={onOkUnsavedChanges}
                 autoFocus
               >
-                Continue to Logout
+                {t('core:action.decline', {
+                  postProcess: 'capitalize',
+                })}
               </Button>
             </DialogActions>
           </Dialog>
@@ -3582,10 +3597,12 @@ function App() {
                   label={
                     <Box sx={{ display: 'flex', alignItems: 'center' }}>
                       <Typography sx={{ fontSize: '14px' }}>
-                        I have read this request
+                        {t('core:result.success.request_read', {
+                          postProcess: 'capitalize',
+                        })}
                       </Typography>
                       <PriorityHighIcon color="warning" />
-                    </Box> // TODO translate
+                    </Box>
                   }
                 />
               )}
@@ -3593,8 +3610,8 @@ function App() {
               <Spacer height="29px" />
               <Box
                 sx={{
-                  display: 'flex',
                   alignItems: 'center',
+                  display: 'flex',
                   gap: '14px',
                 }}
               >
@@ -3630,7 +3647,9 @@ function App() {
                     onOkQortalRequestExtension('accepted');
                   }}
                 >
-                  accept
+                  {t('core:action.accept', {
+                    postProcess: 'capitalize',
+                  })}
                 </CustomButtonAccept>
                 <CustomButtonAccept
                   color="black"
@@ -3640,7 +3659,9 @@ function App() {
                   }}
                   onClick={() => onCancelQortalRequestExtension()}
                 >
-                  decline
+                  {t('core:action.decline', {
+                    postProcess: 'capitalize',
+                  })}
                 </CustomButtonAccept>
               </Box>
               <ErrorText>{sendPaymentError}</ErrorText>

src/components/Group/AddGroup.tsx

@@ -28,6 +28,7 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { getFee } from '../../background';
 import { MyContext } from '../../App';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
+import { useTranslation } from 'react-i18next';
 
 export const Label = styled('label')`
   display: block;
@@ -84,6 +85,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
     setMaxBlock(event.target.value as string);
   };
 
+  const { t } = useTranslation(['core']);
   const theme = useTheme();
 
   const handleCreateGroup = async () => {
@@ -91,9 +93,11 @@ export const AddGroup = ({ address, open, setOpen }) => {
       if (!name) throw new Error('Please provide a name');
       if (!description) throw new Error('Please provide a description');
 
-      const fee = await getFee('CREATE_GROUP'); // TODO translate
+      const fee = await getFee('CREATE_GROUP');
       await show({
-        message: 'Would you like to perform an CREATE_GROUP transaction?',
+        message: t('core:question.perform_create_group', {
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
 
@@ -111,10 +115,11 @@ export const AddGroup = ({ address, open, setOpen }) => {
             if (!response?.error) {
               setInfoSnack({
                 type: 'success',
-                message:
+                message: t('core:result.success.group_creation', {
-                  'Successfully created group. It may take a couple of minutes for the changes to propagate',
+                  postProcess: 'capitalize',
+                }),
               });
-              setOpenSnack(true);
+              setOpenSnack(true); // TODO translate
               setTxList((prev) => [
                 {
                   ...response,

src/components/Group/Forum/Thread.tsx

@@ -608,7 +608,7 @@ export const Thread = ({
           >
             <MailIconImg src={ReturnSVG} />
             <ComposeP>
-              {t('core:return_to_thread', { postProcess: 'capitalize' })}
+              {t('core:action.return_to_thread', { postProcess: 'capitalize' })}
             </ComposeP>
           </ShowMessageReturnButton>
           {/* Conditionally render the scroll buttons */}
@@ -960,7 +960,7 @@ export const Thread = ({
                     color: 'white',
                   }}
                 >
-                  {t('core:refetch_page', { postProcess: 'capitalize' })}
+                  {t('core:action.refetch_page', { postProcess: 'capitalize' })}
                 </Button>
               </Box>
             </>