Merge branch 'master' into multisig-label

.github/workflows/cypress.yml

@@ -1,10 +1,6 @@
 name: Cypress Tests
 
-on:
+on: [push, pull_request]
-  push:
-    branches:
-      - master
-  pull_request:
 jobs:
   cypress:
     runs-on: ${{ matrix.os }}
@@ -25,7 +21,7 @@ jobs:
           cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
       - name: ${{ matrix.browser }} browser tests (Mempool)
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         with:
           tag: ${{ github.event_name }}
           working-directory: frontend
@@ -36,9 +32,9 @@ jobs:
           record: true
           parallel: true
           spec: |
-            cypress/integration/mainnet/*.spec.ts
+            cypress/e2e/mainnet/*.spec.ts
-            cypress/integration/signet/*.spec.ts
+            cypress/e2e/signet/*.spec.ts
-            cypress/integration/testnet/*.spec.ts
+            cypress/e2e/testnet/*.spec.ts
           group: Tests on ${{ matrix.browser }} (Mempool)
           browser: ${{ matrix.browser }}
           ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
@@ -49,7 +45,7 @@ jobs:
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
 
       - name: ${{ matrix.browser }} browser tests (Liquid)
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         if: always()
         with:
           tag: ${{ github.event_name }}
@@ -61,8 +57,8 @@ jobs:
           record: true
           parallel: true
           spec: |
-            cypress/integration/liquid/liquid.spec.ts
+            cypress/e2e/liquid/liquid.spec.ts
-            cypress/integration/liquidtestnet/liquidtestnet.spec.ts
+            cypress/e2e/liquidtestnet/liquidtestnet.spec.ts
           group: Tests on ${{ matrix.browser }} (Liquid)
           browser: ${{ matrix.browser }}
           ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
@@ -73,7 +69,7 @@ jobs:
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
 
       - name: ${{ matrix.browser }} browser tests (Bisq)
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         if: always()
         with:
           tag: ${{ github.event_name }}
@@ -84,7 +80,7 @@ jobs:
           wait-on-timeout: 120
           record: true
           parallel: true
-          spec: cypress/integration/bisq/bisq.spec.ts
+          spec: cypress/e2e/bisq/bisq.spec.ts
           group: Tests on ${{ matrix.browser }} (Bisq)
           browser: ${{ matrix.browser }}
           ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'

frontend/cypress.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'ry4br7',
+  videosFolder: 'cypress/videos',
+  screenshotsFolder: 'cypress/screenshots',
+  fixturesFolder: 'cypress/fixtures',
+  video: false,
+  retries: {
+    runMode: 3,
+    openMode: 0,
+  },
+  chromeWebSecurity: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:4200',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

frontend/cypress.json

@@ -1,16 +0,0 @@
-{
-  "projectId": "ry4br7",
-  "integrationFolder": "cypress/integration",
-  "supportFile": "cypress/support/index.ts",
-  "videosFolder": "cypress/videos",
-  "screenshotsFolder": "cypress/screenshots",
-  "pluginsFile": "cypress/plugins/index.js",
-  "fixturesFolder": "cypress/fixtures",
-  "baseUrl": "http://localhost:4200",
-  "video": false,
-  "retries": {
-    "runMode": 3,
-    "openMode": 0
-  },
-  "chromeWebSecurity": false
-}

frontend/cypress/e2e/bisq/bisq.spec.ts

@@ -35,13 +35,14 @@ describe('Bisq', () => {
         "Proposal", "Reimbursement request", "Transfer BSQ", "Unlock", "Vote reveal"
       ];
       filters.forEach((filter) => {
-        it(`filters the transaction screen by ${filter}`, () => {
+        it.only(`filters the transaction screen by ${filter}`, () => {
           cy.visit(`${basePath}/transactions`);
+          cy.wait('@txs');
           cy.waitForSkeletonGone();
           cy.get('#filter').click();
           cy.contains(filter).find('input').click();
-          //TODO: change this waiter
+          cy.wait('@txs');
-          cy.wait(1000);
+          cy.wait(500);
           cy.get('td:nth-of-type(2)').each(($td) => {
             expect($td.text().trim()).to.eq(filter);
           });
@@ -56,7 +57,7 @@ describe('Bisq', () => {
         filters.forEach((filter) => {
           cy.contains(filter).find('input').click();
           //TODO: change this waiter
-          cy.wait(1000);
+          cy.wait(1500);
         });
         cy.get('td:nth-of-type(2)').each(($td) => {
           const regex = new RegExp(`${filters.join('|')}`, 'g');

frontend/cypress/e2e/liquid/liquid.spec.ts

@@ -124,7 +124,7 @@ describe('Liquid', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
         cy.get('.container-xl input').click().type('Liquid Bitcoin').then(() => {
-          cy.get('ngb-typeahead-window').should('have.length', 1);
+          cy.get('ngb-typeahead-window', { timeout: 30000 }).should('have.length', 1);
         });
       });
 
@@ -132,7 +132,7 @@ describe('Liquid', () => {
         cy.visit(`${basePath}/assets`);
         cy.waitForSkeletonGone();
         cy.get('.container-xl input').click().type('Liquid AUD').then(() => {
-          cy.get('ngb-typeahead-window:nth-of-type(1) button').click();
+          cy.get('ngb-typeahead-window:nth-of-type(1) button', { timeout: 30000 }).click();
         });
       });
     });

frontend/cypress/e2e/mainnet/mainnet.spec.ts

@@ -189,7 +189,7 @@ describe('Mainnet', () => {
         cy.get('[data-cy="tx-2"] .table-tx-vin .highlight').invoke('text').should('contain', `${address}`);
       });
 
-      it.only('highlights both input and output addresses in the same transaction', () => {
+      it('highlights both input and output addresses in the same transaction', () => {
         const address = 'bc1q03u63r6hm7a3v6em58zdqtp446w2pw30nm63mv';
         cy.visit(`/address/${address}`);
         cy.waitForSkeletonGone();
@@ -241,7 +241,7 @@ describe('Mainnet', () => {
             cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
             cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
             cy.document().left();
-            cy.get('.title-block h1').invoke('text').should('equal', 'Next block');
+            cy.get('.title-block h1').invoke('text').should('equal', 'Next Block');
           });
         });
 

frontend/cypress/support/commands.ts

@@ -50,98 +50,98 @@ import { mockWebSocket } from './websocket';
 
 /* global Cypress */
 const codes = {
-    ArrowLeft: 37,
+  ArrowLeft: 37,
-    ArrowUp: 38,
+  ArrowUp: 38,
-    ArrowRight: 39,
+  ArrowRight: 39,
-    ArrowDown: 40
+  ArrowDown: 40
 }
 
 Cypress.Commands.add('waitForSkeletonGone', () => {
-    cy.waitUntil(() => {
+  cy.waitUntil(() => {
-        return Cypress.$('.skeleton-loader').length === 0;
+    return Cypress.$('.skeleton-loader').length === 0;
-    }, { verbose: true, description: "waitForSkeletonGone", errorMsg: "skeleton loaders never went away", timeout: 15000, interval: 50});
+  }, { verbose: true, description: "waitForSkeletonGone", errorMsg: "skeleton loaders never went away", timeout: 15000, interval: 50 });
 });
 
 Cypress.Commands.add(
-    "waitForPageIdle",
+  "waitForPageIdle",
-    () => {
+  () => {
-        console.warn("Waiting for page idle state");
+    console.warn("Waiting for page idle state");
-        const pageIdleDetector = new PageIdleDetector();
+    const pageIdleDetector = new PageIdleDetector();
-        pageIdleDetector.WaitForPageToBeIdle();
+    pageIdleDetector.WaitForPageToBeIdle();
-    }
+  }
 );
 
 Cypress.Commands.add('mockMempoolSocket', () => {
   mockWebSocket();
 });
 
-Cypress.Commands.add('changeNetwork', (network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet" ) => {
+Cypress.Commands.add('changeNetwork', (network: "testnet" | "signet" | "liquid" | "bisq" | "mainnet") => {
-    cy.get('.dropdown-toggle').click().then(() => {
+  cy.get('.dropdown-toggle').click().then(() => {
-        cy.get(`.${network}`).click().then(() => {
+    cy.get(`a.${network}`).click().then(() => {
-            cy.waitForPageIdle();
+      cy.waitForPageIdle();
-            if(network !== 'bisq'){
+      if (network !== 'bisq') {
-                cy.waitForSkeletonGone();
+        cy.waitForSkeletonGone();
-            }
+      }
-        });
     });
+  });
 });
 
 // https://github.com/bahmutov/cypress-arrows/blob/8f0303842a343550fbeaf01528d01d1ff213b70c/src/index.js
-function keydownCommand ($el, key) {
+function keydownCommand($el, key) {
-    const message = `sending the "${key}" keydown event`
+  const message = `sending the "${key}" keydown event`
-    const log = Cypress.log({
+  const log = Cypress.log({
-      name: `keydown: ${key}`,
+    name: `keydown: ${key}`,
-      message: message,
+    message: message,
-      consoleProps: function () {
+    consoleProps: function () {
-        return {
+      return {
-          Subject: $el
+        Subject: $el
-        }
       }
-    })
+    }
+  })
 
-    const e = $el.createEvent('KeyboardEvent')
+  const e = $el.createEvent('KeyboardEvent')
 
-    Object.defineProperty(e, 'key', {
+  Object.defineProperty(e, 'key', {
-      get: function () {
+    get: function () {
-        return key
+      return key
-      }
+    }
-    })
+  })
 
-    Object.defineProperty(e, 'keyCode', {
+  Object.defineProperty(e, 'keyCode', {
-      get: function () {
+    get: function () {
-        return this.keyCodeVal
+      return this.keyCodeVal
-      }
+    }
-    })
+  })
-    Object.defineProperty(e, 'which', {
+  Object.defineProperty(e, 'which', {
-      get: function () {
+    get: function () {
-        return this.keyCodeVal
+      return this.keyCodeVal
-      }
+    }
-    })
+  })
-    var metaKey = false
+  var metaKey = false
 
-    Object.defineProperty(e, 'metaKey', {
+  Object.defineProperty(e, 'metaKey', {
-      get: function () {
+    get: function () {
-        return metaKey
+      return metaKey
-      }
+    }
-    })
+  })
 
-    Object.defineProperty(e, 'shiftKey', {
+  Object.defineProperty(e, 'shiftKey', {
-      get: function () {
+    get: function () {
-        return false
+      return false
-      }
+    }
-    })
+  })
-    e.keyCodeVal = codes[key]
+  e.keyCodeVal = codes[key]
 
-    e.initKeyboardEvent('keydown', true, true,
+  e.initKeyboardEvent('keydown', true, true,
-      $el.defaultView, false, false, false, false, e.keyCodeVal, e.keyCodeVal)
+    $el.defaultView, false, false, false, false, e.keyCodeVal, e.keyCodeVal)
 
-    $el.dispatchEvent(e)
+  $el.dispatchEvent(e)
-    log.snapshot().end()
+  log.snapshot().end()
-    return $el
+  return $el
-  }
+}
 
-  Cypress.Commands.add('keydown', { prevSubject: "dom" }, keydownCommand)
+Cypress.Commands.add('keydown', { prevSubject: "dom" }, keydownCommand)
-  Cypress.Commands.add('left', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowLeft'))
+Cypress.Commands.add('left', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowLeft'))
-  Cypress.Commands.add('right', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowRight'))
+Cypress.Commands.add('right', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowRight'))
-  Cypress.Commands.add('up', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowUp'))
+Cypress.Commands.add('up', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowUp'))
-  Cypress.Commands.add('down', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowDown'))
+Cypress.Commands.add('down', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowDown'))

frontend/package-lock.json

@@ -70,7 +70,7 @@
       },
       "optionalDependencies": {
         "@cypress/schematic": "^1.3.0",
-        "cypress": "^9.6.1",
+        "cypress": "^10.0.2",
         "cypress-fail-on-console-error": "^2.1.3",
         "cypress-wait-until": "^1.7.1",
         "mock-socket": "^9.0.3",
@@ -6901,9 +6901,9 @@
       "devOptional": true
     },
     "node_modules/cypress": {
-      "version": "9.6.1",
+      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.0.2.tgz",
-      "integrity": "sha512-ECzmV7pJSkk+NuAhEw6C3D+RIRATkSb2VAHXDY6qGZbca/F9mv5pPsj2LO6Ty6oIFVBTrwCyL9agl28MtJMe2g==",
+      "integrity": "sha512-7+C4KHYBcfZrawss+Gt5PlS35rfc6ySc59JcHDVsIMm1E/J35dqE41UEXpdtwIq3549umCerNWnFADzqib4kcA==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
@@ -22471,9 +22471,9 @@
       "devOptional": true
     },
     "cypress": {
-      "version": "9.6.1",
+      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.0.2.tgz",
-      "integrity": "sha512-ECzmV7pJSkk+NuAhEw6C3D+RIRATkSb2VAHXDY6qGZbca/F9mv5pPsj2LO6Ty6oIFVBTrwCyL9agl28MtJMe2g==",
+      "integrity": "sha512-7+C4KHYBcfZrawss+Gt5PlS35rfc6ySc59JcHDVsIMm1E/J35dqE41UEXpdtwIq3549umCerNWnFADzqib4kcA==",
       "optional": true,
       "requires": {
         "@cypress/request": "^2.88.10",

frontend/package.json

@@ -122,7 +122,7 @@
   },
   "optionalDependencies": {
     "@cypress/schematic": "^1.3.0",
-    "cypress": "^9.6.1",
+    "cypress": "^10.0.2",
     "cypress-fail-on-console-error": "^2.1.3",
     "cypress-wait-until": "^1.7.1",
     "mock-socket": "^9.0.3",

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -80,7 +80,7 @@ export class BlocksList implements OnInit {
       this.stateService.blocks$
         .pipe(
           switchMap((block) => {
-            if (block[0].height <= this.lastBlockHeight) {
+            if (block[0].height < this.lastBlockHeight) {
               return []; // Return an empty stream so the last pipe is not executed
             }
             this.lastBlockHeight = block[0].height;

frontend/src/app/components/svg-images/svg-images.component.html

@@ -15,10 +15,10 @@
       <path d="M464.598 56.5679C452.881 56.5679 444.371 48.0576 444.371 36.32C444.371 24.644 452.881 16.1748 464.598 16.1748C476.254 16.1748 484.723 24.644 484.723 36.32C484.723 48.0576 476.254 56.5679 464.598 56.5679ZM464.598 23.1023C457.198 23.1023 452.018 28.5291 452.018 36.32C452.018 44.1108 457.198 49.5377 464.598 49.5377C471.937 49.5377 477.076 44.1108 477.076 36.32C477.076 28.5291 471.958 23.1023 464.598 23.1023Z" fill="white"/>
       <path d="M499.996 1.14844H492.391V56.1982H499.996V1.14844Z" fill="white"/>
       <path d="M124.706 110.25C124.706 118.849 117.772 125.791 109.183 125.791H15.5236C6.93387 125.791 0 118.849 0 110.25V16.4837C0 7.88416 6.98561 0.942383 15.5236 0.942383H109.183C117.772 0.942383 124.706 7.88416 124.706 16.4837V110.25Z" fill="#2E3349"/>
-      <path d="M0 63.5225V110.25C0 118.849 6.98561 125.791 15.5753 125.791H109.183C117.772 125.791 124.758 118.849 124.758 110.25V63.5225H0Z" fill="url(#paint0_linear)"/>
+      <path d="M0 63.5225V110.25C0 118.849 6.98561 125.791 15.5753 125.791H109.183C117.772 125.791 124.758 118.849 124.758 110.25V63.5225H0Z" [attr.fill]="'url(#paint0_linear' + randomId + ')'"/>
       <path opacity="0.3" d="M109.909 109.11C109.909 111.026 108.615 112.581 107.011 112.581H90.8665C89.2624 112.581 87.9688 111.026 87.9688 109.11V17.6232C87.9688 15.7065 89.2624 14.1523 90.8665 14.1523H107.011C108.615 14.1523 109.909 15.7065 109.909 17.6232V109.11Z" fill="white"/>
       <defs>
-        <linearGradient id="paint0_linear" x1="62.3768" y1="36.3949" x2="62.3768" y2="156.837" gradientUnits="userSpaceOnUse">
+        <linearGradient [id]="'paint0_linear' + randomId" x1="62.3768" y1="36.3949" x2="62.3768" y2="156.837" gradientUnits="userSpaceOnUse">
           <stop stop-color="#AE61FF"/>
           <stop offset="1" stop-color="#13EFD8"/>
         </linearGradient>

frontend/src/app/components/svg-images/svg-images.component.ts

@@ -6,6 +6,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SvgImagesComponent {
+  randomId = Math.floor(Math.random() * 10000);
   @Input() name: string;
   @Input() class: string;
   @Input() style: string;