Adapt the transaction creation and summary views to the new design gu…

…idelines (#4695)

* 📝 Update grammer and sentences (#4683)

* fix: resolved style issues on send token flow

* fix: resolved all UI issues related to send form flow

* fix: resolved ui issues on vote tx flow

* fix: resolved UI issues on reclaim legacy account tx flow

* fix: resolved deepscan issue

* fix: resolved fee issue on reclaim legacy tx

* fix: resolved unit test on token domain

* fix: resolved unit test on tranaction domain

* fix: resolved unit test on legacy account

* fix: resolved lint issues

* fix: resolved validatorProfile unit tests

* fix: resolved broken test on stakeSummary

* fix: resolved unit test on stakeForm

* fix: resolved unit test on edit stake

* fix: resolved unit test on staking

* fix: updated success modal for reclaim tx

* ♻️ Resolve reclaim transaction bugs

* fix: resolve coverage issues

* fix: resolved comments from Oskar

* fix: resolved deep scan issues

* fix: resolved failing test

* fix: removed unused import

* fix: resolved failing unit tests and coverage

* fix: resolved remaining failing unit test

* ♻️ Address review comments

Co-authored-by: Manu <[email protected]>
Co-authored-by: ManuGowda <[email protected]>

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,9 +17,9 @@ 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.')}
-        buttonText={t('Go to wallet')}
+        headerText={t('Edit account name')}
+        contentText={t('Successfully edited, now you can download the encrypted secret recovery phrase to this effect.')}
+        buttonText={t('Back to wallet')}
         onClose={() => {
           history.push(routes.wallet.path);
         }}

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

@@ -24,15 +24,15 @@ 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`)
     ).toBeInTheDocument();
-    expect(screen.getByText('Go to wallet')).toBeInTheDocument();
-    fireEvent.click(screen.getByText('Go to wallet'));
+    expect(screen.getByText('Back to wallet')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Back to wallet'));
     expect(props.history.push).toHaveBeenCalledTimes(1);
     expect(props.history.push).toHaveBeenCalledWith(routes.wallet.path);
   });

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.css

@@ -12,6 +12,7 @@
   box-sizing: content-box;
   max-width: 365px;
   border-radius: 6px !important;
+  align-items: center !important;
 
   & h1 {
     margin: 0 0 16px 0;
@@ -43,6 +44,10 @@
   & > .avatar {
     margin: 22px auto 0 auto;
   }
+
+  & > form {
+    width: 85%;
+  }
 }
 
 .button {

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

@@ -13,7 +13,13 @@ import styles from './EnterPasswordForm.css';
 const API_ERROR_NAME = 'API_ERROR_NAME';
 
 // eslint-disable-next-line max-statements
-const EnterPasswordForm = ({ onEnterPasswordSuccess, title, encryptedAccount, isDisabled }) => {
+const EnterPasswordForm = ({
+  onEnterPasswordSuccess,
+  title,
+  encryptedAccount,
+  isDisabled,
+  confirmText,
+}) => {
   const { t } = useTranslation();
   const {
     register,
@@ -53,17 +59,17 @@ 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>}
         <p className={styles.accountAddress}>{account?.metadata?.address}</p>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Input
             secureTextEntry
-            size="s"
+            size="l"
             placeholder={t('Enter password')}
             feedback={apiError?.message}
             error={!!apiError}
@@ -76,7 +82,7 @@ const EnterPasswordForm = ({ onEnterPasswordSuccess, title, encryptedAccount, is
             disabled={isDisabled || !formValues.password}
             className={`${styles.button} continue-btn`}
           >
-            {t('Continue')}
+            {t(confirmText || 'Continue')}
           </PrimaryButton>
         </form>
       </BoxContent>