Add translations to apps

src/components/Apps/AppInfo.tsx

@@ -172,9 +172,13 @@ export const AppInfo = ({ app, myName }) => {
               }}
             >
               <AppDownloadButtonText>
-                {isSelectedAppPinned // TODO translate
+                {isSelectedAppPinned
-                  ? 'Unpin from dashboard'
+                  ? t('core:action.unpin_from_dashboard', {
-                  : 'Pin to dashboard'}
+                      postProcess: 'capitalize',
+                    })
+                  : t('core:action.pin_from_dashboard', {
+                      postProcess: 'capitalize',
+                    })}
               </AppDownloadButtonText>
             </AppDownloadButton>
 
@@ -194,7 +198,13 @@ export const AppInfo = ({ app, myName }) => {
               }}
             >
               <AppDownloadButtonText>
-                {isInstalled ? 'Open' : 'Download'}
+                {isInstalled
+                  ? t('core:action.open', {
+                      postProcess: 'capitalize',
+                    })
+                  : t('core:action.download', {
+                      postProcess: 'capitalize',
+                    })}
               </AppDownloadButtonText>
             </AppDownloadButton>
           </Box>
@@ -217,25 +227,40 @@ export const AppInfo = ({ app, myName }) => {
             <Spacer width="16px" />
 
             <AppsCategoryInfoSub>
-              <AppsCategoryInfoLabel>Category:</AppsCategoryInfoLabel>
+              <AppsCategoryInfoLabel>
+                {t('core:category', {
+                  postProcess: 'capitalize',
+                })}
+                :
+              </AppsCategoryInfoLabel>
 
               <Spacer height="4px" />
 
               <AppsCategoryInfoValue>
-                {app?.metadata?.categoryName || 'none'}
+                {app?.metadata?.categoryName ||
+                  t('core:none', {
+                    postProcess: 'capitalize',
+                  })}
               </AppsCategoryInfoValue>
             </AppsCategoryInfoSub>
           </AppsCategoryInfo>
 
           <Spacer height="30px" />
 
-          <AppInfoAppName>About this Q-App</AppInfoAppName>
+          <AppInfoAppName>
+            {t('core:q_apps.about', {
+              postProcess: 'capitalize',
+            })}
+          </AppInfoAppName>
         </AppsWidthLimiter>
 
         <Spacer height="20px" />
 
         <AppsInfoDescription>
-          {app?.metadata?.description || 'No description'}
+          {app?.metadata?.description ||
+            t('core:message.generic.no_description', {
+              postProcess: 'capitalize',
+            })}
         </AppsInfoDescription>
       </Box>
     </AppsLibraryContainer>

src/components/Apps/AppInfoSnippet.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../atoms/global';
 import { saveToLocalStorage } from './AppsNavBarDesktop';
 import { useAtom, useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 export const AppInfoSnippet = ({
   app,
@@ -41,6 +42,7 @@ export const AppInfoSnippet = ({
   );
 
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'auth', 'group']);
 
   return (
     <AppInfoSnippetContainer
@@ -166,11 +168,16 @@ export const AppInfoSnippet = ({
           sx={{
             backgroundColor: theme.palette.background.paper,
             opacity: isSelectedAppPinned ? 0.6 : 1,
-          }} // TODO translate
+          }}
         >
           <AppDownloadButtonText>
-            {' '}
+            {isSelectedAppPinned
-            {isSelectedAppPinned ? 'Unpin' : 'Pin'}
+              ? t('core:action.unpin', {
+                  postProcess: 'capitalize',
+                })
+              : t('core:action.pin', {
+                  postProcess: 'capitalize',
+                })}
           </AppDownloadButtonText>
         </AppDownloadButton>
 
@@ -187,7 +194,13 @@ export const AppInfoSnippet = ({
           }}
         >
           <AppDownloadButtonText>
-            {isInstalled ? 'Open' : 'Download'}
+            {isInstalled
+              ? t('core:action.open', {
+                  postProcess: 'capitalize',
+                })
+              : t('core:action.download', {
+                  postProcess: 'capitalize',
+                })}
           </AppDownloadButtonText>
         </AppDownloadButton>
       </AppInfoSnippetRight>

src/components/Apps/AppPublish.tsx

@@ -1,20 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import {
-  AppCircle,
-  AppCircleContainer,
-  AppCircleLabel,
-  AppDownloadButton,
-  AppDownloadButtonText,
-  AppInfoAppName,
-  AppInfoSnippetContainer,
-  AppInfoSnippetLeft,
-  AppInfoSnippetMiddle,
-  AppInfoSnippetRight,
-  AppInfoUserName,
   AppLibrarySubTitle,
   AppPublishTagsContainer,
   AppsLibraryContainer,
-  AppsParent,
   AppsWidthLimiter,
   PublishQAppCTAButton,
   PublishQAppChoseFile,
@@ -28,10 +16,7 @@ import {
   useTheme,
 } from '@mui/material';
 import { styled } from '@mui/system';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { Add } from '@mui/icons-material';
 import { MyContext, getBaseApiReact } from '../../App';
-import LogoSelected from '../../assets/svgs/LogoSelected.svg';
 import { Spacer } from '../../common/Spacer';
 import { executeEvent } from '../../utils/events';
 import { useDropzone } from 'react-dropzone';
@@ -39,6 +24,7 @@ import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { getFee } from '../../background';
 import { fileToBase64 } from '../../utils/fileReading';
+import { useTranslation } from 'react-i18next';
 
 const CustomSelect = styled(Select)({
   border: '0.5px solid var(--50-white, #FFFFFF80)',
@@ -81,6 +67,7 @@ export const AppPublish = ({ names, categories }) => {
   const [file, setFile] = useState(null);
   const { show } = useContext(MyContext);
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'auth', 'group']);
   const [tag1, setTag1] = useState('');
   const [tag2, setTag2] = useState('');
   const [tag3, setTag3] = useState('');
@@ -106,9 +93,11 @@ export const AppPublish = ({ names, categories }) => {
         errors.forEach((error) => {
           if (error.code === 'file-too-large') {
             console.error(
-              `File ${file.name} is too large. Max size allowed is ${
+              t('core:message.error.file_too_large', {
-                maxFileSize / (1024 * 1024)
+                filename: file.name,
-              } MB.`
+                size: maxFileSize / (1024 * 1024),
+                postProcess: 'capitalize',
+              })
             );
           }
         });
@@ -142,6 +131,7 @@ export const AppPublish = ({ names, categories }) => {
         setTag5(myApp?.metadata?.tags[4] || '');
       }
     } catch (error) {
+      console.log(error);
     } finally {
       setIsLoading('');
     }

src/components/QMailStatus.tsx

@@ -65,7 +65,7 @@ export const QMailStatus = () => {
               textTransform: 'uppercase',
             }}
           >
-            {t('core:q_mail', {
+            {t('core:q_apps.q_mail', {
               postProcess: 'capitalize',
             })}
           </span>

src/i18n/locales/en/core.json

@@ -16,6 +16,7 @@
     "choose_name": "choose a name",
     "decline": "decline",
     "decrypt": "decrypt",
+    "download": "download",
     "edit": "edit",
     "enter_name": "enter a name",
     "export": "export",
@@ -29,15 +30,21 @@
       "thread": "new thread"
     },
     "notify": "notify",
+    "open": "open",
+    "pin": "pin",
+    "pin_from_dashboard": "pin from dashboard",
     "post": "post",
     "post_message": "post message",
     "publish": "publish",
     "register_name": "register name",
     "remove": "remove",
     "save": "save",
-    "start_minting": "start minting"
+    "start_minting": "start minting",
+    "unpin": "unpin",
+    "unpin_from_dashboard": "unpin from dashboard"
   },
   "admin": "admin",
+  "category": "category",
   "core": {
     "block_height": "block height",
     "information": "core information",
@@ -71,6 +78,7 @@
   "message": {
     "error": {
       "address_not_found": "your address was not found",
+      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
       "generic": "an error occurred",
       "incorrect_password": "incorrect password",
       "minting_account_add": "unable to add minting account",
@@ -84,6 +92,7 @@
       "name_checking": "checking if name already exists",
       "name_registration": "your balance is {{ balance }} QORT. A name registration requires a {{ fee }} QORT fee",
       "name_unavailable": "{{ name }} is unavailable",
+      "no_description": "no description",
       "publish_data": "publish data to Qortal: anything from apps to videos. Fully decentralized!",
       "secure_ownership": "secure ownership of data published by your name. You can even sell your name, along with your data to a third party."
     },
@@ -104,6 +113,7 @@
     }
   },
   "minting_status": "minting status",
+  "none": "none",
   "page": {
     "last": "last",
     "first": "first",
@@ -112,7 +122,10 @@
   },
   "payment_notification": "payment notification",
   "price": "price",
-  "q_mail": "q-mail",
+  "q_apps": {
+    "about": "about this Q-App",
+    "q_mail": "q-mail"
+  },
   "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?",