Merge branch 'master' into nymkappa/bugfix/index-blocks-prices-often

.github/workflows/cypress.yml

@@ -6,86 +6,53 @@ on:
 jobs:
   cypress:
     if: "!contains(github.event.pull_request.labels.*.name, 'ops') && !contains(github.head_ref, 'ops/')"
-    runs-on: ${{ matrix.os }}
+    runs-on: "ubuntu-latest"
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4, 5]
+        module: ["mempool", "liquid", "bisq"]
-        os: ["ubuntu-latest"]
+        include:
-        browser: [chrome]
+          - module: "mempool"
-    name: E2E tests on ${{ matrix.browser }} - ${{ matrix.os }}
+            spec: |
+              cypress/e2e/mainnet/*.spec.ts
+              cypress/e2e/signet/*.spec.ts
+              cypress/e2e/testnet/*.spec.ts
+          - module: "liquid"
+            spec: |
+              cypress/e2e/liquid/liquid.spec.ts
+              cypress/e2e/liquidtestnet/liquidtestnet.spec.ts
+          - module: "bisq"
+            spec: |
+              cypress/e2e/bisq/bisq.spec.ts
+          
+    name: E2E tests for ${{ matrix.module }}
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          path: ${{ matrix.module }}
+          
       - name: Setup node
         uses: actions/setup-node@v2
         with:
           node-version: 16.15.0
           cache: 'npm'
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: ${{ matrix.module }}/frontend/package-lock.json
-      - name: ${{ matrix.browser }} browser tests (Mempool)
-        uses: cypress-io/github-action@v4
-        with:
-          tag: ${{ github.event_name }}
-          working-directory: frontend
-          build: npm run config:defaults:mempool
-          start: npm run start:local-staging
-          wait-on: 'http://localhost:4200'
-          wait-on-timeout: 120
-          record: true
-          parallel: true
-          spec: |
-            cypress/e2e/mainnet/*.spec.ts
-            cypress/e2e/signet/*.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 }}'
-        env:
-          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
 
-      - name: ${{ matrix.browser }} browser tests (Liquid)
+      - name: Chrome browser tests (${{ matrix.module }})
         uses: cypress-io/github-action@v4
-        if: always()
         with:
           tag: ${{ github.event_name }}
-          working-directory: frontend
+          working-directory: ${{ matrix.module }}/frontend
-          build: npm run config:defaults:liquid
+          build: npm run config:defaults:${{ matrix.module }}
           start: npm run start:local-staging
           wait-on: 'http://localhost:4200'
           wait-on-timeout: 120
           record: true
           parallel: true
-          spec: |
+          spec: ${{ matrix.spec }}
-            cypress/e2e/liquid/liquid.spec.ts
+          group: Tests on Chrome (${{ matrix.module }})
-            cypress/e2e/liquidtestnet/liquidtestnet.spec.ts
+          browser: "chrome"
-          group: Tests on ${{ matrix.browser }} (Liquid)
-          browser: ${{ matrix.browser }}
-          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
-        env:
-          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-
-      - name: ${{ matrix.browser }} browser tests (Bisq)
-        uses: cypress-io/github-action@v4
-        if: always()
-        with:
-          tag: ${{ github.event_name }}
-          working-directory: frontend
-          build: npm run config:defaults:bisq
-          start: npm run start:local-staging
-          wait-on: 'http://localhost:4200'
-          wait-on-timeout: 120
-          record: true
-          parallel: true
-          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 }}'
         env:
           COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}

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

@@ -35,21 +35,23 @@ const getRectangle = ($el) => $el[0].getBoundingClientRect();
 describe('Mainnet', () => {
   beforeEach(() => {
     //cy.intercept('/sockjs-node/info*').as('socket');
-    cy.intercept('/api/block-height/*').as('block-height');
+    // cy.intercept('/api/block-height/*').as('block-height');
-    cy.intercept('/api/block/*').as('block');
+    // cy.intercept('/api/v1/block/*').as('block');
-    cy.intercept('/api/block/*/txs/0').as('block-txs');
+    // cy.intercept('/api/block/*/txs/0').as('block-txs');
-    cy.intercept('/api/tx/*/outspends').as('tx-outspends');
+    // cy.intercept('/api/v1/block/*/summary').as('block-summary');
-    cy.intercept('/resources/pools.json').as('pools');
+    // cy.intercept('/api/v1/outspends/*').as('outspends');
+    // cy.intercept('/api/tx/*/outspends').as('tx-outspends');
+    // cy.intercept('/resources/pools.json').as('pools');
 
     // Search Auto Complete
     cy.intercept('/api/address-prefix/1wiz').as('search-1wiz');
     cy.intercept('/api/address-prefix/1wizS').as('search-1wizS');
     cy.intercept('/api/address-prefix/1wizSA').as('search-1wizSA');
 
-    Cypress.Commands.add('waitForBlockData', () => {
+    // Cypress.Commands.add('waitForBlockData', () => {
-      cy.wait('@tx-outspends');
+    //   cy.wait('@tx-outspends');
-      cy.wait('@pools');
+    //   cy.wait('@pools');
-    });
+    // });
   });
 
   if (baseModule === 'mempool') {
@@ -409,7 +411,7 @@ describe('Mainnet', () => {
 
     it('loads the tv screen - desktop', () => {
       cy.viewport('macbook-16');
-      cy.visit('/');
+      cy.visit('/graphs/mempool');
       cy.waitForSkeletonGone();
       cy.get('#btn-tv').click().then(() => {
         cy.viewport('macbook-16');

frontend/cypress/e2e/signet/signet.spec.ts

@@ -60,10 +60,10 @@ describe('Signet', () => {
       });
     });
 
-    describe('tv mode', () => {
+    describe.skip('tv mode', () => {
       it('loads the tv screen - desktop', () => {
         cy.viewport('macbook-16');
-        cy.visit('/signet');
+        cy.visit('/signet/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.get('.chart-holder').should('be.visible');
@@ -73,19 +73,17 @@ describe('Signet', () => {
       });
 
       it('loads the tv screen - mobile', () => {
-        cy.visit('/signet');
+        cy.visit('/signet/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.viewport('iphone-8');
           cy.get('.chart-holder').should('be.visible');
           cy.get('.tv-only').should('not.exist');
-          //TODO: Remove comment when the bug is fixed
+          cy.get('#mempool-block-0').should('be.visible');
-          //cy.get('#mempool-block-0').should('be.visible');
         });
       });
     });
 
-
     it('loads the api screen', () => {
       cy.visit('/signet');
       cy.waitForSkeletonGone();

frontend/cypress/e2e/testnet/testnet.spec.ts

@@ -63,18 +63,17 @@ describe('Testnet', () => {
     describe('tv mode', () => {
       it('loads the tv screen - desktop', () => {
         cy.viewport('macbook-16');
-        cy.visit('/testnet');
+        cy.visit('/testnet/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.wait(1000);
           cy.get('.tv-only').should('not.exist');
-          //TODO: Remove comment when the bug is fixed
+          cy.get('#mempool-block-0').should('be.visible');
-          //cy.get('#mempool-block-0').should('be.visible');
         });
       });
 
       it('loads the tv screen - mobile', () => {
-        cy.visit('/testnet');
+        cy.visit('/testnet/graphs');
         cy.waitForSkeletonGone();
         cy.get('#btn-tv').click().then(() => {
           cy.viewport('iphone-6');

frontend/src/app/components/master-page/master-page.component.html

@@ -1,12 +1,12 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]">
   <ng-template [ngIf]="subdomain">
     <div class="subdomain_container">
       <img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo">
     </div>
   </ng-template>
-  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
       <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }" alt="The Mempool Open Source Project logo">
       <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>

frontend/src/app/components/master-page/master-page.component.scss

@@ -68,10 +68,6 @@ li.nav-item {
   }
 }
 
-.navbar-brand {
-  width: 60%;
-}
-
 .navbar {
   .dropdown {
     .dropdown-toggle {
@@ -80,10 +76,8 @@ li.nav-item {
   }
 }
 
-@media (min-width: 576px) {
+.navbar-brand {
-  .navbar-brand {
+  position: relative;
-    width: 140px;
-  }
 }
 
 nav {
@@ -93,8 +87,7 @@ nav {
 .connection-badge {
   position: absolute;
   top: 13px;
-  left: 0px;
+  width: 100%;
-  width: 140px;
 }
 
 .badge {
@@ -150,10 +143,21 @@ nav {
   max-height: 45px;
   max-width: 140px;
   margin: auto;
+  align-self: center;
 }
 
 .subdomain_container {
   width: 140px;
   margin-right: 15px;
   text-align: center;
-}
+}
+
+.logo-holder {
+  display: flex;
+  flex-direction: row;
+}
+
+.navbar-brand {
+  flex-direction: row;
+  display: flex;
+}

frontend/src/app/components/statistics/statistics.component.html

@@ -14,7 +14,7 @@
             [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
             <div *ngIf="!isMobile()" class="btn-group btn-group-toggle">
               <label ngbButtonLabel class="btn-primary btn-sm mr-2">
-                <a [routerLink]="['/tv' | relativeUrl]" style="color: white">
+                <a [routerLink]="['/tv' | relativeUrl]" style="color: white" id="btn-tv">
                   <fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon>
                 </a>
                 </label>