Save translations

src/components/Save/Save.tsx

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import isEqual from 'lodash/isEqual'; // Import deep comparison utility
+import isEqual from 'lodash/isEqual'; // TODO Import deep comparison utility
 import {
   canSaveSettingToQdnAtom,
   hasSettingsChangedAtom,
@@ -26,6 +26,7 @@ import {
   base64ToUint8Array,
   uint8ArrayToObject,
 } from '../../backgroundFunctions/encryption';
+import { useTranslation } from 'react-i18next';
 
 export const handleImportClick = async () => {
   const fileInput = document.createElement('input');
@@ -77,6 +78,8 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const { show } = useContext(MyContext);
 
+  const { t } = useTranslation(['core']);
+
   const hasChanged = useMemo(() => {
     const newChanges = {
       sortablePinnedApps: pinnedApps.map((item) => {
@@ -146,8 +149,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
         const fee = await getFee('ARBITRARY');
 
         await show({
-          message:
-            'Would you like to publish your settings to QDN (encrypted) ?',
+          message: t('core:save.publish_qnd', { postProcess: 'capitalize' }),
           publishFee: fee.fee + ' QORT',
         });
         const response = await new Promise((res, rej) => {
@@ -165,7 +167,10 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
               rej(response.error);
             })
             .catch((error) => {
-              rej(error.message || 'An error occurred');
+              rej(
+                error.message ||
+                  t('core:result.error.generic', { postProcess: 'capitalize' })
+              );
             });
         });
         if (response?.identifier) {
@@ -173,7 +178,9 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
           setSettingsQdnLastUpdated(Date.now());
           setInfoSnack({
             type: 'success',
-            message: 'Sucessfully published to QDN',
+            message: t('core:result.success.publish_qdn', {
+              postProcess: 'capitalize',
+            }),
           });
           setOpenSnack(true);
           setAnchorEl(null);
@@ -182,7 +189,11 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
     } catch (error) {
       setInfoSnack({
         type: 'error',
-        message: error?.message || 'Unable to save to QDN',
+        message:
+          error?.message ||
+          t('core:result.error.save_qdn', {
+            postProcess: 'capitalize',
+          }),
       });
       setOpenSnack(true);
     } finally {
@@ -214,7 +225,9 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
         {isDesktop ? (
           <IconWrapper
             disableWidth={disableWidth}
-            label="Save"
+            label={t('core:save_options.save', {
+              postProcess: 'capitalize',
+            })}
             selected={false}
           >
             <SaveIcon
@@ -225,6 +238,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
           <SaveIcon color={hasChanged && !isLoading ? '#5EB049' : undefined} />
         )}
       </ButtonBase>
+
       <Popover
         open={!!anchorEl}
         anchorEl={anchorEl}
@@ -247,19 +261,19 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
         {isUsingImportExportSettings && (
           <Box
             sx={{
-              padding: '15px',
               display: 'flex',
               flexDirection: 'column',
               gap: 1,
+              padding: '15px',
               width: '100%',
             }}
           >
             <Box
               sx={{
-                width: '100%',
+                alignItems: 'center',
                 display: 'flex',
                 flexDirection: 'column',
-                alignItems: 'center',
+                width: '100%',
               }}
             >
               <Typography
@@ -268,7 +282,8 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                 }}
               >
                 You are using the export/import way of saving settings.
-              </Typography>
+              </Typography>{' '}
+              // TODO: translate
               <Spacer height="40px" />
               <Button
                 size="small"
@@ -302,10 +317,10 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
         {!isUsingImportExportSettings && (
           <Box
             sx={{
-              padding: '15px',
               display: 'flex',
               flexDirection: 'column',
               gap: 1,
+              padding: '15px',
               width: '100%',
             }}
           >
@@ -346,7 +361,9 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                       You have unsaved changes to your pinned apps. Save them to
                       QDN.
                     </Typography>
+
                     <Spacer height="10px" />
+
                     <LoadingButton
                       sx={{
                         backgroundColor: 'var(--green)',
@@ -535,6 +552,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
             >
               Import
             </ButtonBase>
+
             <ButtonBase
               onClick={async () => {
                 try {