feat: words backup and error handling

cypress/e2e/00-welcome.cy.js

@@ -93,7 +93,7 @@ describe('create a new wallet and back it up', () => {
     cy.findByText('Continue').click();
   })
 
-  it('should create a new wallet', () => {
+  it('should create a new wallet successfully with no backup', () => {
     // Navigate to the "Software Wallet" screen after the warning);
     cy.contains('You can start a new wallet or import data');
 
@@ -169,4 +169,95 @@ describe('create a new wallet and back it up', () => {
     cy.contains('Total: 0.00 HTR', { timeout: 20000 });
     cy.contains(`You haven't done the backup`);
   })
+
+  it.only('should backup words and handle fullnode failure', () => {
+    // Navigate to the "Software Wallet" screen after the warning);
+    cy.contains('You can start a new wallet or import data');
+
+    // Start the "New Wallet" use case
+    cy.findByText('New wallet').click();
+    cy.contains('A new wallet is generated by 24 words');
+
+    // Confirm and continue
+    const continueButton = 'Create my words';
+    cy.get('#confirmWallet').click();
+    cy.findByText(continueButton).click();
+
+    // Confirm we're in the new words screen and enter the backup words flow
+    cy.contains('Your words have been created!');
+    cy.findByText('Backup now').click();
+
+    // Store the words for validating
+    let backupWords = [];
+    cy.get('#hiddenWordsForTest').invoke('text').then(text => {
+      backupWords = text.split(' ');
+    });
+    cy.findByText('Ok, I have saved them').click();
+
+    // Insert the first word correctly
+    let currentIndex = 1;
+    let correctWord = '';
+    cy.get('h2.validation-step-index').invoke('text').then(text => {
+      currentIndex = parseInt(text, 10);
+      correctWord = backupWords[currentIndex - 1];
+      cy.findByText(correctWord).click();
+    })
+
+    // Insert wrong second word
+    cy.get('h2.validation-step-index').invoke('text').then(text => {
+      currentIndex = parseInt(text, 10) || 1;
+      correctWord = backupWords[currentIndex - 1];
+
+      cy.findByText(correctWord)
+        .closest('section')
+        .children() // Get all child divs
+        .filter((index, element) => {
+          return element.innerText !== correctWord; // Keep only divs where key is not correct
+        })
+        .first()
+        .click();
+    })
+    cy.contains('Wrong word.');
+
+    // Restart the process and select all correct words
+    cy.findByText('Click here to start the process again.').click();
+    cy.findByText('Ok, I have saved them').click();
+    for (let i = 0; i < 5; i++) {
+      cy.get('h2.validation-step-index').invoke('text').then(text => {
+        currentIndex = parseInt(text, 10);
+        correctWord = backupWords[currentIndex - 1];
+        cy.findByText(correctWord).click();
+      })
+    }
+
+    // Fill the password field properly
+    cy.get('input[placeholder="Password"]').clear();
+    cy.get('input[placeholder="Confirm Password"]').clear();
+    cy.get('input[placeholder="Password"]').type(passwd);
+    cy.get('input[placeholder="Confirm Password"]').type(passwd);
+    cy.findByText('Next').click();
+
+    // Fill the PIN field properly, and prepare a stub not to wait for the fullnode response
+    cy.get('input[placeholder="PIN"]').clear();
+    cy.get('input[placeholder="Confirm PIN"]').clear();
+    cy.get('input[placeholder="PIN"]').type(pin);
+    cy.get('input[placeholder="Confirm PIN"]').type(pin);
+
+    cy.intercept('*/thin_wallet/address_history*', (req) => {
+      req.reply({
+        statusCode: 500,
+        body: {
+          history: [],
+        },
+      });
+    });
+
+    cy.findByText('Next').click();
+
+    // PIN was successful
+    cy.contains('Loading transactions'); // For a few seconds this screen will be shown
+
+    // There is a timeout in place that needs to be waited. The error should be handled gracefully
+    cy.contains('Request failed', { timeout: 15000 });
+  })
 })

src/components/ModalBackupWords.js

@@ -244,6 +244,9 @@ class ModalBackupWords extends React.Component {
               {renderWords(6)}
             </tbody>
           </table>
+          <div id="hiddenWordsForTest" style={{ display: 'none' }} >
+            {this.state.words}
+          </div>
         </div>
       )
     }