📝 Update grammer and sentences (#4683)

libs/wcm/constants/permissions.js

@@ -1,5 +1,5 @@
 export const SIGNING_METHODS = {
-  SIGN_TRANSACTION: { key: 'sign_transaction', title: 'Sign transaction' },
+  SIGN_TRANSACTION: { key: 'sign_transaction', title: 'Signature request' },
   SIGN_MESSAGE: { key: 'sign_message', title: 'Sign message' },
 };
 

src/modules/account/components/AccountRow/AccountRow.css

@@ -1,14 +1,14 @@
 @import '../../../../../setup/react/app/mixins.css';
 
-.accountWraper:last-child {
+.accountWrapper:last-child {
   border-bottom: none;
 }
 
-.accountWraper:hover {
+.accountWrapper:hover {
   opacity: 0.8;
 }
 
-.accountWraper {
+.accountWrapper {
   width: 100%;
   display: flex;
   flex-direction: row;

src/modules/account/components/AccountRow/AccountRow.js

@@ -13,7 +13,7 @@ function AccountRow({ account, onSelect, onRemove, truncate }) {
     <div
       key={address}
       data-testid={address}
-      className={styles.accountWraper}
+      className={styles.accountWrapper}
       onClick={() => onSelect(account)}
     >
       <WalletVisual address={address} size={40} />

src/modules/account/components/AddAccountByFile/AddAccountByFile.test.js

@@ -37,8 +37,8 @@ beforeEach(() => {
 });
 
 describe('Add account by file flow', () => {
-  it('Should successfull go though the flow', async () => {
-    expect(screen.getByText('Add account')).toBeTruthy();
+  it('Should successfully go though the flow', async () => {
+    expect(screen.getByText('Add your account')).toBeTruthy();
     expect(screen.getByText('Restore your encrypted secret recovery phrase.')).toBeTruthy();
     expect(screen.getByText('Continue')).toBeTruthy();
     expect(screen.getByText('Go back')).toBeTruthy();
@@ -53,8 +53,8 @@ describe('Add account by file flow', () => {
     fireEvent(inputField, pasteEvent);
     fireEvent.click(screen.getByText('Continue'));
 
-    expect(screen.getByText('Enter your password')).toBeTruthy();
-    expect(screen.getByText('Please provide your device password to backup the recovery phrase.')).toBeTruthy();
+    expect(screen.getByText('Enter your account password')).toBeTruthy();
+    expect(screen.getByText('Please enter your account password to backup the secret recovery phrase.')).toBeTruthy();
     expect(screen.getByText(mockSavedAccounts[0].metadata.name)).toBeTruthy();
     expect(screen.getByText(mockSavedAccounts[0].metadata.address)).toBeTruthy();
 
@@ -63,7 +63,7 @@ describe('Add account by file flow', () => {
     fireEvent.click(screen.getByText('Continue'));
     await waitFor(() => {
       expect(screen.getByText('Perfect! You\'re all set')).toBeTruthy();
-      fireEvent.click(screen.getByText('Continue to Dashboard'));
+      fireEvent.click(screen.getByText('Continue to dashboard'));
       expect(props.history.push).toBeCalled();
     });
   });

src/modules/account/components/AddAccountBySecretRecovery/AddAccountBySecretRecovery.test.js

@@ -40,7 +40,7 @@ beforeEach(() => {
 
 describe('Add account by secret recovery phrase flow', () => {
   it('Should successfully go though the flow', async () => {
-    expect(screen.getByText('Add account')).toBeTruthy();
+    expect(screen.getByText('Add your account')).toBeTruthy();
     expect(screen.getByText('Enter your secret recovery phrase to manage your account.')).toBeTruthy();
     expect(screen.getByText('Continue')).toBeTruthy();
     expect(screen.getByText('Go Back')).toBeTruthy();
@@ -71,7 +71,7 @@ describe('Add account by secret recovery phrase flow', () => {
       expect(screen.getByText('You can now download your encrypted secret recovery phrase and use it to add your account on other devices.')).toBeTruthy();
       expect(screen.getByText('Download')).toBeTruthy();
 
-      fireEvent.click(screen.getByText('Continue to Dashboard'));
+      fireEvent.click(screen.getByText('Continue to dashboard'));
 
       expect(props.history.push).toBeCalled();
     });

src/modules/account/components/AddAccountForm/AddAccountForm.js

@@ -63,7 +63,7 @@ const AddAccountFormContainer = ({
     <div className={`${styles.addAccount}`}>
       <div className={`${styles.wrapper} ${grid['col-xs-12']}`}>
         <div className={`${styles.titleHolder} ${grid['col-xs-12']}`}>
-          <h1>{t('Add account')}</h1>
+          <h1>{t('Add your account')}</h1>
           <p>{t('Enter your secret recovery phrase to manage your account.')}</p>
         </div>
         <form onSubmit={onFormSubmit}>
@@ -75,7 +75,7 @@ const AddAccountFormContainer = ({
               </fieldset>
             )}
             <fieldset>
-              <label>{t('Secret recovery phrase')}</label>
+              <label>{t('Secret recovery phrase (12-24 mnemonic phrases supported)')}</label>
               <PassphraseInput
                 inputsLength={passphraseArray?.length > 12 ? 24 : 12}
                 maxInputsLength={24}

src/modules/account/components/AddAccountForm/AddAccountForm.test.js

@@ -22,7 +22,7 @@ beforeEach(() => {
 
 describe('AddAccountForm', () => {
   it('should render successfully', () => {
-    expect(screen.getByText('Add account')).toBeTruthy();
+    expect(screen.getByText('Add your account')).toBeTruthy();
     expect(
       screen.getByText('Enter your secret recovery phrase to manage your account.')
     ).toBeTruthy();

src/modules/account/components/AddAccountOptions/AddAccountOptions.js

@@ -27,18 +27,18 @@ const AddAccountOptions = ({ history }) => {
           className={`${styles.wrapper} ${grid['col-xs-12']} ${grid['col-md-12']} ${grid['col-lg-10']}`}
         >
           <div className={`${styles.titleHolder} ${grid['col-xs-10']}`}>
-            <h1>{t('Add account')}</h1>
+            <h1>{t('Add your account')}</h1>
             <p>
-              {t('Select the applicable mode.')}
+              {t('Choose an option to add your account to Lisk wallet.')}
             </p>
             <div className={styles.selectRowWrapper}>
               <AddAccountOptionButton
-                text="Secret recovery phrase"
+                text={t('Secret recovery phrase')}
                 iconName="secretPassphrase"
                 onClick={() => history.push(routes.addAccountBySecretRecovery.path)}
               />
               <AddAccountOptionButton
-                text="Restore from file"
+                text={t('Restore from backup')}
                 iconName="accountUpload"
                 onClick={() => history.push(routes.addAccountByFile.path)}
               />

src/modules/account/components/AddAccountOptions/AddAccountOptions.test.js

@@ -30,10 +30,10 @@ beforeEach(() => {
 
 describe('Add Account Choice', () => {
   it('Should render the add account choice page', async () => {
-    expect(screen.getByText('Add account')).toBeTruthy();
-    expect(screen.getByText('Select the applicable mode.')).toBeTruthy();
+    expect(screen.getByText('Add your account')).toBeTruthy();
+    expect(screen.getByText('Choose an option to add your account to Lisk wallet.')).toBeTruthy();
     expect(screen.getByText('Don’t have a Lisk account yet?')).toBeTruthy();
-    expect(screen.getByText('Restore from file')).toBeTruthy();
+    expect(screen.getByText('Restore from backup')).toBeTruthy();
     expect(screen.getByText('Secret recovery phrase')).toBeTruthy();
   });
 
@@ -43,7 +43,7 @@ describe('Add Account Choice', () => {
   });
 
   it('should redirect to /account/add/add/by-file', async () => {
-    fireEvent.click(screen.getByText('Restore from file'));
+    fireEvent.click(screen.getByText('Restore from backup'));
     expect(props.history.push).toBeCalled();
   });
 });

src/modules/account/components/BackupRecoveryPhraseFlow/BackupRecoveryPhraseFlow.js

@@ -36,10 +36,10 @@ const BackupRecoveryPhraseFlow = ({ history }) => {
           <EnterPasswordForm
             onEnterPasswordSuccess={onEnterPasswordSuccess}
           />
-          <SavePassphrase passphrase={passphrase} />
+          <SavePassphrase passphrase={passphrase} title={t('Backup your secret recovery phrase')} />
           <ConfirmPassphrase passphrase={passphrase} />
           <SetPasswordSuccess
-            buttonText={t('Continue to Wallet')}
+            buttonText={t('Continue to wallet')}
             encryptedPhrase={account}
             onClose={onComplete}
           />

src/modules/account/components/BackupRecoveryPhraseFlow/BackupRecoveryPhraseFlow.test.js

@@ -39,9 +39,9 @@ describe('Backup account recovery phrase flow', () => {
 
   it('Should successfully go though the flow', async () => {
     renderWithRouter(BackupRecoveryPhraseFlow, props);
-    expect(screen.getByText('Enter your password')).toBeTruthy();
+    expect(screen.getByText('Enter your account password')).toBeTruthy();
     expect(
-      screen.getByText('Please provide your device password to backup the recovery phrase.')
+      screen.getByText('Please enter your account password to backup the secret recovery phrase.')
     ).toBeTruthy();
     expect(screen.getByTestId('password')).toBeTruthy();
     expect(screen.getByText('Continue')).toBeTruthy();
@@ -51,13 +51,13 @@ describe('Backup account recovery phrase flow', () => {
     fireEvent.click(screen.getByText('Continue'));
 
     await waitFor(() => {
-      expect(screen.getByText('Save your secret recovery phrase')).toBeTruthy();
+      expect(screen.getByText('Backup your secret recovery phrase')).toBeTruthy();
       expect(
         screen.getByText('Keep it safe as it is the only way to access your wallet.')
       ).toBeTruthy();
       expect(
         screen.getByText(
-          'Please carefully write down these 12 words and store them in a safe place.'
+          'Please write down these 12 words carefully, and store them in a safe place.'
         )
       ).toBeTruthy();
       expect(screen.getByText('Copy')).toBeTruthy();
@@ -90,7 +90,7 @@ describe('Backup account recovery phrase flow', () => {
       ).toBeTruthy();
       expect(screen.getByText('Download')).toBeTruthy();
 
-      fireEvent.click(screen.getByText('Continue to Wallet'));
+      fireEvent.click(screen.getByText('Continue to wallet'));
     });
   });
 });

src/modules/account/components/EditAccount/EditAccount.js

@@ -17,8 +17,8 @@ const EditAccount = ({ history }) => {
       <EditAccountForm onBack={history.goBack} />
       <SetPasswordSuccess
         encryptedPhrase={currentAccount}
-        headerText={t('Edit account name successful')}
-        contentText={t('You can now download encrypted secret recovery phrase to this effect.')}
+        headerText={t('Edit account name')}
+        contentText={t('Successfully edited, now you can download the encrypted secret recovery phrase to this effect.')}
         buttonText={t('Go to wallet')}
         onClose={() => {
           history.push(routes.wallet.path);

src/modules/account/components/EditAccount/EditAccount.test.js

@@ -24,9 +24,9 @@ describe('Edit Account', () => {
     await waitFor(() => {
       fireEvent.click(screen.getByText('Done'));
     });
-    expect(screen.getByText('Edit account name successful')).toBeInTheDocument();
+    expect(screen.getByText('Edit account name')).toBeInTheDocument();
     expect(
-      screen.getByText('You can now download encrypted secret recovery phrase to this effect.')
+      screen.getByText('Successfully edited, now you can download the encrypted secret recovery phrase to this effect.')
     ).toBeInTheDocument();
     expect(
       screen.getByText(`encrypted_secret_recovery_phrase_${updatedAccountName}.json`)

src/modules/account/components/RemoveAccount/RemoveAccount.test.js

@@ -34,7 +34,7 @@ describe('Remove account', () => {
 
   it('Should successfully go though the flow', async () => {
     expect(screen.getByText('Remove Account?')).toBeTruthy();
-    expect(screen.getByText('This account will no longer be stored on this device. You can backup your secret recovery phrase before you remove it.')).toBeTruthy();
+    expect(screen.getByText('This account will no longer be stored on this device. You can backup your secret recovery phrase before removing it.')).toBeTruthy();
     expect(screen.getByText('encrypted_secret_recovery_phrase.json')).toBeTruthy();
     expect(screen.getByText('Download')).toBeTruthy();
     expect(screen.getByText('Cancel')).toBeTruthy();
@@ -45,9 +45,9 @@ describe('Remove account', () => {
     await waitFor(() => {
       expect(screen.getByText('Account was removed')).toBeTruthy();
       expect(screen.getByTestId('accountRemovedIcon')).toBeTruthy();
-      expect(screen.getByText('Continue to Manage Accounts')).toBeTruthy();
+      expect(screen.getByText('Continue to manage accounts')).toBeTruthy();
 
-      fireEvent.click(screen.getByText('Continue to Manage Accounts'));
+      fireEvent.click(screen.getByText('Continue to manage accounts'));
     });
   });
 

src/modules/account/components/RemoveConfirmation/RemoveConfirmation.js

@@ -33,7 +33,7 @@ const RemoveConfirmation = ({
       <p className={styles.accountAddress}>{account?.metadata?.address}</p>
       <p className={styles.subheader}>
         {t(
-          'This account will no longer be stored on this device. You can backup your secret recovery phrase before you remove it.',
+          'This account will no longer be stored on this device. You can backup your secret recovery phrase before removing it.',
         )}
       </p>
       <DownloadJSON

src/modules/account/components/RemoveConfirmation/RemoveConfirmation.test.js

@@ -4,7 +4,7 @@ import { renderWithRouter } from 'src/utils/testHelpers';
 import RemoveConfirmationScreen from './RemoveConfirmation';
 
 const recoveryPhrase = 'target cancel solution recipe vague faint bomb convince pink vendor fresh patrol';
-const message = 'This account will no longer be stored on this device. You can backup your secret recovery phrase before you remove it.';
+const message = 'This account will no longer be stored on this device. You can backup your secret recovery phrase before removing it.';
 const goBackFn = jest.fn();
 const props = {
   history: {
@@ -48,7 +48,7 @@ describe('RemoveConfirmationScreen', () => {
     fireEvent.click(screen.getByText('Cancel'));
   });
 
-  it('Should abort the removal when cancel with goback option', async () => {
+  it('Should abort the removal when cancel with go back option', async () => {
     const removeProps = {
       ...props,
       location: { hash: '' },
@@ -64,7 +64,7 @@ describe('RemoveConfirmationScreen', () => {
     expect(goBackFn).toHaveBeenCalled();
   });
 
-  it('Should successfully remove an accouunt', async () => {
+  it('Should successfully remove an account', async () => {
     expect(removeScreen.getByText('Remove Account?')).toBeTruthy();
     expect(
       removeScreen.getByText(message),

src/modules/account/components/RemoveSuccess/RemoveSuccess.js

@@ -14,7 +14,7 @@ const RemoveSuccess = ({ onComplete }) => {
         <Icon name="accountRemoved" data-testid="accountRemovedIcon" />
       </div>
       <div className={styles.buttonRow}>
-        <PrimaryButton className={styles.button} onClick={onComplete}>{t('Continue to Manage Accounts')}</PrimaryButton>
+        <PrimaryButton className={styles.button} onClick={onComplete}>{t('Continue to manage accounts')}</PrimaryButton>
       </div>
     </>
   );

src/modules/account/components/RemoveSuccess/RemoveSuccess.test.js

@@ -18,8 +18,8 @@ describe('Remove success component', () => {
   it('should render properly', async () => {
     expect(screen.getByText('Account was removed')).toBeTruthy();
     expect(screen.getByTestId('accountRemovedIcon')).toBeTruthy();
-    expect(screen.getByText('Continue to Manage Accounts')).toBeTruthy();
-    fireEvent.click(screen.getByText('Continue to Manage Accounts'));
+    expect(screen.getByText('Continue to manage accounts')).toBeTruthy();
+    fireEvent.click(screen.getByText('Continue to manage accounts'));
     await waitFor(() => {
       expect(props.onComplete).toBeCalled();
     });

src/modules/auth/components/ChooseAvatar/chooseAvatar.test.js

@@ -10,10 +10,10 @@ import ChooseAvatar from './chooseAvatar';
 describe.skip('Register Process - Choose Avatar', () => {
   let wrapper;
 
-  const crypotObj = window.crypto || window.msCrypto;
+  const cryptoObj = window.crypto || window.msCrypto;
   const passphrases = [...Array(5)].map(() =>
     generatePassphraseFromSeed({
-      seed: [...crypotObj.getRandomValues(new Uint16Array(16))].map(x => (`00${(x % 256).toString(16)}`).slice(-2)),
+      seed: [...cryptoObj.getRandomValues(new Uint16Array(16))].map(x => (`00${(x % 256).toString(16)}`).slice(-2)),
     }));
   const accounts = passphrases.map(pass => ({
     address: extractAddressFromPassphrase(pass),

src/modules/auth/components/EnterPasswordForm/EnterPasswordForm.js

@@ -53,9 +53,9 @@ const EnterPasswordForm = ({ onEnterPasswordSuccess, title, encryptedAccount, is
   return (
     <Box className={styles.container}>
       <BoxContent className={styles.content}>
-        <h1>{t('Enter your password')}</h1>
+        <h1>{t('Enter your account password')}</h1>
         <p className={styles.subheader}>
-          {t(title || 'Please provide your device password to backup the recovery phrase.')}
+          {title || t('Please enter your account password to backup the secret recovery phrase.')}
         </p>
         <WalletVisual className={styles.avatar} address={account?.metadata?.address} />
         {account?.metadata?.name && <p className={styles.accountName}>{account?.metadata?.name}</p>}

src/modules/auth/components/RestoreAccountForm/RestoreAccountForm.js

@@ -34,7 +34,7 @@ const RestoreAccountForm = ({ onBack, nextStep }) => {
   return (
     <>
       <div className={styles.titleHolder}>
-        <h1>{t('Add account')}</h1>
+        <h1>{t('Add your account')}</h1>
         <p>{t('Restore your encrypted secret recovery phrase.')}</p>
       </div>
       <div className={styles.fullWidth}>

src/modules/auth/components/RestoreAccountForm/RestoreAccountForm.test.js

@@ -53,7 +53,7 @@ describe('Restore account form component', () => {
     expect(wrapper.find('.feedback').text()).toBeTruthy();
   });
 
-  it('should show feedback erro text when uploading incorrect JSON file', async () => {
+  it('should show feedback error text when uploading incorrect JSON file', async () => {
     jest.spyOn(global, 'FileReader').mockImplementation(function () {
       this.readAsText = jest.fn();
     });

src/modules/auth/components/SavePassphrase/SavePassphrase.js

@@ -6,11 +6,11 @@ import PassphraseBackup from '@auth/components/passphraseBackup';
 import registerStyles from '../Signup/register.css';
 
 const SavePassphrase = ({
-  t, passphrase, prevStep, nextStep,
+  t, passphrase, prevStep, nextStep, title,
 }) => (
   <>
     <div className={registerStyles.titleHolder}>
-      <h1>{t('Save your secret recovery phrase')}</h1>
+      <h1>{title || t('Save your secret recovery phrase')}</h1>
       <p>{t('Keep it safe as it is the only way to access your wallet.')}</p>
     </div>
     <div

src/modules/auth/components/SetPasswordForm/SetPasswordForm.js

@@ -63,10 +63,10 @@ function SetPasswordForm({ onSubmit, recoveryPhrase, customDerivationPath }) {
   return (
     <div data-testid="setPasswordFormContainer" className={styles.container}>
       <div className={`${styles.titleHolder} ${grid['col-xs-12']}`}>
-        <h1>{t('Set up device password')}</h1>
+        <h1>{t('Set up your account password')}</h1>
         <p>
           {t(
-            'This password is used to encrypt your secret recovery phrase, which will be used for managing your account.'
+            'This password will be used for decrypting your account every time you initiate any transaction from your wallet, and also during backup or removal of an account from the wallet.'
           )}
         </p>
       </div>

src/modules/auth/components/SetPasswordForm/SetPasswordForm.test.js

@@ -131,7 +131,7 @@ describe('Set Password Form validation should work', () => {
     });
   });
 
-  it('should display an error if confirm password is not the same as the passowrd', async () => {
+  it('should display an error if confirm password is not the same as the password', async () => {
     makeSubmitActive();
     fireEvent.change(password, { target: { value: 'Password1$' } });
     fireEvent.change(cPassword, { target: { value: 'Password1@' } });

src/modules/auth/components/SetPasswordSuccess/SetPasswordSuccess.js

@@ -33,7 +33,7 @@ function SetPasswordSuccess({
         </p>
         <DownloadJSON fileName={fileName} encryptedPhrase={encryptedPhrase} />
         <PrimaryButton className={styles.continueButton} onClick={onContinue}>
-          {buttonText || t('Continue to Dashboard')}
+          {buttonText || t('Continue to dashboard')}
         </PrimaryButton>
       </BoxContent>
     </Box>