Add translation keys

i18n.js

@@ -14,7 +14,7 @@ const isDev = process.env.NODE_ENV === 'development';
 const capitalize = {
   type: 'postProcessor',
   name: 'capitalize',
-  process: (value, key, options, translator) => {
+  process: (value) => {
     return value.charAt(0).toUpperCase() + value.slice(1);
   },
 };

public/locales/en/auth.json

@@ -10,15 +10,23 @@
     "key": "API key",
     "select_valid": "select a valid apikey"
   },
+  "authenticate": "authenticate",
   "build_version": "build version",
   "create_account": "create account",
-  "return_to_list": "return to list",
+  "download_account": "download account",
+  "keep_secure": "Keep your account file secure",
   "node": {
     "choose": "choose custom node",
     "custom_many": "custom nodes",
     "use_custom": "use custom node",
     "use_local": "use local node",
-    "using": "using node"
+    "using": "using node",
+    "using_public": "using public node"
   },
+  "password": "password",
+  "password_confirmation": "confirm password",
+  "return_to_list": "return to list",
+  "wallet_password_confirmation": "confirm wallet password",
+  "wallet_password": "wallet password",
   "welcome": "welcome to"
 }

public/locales/en/core.json

@@ -1,17 +1,27 @@
 {
   "add": "add",
+  "backup_wallet": "backup wallet",
   "cancel": "cancel",
   "choose": "choose",
   "close": "close",
+  "continue": "continue",
   "description": "description",
   "edit": "edit",
   "error": "an error occurred",
   "last_height": "last height",
   "loading": "loading...",
+  "logout": "logout",
+  "minting_status": "minting status",
+  "payment_notification": "payment notification",
   "price": "price",
+  "q_mail": "q-mail",
   "save": "save",
+  "settings": "settings",
   "supply": "supply",
   "title": "title",
+  "tutorial": "tutorial",
+  "your_account": "your account",
+  "user_lookup": "user lookup",
   "wallet": "wallet",
   "wallet_other": "wallets",
   "welcome": "welcome"

public/locales/it/auth.json

@@ -10,15 +10,22 @@
     "key": "chiave API",
     "select_valid": "selezione una chiave API valida"
   },
+  "authenticate": "autenticazione",
+  "build_version": "versione build",
+  "download_account": "scarica account",
+  "keep_secure": "metti al sicuro il file del tuo account",
   "node": {
     "choose": "scegli un nodo custom",
     "custom_many": "nodi custom",
     "use_custom": "use nodo custom",
     "use_local": "usa nodo locale",
-    "using": "nodo in uso"
+    "using": "nodo in uso",
+    "using_public": "utilizzo nodo pubblico"
   },
-  "build_version": "versione build",
+  "password": "password",
-  "create_account": "crea un account",
+  "password_confirmation": "confirma la password",
+  "wallet_password_confirmation": "conferma la password del wallet",
   "return_to_list": "ritorna alla lista",
+  "wallet_password": "password del wallet",
   "welcome": "benvenuto in"
 }

public/locales/it/core.json

@@ -1,17 +1,27 @@
 {
   "add": "aggiungi",
+  "backup_wallet": "backup wallet",
   "cancel": "cancella",
   "choose": "scegli",
   "close": "chiudi",
+  "continue": "continua",
   "description": "descrizione",
   "edit": "modifica",
   "error": "si è verificato un errore",
   "last_height": "ultimo blocco",
   "loading": "caricamento...",
+  "logout": "disconnetti",
+  "minting_status": "stato minting",
+  "payment_notification": "notifiche pagamenti",
   "price": "prezzo",
+  "q_mail": "q-mail",
   "save": "salva",
+  "settings": "impostazioni",
   "supply": "offerta",
   "title": "titolo",
+  "tutorial": "tutorial",
+  "your_account": "il tuo account",
+  "user_lookup": "ricerca utente",
   "wallet": "wallet",
   "wallet_other": "wallet",
   "welcome": "benvenuto"

public/locales/it/tutorial.json

@@ -0,0 +1,21 @@
+{
+  "1_getting_started": "1. Come iniziare",
+  "2_overview": "2. Overview",
+  "3_groups": "3. I gruppi in Qortal",
+  "4_obtain_qort": "4. Ottenere Qort",
+  "account_creation": "creazione account",
+  "important_info": "important information!",
+  "apps": {
+    "dashboard": "1. Dashboard delle app",
+    "navigation": "2. Navigation tra le app"
+  },
+  "initial": {
+    "6_qort": "Avere almeno 6 QORT nel proprio wallet",
+    "explore": "esplora",
+    "general_chat": "chat generaleat",
+    "getting_started": "Come iniziare",
+    "register_name": "registra un nome",
+    "see_apps": "vedi le apps",
+    "trade_qort": "scambia i QORT"
+  }
+}

src/App.tsx

@@ -136,6 +136,7 @@ import { QortPayment } from './components/QortPayment';
 import { GeneralNotifications } from './components/GeneralNotifications';
 import { PdfViewer } from './common/PdfViewer';
 import ThemeSelector from './components/Theme/ThemeSelector.tsx';
+import { useTranslation } from 'react-i18next';
 
 type extStates =
   | 'not-authenticated'
@@ -316,6 +317,8 @@ function App() {
   const [sendqortState, setSendqortState] = useState<any>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isLoadingSendCoin, setIsLoadingSendCoin] = useState<boolean>(false);
+
+  const { t } = useTranslation(['auth', 'core']);
   const theme = useTheme();
 
   const [
@@ -1550,9 +1553,10 @@ function App() {
                     style={{
                       fontSize: '14px',
                       fontWeight: 700,
+                      textTransform: 'uppercase',
                     }}
                   >
-                    LOGOUT
+                    {t('core:logout')}
                   </span>
                 }
                 placement="left"
@@ -1589,9 +1593,10 @@ function App() {
                     style={{
                       fontSize: '14px',
                       fontWeight: 700,
+                      textTransform: 'uppercase',
                     }}
                   >
-                    SETTINGS
+                    {t('core:settings')}
                   </span>
                 }
                 placement="left"
@@ -1628,9 +1633,10 @@ function App() {
                     style={{
                       fontSize: '14px',
                       fontWeight: 700,
+                      textTransform: 'uppercase',
                     }}
                   >
-                    USER LOOKUP
+                    {t('core:user_lookup')}
                   </span>
                 }
                 placement="left"
@@ -1667,9 +1673,10 @@ function App() {
                     style={{
                       fontSize: '14px',
                       fontWeight: 700,
+                      textTransform: 'uppercase',
                     }}
                   >
-                    WALLETS
+                    {t('core:wallet_other')}
                   </span>
                 }
                 placement="left"
@@ -1703,9 +1710,10 @@ function App() {
                       style={{
                         fontSize: '14px',
                         fontWeight: 700,
+                        textTransform: 'uppercase',
                       }}
                     >
-                      YOUR ACCOUNT
+                      {t('core:your_account')}
                     </span>
                   }
                   placement="left"
@@ -1813,9 +1821,10 @@ function App() {
                     style={{
                       fontSize: '14px',
                       fontWeight: 700,
+                      textTransform: 'uppercase',
                     }}
                   >
-                    MINTING STATUS
+                    {t('core:minting_status')}
                   </span>
                 }
                 placement="left"
@@ -1857,9 +1866,10 @@ function App() {
                       style={{
                         fontSize: '14px',
                         fontWeight: 700,
+                        textTransform: 'uppercase',
                       }}
                     >
-                      TUTORIAL
+                      {t('core:tutorial')}
                     </span>
                   }
                   placement="left"
@@ -1894,8 +1904,14 @@ function App() {
             >
               <Tooltip
                 title={
-                  <span style={{ fontSize: '14px', fontWeight: 700 }}>
+                  <span
-                    BACKUP WALLET
+                    style={{
+                      fontSize: '14px',
+                      fontWeight: 700,
+                      textTransform: 'uppercase',
+                    }}
+                  >
+                    {t('core:backup_wallet')}
                   </span>
                 }
                 placement="left"
@@ -2083,6 +2099,7 @@ function App() {
                 {messageQortalRequest?.text1}
               </TextP>
             </Box>
+
             {messageQortalRequest?.text2 && (
               <>
                 <Spacer height="10px" />
@@ -2124,6 +2141,7 @@ function App() {
                   >
                     {messageQortalRequest?.text3}
                   </TextP>
+
                   <Spacer height="15px" />
                 </Box>
               </>
@@ -2158,11 +2176,11 @@ function App() {
 
             <TextP
               sx={{
-                textAlign: 'center',
-                lineHeight: 1.2,
                 fontSize: '16px',
                 fontWeight: 700,
+                lineHeight: 1.2,
                 maxWidth: '90%',
+                textAlign: 'center',
               }}
             >
               {messageQortalRequest?.highlightedText}
@@ -2379,17 +2397,7 @@ function App() {
             >
               {sendqortState?.amount} QORT
             </TextP>
-            {/* <Spacer height="29px" />
 
-          <CustomLabel htmlFor="standard-adornment-password">
-            Confirm Wallet Password
-          </CustomLabel>
-          <Spacer height="5px" />
-          <PasswordField
-            id="standard-adornment-password"
-            value={paymentPassword}
-            onChange={(e) => setPaymentPassword(e.target.value)}
-          /> */}
             <Spacer height="29px" />
             <Box
               sx={{
@@ -2529,7 +2537,7 @@ function App() {
                 setExtstate('create-wallet');
               }}
             >
-              Create account
+              {t('auth:create_account', { postProcess: 'capitalize' })}
             </CustomButton>
           </>
         )}
@@ -2624,7 +2632,7 @@ function App() {
                   fontWeight: 600,
                 }}
               >
-                Authenticate
+                {t('auth:authenticate', { postProcess: 'capitalize' })}
               </TextP>
             </Box>
 
@@ -2632,7 +2640,7 @@ function App() {
 
             <>
               <CustomLabel htmlFor="standard-adornment-password">
-                Wallet Password
+                {t('auth:wallet_password', { postProcess: 'capitalize' })}
               </CustomLabel>
 
               <Spacer height="5px" />
@@ -2656,7 +2664,8 @@ function App() {
                       fontSize: '12px',
                     }}
                   >
-                    {'Using node: '} {currentNode?.url}
+                    {t('auth:node.using', { postProcess: 'capitalize' })}:{' '}
+                    {currentNode?.url}
                   </Typography>
                 </>
               ) : (
@@ -2667,7 +2676,7 @@ function App() {
                       fontSize: '12px',
                     }}
                   >
-                    {'Using public node'}
+                    {t('auth:node.using_public', { postProcess: 'capitalize' })}
                   </Typography>
                 </>
               )}
@@ -2675,7 +2684,7 @@ function App() {
               <Spacer height="20px" />
 
               <CustomButton onClick={authenticateWallet}>
-                Authenticate
+                {t('auth:authenticate', { postProcess: 'capitalize' })}
               </CustomButton>
 
               <ErrorText>{walletToBeDecryptedError}</ErrorText>
@@ -2703,7 +2712,9 @@ function App() {
                 onClick={returnToMain}
               />
             </Box>
+
             <Spacer height="10px" />
+
             <div
               className="image-container"
               style={{
@@ -2731,7 +2742,7 @@ function App() {
                   fontWeight: 600,
                 }}
               >
-                Download Account
+                {t('auth:download_account', { postProcess: 'capitalize' })}
               </TextP>
             </Box>
 
@@ -2740,9 +2751,13 @@ function App() {
             {!walletToBeDownloaded && (
               <>
                 <CustomLabel htmlFor="standard-adornment-password">
-                  Confirm Wallet Password
+                  {t('auth:wallet_password_confirmation', {
+                    postProcess: 'capitalize',
+                  })}
                 </CustomLabel>
+
                 <Spacer height="5px" />
+
                 <PasswordField
                   id="standard-adornment-password"
                   value={walletToBeDownloadedPassword}
@@ -2750,9 +2765,13 @@ function App() {
                     setWalletToBeDownloadedPassword(e.target.value)
                   }
                 />
+
                 <Spacer height="20px" />
+
                 <CustomButton onClick={confirmPasswordToDownload}>
-                  Confirm password
+                  {t('auth:password_confirmation', {
+                    postProcess: 'capitalize',
+                  })}
                 </CustomButton>
                 <ErrorText>{walletToBeDownloadedError}</ErrorText>
               </>
@@ -2764,11 +2783,15 @@ function App() {
                   onClick={async () => {
                     await saveFileToDiskFunc();
                     await showInfo({
-                      message: `Keep your account file secure.`,
+                      message: t('auth:keep_secure', {
+                        postProcess: 'capitalize',
+                      }),
                     });
                   }}
                 >
-                  Download account
+                  {t('auth:download_account', {
+                    postProcess: 'capitalize',
+                  })}
                 </CustomButton>
               </>
             )}
@@ -3024,7 +3047,7 @@ function App() {
                   <Spacer height="17px" />
 
                   <CustomButton onClick={createAccountFunc}>
-                    Create Account
+                    {t('auth:create_account', { postProcess: 'capitalize' })}
                   </CustomButton>
                 </Box>
                 <ErrorText>{walletToBeDownloadedError}</ErrorText>

src/components/GeneralNotifications.tsx

@@ -14,6 +14,7 @@ import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 import { formatDate } from '../utils/time';
 import { useHandlePaymentNotification } from '../hooks/useHandlePaymentNotification';
 import { executeEvent } from '../utils/events';
+import { useTranslation } from 'react-i18next';
 
 export const GeneralNotifications = ({ address }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -31,6 +32,7 @@ export const GeneralNotifications = ({ address }) => {
     setAnchorEl(event.currentTarget);
   };
 
+  const { t } = useTranslation(['core']);
   const theme = useTheme();
 
   return (
@@ -48,9 +50,10 @@ export const GeneralNotifications = ({ address }) => {
                 color: theme.palette.text.primary,
                 fontSize: '14px',
                 fontWeight: 700,
+                textTransform: 'uppercase',
               }}
             >
-              PAYMENT NOTIFICATION
+              {t('core:payment_notification')}
             </span>
           }
           placement="left"

src/components/QMailStatus.tsx

@@ -1,13 +1,14 @@
 import { useMemo } from 'react';
-import EmailIcon from '@mui/icons-material/Email';
 import { useRecoilState } from 'recoil';
 import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global';
 import { isLessThanOneWeekOld } from './Group/QMailMessages';
 import { ButtonBase, Tooltip, useTheme } from '@mui/material';
 import { executeEvent } from '../utils/events';
 import { Mail } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
 
 export const QMailStatus = () => {
+  const { t } = useTranslation(['core']);
   const theme = useTheme();
 
   const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
@@ -63,7 +64,9 @@ export const QMailStatus = () => {
               fontWeight: 700,
             }}
           >
-            Q-MAIL
+            {t('core:q_mail', {
+              postProcess: 'capitalize',
+            })}
           </span>
         }
         placement="left"