fix make tailwind module

Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.eslintrc.json

@@ -2,9 +2,21 @@
   "root": true,
   "ignorePatterns": ["**/*"],
   "plugins": ["@nrwl/nx", "eslint-plugin-unicorn", "jsx-a11y", "jest"],
+  "settings": {
+    "jsx-a11y": {
+      "components": {
+        "Button": "button",
+        "Input": "input",
+        "Select": "select",
+        "Radio": "radio",
+        "TextArea": "textarea"
+      }
+    }
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": ["plugin:jsx-a11y/strict"],
       "rules": {
         "@nrwl/nx/enforce-module-boundaries": [
           "error",

.github/workflows/capsule-cypress-manual-trigger.yml

@@ -0,0 +1,150 @@
+name: Capsule tests -- manual trigger
+
+# This workflow runs the frontend tests against chosen branch
+
+on:
+  workflow_dispatch:
+    inputs:
+      project:
+        description: 'Project'
+        required: true
+        type: choice
+        options:
+          - explorer-e2e
+          - simple-trading-app-e2e
+          - stats-e2e
+          - token-e2e
+          - trading-e2e
+      includeFlows:
+        description: 'Include long flows (if any)?'
+        required: true
+        type: boolean
+        default: true
+
+jobs:
+  manual:
+    name: Run capsule tests -- manual trigger
+    runs-on: ubuntu-latest
+    env:
+      GO111MODULE: 'on'
+      GOPROXY: ${{ secrets.GO_PROXY }}
+    steps:
+      #######
+      ## Setup langs
+      #######
+      - name: Set up Go
+        uses: actions/setup-go@v3
+        id: go
+        with:
+          go-version: 1.18
+      - name: Set up Node 16
+        uses: actions/setup-node@v2
+        id: npm
+        with:
+          node-version: 16
+
+      #######
+      ## Checkout capsule
+      #######
+
+      # Checkout capsule to build local network
+      - name: Checkout capsule
+        uses: actions/checkout@v2
+        with:
+          repository: vegaprotocol/vegacapsule
+          ref: v0.2.1
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+          path: './capsule'
+
+      #######
+      ## Build binaries
+      #######
+      - name: Build capsule
+        run: go install
+        working-directory: capsule
+
+      - name: Set GOBIN
+        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV
+
+      - name: Install binaries
+        run: vegacapsule install-bins
+        env:
+          GITHUB_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+          GOBIN: ${{ env.GOBIN }}
+
+      - name: Checkout Vega
+        uses: actions/checkout@v2
+        with:
+          repository: vegaprotocol/vega
+          ref: tm35.9
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+          path: './vega'
+
+      - name: Install binary from Vega repo
+        run: go install ./cmd/vega
+        working-directory: vega
+
+      ######
+      ## Start capsule
+      ######
+      - name: Login to docker
+        run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
+
+      - name: Start nomad
+        run: vegacapsule nomad &
+
+      - name: Bootstrap network
+        run: vegacapsule network bootstrap --config-path=./net_confs/config.hcl --force
+        working-directory: capsule
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+      - name: Create passphrase
+        run: echo "${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}" > ./passphrase
+      - name: Create recovery
+        run: echo "${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}" > ./recovery
+
+      - name: Initialize wallet
+        run: vegawallet init -f --home ~/.vegacapsule/testnet/wallet
+      - name: Import wallet
+        run: vegawallet import -w UI_Trading_Test --recovery-phrase-file ./recovery -p ./passphrase --home ~/.vegacapsule/testnet/wallet
+      - name: Create public key 2
+        run: vegawallet key generate -w UI_Trading_Test -p ./passphrase --home ~/.vegacapsule/testnet/wallet
+      - name: Start service
+        run: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet &
+
+      ######
+      ## Run some tests
+      ######
+
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+
+      - name: Install root dependencies
+        run: yarn install
+
+      - name: Run Cypress tests
+        run: yarn nx run ${{inputs.project}}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        env:
+          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_INCLUDE_FLOWS: ${{inputs.includeFlows}}
+
+      ######
+      ## Upload logs
+      ######
+
+      - name: Logs
+        if: ${{ always() }}
+        run: vegacapsule network logs > vega-capsule-logs.txt
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: logs
+          path: ./vega-capsule-logs.txt

.github/workflows/capsule-cypress-night-run.yml

@@ -1,4 +1,4 @@
-name: Capsule tests -- nightly
+name: Capsule tests -- night run
 
 # This workflow runs the frontend tests against latest develop of the core to preempt breaking changes
 
@@ -12,7 +12,6 @@ jobs:
     runs-on: ubuntu-latest
     env:
       GO111MODULE: 'on'
-      GOPROXY: ${{ secrets.GO_PROXY }}
     steps:
       #######
       ## Setup langs
@@ -29,55 +28,15 @@ jobs:
           node-version: 16
 
       #######
-      ## Checkout all the things
+      ## Checkout capsule
       #######
 
-      # Checkout repos required to build vega capsule
-      - name: Checkout vega
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vega
-          ref: master
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './vega'
-
-      - name: Checkout data node
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/data-node
-          ref: main
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './data-node'
-
-      - name: Checkout protos
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/protos
-          ref: master
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './protos'
-
-      - name: Checkout vegatools
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vegatools
-          ref: main
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './vegatools'
-
-      - name: Checkout vega wallet
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vegawallet
-          ref: master
-          path: './vegawallet'
-
       # Checkout capsule to build local network
       - name: Checkout capsule
         uses: actions/checkout@v2
         with:
           repository: vegaprotocol/vegacapsule
-          ref: main
+          ref: v0.2.1
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
@@ -88,28 +47,38 @@ jobs:
         run: go install
         working-directory: capsule
 
-      - name: Build vega
-        run: go install ./cmd/vega/
+      - name: Set GOBIN
+        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV
+
+      - name: Install binaries
+        run: vegacapsule install-bins
+        env:
+          GITHUB_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+          GOBIN: ${{ env.GOBIN }}
+
+      - name: Checkout Vega
+        uses: actions/checkout@v2
+        with:
+          repository: vegaprotocol/vega
+          ref: tm35.9
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+          path: './vega'
+
+      - name: Install binary from Vega repo
+        run: go install ./cmd/vega
         working-directory: vega
 
-      - name: Build vegawallet
-        run: go install
-        working-directory: vegawallet
-
-      - name: Build data-node
-        run: go install ./cmd/data-node/
-        working-directory: data-node
-
       ######
       ## Start capsule
       ######
       - name: Login to docker
         run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
+
       - name: Start nomad
         run: vegacapsule nomad &
 
       - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=./net_confs/config.hcl
+        run: vegacapsule network bootstrap --config-path=./net_confs/config.hcl --force
         working-directory: capsule
 
       ######
@@ -150,6 +119,7 @@ jobs:
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
           CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPESS_ETH_WALLET_MNEMONIC }}
           CYPRESS_NIGHTLY_RUN: true
+          CYPRESS_INCLUDE_FLOWS: true
 
       ######
       ## Upload logs

.github/workflows/capsule-cypress.yml

@@ -14,7 +14,6 @@ jobs:
     if: ${{ github.event_name == 'pull_request' }}
     env:
       GO111MODULE: 'on'
-      GOPROXY: ${{ secrets.GO_PROXY }}
     steps:
       #######
       ## Setup langs
@@ -39,7 +38,7 @@ jobs:
         uses: actions/checkout@v2
         with:
           repository: vegaprotocol/vegacapsule
-          ref: main
+          ref: v0.2.1
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
@@ -59,6 +58,18 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           GOBIN: ${{ env.GOBIN }}
 
+      - name: Checkout Vega
+        uses: actions/checkout@v2
+        with:
+          repository: vegaprotocol/vega
+          ref: tm35.9
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+          path: './vega'
+
+      - name: Install binary from Vega repo
+        run: go install ./cmd/vega
+        working-directory: vega
+
       ######
       ## Start capsule
       ######
@@ -114,6 +125,7 @@ jobs:
           CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
           CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_INCLUDE_FLOWS: false
 
       ######
       ## Upload logs

.github/workflows/publish-containers-cra.yml

@@ -0,0 +1,60 @@
+name: Publish NextJs containers
+
+'on':
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-pre[0-9]+'
+
+jobs:
+  master:
+    strategy:
+      matrix:
+        build-platform: ['linux/amd64']
+        app: ['trading']
+    name: Build the ${{ inputs.image_name }} image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set output
+        id: vars
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+      - name: Check output
+        env:
+          RELEASE_VERSION: ${{ steps.vars.outputs.tag }}
+        run: |
+          echo $RELEASE_VERSION
+          echo ${{ steps.vars.outputs.tag }}
+      - uses: actions/checkout@v3
+      - name: Set up QEMU
+        id: quemu
+        uses: docker/setup-qemu-action@v2
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Collect images data
+        id: tags
+        run: |
+          echo '::set-output name=current::vegaprotocol/${{ matrix.app }}:${{ steps.vars.outputs.tag }}'
+          echo '::set-output name=latest::vegaprotocol/${{ matrix.app }}:latest'
+
+      - name: Echo tags
+        run: |
+          echo ${{ steps.tags.outputs.latest }}
+          echo ${{ steps.tags.outputs.current }}
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker build
+        uses: docker/build-push-action@v3
+        with:
+          context: '.'
+          file: './Dockerfile.next'
+          build-args: 'APP=${{ matrix.app }}'
+          platforms: ${{ matrix.build-platform }}
+          tags: ${{ steps.tags.outputs.latest }},${{ steps.tags.outputs.current }}
+          push: true

.github/workflows/publish-containers-next.yml

@@ -0,0 +1,60 @@
+name: Publish CRA containers
+
+'on':
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-pre[0-9]+'
+
+jobs:
+  master:
+    strategy:
+      matrix:
+        build-platform: ['linux/amd64']
+        app: ['explorer', 'token']
+    name: Build the ${{ inputs.image_name }} image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set output
+        id: vars
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+      - name: Check output
+        env:
+          RELEASE_VERSION: ${{ steps.vars.outputs.tag }}
+        run: |
+          echo $RELEASE_VERSION
+          echo ${{ steps.vars.outputs.tag }}
+      - uses: actions/checkout@v3
+      - name: Set up QEMU
+        id: quemu
+        uses: docker/setup-qemu-action@v2
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Collect images data
+        id: tags
+        run: |
+          echo '::set-output name=current::vegaprotocol/${{ matrix.app }}:${{ steps.vars.outputs.tag }}'
+          echo '::set-output name=latest::vegaprotocol/${{ matrix.app }}:latest'
+
+      - name: Echo tags
+        run: |
+          echo ${{ steps.tags.outputs.latest }}
+          echo ${{ steps.tags.outputs.current }}
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker build
+        uses: docker/build-push-action@v3
+        with:
+          context: '.'
+          file: './Dockerfile.cra'
+          build-args: 'APP=${{ matrix.app }}'
+          platforms: ${{ matrix.build-platform }}
+          tags: ${{ steps.tags.outputs.latest }},${{ steps.tags.outputs.current }}
+          push: true

.gitignore

@@ -5,6 +5,7 @@
 /tmp
 /out-tsc
 /tools/executors/**/*.js
+/tools/utils/*.js
 
 # dependencies
 /node_modules

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#65c89b",
+        "activityBar.activeBorder": "#945bc4",
+        "activityBar.background": "#65c89b",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#945bc4",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "sash.hoverBorder": "#65c89b",
+        "statusBar.background": "#42b883",
+        "statusBar.foreground": "#15202b",
+        "statusBarItem.hoverBackground": "#359268",
+        "statusBarItem.remoteBackground": "#42b883",
+        "statusBarItem.remoteForeground": "#15202b",
+        "titleBar.activeBackground": "#42b883",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveBackground": "#42b88399",
+        "titleBar.inactiveForeground": "#15202b99"
+    },
+    "peacock.color": "#42b883",
+    "editor.formatOnSave": true
+}

Dockerfile.cra

@@ -7,6 +7,7 @@ ENV PATH /app/node_modules/.bin:$PATH
 COPY package.json ./
 COPY yarn.lock ./
 COPY . ./
+RUN apk add python3 make gcc g++
 RUN yarn
 RUN yarn nx build $APP
 

Dockerfile.next

@@ -0,0 +1,30 @@
+# Build container
+FROM node:16.14.0-alpine as build
+WORKDIR /app
+# Argument to allow building of different apps
+ARG APP
+ENV PATH /app/node_modules/.bin:$PATH
+COPY package.json ./
+COPY yarn.lock ./
+COPY . ./
+RUN apk add python3 make gcc g++
+RUN yarn
+RUN yarn nx export $APP
+
+# Production environment
+FROM nginx:stable-alpine
+ARG APP
+COPY --from=build /app/dist/apps/$APP/exported /usr/share/nginx/html
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+WORKDIR /usr/share/nginx/html
+COPY ./env.sh .
+COPY ./apps/$APP/.env .env
+
+# Add bash
+RUN apk add --no-cache bash
+
+RUN chmod +x ./env.sh
+CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

README.md

@@ -16,7 +16,7 @@ The trading interface built based on a component toolkit. It will provide a way
 
 ### [Token](./apps/token)
 
-The utlity dApp for interacting with the Vega token and using its' utility. This includes; delegation, nomination, governance and redemption of tokens.
+The utility dApp for interacting with the Vega token and using its' utility. This includes; delegation, nomination, governance and redemption of tokens.
 
 ### [Explorer](./apps/explorer)
 
@@ -51,7 +51,7 @@ A utility library for connecting to the Ethereum network and interacting with Ve
 
 ### [React Helpers](./libs/react-helpers)
 
-Generic react helpers that can be used across multilpe applications, along with other utilities.
+Generic react helpers that can be used across multiple applications, along with other utilities.
 
 # 💻 Develop
 
@@ -69,8 +69,7 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 
 ### Using Apollo GraphQL and Generate Types
 
-In order to generate the schemas for your GraphQL queries, you can run `nx run types:generate`.
-If it is the first time you are running the command, make sure you are setting up the environment variable from `apollo.config.js`.
+In order to generate the schemas for your GraphQL queries, you can run `NX_VEGA_URL=[YOUR URL HERE] nx run types:generate`.
 
 ```bash
 export  NX_VEGA_URL=https://lb.testnet.vega.xyz/query

apps/explorer-e2e/.env

@@ -4,6 +4,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 NX_VEGA_URL=http://localhost:3028/query
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_REST=http://localhost:3029
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/capsule-network.json
 
 CYPRESS_VEGA_TENDERMINT_URL=http://localhost:26617
 
@@ -11,6 +12,8 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=0
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.devnet

@@ -11,6 +11,8 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.stagnet1

@@ -11,6 +11,8 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.stagnet2

@@ -11,6 +11,8 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.testnet

@@ -11,6 +11,8 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/cypress.config.js

@@ -0,0 +1,28 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  projectId: 'et4snf',
+
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    fileServerFolder: '.',
+    fixturesFolder: false,
+    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+    modifyObstructiveCode: false,
+    supportFile: './src/support/index.ts',
+    video: true,
+    videoUploadOnPasses: false,
+    videosFolder: '../../dist/cypress/apps/explorer-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
+    chromeWebSecurity: false,
+    viewportWidth: 1440,
+    viewportHeight: 900,
+  },
+  env: {
+    environment: 'CUSTOM',
+    networkQueryUrl: 'http://localhost:3028/query',
+    ethUrl: 'https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
+    commitHash: 'dev',
+    tsConfig: 'tsconfig.json',
+  },
+});

apps/explorer-e2e/cypress.json

@@ -1,21 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "projectId": "et4snf",
-  "fileServerFolder": ".",
-  "fixturesFolder": false,
-  "pluginsFile": "./src/plugins/index.js",
-  "testFiles": "*.{ts,feature,features}",
-  "ignoreTestFiles": "**/*.js",
-  "integrationFolder": "./src/integration",
-  "modifyObstructiveCode": false,
-  "supportFile": "./src/support/index.ts",
-  "video": true,
-  "videosFolder": "../../dist/cypress/apps/explorer-e2e/videos",
-  "screenshotsFolder": "../../dist/cypress/apps/explorer-e2e/screenshots",
-  "chromeWebSecurity": false,
-  "env": {
-    "environment": "CUSTOM",
-    "tsConfig": "tsconfig.json",
-    "TAGS": "not @todo and not @ignore and not @manual"
-  }
-}

apps/explorer-e2e/project.json

@@ -1,12 +1,12 @@
 {
-  "root": "apps/explorer-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/explorer-e2e/src",
   "projectType": "application",
   "targets": {
     "e2e": {
       "executor": "@nrwl/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/explorer-e2e/cypress.json",
+        "cypressConfig": "apps/explorer-e2e/cypress.config.js",
         "devServerTarget": "explorer:serve"
       },
       "configurations": {

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

@@ -1,11 +0,0 @@
-Feature: Asset Page
-
-  Scenario: Navigate to Asset Page
-    Given I am on the homepage
-    When I navigate to the asset page
-    Then asset page is correctly displayed
-
-  Scenario: Navigate to Asset Page using mobile
-    Given I am on mobile and open the toggle menu
-    When I navigate to the asset page
-    Then asset page is correctly displayed

apps/explorer-e2e/src/integration/asset.cy.js

@@ -0,0 +1,20 @@
+import '../support/common.functions';
+
+context('Asset page', function () {
+  describe('Verify elements on page', function () {
+    const assetsNavigation = 'a[href="/assets"]';
+    const assetHeader = '[data-testid="asset-header"]';
+
+    it('Assets page is displayed', function () {
+      cy.visit('/');
+      cy.get(assetsNavigation).click();
+      cy.common_validate_blocks_data_displayed(assetHeader);
+    });
+
+    it('Assets page displayed in mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(assetsNavigation).click();
+      cy.common_validate_blocks_data_displayed(assetHeader);
+    });
+  });
+});

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

@@ -1,36 +0,0 @@
-Feature: Blocks Page
-
-  Scenario: Navigate to blocks page
-    Given I am on the homepage
-    When I navigate to the blocks page
-    Then blocks page is correctly displayed
-
-  Scenario: Navigate to blocks page using mobile
-    Given I am on mobile and open the toggle menu
-    When I navigate to the blocks page
-    Then blocks page is correctly displayed
-
-  Scenario: Navigate to block validator page
-    Given I am on the homepage
-    When I navigate to the blocks page
-    And I click on top block
-    Then validator block page is correctly displayed
-
-  Scenario: Navigate to previous block
-    Given I am on the homepage
-    When I navigate to the blocks page
-    And I click on top block
-    Then I am on the previous block when I click previous
-
-  Scenario: Previous button disabled on first block
-    Given I am on the homepage
-    When I navigate to the blocks page
-    And jump to first block
-    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
-    Given I am on the homepage
-    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/integration/blocks.cy.js

@@ -0,0 +1,132 @@
+import '../support/common.functions';
+
+context('Blocks page', function () {
+  before('visit token home page', function () {
+    cy.visit('/');
+  });
+
+  describe('Verify elements on page', function () {
+    const blockNavigation = 'a[href="/blocks"]';
+    const blockHeight = '[data-testid="block-height"]';
+    const blockTime = '[data-testid="block-time"]';
+    const blockHeader = '[data-testid="block-header"]';
+    const previousBlockBtn = '[data-testid="previous-block"]';
+    const infiniteScrollWrapper = '[data-testid="infinite-scroll-wrapper"]';
+
+    beforeEach('navigate to blocks page', function () {
+      cy.get(blockNavigation).click();
+    });
+
+    it('Blocks page is displayed', function () {
+      validateBlocksDisplayed();
+    });
+
+    it('Blocks page is displayed on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(blockNavigation).click();
+      validateBlocksDisplayed();
+    });
+
+    it('Block validator page is displayed', function () {
+      waitForBlocksResponse();
+      cy.get(blockHeight).eq(0).click();
+      cy.get('[data-testid="block-validator"]').should('not.be.empty');
+      cy.get(blockTime).should('not.be.empty');
+      //TODO: Add assertion for transactions when txs are added
+    });
+
+    it('Navigate to previous block', function () {
+      waitForBlocksResponse();
+      cy.get(blockHeight).eq(0).click();
+      cy.get(blockHeader)
+        .invoke('text')
+        .then(($blockHeaderTxt) => {
+          const blockHeight = parseInt($blockHeaderTxt.replace('BLOCK ', ''));
+          cy.get(previousBlockBtn).click();
+          cy.get(blockHeader)
+            .invoke('text')
+            .then(($newBlockHeaderTxt) => {
+              const newBlockHeight = parseInt(
+                $newBlockHeaderTxt.replace('BLOCK ', '')
+              );
+              expect(newBlockHeight).to.be.lessThan(blockHeight);
+            });
+        });
+    });
+
+    it('Previous button disabled on first block', function () {
+      cy.get('[data-testid="block-input"]').type('1');
+      cy.get('[data-testid="go-submit"]').click();
+      cy.get(previousBlockBtn).find('button').should('be.disabled');
+      cy.get(blockHeader)
+        .invoke('text')
+        .then(($blockHeaderTxt) => {
+          const blockHeight = parseInt($blockHeaderTxt.replace('BLOCK ', ''));
+          cy.get('[data-testid="next-block"]').click();
+          cy.get(blockHeader)
+            .invoke('text')
+            .then(($newBlockHeaderTxt) => {
+              const newBlockHeight = parseInt(
+                $newBlockHeaderTxt.replace('BLOCK ', '')
+              );
+              expect(newBlockHeight).to.be.greaterThan(blockHeight);
+            });
+        });
+    });
+
+    // Skipping these tests for time being - since blockchain in capsule is now too small to show historical data - re-enable once addressed
+    it.skip('Infinite scroll shows at least 100 new blocks', function () {
+      const expectedBlocks = 100;
+      const scrollAttempts = 7;
+
+      waitForBlocksResponse();
+      cy.get(infiniteScrollWrapper).children().scrollTo('bottom');
+
+      cy.intercept('*blockchain?maxHeight*').as('blockchain_load');
+      cy.get(blockHeight)
+        .last()
+        .invoke('text')
+        .then(($initialLastBlockHeight) => {
+          for (let index = 0; index < scrollAttempts; index++) {
+            cy.get(infiniteScrollWrapper)
+              .children()
+              .children()
+              .invoke('css', 'height')
+              .then((scrollTarget) => {
+                cy.get(infiniteScrollWrapper)
+                  .children()
+                  .scrollTo(0, scrollTarget.toString(), { easing: 'linear' })
+                  .wait('@blockchain_load');
+
+                // eslint-disable-next-line cypress/no-unnecessary-waiting
+                cy.wait(50); // Need this as although network response has arrived it takes a few millisecs for the css height to expand
+              });
+          }
+
+          cy.get(blockHeight)
+            .last()
+            .invoke('text')
+            .then(($lastBlockHeight) => {
+              const totalBlocksLoadedSinceScrollBegan =
+                parseInt($initialLastBlockHeight) - parseInt($lastBlockHeight);
+              expect(totalBlocksLoadedSinceScrollBegan).to.be.at.least(
+                expectedBlocks
+              );
+            });
+        });
+    });
+
+    function waitForBlocksResponse() {
+      cy.contains('Loading...').should('not.exist', { timeout: 18000 });
+    }
+
+    function validateBlocksDisplayed() {
+      waitForBlocksResponse();
+      cy.get('[data-testid="block-row"]').should('have.length.above', 1);
+      cy.get(blockHeight).first().should('not.be.empty');
+      cy.get('[data-testid="num-txs"]').first().should('not.be.empty');
+      cy.get('[data-testid="validator-link"]').first().should('not.be.empty');
+      cy.get(blockTime).first().should('not.be.empty');
+    }
+  });
+});

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

@@ -1,27 +0,0 @@
-Feature: Home page
-
-  Scenario: Stats page displayed correctly
-    Given I am on the homepage
-    Then the stats for deployed environment are correctly displayed
-
-  Scenario Outline: Succesfful search for specific id by <IdType>
-    Given I am on the homepage
-    When I search for '<Id>'
-    Then I am redirected to page containing id '<Id>'
-
-    Examples:
-      | IdType   | Id                                                                 |
-      | Block Id | 973624                                                             |
-      | Tx Hash  | 9ED3718AA8308E7E08EC588EE7AADAF49711D2138860D8914B4D81A2054D9FB8   |
-      | Tx Id    | 0x61DCCEBB955087F50D0B85382DAE138EDA9631BF1A4F92E563D528904AA38898 |
-
-  Scenario Outline: Error message displayed when invalid search by <invalidType>
-    Given I am on the homepage
-    When I search for '<Id>'
-    Then search error message "<errorMessage>" is displayed
-
-    Examples:
-      | invalidType         | Id                                                               | errorMessage                   |
-      | wrong string length | 9ED3718AA8308E7E08EC588EE7AADAF497D2138860D8914B4D81A2054D9FB8   | Something doesn't look right   |
-      | invalid hash        | 9ED3718AA8308E7E08ECht8EE753DAF49711D2138860D8914B4D81A2054D9FB8 | Transaction is not hexadecimal |
-      | empty search        |                                                                  | Search required                |

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

@@ -0,0 +1,166 @@
+context('Home Page', function () {
+  before('visit home page', function () {
+    cy.visit('/');
+  });
+
+  describe('Stats page', function () {
+    const statsValue = '[data-testid="stats-value"]';
+
+    it('Should show connected environment', function () {
+      const deployedEnv = Cypress.env('environment').toUpperCase();
+      cy.get('[data-testid="stats-environment"]').should(
+        'have.text',
+        `/ ${deployedEnv}`
+      );
+    });
+
+    it('should show connected environment stats', function () {
+      const statTitles = {
+        0: 'Status',
+        1: 'Height',
+        2: 'Validating nodes',
+        3: 'Uptime',
+        4: 'Total nodes',
+        5: 'Inactive nodes',
+        6: 'Total staked',
+        7: 'Backlog',
+        8: 'Trades / second',
+        9: 'Orders / block',
+        10: 'Orders / second',
+        11: 'Transactions / block',
+        12: 'Block time',
+        13: 'Time',
+        14: 'App',
+        15: 'Tendermint',
+        16: 'Up since',
+        17: 'Chain ID',
+      };
+
+      cy.get('[data-testid="stats-title"]')
+        .each(($list, index) => {
+          cy.wrap($list).should('have.text', statTitles[index]);
+        })
+        .then(($list) => {
+          cy.wrap($list).should('have.length', 18);
+        });
+
+      cy.get(statsValue).eq(0).should('have.text', 'CONNECTED');
+      cy.get(statsValue).eq(1).should('not.be.empty');
+      cy.get(statsValue).eq(2).should('have.text', '2');
+      cy.get(statsValue)
+        .eq(3)
+        .invoke('text')
+        .should('match', /\d+d \d+h \d+m \d+s/i);
+      cy.get(statsValue).eq(4).should('have.text', '2');
+      cy.get(statsValue).eq(5).should('have.text', '0');
+      cy.get(statsValue)
+        .eq(6)
+        .invoke('text')
+        .should('match', /\d+\.\d\d(?!\d)/i);
+      cy.get(statsValue).eq(7).should('have.text', '0');
+      cy.get(statsValue).eq(8).should('have.text', '0');
+      cy.get(statsValue).eq(9).should('have.text', '0');
+      cy.get(statsValue).eq(10).should('have.text', '0');
+      cy.get(statsValue).eq(11).should('not.be.empty');
+      cy.get(statsValue).eq(12).should('not.be.empty');
+      cy.get(statsValue).eq(13).should('not.be.empty');
+      if (Cypress.env('NIGHTLY_RUN') != true) {
+        cy.get(statsValue)
+          .eq(14)
+          .invoke('text')
+          .should('match', /v\d+\.\d+\.\d+/i);
+      }
+      cy.get(statsValue)
+        .eq(15)
+        .invoke('text')
+        .should('match', /\d+\.\d+\.\d+/i);
+      cy.get(statsValue).eq(16).should('not.be.empty');
+      cy.get(statsValue).eq(17).should('not.be.empty');
+    });
+
+    it('Block height should be updating', function () {
+      cy.get(statsValue)
+        .eq(1)
+        .invoke('text')
+        .then((blockHeightTxt) => {
+          cy.get(statsValue)
+            .eq(1)
+            .invoke('text')
+            .should((newBlockHeightTxt) => {
+              expect(blockHeightTxt).not.to.eq(newBlockHeightTxt);
+            });
+        });
+    });
+  });
+
+  describe('Git info', function () {
+    it('git info is rendered on the footer of the page', function () {
+      cy.getByTestId('git-info').within(() => {
+        cy.getByTestId('git-network-data').within(() => {
+          cy.contains('Reading network data from').should('be.visible');
+          cy.get('span').should('have.text', Cypress.env('networkQueryUrl'));
+          cy.getByTestId('link').should('be.visible');
+        });
+
+        cy.getByTestId('git-eth-data').within(() => {
+          cy.contains('Reading Ethereum data from').should('be.visible');
+          cy.get('span').should('have.text', Cypress.env('ethUrl'));
+        });
+
+        cy.getByTestId('git-commit-hash').within(() => {
+          cy.contains('Version/commit hash:').should('be.visible');
+          cy.getByTestId('link').should('have.text', Cypress.env('commitHash'));
+        });
+      });
+    });
+  });
+
+  describe('Search bar', function () {
+    it('Successful search for specific id by block id', function () {
+      const blockId = '973624';
+      search(blockId);
+      cy.url().should('include', blockId);
+    });
+
+    it('Successful search for specific id by tx hash', function () {
+      const txHash =
+        '9ED3718AA8308E7E08EC588EE7AADAF49711D2138860D8914B4D81A2054D9FB8';
+      search(txHash);
+      cy.url().should('include', txHash);
+    });
+
+    it('Successful search for specific id by tx id', function () {
+      const txId =
+        '0x61DCCEBB955087F50D0B85382DAE138EDA9631BF1A4F92E563D528904AA38898';
+      search(txId);
+      cy.url().should('include', txId);
+    });
+
+    it('Error message displayed when invalid search by wrong string length', function () {
+      search('9ED3718AA8308E7E08EC588EE7AADAF497D2138860D8914B4D81A2054D9FB8');
+      validateSearchError("Something doesn't look right");
+    });
+
+    it('Error message displayed when invalid search by invalid hash', function () {
+      search(
+        '9ED3718AA8308E7E08ECht8EE753DAF49711D2138860D8914B4D81A2054D9FB8'
+      );
+      validateSearchError('Transaction is not hexadecimal');
+    });
+
+    it('Error message displayed when searching empty field', function () {
+      cy.get('[data-testid="search"]').clear();
+      cy.get('[data-testid="search-button"]').click();
+      validateSearchError('Search required');
+    });
+
+    function search(searchTxt) {
+      cy.get('[data-testid="search"]').clear().type(searchTxt);
+      cy.get('[data-testid="search-button"]').click();
+    }
+
+    function validateSearchError(expectedError) {
+      cy.get('[data-testid="search-error"]').should('have.text', expectedError);
+    }
+  });
+});

apps/explorer-e2e/src/integration/market.cy.js

@@ -0,0 +1,21 @@
+import '../support/common.functions';
+
+//Tests set to skip until market bug for capsule checkpoint is fixed
+context.skip('Market page', function () {
+  describe('Verify elements on page', function () {
+    const marketHeaders = '[data-testid="markets-header"]';
+    const marketNavigation = 'a[href="/markets"]';
+
+    it('Markets page is displayed', function () {
+      cy.visit('/');
+      cy.get(marketNavigation).click();
+      cy.common_validate_blocks_data_displayed(marketHeaders);
+    });
+
+    it('Markets page displayed on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(marketNavigation).click();
+      cy.common_validate_blocks_data_displayed(marketHeaders);
+    });
+  });
+});

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

@@ -1,14 +0,0 @@
-@todo
-Feature: Markets Page
-
-  @todo - Needs markets in capsule state
-  Scenario: Navigate to markets page
-    Given I am on the homepage
-    When I navigate to the markets page
-    Then markets page is correctly displayed
-
-  @todo
-  Scenario: Navigate to markets page using mobile
-    Given I am on mobile and open the toggle menu
-    When I navigate to the markets page
-    Then markets page is correctly displayed

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

@@ -1,11 +0,0 @@
-Feature: Network parameters Page
-
-  Scenario: Navigate to network parameters page
-    Given I am on the homepage
-    When I navigate to network parameters page
-    Then network parameters page is correctly displayed
-
-  Scenario: Navigate to network parameters page using mobile
-    Given I am on mobile and open the toggle menu
-    When I navigate to network parameters page
-    Then network parameters page is correctly displayed

apps/explorer-e2e/src/integration/network.cy.js

@@ -0,0 +1,35 @@
+import '../support/common.functions';
+
+context('Network parameters page', function () {
+  before('visit token home page', function () {
+    cy.visit('/');
+  });
+
+  describe('Verify elements on page', function () {
+    const networkParametersNavigation = 'a[href="/network-parameters"]';
+
+    beforeEach('Navigate to network parameter page', function () {
+      cy.get(networkParametersNavigation).click();
+    });
+
+    it('Network paremeter page is displayed', function () {
+      verifyNetworkParametersPageDisplayed();
+    });
+
+    it('Network parameter page displayed on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(networkParametersNavigation).click();
+      verifyNetworkParametersPageDisplayed();
+    });
+  });
+
+  function verifyNetworkParametersPageDisplayed() {
+    cy.get('[data-testid="network-param-header"]').should(
+      'have.text',
+      'Network Parameters'
+    );
+    cy.common_verify_json_parameters(18);
+    cy.common_verify_json_string_values(6);
+    cy.common_verify_json_int_values(7);
+  }
+});

apps/explorer-e2e/src/integration/node-switcher.cy.js

@@ -0,0 +1,84 @@
+const nodeErrorType = 'node-error-type';
+const nodeErrorMsg = 'node-error-message';
+const nodeId = 'node-url-0';
+const customNodeBtn = 'custom-node';
+const closeDialogBtn = 'dialog-close';
+
+context('Node switcher', function () {
+  before('visit home page', function () {
+    cy.intercept('GET', 'https://static.vega.xyz/assets/capsule-network.json', {
+      hosts: ['http://localhost:3028/query'],
+    }).as('nodeData');
+    cy.visit('/');
+    cy.wait('@nodeData');
+  });
+
+  describe('form validations and responses', function () {
+    beforeEach('open node selector', function () {
+      cy.getByTestId('git-network-data').within(() => {
+        cy.getByTestId('link').click();
+      });
+    });
+    it('node data is displayed', function () {
+      cy.getByTestId('node-row').should('have.length.at.least', 1);
+
+      cy.getByTestId('node-row')
+        .eq(0)
+        .within(() => {
+          cy.getByTestId(nodeId)
+            .should('exist')
+            .and('have.attr', 'aria-checked', 'true');
+          cy.get('label').should('have.text', Cypress.env('networkQueryUrl'));
+          cy.getByTestId('response-time-cell')
+            .should('not.be.empty')
+            .and('contain.text', 'ms');
+          cy.getByTestId('block-cell').should('not.be.empty');
+          cy.getByTestId('ssl-cell').should('have.text', 'Yes');
+        });
+    });
+
+    it('Incorrect network displayed', function () {
+      const errorTypeTxt = 'Error: incorrect network';
+      const nodeErrorTxt = 'This node is not on the CUSTOM network.';
+
+      validateNodeError(errorTypeTxt, nodeErrorTxt);
+    });
+
+    it('cannot connect to network using invalid url', function () {
+      const errorTypeTxt = 'Error: invalid url';
+      const nodeErrorTxt = 'fakeUrl is not a valid url.';
+
+      cy.getByTestId('node-url-custom').click();
+
+      cy.getByTestId(customNodeBtn).within(() => {
+        cy.get('input').clear().type('fakeUrl');
+        cy.getByTestId('link').click();
+      });
+      validateNodeError(errorTypeTxt, nodeErrorTxt);
+    });
+
+    it('Cannot connect to network from different chain ID', function () {
+      const errorTypeTxt = 'Error: incorrect network';
+      const nodeErrorTxt = 'This node is not on the CUSTOM network.';
+
+      cy.getByTestId('node-url-custom').click();
+
+      cy.getByTestId(customNodeBtn).within(() => {
+        cy.get('input').clear().type('https://n04.d.vega.xyz/query');
+        cy.getByTestId('link').click();
+      });
+      validateNodeError(errorTypeTxt, nodeErrorTxt);
+    });
+
+    afterEach('Close node switcher', function () {
+      cy.getByTestId(closeDialogBtn).click();
+    });
+
+    function validateNodeError(errortype, errorMsg) {
+      cy.getByTestId(nodeErrorType).should('have.text', errortype, {
+        timeout: 1000,
+      });
+      cy.getByTestId(nodeErrorMsg).should('have.text', errorMsg);
+    }
+  });
+});

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

@@ -1,21 +0,0 @@
-Feature: Transactions Page
-
-  Scenario: Navigate to transactions page
-    Given I am on the homepage
-    When I navigate to the transactions page
-    Then transactions page is correctly displayed
-
-  @ignore
-  Scenario: Navigate to transaction details page
-    Given I am on the homepage
-    When I navigate to the transactions page
-    And I click on the top transaction
-    Then transaction details are displayed
-
-  @ignore
-  Scenario: Navigate to transactions page using mobile
-    Given I am on mobile and open the toggle menu
-    When I navigate to the transactions page
-    Then transactions page is correctly displayed
-    When I click on the top transaction
-    Then transaction details are displayed

apps/explorer-e2e/src/integration/transactions.cy.js

@@ -0,0 +1,87 @@
+//Tests set to skip until transactions are generated after capsule start up
+context.skip('Transactions page', function () {
+  before('visit token home page', function () {
+    cy.visit('/');
+  });
+
+  describe('Verify elements on page', function () {
+    const transactionNavigation = 'a[href="/txs"]';
+    const transactionRow = 'transaction-row';
+    const txHash = 'hash';
+
+    beforeEach('Navigate to transactions page', function () {
+      cy.get(transactionNavigation).click();
+    });
+
+    it('transactions are displayed', function () {
+      cy.get(transactionRow).should('have.length.above', 1);
+    });
+
+    it('transactions details page is displayed', function () {
+      clickTopTransaction();
+      validateTxDetailsAreDisplayed();
+    });
+
+    it('transactions details page is displayed in mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(transactionNavigation).click();
+      clickTopTransaction();
+      validateTxDetailsAreDisplayed();
+    });
+
+    function clickTopTransaction() {
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(1000); // Wait for transactions to load if there are any
+      cy.get('body').then(($body) => {
+        if ($body.find(transactionRow).length) {
+          cy.get(transactionRow)
+            .first()
+            .find('a')
+            .first()
+            .click({ force: true });
+        } else {
+          cy.slack('Unable to find any transactions on page');
+          cy.screenshot();
+        }
+      });
+    }
+
+    function validateTxDetailsAreDisplayed() {
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(1000); // Wait for transactions to load if there are any
+      cy.get('body').then(($body) => {
+        if ($body.find(txHash).length) {
+          cy.get(txHash).invoke('text').should('have.length', 64);
+          cy.get('submitted-by')
+            .find('a')
+            .then(($address) => {
+              cy.wrap($address).should('have.attr', 'href');
+              cy.wrap($address).invoke('text').should('have.length', 66);
+            });
+          cy.get('block').should('not.be.empty');
+          cy.get('encoded-tnx').should('not.be.empty');
+          cy.get('tx-type')
+            .should('not.be.empty')
+            .invoke('text')
+            .then((txTypeTxt) => {
+              if (txTypeTxt == 'Order Submission') {
+                cy.get('.hljs-attr')
+                  .should('have.length.at.least', 8)
+                  .each(($propertyName) => {
+                    cy.wrap($propertyName).should('not.be.empty');
+                  });
+                cy.get('.hljs-string')
+                  .should('have.length.at.least', 8)
+                  .each(($propertyValue) => {
+                    cy.wrap($propertyValue).should('not.be.empty');
+                  });
+              }
+            });
+        } else {
+          cy.slack('Unable to find any transactions on page');
+          cy.screenshot();
+        }
+      });
+    }
+  });
+});

apps/explorer-e2e/src/integration/validator.cy.js

@@ -0,0 +1,28 @@
+import '../support/common.functions';
+
+context('Validator page', function () {
+  describe('Verify elements on page', function () {
+    const validatorNavigation = 'a[href="/validators"]';
+
+    it('Validator page is displayed', function () {
+      cy.visit('/');
+      cy.get(validatorNavigation).click();
+      validateValidatorsDisplayed();
+    });
+
+    it('Validator page is displayed on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(validatorNavigation).click();
+      validateValidatorsDisplayed();
+    });
+
+    function validateValidatorsDisplayed() {
+      cy.get('[data-testid="tendermint-header"]').should(
+        'have.text',
+        'Tendermint data'
+      );
+      cy.get('[data-testid="vega-header"]').should('have.text', 'Vega data');
+      cy.get('[data-testid="vega-data"]').should('not.be.empty');
+    }
+  });
+});

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

@@ -1,11 +0,0 @@
-Feature: Validators Page
-
-  Scenario: Navigate to validators page
-    Given I am on the homepage
-    When I navigate to the validators page
-    Then validators page is correctly displayed
-
-  Scenario: Navigate to validators page using mobile
-    Given I am on mobile and open the toggle menu
-    When I navigate to the validators page
-    Then validators page is correctly displayed

apps/explorer-e2e/src/plugins/index.js

@@ -1,75 +0,0 @@
-/// <reference types="cypress" />
-
-const webpackPreprocessor = require('@cypress/webpack-preprocessor');
-const webpack = require('webpack');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const nodeExternals = require('webpack-node-externals');
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  on(
-    'file:preprocessor',
-    webpackPreprocessor({
-      webpackOptions: {
-        resolve: {
-          extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
-          plugins: [
-            new TsconfigPathsPlugin({
-              configFile: config.env.tsConfig,
-              extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
-            }),
-          ],
-          fallback: {
-            path: require.resolve('path-browserify'),
-          },
-        },
-        module: {
-          rules: [
-            {
-              test: /\.([jt])sx?$/,
-              loader: 'ts-loader',
-              exclude: [/node_modules/],
-              options: {
-                configFile: config.env.tsConfig,
-                // https://github.com/TypeStrong/ts-loader/pull/685
-                experimentalWatchApi: true,
-                transpileOnly: true,
-              },
-            },
-            {
-              test: /\.feature$/,
-              use: [
-                {
-                  loader: 'cypress-cucumber-preprocessor/loader',
-                },
-              ],
-            },
-            {
-              test: /\.features$/,
-              use: [
-                {
-                  loader: 'cypress-cucumber-preprocessor/lib/featuresLoader',
-                },
-              ],
-            },
-          ],
-        },
-        plugins: [
-          new ForkTsCheckerWebpackPlugin({
-            typescript: {
-              enabled: true,
-              configFile: config.env.tsConfig,
-            },
-          }),
-          new webpack.ProvidePlugin({
-            process: 'process/browser',
-          }),
-        ],
-        externals: [nodeExternals()],
-      },
-    })
-  );
-};

apps/explorer-e2e/src/support/common.functions.js

@@ -0,0 +1,53 @@
+Cypress.Commands.add(
+  'common_validate_blocks_data_displayed',
+  function (headerTestId) {
+    cy.get(headerTestId).then(($assetHeaders) => {
+      const headersLength = Number($assetHeaders.length);
+
+      cy.wrap($assetHeaders).each(($header) => {
+        expect($header).to.not.be.empty;
+      });
+
+      cy.get('.language-json')
+        .each(($asset) => {
+          expect($asset).to.not.be.empty;
+        })
+        .then(($list) => {
+          expect($list).to.have.length(headersLength);
+        });
+    });
+  }
+);
+
+Cypress.Commands.add('common_switch_to_mobile_and_click_toggle', function () {
+  cy.viewport('iphone-x');
+  cy.visit('/');
+  cy.get('[data-testid="open-menu"]').click();
+});
+
+Cypress.Commands.add('common_verify_json_parameters', function (expectedNum) {
+  cy.get('.hljs-attr')
+    .should('have.length.at.least', expectedNum)
+    .each(($paramName) => {
+      cy.wrap($paramName).should('not.be.empty');
+    });
+});
+
+Cypress.Commands.add(
+  'common_verify_json_string_values',
+  function (expectedNum) {
+    cy.get('.hljs-string')
+      .should('have.length.at.least', expectedNum)
+      .each(($paramValue) => {
+        cy.wrap($paramValue).should('not.be.empty');
+      });
+  }
+);
+
+Cypress.Commands.add('common_verify_json_int_values', function (expectedNum) {
+  cy.get('.hljs-number')
+    .should('have.length.at.least', expectedNum)
+    .each(($paramValue) => {
+      cy.wrap($paramValue).should('not.be.empty');
+    });
+});

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

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

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

@@ -1,9 +0,0 @@
-import BasePage from './base-page';
-
-export default class AssetsPage extends BasePage {
-  assetHeader = 'asset-header';
-
-  validateAssetsDisplayed() {
-    this.validateBlockDataDisplayed(this.assetHeader);
-  }
-}

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

@@ -1,100 +0,0 @@
-export default class BasePage {
-  transactionsUrl = '/txs';
-  blocksUrl = '/blocks';
-  partiesUrl = '/parties';
-  assetsUrl = '/assets';
-  genesisUrl = '/genesis';
-  governanceUrl = '/governance';
-  marketsUrl = '/markets';
-  networkParametersUrl = '/network-parameters';
-  validatorsUrl = '/validators';
-  blockExplorerHeader = 'explorer-header';
-  searchField = 'search';
-  searchButton = 'search-button';
-  searchError = 'search-error';
-  openMobileMenuBtn = 'open-menu';
-
-  navigateToTxs() {
-    cy.get(`a[href='${this.transactionsUrl}']`).click();
-  }
-
-  navigateToBlocks() {
-    cy.get(`a[href='${this.blocksUrl}']`).click();
-  }
-
-  navigateToParties() {
-    cy.get(`a[href='${this.partiesUrl}']`).click();
-  }
-
-  navigateToAssets() {
-    cy.get(`a[href*='${this.assetsUrl}']`).click();
-  }
-
-  navigateToGenesis() {
-    cy.get(`a[href='${this.genesisUrl}']`).click();
-  }
-
-  navigateToGovernance() {
-    cy.get(`a[href='${this.governanceUrl}']`).click();
-  }
-
-  navigateToMarkets() {
-    cy.get(`a[href='${this.marketsUrl}']`).click();
-  }
-
-  navigateToNetworkParameters() {
-    cy.get(`a[href='${this.networkParametersUrl}']`).click();
-  }
-
-  navigateToValidators() {
-    cy.get(`a[href='${this.validatorsUrl}']`).click();
-  }
-
-  search(searchText: string) {
-    if (searchText) {
-      cy.getByTestId(this.searchField).type(searchText);
-    }
-  }
-
-  clickSearch() {
-    cy.getByTestId(this.searchButton).click();
-  }
-
-  clickOnToggle() {
-    cy.getByTestId(this.openMobileMenuBtn).click({ force: true });
-  }
-
-  validateUrl(expectedUrl: string) {
-    cy.url().should('include', expectedUrl);
-  }
-
-  validateSearchDisplayed() {
-    cy.getByTestId(this.blockExplorerHeader).should(
-      'have.text',
-      'Vega Explorer'
-    );
-    cy.getByTestId(this.searchField).should('be.visible');
-  }
-
-  validateSearchErrorDisplayed(errorMessage: string) {
-    cy.getByTestId(this.searchError).should('have.text', errorMessage);
-  }
-
-  validateBlockDataDisplayed(headerTestId: string) {
-    cy.getByTestId(headerTestId).then(($assetHeaders) => {
-      const headersAmount = Number($assetHeaders.length);
-
-      cy.wrap($assetHeaders).each(($header) => {
-        expect($header).to.not.be.empty;
-      });
-
-      cy.get('.language-json')
-        .each(($asset) => {
-          expect($asset).to.not.be.empty;
-        })
-        .then(($list) => {
-          expect($list).to.have.length(headersAmount);
-        });
-    });
-  }
-}

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

@@ -1,146 +0,0 @@
-import BasePage from './base-page';
-
-export default class BlocksPage extends BasePage {
-  blockRow = 'block-row';
-  transactionsRow = 'transaction-row';
-  blockHeight = 'block-height';
-  numberOfTransactions = 'num-txs';
-  validatorLink = 'validator-link';
-  blockTime = 'block-time';
-  refreshBtn = 'refresh';
-  blockHeader = 'block-header';
-  minedByValidator = 'block-validator';
-  previousBlockBtn = 'previous-block';
-  nextBlockBtn = 'next-block';
-  jumpToBlockInput = 'block-input';
-  jumpToBlockSubmit = 'go-submit';
-  infiniteScrollWrapper = 'infinite-scroll-wrapper';
-
-  private waitForBlocksResponse() {
-    cy.contains('Loading...').should('not.exist', { timeout: 18000 });
-  }
-
-  validateBlocksPageDisplayed() {
-    this.waitForBlocksResponse();
-    cy.getByTestId(this.blockRow).should('have.length.above', 1);
-    cy.getByTestId(this.blockHeight).first().should('not.be.empty');
-    cy.getByTestId(this.numberOfTransactions).first().should('not.be.empty');
-    cy.getByTestId(this.validatorLink).first().should('not.be.empty');
-    cy.getByTestId(this.blockTime).first().should('not.be.empty');
-  }
-
-  clickOnTopBlockHeight() {
-    this.waitForBlocksResponse();
-    cy.getByTestId(this.blockHeight).first().click();
-  }
-
-  validateBlockValidatorPage() {
-    cy.getByTestId(this.minedByValidator).should('not.be.empty');
-    cy.getByTestId(this.blockTime).should('not.be.empty');
-    cy.get('body').then(($body) => {
-      if ($body.find(`[data-testid=${this.transactionsRow}] > td`).length) {
-        cy.get(`[data-testid=${this.transactionsRow}] > td`).each(($cell) => {
-          cy.wrap($cell).should('not.be.empty');
-        });
-      } else {
-        cy.slack('Unable to find any transactions on page');
-        cy.screenshot();
-      }
-    });
-  }
-
-  navigateToPreviousBlock() {
-    cy.getByTestId(this.blockHeader)
-      .invoke('text')
-      .then(($blockHeaderTxt) => {
-        const blockHeight = parseInt($blockHeaderTxt.replace('BLOCK ', ''));
-        this.clickPreviousBlock();
-        cy.getByTestId(this.blockHeader)
-          .invoke('text')
-          .then(($newBlockHeaderTxt) => {
-            const newBlockHeight = parseInt(
-              $newBlockHeaderTxt.replace('BLOCK ', '')
-            );
-            expect(newBlockHeight).to.be.lessThan(blockHeight);
-          });
-      });
-  }
-
-  navigateToNextBlock() {
-    cy.getByTestId(this.blockHeader)
-      .invoke('text')
-      .then(($blockHeaderTxt) => {
-        const blockHeight = parseInt($blockHeaderTxt.replace('BLOCK ', ''));
-        this.clickNextBlock();
-        cy.getByTestId(this.blockHeader)
-          .invoke('text')
-          .then(($newBlockHeaderTxt) => {
-            const newBlockHeight = parseInt(
-              $newBlockHeaderTxt.replace('BLOCK ', '')
-            );
-            expect(newBlockHeight).to.be.greaterThan(blockHeight);
-          });
-      });
-  }
-
-  navigateToLastBlockOnPage() {
-    this.waitForBlocksResponse();
-    cy.getByTestId(this.infiniteScrollWrapper).children().scrollTo('bottom');
-  }
-
-  navigateToOlderBlocksWithInfiniteScroll(
-    expectedBlocks: number,
-    scrollAttempts: number
-  ) {
-    cy.intercept('*blockchain?maxHeight*').as('blockchain_load');
-
-    cy.getByTestId(this.blockHeight)
-      .last()
-      .invoke('text')
-      .then(($initialLastBlockHeight) => {
-        for (let index = 0; index < scrollAttempts; index++) {
-          cy.getByTestId(this.infiniteScrollWrapper)
-            .children()
-            .children()
-            .invoke('css', 'height')
-            .then((scrollTarget) => {
-              cy.getByTestId(this.infiniteScrollWrapper)
-                .children()
-                .scrollTo(0, scrollTarget.toString(), { easing: 'linear' })
-                .wait('@blockchain_load');
-
-              // eslint-disable-next-line cypress/no-unnecessary-waiting
-              cy.wait(50); // Need this as although network response has arrived it takes a few millisecs for the css height to expand
-            });
-        }
-
-        cy.getByTestId(this.blockHeight)
-          .last()
-          .invoke('text')
-          .then(($lastBlockHeight) => {
-            const totalBlocksLoadedSinceScrollBegan =
-              parseInt($initialLastBlockHeight) - parseInt($lastBlockHeight);
-            expect(totalBlocksLoadedSinceScrollBegan).to.be.at.least(
-              expectedBlocks
-            );
-          });
-      });
-  }
-
-  clickPreviousBlock() {
-    cy.getByTestId(this.previousBlockBtn).click();
-  }
-
-  clickNextBlock() {
-    cy.getByTestId(this.nextBlockBtn).click();
-  }
-
-  jumpToBlock(blockNumber: string) {
-    cy.getByTestId(this.jumpToBlockInput).type(blockNumber);
-    cy.getByTestId(this.jumpToBlockSubmit).click();
-  }
-
-  verifyPreviousBtnDisabled() {
-    cy.getByTestId(this.previousBlockBtn).find('button').should('be.disabled');
-  }
-}

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

@@ -1,9 +0,0 @@
-import BasePage from './base-page';
-
-export default class GenesisPage extends BasePage {
-  genesisHeader = 'genesis-header';
-
-  genesisFieldsDisplayed() {
-    this.validateBlockDataDisplayed(this.genesisHeader);
-  }
-}

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

@@ -1,95 +0,0 @@
-import BasePage from './base-page';
-export default class HomePage extends BasePage {
-  statsEnvironmentTitle = 'stats-environment';
-  statsTitle = 'stats-title';
-  statsValue = 'stats-value';
-
-  verifyStatsEnvironment() {
-    const deployedEnv = Cypress.env('environment').toUpperCase();
-    cy.getByTestId(this.statsEnvironmentTitle).should(
-      'have.text',
-      `/ ${deployedEnv}`
-    );
-  }
-
-  verifyStatsTitlesDisplayed() {
-    const statTitles = [
-      'Status',
-      'Height',
-      'Validating nodes',
-      'Uptime',
-      'Total nodes',
-      'Inactive nodes',
-      'Total staked',
-      'Backlog',
-      'Trades / second',
-      'Orders / block',
-      'Orders / second',
-      'Transactions / block',
-      'Block time',
-      'Time',
-      'App',
-      'Tendermint',
-      'Up since',
-      'Chain ID',
-    ];
-
-    cy.getByTestId(this.statsTitle).then(($list) => {
-      cy.wrap($list).should('have.length', 18);
-    });
-
-    cy.getByTestId(this.statsTitle)
-      .each(($title, index) => {
-        cy.wrap($title).should('have.text', statTitles[index]);
-      })
-      .then(($list) => {
-        cy.wrap($list).should('have.length', 18);
-      });
-  }
-
-  verifyStatsValuesDisplayed() {
-    cy.getByTestId(this.statsValue).eq(0).should('have.text', 'CONNECTED');
-    cy.getByTestId(this.statsValue).eq(1).should('not.be.empty');
-    cy.getByTestId(this.statsValue).eq(2).should('have.text', '2');
-    cy.getByTestId(this.statsValue)
-      .eq(3)
-      .invoke('text')
-      .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(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');
-    cy.getByTestId(this.statsValue).eq(10).should('have.text', '0');
-    cy.getByTestId(this.statsValue).eq(11).should('not.be.empty');
-    cy.getByTestId(this.statsValue).eq(12).should('not.be.empty');
-    cy.getByTestId(this.statsValue).eq(13).should('not.be.empty');
-    if (Cypress.env('NIGHTLY_RUN') != true) {
-      cy.getByTestId(this.statsValue)
-        .eq(14)
-        .invoke('text')
-        .should('match', /v\d+\.\d+\.\d+/i);
-    }
-    cy.getByTestId(this.statsValue)
-      .eq(15)
-      .invoke('text')
-      .should('match', /\d+\.\d+\.\d+/i);
-    cy.getByTestId(this.statsValue).eq(16).should('not.be.empty');
-    cy.getByTestId(this.statsValue).eq(17).should('not.be.empty');
-  }
-
-  verifyStatsBlockHeightUpdating() {
-    cy.getByTestId(this.statsValue)
-      .eq(1)
-      .invoke('text')
-      .then((blockHeightTxt) => {
-        cy.getByTestId(this.statsValue)
-          .eq(1)
-          .invoke('text')
-          .should((newBlockHeightTxt) => {
-            expect(blockHeightTxt).not.to.eq(newBlockHeightTxt);
-          });
-      });
-  }
-}

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

@@ -1,9 +0,0 @@
-import BasePage from './base-page';
-
-export default class MarketsPage extends BasePage {
-  marketHeaders = 'markets-header';
-
-  validateMarketDataDisplayed() {
-    this.validateBlockDataDisplayed(this.marketHeaders);
-  }
-}

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

@@ -1,39 +0,0 @@
-import BasePage from './base-page';
-
-export default class NetworkParametersPage extends BasePage {
-  networkParametersHeader = 'network-param-header';
-  parameters = 'parameters';
-  jsonParamNameClassName = '.hljs-attr';
-  jsonParamValueStringClassName = '.hljs-string';
-  jsonParamValueNumberClassName = '.hljs-number';
-  parameterKeyValueRow = 'key-value-table-row';
-
-  verifyNetworkParametersDisplayed() {
-    cy.getByTestId(this.networkParametersHeader).should(
-      'have.text',
-      'Network Parameters'
-    );
-
-    cy.get(this.jsonParamNameClassName)
-      .should('have.length.at.least', 18)
-      .each(($paramName) => {
-        cy.wrap($paramName).should('not.be.empty');
-      });
-    cy.get(this.jsonParamValueStringClassName)
-      .should('have.length.at.least', 6)
-      .each(($paramValue) => {
-        cy.wrap($paramValue).should('not.be.empty');
-      });
-
-    cy.get(this.jsonParamValueNumberClassName)
-      .should('have.length.at.least', 7)
-      .each(($paramValue) => {
-        cy.wrap($paramValue).should('not.be.empty');
-      });
-
-    cy.getByTestId(this.parameterKeyValueRow).each(($row) => {
-      cy.wrap($row).find('dt').should('not.be.empty');
-      cy.wrap($row).find('dd').should('not.be.empty');
-    });
-  }
-}

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

@@ -1,87 +0,0 @@
-import BasePage from './base-page';
-
-export default class TransactionsPage extends BasePage {
-  transactionsList = 'transactions-list';
-  transactionRow = 'transaction-row';
-  blockHeight = 'block-height';
-  numberOfTransactions = 'num-txs';
-  validatorLink = 'validator-link';
-  blockTime = 'block-time';
-  refreshBtn = 'refresh';
-  txHash = 'hash';
-  txSubmittedBy = 'submitted-by';
-  txBlock = 'block';
-  txEncodedTnx = 'encoded-tnx';
-  txType = 'tx-type';
-
-  validateTransactionsPagedisplayed() {
-    cy.getByTestId(this.transactionsList).should('have.length.above', 1);
-    cy.getByTestId(this.blockHeight).first().should('not.be.empty');
-    cy.getByTestId(this.numberOfTransactions).first().should('not.be.empty');
-    cy.getByTestId(this.validatorLink).first().should('not.be.empty');
-    cy.getByTestId(this.blockTime).first().should('not.be.empty');
-  }
-
-  validateRefreshBtn() {
-    cy.intercept('GET', '**/blockchain').as('get-blockchain');
-    cy.getByTestId(this.refreshBtn).click();
-    cy.wait('@get-blockchain').its('response.statusCode').should('eq', 200);
-  }
-
-  validateTxDetailsAreDisplayed() {
-    // TODO fail test when there are no txs once running with Capsule
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(1000); // Wait for transactions to load if there are any
-    cy.get('body').then(($body) => {
-      if ($body.find(`[data-testid=${this.txHash}]`).length) {
-        cy.getByTestId(this.txHash).invoke('text').should('have.length', 64);
-        cy.getByTestId(this.txSubmittedBy)
-          .find('a')
-          .then(($address) => {
-            cy.wrap($address).should('have.attr', 'href');
-            cy.wrap($address).invoke('text').should('have.length', 66);
-          });
-        cy.getByTestId(this.txBlock).should('not.be.empty');
-        cy.getByTestId(this.txEncodedTnx).should('not.be.empty');
-        cy.getByTestId(this.txType)
-          .should('not.be.empty')
-          .invoke('text')
-          .then((txTypeTxt) => {
-            if (txTypeTxt == 'Order Submission') {
-              cy.get('.hljs-attr')
-                .should('have.length.at.least', 8)
-                .each(($propertyName) => {
-                  cy.wrap($propertyName).should('not.be.empty');
-                });
-              cy.get('.hljs-string')
-                .should('have.length.at.least', 8)
-                .each(($propertyValue) => {
-                  cy.wrap($propertyValue).should('not.be.empty');
-                });
-            }
-          });
-      } else {
-        cy.slack('Unable to find any transactions on page');
-        cy.screenshot();
-      }
-    });
-  }
-
-  clickOnTopTransaction() {
-    // TODO fail test when there are no txs once running with Capsule
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(1000); // Wait for transactions to load if there are any
-    cy.get('body').then(($body) => {
-      if ($body.find(`[data-testid=${this.transactionRow}]`).length) {
-        cy.getByTestId(this.transactionRow)
-          .first()
-          .find('a')
-          .first()
-          .click({ force: true });
-      } else {
-        cy.slack('Unable to find any transactions on page');
-        cy.screenshot();
-      }
-    });
-  }
-}

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

@@ -1,18 +0,0 @@
-import BasePage from './base-page';
-
-export default class ValidatorPage extends BasePage {
-  tendermintHeader = 'tendermint-header';
-  vegaHeader = 'vega-header';
-  tendermintData = 'tendermint-data';
-  vegaData = 'vega-data';
-
-  validateValidatorsDisplayed() {
-    cy.getByTestId(this.tendermintHeader).should(
-      'have.text',
-      'Tendermint data'
-    );
-    cy.getByTestId(this.tendermintData).should('not.be.empty');
-    cy.getByTestId(this.vegaHeader).should('have.text', 'Vega data');
-    cy.getByTestId(this.vegaData).should('not.be.empty');
-  }
-}

apps/explorer-e2e/src/support/step_definitions/asset-page-step.ts

@@ -1,12 +0,0 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-import AssetsPage from '../pages/assets-page';
-const assetPage = new AssetsPage();
-
-When('I navigate to the asset page', () => {
-  assetPage.navigateToAssets();
-});
-
-Then('asset page is correctly displayed', () => {
-  assetPage.validateAssetsDisplayed();
-});

apps/explorer-e2e/src/support/step_definitions/blocks-page.step.ts

@@ -1,50 +0,0 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-import BlocksPage from '../pages/blocks-page';
-const blocksPage = new BlocksPage();
-
-When('I navigate to the blocks page', () => {
-  blocksPage.navigateToBlocks();
-});
-
-When('I click on top block', () => {
-  blocksPage.clickOnTopBlockHeight();
-});
-
-When('jump to first block', () => {
-  blocksPage.jumpToBlock('1');
-});
-
-Then('blocks page is correctly displayed', () => {
-  blocksPage.validateBlocksPageDisplayed();
-});
-
-Then('validator block page is correctly displayed', () => {
-  blocksPage.validateBlockValidatorPage();
-});
-
-Then('I am on the previous block when I click previous', () => {
-  blocksPage.navigateToPreviousBlock();
-});
-
-Then('previous button is disabled', () => {
-  blocksPage.verifyPreviousBtnDisabled();
-});
-
-Then('I am on the second block when I click next', () => {
-  blocksPage.navigateToNextBlock();
-});
-
-Then('I scroll down to the last block on the page', () => {
-  blocksPage.navigateToLastBlockOnPage();
-});
-
-Then(
-  'I can expect to see at least {int} blocks if i scroll {int} times',
-  (expectedBlocks, scrollAttempts) => {
-    blocksPage.navigateToOlderBlocksWithInfiniteScroll(
-      expectedBlocks,
-      scrollAttempts
-    );
-  }
-);

apps/explorer-e2e/src/support/step_definitions/common.step.ts

@@ -1,26 +0,0 @@
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
-import BasePage from '../pages/base-page';
-const basePage = new BasePage();
-
-Given('I am on mobile and open the toggle menu', () => {
-  cy.viewport('iphone-x');
-  cy.visit('/');
-  basePage.clickOnToggle();
-});
-
-Given('I am on the homepage', () => {
-  cy.visit('/');
-});
-
-When('I search for {string}', (searchText) => {
-  basePage.search(searchText);
-  basePage.clickSearch();
-});
-
-Then('I am redirected to page containing id {string}', (expectedUrl) => {
-  basePage.validateUrl(expectedUrl);
-});
-
-Then('search error message {string} is displayed', (expectedErrorMsg) => {
-  basePage.validateSearchErrorDisplayed(expectedErrorMsg);
-});

apps/explorer-e2e/src/support/step_definitions/home-page.step.ts

@@ -1,11 +0,0 @@
-import { Then } from 'cypress-cucumber-preprocessor/steps';
-
-import HomePage from '../pages/home-page';
-const homePage = new HomePage();
-
-Then('the stats for deployed environment are correctly displayed', () => {
-  homePage.verifyStatsEnvironment();
-  homePage.verifyStatsTitlesDisplayed();
-  homePage.verifyStatsValuesDisplayed();
-  homePage.verifyStatsBlockHeightUpdating();
-});

apps/explorer-e2e/src/support/step_definitions/markets-page-step.ts

@@ -1,12 +0,0 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-import MarketsPage from '../pages/markets-page';
-const marketsPage = new MarketsPage();
-
-When('I navigate to the markets page', () => {
-  marketsPage.navigateToMarkets();
-});
-
-Then('markets page is correctly displayed', () => {
-  marketsPage.validateMarketDataDisplayed();
-});

apps/explorer-e2e/src/support/step_definitions/network-page.step.ts

@@ -1,11 +0,0 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-import NetworkPage from '../pages/network-page';
-const networkPage = new NetworkPage();
-
-When('I navigate to network parameters page', () => {
-  networkPage.navigateToNetworkParameters();
-});
-
-Then('network parameters page is correctly displayed', () => {
-  networkPage.verifyNetworkParametersDisplayed();
-});

apps/explorer-e2e/src/support/step_definitions/transaction-page.step.ts

@@ -1,30 +0,0 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-import TransactionsPage from '../pages/transactions-page';
-const transactionsPage = new TransactionsPage();
-
-When('I navigate to the transactions page', () => {
-  transactionsPage.navigateToTxs();
-});
-
-When('I navigate to the blocks page', () => {
-  transactionsPage.navigateToBlocks();
-});
-
-When('I click on the top transaction', () => {
-  transactionsPage.clickOnTopTransaction();
-});
-
-Then('transactions page is correctly displayed', () => {
-  transactionsPage.validateTransactionsPagedisplayed();
-  transactionsPage.validateRefreshBtn();
-});
-
-Then('blocks page is correctly displayed', () => {
-  transactionsPage.validateTransactionsPagedisplayed();
-  transactionsPage.validateRefreshBtn();
-});
-
-Then('transaction details are displayed', () => {
-  transactionsPage.validateTxDetailsAreDisplayed();
-});

apps/explorer-e2e/src/support/step_definitions/validators-page-step.ts

@@ -1,12 +0,0 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-import ValidatorPage from '../pages/validators-page';
-const validatorsPage = new ValidatorPage();
-
-When('I navigate to the validators page', () => {
-  validatorsPage.navigateToValidators();
-});
-
-Then('validators page is correctly displayed', () => {
-  validatorsPage.validateValidatorsDisplayed();
-});

apps/explorer/.env

@@ -13,6 +13,7 @@ NX_VEGA_ENV=TESTNET
 NX_VEGA_REST=https://lb.testnet.vega.xyz/datanode/rest
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 CYPRESS_VEGA_TENDERMINT_URL=https://lb.testnet.vega.xyz/tm
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 
 # App flags
 NX_EXPLORER_ASSETS=1
@@ -22,3 +23,5 @@ NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=1

apps/explorer/.env.capsule

@@ -6,12 +6,15 @@ NX_VEGA_URL=http://localhost:3028/query
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_REST=http://localhost:3029
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 
 # App flags
 NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer/.env.devnet

@@ -7,3 +7,4 @@ NX_VEGA_URL=https://n04.d.vega.xyz/query
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 NX_VEGA_ENV=DEVNET
 NX_VEGA_REST=https://n04.d.vega.xyz/datanode/rest
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/explorer/.env.mainnet

@@ -7,3 +7,4 @@ NX_VEGA_URL=https://api.token.vega.xyz/query
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 NX_VEGA_ENV=MAINNET
 NX_VEGA_REST=https://api.token.vega.xyz/
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/explorer/.env.stagnet1

@@ -7,3 +7,4 @@ NX_VEGA_URL=https://n03.s.vega.xyz/query
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 NX_VEGA_ENV=STAGNET
 NX_VEGA_REST=https://n03.s.vega.xyz/datanode/rest
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/explorer/.env.stagnet2

@@ -7,3 +7,4 @@ NX_VEGA_URL=https://n03.stagnet2.vega.xyz/query
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 NX_VEGA_ENV=STAGNET2
 NX_VEGA_REST=https://n01.stagnet2.vega.xyz/datanode/rest
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/explorer/.env.testnet

@@ -7,3 +7,4 @@ NX_VEGA_URL=https://lb.testnet.vega.xyz/query
 NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 NX_VEGA_ENV=TESTNET
 NX_VEGA_REST=https://lb.testnet.vega.xyz/datanode/rest
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/explorer/.env.vegacapsule

@@ -5,3 +5,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_URL=http://localhost:3003/query
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_REST=http://localhost:3029/rest
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/explorer/README.md

@@ -58,6 +58,8 @@ There are a few different configuration options offered for this app:
 | `NX_EXPLORER_GENESIS`            | Enable the genesis page for the explorer                                                             |
 | `NX_EXPLORER_GOVERNANCE`         | Enable the governance page for the explorer                                                          |
 | `NX_EXPLORER_MARKETS`            | Enable the markets page for the explorer                                                             |
+| `NX_EXPLORER_ORACLES`            | Enable the oracles page for the explorer                                                             |
+| `NX_EXPLORER_TXS_LIST`           | Enable the transactions list page for the explorer                                                   |
 | `NX_EXPLORER_NETWORK_PARAMETERS` | Enable the network parameters page for the explorer                                                  |
 | `NX_EXPLORER_PARTIES`            | Enable the parties page for the explorer                                                             |
 | `NX_EXPLORER_VALIDATORS`         | Enable the validators page for the explorer                                                          |

apps/explorer/jest.config.ts

@@ -1,4 +1,5 @@
-module.exports = {
+/* eslint-disable */
+export default {
   displayName: 'explorer',
   preset: '../../jest.preset.js',
   transform: {

apps/explorer/project.json

@@ -1,10 +1,10 @@
 {
-  "root": "apps/explorer",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/explorer/src",
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/web:webpack",
+      "executor": "./tools/executors/webpack:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -38,7 +38,7 @@
       }
     },
     "serve": {
-      "executor": "./tools/executors/serve:serve",
+      "executor": "./tools/executors/webpack:serve",
       "options": {
         "port": 3000,
         "buildTarget": "explorer:build",
@@ -62,12 +62,12 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/apps/explorer"],
       "options": {
-        "jestConfig": "apps/explorer/jest.config.js",
+        "jestConfig": "apps/explorer/jest.config.ts",
         "passWithNoTests": true
       }
     },
     "build-netlify": {
-      "builder": "@nrwl/workspace:run-commands",
+      "executor": "@nrwl/workspace:run-commands",
       "options": {
         "commands": [
           "cp apps/explorer/netlify.toml netlify.toml",

apps/explorer/src/app/app.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
+import { NetworkInfo } from '@vegaprotocol/network-info';
 import { createClient } from './lib/apollo-client';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
@@ -36,6 +37,9 @@ function App() {
                 />
                 <Nav menuOpen={menuOpen} />
                 <Main />
+                <footer className="grid grid-rows-2 grid-cols-[1fr_auto] md:flex md:col-span-2 p-16 gap-12 border-t-1">
+                  <NetworkInfo />
+                </footer>
               </div>
             </div>
           </NetworkLoader>

apps/explorer/src/app/components/blocks/block-data.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import type { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
 import { Routes } from '../../routes/route-names';
 import { Link } from 'react-router-dom';
-import { SecondsAgo } from '../seconds-ago';
+import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import { TimeAgo } from '../time-ago';
 import { TableWithTbody, TableRow, TableCell } from '../table';
 import { t } from '@vegaprotocol/react-helpers';
 
@@ -53,7 +55,16 @@ export const BlockData = ({ block, className }: BlockProps) => {
           className="text-center pr-28 text-neutral-300 w-[170px]"
           aria-label={t('Block genesis')}
         >
-          <SecondsAgo date={block.header?.time} />
+          <Tooltip
+            description={getDateTimeFormat().format(
+              new Date(block.header.time)
+            )}
+          >
+            {/*For some reason we get forwardRef errors if we pass in the TimeAgo component directly*/}
+            <span>
+              <TimeAgo date={block.header.time} />
+            </span>
+          </Tooltip>
         </TableCell>
       </TableRow>
     </TableWithTbody>

apps/explorer/src/app/components/jump-to-block/index.tsx

@@ -29,6 +29,7 @@ export const JumpToBlock = () => {
       inputType="number"
       inputName="blockNumber"
       submitHandler={handleSubmit}
+      inputMin={1}
     />
   );
 };

apps/explorer/src/app/components/jump-to/index.tsx

@@ -9,6 +9,8 @@ interface JumpToProps {
   inputType: HTMLInputTypeAttribute;
   inputName: string;
   submitHandler: (arg0: SyntheticEvent) => void;
+  inputMin?: string | number;
+  inputMax?: string | number;
 }
 
 export const JumpTo = ({
@@ -18,6 +20,8 @@ export const JumpTo = ({
   inputType,
   inputName,
   submitHandler,
+  inputMin,
+  inputMax,
 }: JumpToProps) => {
   return (
     <form onSubmit={submitHandler}>
@@ -35,6 +39,8 @@ export const JumpTo = ({
           name={inputName}
           placeholder={placeholder}
           className="max-w-[200px]"
+          min={inputMin}
+          max={inputMax}
         />
         <Button
           data-testid="go-submit"

apps/explorer/src/app/components/nav/index.tsx

@@ -28,9 +28,10 @@ export const Nav = ({ menuOpen }: NavProps) => {
             className={({ isActive }) =>
               classnames(
                 'block mb-8 px-8',
-                'text-h5 hover:bg-vega-yellow hover:text-black',
+                'text-h5 hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
                 {
-                  'bg-vega-yellow text-black': isActive,
+                  'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
+                    isActive,
                 }
               )
             }

apps/explorer/src/app/components/search/search.tsx

@@ -55,14 +55,18 @@ export const Search = () => {
       onSubmit={handleSubmit(onSubmit)}
       className="flex-1 flex self-center md:ml-16 md:mr-12 md:justify-end"
     >
-      <FormGroup className="relative w-full md:w-2/3 mb-0">
+      <FormGroup
+        label={t('Search by block number or transaction hash')}
+        className="relative w-full md:w-2/3 mb-0"
+        labelClassName="sr-only"
+        labelFor="search"
+      >
         <Input
           {...register('search')}
           id="search"
           data-testid="search"
           hasError={Boolean(error?.message)}
           type="text"
-          autoFocus={true}
           placeholder={t('Enter block number or transaction hash')}
         />
         {error?.message && (

apps/explorer/src/app/components/seconds-ago/index.tsx

@@ -1,33 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { useEffect, useState } from 'react';
-
-interface SecondsAgoProps {
-  date: string | undefined;
-}
-
-export const SecondsAgo = ({ date, ...props }: SecondsAgoProps) => {
-  const [now, setNow] = useState(Date.now());
-
-  useEffect(() => {
-    const int = setInterval(() => {
-      setNow(Date.now());
-    }, 500);
-    return () => clearInterval(int);
-  }, [setNow]);
-
-  if (!date) {
-    return <>{t('Date unknown')}</>;
-  }
-
-  const timeAgoInSeconds = Math.floor((now - new Date(date).getTime()) / 1000);
-
-  return (
-    <div {...props}>
-      {t(
-        `${
-          timeAgoInSeconds === 1 ? '1 second' : `${timeAgoInSeconds} seconds`
-        } ago`
-      )}
-    </div>
-  );
-};

apps/explorer/src/app/components/seconds-ago/seconds-ago.spec.tsx

@@ -1,36 +0,0 @@
-import { render, screen, act } from '@testing-library/react';
-import { SecondsAgo } from './index';
-
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.useRealTimers();
-});
-
-describe('Seconds ago', () => {
-  it('should render successfully', () => {
-    const dateInString = new Date().toString();
-    render(<SecondsAgo data-testid="test-seconds-ago" date={dateInString} />);
-
-    expect(screen.getByTestId('test-seconds-ago')).toBeInTheDocument();
-  });
-
-  it('should show the correct amount of seconds ago', () => {
-    const secondsToWait = 10;
-    const dateInString = new Date().toString();
-
-    act(() => {
-      jest.advanceTimersByTime(secondsToWait * 1000);
-    });
-
-    jest.runOnlyPendingTimers();
-
-    render(<SecondsAgo data-testid="test-seconds-ago" date={dateInString} />);
-
-    expect(screen.getByTestId('test-seconds-ago')).toHaveTextContent(
-      `${secondsToWait} seconds ago`
-    );
-  });
-});

apps/explorer/src/app/components/time-ago/index.tsx

@@ -0,0 +1,26 @@
+import { formatDistanceToNowStrict } from 'date-fns';
+import { t } from '@vegaprotocol/react-helpers';
+import { useEffect, useState } from 'react';
+
+interface TimeAgoProps {
+  date: string;
+}
+
+export const TimeAgo = ({ date, ...props }: TimeAgoProps) => {
+  const [distanceToNow, setDistanceToNow] = useState(
+    formatDistanceToNowStrict(new Date(date))
+  );
+
+  useEffect(() => {
+    const int = setInterval(() => {
+      date && setDistanceToNow(formatDistanceToNowStrict(new Date(date)));
+    }, 500);
+    return () => clearInterval(int);
+  }, [setDistanceToNow, date]);
+
+  if (!date) {
+    return <>{t('Date unknown')}</>;
+  }
+
+  return <span {...props}>{t(`${distanceToNow} ago`)}</span>;
+};

apps/explorer/src/app/components/time-ago/time-ago.spec.tsx

@@ -0,0 +1,45 @@
+import { render, screen, act } from '@testing-library/react';
+import { TimeAgo } from './index';
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(0);
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+describe('Time ago', () => {
+  it('should render successfully', () => {
+    const dateString = new Date().toString();
+    render(<TimeAgo data-testid="date" date={dateString} />);
+
+    expect(screen.getByTestId('date')).toBeInTheDocument();
+  });
+
+  it('should show the correct amount of time ago', () => {
+    const secondsToWait = 10;
+    const date = new Date(-(secondsToWait * 1000)).toString();
+
+    render(<TimeAgo data-testid="test-time-ago" date={date} />);
+
+    expect(screen.getByTestId('test-time-ago')).toHaveTextContent(
+      `${secondsToWait} seconds ago`
+    );
+  });
+
+  it('should show the correct amount of time ago after time has advanced', () => {
+    const date = new Date().toString();
+
+    render(<TimeAgo data-testid="test-time-elapsed" date={date} />);
+
+    act(() => {
+      jest.advanceTimersByTime(30000);
+    });
+
+    expect(screen.getByTestId('test-time-elapsed')).toHaveTextContent(
+      `30 seconds ago`
+    );
+  });
+});

apps/explorer/src/app/components/txs/index.tsx

@@ -1,3 +1,5 @@
 export { TxList } from './tx-list';
 export { BlockTxsData } from './block-txs-data';
 export { TxOrderType } from './tx-order-type';
+export { TxsInfiniteList } from './txs-infinite-list';
+export { TxsInfiniteListItem } from './txs-infinite-list-item';

apps/explorer/src/app/components/txs/tx-order-type.tsx

@@ -1,4 +1,4 @@
-import { Lozenge } from '@vegaprotocol/ui-toolkit';
+import { Lozenge, Intent } from '@vegaprotocol/ui-toolkit';
 
 interface TxOrderTypeProps {
   orderType: string;
@@ -36,7 +36,7 @@ const displayString: StringMap = {
 
 export const TxOrderType = ({ orderType, className }: TxOrderTypeProps) => {
   return (
-    <Lozenge data-testid="tx-type" className={className}>
+    <Lozenge data-testid="tx-type" variant={Intent.None} className={className}>
       {displayString[orderType] || orderType}
     </Lozenge>
   );

apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx

@@ -0,0 +1,92 @@
+import { TxsInfiniteListItem } from './txs-infinite-list-item';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('Txs infinite list item', () => {
+  it('should display "missing vital data" if "Type" data missing', () => {
+    render(
+      <TxsInfiniteListItem
+        // @ts-ignore testing deliberate failure
+        Type={undefined}
+        Command={'test'}
+        Sig={'test'}
+        PubKey={'test'}
+        Nonce={1}
+        TxHash={'test'}
+      />
+    );
+    expect(screen.getByText('Missing vital data')).toBeInTheDocument();
+  });
+
+  it('should display "missing vital data" if "Command" data missing', () => {
+    render(
+      <TxsInfiniteListItem
+        Type={'test'}
+        // @ts-ignore testing deliberate failure
+        Command={undefined}
+        Sig={'test'}
+        PubKey={'test'}
+        Nonce={1}
+        TxHash={'test'}
+      />
+    );
+    expect(screen.getByText('Missing vital data')).toBeInTheDocument();
+  });
+
+  it('should display "missing vital data" if "Pubkey" data missing', () => {
+    render(
+      <TxsInfiniteListItem
+        Type={'test'}
+        Command={'test'}
+        Sig={'test'}
+        // @ts-ignore testing deliberate failure
+        PubKey={undefined}
+        Nonce={1}
+        TxHash={'test'}
+      />
+    );
+    expect(screen.getByText('Missing vital data')).toBeInTheDocument();
+  });
+
+  it('should display "missing vital data" if "TxHash" data missing', () => {
+    render(
+      <TxsInfiniteListItem
+        Type={'test'}
+        Command={'test'}
+        Sig={'test'}
+        PubKey={'test'}
+        Nonce={1}
+        // @ts-ignore testing deliberate failure
+        TxHash={undefined}
+      />
+    );
+    expect(screen.getByText('Missing vital data')).toBeInTheDocument();
+  });
+
+  it('renders data correctly', () => {
+    const testCommandData = JSON.stringify({
+      test: 'test of command data',
+    });
+
+    render(
+      <MemoryRouter>
+        <TxsInfiniteListItem
+          Type={'testType'}
+          Command={testCommandData}
+          Sig={'testSig'}
+          PubKey={'testPubKey'}
+          Nonce={1}
+          TxHash={'testTxHash'}
+        />
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('tx-hash')).toHaveTextContent('testTxHash');
+    expect(screen.getByTestId('pub-key')).toHaveTextContent('testPubKey');
+    expect(screen.getByTestId('type')).toHaveTextContent('testType');
+    const button = screen.getByTestId('command-details');
+    act(() => {
+      fireEvent.click(button);
+    });
+    expect(screen.getByText('"test of command data"')).toBeInTheDocument();
+  });
+});

apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  Icon,
+  Intent,
+  SyntaxHighlighter,
+} from '@vegaprotocol/ui-toolkit';
+import { TruncatedLink } from '../truncate/truncated-link';
+import { Routes } from '../../routes/route-names';
+import { TxOrderType } from './tx-order-type';
+import type { ChainExplorerTxResponse } from '../../routes/types/chain-explorer-response';
+
+const TRUNCATE_LENGTH = 14;
+
+export const TxsInfiniteListItem = ({
+  TxHash,
+  PubKey,
+  Type,
+  Command,
+}: ChainExplorerTxResponse) => {
+  const [open, setOpen] = useState(false);
+
+  if (!TxHash || !PubKey || !Type || !Command) {
+    return <div>Missing vital data</div>;
+  }
+
+  return (
+    <div
+      data-testid="transaction-row"
+      className="grid grid-cols-[repeat(2,_1fr)_240px] gap-12 w-full border-t border-black-60 dark:border-white-25 py-8 txs-infinite-list-item"
+    >
+      <div className="whitespace-nowrap overflow-scroll" data-testid="tx-hash">
+        <TruncatedLink
+          to={`/${Routes.TX}/${TxHash}`}
+          text={TxHash}
+          startChars={TRUNCATE_LENGTH}
+          endChars={TRUNCATE_LENGTH}
+        />
+      </div>
+      <div className="whitespace-nowrap overflow-scroll" data-testid="pub-key">
+        <TruncatedLink
+          to={`/${Routes.PARTIES}/${PubKey}`}
+          text={PubKey}
+          startChars={TRUNCATE_LENGTH}
+          endChars={TRUNCATE_LENGTH}
+        />
+      </div>
+      <div
+        className="flex justify-between whitespace-nowrap overflow-scroll"
+        data-testid="type"
+      >
+        <TxOrderType orderType={Type} />
+        <button
+          title="More details"
+          onClick={() => setOpen(true)}
+          data-testid="command-details"
+        >
+          <Icon name="search-template" />
+        </button>
+        <Dialog
+          open={open}
+          onChange={(isOpen) => setOpen(false)}
+          intent={Intent.None}
+        >
+          <SyntaxHighlighter data={JSON.parse(Command)} />
+        </Dialog>
+      </div>
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/txs-infinite-list.spec.tsx

@@ -0,0 +1,134 @@
+import { TxsInfiniteList } from './txs-infinite-list';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+const generateTxs = (number: number) => {
+  return Array.from(Array(number)).map((_) => ({
+    Type: 'ChainEvent',
+    Command:
+      '{"txId":"0xc8941ac4ea989988cb8f72e8fdab2e2009376fd17619491439d36b519d27bc93","nonce":"1494","stakingEvent":{"index":"263","block":"14805346","stakeDeposited":{"ethereumAddress":"0x2e5fe63e5d49c26998cf4bfa9b64de1cf9ae7ef2","vegaPublicKey":"657c2a8a5867c43c831e24820b7544e2fdcc1cf610cfe0ece940fe78137400fd","amount":"38471116086510047870875","blockTime":"1652968806"}}}',
+    Sig: 'fe7624ab742c492cf1e667e79de4777992aca8e093c8707e1f22685c3125c6082cd21b85cd966a61ad4ca0cca2f8bed3082565caa5915bc3b2f78c1ae35cac0b',
+    PubKey:
+      '0x7d69327393cdfaaae50e5e215feca65273eafabfb38f32b8124e66298af346d5',
+    Nonce: 18296387398179254000,
+    TxHash:
+      '0x9C753FA6325F7A40D9C4FA5C25E24476C54613E12B1FA2DD841E3BB00D088B77',
+  }));
+};
+
+describe('Txs infinite list', () => {
+  it('should display a "no items" message when no items provided', () => {
+    render(
+      <TxsInfiniteList
+        txs={undefined}
+        areTxsLoading={false}
+        hasMoreTxs={false}
+        loadMoreTxs={() => null}
+        error={undefined}
+      />
+    );
+    expect(screen.getByText('No items')).toBeInTheDocument();
+  });
+
+  it('error is displayed at item level', () => {
+    const txs = generateTxs(1);
+    render(
+      <TxsInfiniteList
+        txs={txs}
+        areTxsLoading={false}
+        hasMoreTxs={false}
+        loadMoreTxs={() => null}
+        error={Error('test error!')}
+      />
+    );
+    expect(screen.getByText('Error: test error!')).toBeInTheDocument();
+  });
+
+  it('item renders data of n length into list of n length', () => {
+    // Provided the number of items doesn't exceed the 30 it initially
+    // desires, all txs will initially render
+    const txs = generateTxs(10);
+    render(
+      <MemoryRouter>
+        <TxsInfiniteList
+          txs={txs}
+          areTxsLoading={false}
+          hasMoreTxs={false}
+          loadMoreTxs={() => null}
+          error={undefined}
+        />
+      </MemoryRouter>
+    );
+
+    expect(
+      screen
+        .getByTestId('infinite-scroll-wrapper')
+        .querySelectorAll('.txs-infinite-list-item')
+    ).toHaveLength(10);
+  });
+
+  it('tries to load more items when required to initially fill the list', () => {
+    // For example, if initially rendering 15, the bottom of the list is
+    // in view of the viewport, and the callback should be executed
+    const txs = generateTxs(15);
+    const callback = jest.fn();
+
+    render(
+      <MemoryRouter>
+        <TxsInfiniteList
+          txs={txs}
+          areTxsLoading={false}
+          hasMoreTxs={true}
+          loadMoreTxs={callback}
+          error={undefined}
+        />
+      </MemoryRouter>
+    );
+
+    expect(callback.mock.calls.length).toEqual(1);
+  });
+
+  it('does not try to load more items if there are no more', () => {
+    const txs = generateTxs(3);
+    const callback = jest.fn();
+
+    render(
+      <MemoryRouter>
+        <TxsInfiniteList
+          txs={txs}
+          areTxsLoading={false}
+          hasMoreTxs={false}
+          loadMoreTxs={callback}
+          error={undefined}
+        />
+      </MemoryRouter>
+    );
+
+    expect(callback.mock.calls.length).toEqual(0);
+  });
+
+  it('loads more items is called when scrolled', () => {
+    const txs = generateTxs(20);
+    const callback = jest.fn();
+
+    render(
+      <MemoryRouter>
+        <TxsInfiniteList
+          txs={txs}
+          areTxsLoading={false}
+          hasMoreTxs={true}
+          loadMoreTxs={callback}
+          error={undefined}
+        />
+      </MemoryRouter>
+    );
+
+    act(() => {
+      fireEvent.scroll(screen.getByTestId('infinite-scroll-wrapper'), {
+        target: { scrollY: 600 },
+      });
+    });
+
+    expect(callback.mock.calls.length).toEqual(1);
+  });
+});

apps/explorer/src/app/components/txs/txs-infinite-list.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { FixedSizeList as List } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { t } from '@vegaprotocol/react-helpers';
+import { TxsInfiniteListItem } from './txs-infinite-list-item';
+import type { ChainExplorerTxResponse } from '../../routes/types/chain-explorer-response';
+
+interface TxsInfiniteListProps {
+  hasMoreTxs: boolean;
+  areTxsLoading: boolean | undefined;
+  txs: ChainExplorerTxResponse[] | undefined;
+  loadMoreTxs: () => void;
+  error: Error | undefined;
+  className?: string;
+}
+
+interface ItemProps {
+  index: ChainExplorerTxResponse;
+  style: React.CSSProperties;
+  isLoading: boolean;
+  error: Error | undefined;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const NOOP = () => {};
+
+const Item = ({ index, style, isLoading, error }: ItemProps) => {
+  let content;
+  if (error) {
+    content = t(`${error}`);
+  } else if (isLoading) {
+    content = t('Loading...');
+  } else {
+    const { TxHash, PubKey, Type, Command, Sig, Nonce } = index;
+    content = (
+      <TxsInfiniteListItem
+        Type={Type}
+        Command={Command}
+        Sig={Sig}
+        PubKey={PubKey}
+        Nonce={Nonce}
+        TxHash={TxHash}
+      />
+    );
+  }
+
+  return <div style={style}>{content}</div>;
+};
+
+export const TxsInfiniteList = ({
+  hasMoreTxs,
+  areTxsLoading,
+  txs,
+  loadMoreTxs,
+  error,
+  className,
+}: TxsInfiniteListProps) => {
+  if (!txs) {
+    return <div>No items</div>;
+  }
+
+  // If there are more items to be loaded then add an extra row to hold a loading indicator.
+  const itemCount = hasMoreTxs ? txs.length + 1 : txs.length;
+
+  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const loadMoreItems = areTxsLoading ? NOOP : loadMoreTxs;
+
+  // Every row is loaded except for our loading indicator row.
+  const isItemLoaded = (index: number) => !hasMoreTxs || index < txs.length;
+
+  return (
+    <div className={className} data-testid="transactions-list">
+      <div className="grid grid-cols-[repeat(2,_1fr)_240px] gap-12 w-full mb-8">
+        <div className="text-h5 font-bold">Txn hash</div>
+        <div className="text-h5 font-bold">Party</div>
+        <div className="text-h5 font-bold pl-2">Type</div>
+      </div>
+      <div data-testid="infinite-scroll-wrapper">
+        <InfiniteLoader
+          isItemLoaded={isItemLoaded}
+          itemCount={itemCount}
+          loadMoreItems={loadMoreItems}
+        >
+          {({ onItemsRendered, ref }) => (
+            <List
+              className="List"
+              height={595}
+              itemCount={itemCount}
+              itemSize={41}
+              onItemsRendered={onItemsRendered}
+              ref={ref}
+              width={'100%'}
+            >
+              {({ index, style }) => (
+                <Item
+                  index={txs[index]}
+                  style={style}
+                  isLoading={!isItemLoaded(index)}
+                  error={error}
+                />
+              )}
+            </List>
+          )}
+        </InfiniteLoader>
+      </div>
+    </div>
+  );
+};

apps/explorer/src/app/config/env.ts

@@ -24,6 +24,8 @@ export const ENV = {
     genesis: truthy.includes(windowOrDefault('NX_EXPLORER_GENESIS')),
     governance: truthy.includes(windowOrDefault('NX_EXPLORER_GOVERNANCE')),
     markets: truthy.includes(windowOrDefault('NX_EXPLORER_MARKETS')),
+    oracles: truthy.includes(windowOrDefault('NX_EXPLORER_ORACLES')),
+    txsList: truthy.includes(windowOrDefault('NX_EXPLORER_TXS_LIST')),
     networkParameters: truthy.includes(
       windowOrDefault('NX_EXPLORER_NETWORK_PARAMETERS')
     ),

apps/explorer/src/app/routes/blocks/id/block.spec.tsx

@@ -174,7 +174,7 @@ describe('Block', () => {
     );
     expect(proposer).toHaveAttribute('href', `/${RouteNames.VALIDATORS}`);
     expect(screen.getByTestId('block-time')).toHaveTextContent(
-      '3528 seconds ago'
+      '59 minutes ago'
     );
   });
 

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { DATA_SOURCES } from '../../../config';
+import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
 import type { TendermintBlocksResponse } from '../tendermint-blocks-response';
 import { RouteTitle } from '../../../components/route-title';
-import { SecondsAgo } from '../../../components/seconds-ago';
+import { TimeAgo } from '../../../components/time-ago';
 import {
   TableWithTbody,
   TableRow,
@@ -53,30 +54,38 @@ const Block = () => {
               </Button>
             </Link>
           </div>
-          <TableWithTbody className="mb-28">
-            <TableRow modifier="bordered">
-              <TableHeader scope="row">Mined by</TableHeader>
-              <TableCell modifier="bordered">
-                <HighlightedLink
-                  to={`/${Routes.VALIDATORS}`}
-                  text={blockData?.result.block.header.proposer_address}
-                  data-testid="block-validator"
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow modifier="bordered">
-              <TableHeader scope="row">Time</TableHeader>
-              <TableCell modifier="bordered">
-                <SecondsAgo
-                  data-testid="block-time"
-                  date={blockData?.result.block.header.time}
-                />
-              </TableCell>
-            </TableRow>
-          </TableWithTbody>
-          {blockData && blockData.result.block.data.txs.length > 0 ? (
-            <TxsPerBlock blockHeight={block} />
-          ) : null}
+          {blockData && (
+            <>
+              <TableWithTbody className="mb-28">
+                <TableRow modifier="bordered">
+                  <TableHeader scope="row">Mined by</TableHeader>
+                  <TableCell modifier="bordered">
+                    <HighlightedLink
+                      to={`/${Routes.VALIDATORS}`}
+                      text={blockData.result.block.header.proposer_address}
+                      data-testid="block-validator"
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow modifier="bordered">
+                  <TableHeader scope="row">Time</TableHeader>
+                  <TableCell modifier="bordered">
+                    <TimeAgo
+                      data-testid="block-time"
+                      date={blockData.result.block.header.time}
+                    />{' '}
+                    -{' '}
+                    {getDateTimeFormat().format(
+                      new Date(blockData.result.block.header.time)
+                    )}
+                  </TableCell>
+                </TableRow>
+              </TableWithTbody>
+              {blockData.result.block.data.txs.length > 0 ? (
+                <TxsPerBlock blockHeight={block} />
+              ) : null}
+            </>
+          )}
         </>
       </RenderFetched>
     </section>

apps/explorer/src/app/routes/governance/index.tsx

@@ -101,12 +101,16 @@ const PROPOSAL_QUERY = gql`
 `;
 
 const Governance = () => {
-  const { data } = useQuery<ProposalsQuery>(PROPOSAL_QUERY);
+  const { data } = useQuery<ProposalsQuery>(PROPOSAL_QUERY, {
+    errorPolicy: 'ignore',
+  });
 
   if (!data) return null;
   return (
     <section>
-      <RouteTitle data-testid="governance-header">{t('Governance')}</RouteTitle>
+      <RouteTitle data-testid="governance-header">
+        {t('Governance Proposals')}
+      </RouteTitle>
       {data.proposals?.map((p) => (
         <React.Fragment key={p.id}>
           <SubHeading>{getProposalName(p.terms.change)}</SubHeading>

apps/explorer/src/app/routes/network-parameters/network-parameters.spec.tsx

@@ -24,10 +24,10 @@ describe('NetworkParametersTable', () => {
     );
     const rows = screen.getAllByTestId('key-value-table-row');
     expect(rows[0].children[0]).toHaveTextContent(
-      'Market Fee Factors Infrastructure Fee'
+      'market.fee.factors.infrastructureFee'
     );
     expect(rows[1].children[0]).toHaveTextContent(
-      'Market Liquidity Provision Min Lp Stake Quantum Multiple'
+      'market.liquidityProvision.minLpStakeQuantumMultiple'
     );
     expect(rows[0].children[1]).toHaveTextContent('0.0005');
     expect(rows[1].children[1]).toHaveTextContent('1');
@@ -54,10 +54,10 @@ describe('NetworkParametersTable', () => {
     );
     const rows = screen.getAllByTestId('key-value-table-row');
     expect(rows[0].children[0]).toHaveTextContent(
-      'Market Fee Factors Infrastructure Fee'
+      'market.fee.factors.infrastructureFee'
     );
     expect(rows[1].children[0]).toHaveTextContent(
-      'Market Liquidity Provision Min Lp Stake Quantum Multiple'
+      'market.liquidityProvision.minLpStakeQuantumMultiple'
     );
     expect(rows[0].children[1]).toHaveTextContent('0.0005');
     expect(rows[1].children[1]).toHaveTextContent('1');

apps/explorer/src/app/routes/network-parameters/network-parameters.tsx

@@ -16,7 +16,6 @@ import type {
   NetworkParametersQuery_networkParameters,
 } from './__generated__/NetworkParametersQuery';
 import orderBy from 'lodash/orderBy';
-import startCase from 'lodash/startCase';
 
 const BIG_NUMBER_PARAMS = [
   'spam.protection.delegation.min.tokens',
@@ -34,6 +33,8 @@ const BIG_NUMBER_PARAMS = [
   'spam.protection.proposal.min.tokens',
   'governance.proposal.updateMarket.minProposerBalance',
   'governance.proposal.asset.minProposerBalance',
+  'governance.proposal.market.minProposerBalance',
+  'governance.proposal.market.minVoterBalance',
 ];
 
 export const renderRow = ({
@@ -42,8 +43,15 @@ export const renderRow = ({
 }: NetworkParametersQuery_networkParameters) => {
   const isSyntaxRow = isJsonObject(value);
   return (
-    <KeyValueTableRow key={key} inline={!isSyntaxRow}>
-      {startCase(key)}
+    <KeyValueTableRow
+      key={key}
+      inline={!isSyntaxRow}
+      id={key}
+      className={
+        'group target:bg-vega-pink target:text-white dark:target:bg-vega-yellow dark:target:text-black'
+      }
+    >
+      {key}
       {isSyntaxRow ? (
         <SyntaxHighlighter data={JSON.parse(value)} />
       ) : isNaN(Number(value)) ? (

apps/explorer/src/app/routes/oracles/__generated__/OracleSpecs.ts

@@ -0,0 +1,97 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { OracleSpecStatus, PropertyKeyType, ConditionOperator } from "@vegaprotocol/types";
+
+// ====================================================
+// GraphQL query operation: OracleSpecs
+// ====================================================
+
+export interface OracleSpecs_oracleSpecs_filters_key {
+  __typename: "PropertyKey";
+  /**
+   * name is the name of the property.
+   */
+  name: string | null;
+  /**
+   * type is the type of the property.
+   */
+  type: PropertyKeyType;
+}
+
+export interface OracleSpecs_oracleSpecs_filters_conditions {
+  __typename: "Condition";
+  /**
+   * value is used by the comparator.
+   */
+  value: string | null;
+  /**
+   * comparator is the type of comparison to make on the value.
+   */
+  operator: ConditionOperator;
+}
+
+export interface OracleSpecs_oracleSpecs_filters {
+  __typename: "Filter";
+  /**
+   * key is the oracle data property key targeted by the filter.
+   */
+  key: OracleSpecs_oracleSpecs_filters_key;
+  /**
+   * conditions are the conditions that should be matched by the data to be
+   * considered of interest.
+   */
+  conditions: OracleSpecs_oracleSpecs_filters_conditions[] | null;
+}
+
+export interface OracleSpecs_oracleSpecs_data {
+  __typename: "OracleData";
+  /**
+   * pubKeys is the list of public keys that signed the data
+   */
+  pubKeys: string[] | null;
+}
+
+export interface OracleSpecs_oracleSpecs {
+  __typename: "OracleSpec";
+  /**
+   * status describes the status of the oracle spec
+   */
+  status: OracleSpecStatus;
+  /**
+   * id is a hash generated from the OracleSpec data.
+   */
+  id: string;
+  /**
+   * RFC3339Nano creation date time
+   */
+  createdAt: string;
+  /**
+   * RFC3339Nano last updated timestamp
+   */
+  updatedAt: string | null;
+  /**
+   * pubKeys is the list of authorized public keys that signed the data for this
+   * oracle. All the public keys in the oracle data should be contained in these
+   * public keys.
+   */
+  pubKeys: string[] | null;
+  /**
+   * filters describes which oracle data are considered of interest or not for
+   * the product (or the risk model).
+   */
+  filters: OracleSpecs_oracleSpecs_filters[] | null;
+  /**
+   * data list all the oracle data broadcast to this spec
+   */
+  data: OracleSpecs_oracleSpecs_data[];
+}
+
+export interface OracleSpecs {
+  /**
+   * All registered oracle specs
+   */
+  oracleSpecs: OracleSpecs_oracleSpecs[] | null;
+}

apps/explorer/src/app/routes/oracles/index.tsx

@@ -0,0 +1,53 @@
+import { gql, useQuery } from '@apollo/client';
+import type { OracleSpecs as OracleSpecsQuery } from './__generated__/OracleSpecs';
+
+import React from 'react';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
+import { RouteTitle } from '../../components/route-title';
+import { t } from '@vegaprotocol/react-helpers';
+import { SubHeading } from '../../components/sub-heading';
+
+const ORACLE_SPECS_QUERY = gql`
+  query OracleSpecs {
+    oracleSpecs {
+      status
+      id
+      createdAt
+      updatedAt
+      pubKeys
+      filters {
+        key {
+          name
+          type
+        }
+        conditions {
+          value
+          operator
+        }
+      }
+      data {
+        pubKeys
+      }
+    }
+  }
+`;
+
+const Oracles = () => {
+  const { data } = useQuery<OracleSpecsQuery>(ORACLE_SPECS_QUERY);
+
+  return (
+    <section>
+      <RouteTitle data-testid="oracle-specs-heading">{t('Oracles')}</RouteTitle>
+      {data?.oracleSpecs
+        ? data.oracleSpecs.map((o) => (
+            <React.Fragment key={o.id}>
+              <SubHeading>{o.id}</SubHeading>
+              <SyntaxHighlighter data={o} />
+            </React.Fragment>
+          ))
+        : null}
+    </section>
+  );
+};
+
+export default Oracles;

apps/explorer/src/app/routes/route-names.tsx

@@ -8,5 +8,6 @@ export const Routes = {
   GENESIS: 'genesis',
   GOVERNANCE: 'governance',
   MARKETS: 'markets',
+  ORACLES: 'oracles',
   NETWORK_PARAMETERS: 'network-parameters',
 };

apps/explorer/src/app/routes/router-config.tsx

@@ -3,6 +3,7 @@ import BlockPage from './blocks';
 import Governance from './governance';
 import Home from './home';
 import Markets from './markets';
+import Oracles from './oracles';
 import Party from './parties';
 import { Parties } from './parties/home';
 import { Party as PartySingle } from './parties/id';
@@ -12,7 +13,7 @@ import Genesis from './genesis';
 import { Block } from './blocks/id';
 import { Blocks } from './blocks/home';
 import { Tx } from './txs/id';
-import { Txs as TxHome } from './txs/home';
+import { TxsHome, TxsHomeFallback } from './txs/home';
 import { PendingTxs } from './pending';
 import flags from '../config/flags';
 import { t } from '@vegaprotocol/react-helpers';
@@ -66,8 +67,8 @@ const governanceRoutes = flags.governance
   ? [
       {
         path: Routes.GOVERNANCE,
-        name: 'Governance',
-        text: t('Proposals'),
+        name: 'Governance proposals',
+        text: t('Governance Proposals'),
         element: <Governance />,
       },
     ]
@@ -84,6 +85,17 @@ const marketsRoutes = flags.markets
     ]
   : [];
 
+const oraclesRoutes = flags.oracles
+  ? [
+      {
+        path: Routes.ORACLES,
+        name: 'Oracles',
+        text: t('Oracles'),
+        element: <Oracles />,
+      },
+    ]
+  : [];
+
 const networkParametersRoutes = flags.networkParameters
   ? [
       {
@@ -129,7 +141,7 @@ const routerConfig = [
       },
       {
         index: true,
-        element: <TxHome />,
+        element: flags.txsList ? <TxsHome /> : <TxsHomeFallback />,
       },
     ],
   },
@@ -154,6 +166,7 @@ const routerConfig = [
   ...genesisRoutes,
   ...governanceRoutes,
   ...marketsRoutes,
+  ...oraclesRoutes,
   ...networkParametersRoutes,
   ...validators,
 ];

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -1,32 +1,130 @@
-import type { TendermintBlockchainResponse } from '../../blocks/tendermint-blockchain-response';
 import { DATA_SOURCES } from '../../../config';
+import { useCallback, useState, useMemo } from 'react';
+import { t, useFetch } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../../components/route-title';
 import { BlocksRefetch } from '../../../components/blocks';
-import { RenderFetched } from '../../../components/render-fetched';
-import { BlockTxsData } from '../../../components/txs';
 import { JumpToBlock } from '../../../components/jump-to-block';
-import { t, useFetch } from '@vegaprotocol/react-helpers';
+import { TxsInfiniteList } from '../../../components/txs';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import type { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
+import type { TendermintBlockchainResponse } from '../../blocks/tendermint-blockchain-response';
 
-const Txs = () => {
-  const {
-    state: { data, error, loading },
-    refetch,
-  } = useFetch<TendermintBlockchainResponse>(
-    `${DATA_SOURCES.tendermintUrl}/blockchain`
+interface TxsProps {
+  latestBlockHeight: string;
+}
+
+interface TxsStateProps {
+  txsData: ChainExplorerTxResponse[];
+  hasMoreTxs: boolean;
+  nextPage: number;
+}
+
+const Txs = ({ latestBlockHeight }: TxsProps) => {
+  const [{ txsData, hasMoreTxs, nextPage }, setTxsState] =
+    useState<TxsStateProps>({
+      txsData: [],
+      hasMoreTxs: true,
+      nextPage: 1,
+    });
+
+  const reusedBodyParams = useMemo(
+    () => ({
+      node_url: DATA_SOURCES.tendermintUrl,
+      transaction_height: parseInt(latestBlockHeight),
+      page_size: 30,
+    }),
+    [latestBlockHeight]
   );
 
+  const {
+    state: { error, loading },
+    refetch,
+  } = useFetch(
+    DATA_SOURCES.chainExplorerUrl,
+    {
+      method: 'POST',
+      body: JSON.stringify(reusedBodyParams),
+    },
+    false
+  );
+
+  const loadTxs = useCallback(async () => {
+    const data = await refetch(
+      undefined,
+      JSON.stringify({
+        ...reusedBodyParams,
+        page_number: nextPage,
+      })
+    );
+
+    if (data) {
+      setTxsState((prev) => ({
+        ...prev,
+        nextPage: prev.nextPage + 1,
+        hasMoreTxs: true,
+        txsData: [...prev.txsData, ...(data as ChainExplorerTxResponse[])],
+      }));
+    }
+  }, [nextPage, refetch, reusedBodyParams]);
+
   return (
     <section>
       <RouteTitle>{t('Transactions')}</RouteTitle>
-      <RenderFetched error={error} loading={loading}>
-        <>
-          <BlocksRefetch refetch={refetch} />
-          <BlockTxsData data={data} />
-        </>
-      </RenderFetched>
+      <BlocksRefetch
+        refetch={() =>
+          refetch(
+            undefined,
+            JSON.stringify({
+              ...reusedBodyParams,
+              page_number: 1,
+            })
+          )
+        }
+      />
+      <TxsInfiniteList
+        hasMoreTxs={hasMoreTxs}
+        areTxsLoading={loading}
+        txs={txsData}
+        loadMoreTxs={loadTxs}
+        error={error}
+        className="mb-28"
+      />
       <JumpToBlock />
     </section>
   );
 };
 
-export { Txs };
+export const TxsHome = () => {
+  const {
+    state: { data, error, loading },
+  } = useFetch<TendermintBlockchainResponse>(
+    `${DATA_SOURCES.tendermintUrl}/blockchain`
+  );
+
+  return (
+    <AsyncRenderer
+      loading={!!loading}
+      loadingMessage={t('Getting latest block height...')}
+      error={error}
+      data={data}
+      noDataMessage={t('Could not get latest block height')}
+      render={(data) => (
+        <Txs
+          latestBlockHeight={
+            data?.result?.block_metas?.[0]?.header?.height || ''
+          }
+        />
+      )}
+    />
+  );
+};
+
+export const TxsHomeFallback = () => (
+  <>
+    <RouteTitle>{t('Transactions')}</RouteTitle>
+    <div>
+      The transactions list is currently disabled. Please use the search bar to
+      discover transaction data
+    </div>
+  </>
+);

apps/explorer/tsconfig.app.json

@@ -16,7 +16,8 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "jest.config.ts"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

apps/explorer/tsconfig.spec.json

@@ -14,7 +14,8 @@
     "**/*.spec.js",
     "**/*.test.jsx",
     "**/*.spec.jsx",
-    "**/*.d.ts"
+    "**/*.d.ts",
+    "jest.config.ts"
   ],
   "files": [
     "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",

apps/explorer/webpack.config.js

@@ -9,6 +9,7 @@ module.exports = (config, context) => {
         }),
       ]
     : [];
+
   return {
     ...config,
     plugins: [...additionalPlugins, ...config.plugins],

apps/simple-trading-app-e2e/.env

@@ -24,3 +24,4 @@ NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
 NX_VEGA_URL=https://lb.testnet.vega.xyz/query
 NX_VEGA_ENV=TESTNET
 NX_VEGA_REST=https://lb.testnet.vega.xyz/datanode/rest
+NX_VEGA_WALLET_URL=http://localhost:1789/api/v1

apps/simple-trading-app-e2e/cypress.config.js

@@ -0,0 +1,39 @@
+const { defineConfig } = require('cypress');
+module.exports = defineConfig({
+  projectId: 'et4snf',
+
+  e2e: {
+    baseUrl: 'http://localhost:4200',
+    fileServerFolder: '.',
+    fixturesFolder: false,
+    specPattern: './src/integration/*.ts',
+    excludeSpecPattern: '**/*.js',
+    modifyObstructiveCode: false,
+    supportFile: './src/support/index.ts',
+    video: true,
+    videoUploadOnPasses: false,
+    videosFolder: '../../dist/cypress/apps/explorer-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
+    chromeWebSecurity: false,
+    viewportWidth: 1440,
+    viewportHeight: 900,
+  },
+  env: {
+    TRADING_TEST_VEGA_WALLET_NAME: 'UI_Trading_Test',
+    ETHEREUM_PROVIDER_URL:
+      'https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
+    VEGA_PUBLIC_KEY:
+      '47836c253520d2661bf5bed6339c0de08fd02cf5d4db0efee3b4373f20c7d278',
+    VEGA_PUBLIC_KEY2:
+      '1a18cdcaaa4f44a57b35a4e9b77e0701c17a476f2b407620f8c17371740cf2e4',
+    TRUNCATED_VEGA_PUBLIC_KEY: '47836c…c7d278',
+    TRUNCATED_VEGA_PUBLIC_KEY2: '1a18cd…0cf2e4',
+    ETHEREUM_WALLET_ADDRESS: '0x265Cc6d39a1B53d0d92068443009eE7410807158',
+    ETHERSCAN_URL: 'https://ropsten.etherscan.io',
+    tsConfig: 'tsconfig.json',
+    TAGS: 'not @todo and not @ignore and not @manual',
+    TRADING_TEST_VEGA_WALLET_PASSPHRASE: '123',
+    ETH_WALLET_MNEMONIC:
+      'ugly gallery notice network true range brave clarify flat logic someone chunk',
+  },
+});

apps/simple-trading-app-e2e/cypress.json

@@ -1,16 +0,0 @@
-{
-  "baseUrl": "http://localhost:4200",
-  "fileServerFolder": ".",
-  "testFiles": "*.{ts,feature,features}",
-  "ignoreTestFiles": "**/*.js",
-  "fixturesFolder": "./src/fixtures",
-  "integrationFolder": "./src/integration",
-  "modifyObstructiveCode": false,
-  "supportFile": "./src/support/index.ts",
-  "pluginsFile": false,
-  "video": true,
-  "videosFolder": "../../dist/cypress/apps/simple-trading-app-e2e/videos",
-  "screenshotsFolder": "../../dist/cypress/apps/simple-trading-app-e2e/screenshots",
-  "chromeWebSecurity": false,
-  "projectId": "et4snf"
-}

apps/simple-trading-app-e2e/project.json

@@ -1,12 +1,12 @@
 {
-  "root": "apps/simple-trading-app-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/simple-trading-app-e2e/src",
   "projectType": "application",
   "targets": {
     "e2e": {
       "executor": "@nrwl/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/simple-trading-app-e2e/cypress.json",
+        "cypressConfig": "apps/simple-trading-app-e2e/cypress.config.js",
         "devServerTarget": "simple-trading-app:serve"
       },
       "configurations": {

apps/simple-trading-app-e2e/src/integration/header.test.ts

@@ -0,0 +1,30 @@
+describe('console lite header', () => {
+  beforeEach(() => {
+    window.localStorage.setItem('theme', 'dark');
+    cy.visit('/');
+  });
+
+  it('logo should linked home', () => {
+    cy.get('span').contains('Markets').click();
+    cy.location('pathname').should('eq', '/markets');
+    cy.getByTestId('header').find('a').click();
+    cy.location('pathname').should('eq', '/');
+  });
+
+  it('theme switcher should switch theme', () => {
+    cy.get('#root').children().eq(0).as('Container');
+    cy.get('@Container').should('have.css', 'background-color', 'rgb(8, 8, 8)');
+    cy.getByTestId('theme-switcher').click();
+    cy.get('@Container').should(
+      'have.css',
+      'background-color',
+      'rgb(255, 255, 255)'
+    );
+  });
+
+  it('wallet connector should open a dialog', () => {
+    cy.get('[role="dialog"]').should('not.exist');
+    cy.getByTestId('connect-vega-wallet').click();
+    cy.get('[role="dialog"]').should('be.visible');
+  });
+});