Task/token flow tests (#695)

* test(token-e2e): initial commit

* test(token-e2e): lint

* test: function Enhancements

* test: linting

* test: remove custom command type decs

* test: more tests

* test: linting

* test: working with capsule still needs rounding issues sorting

* test: enhancements

* test: enhancements

* test: check enhancements

* test: add brdige logic

* test: share instance rather than recreating on each test

* test: minor bug fix, add comment

* test: ensure working against capsule

* test: teardown functions in place

* test: linting

* test: completion of first iteration of happy paths

* test: lint

* test: typo change

* test: tweaks

* test: fix merge issues

* test: lint

* test: env variable handling and cleanup

* test: lint

* test: enhancements to logging to aid debugging

* test: lint

* test: ehancements after feedback

* test: lint

* Update apps/token-e2e/src/support/wallet-teardown.functions.js

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* test: skipping non-essential tests to reduce time

* test: typo

* test: ci test fails coz capsule runs quicker their - disabled this one check to help

* test: reduction of coverage to help PR time

* test: disable infinte scroll test since capsule blockchain data to small

* test: corrected test: staked tokens field value no longer in a fixed state

* test: clearup to stop test bleed across projects plus bugfix

* test: lint

* test: update .env for trading

* Revert "test: update .env for trading"

This reverts commit 741743e4d2.

Co-authored-by: Dexter <dexter.edwards93@gmail.com>

apps/explorer-e2e/src/integration/blocks-page.feature

@@ -29,8 +29,10 @@ Feature: Blocks Page
     Then previous button is disabled
     And I am on the second block when I click next
 
-  Scenario: Infinite scroll shows at least 300 new blocks
+# Skipping these tests for time being - since blockchain in capsule 
-    Given I am on the homepage
+# is now too small to show historical data - re-enable once addressed 
-    When I navigate to the blocks page
+  # Scenario: Infinite scroll shows at least 300 new blocks
-    And I scroll down to the last block on the page
+  #   Given I am on the homepage
-    Then I can expect to see at least 100 blocks if i scroll 7 times
+  #   When I navigate to the blocks page
+  #   And I scroll down to the last block on the page
+  #   Then I can expect to see at least 100 blocks if i scroll 7 times

apps/explorer-e2e/src/support/pages/home-page.ts

@@ -57,7 +57,7 @@ export default class HomePage extends BasePage {
       .should('match', /\d+d \d+h \d+m \d+s/i);
     cy.getByTestId(this.statsValue).eq(4).should('have.text', '2');
     cy.getByTestId(this.statsValue).eq(5).should('have.text', '0');
-    cy.getByTestId(this.statsValue).eq(6).should('have.text', '0.00');
+    cy.getByTestId(this.statsValue).eq(6).should('not.be.empty');
     cy.getByTestId(this.statsValue).eq(7).should('have.text', '0');
     cy.getByTestId(this.statsValue).eq(8).should('have.text', '0');
     cy.getByTestId(this.statsValue).eq(9).should('have.text', '0');

apps/token-e2e/cypress.config.js

@@ -14,4 +14,20 @@ module.exports = defineConfig({
     screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
     chromeWebSecurity: false,
   },
+  env: {
+    ethProviderUrl: 'http://localhost:8545/',
+    ethWalletPublicKey: '0xEe7D375bcB50C26d52E1A4a472D8822A2A22d94F',
+    ethStakingBridgeContractAddress:
+      '0x9135f5afd6F055e731bca2348429482eE614CFfA',
+    vegaWalletName: 'capsule_wallet',
+    vegaWalletLocation: '~/.vegacapsule/testnet/wallet',
+    vegaWalletPassphrase: '123',
+    vegaWalletMnemonic:
+      'ozone access unlock valid olympic save include omit supply green clown session',
+    vegaWalletPublicKey:
+      '02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65',
+    vegaWalletPublicKeyShort: '02ecea…2f65',
+    vegaTokenContractAddress: '0xF41bD86d462D36b997C0bbb4D97a0a3382f205B7',
+    vegaTokenAddress: '0x67175Da1D5e966e40D11c4B2519392B2058373de',
+  },
 });

apps/token-e2e/src/data/vegaToken.json

@@ -1,4 +0,0 @@
-{
-  "tokenAddress": "0x67175Da1D5e966e40D11c4B2519392B2058373de",
-  "vestingContract": "0xF41bD86d462D36b997C0bbb4D97a0a3382f205B7"
-}

apps/token-e2e/src/fixtures/wallet/passphrase

@@ -0,0 +1 @@
+123

apps/token-e2e/src/fixtures/wallet/recovery

@@ -0,0 +1 @@
+ozone access unlock valid olympic save include omit supply green clown session

apps/token-e2e/src/integration/flow/staking-flow.cy.js

@@ -0,0 +1,338 @@
+/// <reference types="cypress" />
+import navigation from '../../locators/navigation.locators';
+import staking from '../../locators/staking.locators';
+import wallet from '../../locators/wallet.locators';
+import '../../support/staking.functions';
+import '../../support/vega-wallet.functions';
+import '../../support/eth-wallet.functions';
+import '../../support/wallet-teardown.functions';
+
+const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
+
+context('Staking Tab - with eth and vega wallets connected', function () {
+  before('visit staking tab and connect vega wallet', function () {
+    cy.vega_wallet_import();
+    cy.visit('/');
+    cy.get(navigation.section, { timeout: 20000 }).should('be.visible');
+    cy.vega_wallet_connect();
+    cy.vega_wallet_set_specified_approval_amount('1000');
+    cy.reload();
+    cy.get(navigation.section, { timeout: 20000 }).should('be.visible');
+    cy.ethereum_wallet_connect();
+    cy.get(navigation.staking).first().click();
+    cy.get(navigation.spinner, { timeout: 20000 }).should('not.exist');
+    cy.get(staking.validatorNames).first().invoke('text').as('validatorName');
+    cy.get(staking.validatorNames)
+      .last()
+      .invoke('text')
+      .as('otherValidatorName');
+  });
+
+  describe('Eth wallet - contains VEGA tokens', function () {
+    beforeEach(
+      'teardown wallet & drill into a specific validator',
+      function () {
+        cy.vega_wallet_teardown();
+        cy.get(navigation.staking).first().click();
+      }
+    );
+
+    it('Able to stake against a validator', function () {
+      cy.staking_page_associate_tokens('3');
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+      cy.ethereum_wallet_check_associated_value_is('3.0');
+      cy.ethereum_wallet_check_associated_vega_key_value_is(
+        vegaWalletPublicKeyShort,
+        '3.000000000000000000'
+      );
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('2');
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.staking_validator_page_check_stake_next_epoch_value('2.0');
+      cy.staking_validator_page_check_stake_this_epoch_value('2.0');
+    });
+
+    it('Able to stake against mulitple validators', function () {
+      cy.staking_page_associate_tokens('5');
+      cy.vega_wallet_check_unstaked_value_is('5.000000000000000000');
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('2');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.get(navigation.staking).first().click();
+      cy.get(staking.validatorNames).contains(this.otherValidatorName).click();
+      cy.staking_validator_page_add_stake('1');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.otherValidatorName,
+        '1.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
+    });
+
+    it.skip('Able to remove part of a stake against a validator', function () {
+      cy.staking_page_associate_tokens('4');
+      cy.vega_wallet_check_unstaked_value_is('4.000000000000000000');
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('3');
+      cy.staking_validator_page_check_stake_next_epoch_value('3.0');
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '3.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
+
+      cy.get(navigation.staking).first().click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_removeStake('1');
+      cy.staking_validator_page_check_stake_next_epoch_value('2.0');
+      cy.staking_validator_page_check_stake_this_epoch_value('3.0');
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.vega_wallet_check_validator_stake_this_epoch_value_is(
+        this.validatorName,
+        '3.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.staking_validator_page_check_stake_next_epoch_value('2.0');
+      cy.staking_validator_page_check_stake_this_epoch_value('2.0');
+    });
+
+    it('Able to remove a full stake against a validator', function () {
+      cy.staking_page_associate_tokens('3');
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('1');
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '1.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
+
+      cy.get(navigation.staking).first().click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_removeStake('1');
+      cy.staking_validator_page_check_stake_next_epoch_value('0.0');
+
+      cy.vega_wallet_check_validator_stake_this_epoch_value_is(
+        this.validatorName,
+        '1.000000000000000000'
+      );
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '0.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+      cy.staking_validator_page_check_stake_next_epoch_value('0.0');
+      cy.staking_validator_page_check_stake_this_epoch_value('0.0');
+      cy.vega_wallet_check_validator_no_longer_showing(this.validatorName);
+    });
+
+    it.skip('Unable to remove a stake with a negative value for a validator', function () {
+      cy.staking_page_associate_tokens('3');
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('2');
+      cy.staking_validator_page_check_stake_next_epoch_value('2.0');
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
+
+      cy.get(navigation.staking).first().click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+      cy.get(staking.removeStakeRadioButton).click({ force: true });
+      cy.get(staking.tokenAmountInput).type('-0.1');
+      cy.contains('Waiting for next epoch to start', { timeout: 10000 });
+      cy.get(staking.tokenInputSubmit)
+        .should('be.disabled', { timeout: 8000 })
+        .and('contain', `Remove -0.1 $VEGA tokens at the end of epoch`)
+        .and('be.visible');
+    });
+
+    it.skip('Unable to remove a stake greater than staked amount next epoch for a validator', function () {
+      cy.staking_page_associate_tokens('3');
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('2');
+      cy.staking_validator_page_check_stake_next_epoch_value('2.0');
+      cy.vega_wallet_check_validator_stake_next_epoch_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
+
+      cy.get(navigation.staking).first().click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+      cy.get(staking.removeStakeRadioButton).click({ force: true });
+      cy.get(staking.tokenAmountInput).type(4);
+      cy.contains('Waiting for next epoch to start', { timeout: 10000 });
+      cy.get(staking.tokenInputSubmit)
+        .should('be.disabled', { timeout: 8000 })
+        .and('contain', `Remove 4 $VEGA tokens at the end of epoch`)
+        .and('be.visible');
+    });
+
+    it.skip('Disassociating all tokens - removes all staked tokens', function () {
+      cy.staking_page_associate_tokens('3');
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('2');
+      cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.get(navigation.staking).first().click();
+      cy.staking_page_disassociate_all_tokens();
+      cy.ethereum_wallet_check_associated_vega_key_is_no_longer_showing(
+        vegaWalletPublicKeyShort
+      );
+      cy.ethereum_wallet_check_associated_value_is('0.0');
+      cy.vega_wallet_check_associated_value_is('0.000000000000000000');
+      cy.vega_wallet_check_validator_no_longer_showing(this.validatorName);
+    });
+
+    it('Disassociating some tokens - prioritizes unstaked tokens', function () {
+      cy.staking_page_associate_tokens('3');
+      cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
+
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.get(staking.validatorNames).contains(this.validatorName).click();
+
+      cy.staking_validator_page_add_stake('2');
+      cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+      cy.get(navigation.staking).first().click();
+      cy.staking_page_disassociate_tokens('1');
+      cy.ethereum_wallet_check_associated_value_is('2.0');
+      cy.vega_wallet_check_associated_value_is('2.000000000000000000');
+      cy.vega_wallet_check_validator_staked_value_is(
+        this.validatorName,
+        '2.000000000000000000'
+      );
+    });
+
+    after(
+      'teardown wallet so state/results dont bleed into other test suites',
+      function () {
+        cy.vega_wallet_teardown();
+      }
+    );
+  });
+
+  cy.staking_validator_page_check_stake_next_epoch_value = (expectedVal) => {
+    cy.highlight(
+      `Checking Staking Page - Validator Stake Next Epoch Value is ${expectedVal}`
+    );
+    cy.get(staking.stakeNextEpochValue, { timeout: 10000 })
+      .contains(expectedVal, { timeout: 10000 })
+      .should('be.visible');
+  };
+
+  cy.staking_validator_page_check_stake_this_epoch_value = (expectedVal) => {
+    cy.highlight(
+      `Checking Staking Page - Validator Stake This Epoch Value is ${expectedVal}`
+    );
+    cy.get(staking.stakeThisEpochValue, { timeout: 10000 })
+      .contains(expectedVal, { timeout: 10000 })
+      .should('be.visible');
+  };
+
+  cy.vega_wallet_check_validator_stake_next_epoch_value_is = (
+    validatorName,
+    expectedVal
+  ) => {
+    cy.highlight(
+      `Checking vega wallet - Stake Next Epoch Value for ${validatorName} is ${expectedVal}`
+    );
+    cy.get(wallet.vegawallet).within(() => {
+      cy.contains(`${validatorName} (Next epoch)`, { timeout: 40000 })
+        .siblings()
+        .contains(expectedVal, { timeout: 40000 })
+        .should('be.visible');
+    });
+  };
+
+  cy.vega_wallet_check_validator_stake_this_epoch_value_is = (
+    validatorName,
+    expectedVal
+  ) => {
+    cy.highlight(
+      `Checking vega wallet - Stake This Epoch Value for ${validatorName} is ${expectedVal}`
+    );
+    cy.get(wallet.vegawallet).within(() => {
+      cy.contains(`${validatorName} (This Epoch)`, { timeout: 40000 })
+        .siblings()
+        .contains(expectedVal, { timeout: 40000 })
+        .should('be.visible');
+    });
+  };
+
+  cy.vega_wallet_check_validator_no_longer_showing = (validatorName) => {
+    cy.highlight(
+      `Checking Validator and therefore stake removed for ${validatorName}`
+    );
+    cy.get(wallet.vegawallet).within(() => {
+      cy.contains(`${validatorName}`, { timeout: 40000 }).should('not.exist', {
+        timeout: 40000,
+      });
+    });
+  };
+
+  cy.vega_wallet_check_validator_staked_value_is = (
+    validatorName,
+    expectedVal
+  ) => {
+    cy.highlight(
+      `Checking Validator Stake Value for ${validatorName} is ${expectedVal}`
+    );
+    cy.get(wallet.vegawallet).within(() => {
+      cy.contains(`${validatorName}`, { timeout: 40000 })
+        .siblings()
+        .contains(expectedVal, { timeout: 40000 })
+        .should('be.visible');
+    });
+  };
+});

apps/token-e2e/src/integration/flow/token-association-flow.cy.js

@@ -0,0 +1,118 @@
+/// <reference types="cypress" />
+import navigation from '../../locators/navigation.locators';
+import staking from '../../locators/staking.locators';
+import wallet from '../../locators/wallet.locators';
+import '../../support/staking.functions';
+import '../../support/vega-wallet.functions';
+import '../../support/eth-wallet.functions';
+import '../../support/wallet-teardown.functions';
+
+const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
+
+context('Staking Tab - with eth and vega wallets connected', function () {
+  before('visit staking tab and connect vega wallet', function () {
+    cy.vega_wallet_import();
+    cy.visit('/');
+    cy.get(navigation.section, { timeout: 20000 }).should('be.visible');
+    cy.vega_wallet_connect();
+    cy.vega_wallet_set_specified_approval_amount('1000');
+    cy.reload();
+    cy.get(navigation.section, { timeout: 20000 }).should('be.visible');
+    cy.ethereum_wallet_connect();
+    cy.get(navigation.staking).first().click();
+    cy.get(navigation.spinner, { timeout: 20000 }).should('not.exist');
+    cy.get(staking.validatorNames).first().invoke('text').as('validatorName');
+  });
+
+  describe('Eth wallet - contains VEGA tokens', function () {
+    beforeEach(
+      'teardown wallet & drill into a specific validator',
+      function () {
+        cy.vega_wallet_teardown();
+        cy.get(navigation.staking).first().click();
+        cy.get(navigation.spinner, { timeout: 20000 }).should('not.exist');
+      }
+    );
+
+    it('Able to associate tokens - from staking page', function () {
+      cy.staking_page_associate_tokens('2');
+      cy.ethereum_wallet_check_associated_vega_key_value_is(
+        vegaWalletPublicKeyShort,
+        '2.000000000000000000'
+      );
+      cy.ethereum_wallet_check_associated_value_is('2.0');
+      cy.vega_wallet_check_associated_value_is('2.000000000000000000');
+      cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
+    });
+
+    it('Able to disassociate tokens - from staking page', function () {
+      cy.staking_page_associate_tokens('2');
+      cy.ethereum_wallet_check_associated_vega_key_value_is(
+        vegaWalletPublicKeyShort,
+        '2.000000000000000000'
+      );
+      cy.vega_wallet_check_associated_value_is('2.000000000000000000');
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.staking_page_disassociate_tokens('1');
+      cy.ethereum_wallet_check_associated_vega_key_value_is(
+        vegaWalletPublicKeyShort,
+        '1.000000000000000000'
+      );
+      cy.ethereum_wallet_check_associated_value_is('1.0');
+      cy.vega_wallet_check_associated_value_is('1.000000000000000000');
+    });
+
+    it('Able to access associate token form - from eth wallet', function () {
+      cy.get(wallet.ethWallet).within(() =>
+        cy.get(wallet.ethWalletAssociate).click()
+      );
+      cy.get(staking.stakeAssociateWalletRadio, { timeout: 30000 }).should(
+        'be.enabled'
+      );
+    });
+
+    it('Able to access disassociate token form - from eth wallet', function () {
+      cy.get(wallet.ethWallet).within(() =>
+        cy.get(wallet.ethWalletDisassociate).click()
+      );
+      cy.get(staking.stakeAssociateWalletRadio, { timeout: 30000 }).should(
+        'be.enabled'
+      );
+    });
+
+    it('Able to associate more tokens than the approved amount of 1000 - requires re-approval', function () {
+      cy.staking_page_associate_tokens('1001', true);
+      cy.ethereum_wallet_check_associated_vega_key_value_is(
+        vegaWalletPublicKeyShort,
+        '1,001.000000000000000000'
+      );
+      cy.ethereum_wallet_check_associated_value_is('1,001.00');
+      cy.vega_wallet_check_associated_value_is('1,001.000000000000000000');
+    });
+
+    it('Able to disassociate a partial amount of tokens currently associated', function () {
+      cy.staking_page_associate_tokens('2');
+      cy.vega_wallet_check_associated_value_is('2.000000000000000000');
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.staking_page_disassociate_tokens('1');
+      cy.ethereum_wallet_check_associated_vega_key_value_is(
+        vegaWalletPublicKeyShort,
+        '1.000000000000000000'
+      );
+      cy.ethereum_wallet_check_associated_value_is('1.0');
+      cy.vega_wallet_check_associated_value_is('1.000000000000000000');
+    });
+
+    it('Able to disassociate all tokens', function () {
+      cy.staking_page_associate_tokens('2');
+      cy.vega_wallet_check_associated_value_is('2.000000000000000000');
+      cy.get('button').contains('Select a validator to nominate').click();
+      cy.staking_page_disassociate_all_tokens();
+      cy.ethereum_wallet_check_associated_vega_key_is_no_longer_showing(
+        vegaWalletPublicKeyShort
+      );
+      cy.ethereum_wallet_check_associated_value_is('0.0');
+      cy.vega_wallet_check_associated_value_is('0.000000000000000000');
+    });
+  });
+});

apps/token-e2e/src/integration/home.cy.js

@@ -1,6 +1,8 @@
 import navigation from '../locators/navigation.locators';
 import home from '../locators/home.locators';
-import vegaToken from '../data/vegaToken.json';
+
+const vegaTokenAddress = Cypress.env('vegaTokenAddress');
+const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
 
 context('Home Page - verify elements on page', function () {
   before('visit token home page', function () {
@@ -51,7 +53,7 @@ context('Home Page - verify elements on page', function () {
           cy.get(home.address)
             .should('be.visible')
             .invoke('text')
-            .should('be.equal', vegaToken.tokenAddress);
+            .should('be.equal', vegaTokenAddress);
         });
       });
       it('should have VESTING CONTRACT', function () {
@@ -59,7 +61,7 @@ context('Home Page - verify elements on page', function () {
           cy.get(home.contract)
             .should('be.visible')
             .invoke('text')
-            .should('be.equal', vegaToken.vestingContract);
+            .should('be.equal', vegaTokenContractAddress);
         });
       });
       it('should have TOTAL SUPPLY', function () {

apps/token-e2e/src/locators/navigation.locators.js

@@ -1,4 +1,7 @@
+import common from './common.locators';
+
 export default {
+  ...common,
   section: 'nav',
   home: '[href="/"]',
   vesting: '[href="/vesting"]',
@@ -6,4 +9,5 @@ export default {
   rewards: '[href="/rewards"]',
   withdraw: '[href="/withdraw"]',
   governance: '[href="/governance"]',
+  spinner: 'splash-loader',
 };

apps/token-e2e/src/locators/staking.locators.js

@@ -7,4 +7,20 @@ export default {
   step2: '[data-testid="staking-step-2"]',
   step3: '[data-testid="staking-step-3"]',
   connectToEthBtn: '[data-testid="connect-to-eth-btn"]',
+  connectToVegaBtn: '[data-testid="connect-to-vega-wallet-btn"]',
+  validatorNames: '[data-testid="node-list-item-name"]',
+  epochEndingText: '[data-testid="epoch-countdown"]',
+  addStakeRadioButton: '[data-testid="add-stake-radio"]',
+  removeStakeRadioButton: '[data-testid="remove-stake-radio"]',
+  tokenAmountInput: '[data-testid="token-amount-input"]',
+  tokenInputApprove: '[data-testid="token-input-approve-button"]',
+  tokenInputSubmit: '[data-testid="token-input-submit-button"]',
+  stakedAmounts: '[data-testid="staked-validator-item"]',
+  stakeNextEpochValue: '[data-testid="stake-next-epoch"]',
+  stakeThisEpochValue: '[data-testid="stake-this-epoch"]',
+  stakeMaximumTokens: '[data-testid="token-amount-use-maximum"]',
+  stakeAssociateWalletRadio: '[data-testid="associate-radio-wallet"]',
+  disassociateButton: '[data-testid="disassociate-tokens-btn"]',
+  associateMoreTokensButton: '[data-testid="associate-more-tokens-btn"]',
+  associateButton: '[data-testid="associate-tokens-btn"]',
 };

apps/token-e2e/src/locators/wallet.locators.js

@@ -0,0 +1,14 @@
+import common from './common.locators';
+
+export default {
+  ...common,
+  connectRestForm: '[data-testid="rest-connector-form"]',
+  name: '#wallet',
+  passphrase: '#passphrase',
+  vegawallet: '[data-testid="vega-wallet"]',
+  ethWallet: '[data-testid="ethereum-wallet"]',
+  ethWalletConnectToEth: '[data-testid="connect-to-eth-wallet-button"]',
+  ethWalletConnect: '[data-testid="web3-connector-Unknown"]',
+  ethWalletAssociate: '[href="/staking/associate"]',
+  ethWalletDisassociate: '[href="/staking/disassociate"]',
+};

apps/token-e2e/src/support/eth-wallet.functions.js

@@ -0,0 +1,51 @@
+import wallet from '../locators/wallet.locators';
+
+cy.ethereum_wallet_connect = () => {
+  cy.highlight('Connecting Eth Wallet');
+  cy.get(wallet.ethWalletConnectToEth).within(() => {
+    cy.contains('Connect Ethereum wallet to associate $VEGA')
+      .should('be.visible')
+      .click();
+  });
+  cy.get(wallet.ethWalletConnect).click();
+  cy.get(wallet.ethWalletConnect, { timeout: 60000 }).should('not.exist');
+  cy.get(wallet.ethWallet).within(() => {
+    // this check is required since it ensures the wallet is fully (not partially) loaded
+    cy.contains('Locked', { timeout: 15000 }).should('be.visible');
+  });
+};
+
+cy.ethereum_wallet_check_associated_value_is = (expectedVal) => {
+  cy.highlight(`Checking Eth Wallet - Associated Value is ${expectedVal}`);
+  cy.get(wallet.ethWallet).within(() => {
+    cy.contains('Associated', { timeout: 20000 })
+      .parent()
+      .siblings()
+      .contains(expectedVal, { timeout: 40000 })
+      .should('be.visible');
+  });
+};
+
+cy.ethereum_wallet_check_associated_vega_key_value_is = (
+  vegaShortPublicKey,
+  expectedVal
+) => {
+  cy.highlight(
+    `Checking Eth Wallet - Vega Key Associated Value is ${expectedVal} for key ${vegaShortPublicKey}`
+  );
+  cy.get(wallet.ethWallet).within(() => {
+    cy.contains(vegaShortPublicKey, { timeout: 20000 })
+      .parent()
+      .contains(expectedVal, { timeout: 40000 })
+      .should('be.visible');
+  });
+};
+
+cy.ethereum_wallet_check_associated_vega_key_is_no_longer_showing = (
+  vegaShortPublicKey
+) => {
+  cy.highlight('Checking Eth Wallet - Vega Key Associated is not showing');
+  cy.get(wallet.ethWallet).within(() => {
+    cy.contains(vegaShortPublicKey, { timeout: 20000 }).should('not.exist');
+  });
+};

apps/token-e2e/src/support/index.d.ts

@@ -0,0 +1,2 @@
+// type definitions for Cypress object "cy"
+/// <reference types="cypress" />

apps/token-e2e/src/support/index.ts

@@ -1 +1,11 @@
 import '@vegaprotocol/cypress';
+
+// Hide fetch/XHR requests - They create a lot of noise in command log
+const app = window.top;
+if (!app.document.head.querySelector('[data-hide-command-log-request]')) {
+  const style = app.document.createElement('style');
+  style.innerHTML =
+    '.command-name-request, .command-name-xhr { display: none }';
+  style.setAttribute('data-hide-command-log-request', '');
+  app.document.head.appendChild(style);
+}

apps/token-e2e/src/support/staking.functions.js

@@ -0,0 +1,81 @@
+import staking from '../locators/staking.locators';
+
+cy.staking_validator_page_add_stake = (stake) => {
+  cy.highlight(`Adding a stake of ${stake}`);
+  cy.get(staking.addStakeRadioButton).click({ force: true });
+  cy.get(staking.tokenAmountInput).type(stake);
+  cy.contains('Waiting for next epoch to start', { timeout: 10000 });
+  cy.get(staking.tokenInputSubmit, { timeout: 8000 })
+    .should('be.enabled')
+    .and('contain', `Add ${stake} $VEGA tokens`)
+    .and('be.visible')
+    .click();
+  cy.contains(
+    'At the beginning of the next epoch your $VEGA will be nominated to the validator',
+    { timeout: 20000 }
+  ).should('be.visible');
+};
+
+cy.staking_validator_page_removeStake = (stake) => {
+  cy.highlight(`Removing a stake of ${stake}`);
+  cy.get(staking.removeStakeRadioButton).click({ force: true });
+  cy.get(staking.tokenAmountInput).type(stake);
+  cy.contains('Waiting for next epoch to start', { timeout: 10000 });
+  cy.get(staking.tokenInputSubmit)
+    .should('be.enabled', { timeout: 8000 })
+    .and('contain', `Remove ${stake} $VEGA tokens at the end of epoch`)
+    .and('be.visible')
+    .click();
+  cy.contains(`${stake} $VEGA has been removed from validator`).should(
+    'be.visible'
+  );
+};
+
+cy.staking_page_associate_tokens = (amount, approve = false) => {
+  cy.highlight(`Associating ${amount} tokens`);
+  cy.get(staking.associateButton).click();
+  cy.get(staking.stakeAssociateWalletRadio, { timeout: 30000 }).click();
+  cy.get(staking.tokenAmountInput, { timeout: 10000 }).type(amount);
+  if (approve) {
+    cy.get(staking.tokenInputApprove, { timeout: 40000 })
+      .should('be.enabled')
+      .click();
+    cy.contains('Approve $VEGA Tokens for staking on Vega').should(
+      'be.visible'
+    );
+    cy.contains('Approve $VEGA Tokens for staking on Vega', {
+      timeout: 40000,
+    }).should('not.exist');
+  }
+  cy.get(staking.tokenInputSubmit, { timeout: 40000 })
+    .should('be.enabled')
+    .click();
+  cy.contains('can now participate in governance and nominate a validator', {
+    timeout: 60000,
+  }).should('be.visible');
+};
+
+cy.staking_page_disassociate_tokens = (amount) => {
+  cy.highlight(`Disassociating ${amount} tokens via Staking Page`);
+  cy.get(staking.disassociateButton).click();
+  cy.get(staking.stakeAssociateWalletRadio, { timeout: 30000 }).click();
+  cy.get(staking.tokenAmountInput, { timeout: 10000 }).type(amount);
+
+  cy.get(staking.tokenInputSubmit, { timeout: 40000 })
+    .should('be.enabled')
+    .click();
+  cy.contains(`${amount} $VEGA tokens have been returned to Ethereum wallet`, {
+    timeout: 60000,
+  }).should('be.visible');
+};
+
+cy.staking_page_disassociate_all_tokens = () => {
+  cy.highlight(`Disassociating all tokens via Staking Page`);
+  cy.get(staking.disassociateButton).click();
+  cy.get(staking.stakeAssociateWalletRadio, { timeout: 20000 }).click();
+  cy.get(staking.stakeMaximumTokens, { timeout: 60000 }).click();
+  cy.get(staking.tokenInputSubmit, { timeout: 10000 }).click();
+  cy.contains('$VEGA tokens have been returned to Ethereum wallet', {
+    timeout: 60000,
+  }).should('be.visible');
+};

apps/token-e2e/src/support/vega-wallet.functions.js

@@ -0,0 +1,56 @@
+import wallet from '../locators/wallet.locators';
+
+const vegaWalletName = Cypress.env('vegaWalletName');
+const vegaWalletLocation = Cypress.env('vegaWalletLocation');
+const vegaWalletPassphrase = Cypress.env('vegaWalletPassphrase');
+
+cy.vega_wallet_import = () => {
+  cy.highlight(`Importing Vega Wallet ${vegaWalletName}`);
+  cy.exec(`vegawallet init -f --home ${vegaWalletLocation}`);
+  cy.exec(
+    `vegawallet import -w ${vegaWalletName} --recovery-phrase-file ./src/fixtures/wallet/recovery -p ./src/fixtures/wallet/passphrase --home ~/.vegacapsule/testnet/wallet`,
+    { failOnNonZeroExit: false }
+  );
+  cy.exec(
+    `vegawallet service run --network DV --automatic-consent  --home ${vegaWalletLocation}`
+  );
+};
+
+cy.vega_wallet_connect = () => {
+  cy.highlight('Connecting Vega Wallet');
+  cy.get(wallet.vegawallet).within(() => {
+    cy.get('button')
+      .contains('Connect Vega wallet to use associated $VEGA')
+      .should('be.enabled')
+      .and('be.visible')
+      .click({ force: true });
+  });
+  cy.get('button').contains('rest provider').click();
+  cy.get(wallet.connectRestForm).within(() => {
+    cy.get(wallet.name).click().type(vegaWalletName);
+    cy.get(wallet.passphrase).click().type(vegaWalletPassphrase);
+    cy.get('button').contains('Connect').click();
+  });
+  cy.contains(`${vegaWalletName} key`, { timeout: 20000 }).should('be.visible');
+};
+
+cy.vega_wallet_check_unstaked_value_is = (expectedVal) => {
+  cy.highlight(`Checking vega wallet - Unstaked Value is ${expectedVal}`);
+  cy.get(wallet.vegawallet).within(() => {
+    cy.contains('Unstaked', { timeout: 40000 })
+      .siblings()
+      .contains(expectedVal, { timeout: 40000 })
+      .should('be.visible');
+  });
+};
+
+cy.vega_wallet_check_associated_value_is = (expectedVal) => {
+  cy.highlight(`Checking vega wallet - Associated Value is ${expectedVal}`);
+  cy.get(wallet.vegawallet).within(() => {
+    cy.contains('Associated', { timeout: 40000 })
+      .parent()
+      .siblings()
+      .contains(expectedVal, { timeout: 40000 })
+      .should('be.visible');
+  });
+};

apps/token-e2e/src/support/wallet-teardown.functions.js

@@ -0,0 +1,106 @@
+import {
+  StakingBridge,
+  Token,
+  TokenVesting,
+} from '@vegaprotocol/smart-contracts';
+import { ethers, Wallet } from 'ethers';
+
+const vegaWalletMnemonic = Cypress.env('vegaWalletMnemonic');
+const vegaWalletPubKey = Cypress.env('vegaWalletPublicKey');
+const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
+const vegaTokenAddress = Cypress.env('vegaTokenAddress');
+const ethWalletPubKey = Cypress.env('ethWalletPublicKey');
+const ethStakingBridgeContractAddress = Cypress.env(
+  'ethStakingBridgeContractAddress'
+);
+const ethProviderUrl = Cypress.env('ethProviderUrl');
+const getAccount = (number = 0) => `m/44'/60'/0'/0/${number}`;
+const transactionTimeout = '50000';
+
+before('Vega wallet teardown prep', function () {
+  cy.wrap(new ethers.providers.JsonRpcProvider({ url: ethProviderUrl }), {
+    log: false,
+  }).as('provider');
+
+  cy.wrap(Wallet.fromMnemonic(vegaWalletMnemonic, getAccount(0)).privateKey, {
+    log: false,
+  }).then((privateKey) => {
+    cy.wrap(new Wallet(privateKey, this.provider), { log: false }).as('signer');
+  });
+
+  cy.get('@signer', { log: false }).then((signer) => {
+    cy.wrap(new StakingBridge(ethStakingBridgeContractAddress, signer), {
+      log: false,
+    }).as('stakingBridgeContract');
+    cy.wrap(new TokenVesting(vegaTokenContractAddress, signer), {
+      log: false,
+    }).as('vestingContract');
+  });
+});
+
+Cypress.Commands.add('vega_wallet_teardown', function () {
+  cy.vega_wallet_teardown_staking(this.stakingBridgeContract);
+  cy.vega_wallet_teardown_vesting(this.vestingContract);
+  cy.vega_wallet_check_associated_value_is('0.000000000000000000');
+});
+
+Cypress.Commands.add(
+  'vega_wallet_set_specified_approval_amount',
+  function (resetAmount) {
+    cy.highlight(`Setting token approval amount to ${resetAmount}`);
+    cy.wrap(new Token(vegaTokenAddress, this.signer), { log: false }).then(
+      (token) => {
+        cy.wrap(
+          token.approve(
+            ethStakingBridgeContractAddress,
+            resetAmount.concat('000000000000000000')
+          ),
+          { timeout: transactionTimeout, log: false }
+        ).then((tx) => {
+          cy.wait_for_transaction(tx);
+        });
+      }
+    );
+  }
+);
+
+cy.vega_wallet_teardown_staking = (stakingBridgeContract) => {
+  cy.highlight('Tearing down staking tokens from vega wallet if present');
+  cy.wrap(
+    stakingBridgeContract.stakeBalance(ethWalletPubKey, vegaWalletPubKey),
+    {
+      timeout: transactionTimeout,
+      log: false,
+    }
+  ).then((stake_amount) => {
+    if (String(stake_amount) != '0') {
+      cy.wrap(
+        stakingBridgeContract.removeStake(stake_amount, vegaWalletPubKey),
+        { timeout: transactionTimeout, log: false }
+      ).then((tx) => {
+        cy.wait_for_transaction(tx);
+      });
+    }
+  });
+};
+
+cy.vega_wallet_teardown_vesting = (vestingContract) => {
+  cy.highlight('Tearing down vesting tokens from vega wallet if present');
+  cy.wrap(vestingContract.stakeBalance(ethWalletPubKey, vegaWalletPubKey), {
+    timeout: transactionTimeout,
+    log: false,
+  }).then((vesting_amount) => {
+    if (String(vesting_amount) != '0') {
+      cy.wrap(vestingContract.removeStake(vesting_amount, vegaWalletPubKey), {
+        timeout: transactionTimeout,
+        log: false,
+      }).then((tx) => {
+        cy.wait_for_transaction(tx);
+      });
+    }
+  });
+};
+
+cy.wait_for_transaction = (tx) => {
+  cy.wrap(tx.wait(1).catch(cy.log), { timeout: transactionTimeout });
+};

apps/token/src/components/eth-wallet/eth-wallet.tsx

@@ -196,59 +196,62 @@ export const EthWallet = () => {
 
   return (
     <WalletCard dark={true}>
-      <WalletCardHeader>
+      <section data-testid="ethereum-wallet">
-        <h1 className="m-0">{t('ethereumKey')}</h1>
+        <WalletCardHeader>
-        {account && (
+          <h1 className="text-h3 uppercase">{t('ethereumKey')}</h1>
-          <div className="place-self-end font-mono px-4 pb-2">
+          {account && (
-            <div className="font-mono">{truncateMiddle(account)}</div>
+            <div className="px-4 text-right">
-            {pendingTxs && (
+              <div className="font-mono">{truncateMiddle(account)}</div>
-              <div>
+              {pendingTxs && (
-                <button
+                <div>
-                  className="flex items-center gap-4 p-4 border whitespace-nowrap"
+                  <button
-                  data-testid="pending-transactions-btn"
+                    className="flex items-center gap-4 p-4 border whitespace-nowrap"
-                  onClick={() =>
+                    data-testid="pending-transactions-btn"
-                    appDispatch({
+                    onClick={() =>
-                      type: AppStateActionType.SET_TRANSACTION_OVERLAY,
+                      appDispatch({
-                      isOpen: true,
+                        type: AppStateActionType.SET_TRANSACTION_OVERLAY,
-                    })
+                        isOpen: true,
-                  }
+                      })
-                >
+                    }
-                  <Loader size="small" forceTheme="dark" />
+                  >
-                  {t('pendingTransactions')}
+                    <Loader size="small" forceTheme="dark" />
-                </button>
+                    {t('pendingTransactions')}
-              </div>
+                  </button>
-            )}
+                </div>
-          </div>
+              )}
-        )}
+            </div>
-      </WalletCardHeader>
+          )}
-      <WalletCardContent>
+        </WalletCardHeader>
-        {account ? (
+        <WalletCardContent>
-          <ConnectedKey />
+          {account ? (
-        ) : (
+            <ConnectedKey />
-          <Button
+          ) : (
-            variant={'secondary'}
+            <Button
-            onClick={() =>
+              variant={'secondary'}
-              appDispatch({
+              className="w-full px-28 border h-28"
-                type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
+              onClick={() =>
-                isOpen: true,
+                appDispatch({
-              })
+                  type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
-            }
+                  isOpen: true,
-            data-test-id="connect-to-eth-wallet-button"
+                })
-          >
+              }
-            {t('connectEthWalletToAssociate')}
+              data-testid="connect-to-eth-wallet-button"
-          </Button>
-        )}
-        {account && (
-          <WalletCardActions>
-            <button
-              className="mt-4 underline"
-              onClick={() => connector.deactivate()}
             >
-              {t('disconnect')}
+              {t('connectEthWalletToAssociate')}
-            </button>
+            </Button>
-          </WalletCardActions>
+          )}
-        )}
+          {account && (
-      </WalletCardContent>
+            <WalletCardActions>
+              <button
+                className="mt-4 underline"
+                onClick={() => connector.deactivate()}
+              >
+                {t('disconnect')}
+              </button>
+            </WalletCardActions>
+          )}
+        </WalletCardContent>
+      </section>
     </WalletCard>
   );
 };

apps/token/src/components/vega-wallet/vega-wallet.tsx

@@ -37,7 +37,7 @@ export const VegaWallet = () => {
   );
 
   return (
-    <section className="vega-wallet">
+    <section className="vega-wallet" data-testid="vega-wallet">
       <WalletCard dark={true}>
         <WalletCardHeader dark={true}>
           <h1 className="col-start-1 m-0">{t('vegaWallet')}</h1>

apps/trading-e2e/src/integration/home.cy.ts

@@ -34,7 +34,10 @@ describe('home', () => {
       cy.visit('/');
       cy.wait('@GQL');
 
+      cy.contains('Loading...').should('be.visible');
+      cy.contains('Loading...').should('not.exist');
       cy.get('main[data-testid="market"]').should('exist'); // Wait for page to be rendered to before checking url
+
       cy.url().should('include', `/markets/${oldestMarket.id}`); // Should redirect to oldest market
     });
 

apps/trading-e2e/src/integration/markets.cy.ts

@@ -69,6 +69,7 @@ describe('markets table', () => {
     cy.get('[role="gridcell"][col-id=data]').contains('Active').click();
 
     cy.wait('@Market');
+    cy.get('.ag-root-wrapper').should('be.visible');
     cy.contains('ACTIVE MARKET');
     cy.url().should('include', '/markets/market-0');
 

libs/cypress/src/index.ts

@@ -3,11 +3,13 @@ import { addMockGQLCommand } from './lib/commands/mock-gql';
 import { addMockVegaWalletCommands } from './lib/commands/mock-vega-wallet';
 import { addMockWeb3ProviderCommand } from './lib/commands/mock-web3-provider';
 import { addSlackCommand } from './lib/commands/slack';
+import { addHighlightLog } from './lib/commands/highlight-log';
 
 addGetTestIdcommand();
 addSlackCommand();
 addMockGQLCommand();
 addMockVegaWalletCommands();
 addMockWeb3ProviderCommand();
+addHighlightLog();
 
 export * from './lib/graphql-test-utils';

libs/cypress/src/lib/commands/highlight-log.ts

@@ -0,0 +1,16 @@
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      highlight(message: string): void;
+    }
+  }
+}
+
+export function addHighlightLog() {
+  // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
+  Cypress.Commands.add('highlight', (message) => {
+    cy.log(`👉 **_${message}_**`);
+  });
+}