-
- {error?.message && (
-
-
- {error.message}
-
-
+ const searchForm = (
+
);
+
+ const searchTrigger = (
+
+
+
+
+
+
+ {searchForm}
+
+
+
+ );
+
+ return (
+ <>
+
{searchForm}
+
+ {searchTrigger}
+
+
+ );
};
diff --git a/apps/explorer/src/app/routes/router-config.tsx b/apps/explorer/src/app/routes/router-config.tsx
index 772b60c64..f8a5b7e5d 100644
--- a/apps/explorer/src/app/routes/router-config.tsx
+++ b/apps/explorer/src/app/routes/router-config.tsx
@@ -23,14 +23,18 @@ import { NetworkParameters } from './network-parameters';
import type { RouteObject } from 'react-router-dom';
import { MarketPage, MarketsPage } from './markets';
-export type Navigable = { path: string; name: string; text: string };
+export type Navigable = {
+ path: string;
+ name: string;
+ text: string;
+};
type Route = RouteObject & Navigable;
const partiesRoutes: Route[] = flags.parties
? [
{
path: Routes.PARTIES,
- name: 'Parties',
+ name: t('Parties'),
text: t('Parties'),
element:
,
children: [
@@ -52,7 +56,7 @@ const assetsRoutes: Route[] = flags.assets
{
path: Routes.ASSETS,
text: t('Assets'),
- name: 'Assets',
+ name: t('Assets'),
children: [
{
index: true,
@@ -71,7 +75,7 @@ const genesisRoutes: Route[] = flags.genesis
? [
{
path: Routes.GENESIS,
- name: 'Genesis',
+ name: t('Genesis'),
text: t('Genesis Parameters'),
element:
,
},
@@ -82,7 +86,7 @@ const governanceRoutes: Route[] = flags.governance
? [
{
path: Routes.GOVERNANCE,
- name: 'Governance proposals',
+ name: t('Governance proposals'),
text: t('Governance Proposals'),
element:
,
},
@@ -93,7 +97,7 @@ const marketsRoutes: Route[] = flags.markets
? [
{
path: Routes.MARKETS,
- name: 'Markets',
+ name: t('Markets'),
text: t('Markets'),
children: [
{
@@ -113,17 +117,18 @@ const networkParametersRoutes: Route[] = flags.networkParameters
? [
{
path: Routes.NETWORK_PARAMETERS,
- name: 'NetworkParameters',
+ name: t('NetworkParameters'),
text: t('Network Parameters'),
element:
,
},
]
: [];
+
const validators: Route[] = flags.validators
? [
{
path: Routes.VALIDATORS,
- name: 'Validators',
+ name: t('Validators'),
text: t('Validators'),
element:
,
},
@@ -133,14 +138,14 @@ const validators: Route[] = flags.validators
const routerConfig: Route[] = [
{
path: Routes.HOME,
- name: 'Home',
+ name: t('Home'),
text: t('Home'),
element:
,
index: true,
},
{
path: Routes.TX,
- name: 'Txs',
+ name: t('Txs'),
text: t('Transactions'),
element:
,
children: [
@@ -160,7 +165,7 @@ const routerConfig: Route[] = [
},
{
path: Routes.BLOCKS,
- name: 'Blocks',
+ name: t('Blocks'),
text: t('Blocks'),
element:
,
children: [
@@ -176,7 +181,7 @@ const routerConfig: Route[] = [
},
{
path: Routes.ORACLES,
- name: 'Oracles',
+ name: t('Oracles'),
text: t('Oracles'),
element:
,
children: [
diff --git a/apps/explorer/src/app/setup-tests.ts b/apps/explorer/src/app/setup-tests.ts
index 8f2609b7b..25ebbd3be 100644
--- a/apps/explorer/src/app/setup-tests.ts
+++ b/apps/explorer/src/app/setup-tests.ts
@@ -3,3 +3,13 @@
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'ResizeObserver', {
+ writable: false,
+ value: jest.fn().mockImplementation(() => ({
+ observe: jest.fn(),
+ unobserve: jest.fn(),
+ connect: jest.fn(),
+ disconnect: jest.fn(),
+ })),
+});
diff --git a/apps/governance-e2e/src/integration/flow/staking-flow.cy.js b/apps/governance-e2e/src/integration/flow/staking-flow.cy.js
index ed6a48090..66e3a1794 100644
--- a/apps/governance-e2e/src/integration/flow/staking-flow.cy.js
+++ b/apps/governance-e2e/src/integration/flow/staking-flow.cy.js
@@ -14,13 +14,14 @@ const stakeShare = '[data-testid="stake-percentage"]';
const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
const vegaWalletUnstakedBalance =
- '[data-testid="vega-wallet-balance-unstaked"]';
+ '[data-testid="vega-wallet-balance-unstaked"]:visible';
const vegaWalletStakedBalances =
'[data-testid="vega-wallet-balance-staked-validators"]';
const ethWalletAssociatedBalances =
'[data-testid="eth-wallet-associated-balances"]';
-const ethWalletTotalAssociatedBalance = '[data-testid="currency-locked"]';
-const ethWalletContainer = '[data-testid="ethereum-wallet"]';
+const ethWalletTotalAssociatedBalance =
+ '[data-testid="currency-locked"]:visible';
+const ethWalletContainer = '[data-testid="ethereum-wallet"]:visible';
const vegaWallet = '[data-testid="vega-wallet"]';
const partValidatorId = '…';
const txTimeout = Cypress.env('txTimeout');
diff --git a/apps/governance-e2e/src/integration/view/home.cy.js b/apps/governance-e2e/src/integration/view/home.cy.js
index d1d6b834c..b8098133d 100644
--- a/apps/governance-e2e/src/integration/view/home.cy.js
+++ b/apps/governance-e2e/src/integration/view/home.cy.js
@@ -1,60 +1,10 @@
-const navSection = 'nav';
-const navSupply = '[href="/token/tranches"]';
-const navToken = '[href="/token"]';
-const navStaking = '[href="/validators"]';
-const navRewards = '[href="/rewards"]';
-const navWithdraw = '[href="/token/withdraw"]';
-const navGovernance = '[href="/proposals"]';
-const navRedeem = '[href="/token/redeem"]';
-
context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
before('visit token home page', function () {
cy.visit('/');
+ cy.get('nav', { timeout: 10000 }).should('be.visible');
});
describe('with wallets disconnected', function () {
- before('wait for page to load', function () {
- cy.get(navSection, { timeout: 10000 }).should('be.visible');
- });
-
- describe('Navigation tabs', function () {
- it('should have proposals tab', function () {
- cy.get(navSection).within(() => {
- cy.get(navGovernance).should('be.visible');
- });
- });
- it('should have validators tab', function () {
- cy.get(navSection).within(() => {
- cy.get(navStaking).should('be.visible');
- });
- });
- it('should have rewards tab', function () {
- cy.get(navSection).within(() => {
- cy.get(navRewards).should('be.visible');
- });
- });
-
- describe('Token dropdown', function () {
- before('click on token dropdown', function () {
- cy.get(navSection).within(() => {
- cy.getByTestId('state-trigger').realClick();
- });
- });
- it('should have token dropdown', function () {
- cy.get(navToken).should('be.visible');
- });
- it('should have supply & vesting dropdown', function () {
- cy.get(navSupply).should('be.visible');
- });
- it('should have withdraw dropdown', function () {
- cy.get(navWithdraw).should('be.visible');
- });
- it('should have redeem dropdown', function () {
- cy.get(navRedeem).should('be.visible');
- });
- });
- });
-
describe('Links and buttons', function () {
it('should have link for proposal page', function () {
cy.getByTestId('home-proposals').within(() => {
diff --git a/apps/governance-e2e/src/integration/view/pages.cy.js b/apps/governance-e2e/src/integration/view/pages.cy.js
new file mode 100644
index 000000000..a0588f4e3
--- /dev/null
+++ b/apps/governance-e2e/src/integration/view/pages.cy.js
@@ -0,0 +1,284 @@
+context(
+ 'Landing pages - verifies required elements',
+ { tags: '@smoke' },
+ () => {
+ const navbar = 'nav .navbar';
+ const mobileNav = '[data-testid="menu-drawer"]';
+
+ const topLevelLinks = [
+ {
+ name: 'Proposals',
+ selector: '[href="/proposals"]',
+ tests: () => {
+ it('should be able to see a working link for - find out more about Vega governance', function () {
+ const governanceDocsUrl = 'https://vega.xyz/governance';
+ const proposalDocumentationLink =
+ '[data-testid="proposal-documentation-link"]';
+ // 3001-VOTE-001
+ cy.get(proposalDocumentationLink)
+ .should('be.visible')
+ .and('have.text', 'Find out more about Vega governance')
+ .and('have.attr', 'href')
+ .and('equal', governanceDocsUrl);
+
+ // 3002-PROP-001
+ cy.request(governanceDocsUrl)
+ .its('body')
+ .then((body) => {
+ if (!body.includes('Govern the network')) {
+ assert.include(
+ body,
+ 'Govern the network',
+ `Checking that governance link destination includes 'Govern the network' text`
+ );
+ }
+ });
+ });
+
+ it('should be able to see button for - new proposal', function () {
+ // 3001-VOTE-002
+ const newProposalLink = '[data-testid="new-proposal-link"]';
+ cy.get(newProposalLink)
+ .should('be.visible')
+ .and('have.text', 'New proposal')
+ .and('have.attr', 'href')
+ .and('equal', '/proposals/propose');
+ });
+ },
+ },
+ {
+ name: 'Validators',
+ selector: '[href="/validators"]',
+ tests: () => {
+ it('Should have Staking Guide link visible', function () {
+ // 2001-STKE-003
+ cy.get('[data-testid="staking-guide-link"]')
+ .should('be.visible')
+ .and('have.text', 'Read more about staking on Vega')
+ .and(
+ 'have.attr',
+ 'href',
+ 'https://docs.vega.xyz/mainnet/concepts/vega-chain/#staking-on-vega'
+ );
+ });
+ },
+ },
+ {
+ name: 'Rewards',
+ selector: '[href="/rewards"]',
+ header: 'Rewards and fees',
+ tests: () => {
+ it('should have epoch warning', () => {
+ cy.get('[data-testid="callout"]')
+ .should('be.visible')
+ .and(
+ 'have.text',
+ 'Rewards are credited 5 minutes after the epoch ends.This delay is set by a network parameter'
+ );
+ });
+ it('should have toggle for seeing total vs individual rewards', () => {
+ cy.get('[data-testid="epoch-reward-view-toggle-total"]').should(
+ 'be.visible'
+ );
+ });
+ },
+ },
+ ];
+
+ const secondLevelLinks = [
+ {
+ trigger: true,
+ name: 'Token',
+ selector: '[data-testid="state-trigger"]',
+ },
+ {
+ name: 'Token',
+ selector: '[href="/token"]',
+ header: 'The $VEGA token',
+ },
+ {
+ name: 'Supply & Vesting',
+ selector: '[href="/token/tranches"]',
+ header: 'Vesting tranches',
+ },
+ {
+ name: 'Withdraw',
+ selector: '[href="/token/withdraw"]',
+ header: 'Withdrawals',
+ tests: () => {
+ it('should have connect Vega wallet button', function () {
+ cy.get('[data-testid="connect-to-vega-wallet-btn"]')
+ .should('be.visible')
+ .and('have.text', 'Connect Vega wallet');
+ });
+ },
+ },
+ {
+ name: 'Redeem',
+ selector: '[href="/token/redeem"]',
+ header: 'Vesting',
+ tests: () => {
+ // 1005-VEST-018
+ it('should have connect Eth wallet button', function () {
+ cy.get('[data-testid="connect-to-eth-btn"]')
+ .should('be.visible')
+ .and('have.text', 'Connect Ethereum wallet');
+ });
+ },
+ },
+ {
+ name: 'Associate',
+ selector: '[href="/token/associate"]',
+ header: 'Associate $VEGA tokens with Vega Key',
+ },
+ {
+ name: 'Disassociate',
+ selector: '[href="/token/disassociate"]',
+ header: 'Disassociate $VEGA tokens from a Vega key',
+ },
+ ];
+
+ const expand = () => {
+ const trigger = secondLevelLinks.find((l) => l.trigger).selector;
+ cy.get(trigger).then((el) => {
+ if (el.attr('aria-expanded') === 'false') {
+ el.trigger('click');
+ }
+ });
+ };
+
+ const collapse = () => {
+ const trigger = secondLevelLinks.find((l) => l.trigger).selector;
+ cy.get(trigger).then((el) => {
+ if (el.attr('aria-expanded') === 'true') {
+ el.trigger('click');
+ }
+ });
+ };
+
+ const ensureHeader = (text) => {
+ cy.get('main header h1').should('have.text', text);
+ };
+
+ before(() => {
+ // goes to HOME
+ cy.visit('/');
+ // and waits for it to load
+ cy.get(navbar, { timeout: 10000 }).should('be.visible');
+ });
+
+ describe('Navigation (desktop)', () => {
+ for (const { name, selector } of topLevelLinks) {
+ it(`should have ${name} nav link`, () => {
+ cy.get(navbar).within(() => {
+ cy.get(selector).should('be.visible');
+ cy.get(selector).should('have.text', name);
+ });
+ });
+ }
+
+ for (const { name, selector, trigger } of secondLevelLinks) {
+ it(`should have ${name} ${
+ trigger ? 'as trigger button' : ''
+ } second level nav link`, () => {
+ cy.get(navbar).within(() => {
+ cy.get(selector).should('be.visible');
+ cy.get(selector).should('have.text', name);
+ if (trigger) cy.get(selector).click();
+ });
+ });
+ }
+
+ after(() => {
+ collapse();
+ });
+ });
+
+ describe('Navigation (mobile)', () => {
+ beforeEach(() => {
+ // iphone xr
+ cy.viewport(414, 896);
+ });
+
+ it('should have burger button', () => {
+ cy.get('[data-testid="button-menu-drawer"]').should('be.visible');
+ cy.get('[data-testid="button-menu-drawer"]').click();
+ cy.get(mobileNav).should('be.visible');
+ });
+
+ for (const { name, selector } of topLevelLinks) {
+ it(`should have ${name} nav link`, () => {
+ cy.get(mobileNav).within(() => {
+ cy.get(selector).should('be.visible');
+ cy.get(selector).should('have.text', name);
+ });
+ });
+ }
+
+ for (const { name, selector, trigger } of secondLevelLinks) {
+ it(`should have ${name} ${
+ trigger ? 'as trigger button' : ''
+ } second level nav link`, () => {
+ cy.get(mobileNav).within(() => {
+ cy.get(selector).should('be.visible');
+ cy.get(selector).should('have.text', name);
+ });
+ });
+ }
+
+ after(() => {
+ cy.get('[data-testid="button-menu-drawer"]').click();
+ cy.viewport(
+ Cypress.config('viewportWidth'),
+ Cypress.config('viewportHeight')
+ );
+ });
+ });
+
+ describe('Elements', () => {
+ for (const { name, selector, header, tests } of topLevelLinks) {
+ describe(`${name} page`, () => {
+ it(`navigates to ${name}`, () => {
+ cy.get(navbar).within(() => {
+ cy.log(`goes to ${name}`);
+ cy.get(selector).click();
+ cy.log(`ensures ${name} is highlighted`);
+ cy.get(selector).should('have.attr', 'aria-current');
+ });
+ });
+ it('displays header', () => {
+ ensureHeader(header || name);
+ });
+
+ if (tests) tests.apply(this);
+ });
+ }
+
+ for (const { name, selector, header, tests } of secondLevelLinks.filter(
+ (l) => !l.trigger
+ )) {
+ describe(`${name} page`, () => {
+ it(`navigates to ${name}`, () => {
+ cy.get(navbar).within(() => {
+ expand();
+ cy.log(`goes to ${name}`);
+ cy.get(selector).click();
+ expand();
+ cy.log(`ensures ${name} is highlighted`);
+ cy.get(selector).should('have.attr', 'aria-current');
+ });
+ });
+ it('displays header', () => {
+ ensureHeader(header || name);
+ });
+
+ if (tests) tests.apply(this);
+ });
+ }
+
+ after(() => {
+ collapse();
+ });
+ });
+ }
+);
diff --git a/apps/governance-e2e/src/integration/view/proposal.cy.js b/apps/governance-e2e/src/integration/view/proposal.cy.js
deleted file mode 100644
index 6342673f8..000000000
--- a/apps/governance-e2e/src/integration/view/proposal.cy.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const proposalDocumentationLink = '[data-testid="proposal-documentation-link"]';
-const newProposalButton = '[data-testid="new-proposal-link"]';
-const newProposalLink = '[data-testid="new-proposal-link"]';
-const governanceDocsUrl = 'https://vega.xyz/governance';
-const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]';
-
-context(
- 'Governance Page - verify elements on page',
- { tags: '@smoke' },
- function () {
- before('navigate to governance page', function () {
- cy.visit('/').navigate_to('proposals');
- });
-
- describe('with no network change proposals', function () {
- it('should have governance tab highlighted', function () {
- cy.verify_tab_highlighted('proposals');
- });
-
- it('should have GOVERNANCE header visible', function () {
- cy.verify_page_header('Proposals');
- });
-
- it('should be able to see a working link for - find out more about Vega governance', function () {
- // 3001-VOTE-001
- cy.get(proposalDocumentationLink)
- .should('be.visible')
- .and('have.text', 'Find out more about Vega governance')
- .and('have.attr', 'href')
- .and('equal', governanceDocsUrl);
-
- // 3002-PROP-001
- cy.request(governanceDocsUrl)
- .its('body')
- .then((body) => {
- if (!body.includes('Govern the network')) {
- assert.include(
- body,
- 'Govern the network',
- `Checking that governance link destination includes 'Govern the network' text`
- );
- }
- });
- });
-
- it('should be able to see button for - new proposal', function () {
- // 3001-VOTE-002
- cy.get(newProposalLink)
- .should('be.visible')
- .and('have.text', 'New proposal')
- .and('have.attr', 'href')
- .and('equal', '/proposals/propose');
- });
-
- // Skipping this test for now, the new proposal button no longer takes a user directly
- // to a proposal form, instead it takes them to a page where they can select a proposal type.
- // Keeping this test here for now as it can be repurposed to test the new proposal forms.
- it.skip('should be able to see a connect wallet button - if vega wallet disconnected and new proposal button selected', function () {
- cy.get(newProposalButton).should('be.visible').click();
- cy.get(connectToVegaWalletButton)
- .should('be.visible')
- .and('have.text', 'Connect Vega wallet');
- cy.navigate_to('proposals');
- cy.wait_for_spinner();
- });
- });
- }
-);
diff --git a/apps/governance-e2e/src/integration/view/pubkey-view.cy.js b/apps/governance-e2e/src/integration/view/pubkey-view.cy.js
index 9bb667df0..6dc896025 100644
--- a/apps/governance-e2e/src/integration/view/pubkey-view.cy.js
+++ b/apps/governance-e2e/src/integration/view/pubkey-view.cy.js
@@ -50,7 +50,7 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
});
it('Able to disconnect via wallet', function () {
- cy.getByTestId('manage-vega-wallet').click();
+ cy.get('aside [data-testid="manage-vega-wallet"]').click();
cy.getByTestId('disconnect').click();
cy.getByTestId(banner).should('not.exist');
});
diff --git a/apps/governance-e2e/src/integration/view/rewards.cy.js b/apps/governance-e2e/src/integration/view/rewards.cy.js
deleted file mode 100644
index 34bd97040..000000000
--- a/apps/governance-e2e/src/integration/view/rewards.cy.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const viewToggle = '[data-testid="epoch-reward-view-toggle-total"]';
-const warning = '[data-testid="callout"]';
-
-context(
- 'Rewards Page - verify elements on page',
- { tags: '@regression' },
- function () {
- before('navigate to rewards page', function () {
- cy.visit('/').navigate_to('rewards');
- });
-
- describe('with wallets disconnected', function () {
- it('should have REWARDS tab highlighted', function () {
- cy.verify_tab_highlighted('rewards');
- });
-
- it('should have rewards header visible', function () {
- cy.verify_page_header('Rewards and fees');
- });
-
- it('should have epoch warning', function () {
- cy.get(warning)
- .should('be.visible')
- .and(
- 'have.text',
- 'Rewards are credited 5 minutes after the epoch ends.This delay is set by a network parameter'
- );
- });
-
- it('should have toggle for seeing total vs individual rewards', function () {
- cy.get(viewToggle).should('be.visible');
- });
- });
- }
-);
diff --git a/apps/governance-e2e/src/integration/view/token.cy.js b/apps/governance-e2e/src/integration/view/token.cy.js
index 9de9c90b0..ddf999f8d 100644
--- a/apps/governance-e2e/src/integration/view/token.cy.js
+++ b/apps/governance-e2e/src/integration/view/token.cy.js
@@ -17,8 +17,7 @@ const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
context('Verify elements on Token page', { tags: '@smoke' }, function () {
before('Visit token page', function () {
- cy.visit('/');
- cy.navigate_to('token');
+ cy.visit('/token');
});
describe('THE $VEGA TOKEN table', function () {
it('should have TOKEN ADDRESS', function () {
diff --git a/apps/governance-e2e/src/integration/view/tranches.cy.js b/apps/governance-e2e/src/integration/view/tranches.cy.js
index 6cb9e0f92..eef33a187 100644
--- a/apps/governance-e2e/src/integration/view/tranches.cy.js
+++ b/apps/governance-e2e/src/integration/view/tranches.cy.js
@@ -8,13 +8,7 @@ context(
function () {
before('visit homepage', function () {
cy.intercept('GET', '**/tranches/stats', { tranches });
- cy.visit('/');
- });
-
- it('Able to navigate to tranches page', function () {
- cy.navigate_to('supply');
- cy.url().should('include', '/token/tranches');
- cy.get('h1').should('contain.text', 'Vesting tranches');
+ cy.visit('/token/tranches');
});
// 1005-VEST-001
diff --git a/apps/governance-e2e/src/integration/view/validators.cy.js b/apps/governance-e2e/src/integration/view/validators.cy.js
index 8183d892d..e7fa778ba 100644
--- a/apps/governance-e2e/src/integration/view/validators.cy.js
+++ b/apps/governance-e2e/src/integration/view/validators.cy.js
@@ -1,5 +1,4 @@
///
-const guideLink = '[data-testid="staking-guide-link"]';
const validatorTitle = '[data-testid="validator-node-title"]';
const validatorId = '[data-testid="validator-id"]';
const validatorPubKey = '[data-testid="validator-public-key"]';
@@ -25,31 +24,7 @@ const stakeNumberRegex = /^\d*\.?\d*$/;
context('Staking Page - verify elements on page', function () {
before('navigate to staking page', function () {
- cy.visit('/').navigate_to('validators');
- });
-
- describe('with wallets disconnected', { tags: '@smoke' }, function () {
- describe('description section', function () {
- it('Should have validators tab highlighted', function () {
- cy.verify_tab_highlighted('validators');
- });
-
- it('Should have validators ON VEGA header visible', function () {
- cy.verify_page_header('Validators');
- });
-
- it('Should have Staking Guide link visible', function () {
- // 2001-STKE-003
- cy.get(guideLink)
- .should('be.visible')
- .and('have.text', 'Read more about staking on Vega')
- .and(
- 'have.attr',
- 'href',
- 'https://docs.vega.xyz/mainnet/concepts/vega-chain/#staking-on-vega'
- );
- });
- });
+ cy.visit('/validators');
});
describe(
diff --git a/apps/governance-e2e/src/integration/view/vesting.cy.js b/apps/governance-e2e/src/integration/view/vesting.cy.js
index dcda22aac..c6f8c3d63 100644
--- a/apps/governance-e2e/src/integration/view/vesting.cy.js
+++ b/apps/governance-e2e/src/integration/view/vesting.cy.js
@@ -1,4 +1,3 @@
-const connectButton = '[data-testid="connect-to-eth-btn"]';
const lockedTokensInVestingContract = '6,499,972.30';
context(
@@ -6,24 +5,7 @@ context(
{ tags: '@smoke' },
function () {
before('navigate to vesting page', function () {
- cy.visit('/').navigate_to('vesting');
- });
-
- describe('with wallets disconnected', function () {
- it('should have vesting tab highlighted', function () {
- cy.verify_tab_highlighted('token');
- });
-
- it('should have VESTING header visible', function () {
- cy.verify_page_header('Vesting');
- });
-
- // 1005-VEST-018
- it('should have connect Eth wallet button', function () {
- cy.get(connectButton)
- .should('be.visible')
- .and('have.text', 'Connect Ethereum wallet');
- });
+ cy.visit('/token/redeem');
});
describe('With Eth wallet connected', function () {
@@ -38,15 +20,18 @@ context(
cy.getByTestId('currency-title')
.should('contain.text', 'VEGA')
.and('contain.text', 'In vesting contract');
- cy.getByTestId('currency-value').should(
+ cy.get('[data-testid="currency-value"]:visible').should(
'have.text',
lockedTokensInVestingContract
);
- cy.getByTestId('currency-locked').should(
+ cy.get('[data-testid="currency-locked"]:visible').should(
'have.text',
lockedTokensInVestingContract
);
- cy.getByTestId('currency-unlocked').should('have.text', '0.00');
+ cy.get('[data-testid="currency-unlocked"]:visible').should(
+ 'have.text',
+ '0.00'
+ );
});
});
// 1005-VEST-022 1005-VEST-023
diff --git a/apps/governance-e2e/src/integration/view/wallet-eth.cy.js b/apps/governance-e2e/src/integration/view/wallet-eth.cy.js
index 75d4e7e6c..ccdf42d60 100644
--- a/apps/governance-e2e/src/integration/view/wallet-eth.cy.js
+++ b/apps/governance-e2e/src/integration/view/wallet-eth.cy.js
@@ -1,18 +1,19 @@
-const walletContainer = '[data-testid="ethereum-wallet"]';
+const walletContainer = 'aside [data-testid="ethereum-wallet"]';
const walletHeader = '[data-testid="wallet-header"] h1';
-const connectToEthButton = '[data-testid="connect-to-eth-wallet-button"]';
+const connectToEthButton =
+ '[data-testid="connect-to-eth-wallet-button"]:visible';
const connectorList = '[data-testid="web3-connector-list"]';
const associate = '[href="/token/associate"]';
const disassociate = '[href="/token/disassociate"]';
const disconnect = '[data-testid="disconnect-from-eth-wallet-button"]';
const accountNo = '[data-testid="ethereum-account-truncated"]';
-const currencyTitle = '[data-testid="currency-title"]';
-const currencyValue = '[data-testid="currency-value"]';
-const vegaInVesting = '[data-testid="vega-in-vesting-contract"]';
-const vegaInWallet = '[data-testid="vega-in-wallet"]';
-const progressBar = '[data-testid="progress-bar"]';
-const currencyLocked = '[data-testid="currency-locked"]';
-const currencyUnlocked = '[data-testid="currency-unlocked"]';
+const currencyTitle = '[data-testid="currency-title"]:visible';
+const currencyValue = '[data-testid="currency-value"]:visible';
+const vegaInVesting = '[data-testid="vega-in-vesting-contract"]:visible';
+const vegaInWallet = '[data-testid="vega-in-wallet"]:visible';
+const progressBar = '[data-testid="progress-bar"]:visible';
+const currencyLocked = '[data-testid="currency-locked"]:visible';
+const currencyUnlocked = '[data-testid="currency-unlocked"]:visible';
const dialog = '[role="dialog"]';
const dialogHeader = '[data-testid="dialog-title"]';
const dialogCloseBtn = '[data-testid="dialog-close"]';
diff --git a/apps/governance-e2e/src/integration/view/wallet-vega.cy.js b/apps/governance-e2e/src/integration/view/wallet-vega.cy.js
index c32037a42..2a5e4699e 100644
--- a/apps/governance-e2e/src/integration/view/wallet-vega.cy.js
+++ b/apps/governance-e2e/src/integration/view/wallet-vega.cy.js
@@ -1,6 +1,6 @@
import { truncateByChars } from '@vegaprotocol/utils';
-const walletContainer = '[data-testid="vega-wallet"]';
+const walletContainer = 'aside [data-testid="vega-wallet"]';
const walletHeader = '[data-testid="wallet-header"] h1';
const connectButton = '[data-testid="connect-vega-wallet"]';
const getVegaLink = '[data-testid="link"]';
@@ -14,7 +14,6 @@ const restWallet = '#wallet';
const restPassphrase = '#passphrase';
const restConnectBtn = '[type="submit"]';
const accountNo = '[data-testid="vega-account-truncated"]';
-const walletName = '[data-testid="wallet-name"]';
const currencyTitle = '[data-testid="currency-title"]';
const currencyValue = '[data-testid="currency-value"]';
const vegaUnstaked = '[data-testid="vega-wallet-balance-unstaked"] .text-right';
@@ -28,44 +27,24 @@ const vegaWalletCurrencyTitle = '[data-testid="currency-title"]';
const vegaWalletPublicKey = Cypress.env('vegaWalletPublicKey');
const txTimeout = Cypress.env('txTimeout');
-const faucetAssets = {
- BTCFake: 'fBTC',
- DAIFake: 'fDAI',
- EUROFake: 'fEURO',
- USDCFake: 'fUSDC',
-};
-
context(
'Vega Wallet - verify elements on widget',
{ tags: '@regression' },
- function () {
- before('visit token home page', function () {
+ () => {
+ before('visit token home page', () => {
cy.visit('/');
+ cy.get(walletContainer, { timeout: 60000 }).should('be.visible');
});
- describe('with wallets disconnected', function () {
- before('wait for widget to load', function () {
- cy.get(walletContainer, { timeout: 10000 }).should('be.visible');
- });
-
- it('should have VEGA WALLET header visible', function () {
+ describe('with wallets disconnected', () => {
+ it('should have required elements visible', function () {
cy.get(walletContainer).within(() => {
cy.get(walletHeader)
.should('be.visible')
.and('have.text', 'Vega Wallet');
- });
- });
-
- it('should have Connect Vega button visible', function () {
- cy.get(walletContainer).within(() => {
cy.get(connectButton)
.should('be.visible')
.and('have.text', 'Connect Vega wallet to use associated $VEGA');
- });
- });
-
- it('should have Get a Vega wallet link visible', function () {
- cy.get(walletContainer).within(() => {
cy.get(getVegaLink)
.should('be.visible')
.and('have.text', 'Get a Vega wallet')
@@ -74,14 +53,14 @@ context(
});
});
- describe('when connect button clicked', function () {
- before('click connect vega wallet button', function () {
+ describe('when connect button clicked', () => {
+ before('click connect vega wallet button', () => {
cy.get(walletContainer).within(() => {
cy.get(connectButton).click();
});
});
- it('should have Connect Vega header visible', function () {
+ it('should have Connect Vega header visible', () => {
cy.get(dialog).within(() => {
cy.get(walletDialogHeader)
.should('be.visible')
@@ -175,14 +154,6 @@ context(
}
);
- it.skip('should have wallet name visible', function () {
- cy.get(walletContainer).within(() => {
- cy.get(walletName)
- .should('be.visible')
- .and('have.text', `${Cypress.env('vegaWalletName')} key 1`);
- });
- });
-
it('should have Vega Associated currency title visible', function () {
cy.get(walletContainer).within(() => {
cy.get(currencyTitle)
@@ -299,113 +270,71 @@ context(
});
// 2002-SINC-016
- describe('when assets exist in vegawallet', function () {
- before('send-faucet assets to connected vega wallet', function () {
- cy.vega_wallet_faucet_assets_without_check(
- faucetAssets.USDCFake,
- '1000000',
- vegaWalletPublicKey
- );
- cy.vega_wallet_faucet_assets_without_check(
- faucetAssets.BTCFake,
- '600000',
- vegaWalletPublicKey
- );
- cy.vega_wallet_faucet_assets_without_check(
- faucetAssets.EUROFake,
- '800000',
- vegaWalletPublicKey
- );
- cy.vega_wallet_faucet_assets_without_check(
- faucetAssets.DAIFake,
- '200000',
- vegaWalletPublicKey
- );
+ describe('Vega wallet with assets', function () {
+ const assets = [
+ {
+ id: 'fUSDC',
+ name: 'USDC (fake)',
+ amount: '1000000',
+ expectedAmount: '10.00',
+ },
+ {
+ id: 'fDAI',
+ name: 'DAI (fake)',
+ amount: '200000',
+ expectedAmount: '2.00',
+ },
+ {
+ id: 'fBTC',
+ name: 'BTC (fake)',
+ amount: '600000',
+ expectedAmount: '6.00',
+ },
+ {
+ id: 'fEURO',
+ name: 'EURO (fake)',
+ amount: '800000',
+ expectedAmount: '8.00',
+ },
+ ];
+
+ before('faucet assets to connected vega wallet', function () {
+ for (const { id, amount } of assets) {
+ cy.vega_wallet_faucet_assets_without_check(
+ id,
+ amount,
+ vegaWalletPublicKey
+ );
+ }
cy.reload();
cy.wait_for_spinner();
cy.connectVegaWallet();
cy.ethereum_wallet_connect();
});
- it('should see fUSDC assets - within vega wallet', function () {
- let currency = { id: faucetAssets.USDCFake, name: 'USDC (fake)' };
- cy.get(walletContainer).within(() => {
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id, txTimeout)
- .should('be.visible');
+ for (const { id, name, expectedAmount } of assets) {
+ it(`should see ${id} within vega wallet`, () => {
+ cy.get(walletContainer).within(() => {
+ cy.get(vegaWalletCurrencyTitle)
+ .contains(id, txTimeout)
+ .should('be.visible');
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .siblings()
- .invoke('text')
- .should('not.be.empty');
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .contains(currency.name);
+ cy.get(vegaWalletCurrencyTitle)
+ .contains(id)
+ .parent()
+ .siblings()
+ .within((el) => {
+ const value = parseFloat(el.text());
+ cy.wrap(value).should('be.gte', parseFloat(expectedAmount));
+ });
+
+ cy.get(vegaWalletCurrencyTitle)
+ .contains(id)
+ .parent()
+ .contains(name);
+ });
});
- });
-
- it('should see fBTC assets - within vega wallet', function () {
- let currency = { id: faucetAssets.BTCFake, name: 'BTC (fake)' };
- cy.get(walletContainer).within(() => {
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id, txTimeout)
- .should('be.visible');
-
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .siblings()
- .within(() => cy.contains_exactly('6.00').should('be.visible'));
-
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .contains(currency.name);
- });
- });
-
- it('should see fEURO assets - within vega wallet', function () {
- let currency = { id: faucetAssets.EUROFake, name: 'EURO (fake)' };
- cy.get(walletContainer).within(() => {
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id, txTimeout)
- .should('be.visible');
-
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .siblings()
- .within(() => cy.contains_exactly('8.00').should('be.visible'));
-
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .contains(currency.name);
- });
- });
-
- it('should see fDAI assets - within vega wallet', function () {
- let currency = { id: faucetAssets.DAIFake, name: 'DAI (fake)' };
- cy.get(walletContainer).within(() => {
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id, txTimeout)
- .should('be.visible');
-
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .siblings()
- .within(() => cy.contains_exactly('2.00').should('be.visible'));
-
- cy.get(vegaWalletCurrencyTitle)
- .contains(currency.id)
- .parent()
- .contains(currency.name);
- });
- });
+ }
});
});
}
diff --git a/apps/governance-e2e/src/integration/view/withdraw.cy.js b/apps/governance-e2e/src/integration/view/withdraw.cy.js
deleted file mode 100644
index 51672eff4..000000000
--- a/apps/governance-e2e/src/integration/view/withdraw.cy.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const connectToVegaBtn = '[data-testid="connect-to-vega-wallet-btn"]';
-
-context(
- 'Withdraw Page - verify elements on page',
- { tags: '@smoke' },
- function () {
- before('navigate to withdrawals page', function () {
- cy.visit('/').navigate_to('withdraw');
- });
-
- describe('with wallets disconnected', function () {
- it('should have withdraw tab highlighted', function () {
- cy.verify_tab_highlighted('token');
- });
-
- it('should have WITHDRAW header visible', function () {
- cy.verify_page_header('Withdrawals');
- });
-
- it('should have connect Vega wallet button', function () {
- cy.get(connectToVegaBtn)
- .should('be.visible')
- .and('have.text', 'Connect Vega wallet');
- });
- });
- }
-);
diff --git a/apps/governance-e2e/src/support/common.functions.js b/apps/governance-e2e/src/support/common.functions.js
index f27cd1fa5..7b2a80971 100644
--- a/apps/governance-e2e/src/support/common.functions.js
+++ b/apps/governance-e2e/src/support/common.functions.js
@@ -22,25 +22,32 @@ const navigation = {
};
const topLevelRoutes = ['proposals', 'validators', 'rewards'];
+const tokenDropDown = 'state-trigger';
Cypress.Commands.add('navigate_to', (page) => {
- const tokenDropDown = 'state-trigger';
-
if (!topLevelRoutes.includes(page)) {
- cy.getByTestId(tokenDropDown, { timeout: 10000 }).click();
- cy.getByTestId('token-dropdown').within(() => {
- cy.get(navigation[page]).click();
+ // FIXME: Timeout madness
+ cy.getByTestId(tokenDropDown, { timeout: 60000 }).eq(0).click();
+ cy.get('[data-testid="token-dropdown"]:visible').within(() => {
+ cy.get(navigation[page]).eq(0).click();
});
} else {
return cy.get(navigation.section, { timeout: 10000 }).within(() => {
- cy.get(navigation[page]).click();
+ cy.get(navigation[page]).eq(0).click();
});
}
});
Cypress.Commands.add('verify_tab_highlighted', (page) => {
return cy.get(navigation.section).within(() => {
- cy.get(navigation[page]).should('have.attr', 'aria-current');
+ if (!topLevelRoutes.includes(page)) {
+ cy.getByTestId(tokenDropDown, { timeout: 10000 }).eq(0).click();
+ cy.get('[data-testid="token-dropdown"]:visible').within(() => {
+ cy.get(navigation[page]).should('have.attr', 'aria-current');
+ });
+ } else {
+ cy.get(navigation[page]).should('have.attr', 'aria-current');
+ }
});
});
@@ -59,7 +66,7 @@ export function associateTokenStartOfTests() {
cy.highlight(`Associating tokens for first time`);
cy.ethereum_wallet_connect();
cy.connectVegaWallet();
- cy.get('[href="/token/associate"]').first().click();
+ cy.get('[href="/token/associate"]:visible').first().click();
cy.getByTestId('associate-radio-wallet', { timeout: 30000 }).click();
cy.getByTestId('token-amount-input', epochTimeout).type('1');
cy.getByTestId('token-input-submit-button', txTimeout)
diff --git a/apps/governance-e2e/src/support/staking.functions.js b/apps/governance-e2e/src/support/staking.functions.js
index 7e41942ad..54bd0a7f8 100644
--- a/apps/governance-e2e/src/support/staking.functions.js
+++ b/apps/governance-e2e/src/support/staking.functions.js
@@ -3,10 +3,10 @@ const tokenSubmitButton = '[data-testid="token-input-submit-button"]';
const tokenInputApprove = '[data-testid="token-input-approve-button"]';
const addStakeRadioButton = '[data-testid="add-stake-radio"]';
const removeStakeRadioButton = '[data-testid="remove-stake-radio"]';
-const ethWalletAssociateButton = '[href="/token/associate"]';
-const ethWalletDissociateButton = '[href="/token/disassociate"]';
+const ethWalletAssociateButton = '[href="/token/associate"]:visible';
+const ethWalletDissociateButton = '[href="/token/disassociate"]:visible';
const vegaWalletUnstakedBalance =
- '[data-testid="vega-wallet-balance-unstaked"]';
+ '[data-testid="vega-wallet-balance-unstaked"]:visible';
const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
const associateWalletRadioButton = '[data-testid="associate-radio-wallet"]';
const associateContractRadioButton = '[data-testid="associate-radio-contract"]';
diff --git a/apps/governance-e2e/src/support/wallet-eth.functions.js b/apps/governance-e2e/src/support/wallet-eth.functions.js
index da0c25160..c02ed1ad9 100644
--- a/apps/governance-e2e/src/support/wallet-eth.functions.js
+++ b/apps/governance-e2e/src/support/wallet-eth.functions.js
@@ -1,5 +1,6 @@
-const ethWalletContainer = '[data-testid="ethereum-wallet"]';
-const connectToEthButton = '[data-testid="connect-to-eth-wallet-button"]';
+const ethWalletContainer = '[data-testid="ethereum-wallet"]:visible';
+const connectToEthButton =
+ '[data-testid="connect-to-eth-wallet-button"]:visible';
const capsuleWalletConnectButton = '[data-testid="web3-connector-Unknown"]';
Cypress.Commands.add('ethereum_wallet_connect', () => {
diff --git a/apps/governance-e2e/src/support/wallet-teardown.functions.js b/apps/governance-e2e/src/support/wallet-teardown.functions.js
index cfcf0eb43..12b741a66 100644
--- a/apps/governance-e2e/src/support/wallet-teardown.functions.js
+++ b/apps/governance-e2e/src/support/wallet-teardown.functions.js
@@ -7,7 +7,7 @@ import {
} from '@vegaprotocol/smart-contracts';
import { ethers, Wallet } from 'ethers';
-const vegaWalletContainer = '[data-testid="vega-wallet"]';
+const vegaWalletContainer = 'aside [data-testid="vega-wallet"]';
const vegaWalletMnemonic = Cypress.env('vegaWalletMnemonic');
const vegaWalletPubKey = Cypress.env('vegaWalletPublicKey');
const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
@@ -95,7 +95,7 @@ Cypress.Commands.add('faucet_asset', function (assetEthAddress) {
});
Cypress.Commands.add('vega_wallet_teardown', function () {
- cy.get('[data-testid="associated-amount"]')
+ cy.get('aside [data-testid="associated-amount"]')
.should('be.visible')
.invoke('text')
.as('associatedAmount');
diff --git a/apps/governance/src/components/nav/nav-draw.tsx b/apps/governance/src/components/nav/nav-draw.tsx
deleted file mode 100644
index 4e7651341..000000000
--- a/apps/governance/src/components/nav/nav-draw.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import classNames from 'classnames';
-import { NavLink } from 'react-router-dom';
-import {
- AppStateActionType,
- useAppState,
-} from '../../contexts/app-state/app-state-context';
-import * as Dialog from '@radix-ui/react-dialog';
-import { EthWallet } from '../eth-wallet';
-import { VegaWallet } from '../vega-wallet';
-import { useTranslation } from 'react-i18next';
-
-interface Route {
- name: string;
- path: string;
-}
-
-const DrawerSection = ({ children }: { children: React.ReactNode }) => (
-
{children}
-);
-
-const IconLine = ({ inverted }: { inverted: boolean }) => (
-
-);
-
-const DrawerNavLinks = ({
- isInverted,
- routes,
-}: {
- isInverted?: boolean;
- routes: Route[];
-}) => {
- const { appDispatch } = useAppState();
- const { t } = useTranslation();
- const linkProps = {
- end: true,
- onClick: () =>
- appDispatch({ type: AppStateActionType.SET_DRAWER, isOpen: false }),
- };
- const navClasses = classNames('flex flex-col');
-
- return (
-
- );
-};
-
-export const NavDrawer = ({
- inverted,
- routes,
-}: {
- inverted: boolean;
- routes: Route[];
-}) => {
- const { appState, appDispatch } = useAppState();
-
- const drawerContentClasses = classNames(
- 'drawer-content', // needed for css animation
- // Positions the modal in the center of screen
- 'fixed w-[80vw] max-w-[420px] top-0 right-0',
- 'flex flex-col flex-nowrap justify-between h-full bg-banner overflow-y-scroll border-l border-white',
- 'bg-black text-neutral-200'
- );
- return (
- <>
-
-
-
- appDispatch({
- type: AppStateActionType.SET_DRAWER,
- isOpen,
- })
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/apps/governance/src/components/nav/nav-dropdown.tsx b/apps/governance/src/components/nav/nav-dropdown.tsx
deleted file mode 100644
index e28059c61..000000000
--- a/apps/governance/src/components/nav/nav-dropdown.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState } from 'react';
-import Routes, { TOKEN_DROPDOWN_ROUTES } from '../../routes/routes';
-import { useTranslation } from 'react-i18next';
-import type { NavbarTheme } from './nav-link';
-import { AppNavLink } from './nav-link';
-import {
- NavDropdownMenu,
- NavDropdownMenuContent,
- NavDropdownMenuItem,
- NavDropdownMenuTrigger,
-} from '@vegaprotocol/ui-toolkit';
-
-export const NavDropDown = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => {
- const { t } = useTranslation();
- const [isOpen, setOpen] = useState(false);
- return (
-
setOpen(open)}>
- setOpen(!isOpen)}
- >
- {t('Token')}
-
- }
- testId="token-dd"
- path={Routes.TOKEN}
- navbarTheme={navbarTheme}
- />
-
-
- {TOKEN_DROPDOWN_ROUTES.map((r) => (
- setOpen(false)}>
-
-
- ))}
-
-
- );
-};
diff --git a/apps/governance/src/components/nav/nav-link.tsx b/apps/governance/src/components/nav/nav-link.tsx
deleted file mode 100644
index 1408b8dbe..000000000
--- a/apps/governance/src/components/nav/nav-link.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import classNames from 'classnames';
-import { NavLink } from 'react-router-dom';
-import type { HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { getNavLinkClassNames } from '@vegaprotocol/ui-toolkit';
-
-export type NavbarTheme = 'inherit' | 'dark' | 'yellow';
-
-interface AppNavLinkProps {
- name: ReactNode | string;
- path: string;
- navbarTheme: NavbarTheme;
- testId?: string;
- target?: HTMLAttributeAnchorTarget;
- end?: boolean;
- fullWidth?: boolean;
- subNav?: boolean;
-}
-
-export const AppNavLink = ({
- name,
- path,
- navbarTheme,
- target,
- testId,
- end = false,
- fullWidth = false,
- subNav = false,
-}: AppNavLinkProps) => {
- const borderClasses = classNames(
- 'absolute h-0.5 w-full bottom-[-1px] left-0',
- {
- 'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
- 'bg-black': navbarTheme === 'yellow',
- }
- );
- return (
-
- {({ isActive }) => {
- return (
-
- {name}
- {isActive && (
-
- )}
-
- );
- }}
-
- );
-};
diff --git a/apps/governance/src/components/nav/nav.css b/apps/governance/src/components/nav/nav.css
deleted file mode 100644
index 6b50b698a..000000000
--- a/apps/governance/src/components/nav/nav.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@keyframes slideIn {
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0);
- }
-}
-
-@keyframes slideOut {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(100%);
- }
-}
-
-.drawer-content[data-state='open'] {
- animation: slideIn 150ms ease-out forwards;
-}
-
-.drawer-content[data-state='closed'] {
- animation: slideOut 150ms ease-in forwards;
-}
diff --git a/apps/governance/src/components/nav/nav.spec.tsx b/apps/governance/src/components/nav/nav.spec.tsx
deleted file mode 100644
index 3d29a4e38..000000000
--- a/apps/governance/src/components/nav/nav.spec.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { render, screen, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { Nav } from './nav';
-
-jest.mock('@vegaprotocol/environment', () => ({
- ...jest.requireActual('@vegaprotocol/environment'),
- NetworkSwitcher: () =>
,
- useEnvironment: () => ({ VEGA_ENV: 'MAINNET' }),
-}));
-
-const renderComponent = (initialEntries?: string[]) => {
- return render(
-
-
-
- );
-};
-
-describe('nav', () => {
- it('Renders logo with link to home', () => {
- renderComponent();
- expect(screen.getByTestId('logo-link')).toHaveProperty(
- 'href',
- 'http://localhost/'
- );
- });
- it('Renders network switcher', () => {
- renderComponent();
- expect(screen.getByTestId('network-switcher')).toBeInTheDocument();
- });
- it('Renders all top level routes', () => {
- renderComponent();
- expect(screen.getByTestId('Proposals')).toHaveProperty(
- 'href',
- 'http://localhost/proposals'
- );
- expect(screen.getByTestId('Validators')).toHaveProperty(
- 'href',
- 'http://localhost/validators'
- );
- expect(screen.getByTestId('Rewards')).toHaveProperty(
- 'href',
- 'http://localhost/rewards'
- );
- });
- it('Shows active state on dropdown trigger when on home route for subroutes', () => {
- const { getByTestId } = renderComponent(['/token']);
- const dd = getByTestId('token-dd');
- expect(within(dd).getByTestId('link-active')).toBeInTheDocument();
- });
- it('Shows active state on dropdown trigger when on sub route of dropdown', () => {
- const { getByTestId } = renderComponent(['/token/withdraw']);
- const dd = getByTestId('token-dd');
- expect(within(dd).getByTestId('link-active')).toBeInTheDocument();
- });
-});
diff --git a/apps/governance/src/components/nav/nav.tsx b/apps/governance/src/components/nav/nav.tsx
index 67bd850d8..37147590e 100644
--- a/apps/governance/src/components/nav/nav.tsx
+++ b/apps/governance/src/components/nav/nav.tsx
@@ -1,81 +1,85 @@
-import { Link } from 'react-router-dom';
import { NetworkSwitcher } from '@vegaprotocol/environment';
-import { useEffect, useState } from 'react';
-import { TOP_LEVEL_ROUTES } from '../../routes/routes';
+import { TOKEN_DROPDOWN_ROUTES, TOP_LEVEL_ROUTES } from '../../routes/routes';
import { useTranslation } from 'react-i18next';
-import logoWhiteText from '../../images/logo-white-text.png';
-import logoBlackText from '../../images/logo-black-text.png';
-import debounce from 'lodash/debounce';
-import { NavDrawer } from './nav-draw';
-import { Nav as ToolkitNav } from '@vegaprotocol/ui-toolkit';
-import { AppNavLink } from './nav-link';
-import { NavDropDown } from './nav-dropdown';
-
-const useDebouncedResize = () => {
- const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
- useEffect(() => {
- const handleResizeDebounced = debounce(() => {
- setWindowWidth(window.innerWidth);
- }, 300);
-
- window.addEventListener('resize', handleResizeDebounced);
-
- return () => {
- window.removeEventListener('resize', handleResizeDebounced);
- };
- }, []);
- return {
- windowWidth,
- };
-};
-
-type NavbarTheme = 'inherit' | 'dark' | 'yellow';
-interface NavbarProps {
- navbarTheme?: NavbarTheme;
-}
-
-export const Nav = ({ navbarTheme = 'inherit' }: NavbarProps) => {
- const { windowWidth } = useDebouncedResize();
- const isDesktop = windowWidth > 995;
+import type { NavigationProps } from '@vegaprotocol/ui-toolkit';
+import { useNavigationDrawer } from '@vegaprotocol/ui-toolkit';
+import {
+ Navigation,
+ NavigationBreakpoint,
+ NavigationContent,
+ NavigationItem,
+ NavigationLink,
+ NavigationList,
+ NavigationTrigger,
+} from '@vegaprotocol/ui-toolkit';
+import { EthWallet } from '../eth-wallet';
+import { VegaWallet } from '../vega-wallet';
+import { useLocation, useMatch } from 'react-router-dom';
+import { useEffect } from 'react';
+export const Nav = ({ theme }: Pick
) => {
const { t } = useTranslation();
- const isYellow = navbarTheme === 'yellow';
+ const setDrawerOpen = useNavigationDrawer((state) => state.setDrawerOpen);
+
+ const location = useLocation();
+ const isOnToken = useMatch('token/*');
+ useEffect(() => {
+ setDrawerOpen(false);
+ }, [location, setDrawerOpen]);
+
+ const topLevel = TOP_LEVEL_ROUTES.map(({ name, path }) => (
+
+ {name}
+
+ ));
+
+ const secondLevel = TOKEN_DROPDOWN_ROUTES.map(({ name, path, end }) => (
+
+
+ {name}
+
+
+ ));
return (
-
- 
-
- }
- title={undefined}
- titleContent={}
- >
- {isDesktop ? (
-
- ) : (
-
- )}
-
+
+
+
+
+
+
+
+ {topLevel}
+
+
+ {t('Token')}
+
+
+
+ {secondLevel}
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/apps/governance/src/components/page-templates/template-sidebar.tsx b/apps/governance/src/components/page-templates/template-sidebar.tsx
index 61f4814ce..503fbf04f 100644
--- a/apps/governance/src/components/page-templates/template-sidebar.tsx
+++ b/apps/governance/src/components/page-templates/template-sidebar.tsx
@@ -27,7 +27,7 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
) : null}
diff --git a/apps/governance/src/contexts/app-state/app-state-context.ts b/apps/governance/src/contexts/app-state/app-state-context.ts
index 927d2bdf0..c2b8c3dce 100644
--- a/apps/governance/src/contexts/app-state/app-state-context.ts
+++ b/apps/governance/src/contexts/app-state/app-state-context.ts
@@ -37,9 +37,6 @@ export interface AppState {
/** Whether or not the connect to Ethereum wallet overlay is open */
ethConnectOverlay: boolean;
- /** Whether or not the mobile drawer is open. Only relevant on screens smaller than 960 */
- drawerOpen: boolean;
-
/** Whether or not the transaction modal is open */
transactionOverlay: boolean;
/**
diff --git a/apps/governance/src/contexts/app-state/app-state-provider.tsx b/apps/governance/src/contexts/app-state/app-state-provider.tsx
index 3ce98eaa8..2b65344a9 100644
--- a/apps/governance/src/contexts/app-state/app-state-provider.tsx
+++ b/apps/governance/src/contexts/app-state/app-state-provider.tsx
@@ -17,7 +17,6 @@ const initialAppState: AppState = {
vegaWalletOverlay: false,
vegaWalletManageOverlay: false,
ethConnectOverlay: false,
- drawerOpen: false,
transactionOverlay: false,
bannerMessage: '',
};
@@ -36,7 +35,6 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
return {
...state,
vegaWalletOverlay: action.isOpen,
- drawerOpen: action.isOpen ? false : state.drawerOpen,
};
}
case AppStateActionType.SET_VEGA_WALLET_MANAGE_OVERLAY: {
@@ -44,20 +42,17 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
...state,
vegaWalletManageOverlay: action.isOpen,
vegaWalletOverlay: action.isOpen ? false : state.vegaWalletOverlay,
- drawerOpen: action.isOpen ? false : state.drawerOpen,
};
}
case AppStateActionType.SET_ETH_WALLET_OVERLAY: {
return {
...state,
ethConnectOverlay: action.isOpen,
- drawerOpen: action.isOpen ? false : state.drawerOpen,
};
}
case AppStateActionType.SET_DRAWER: {
return {
...state,
- drawerOpen: action.isOpen,
vegaWalletOverlay: false,
};
}
diff --git a/apps/governance/src/routes/proposals/components/list-asset/list-asset.spec.tsx b/apps/governance/src/routes/proposals/components/list-asset/list-asset.spec.tsx
index fa119241b..fa1026151 100644
--- a/apps/governance/src/routes/proposals/components/list-asset/list-asset.spec.tsx
+++ b/apps/governance/src/routes/proposals/components/list-asset/list-asset.spec.tsx
@@ -54,7 +54,6 @@ const mockAppState: AppState = {
vegaWalletOverlay: false,
vegaWalletManageOverlay: false,
ethConnectOverlay: false,
- drawerOpen: false,
transactionOverlay: false,
bannerMessage: '',
};
diff --git a/apps/governance/src/routes/proposals/hooks/use-vote-information.spec.ts b/apps/governance/src/routes/proposals/hooks/use-vote-information.spec.ts
index 285764ca2..7725d3626 100644
--- a/apps/governance/src/routes/proposals/hooks/use-vote-information.spec.ts
+++ b/apps/governance/src/routes/proposals/hooks/use-vote-information.spec.ts
@@ -17,7 +17,6 @@ const mockAppState: AppState = {
vegaWalletOverlay: false,
vegaWalletManageOverlay: false,
ethConnectOverlay: false,
- drawerOpen: false,
transactionOverlay: false,
bannerMessage: '',
};
diff --git a/apps/governance/src/routes/routes.ts b/apps/governance/src/routes/routes.ts
index 913a24fab..61b276758 100644
--- a/apps/governance/src/routes/routes.ts
+++ b/apps/governance/src/routes/routes.ts
@@ -37,6 +37,7 @@ export const TOKEN_DROPDOWN_ROUTES = [
{
name: 'Token',
path: Routes.TOKEN,
+ end: true,
},
{
name: 'Supply & Vesting',
diff --git a/apps/trading-e2e/src/integration/navbar.cy.ts b/apps/trading-e2e/src/integration/navbar.cy.ts
index c3c1b0c28..b7db6860d 100644
--- a/apps/trading-e2e/src/integration/navbar.cy.ts
+++ b/apps/trading-e2e/src/integration/navbar.cy.ts
@@ -17,14 +17,10 @@ describe('Desktop view', { tags: '@smoke' }, () => {
links.forEach((link, index) => {
it(`${link} should be correctly rendered`, () => {
- cy.getByTestId('navbar')
- .find(`[data-testid="navbar-links"] a[data-testid=${link}]`)
+ cy.get('nav')
+ .find(`a[data-testid=${link}]:visible`)
.then((element) => {
- cy.contains('Loading...').should('not.exist');
cy.wrap(element).click();
- cy.wrap(element)
- .get('span.absolute.md\\:h-1.w-full')
- .should('exist');
cy.location('hash').should('equal', hashes[index]);
});
});
diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index bc65bcaae..a78d118ae 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -1,6 +1,4 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-import { NavLink, Link } from 'react-router-dom';
+import type { ComponentProps } from 'react';
import {
DApp,
NetworkSwitcher,
@@ -11,32 +9,22 @@ import { t } from '@vegaprotocol/i18n';
import { useGlobalStore } from '../../stores';
import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
import {
- Drawer,
- getNavLinkClassNames,
- getActiveNavLinkClassNames,
- Nav,
- NewTab,
ThemeSwitcher,
+ Navigation,
+ NavigationList,
+ NavigationItem,
+ NavigationLink,
+ ExternalLink,
+ Icon,
+ NavigationBreakpoint,
} from '@vegaprotocol/ui-toolkit';
-import { Vega } from '../icons/vega';
-import type { HTMLAttributeAnchorTarget } from 'react';
+
import { Links, Routes } from '../../pages/client-router';
-type NavbarTheme = 'inherit' | 'dark' | 'yellow';
-interface NavbarProps {
- navbarTheme?: NavbarTheme;
-}
-
-const LinkList = ({
- navbarTheme,
- className = 'flex',
- dataTestId = 'navbar-links',
- onNavigate,
+export const Navbar = ({
+ theme = 'system',
}: {
- navbarTheme: NavbarTheme;
- className?: string;
- dataTestId?: string;
- onNavigate?: () => void;
+ theme: ComponentProps