fix(utils): missing flags

.dockerignore

@@ -3,7 +3,3 @@ apps/**/node_modules/*
 tmp/*
 .dockerignore
 dockerfiles
-node_modules
-.git
-.github
-.vscode

.github/ISSUE_TEMPLATE/release.md

@@ -1,21 +0,0 @@
----
-name: Release
-about: A template to outline the steps needed to for a successful release of our frontend apps
-title: 'Release [add dapp version]-core-[add core version]'
-labels:
-assignees: ''
----
-
-### Tasks
-
-- [ ] Review [link to core release](xxx)
-- [ ] Tag frontend-monorepo
-- [ ] Create release and generate release notes
-- [ ] Run `@smoke` tests
-- [ ] Run `@regression` tests
-- [ ] Run `@slow` tests
-- [ ] Explorative testing of key flows
-- [ ] Set `release/[network]` to tagged commit
-- [ ] Verify builds (on Netlify and Fleek) are successful
-- [ ] Verify build has been deployed
-- [ ] Smoke testing on deployed app

.github/workflows/add_issue_new_projects.yml

@@ -13,7 +13,7 @@ env:
 
 jobs:
   add_issue:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: 'Add issue to project board'
         run: |

.github/workflows/branch-length.yml

@@ -1,16 +0,0 @@
-name: 'Check if branch is shorter than 52 chars'
-on: pull_request
-
-jobs:
-  branch-naming-rules:
-    runs-on: ubuntu-latest
-    steps:
-      # echo "branches that are longer than 51 chars can't be parsed by kubernetes to create previews. Each app has prefix of it's name like: 'governance-' (12 chars), what leaves 51 max branch length"
-      # current parsable length: $( git rev-parse --abbrev-ref HEAD | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | wc -c)
-      - uses: deepakputhraya/action-branch-name@master
-        with:
-          # regex: '([a-z])+\/([a-z])+' # Regex the branch should match. This example enforces grouping
-          # allowed_prefixes: 'feature,stable,fix' # All branches should start with the given prefix
-          # ignore: master,develop # Ignore exactly matching branch names from convention
-          min_length: 1 # Min length of the branch name
-          max_length: 51 # Max length of the branch name

.github/workflows/ci-cd-trigger.yml

@@ -1,211 +0,0 @@
-name: CI/CD
-
-on:
-  push:
-    branches:
-      - release/*
-      - develop
-    tags:
-      - v*
-  pull_request:
-    types:
-      - opened
-      - ready_for_review
-      - reopened
-      - edited
-      - synchronize
-jobs:
-  node-modules:
-    runs-on: ubuntu-22.04
-    name: 'Cache yarn modules'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Cache node modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-          # comment out "restore-keys" if you need to rebuild yarn from 0
-          restore-keys: |
-            ${{ runner.os }}-cache-node-modules-
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: steps.cache.outputs.cache-hit != 'true'
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: yarn install
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --pure-lockfile
-
-  lint-pr-title:
-    needs: node-modules
-    if: ${{ github.event_name == 'pull_request' }}
-    name: Verify PR title
-    uses: ./.github/workflows/lint-pr.yml
-    secrets: inherit
-
-  lint-test-build:
-    timeout-minutes: 60
-    needs: node-modules
-    runs-on: ubuntu-22.04
-    name: '(CI) lint + unit test + build'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v3
-        with:
-          main-branch-name: develop
-
-      - name: Check formatting
-        run: yarn nx format:check
-
-      - name: Lint affected
-        run: yarn nx affected:lint --max-warnings=0
-
-      - name: Build affected spec
-        run: yarn nx affected --target=build-spec
-
-      - name: Test affected
-        run: yarn nx affected:test
-
-      - name: Build affected
-        run: yarn nx affected:build || (yarn install && yarn nx affected:build)
-
-      # See affected apps
-      - name: See affected apps
-        run: |
-          echo ">>>> debug"
-          echo "NX_BASE: ${{ env.NX_BASE }}"
-          echo "NX_HEAD: ${{ env.NX_HEAD }}"
-          echo ">>>> eof debug"
-
-          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
-
-          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
-          projects_e2e=""
-          preview_governance="not deployed"
-          preview_trading="not deployed"
-          preview_explorer="not deployed"
-          if [[ -z "$projects_e2e" ]]; then
-            projects_e2e+='"governance-e2e" "trading-e2e" "explorer-e2e" '
-            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          else
-            if [[ $affected == *"governance"* ]]; then
-              projects_e2e+='"governance-e2e" '
-              preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            fi
-            if [[ $affected == *"trading"* ]]; then
-              projects_e2e+='"trading-e2e" '
-              preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            fi
-            if [[ $affected == *"explorer"* ]]; then
-              projects_e2e+='"explorer-e2e" '
-              preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-            fi
-          fi
-          projects_e2e=${projects_e2e%?}
-          projects_e2e=[${projects_e2e// /,}]
-          echo PROJECTS_E2E=$projects_e2e >> $GITHUB_ENV
-          echo PROJECTS=$(echo $projects_e2e | sed 's|-e2e||g') >> $GITHUB_ENV
-          echo PREVIEW_GOVERNANCE=$preview_governance >> $GITHUB_ENV
-          echo PREVIEW_TRADING=$preview_trading >> $GITHUB_ENV
-          echo PREVIEW_EXPLORER=$preview_explorer >> $GITHUB_ENV
-
-    outputs:
-      projects: ${{ env.PROJECTS }}
-      projects-e2e: ${{ env.PROJECTS_E2E }}
-      preview_governance: ${{ env.PREVIEW_GOVERNANCE }}
-      preview_trading: ${{ env.PREVIEW_TRADING }}
-      preview_explorer: ${{ env.PREVIEW_EXPLORER }}
-
-  cypress:
-    needs: lint-test-build
-    name: '(CI) cypress'
-    if: ${{ needs.lint-test-build.outputs.projects != '[]' }}
-    uses: ./.github/workflows/cypress-run.yml
-    secrets: inherit
-    with:
-      projects: ${{ needs.lint-test-build.outputs.projects-e2e }}
-      tags: '@smoke @regression'
-
-  publish-dist:
-    needs: lint-test-build
-    name: '(CD) publish dist'
-    if: ${{ needs.lint-test-build.outputs.projects != '[]' }}
-    uses: ./.github/workflows/publish-dist.yml
-    secrets: inherit
-    with:
-      projects: ${{ needs.lint-test-build.outputs.projects }}
-
-  dist-check:
-    runs-on: ubuntu-latest
-    needs:
-      - publish-dist
-      - lint-test-build
-    if: ${{ github.event_name == 'pull_request' }}
-    name: '(CD) comment preview links'
-    steps:
-      - name: Find Comment
-        uses: peter-evans/find-comment@v2
-        id: fc
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body-includes: Previews
-
-      - name: Create comment
-        uses: peter-evans/create-or-update-comment@v3
-        if: ${{ steps.fc.outputs.comment-id == 0 }}
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            Previews:
-            * governance: ${{ needs.lint-test-build.outputs.preview_governance }}
-            * explorer: ${{ needs.lint-test-build.outputs.preview_explorer  }}
-            * trading: ${{ needs.lint-test-build.outputs.preview_trading }}
-
-  cypress-check:
-    name: '(CI) cypress - check'
-    runs-on: ubuntu-latest
-    needs: cypress
-    steps:
-      - run: echo Done!
-
-  # Report single result at the end, to avoid mess with required checks in PR
-  cypress-result:
-    if: ${{ always() }}
-    needs: cypress
-    runs-on: ubuntu-22.04
-    steps:
-      - run: |
-          result="${{ needs.cypress.result }}"
-          if [[ $result == "success" || $result == "skipped" ]]; then
-            exit 0
-          else
-            exit 1
-          fi

.github/workflows/cypress-live-test.yml

@@ -13,7 +13,7 @@ on:
 jobs:
   cypress-run:
     name: Run Cypress Trading tests -- live environment
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2

.github/workflows/cypress-pr.yml

@@ -0,0 +1,78 @@
+name: Cypress tests - PR
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+jobs:
+  pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+
+      - name: Remove package.json & yarn.lock to avoid installing everything
+        run: rm package.json yarn.lock
+
+      - name: Install nx
+        run: yarn add nx
+
+      # Check SHAs
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v2
+        with:
+          main-branch-name: ${{ github.base_ref || github.ref_name }}
+          set-environment-variables-for-job: true
+
+      # See affected apps
+      - name: See affected apps
+        run: |
+          affected=$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)
+          echo -n "Affected projects: $affected"
+          projects=""
+          if [[ $affected == *"governance"* ]]; then projects+='"governance-e2e" '; fi
+          if [[ $affected == *"trading"* ]]; then projects+='"trading-e2e" '; fi
+          if [[ $affected == *"explorer"* ]]; then projects+='"explorer-e2e" '; fi
+          if [[ -z "$projects" ]]; then projects+='"governance-e2e" "trading-e2e" "explorer-e2e" '; fi
+          projects=${projects%?}
+          projects=[${projects// /,}]
+          echo PROJECTS=$projects >> $GITHUB_ENV
+
+    outputs:
+      projects: ${{ env.PROJECTS }}
+
+  run:
+    needs: pr
+    if: ${{ needs.pr.outputs.projects != '[]' }}
+    uses: ./.github/workflows/cypress-run.yml
+    secrets: inherit
+    with:
+      projects: ${{ needs.pr.outputs.projects }}
+      tags: '@smoke @regression'
+
+  # Report single result at the end, to avoid mess with required checks in PR
+  result:
+    if: ${{ always() }}
+    needs: run
+    runs-on: ubuntu-latest
+    name: Cypress result
+    steps:
+      - run: |
+          result="${{ needs.run.result }}"
+          if [[ $result == "success" || $result == "skipped" ]]; then
+            exit 0
+          else
+            exit 1
+          fi

.github/workflows/cypress-run.yml

@@ -1,4 +1,3 @@
-name: (CI) Cypress Run
 on:
   workflow_call:
     inputs:
@@ -18,9 +17,8 @@ jobs:
       fail-fast: false
       matrix:
         project: ${{ fromJSON(inputs.projects) }}
-    name: ${{ matrix.project }}
     runs-on: self-hosted-runner
-    timeout-minutes: 40
+    timeout-minutes: 30
     steps:
       # Checks if skip cache was requested
       - name: Set skip-nx-cache flag
@@ -93,9 +91,3 @@ jobs:
         with:
           name: logs-${{ matrix.project }}
           path: /home/runner/.vegacapsule/testnet/logs
-
-      - uses: actions/upload-artifact@v3
-        if: ${{ failure() }}
-        with:
-          name: test-report-${{ matrix.project }}
-          path: frontend-monorepo/apps/trading-e2e/cypress/reports

.github/workflows/generate-queries.yml

@@ -8,25 +8,22 @@ on:
 jobs:
   master:
     name: Generate Queries
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
-
-      - name: Setup node
-        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          fetch-depth: 0
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
+      - name: Use Node.js 16
-          cache: yarn
+        id: Node
-
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.15.1
       - name: Install root dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install
-
       - name: Generate queries
         run: node ./scripts/get-queries.js
-
       - uses: actions/upload-artifact@v2
         with:
           name: queries

.github/workflows/lint-pr.yml

@@ -1,29 +0,0 @@
----
-name: Verify PR title
-
-on:
-  workflow_call:
-
-jobs:
-  lint_pr:
-    timeout-minutes: 10
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: Check PR title
-        run: echo "${{ github.event.pull_request.title }}" | npx commitlint --config ./commitlint.config-ci.js

.github/workflows/lint_pr.yml

@@ -0,0 +1,23 @@
+---
+name: Verify PR title
+
+on:
+  pull_request:
+    types: [opened, ready_for_review, reopened, edited, synchronize]
+jobs:
+  lint_pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.15.1
+      - name: Install root dependencies
+        run: yarn install
+      - name: Check PR title
+        run: echo "${{ github.event.pull_request.title }}" | npx commitlint --config ./commitlint.config-ci.js

.github/workflows/process-tranches.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   master:
     name: Generate Queries
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout

.github/workflows/publish-dist.yml

@@ -1,176 +0,0 @@
-name: (CD) Publish docker + s3
-
-on:
-  workflow_call:
-    inputs:
-      projects:
-        required: true
-        type: string
-
-jobs:
-  publish-dist:
-    strategy:
-      fail-fast: false
-      matrix:
-        app: ${{ fromJSON(inputs.projects) }}
-    name: ${{ matrix.app }}
-    runs-on: ubuntu-22.04
-    timeout-minutes: 25
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v3
-
-      - name: Set up QEMU
-        id: quemu
-        uses: docker/setup-qemu-action@v2
-
-      - name: Available platforms
-        run: echo ${{ steps.qemu.outputs.platforms }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Log in to the Container registry (ghcr)
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Log in to the Container registry (docker hub)
-        uses: docker/login-action@v2
-        if: ${{ startsWith(github.ref, 'refs/tags/v') }}
-        with:
-          # registry: registry.hub.docker.com
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      # https://docs.github.com/en/actions/learn-github-actions/contexts
-      - name: Define variables
-        run: |
-          envName=''
-          if [[ "${{ github.event_name }}" = "push" ]]; then
-            domain="vega.rocks"
-            if [[ "${{ github.ref }}" =~ .*release/.* ]]; then
-              envName="$(echo ${{ github.ref }} | rev | cut -d '/' -f 1 | rev)"
-              if [[ "${{ github.ref }}" =~ .*mainnet.* ]]; then
-                domain="vega.community"
-              fi
-            elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
-              envName="stagnet1"
-            elif [[ "${{ matrix.app}}" = "trading" ]] && [[ ${{ startsWith(github.ref, 'refs/tags/v') && 'true' || 'false' }} = "true" ]]; then
-              envName="mainnet"
-            fi
-            bucketName="${{ matrix.app }}.${envName}.${domain}"
-            echo BUCKET_NAME=${bucketName} >> $GITHUB_ENV
-          fi
-          echo ENV_NAME=${envName} >> $GITHUB_ENV
-
-      - name: Build local dist
-        run: |
-          flags=""
-          if [[ ! -z "${{ env.ENV_NAME }}" ]]; then
-            if [[ "${{ env.ENV_NAME }}" != "ops-vega" ]]; then
-              flags="--env=${{ env.ENV_NAME }}"
-            fi
-          fi
-
-          if [ "${{ matrix.app }}" = "trading" ]; then
-            yarn nx export trading $flags || (yarn install && yarn nx export trading $flags)
-            DIST_LOCATION=dist/apps/trading/exported
-          else
-            yarn nx build ${{ matrix.app }} $flags || (yarn install && yarn nx build ${{ matrix.app }} $flags)
-            DIST_LOCATION=dist/apps/${{ matrix.app }}
-          fi
-          mv $DIST_LOCATION dist-result
-          tree dist-result
-
-      - name: Build and export to local Docker
-        id: docker_build
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          file: docker/node-outside-docker.Dockerfile
-          load: true
-          build-args: |
-            APP=${{ matrix.app }}
-            ENV_NAME=${{ env.ENV_NAME }}
-          tags: |
-            ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local
-
-      - name: Image digest
-        if: ${{ github.event_name == 'pull_request' }}
-        run: echo ${{ steps.docker_build.outputs.digest }}
-
-      - name: Sanity check docker image
-        run: |
-          echo "Check ipfs-hash"
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat /ipfs-hash
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat /ipfs-hash > ${{ matirx.app }}-ipfs-hash
-          echo "List html directory"
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local sh -c 'apk add --update tree; tree /usr/share/nginx/html'
-
-      - name: Publish dist as docker image (ghcr)
-        uses: docker/build-push-action@v3
-        if: ${{ github.event_name == 'pull_request' || (matrix.app == 'trading' && github.event_name == 'push' && !startsWith(github.ref, 'refs/tags/v') ) }}
-        with:
-          context: .
-          file: docker/node-outside-docker.Dockerfile
-          push: true
-          build-args: |
-            APP=${{ matrix.app }}
-            ENV_NAME=${{ env.ENV_NAME }}
-          tags: |
-            ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:${{ github.event.pull_request.head.sha || github.sha }}
-
-      - name: Publish dist as docker image (docker hub)
-        uses: docker/build-push-action@v3
-        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
-        with:
-          context: .
-          file: docker/node-outside-docker.Dockerfile
-          push: true
-          build-args: |
-            APP=${{ matrix.app }}
-            ENV_NAME=${{ env.ENV_NAME }}
-          tags: |
-            vegaprotocol/${{ matrix.app }}:${{ github.ref_name }}
-
-      # bucket creation in github.com/vegaprotocol/terraform//frontend
-      - name: Publish dist to s3
-        uses: jakejarvis/s3-sync-action@master
-        if: ${{ github.event_name == 'push' && !startsWith(github.ref, 'refs/tags/v') }}
-        with:
-          args: --acl private --follow-symlinks --delete
-        env:
-          AWS_S3_BUCKET: ${{ env.BUCKET_NAME }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: 'eu-west-1'
-          SOURCE_DIR: 'dist-result'
-
-      - name: Add preview label
-        uses: actions-ecosystem/action-add-labels@v1
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          labels: ${{ matrix.app }}-preview
-          number: ${{ github.event.number }}
-
-      - name: Add ipfs hash to release
-        uses: softprops/action-gh-release@v1
-        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
-        with:
-          files: ${{ matrix.app }}-ipfs-hash

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

@@ -0,0 +1,126 @@
+name: Publish docker containers
+
+'on':
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-*'
+
+  workflow_dispatch:
+    inputs:
+      publish:
+        description: 'Publish tag to Docker Hub & GitHub Registry'
+        required: false
+        type: boolean
+        default: false
+      tag:
+        description: 'Git Tag to build and publish'
+        required: false
+        type: string
+        default: ''
+      apps:
+        description: 'Applications to build and publish'
+        required: false
+        type: choice
+        options:
+          - '["explorer", "token", "trading"]'
+          - '["explorer"]'
+          - '["token"]'
+          - '["trading"]'
+      archs:
+        description: 'Architecture to build and publish'
+        required: false
+        type: choice
+        options:
+          - linux/amd64, linux/arm64
+          - linux/amd64
+          - linux/arm64
+
+jobs:
+  master:
+    strategy:
+      fail-fast: false
+      matrix:
+        app: ${{ fromJson(inputs.apps || '["explorer", "token", "trading"]') }}
+    name: Build the ${{ matrix.app }} image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ inputs.tag }}
+
+      - name: Set up QEMU
+        id: quemu
+        uses: docker/setup-qemu-action@v2
+
+      - name: Available platforms
+        run: echo ${{ steps.qemu.outputs.platforms }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to DockerHub
+        if: ${{ inputs.publish || startsWith(github.ref, 'refs/tags/') }}
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Determine Docker Image tag
+        id: tags
+        run: |
+          hash=$(git rev-parse HEAD|cut -b1-8)
+          versionTag=${{ inputs.tag || startsWith(github.ref, 'refs/tags/') && github.ref_name || '${hash}' }}
+          echo ::set-output name=version::${versionTag}
+          echo ::set-output name=npmVersion::$(cat dockerfiles/${{ matrix.app =='trading' && 'Dockerfile.next' || 'Dockerfile.cra' }} | grep FROM | head -n 1 | awk '{print $2}' | cut -d ':' -f 2 | cut -d '-' -f 1 )
+
+      - name: Print config
+        run: |
+          git rev-parse --verify HEAD
+          git status
+          echo "inputs.tag=${{ inputs.tag }}"
+          echo "inputs.publish=${{ inputs.publish }}"
+          echo "inputs.apps=${{ inputs.apps }}"
+          echo "inputs.archs=${{ inputs.archs }}"
+          echo "steps.tags.outputs.version=${{ steps.tags.outputs.version }}"
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ steps.tags.outputs.npmVersion }}
+
+      - name: Build frontend dists
+        run: |
+          yarn --verbose --pure-lockfile
+          yarn nx ${{ matrix.app =='trading' && 'export' || 'build' }} ${{ matrix.app }} --pure-lockfile
+
+      - name: Build and export to local Docker
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: false
+          file: dockerfiles/${{ matrix.app =='trading' && 'Dockerfile.next' || 'Dockerfile.cra' }}.dist
+          build-args: APP=${{ matrix.app }}
+          load: true
+          tags: vegaprotocol/${{ matrix.app }}:local
+
+      - name: Sanity check docker image
+        run: |
+          docker run --rm vegaprotocol/${{ matrix.app }}:local cat .env
+          docker run --rm vegaprotocol/${{ matrix.app }}:local ls -lah
+
+      - name: Build and push to DockerHub
+        id: docker_build
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: ${{ inputs.publish || startsWith(github.ref, 'refs/tags/') }}
+          file: dockerfiles/${{ matrix.app =='trading' && 'Dockerfile.next' || 'Dockerfile.cra' }}.dist
+          build-args: APP=${{ matrix.app }}
+          platforms: ${{ inputs.archs || 'linux/amd64, linux/arm64' }}
+          tags: |
+            vegaprotocol/${{ matrix.app }}:latest
+            vegaprotocol/${{ matrix.app }}:${{ steps.tags.outputs.version }}
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}

.github/workflows/publish-npm.yml

@@ -8,7 +8,6 @@ on:
         required: true
         type: choice
         options:
-          - announcements
           - ui-toolkit
           - react-helpers
           - tailwindcss-config
@@ -19,27 +18,29 @@ on:
 jobs:
   publish:
     name: Build & Publish - Tag
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     permissions:
       contents: 'read'
       actions: 'read'
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-
+        with:
-      - name: Setup node
+          fetch-depth: 0
+      - name: User Node.js 16
+        id: Node
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          node-version: 16.15.1
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
+      - name: Restore node_modules from cache
-          cache: yarn
+        uses: actions/cache@v3
-
+        with:
+          path: '**/node_modules'
+          key: node_modules-${{ hashFiles('**/yarn.lock') }}
       - name: Install root dependencies
         run: yarn install --frozen-lockfile
-
       - name: Build project
         run: yarn nx build ${{inputs.project}}
-
       - name: Publish project to @vegaprotocol
         uses: JS-DevTools/npm-publish@v1
         with:

.github/workflows/test.yml

@@ -0,0 +1,46 @@
+name: Unit tests & build
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+jobs:
+  pr:
+    name: Test and lint - PR
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v2
+        with:
+          main-branch-name: ${{ github.base_ref }}
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.15.1
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: node_modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+      - name: Check formatting
+        run: yarn nx format:check
+      - name: Lint affected
+        run: yarn nx affected:lint --max-warnings=0
+      - name: Test affected
+        run: yarn nx affected:test
+      - name: Build affected
+        run: yarn nx affected:build
+      - name: Build affected spec
+        run: yarn nx affected --target=build-spec

.gitignore

@@ -2,7 +2,6 @@
 
 # compiled output
 /dist
-/dist-result
 /tmp
 /out-tsc
 /tools/executors/**/*.js
@@ -47,6 +46,3 @@ cypress.env.json
 
 # Next.js
 .next
-
-#cypress
-/apps/trading-e2e/cypress/reports/

.prettierignore

@@ -7,4 +7,5 @@ __generated___
 
 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json
+apps/static/src/assets/stagnet3-tranches.json
 apps/static/src/assets/testnet-tranches.json

Jenkinsfile

@@ -1,2 +1,20 @@
 @Library('vega-shared-library') _
-runApprobation ignoreFailure: false, frontendBranch: env.BRANCH_NAME, type: 'frontend'
+
+def commitHash = 'UNKNOWN'
+
+pipeline {
+  agent any
+  options {
+    skipDefaultCheckout true
+    parallelsAlwaysFailFast()
+  }
+  stages {
+    stage('approbation') {
+      steps {
+        sh 'printenv'
+        checkout scm
+        runApprobation ignoreFailure: false, frontendBranch: env.BRANCH_NAME, type: 'frontend'
+      }
+    }
+  }
+}

Makefile

@@ -1,20 +0,0 @@
-.PHONY: latest-release
-latest-release:
-  gh release list | head -n 1 | awk '{print $1}'
-
-.PHONY: show-latest-release
-show-latest-release:
-  gh release view `gh release list | head -n 1 | awk '{print $1}'`
-
-.PHONY: recalculate-ipfs
-recalculate-ipfs:
-  echo "ipfs hash inside the image"
-  docker run --rm ${TAG} cat /ipfs-hash
-  echo "recalculating ipfs hash"
-  docker run --rm ${TAG} ipfs add -rw /usr/share/nginx/html
-
-.PHONY: eject-ipfs-hash
-unpack:
-  docker create --name=dist ${TAG}
-  docker cp dist:/usr/share/nginx/html dist
-  docker rm dist

README.md

@@ -72,7 +72,7 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.
 
 ```bash
-export  GRAPHQL_SCHEMA_PATH=https://api.n07.testnet.vega.xyz/graphql
+export  GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
 yarn nx run types:generate
 ```
 
@@ -103,68 +103,25 @@ In CI linting, formatting and also run. These checks can be seen in the [CI work
 
 Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more.
 
-# 🐋 Hosting a console
+# Docker & Vegacapsule
 
-To host a console there are two possible build scenarios for running the frontends: nx performed **outside** or **inside** docker build. For specific build instructions follow [build instructions](#build-instructions).
+## Docker
 
-In order to run a container on port 3000:
+The [Dockerfile](./dockerfiles) for running the frontends is pretty basic, merely building the application with the APP arg that is passed in and serving the application from [nginx](./nginx/nginx.conf). The only complexity that exists is that there is a script which allows the passing of run time environment variables to the containers. See configuration below for how to do this.
+
+You can build any of the containers locally with the following command:
+
+```bash
+docker build --dockerfile dockerfiles/Dockerfile.cra . --build-arg APP=[YOUR APP] --tag=[TAG]
+```
+
+In order to run a container:
 
 ```bash
 docker run -p 3000:80 [TAG]
 ```
 
-## Build instructions
+Images ending with `.dist` are to pack locally created transpiled HTML files into nginx container for non-compatible with yarn architectures like M1 Mac
-
-The [`docker`](./docker) subfolder has some docker configurations for easily setting up your own hosted version of console either for the web, or ready for pinning on IPFS
-
-### nx build outside the docker
-
-Packaging prepared dist into [`nginx`](https://hub.docker.com/_/nginx)([server configuration](./nginx/nginx.conf)) docker image involves building the application on docker host machine from source.
-
-As a prerequisite you need to perform build of `dist` directory and move its content for specific application to `dist-result` directory. Use following script to do it with a single command:
-
-```bash
-./docker/prepare-dist.sh
-```
-
-You can build any of the containers locally with the following command:
-
-```bash
-docker build --dockerfile docker/node-outside-docker.Dockerfile . --tag=[TAG]
-```
-
-### nx build inside the docker
-
-Using multistage dockerfile dist is compiled using [node](https://hub.docker.com/_/node) image and later packed to nginx as in [dist build](#dist-build) example.
-
-```bash
-docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=$(cat .nvmrc) --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
-```
-
-### Computing ipfs-hash of the build
-
-At the moment this feature is important only for `trading` (console) releases.
-
-Each docker build finishes with hash calculation for dist directory. Resulting hash is added to file named as `/ipfs-hash`. Once docker image is produced you can run following commad to display ipfs-hash:
-
-```bash
-make recalculate-ipfs TAG=vegaprotocol/trading:{YOUR_VERSION}
-```
-
-**updating hash:** recompiling dist directory (even if there are no changed to source code) results in different hash computed by ipfs command.
-
-### Verifying ipfs-hash of existing current application version
-
-An IPFS CID will be attached to every [release](https://github.com/vegaprotocol/frontend-monorepo/releases). If you are intending to pin an application on IPFS, you can check that your build matches by running the following steps:
-
-1. Show latest release by runnning: `make latest-release`. You need to configure [`gh`](https://cli.github.com/) for this step to work, otherwise please provide release manually from [github](https://github.com/vegaprotocol/frontend-monorepo/releases) or [dockerhub](https://hub.docker.com/r/vegaprotocol/trading)
-2. Set RELEASE environment variable to value that you want to validate: `export RELEASE=$(make latest-release)` or `export RELEASE=vXX.XX.XX`
-3. Set TAG environment variable to image that you want to validate: `export TAG=vegaprotocol/trading:$RELEASE`
-4. Download docker image with the desired release `docker pull $TAG`.
-5. Recalculate hash: `make recalculate-ipfs`
-6. You should see exactly same hash produced by ipfs command as one placed with the release notes: `make show-latest-release`
-7. If you want to extract dist from docker image to your local filesystem you can run following command: `make unpack`
-8. Now `dist` directory contains valid application build. **it is not possible to calculate same ipfs hash on files that are result of copy operation**
 
 ## Config
 

apps/explorer-e2e/.env

@@ -1,7 +1,7 @@
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
-NX_VEGA_URL=http://localhost:3008/graphql
+NX_VEGA_URL=http://localhost:3028/query
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_CONFIG_URL=
 
@@ -18,4 +18,4 @@ NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1
 
 CYPRESS_VEGA_WALLET_API_TOKEN=
-CYPRESS_VEGA_URL=http://localhost:3008/graphql
+CYPRESS_VEGA_URL=http://localhost:3028/query

apps/explorer-e2e/.env.mainnet

@@ -2,7 +2,7 @@
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=https://mainnet-observer-proxy01.ops.vega.xyz/
 NX_TENDERMINT_WEBSOCKET_URL=wss://mainnet-observer-proxy01.ops.vega.xyz/websocket
-NX_VEGA_URL=https://api.vega.community/graphql
+NX_VEGA_URL=https://api.vega.xyz/query
 NX_VEGA_ENV=MAINNET
 NX_BLOCK_EXPLORER=https://be.explorer.vega.xyz/rest
 

apps/explorer-e2e/.env.stagnet3

@@ -0,0 +1,18 @@
+# App configuration variables
+NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
+NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket
+NX_VEGA_URL=https://api.stagnet3.vega.xyz/graphql
+NX_VEGA_ENV=STAGNET3
+NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
+
+# 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=0
+NX_EXPLORER_NETWORK_PARAMETERS=1
+NX_EXPLORER_PARTIES=1
+NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.testnet

@@ -2,7 +2,7 @@
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=https://tm.n07.testnet.vega.xyz/tm
 NX_TENDERMINT_WEBSOCKET_URL=wss://lb.testnet.vega.xyz/tm/websocket
-NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
 NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest
 

apps/explorer-e2e/cypress.config.js

@@ -21,11 +21,10 @@ module.exports = defineConfig({
     chromeWebSecurity: false,
     viewportWidth: 1440,
     viewportHeight: 900,
-    testIsolation: false,
   },
   env: {
     environment: 'CUSTOM',
-    networkQueryUrl: 'http://localhost:3008/graphql',
+    networkQueryUrl: 'http://localhost:3028/query',
     ethUrl: 'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
     commitHash: 'dev',
     tsConfig: 'tsconfig.json',

apps/explorer-e2e/src/fixtures/net_parameter_format_lookup.json

@@ -10,8 +10,6 @@
     "governance.proposal.updateMarket.minVoterBalance",
     "governance.proposal.updateNetParam.minProposerBalance",
     "governance.proposal.updateNetParam.minVoterBalance",
-    "governance.proposal.updateAsset.minProposerBalance",
-    "governance.proposal.updateAsset.minVoterBalance",
     "reward.staking.delegation.maxPayoutPerEpoch",
     "reward.staking.delegation.maxPayoutPerParticipant",
     "reward.staking.delegation.minimumValidatorStake",
@@ -21,6 +19,9 @@
     "validators.delegation.minAmount"
   ],
   "fiveDecimal": [
+    "governance.proposal.updateAsset.minProposerBalance",
+    "governance.proposal.updateAsset.minVoterBalance",
+    "governance.proposal.updateAsset.requiredParticipation",
     "market.fee.factors.infrastructureFee",
     "market.fee.factors.makerFee",
     "market.liquidity.bondPenaltyParameter",
@@ -76,7 +77,6 @@
     "governance.proposal.updateNetParam.requiredMajority",
     "governance.proposal.updateNetParam.requiredParticipation",
     "governance.proposal.updateMarket.minProposerEquityLikeShare",
-    "governance.proposal.updateAsset.requiredParticipation",
     "validators.vote.required"
   ],
   "duration": [

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

@@ -6,39 +6,75 @@ context('Home Page', function () {
   describe('Stats page', { tags: '@smoke' }, 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: 'Epoch',
+        1: 'Height',
-        2: 'Block height',
+        2: 'Uptime',
-        3: 'Uptime',
+        3: 'Total nodes',
-        4: 'Total nodes',
+        4: 'Total staked',
-        5: 'Total staked',
+        5: 'Backlog',
-        6: 'Backlog',
+        6: 'Trades / second',
-        7: 'Trades / second',
+        7: 'Orders / block',
-        8: 'Orders / block',
+        8: 'Orders / second',
-        9: 'Orders / second',
+        9: 'Transactions / block',
-        10: 'Transactions / block',
+        10: 'Block time',
-        11: 'Block time',
+        11: 'Time',
-        12: 'Time',
+        12: 'App',
-        13: 'App',
+        13: 'Tendermint',
-        14: 'Tendermint',
+        14: 'Up since',
-        15: 'Up since',
+        15: 'Chain ID',
-        16: 'Chain ID',
       };
 
       cy.get('[data-testid="stats-title"]')
         .each(($list, index) => {
-          cy.wrap($list).should('contain.text', statTitles[index]);
+          cy.wrap($list).should('have.text', statTitles[index]);
         })
         .then(($list) => {
-          cy.wrap($list).should('have.length', 17);
+          cy.wrap($list).should('have.length', 16);
         });
+
+      cy.get(statsValue).eq(0).should('have.text', 'CONNECTED');
+      cy.get(statsValue).eq(1).should('not.be.empty');
+      cy.get(statsValue)
+        .eq(2)
+        .invoke('text')
+        .should('match', /\d+d \d+h \d+m \d+s/i);
+      cy.get(statsValue).eq(3).should('have.text', '2');
+      cy.get(statsValue)
+        .eq(4)
+        .invoke('text')
+        .should('match', /\d+\.\d\d(?!\d)/i);
+      cy.get(statsValue).eq(5).should('have.text', '0');
+      cy.get(statsValue).eq(6).should('have.text', '0');
+      cy.get(statsValue).eq(7).should('have.text', '0');
+      cy.get(statsValue).eq(8).should('have.text', '0');
+      cy.get(statsValue).eq(9).should('not.be.empty');
+      cy.get(statsValue).eq(10).should('not.be.empty');
+      cy.get(statsValue).eq(11).should('not.be.empty');
+      cy.get(statsValue)
+        .eq(12)
+        .invoke('text')
+        .should('match', /v\d+\.\d+\.\d+/i);
+      cy.get(statsValue)
+        .eq(13)
+        .invoke('text')
+        .should('match', /\d+\.\d+\.\d+/i);
+      cy.get(statsValue).eq(14).should('not.be.empty');
+      cy.get(statsValue).eq(15).should('not.be.empty');
     });
 
     it('Block height should be updating', function () {
       cy.get(statsValue)
-        .eq(2)
+        .eq(1)
         .invoke('text')
         .then((blockHeightTxt) => {
           cy.get(statsValue)
@@ -50,4 +86,75 @@ context('Home Page', function () {
         });
     });
   });
+
+  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/network.cy.js

@@ -138,7 +138,7 @@ context('Network parameters page', { tags: '@smoke' }, function () {
       });
     });
 
-    it.skip('should list each network parameter displayed as a currency value with four decimals - in the correct format', function () {
+    it('should list each network parameter displayed as a currency value with four decimals - in the correct format', function () {
       cy.get_network_parameters().then((network_parameters) => {
         network_parameters = Object.entries(network_parameters);
         network_parameters.forEach((network_parameter) => {

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

@@ -6,7 +6,7 @@ const customNodeBtn = 'custom-node';
 context.skip('Node switcher', { tags: '@regression' }, function () {
   beforeEach('visit home page', function () {
     cy.intercept('GET', 'https://static.vega.xyz/assets/capsule-network.json', {
-      hosts: ['http://localhost:3008/graphql'],
+      hosts: ['http://localhost:3028/query'],
     }).as('nodeData');
     cy.visit('/');
     cy.wait('@nodeData');

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

@@ -219,7 +219,7 @@ context.skip('Parties page', { tags: '@regression' }, function () {
           balance type asset {id symbol decimals}}}}}}}}';
       cy.request({
         method: 'POST',
-        url: `http://localhost:3008/graphql`,
+        url: `http://localhost:3028/query`,
         body: {
           query: mutation,
         },

apps/explorer/.env

@@ -1,19 +1,13 @@
-NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet3/vegawallet-stagnet3.toml
+NX_VEGA_NETWORKS='{"SANDBOX":"https://sandbox.explorer.vega.xyz","STAGNET1":"https://stagnet1.token.vega.xyz", "STAGNET3":"https://stagnet3.explorer.vega.xyz","VALIDATOR_TESTNET":"https://validator-testnet.fairground.wtf","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
+NX_VEGA_ENV=STAGNET3
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
-NX_VEGA_ENV=STAGNET1
-NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
-NX_VEGA_TOKEN_URL=https://stagnet1.governance.vega.xyz
-NX_VEGA_WALLET_URL=http://localhost:1789
-NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
-NX_BLOCK_EXPLORER=https://be.stagnet1.vega.xyz/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
+NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
-NX_VEGA_GOVERNANCE_URL=https://stagnet1.governance.vega.xyz
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.jsoo
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
 
 # App flags
 NX_EXPLORER_ASSETS=1

apps/explorer/.env.capsule

@@ -3,8 +3,14 @@ NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 NX_VEGA_ENV=CUSTOM
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
-NX_VEGA_EXPLORER_URL=/
 
 # 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=0
+NX_EXPLORER_NETWORK_PARAMETERS=1
+NX_EXPLORER_PARTIES=1
+NX_EXPLORER_VALIDATORS=1

apps/explorer/.env.devnet

@@ -5,8 +5,6 @@ NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-inter
 NX_VEGA_ENV=DEVNET
 NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://dev.governance.vega.xyz
+NX_VEGA_GOVERNANCE_URL=https://dev.token.vega.xyz
 NX_VEGA_URL=https://api.devnet1.vega.xyz/graphql
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_VEGA_EXPLORER_URL=/

apps/explorer/.env.mainnet

@@ -1,10 +1,8 @@
 # App configuration variables
-NX_TENDERMINT_URL=https://be.vega.community
+NX_TENDERMINT_URL=https://be.explorer.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_ENV=MAINNET
-NX_BLOCK_EXPLORER=https://be.vega.community/rest/
+NX_BLOCK_EXPLORER=https://be.explorer.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://governance.vega.xyz
+NX_VEGA_GOVERNANCE_URL=https://token.vega.xyz
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
-NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz/

apps/explorer/.env.mirror

@@ -0,0 +1,19 @@
+# App configuration variables
+NX_TENDERMINT_URL=https://tm.be.mainnet-mirror.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.xyz/websocket
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
+NX_VEGA_ENV=MIRROR
+NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.xyz/rest/
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_GOVERNANCE_URL=https://mainnet-mirror.token.vega.xyz
+
+# App flags
+NX_EXPLORER_ASSETS=1
+NX_EXPLORER_GENESIS=1
+NX_EXPLORER_GOVERNANCE=1
+NX_EXPLORER_NETWORK_PARAMETERS=1
+NX_EXPLORER_PARTIES=1
+NX_EXPLORER_VALIDATORS=1
+NX_EXPLORER_MARKETS=0
+NX_EXPLORER_ORACLES=0
+NX_EXPLORER_TXS_LIST=1

apps/explorer/.env.sandbox

@@ -0,0 +1,11 @@
+# App configuration variables
+NX_VEGA_ENV=SANDBOX
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/sandbox/vegawallet-sandbox.toml
+NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_TENDERMINT_URL=https://tm.sandbox.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.sandbox.vega.xyz/websocket
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_GOVERNANCE_URL=https://sandbox.token.vega.xyz

apps/explorer/.env.stagnet1

@@ -1,2 +1,13 @@
-# .env is stagnet1, so there are no overrides required
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz","STAGNET3":"https://stagnet3.explorer.vega.xyz"}'
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
+NX_VEGA_ENV=STAGNET1
+NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
+NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
+NX_VEGA_WALLET_URL=http://localhost:1789
+NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
+NX_BLOCK_EXPLORER=https://be.stagnet1.vega.xyz/rest
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_GOVERNANCE_URL=https://stagnet1.token.vega.xyz

apps/explorer/.env.stagnet3

@@ -0,0 +1,7 @@
+NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.stagnet3.vega.xyz/websocket
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet3/vegawallet-stagnet3.toml
+NX_VEGA_ENV=STAGNET3
+NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
+NX_VEGA_GOVERNANCE_URL=https://stagnet3.token.vega.xyz
+NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases/

apps/explorer/.env.testnet

@@ -7,6 +7,4 @@ NX_VEGA_ENV=TESTNET
 NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://governance.fairground.wtf
+NX_VEGA_GOVERNANCE_URL=https://token.fairground.wtf
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/explorer/.env.validator-testnet

@@ -2,13 +2,11 @@
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
-NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
+NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 
 NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
-NX_TENDERMINT_URL=https://tm-be.validators-testnet.vega.rocks
+NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.xyz
-NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.rocks/rest
+NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.xyz/rest
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
-NX_VEGA_EXPLORER_URL=https://validator-testnet.explorer.vega.xyz/

apps/explorer/.env.vegacapsule

@@ -4,5 +4,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_ENV=CUSTOM
 NX_BLOCK_EXPLORER=
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
-NX_VEGA_EXPLORER_URL=/

apps/explorer/README.md

@@ -35,11 +35,12 @@ Example configurations are provided here:
 - [Devnet](./.env.devnet)
 - [Capsule](./.env.capsule)
 - [Testnet](./.env.testnet)
+- [Stagnet3](./.env.stagnet3)
 
 For convenience, you can boot the app injecting one of the configurations above by running:
 
 ```bash
-yarn nx run explorer:serve --env={env} # e.g. stagnet1
+yarn nx run explorer:serve --env={env} # e.g. stagnet3
 ```
 
 There are a few different configuration options offered for this app:

apps/explorer/src/app/app.tsx

@@ -1,43 +1,87 @@
-import {
+import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
-  AppFailure,
+import { Header } from './components/header';
-  NetworkLoader,
+import { Main } from './components/main';
-  NodeGuard,
-  NodeSwitcherDialog,
-  useEnvironment,
-  useInitializeEnv,
-  useNodeSwitcherStore,
-} from '@vegaprotocol/environment';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
-import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
+import { Footer } from './components/footer/footer';
+import {
+  AnnouncementBanner,
+  ExternalLink,
+  Icon,
+} from '@vegaprotocol/ui-toolkit';
+import {
+  AssetDetailsDialog,
+  useAssetDetailsDialogStore,
+} from '@vegaprotocol/assets';
 import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
-import { RouterProvider } from 'react-router-dom';
+import classNames from 'classnames';
-import { router } from './routes/router-config';
+import { useState } from 'react';
-import { t } from '@vegaprotocol/i18n';
 
-const splashLoading = (
+const DialogsContainer = () => {
-  <Splash>
+  const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
-    <Loader />
+  return (
-  </Splash>
+    <AssetDetailsDialog
-);
+      assetId={id}
+      trigger={trigger || null}
+      asJson={asJson}
+      open={isOpen}
+      onChange={setOpen}
+    />
+  );
+};
+
+const MainnetSimAd = () => {
+  const [shouldDisplayBanner, setShouldDisplayBanner] = useState<boolean>(true);
+
+  // Return an empty div so that the grid layout in _app.page.ts
+  // renders correctly
+  if (!shouldDisplayBanner) {
+    return <div />;
+  }
+
+  return (
+    <AnnouncementBanner>
+      <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
+        <button
+          className="flex items-center"
+          onClick={() => setShouldDisplayBanner(false)}
+        >
+          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
+        </button>
+        <div>
+          <span className="pr-4">Mainnet sim 3 is live!</span>
+          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
+        </div>
+      </div>
+    </AnnouncementBanner>
+  );
+};
 
 function App() {
-  const { VEGA_URL } = useEnvironment();
-  const [nodeSwitcherOpen, setNodeSwitcherOpen] = useNodeSwitcherStore(
-    (store) => [store.dialogOpen, store.setDialogOpen]
-  );
   return (
     <TendermintWebsocketProvider>
       <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
-        <NodeGuard
+        <div
-          skeleton={<div>{t('Loading')}</div>}
+          className={classNames(
-          failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+            'max-w-[1500px] min-h-[100vh]',
+            'mx-auto my-0',
+            'grid grid-rows-[auto_1fr_auto] grid-cols-1',
+            'border-vega-light-200 dark:border-vega-dark-200 lg:border-l lg:border-r',
+            'antialiased text-black dark:text-white',
+            'overflow-hidden relative'
+          )}
         >
-          <RouterProvider router={router} fallbackElement={splashLoading} />
+          <div>
-        </NodeGuard>
+            <Header />
-        <NodeSwitcherDialog
+            <MainnetSimAd />
-          open={nodeSwitcherOpen}
+          </div>
-          setOpen={setNodeSwitcherOpen}
+          <div>
-        />
+            <Main />
+          </div>
+          <div>
+            <Footer />
+          </div>
+        </div>
+        <DialogsContainer />
       </NetworkLoader>
     </TendermintWebsocketProvider>
   );

apps/explorer/src/app/components/asset-balance/asset-balance.tsx

@@ -6,7 +6,6 @@ export type AssetBalanceProps = {
   assetId: string;
   price: string;
   showAssetLink?: boolean;
-  showAssetSymbol?: boolean;
 };
 
 /**
@@ -17,21 +16,18 @@ const AssetBalance = ({
   assetId,
   price,
   showAssetLink = true,
-  showAssetSymbol = false,
 }: AssetBalanceProps) => {
-  const { data: asset, loading } = useAssetDataProvider(assetId);
+  const { data: asset } = useAssetDataProvider(assetId);
 
   const label =
-    !loading && asset && asset.decimals
+    asset && asset.decimals
       ? addDecimalsFormatNumber(price, asset.decimals)
       : price;
 
   return (
     <div className="inline-block">
       <span>{label}</span>{' '}
-      {showAssetLink && asset?.id ? (
+      {showAssetLink && asset?.id ? <AssetLink assetId={assetId} /> : null}
-        <AssetLink showAssetSymbol={showAssetSymbol} assetId={assetId} />
-      ) : null}
     </div>
   );
 };

apps/explorer/src/app/components/asset-balance/governance-asset-balance.tsx

@@ -13,17 +13,11 @@ const DEFAULT_DECIMALS = 18;
  * the governance asset first, which is set by a network parameter
  */
 const GovernanceAssetBalance = ({ price }: GovernanceAssetBalanceProps) => {
-  const { data, loading } = useExplorerGovernanceAssetQuery();
+  const { data } = useExplorerGovernanceAssetQuery();
 
-  if (!loading && data && data.networkParameter?.value) {
+  if (data && data.networkParameter?.value) {
     const governanceAssetId = data.networkParameter.value;
-    return (
+    return <AssetBalance price={price} assetId={governanceAssetId} />;
-      <AssetBalance
-        price={price}
-        showAssetSymbol={true}
-        assetId={governanceAssetId}
-      />
-    );
   } else {
     return (
       <div className="inline-block">

apps/explorer/src/app/components/assets/assets-table.tsx

@@ -4,7 +4,7 @@ import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
-import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import type { VegaICellRendererParams } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';

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

@@ -1,60 +1,60 @@
-import {
+import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
-  useEnvironment,
-  useNodeSwitcherStore,
-} from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { ENV } from '../../config/env';
 
 export const Footer = () => {
   const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL } = useEnvironment();
-  const setNodeSwitcherOpen = useNodeSwitcherStore(
+  const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
-    (store) => store.setDialogOpen
-  );
-
   const { screenSize } = useScreenDimensions();
   const showFullFeedbackLabel = useMemo(
-    () => ['md', 'lg', 'xl', 'xxl', 'xxxl'].includes(screenSize),
+    () => ['lg', 'xl'].includes(screenSize),
     [screenSize]
   );
 
   return (
-    <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
+    <>
-      <div className="flex justify-between gap-2 align-middle">
+      <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
-        {GIT_COMMIT_HASH && (
+        <div className="flex justify-between gap-2 align-middle">
-          <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
+          {GIT_COMMIT_HASH && (
-            <p data-testid="git-commit-hash">
+            <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
-              {t('Version')}:{' '}
+              <p data-testid="git-commit-hash">
-              <Link
+                {t('Version')}:{' '}
-                href={
+                <Link
-                  GIT_ORIGIN_URL
+                  href={
-                    ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
+                    GIT_ORIGIN_URL
-                    : undefined
+                      ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
-                }
+                      : undefined
-                target={GIT_ORIGIN_URL ? '_blank' : undefined}
+                  }
-              >
+                  target={GIT_ORIGIN_URL ? '_blank' : undefined}
-                {GIT_COMMIT_HASH}
+                >
-              </Link>
+                  {GIT_COMMIT_HASH}
-            </p>
+                </Link>
+              </p>
+            </div>
+          )}
+
+          <div className="content-center flex pl-2 md:border-r border-neutral-700 dark:border-neutral-300 pr-4">
+            {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+            <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
+              {t('Change')}
+            </Link>
           </div>
-        )}
 
-        <div className="content-center flex pl-2 md:border-r border-neutral-700 dark:border-neutral-300 pr-4">
+          <div className="flex pl-2 content-center">
-          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+            <ExternalLink href={ENV.addresses.feedback}>
-          <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
+              {showFullFeedbackLabel ? t('Share your feedback') : t('Feedback')}
-            {t('Change')}
+            </ExternalLink>
-          </Link>
+          </div>
         </div>
-
+      </footer>
-        <div className="flex pl-2 content-center">
+      <NodeSwitcherDialog
-          <ExternalLink href={ENV.addresses.feedback}>
+        open={nodeSwitcherOpen}
-            {showFullFeedbackLabel ? t('Share your feedback') : t('Feedback')}
+        setOpen={setNodeSwitcherOpen}
-          </ExternalLink>
+      />
-        </div>
+    </>
-      </div>
-    </footer>
   );
 };
 

apps/explorer/src/app/components/header/header.spec.tsx

@@ -13,7 +13,7 @@ jest.mock('../search', () => ({
 }));
 
 const renderComponent = () => (
-  <MemoryRouter initialEntries={['/txs']}>
+  <MemoryRouter>
     <Header />
   </MemoryRouter>
 );
@@ -24,7 +24,6 @@ describe('Header', () => {
 
     expect(screen.getByTestId('navigation')).toHaveTextContent('Explorer');
   });
-
   it('should render search', () => {
     render(renderComponent());
 

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

@@ -1,4 +1,4 @@
-import { matchPath, useLocation, useMatch } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router-dom';
 import {
   ThemeSwitcher,
   Navigation,
@@ -13,26 +13,23 @@ import { t } from '@vegaprotocol/i18n';
 import { Routes } from '../../routes/route-names';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
 import type { Navigable } from '../../routes/router-config';
-import { isNavigable } from '../../routes/router-config';
+import routerConfig from '../../routes/router-config';
-import { routerConfig } from '../../routes/router-config';
 import { useMemo } from 'react';
 import compact from 'lodash/compact';
 import { Search } from '../search';
 
 const routeToNavigationItem = (r: Navigable) => (
-  <NavigationItem key={r.handle.name}>
+  <NavigationItem key={r.name}>
-    <NavigationLink to={r.path}>{r.handle.text}</NavigationLink>
+    <NavigationLink to={r.path}>{r.text}</NavigationLink>
   </NavigationItem>
 );
 
 export const Header = () => {
-  const isHome = Boolean(useMatch(Routes.HOME));
-  const pages = routerConfig[0].children || [];
   const mainItems = compact(
     [Routes.TX, Routes.BLOCKS, Routes.ORACLES, Routes.VALIDATORS].map((n) =>
-      pages.find((r) => r.path === n)
+      routerConfig.find((r) => r.path === n)
     )
-  ).filter(isNavigable);
+  );
 
   const groupedItems = compact(
     [
@@ -42,8 +39,8 @@ export const Header = () => {
       Routes.GOVERNANCE,
       Routes.NETWORK_PARAMETERS,
       Routes.GENESIS,
-    ].map((n) => pages.find((r) => r.path === n))
+    ].map((n) => routerConfig.find((r) => r.path === n))
-  ).filter(isNavigable);
+  );
 
   const { pathname } = useLocation();
 
@@ -70,7 +67,7 @@ export const Header = () => {
       actions={
         <>
           <ThemeSwitcher />
-          {!isHome && <Search />}
+          <Search />
         </>
       }
       onResize={(width, el) => {
@@ -93,7 +90,7 @@ export const Header = () => {
         hide={[NavigationBreakpoint.Small, NavigationBreakpoint.Narrow]}
       >
         {mainItems.map(routeToNavigationItem)}
-        {groupedItems && groupedItems.length > 0 && (
+        {groupedItems && (
           <NavigationItem>
             <NavigationTrigger isActive={Boolean(isOnOther)}>
               {t('Other')}

apps/explorer/src/app/components/links/asset-link/asset-link.tsx

@@ -43,7 +43,7 @@ export const AssetLink = ({
         if (asDialog) {
           open(assetId, e.target as HTMLElement);
         } else {
-          navigate(`/${Routes.ASSETS}/${asset?.id}`);
+          navigate(`${Routes.ASSETS}/${asset?.id}`);
         }
       }}
       {...props}

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

@@ -0,0 +1,9 @@
+import { AppRouter } from '../../routes';
+
+export const Main = () => {
+  return (
+    <main className="p-4">
+      <AppRouter />
+    </main>
+  );
+};

apps/explorer/src/app/components/markets/market-details.tsx

@@ -1,113 +1,143 @@
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+  getMarketExpiryDateFormatted,
+} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { MarketInfoWithData } from '@vegaprotocol/market-info';
-import { LiquidityInfoPanel } from '@vegaprotocol/market-info';
-import { LiquidityMonitoringParametersInfoPanel } from '@vegaprotocol/market-info';
-import {
-  InstrumentInfoPanel,
-  KeyDetailsInfoPanel,
-  LiquidityPriceRangeInfoPanel,
-  MetadataInfoPanel,
-  OracleInfoPanel,
-  RiskFactorsInfoPanel,
-  RiskModelInfoPanel,
-  RiskParametersInfoPanel,
-  SettlementAssetInfoPanel,
-} from '@vegaprotocol/market-info';
 import { MarketInfoTable } from '@vegaprotocol/market-info';
-import type { DataSourceDefinition } from '@vegaprotocol/types';
+import {
-import isEqual from 'lodash/isEqual';
+  MarketStateMapping,
+  MarketTradingModeMapping,
+} from '@vegaprotocol/types';
+import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import BigNumber from 'bignumber.js';
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
 
 export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
+  const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
+  const assetId = useMemo(
+    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
+    [market]
+  );
+  const { data: asset } = useAssetDataProvider(assetId ?? '');
+
   if (!market) return null;
 
-  const settlementData =
+  const keyDetails = {
-    market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData
+    decimalPlaces: market.decimalPlaces,
-      .data;
+    positionDecimalPlaces: market.positionDecimalPlaces,
-  const terminationData =
+    tradingMode: market.tradingMode,
-    market.tradableInstrument.instrument.product
+    state: MarketStateMapping[market.state],
-      .dataSourceSpecForTradingTermination.data;
-
-  const getSigners = (data: DataSourceDefinition) => {
-    if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
-      const signers = data.sourceType.sourceType.signers || [];
-
-      return signers.map(({ signer }, i) => {
-        return (
-          (signer.__typename === 'ETHAddress' && signer.address) ||
-          (signer.__typename === 'PubKey' && signer.key)
-        );
-      });
-    }
-    return [];
   };
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;
 
-  const oraclePanels = isEqual(
+  const liquidityPriceRange = formatNumberPercentage(
-    getSigners(settlementData),
+    new BigNumber(market.lpPriceRange).times(100)
-    getSigners(terminationData)
+  );
-  )
-    ? [
-        {
-          title: t('Settlement Oracle'),
-          content: (
-            <OracleInfoPanel
-              noBorder={false}
-              market={market}
-              type="settlementData"
-            />
-          ),
-        },
-        {
-          title: t('Termination Oracle'),
-          content: (
-            <OracleInfoPanel
-              noBorder={false}
-              market={market}
-              type="termination"
-            />
-          ),
-        },
-      ]
-    : [
-        {
-          title: t('Oracle'),
-          content: (
-            <OracleInfoPanel
-              noBorder={false}
-              market={market}
-              type="settlementData"
-            />
-          ),
-        },
-      ];
 
   const panels = [
     {
       title: t('Key details'),
-      content: <KeyDetailsInfoPanel noBorder={false} market={market} />,
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            name: market.tradableInstrument.instrument.name,
+            marketID: market.id,
+            tradingMode:
+              keyDetails.tradingMode &&
+              MarketTradingModeMapping[keyDetails.tradingMode],
+            marketDecimalPlaces: market.decimalPlaces,
+            positionDecimalPlaces: market.positionDecimalPlaces,
+            settlementAssetDecimalPlaces: assetDecimals,
+          }}
+        />
+      ),
     },
     {
       title: t('Instrument'),
-      content: <InstrumentInfoPanel noBorder={false} market={market} />,
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            marketName: market.tradableInstrument.instrument.name,
+            code: market.tradableInstrument.instrument.code,
+            productType:
+              market.tradableInstrument.instrument.product.__typename,
+            ...market.tradableInstrument.instrument.product,
+          }}
+        />
+      ),
     },
     {
       title: t('Settlement asset'),
-      content: <SettlementAssetInfoPanel market={market} noBorder={false} />,
+      content: asset ? (
+        <AssetDetailsTable
+          asset={asset}
+          inline={true}
+          noBorder={false}
+          dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
+          ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
+        />
+      ) : (
+        <Splash>{t('No data')}</Splash>
+      ),
     },
     {
       title: t('Metadata'),
-      content: <MetadataInfoPanel noBorder={false} market={market} />,
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            expiryDate: getMarketExpiryDateFormatted(
+              market.tradableInstrument.instrument.metadata.tags
+            ),
+            ...market.tradableInstrument.instrument.metadata.tags
+              ?.map((tag) => {
+                const [key, value] = tag.split(':');
+                return { [key]: value };
+              })
+              .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
+          }}
+        />
+      ),
     },
     {
       title: t('Risk model'),
-      content: <RiskModelInfoPanel noBorder={false} market={market} />,
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={market.tradableInstrument.riskModel}
+          unformatted={true}
+          omits={[]}
+        />
+      ),
     },
     {
       title: t('Risk parameters'),
-      content: <RiskParametersInfoPanel noBorder={false} market={market} />,
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={market.tradableInstrument.riskModel.params}
+          unformatted={true}
+          omits={[]}
+        />
+      ),
     },
     {
       title: t('Risk factors'),
-      content: <RiskFactorsInfoPanel noBorder={false} market={market} />,
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={market.riskFactors}
+          unformatted={true}
+          omits={['market', '__typename']}
+        />
+      ),
     },
     ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
       (trigger, i) => ({
@@ -121,19 +151,14 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
         <>
           <MarketInfoTable
             noBorder={false}
-            data={{
+            data={trigger}
-              maxValidPrice: trigger.maxValidPrice,
-              minValidPrice: trigger.minValidPrice,
-            }}
             decimalPlaces={market.decimalPlaces}
+            omits={['referencePrice', '__typename']}
           />
           <MarketInfoTable
             noBorder={false}
             data={{ referencePrice: trigger.referencePrice }}
-            decimalPlaces={
+            decimalPlaces={assetDecimals}
-              market.tradableInstrument.instrument.product.settlementAsset
-                .decimals
-            }
           />
         </>
       ),
@@ -141,29 +166,85 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
     {
       title: t('Liquidity monitoring parameters'),
       content: (
-        <LiquidityMonitoringParametersInfoPanel
+        <MarketInfoTable
           noBorder={false}
-          market={market}
+          data={{
+            triggeringRatio:
+              market.liquidityMonitoringParameters.triggeringRatio,
+            ...market.liquidityMonitoringParameters.targetStakeParameters,
+          }}
         />
       ),
     },
-    {
-      title: t('Liquidity'),
-      content: <LiquidityInfoPanel market={market} noBorder={false} />,
-    },
     {
       title: t('Liquidity price range'),
       content: (
-        <LiquidityPriceRangeInfoPanel market={market} noBorder={false} />
+        <>
+          <p className="text-xs mb-4">
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
+          </p>
+          <p className="text-xs mb-4">
+            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
+        price.`}
+          </p>
+          <MarketInfoTable
+            noBorder={false}
+            data={{
+              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+              lowestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .minus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+              highestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .plus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+            }}
+          ></MarketInfoTable>
+        </>
+      ),
+    },
+    {
+      title: t('Oracle'),
+      content: (
+        <MarketInfoTable
+          noBorder={false}
+          data={
+            market.tradableInstrument.instrument.product.dataSourceSpecBinding
+          }
+        >
+          <Link
+            className="text-xs hover:underline"
+            to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData.id}`}
+          >
+            {t('View settlement data oracle specification')}
+          </Link>
+          <Link
+            className="text-xs hover:underline"
+            to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForTradingTermination.id}`}
+          >
+            {t('View termination oracle specification')}
+          </Link>
+        </MarketInfoTable>
       ),
     },
-    ...oraclePanels,
   ];
 
   return (
     <>
       {panels.map((p) => (
-        <div key={p.title} className="mb-3">
+        <div className="mb-3">
           <h2 className="font-alpha calt text-xl">{p.title}</h2>
           {p.content}
         </div>

apps/explorer/src/app/components/markets/markets-table.tsx

@@ -3,7 +3,7 @@ import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
-import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
   VegaValueGetterParams,

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -9,7 +9,7 @@ import SizeInMarket from '../size-in-market/size-in-market';
 export interface DeterministicOrderDetailsProps {
   id: string;
   // Version to fetch, with 0 being 'latest' and 1 being 'first'. Defaults to 0
-  version?: number | null;
+  version?: number;
 }
 
 export const wrapperClasses =
@@ -28,7 +28,7 @@ export const wrapperClasses =
  */
 const DeterministicOrderDetails = ({
   id,
-  version = null,
+  version = 0,
 }: DeterministicOrderDetailsProps) => {
   const { data, error } = useExplorerDeterministicOrderQuery({
     variables: { orderId: id, version },

apps/explorer/src/app/components/page-header/page-header.tsx

@@ -20,7 +20,7 @@ export const PageHeader = ({
   copy = false,
   className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-xl uppercase font-alpha calt';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
   return (
     <header className={className}>
       <span className={`${titleClasses} block`}>{prefix}</span>

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -3,7 +3,7 @@ import { VoteProgress } from '@vegaprotocol/proposals';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
@@ -12,10 +12,7 @@ import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { RowClickedEvent } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import {
+import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
 import { ProposalStateMapping } from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';

apps/explorer/src/app/components/render-fetched/index.tsx

@@ -1,5 +1,4 @@
 import { t } from '@vegaprotocol/i18n';
-import { Button } from '@vegaprotocol/ui-toolkit';
 import { StatusMessage } from '../status-message';
 
 interface RenderFetchedProps {
@@ -8,7 +7,6 @@ interface RenderFetchedProps {
   loading: boolean | undefined;
   className?: string;
   errorMessage?: string;
-  refetch?: () => void;
 }
 
 export const RenderFetched = ({
@@ -17,7 +15,6 @@ export const RenderFetched = ({
   children,
   className,
   errorMessage = t('Error retrieving data'),
-  refetch,
 }: RenderFetchedProps) => {
   if (loading) {
     return (
@@ -26,20 +23,7 @@ export const RenderFetched = ({
   }
 
   if (error) {
-    return (
+    return <StatusMessage className={className}>{errorMessage}</StatusMessage>;
-      <>
-        <StatusMessage className={className}>{errorMessage}</StatusMessage>
-        {refetch && (
-          <Button
-            onClick={() => {
-              refetch();
-            }}
-          >
-            {t('Try again')}
-          </Button>
-        )}
-      </>
-    );
   }
 
   return children;

apps/explorer/src/app/components/router-error-boundary/index.tsx

@@ -0,0 +1,32 @@
+import { t } from '@vegaprotocol/i18n';
+import React from 'react';
+
+interface RouteErrorBoundaryProps {
+  children: React.ReactElement;
+}
+
+export class RouteErrorBoundary extends React.Component<
+  RouteErrorBoundaryProps,
+  { hasError: boolean }
+> {
+  constructor(props: RouteErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  override componentDidCatch(error: Error) {
+    console.log(`Error caught in App error boundary ${error.message}`, error);
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return <h1>{t('Something went wrong')}</h1>;
+    }
+
+    return this.props.children;
+  }
+}

apps/explorer/src/app/components/search/detect-search.spec.ts

@@ -1,70 +1,189 @@
 import {
-  determineType,
+  detectTypeByFetching,
+  detectTypeFromQuery,
+  getSearchType,
   isBlock,
+  isHexadecimal,
   isNetworkParty,
+  isNonHex,
   SearchTypes,
-  isHash,
+  toHex,
+  toNonHex,
 } from './detect-search';
+import { DATA_SOURCES } from '../../config';
 
 global.fetch = jest.fn();
 
 describe('Detect Search', () => {
-  it.each([
+  it("should detect that it's a hexadecimal", () => {
-    ['0000000000000000000000000000000000000000000000000000000000000000', true],
+    const expected = true;
-    ['0000000000000000000000000000000000000000000000000000000000000001', true],
+    const testString =
-    [
+      '0x073ceaab59e5f2dd0561dec4883e7ee5bc7165cd4de34717a3ab8f2cbe3007f9';
-      'LOOONG0000000000000000000000000000000000000000000000000000000000000000',
+    const actual = isHexadecimal(testString);
-      false,
+    expect(actual).toBe(expected);
-    ],
+  });
-    ['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', false],
+
-    ['something else', false],
+  it("should detect that it's not hexadecimal", () => {
-  ])("should detect that it's a hash", (input, expected) => {
+    const expected = true;
-    expect(isHash(input)).toBe(expected);
+    const testString =
+      '073ceaab59e5f2dd0561dec4883e7ee5bc7165cd4de34717a3ab8f2cbe3007f9';
+    const actual = isNonHex(testString);
+    expect(actual).toBe(expected);
   });
 
   it("should detect that it's a network party", () => {
-    expect(isNetworkParty('network')).toBe(true);
+    const expected = true;
-    expect(isNetworkParty('web')).toBe(false);
+    const testString = 'network';
+    const actual = isNetworkParty(testString);
+    expect(actual).toBe(expected);
   });
 
   it("should detect that it's a block", () => {
-    expect(isBlock('123')).toBe(true);
+    const expected = true;
-    expect(isBlock('x123')).toBe(false);
+    const testString = '3188';
+    const actual = isBlock(testString);
+    expect(actual).toBe(expected);
   });
 
-  it.each([
+  it('should convert from non-hex to hex', () => {
-    [
+    const expected = '0x123';
-      '0000000000000000000000000000000000000000000000000000000000000000',
+    const testString = '123';
-      SearchTypes.Transaction,
+    const actual = toHex(testString);
-    ],
+    expect(actual).toBe(expected);
-    [
+  });
-      '0000000000000000000000000000000000000000000000000000000000000001',
+
-      SearchTypes.Party,
+  it('should convert from hex to non-hex', () => {
-    ],
+    const expected = '123';
-    ['123', SearchTypes.Block],
+    const testString = '0x123';
-    ['network', SearchTypes.Party],
+    const actual = toNonHex(testString);
-    ['something else', SearchTypes.Unknown],
+    expect(actual).toBe(expected);
-  ])(
+  });
-    "detectTypeByFetching should call fetch with non-hex query it's a transaction",
+
-    async (input, type) => {
+  it("should detect type client side from query if it's a hexadecimal", () => {
-      // @ts-ignore issue related to polyfill
+    const expected = [SearchTypes.Party, SearchTypes.Transaction];
-      fetch.mockImplementation(
+    const testString =
-        jest.fn(() =>
+      '0x4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
-          Promise.resolve({
+    const actual = detectTypeFromQuery(testString);
-            ok:
+    expect(actual).toStrictEqual(expected);
-              input ===
+  });
-              '0000000000000000000000000000000000000000000000000000000000000000',
+
-            json: () =>
+  it("should detect type client side from query if it's a non hex", () => {
-              Promise.resolve({
+    const expected = [SearchTypes.Party, SearchTypes.Transaction];
-                transaction: {
+    const testString =
-                  hash: input,
+      '4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
-                },
+    const actual = detectTypeFromQuery(testString);
-              }),
+    expect(actual).toStrictEqual(expected);
-          })
+  });
-        )
+
-      );
+  it("should detect type client side from query if it's a network party", () => {
-      const result = await determineType(input);
+    const expected = [SearchTypes.Party];
-      expect(result).toBe(type);
+    const testString = 'network';
-    }
+    const actual = detectTypeFromQuery(testString);
-  );
+    expect(actual).toStrictEqual(expected);
+  });
+
+  it("should detect type client side from query if it's a block (number)", () => {
+    const expected = [SearchTypes.Block];
+    const testString = '23432';
+    const actual = detectTypeFromQuery(testString);
+    expect(actual).toStrictEqual(expected);
+  });
+
+  it("detectTypeByFetching should call fetch with non-hex query it's a transaction", async () => {
+    const query = '0xabc';
+    const type = SearchTypes.Transaction;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              transaction: {
+                hash: query,
+              },
+            }),
+        })
+      )
+    );
+    const result = await detectTypeByFetching(query);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DATA_SOURCES.blockExplorerUrl}/transactions/${toNonHex(query)}`
+    );
+    expect(result).toBe(type);
+  });
+
+  it("detectTypeByFetching should call fetch with non-hex query it's a party", async () => {
+    const query = 'abc';
+    const type = SearchTypes.Party;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      )
+    );
+    const result = await detectTypeByFetching(query);
+    expect(result).toBe(type);
+  });
+
+  it('getSearchType should return party from fetch response', async () => {
+    const query =
+      '0x4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
+    const expected = SearchTypes.Party;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      )
+    );
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return transaction from fetch response', async () => {
+    const query =
+      '4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
+    const expected = SearchTypes.Transaction;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              transaction: {
+                hash: query,
+              },
+            }),
+        })
+      )
+    );
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return undefined from transaction response', async () => {
+    const query = 'u';
+    const expected = undefined;
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return block if query is number', async () => {
+    const query = '123';
+    const expected = SearchTypes.Block;
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return party if query is network', async () => {
+    const query = 'network';
+    const expected = SearchTypes.Party;
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
 });

apps/explorer/src/app/components/search/detect-search.ts

@@ -1,4 +1,3 @@
-import { remove0x } from '@vegaprotocol/utils';
 import { DATA_SOURCES } from '../../config';
 import type { BlockExplorerTransaction } from '../../routes/types/block-explorer-response';
 
@@ -7,20 +6,15 @@ export enum SearchTypes {
   Party = 'party',
   Block = 'block',
   Order = 'order',
-  Unknown = 'unknown',
 }
 
-export const HASH_LENGTH = 64;
+export const TX_LENGTH = 64;
-
-export const isHash = (value: string) =>
-  /[0-9a-fA-F]+/.test(remove0x(value)) &&
-  remove0x(value).length === HASH_LENGTH;
 
 export const isHexadecimal = (search: string) =>
-  search.startsWith('0x') && search.length === 2 + HASH_LENGTH;
+  search.startsWith('0x') && search.length === 2 + TX_LENGTH;
 
 export const isNonHex = (search: string) =>
-  !search.startsWith('0x') && search.length === HASH_LENGTH;
+  !search.startsWith('0x') && search.length === TX_LENGTH;
 
 export const isBlock = (search: string) => !Number.isNaN(Number(search));
 
@@ -29,44 +23,121 @@ export const isNetworkParty = (search: string) => search === 'network';
 export const toHex = (query: string) =>
   isHexadecimal(query) ? query : `0x${query}`;
 
-export const toNonHex = remove0x;
+export const toNonHex = (query: string) =>
+  isNonHex(query) ? query : `${query.replace('0x', '')}`;
 
-/**
+export const detectTypeFromQuery = (
- * Determine the type of the given query
+  query: string
- */
+): SearchTypes[] | undefined => {
-export const determineType = async (query: string): Promise<SearchTypes> => {
+  const i = query.toLowerCase();
-  const value = query.toLowerCase();
+
-  if (isHash(value)) {
+  if (isHexadecimal(i) || isNonHex(i)) {
-    // it can be either `SearchTypes.Party` or `SearchTypes.Transaction`
+    return [SearchTypes.Party, SearchTypes.Transaction];
-    if (await isTransactionHash(value)) {
+  } else if (isNetworkParty(i)) {
-      return SearchTypes.Transaction;
+    return [SearchTypes.Party];
-    } else {
+  } else if (isBlock(i)) {
-      return SearchTypes.Party;
+    return [SearchTypes.Block];
-    }
-  } else if (isNetworkParty(value)) {
-    return SearchTypes.Party;
-  } else if (isBlock(value)) {
-    return SearchTypes.Block;
   }
-  return SearchTypes.Unknown;
+
+  return undefined;
 };
 
-/**
+export const detectTypeByFetching = async (
- * Checks if given input is a transaction hash by querying the transactions
+  query: string
- * endpoint
+): Promise<SearchTypes | undefined> => {
- */
+  const hash = toNonHex(query);
-export const isTransactionHash = async (input: string): Promise<boolean> => {
-  const hash = remove0x(input);
   const request = await fetch(
     `${DATA_SOURCES.blockExplorerUrl}/transactions/${hash}`
   );
 
   if (request?.ok) {
     const body: BlockExplorerTransaction = await request.json();
+
     if (body?.transaction) {
-      return true;
+      return SearchTypes.Transaction;
     }
   }
 
-  return false;
+  return SearchTypes.Party;
+};
+
+// Code commented out because the current solution to detect a hex is temporary (by process of elimination)
+// export const detectTypeByFetching = async (
+//   query: string,
+//   type: SearchTypes
+// ): Promise<SearchTypes | undefined> => {
+//   const TYPES = [SearchTypes.Party, SearchTypes.Transaction];
+//
+//   if (!TYPES.includes(type)) {
+//     throw new Error('Search type provided not recognised');
+//   }
+//
+//   if (type === SearchTypes.Transaction) {
+//     const hash = toNonHex(query);
+//     const request = await fetch(
+//       `${DATA_SOURCES.blockExplorerUrl}/transactions/${hash}`
+//     );
+//
+//     if (request?.ok) {
+//       const body: BlockExplorerTransaction = await request.json();
+//
+//       if (body?.transaction) {
+//         return SearchTypes.Transaction;
+//       }
+//     }
+//   } else if (type === SearchTypes.Party) {
+//     const party = toNonHex(query);
+//
+//     const request = await fetch(
+//       `${DATA_SOURCES.blockExplorerUrl}/transactions?limit=1&filters[tx.submitter]=${party}`
+//     );
+//
+//     if (request.ok) {
+//       const body: BlockExplorerTransactions = await request.json();
+//
+//       if (body?.transactions?.length) {
+//         return SearchTypes.Party;
+//       }
+//     }
+//   }
+//
+//   return undefined;
+// };
+
+// export const getSearchType = async (
+//   query: string
+// ): Promise<SearchTypes | undefined> => {
+//   const searchTypes = detectTypeFromQuery(query);
+//   const hasResults = searchTypes?.length;
+//
+//   if (hasResults) {
+//     if (hasResults > 1) {
+//       const promises = searchTypes.map((type) =>
+//         detectTypeByFetching(query, type)
+//       );
+//       const results = await Promise.all(promises);
+//       return results.find((result) => result !== undefined);
+//     }
+//
+//     return searchTypes[0];
+//   }
+//
+//   return undefined;
+// };
+
+export const getSearchType = async (
+  query: string
+): Promise<SearchTypes | undefined> => {
+  const searchTypes = detectTypeFromQuery(query);
+  const hasResults = searchTypes?.length;
+
+  if (hasResults) {
+    if (hasResults > 1) {
+      return await detectTypeByFetching(query);
+    }
+
+    return searchTypes[0];
+  }
+
+  return undefined;
 };

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

@@ -1,82 +1,157 @@
-import {
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-  act,
+import { Search } from './search';
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react';
-import { SearchForm } from './search';
 import { MemoryRouter } from 'react-router-dom';
 import { Routes } from '../../routes/route-names';
+import { SearchTypes, getSearchType } from './detect-search';
 
-global.fetch = jest.fn();
 const mockedNavigate = jest.fn();
+const mockGetSearchType = getSearchType as jest.MockedFunction<
+  typeof getSearchType
+>;
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockedNavigate,
 }));
 
+jest.mock('./detect-search', () => ({
+  ...jest.requireActual('./detect-search'),
+  getSearchType: jest.fn(),
+}));
+
 beforeEach(() => {
   mockedNavigate.mockClear();
 });
 
-const renderComponent = () =>
+const renderComponent = () => (
-  render(
+  <MemoryRouter>
-    <MemoryRouter>
+    <Search />
-      <SearchForm />
+  </MemoryRouter>
-    </MemoryRouter>
+);
-  );
 
-describe('SearchForm', () => {
+const getInputs = () => ({
+  input: screen.getByTestId('search'),
+  button: screen.getByTestId('search-button'),
+});
+
+describe('Search', () => {
   it('should render search input and button', () => {
-    renderComponent();
+    render(renderComponent());
     expect(screen.getByTestId('search')).toBeInTheDocument();
     expect(screen.getByTestId('search-button')).toHaveTextContent('Search');
   });
 
-  it.each([
+  it('should render error if input is not known', async () => {
-    [
+    render(renderComponent());
-      Routes.TX,
+    const { button, input } = getInputs();
-      '0000000000000000000000000000000000000000000000000000000000000000',
+    fireEvent.change(input, { target: { value: 'asd' } });
-    ],
+    fireEvent.click(button);
-    [
+
-      Routes.PARTIES,
+    expect(await screen.findByTestId('search-error')).toHaveTextContent(
-      '0000000000000000000000000000000000000000000000000000000000000001',
+      'Transaction type is not recognised'
-    ],
-    [Routes.BLOCKS, '123'],
-    [undefined, 'something else'],
-  ])('should redirect to %s', async (route, input) => {
-    // @ts-ignore issue related to polyfill
-    fetch.mockImplementation(
-      jest.fn(() =>
-        Promise.resolve({
-          ok:
-            input ===
-            '0000000000000000000000000000000000000000000000000000000000000000',
-          json: () =>
-            Promise.resolve({
-              transaction: {
-                hash: input,
-              },
-            }),
-        })
-      )
     );
-    renderComponent();
+  });
-    await act(async () => {
+
-      fireEvent.change(screen.getByTestId('search'), {
+  it('should render error if no input is given', async () => {
-        target: {
+    render(renderComponent());
-          value: input,
+    const { button } = getInputs();
-        },
+
-      });
+    fireEvent.click(button);
-      fireEvent.click(screen.getByTestId('search-button'));
+
+    expect(await screen.findByTestId('search-error')).toHaveTextContent(
+      'Search query required'
+    );
+  });
+
+  it('should redirect to transactions page', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    mockGetSearchType.mockResolvedValue(SearchTypes.Transaction);
+    fireEvent.change(input, {
+      target: {
+        value:
+          '0x1234567890123456789012345678901234567890123456789012345678901234',
+      },
     });
+
+    fireEvent.click(button);
     await waitFor(() => {
-      expect(mockedNavigate).toBeCalledTimes(route ? 1 : 0);
+      expect(mockedNavigate).toBeCalledWith(
-      if (route) {
+        `${Routes.TX}/0x1234567890123456789012345678901234567890123456789012345678901234`
-        // eslint-disable-next-line jest/no-conditional-expect
+      );
-        expect(mockedNavigate).toBeCalledWith(`${route}/${input}`);
+    });
-      }
+  });
+
+  it('should redirect to transactions page without proceeding 0x', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    mockGetSearchType.mockResolvedValue(SearchTypes.Transaction);
+    fireEvent.change(input, {
+      target: {
+        value:
+          '1234567890123456789012345678901234567890123456789012345678901234',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(
+        `${Routes.TX}/0x1234567890123456789012345678901234567890123456789012345678901234`
+      );
+    });
+  });
+
+  it('should redirect to parties page', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    mockGetSearchType.mockResolvedValue(SearchTypes.Party);
+    fireEvent.change(input, {
+      target: {
+        value:
+          '0x1234567890123456789012345678901234567890123456789012345678901234',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(
+        `${Routes.PARTIES}/0x1234567890123456789012345678901234567890123456789012345678901234`
+      );
+    });
+  });
+
+  it('should redirect to parties page without proceeding 0x', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    mockGetSearchType.mockResolvedValue(SearchTypes.Party);
+    fireEvent.change(input, {
+      target: {
+        value:
+          '1234567890123456789012345678901234567890123456789012345678901234',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(
+        `${Routes.PARTIES}/0x1234567890123456789012345678901234567890123456789012345678901234`
+      );
+    });
+  });
+
+  it('should redirect to blocks page if passed a number', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    mockGetSearchType.mockResolvedValue(SearchTypes.Block);
+    fireEvent.change(input, {
+      target: {
+        value: '123',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(`${Routes.BLOCKS}/123`);
     });
   });
 });

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

@@ -1,13 +1,12 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { Button, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import { getSearchType, SearchTypes, toHex } from './detect-search';
 import { Routes } from '../../routes/route-names';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
-import { remove0x } from '@vegaprotocol/utils';
-import { determineType, isBlock, isHash, SearchTypes } from './detect-search';
 
 interface FormFields {
   search: string;
@@ -31,26 +30,101 @@ const MagnifyingGlass = () => (
   </svg>
 );
 
-const Clear = () => (
-  <svg
-    className="w-3 h-3"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M11.3748 1.37478L1.37478 11.3748L0.625244 10.6252L10.6252 0.625244L11.3748 1.37478Z"
-      fill="currentColor"
-    />
-    <path
-      d="M1.37478 0.625244L11.3748 10.6252L10.6252 11.3748L0.625244 1.37478L1.37478 0.625244Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
 export const Search = () => {
-  const searchForm = <SearchForm />;
+  const { register, handleSubmit } = useForm<FormFields>();
+  const navigate = useNavigate();
+  const [error, setError] = useState<Error | null>(null);
+
+  const onSubmit = useCallback(
+    async (fields: FormFields) => {
+      setError(null);
+
+      const query = fields.search;
+
+      if (!query) {
+        return setError(new Error(t('Search query required')));
+      }
+
+      const result = await getSearchType(query);
+      const urlAsHex = toHex(query);
+      const unrecognisedError = new Error(
+        t('Transaction type is not recognised')
+      );
+
+      if (result) {
+        switch (result) {
+          case SearchTypes.Party:
+            return navigate(`${Routes.PARTIES}/${urlAsHex}`);
+          case SearchTypes.Transaction:
+            return navigate(`${Routes.TX}/${urlAsHex}`);
+          case SearchTypes.Block:
+            return navigate(`${Routes.BLOCKS}/${Number(query)}`);
+          default:
+            return setError(unrecognisedError);
+        }
+      }
+
+      return setError(unrecognisedError);
+    },
+    [navigate]
+  );
+
+  const searchForm = (
+    <form className="block min-w-[290px]" onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex relative items-stretch gap-2 text-xs">
+        <label htmlFor="search" className="sr-only">
+          {t('Search by block number or transaction hash')}
+        </label>
+        <button
+          className={classNames(
+            'absolute top-[50%] translate-y-[-50%] left-2',
+            'text-vega-light-300 dark:text-vega-dark-300'
+          )}
+        >
+          <MagnifyingGlass />
+        </button>
+        <Input
+          {...register('search')}
+          id="search"
+          data-testid="search"
+          className={classNames(
+            'peer',
+            'pl-8 py-2 text-xs',
+            'border rounded border-vega-light-200 dark:border-vega-dark-200'
+          )}
+          hasError={Boolean(error?.message)}
+          type="text"
+          placeholder={t('Enter block number, public key or transaction hash')}
+        />
+        {error?.message && (
+          <div
+            className={classNames(
+              'hidden peer-focus:block',
+              'bg-white dark:bg-black',
+              'border rounded-b border-t-0 border-vega-light-200 dark:border-vega-dark-200',
+              'absolute top-[100%] flex-1 w-full pb-2 px-2 text-black dark:text-white'
+            )}
+          >
+            <InputError
+              data-testid="search-error"
+              intent="danger"
+              className="text-xs"
+            >
+              {error.message}
+            </InputError>
+          </div>
+        )}
+        <Button
+          className="hidden [.search-dropdown_&]:block"
+          type="submit"
+          size="xs"
+          data-testid="search-button"
+        >
+          {t('Search')}
+        </Button>
+      </div>
+    </form>
+  );
 
   const searchTrigger = (
     <DropdownMenu.Root>
@@ -80,135 +154,10 @@ export const Search = () => {
 
   return (
     <>
-      <div className="hidden [.nav-search-full_&]:block min-w-[290px]">
+      <div className="hidden [.nav-search-full_&]:block">{searchForm}</div>
-        {searchForm}
-      </div>
       <div className="hidden [.nav-search-compact_&]:block">
         {searchTrigger}
       </div>
     </>
   );
 };
-
-export const SearchForm = () => {
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    setError,
-    clearErrors,
-    formState,
-    watch,
-  } = useForm<FormFields>();
-  const navigate = useNavigate();
-
-  const onSubmit = useCallback(
-    async (fields: FormFields) => {
-      clearErrors();
-      const type = await determineType(fields.search);
-      if (type) {
-        switch (type) {
-          case SearchTypes.Party:
-            return navigate(`${Routes.PARTIES}/${remove0x(fields.search)}`);
-          case SearchTypes.Transaction:
-            return navigate(`${Routes.TX}/${remove0x(fields.search)}`);
-          case SearchTypes.Block:
-            return navigate(`${Routes.BLOCKS}/${Number(fields.search)}`);
-        }
-      }
-
-      setError('search', new Error(t('The search term is not a valid query')));
-    },
-    [clearErrors, navigate, setError]
-  );
-
-  const searchQuery = watch('search', '');
-
-  return (
-    <form className="block min-w-[200px]" onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex relative items-stretch gap-2 text-xs">
-        <div className="relative w-full">
-          <label htmlFor="search" className="sr-only">
-            {t('Search by block number or transaction hash')}
-          </label>
-          <button
-            className={classNames(
-              'absolute top-[50%] translate-y-[-50%] left-2',
-              'text-vega-light-300 dark:text-vega-dark-300'
-            )}
-          >
-            <MagnifyingGlass />
-          </button>
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              setValue('search', '');
-              clearErrors();
-            }}
-            className={classNames(
-              { hidden: searchQuery.length === 0 },
-              'absolute top-[50%] translate-y-[-50%] right-2',
-              'text-vega-light-300 dark:text-vega-dark-300'
-            )}
-          >
-            <Clear />
-          </button>
-          <Input
-            {...register('search', {
-              required: t('Search query is required'),
-              validate: (value) =>
-                isHash(value) ||
-                isBlock(value) ||
-                t('Search query has to be a number or a 64 character hash'),
-              onBlur: () => clearErrors('search'),
-            })}
-            id="search"
-            data-testid="search"
-            className={classNames(
-              'pl-8 py-2 text-xs',
-              { 'pr-8': searchQuery.length > 1 },
-              'border rounded border-vega-light-200 dark:border-vega-dark-200',
-              {
-                'border-vega-pink dark:border-vega-pink': Boolean(
-                  formState.errors.search
-                ),
-              }
-            )}
-            hasError={Boolean(formState.errors.search)}
-            type="text"
-            placeholder={t(
-              'Enter block number, public key or transaction hash'
-            )}
-          />
-        </div>
-        {formState.errors.search && (
-          <div
-            className={classNames(
-              '[nav_&]:border [nav_&]:rounded [nav_&]:border-vega-light-300 [nav_&]:dark:border-vega-light-300',
-              '[.search-dropdown_&]:border [.search-dropdown_&]:rounded [.search-dropdown_&]:border-vega-light-300 [.search-dropdown_&]:dark:border-vega-light-300',
-              'bg-white dark:bg-black',
-              'absolute top-[100%] flex-1 w-full pb-2 px-2 text-black dark:text-white'
-            )}
-          >
-            <InputError
-              data-testid="search-error"
-              intent="danger"
-              className="text-xs"
-            >
-              {formState.errors.search.message}
-            </InputError>
-          </div>
-        )}
-        <Button
-          variant="primary"
-          type="submit"
-          size="xs"
-          data-testid="search-button"
-          className="[nav_&]:hidden"
-        >
-          {t('Search')}
-        </Button>
-      </div>
-    </form>
-  );
-};

apps/explorer/src/app/components/txs/details/proposal/signature-bundle/bundle-exists.tsx

@@ -30,7 +30,7 @@ export const BundleExists = ({
   // Note if this is wrong, the wrong decoder will be used which will give incorrect data
 
   return (
-    <div className="w-auto h-10 max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
+    <div className="w-auto max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
       <IconForBundleStatus status={status} />
       <h1 className="text-xl pb-1">
         {status === 'STATUS_ENABLED'

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

@@ -1,3 +1,4 @@
+export { TxList } from './tx-list';
 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-list.tsx

@@ -0,0 +1,14 @@
+import { t } from '@vegaprotocol/i18n';
+import type { TendermintUnconfirmedTransactionsResponse } from '../../routes/txs/tendermint-unconfirmed-transactions-response.d';
+
+interface TxsProps {
+  data: TendermintUnconfirmedTransactionsResponse | undefined;
+}
+
+export const TxList = ({ data }: TxsProps) => {
+  if (!data) {
+    return <div>{t('Awaiting transactions')}</div>;
+  }
+
+  return <div>{JSON.stringify(data, null, '  ')}</div>;
+};

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

@@ -7,7 +7,7 @@ import { toHex } from '../search/detect-search';
 import { ChainResponseCode } from './details/chain-response-code/chain-reponse.code';
 import isNumber from 'lodash/isNumber';
 
-const TRUNCATE_LENGTH = 10;
+const TRUNCATE_LENGTH = 5;
 
 export const TxsInfiniteListItem = ({
   hash,
@@ -34,10 +34,10 @@ export const TxsInfiniteListItem = ({
       className="flex items-center h-full border-t border-neutral-600 dark:border-neutral-800 txs-infinite-list-item grid grid-cols-10 py-2"
     >
       <div
-        className="text-sm col-span-10 md:col-span-3 leading-none"
+        className="text-sm col-span-10 xl:col-span-3 leading-none"
         data-testid="tx-hash"
       >
-        <span className="md:hidden uppercase text-vega-dark-300">
+        <span className="xl:hidden uppercase text-vega-dark-300">
           ID:&nbsp;
         </span>
         <TruncatedLink
@@ -48,10 +48,10 @@ export const TxsInfiniteListItem = ({
         />
       </div>
       <div
-        className="text-sm col-span-10 md:col-span-3 leading-none"
+        className="text-sm col-span-10 xl:col-span-3 leading-none"
         data-testid="pub-key"
       >
-        <span className="md:hidden uppercase text-vega-dark-300">
+        <span className="xl:hidden uppercase text-vega-dark-300">
           By:&nbsp;
         </span>
         <TruncatedLink
@@ -61,14 +61,14 @@ export const TxsInfiniteListItem = ({
           endChars={TRUNCATE_LENGTH}
         />
       </div>
-      <div className="text-sm col-span-5 md:col-span-2 leading-none	flex items-center">
+      <div className="text-sm col-span-5 xl:col-span-2 leading-none	flex items-center">
         <TxOrderType orderType={type} command={command} />
       </div>
       <div
-        className="text-sm col-span-3 md:col-span-1 leading-none flex items-center"
+        className="text-sm col-span-3 xl:col-span-1 leading-none flex items-center"
         data-testid="tx-block"
       >
-        <span className="md:hidden uppercase text-vega-dark-300">
+        <span className="xl:hidden uppercase text-vega-dark-300">
           Block:&nbsp;
         </span>
         <TruncatedLink
@@ -79,10 +79,10 @@ export const TxsInfiniteListItem = ({
         />
       </div>
       <div
-        className="text-sm col-span-2 md:col-span-1 leading-none flex items-center"
+        className="text-sm col-span-2 xl:col-span-1 leading-none flex items-center"
         data-testid="tx-success"
       >
-        <span className="md:hidden uppercase text-vega-dark-300">
+        <span className="xl:hidden uppercase text-vega-dark-300">
           Success:&nbsp;
         </span>
         {isNumber(code) ? (

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

@@ -64,7 +64,9 @@ describe('Txs infinite list', () => {
         error={Error('test error!')}
       />
     );
-    expect(screen.getByText('Cannot fetch transaction')).toBeInTheDocument();
+    expect(
+      screen.getByText('Cannot fetch transaction: Error: test error!')
+    ).toBeInTheDocument();
   });
 
   it('item renders data of n length into list of n length', () => {

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

@@ -30,7 +30,7 @@ const NOOP = () => {};
 const Item = ({ index, style, isLoading, error }: ItemProps) => {
   let content;
   if (error) {
-    content = t(`Cannot fetch transaction`);
+    content = t(`Cannot fetch transaction: ${error}`);
   } else if (isLoading) {
     content = <Loader />;
   } else {
@@ -68,7 +68,7 @@ export const TxsInfiniteList = ({
   className,
 }: TxsInfiniteListProps) => {
   const { screenSize } = useScreenDimensions();
-  const isStacked = ['xs', 'sm'].includes(screenSize);
+  const isStacked = ['xs', 'sm', 'md', 'lg'].includes(screenSize);
 
   if (!txs) {
     if (!areTxsLoading) {
@@ -95,15 +95,15 @@ export const TxsInfiniteList = ({
 
   return (
     <div className={className} data-testid="transactions-list">
-      <div className="lg:grid grid-cols-10 w-full mb-3 hidden text-vega-dark-300 uppercase">
+      <div className="xl:grid grid-cols-10 w-full mb-3 hidden text-vega-dark-300 uppercase">
         <div className="col-span-3">
-          <span className="hidden xl:inline">{t('Transaction')} &nbsp;</span>
+          <span className="hidden xl:inline">Transaction &nbsp;</span>
           <span>ID</span>
         </div>
-        <div className="col-span-3">{t('Submitted By')}</div>
+        <div className="col-span-3">Submitted By</div>
-        <div className="col-span-2">{t('Type')}</div>
+        <div className="col-span-2">Type</div>
-        <div className="col-span-1">{t('Block')}</div>
+        <div className="col-span-1">Block</div>
-        <div className="col-span-1">{t('Success')}</div>
+        <div className="col-span-1">Success</div>
       </div>
       <div data-testid="infinite-scroll-wrapper">
         <InfiniteLoader

apps/explorer/src/app/components/txs/txs-per-block.tsx

@@ -1,4 +1,5 @@
 import { Routes } from '../../routes/route-names';
+import { RenderFetched } from '../render-fetched';
 import { TruncatedLink } from '../truncate/truncated-link';
 import { TxOrderType } from './tx-order-type';
 import { Table, TableRow, TableCell } from '../table';
@@ -8,7 +9,7 @@ import type { BlockExplorerTransactions } from '../../routes/types/block-explore
 import isNumber from 'lodash/isNumber';
 import { ChainResponseCode } from './details/chain-response-code/chain-reponse.code';
 import { getTxsDataUrl } from '../../hooks/use-txs-data';
-import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
+import { Loader } from '@vegaprotocol/ui-toolkit';
 import EmptyList from '../empty-list/empty-list';
 
 interface TxsPerBlockProps {
@@ -26,7 +27,7 @@ export const TxsPerBlock = ({ blockHeight, txCount }: TxsPerBlockProps) => {
   } = useFetch<BlockExplorerTransactions>(url);
 
   return (
-    <AsyncRenderer data={data} error={error} loading={!!loading}>
+    <RenderFetched error={error} loading={loading} className="text-body-large">
       {data && data.transactions.length > 0 ? (
         <div className="overflow-x-auto whitespace-nowrap mb-28">
           <Table>
@@ -94,6 +95,6 @@ export const TxsPerBlock = ({ blockHeight, txCount }: TxsPerBlockProps) => {
           label={t('0 transactions')}
         />
       )}
-    </AsyncRenderer>
+    </RenderFetched>
   );
 };

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

@@ -144,12 +144,12 @@ afterEach(() => {
 describe('Block', () => {
   it('renders error state if error is present', async () => {
     (useFetch as jest.Mock).mockReturnValue({
-      state: { data: null, loading: false, error: new Error('asd') },
+      state: { data: null, loading: false, error: 'asd' },
     });
     render(renderComponent());
 
     expect(screen.getByText(`BLOCK ${blockId}`)).toBeInTheDocument();
-    expect(screen.getByText('Something went wrong: asd')).toBeInTheDocument();
+    expect(screen.getByText('Error retrieving data')).toBeInTheDocument();
   });
 
   it('renders loading state if present', async () => {

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { DATA_SOURCES } from '../../../config';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
@@ -11,8 +12,9 @@ import {
   TableCell,
 } from '../../../components/table';
 import { TxsPerBlock } from '../../../components/txs/txs-per-block';
-import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { Routes } from '../../route-names';
+import { RenderFetched } from '../../../components/render-fetched';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { NodeLink } from '../../../components/links';
@@ -32,7 +34,7 @@ const Block = () => {
   return (
     <section>
       <RouteTitle data-testid="block-header">{t(`BLOCK ${block}`)}</RouteTitle>
-      <AsyncRenderer data={blockData} error={error} loading={!!loading}>
+      <RenderFetched error={error} loading={loading}>
         <>
           <div className="grid grid-cols-2 gap-2 mb-8">
             <Link
@@ -121,7 +123,7 @@ const Block = () => {
             </>
           )}
         </>
-      </AsyncRenderer>
+      </RenderFetched>
     </section>
   );
 };

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

@@ -1,7 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
-import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
+import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { DATA_SOURCES } from '../../config';
 import type { TendermintGenesisResponse } from './tendermint-genesis-response';
 import { useDocumentTitle } from '../../hooks/use-document-title';
@@ -10,26 +10,21 @@ const Genesis = () => {
   useDocumentTitle(['Genesis']);
 
   const {
-    state: { data, loading, error },
+    state: { data: genesis, loading },
   } = useFetch<TendermintGenesisResponse>(
     `${DATA_SOURCES.tendermintUrl}/genesis`
   );
-
+  if (!genesis?.result.genesis) {
+    if (loading) {
+      return <Loader />;
+    }
+    return null;
+  }
   return (
-    <>
+    <section>
       <RouteTitle data-testid="genesis-header">{t('Genesis')}</RouteTitle>
-      <AsyncRenderer
+      <SyntaxHighlighter data={genesis?.result.genesis} />
-        data={data}
+    </section>
-        error={error}
-        loading={!!loading}
-        loadingMessage={t('Loading genesis information...')}
-        errorMessage={t('Could not fetch genesis data')}
-      >
-        <section>
-          <SyntaxHighlighter data={data?.result.genesis} />
-        </section>
-      </AsyncRenderer>
-    </>
   );
 };
 

apps/explorer/src/app/routes/governance/proposals-page.tsx

@@ -1,6 +1,6 @@
 import { proposalsDataProvider } from '@vegaprotocol/proposals';
 import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { ProposalsTable } from '../../components/proposals/proposals-table';
 import { RouteTitle } from '../../components/route-title';

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

@@ -1,19 +1,14 @@
 import { StatsManager } from '@vegaprotocol/network-stats';
-import { SearchForm } from '../../components/search';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 
 const Home = () => {
-  const classnames = 'mt-4 mb-4';
+  const classnames = 'mt-4 grid grid-cols-1 lg:grid-cols-2 lg:gap-4';
+
   useDocumentTitle();
 
   return (
     <section>
-      <div className="p-20 max-sm:py-10 max-sm:px-0">
+      <StatsManager className={classnames} />
-        <SearchForm />
-      </div>
-      <div className="px-20 max-sm:px-0">
-        <StatsManager className={classnames} />
-      </div>
     </section>
   );
 };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+import { RouteErrorBoundary } from '../components/router-error-boundary';
+
+import routerConfig from './router-config';
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
+
+export interface RouteChildProps {
+  name: string;
+}
+
+export const AppRouter = () => {
+  const routes = useRoutes(routerConfig);
+
+  const splashLoading = (
+    <Splash>
+      <Loader />
+    </Splash>
+  );
+
+  return (
+    <RouteErrorBoundary>
+      <React.Suspense fallback={splashLoading}>{routes}</React.Suspense>
+    </RouteErrorBoundary>
+  );
+};

apps/explorer/src/app/routes/layout.tsx

@@ -1,166 +0,0 @@
-import {
-  AssetDetailsDialog,
-  useAssetDetailsDialogStore,
-} from '@vegaprotocol/assets';
-import { t } from '@vegaprotocol/i18n';
-import { useEnvironment } from '@vegaprotocol/environment';
-import { AnnouncementBanner } from '@vegaprotocol/announcements';
-import {
-  BackgroundVideo,
-  BreadcrumbsContainer,
-  ButtonLink,
-} from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-import {
-  isRouteErrorResponse,
-  Link,
-  Outlet,
-  useMatch,
-  useRouteError,
-} from 'react-router-dom';
-import { Footer } from '../components/footer/footer';
-import { Header } from '../components/header';
-import { Routes } from './route-names';
-
-const DialogsContainer = () => {
-  const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
-  return (
-    <AssetDetailsDialog
-      assetId={id}
-      trigger={trigger || null}
-      asJson={asJson}
-      open={isOpen}
-      onChange={setOpen}
-    />
-  );
-};
-
-export const Layout = () => {
-  const isHome = Boolean(useMatch(Routes.HOME));
-  const { ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
-  const fixedWidthClasses = 'w-full max-w-[1500px] mx-auto';
-
-  return (
-    <>
-      <div
-        className={classNames(
-          'min-h-screen',
-          'mx-auto my-0',
-          'grid grid-rows-[auto_1fr_auto] grid-cols-1',
-          'border-vega-light-200 dark:border-vega-dark-200',
-          'antialiased text-black dark:text-white',
-          'overflow-hidden relative'
-        )}
-      >
-        <div>
-          {ANNOUNCEMENTS_CONFIG_URL && (
-            <AnnouncementBanner
-              app="explorer"
-              configUrl={ANNOUNCEMENTS_CONFIG_URL}
-            />
-          )}
-          <Header />
-        </div>
-        <div className={fixedWidthClasses}>
-          <main className="p-4">
-            {!isHome && <BreadcrumbsContainer className="mb-4" />}
-            <Outlet />
-          </main>
-        </div>
-        <div className={fixedWidthClasses}>
-          <Footer />
-        </div>
-      </div>
-      <DialogsContainer />
-    </>
-  );
-};
-
-export const ErrorBoundary = () => {
-  const error = useRouteError();
-
-  const errorTitle = isRouteErrorResponse(error)
-    ? `${error.status} ${error.statusText}`
-    : t('Something went wrong');
-
-  const errorMessage = isRouteErrorResponse(error)
-    ? error.error?.message
-    : (error as Error).message || JSON.stringify(error);
-
-  return (
-    <>
-      <BackgroundVideo className="brightness-50" />
-      <div
-        className={classNames(
-          'max-w-[620px] p-2 mt-[10vh]',
-          'mx-auto my-0',
-          'antialiased text-white',
-          'overflow-hidden relative',
-          'flex flex-col gap-2'
-        )}
-      >
-        <div className="flex gap-4">
-          <div>{GHOST}</div>
-          <h1 className="text-[2.7rem] font-alpha calt break-words uppercase">
-            {errorTitle}
-          </h1>
-        </div>
-        <div className="text-sm mt-10 overflow-auto break-all font-mono">
-          {errorMessage}
-        </div>
-        <div>
-          <ButtonLink onClick={() => window.location.reload()}>
-            {t('Try refreshing')}
-          </ButtonLink>{' '}
-          {t('or go back to')}{' '}
-          <Link className="underline" to="/">
-            {t('Home')}
-          </Link>
-        </div>
-      </div>
-    </>
-  );
-};
-
-const GHOST = (
-  <svg
-    width="56"
-    height="85"
-    viewBox="0 0 56 85"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M41 0.5H3V60.5H41V0.5Z" fill="white" />
-    <path d="M15 18.5H13V20.5H15V18.5Z" fill="black" />
-    <path d="M17 20.5H15V22.5H17V20.5Z" fill="black" />
-    <path d="M19 18.5H17V20.5H19V18.5Z" fill="black" />
-    <path d="M15 22.5H13V24.5H15V22.5Z" fill="black" />
-    <path d="M19 22.5H17V24.5H19V22.5Z" fill="black" />
-    <path d="M29 28.5H15V30.5H29V28.5Z" fill="black" />
-    <path d="M27 18.5H25V20.5H27V18.5Z" fill="black" />
-    <path d="M29 20.5H27V22.5H29V20.5Z" fill="black" />
-    <path d="M31 18.5H29V20.5H31V18.5Z" fill="black" />
-    <path d="M27 22.5H25V24.5H27V22.5Z" fill="black" />
-    <path d="M31 22.5H29V24.5H31V22.5Z" fill="black" />
-    <path d="M31 26.5H29V28.5H31V26.5Z" fill="black" />
-    <path d="M19 60.5H17V84.5H19V60.5Z" fill="black" />
-    <path d="M27 60.5H25V84.5H27V60.5Z" fill="black" />
-    <path
-      d="M3 42.5V58.64V60.5V64.5H21V60.5H23V64.5H41V60.5V58.64V42.5H3Z"
-      fill="#FF077F"
-    />
-    <path d="M35 46.5H41V42.5H3V46.5H31H35Z" fill="#CB0666" />
-    <path d="M3 32.32V29.5L0 32.5V60.5H2V33.33L3 32.32Z" fill="black" />
-    <path d="M41 31.8V29.49L54.79 21.53L55.79 23.26L41 31.8Z" fill="black" />
-    <path d="M36 54.5H35V55.5H36V54.5Z" fill="black" />
-    <path d="M35 53.5H34V54.5H35V53.5Z" fill="black" />
-    <path d="M34 48.5H33V53.5H34V48.5Z" fill="black" />
-    <path d="M38 48.5H37V52.5H38V48.5Z" fill="black" />
-    <path d="M37 53.5H36V54.5H37V53.5Z" fill="black" />
-    <path d="M39 52.5H38V53.5H39V52.5Z" fill="black" />
-    <path
-      d="M55.7901 23.27L53.0601 22.54L45.1001 8.75L46.8301 7.75L55.7901 23.27Z"
-      fill="black"
-    />
-  </svg>
-);

apps/explorer/src/app/routes/markets/market-page.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -8,7 +8,7 @@ import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import compact from 'lodash/compact';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
-import { marketInfoWithDataProvider } from '@vegaprotocol/market-info';
+import { marketInfoProvider } from '@vegaprotocol/market-info';
 import { PageTitle } from '../../components/page-helpers/page-title';
 
 export const MarketPage = () => {
@@ -17,7 +17,7 @@ export const MarketPage = () => {
   const { marketId } = useParams<{ marketId: string }>();
 
   const { data, loading, error } = useDataProvider({
-    dataProvider: marketInfoWithDataProvider,
+    dataProvider: marketInfoProvider,
     skipUpdates: true,
     variables: {
       marketId: marketId || '',
@@ -49,7 +49,6 @@ export const MarketPage = () => {
         />
         <AsyncRenderer
           noDataMessage={t('This chain has no markets')}
-          errorMessage={t('Could not fetch market') + ' ' + marketId}
           data={data}
           loading={loading}
           error={error}

apps/explorer/src/app/routes/markets/markets-page.tsx

@@ -4,7 +4,7 @@ import { marketsProvider } from '@vegaprotocol/market-list';
 import { RouteTitle } from '../../components/route-title';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { MarketsTable } from '../../components/markets/markets-table';
 
 export const MarketsPage = () => {

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

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import { NetworkParametersTable } from './network-parameters';
 
 describe('NetworkParametersTable', () => {

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

@@ -13,15 +13,14 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../components/route-title';
 import orderBy from 'lodash/orderBy';
-import { useNetworkParamsQuery } from '@vegaprotocol/network-parameters';
+import { useNetworkParamsQuery } from '@vegaprotocol/react-helpers';
-import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
+import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 
 const PERCENTAGE_PARAMS = [
   'governance.proposal.asset.requiredMajority',
   'governance.proposal.asset.requiredParticipation',
-  'governance.proposal.updateAsset.requiredParticipation',
   'governance.proposal.freeform.requiredMajority',
   'governance.proposal.freeform.requiredParticipation',
   'governance.proposal.market.requiredMajority',
@@ -54,8 +53,6 @@ const BIG_NUMBER_PARAMS = [
   'governance.proposal.asset.minProposerBalance',
   'governance.proposal.market.minProposerBalance',
   'governance.proposal.market.minVoterBalance',
-  'governance.proposal.updateAsset.minProposerBalance',
-  'governance.proposal.updateAsset.minVoterBalance',
 ];
 
 export const NetworkParameterRow = ({

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

@@ -1,4 +1,4 @@
-import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
+import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { RouteTitle } from '../../../components/route-title';
 import { t } from '@vegaprotocol/i18n';
 import { useExplorerOracleSpecsQuery } from '../__generated__/Oracles';
@@ -8,7 +8,7 @@ import { useScrollToLocation } from '../../../hooks/scroll-to-location';
 import filter from 'recursive-key-filter';
 
 const Oracles = () => {
-  const { data, loading, error } = useExplorerOracleSpecsQuery();
+  const { data, loading } = useExplorerOracleSpecsQuery();
 
   useDocumentTitle(['Oracles']);
   useScrollToLocation();
@@ -16,40 +16,28 @@ const Oracles = () => {
   return (
     <section>
       <RouteTitle data-testid="oracle-specs-heading">{t('Oracles')}</RouteTitle>
-      <AsyncRenderer
+      {loading ? <Loader /> : null}
-        data={data}
+      {data?.oracleSpecsConnection?.edges
-        loading={loading}
+        ? data.oracleSpecsConnection.edges.map((o) => {
-        error={error}
+            const id = o?.node.dataSourceSpec.spec.id;
-        loadingMessage={t('Loading oracle data...')}
+            if (!id) {
-        errorMessage={t('Oracle data could not be loaded')}
+              return null;
-        noDataMessage={t('No oracles found')}
+            }
-        noDataCondition={(data) =>
+            return (
-          !data?.oracleSpecsConnection?.edges ||
+              <div id={id} key={id} className="mb-10">
-          data.oracleSpecsConnection.edges?.length === 0
+                <OracleDetails
-        }
+                  id={id}
-      >
+                  dataSource={o?.node}
-        {data?.oracleSpecsConnection?.edges
+                  showBroadcasts={false}
-          ? data.oracleSpecsConnection.edges.map((o) => {
+                />
-              const id = o?.node.dataSourceSpec.spec.id;
+                <details>
-              if (!id) {
+                  <summary className="pointer">JSON</summary>
-                return null;
+                  <SyntaxHighlighter data={filter(o, ['__typename'])} />
-              }
+                </details>
-              return (
+              </div>
-                <div id={id} key={id} className="mb-10">
+            );
-                  <OracleDetails
+          })
-                    id={id}
+        : null}
-                    dataSource={o?.node}
-                    showBroadcasts={false}
-                  />
-                  <details>
-                    <summary className="pointer">JSON</summary>
-                    <SyntaxHighlighter data={filter(o, ['__typename'])} />
-                  </details>
-                </div>
-              );
-            })
-          : null}
-      </AsyncRenderer>
     </section>
   );
 };

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

@@ -1,11 +1,12 @@
 import { RouteTitle } from '../../../components/route-title';
+import { RenderFetched } from '../../../components/render-fetched';
 import { truncateByChars } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 import { useParams } from 'react-router-dom';
 import { useExplorerOracleSpecByIdQuery } from '../__generated__/Oracles';
 import { OracleDetails } from '../components/oracle';
-import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
+import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import filter from 'recursive-key-filter';
 import { TruncateInline } from '../../../components/truncate/truncate';
 
@@ -26,14 +27,7 @@ export const Oracle = () => {
         {t(`Oracle `)}
         <TruncateInline startChars={5} endChars={5} text={id || '1'} />
       </RouteTitle>
-      <AsyncRenderer
+      <RenderFetched error={error} loading={loading}>
-        data={data}
-        error={error}
-        loading={loading}
-        noDataCondition={(data) => !data?.oracleSpec}
-        errorMessage={t('Could not load oracle data')}
-        loadingMessage={t('Loading oracle data...')}
-      >
         {data?.oracleSpec ? (
           <div id={id} key={id} className="mb-10">
             <OracleDetails
@@ -50,7 +44,7 @@ export const Oracle = () => {
         ) : (
           <span></span>
         )}
-      </AsyncRenderer>
+      </RenderFetched>
     </section>
   );
 };

apps/explorer/src/app/routes/parties/id/Party-assets.graphql

@@ -48,13 +48,6 @@ query ExplorerPartyAssets($partyId: ID!) {
         }
         stakingSummary {
           currentStakeAvailable
-          linkings(pagination: { first: 100 }) {
-            edges {
-              node {
-                amount
-              }
-            }
-          }
         }
         accountsConnection {
           edges {

apps/explorer/src/app/routes/parties/id/__generated__/Party-assets.ts

@@ -10,7 +10,7 @@ export type ExplorerPartyAssetsQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerPartyAssetsQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string, linkings: { __typename?: 'StakesConnection', edges?: Array<{ __typename?: 'StakeLinkingEdge', node: { __typename?: 'StakeLinking', amount: string } } | null> | null } }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } }, market?: { __typename?: 'Market', id: string, decimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } | null } } | null> | null } | null } }> } | null };
+export type ExplorerPartyAssetsQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } }, market?: { __typename?: 'Market', id: string, decimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } | null } } | null> | null } | null } }> } | null };
 
 export const ExplorerPartyAssetsAccountsFragmentDoc = gql`
     fragment ExplorerPartyAssetsAccounts on AccountBalance {
@@ -64,13 +64,6 @@ export const ExplorerPartyAssetsDocument = gql`
         }
         stakingSummary {
           currentStakeAvailable
-          linkings(pagination: {first: 100}) {
-            edges {
-              node {
-                amount
-              }
-            }
-          }
         }
         accountsConnection {
           edges {

apps/explorer/src/app/routes/parties/id/accounts/index.tsx

@@ -1,24 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { useParams } from 'react-router-dom';
-import { toNonHex } from '../../../../components/search/detect-search';
-import { PageHeader } from '../../../../components/page-header';
-import { useDocumentTitle } from '../../../../hooks/use-document-title';
-
-import { PartyAccounts } from '../components/party-accounts';
-
-const PartyAccountsByAsset = () => {
-  const { party } = useParams<{ party: string }>();
-
-  useDocumentTitle(['Public keys', party || '-']);
-  const partyId = toNonHex(party ? party : '');
-
-  return (
-    <section>
-      <PageHeader title={t('Balances by asset')} />
-
-      <PartyAccounts partyId={partyId} />
-    </section>
-  );
-};
-
-export { PartyAccountsByAsset };

apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx

@@ -1,9 +1,32 @@
-import { AccountManager } from '@vegaprotocol/accounts';
+import { t } from '@vegaprotocol/i18n';
-import { useCallback } from 'react';
+import get from 'lodash/get';
-import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import AssetBalance from '../../../../components/asset-balance/asset-balance';
+import { AssetLink, MarketLink } from '../../../../components/links';
+import { Table, TableRow } from '../../../../components/table';
+import type * as Schema from '@vegaprotocol/types';
+import type { ExplorerPartyAssetsAccountsFragment } from '../__generated__/Party-assets';
+
+const accountTypeString: Record<Schema.AccountType, string> = {
+  ACCOUNT_TYPE_BOND: t('Bond'),
+  ACCOUNT_TYPE_EXTERNAL: t('External'),
+  ACCOUNT_TYPE_FEES_INFRASTRUCTURE: t('Fees (Infrastructure)'),
+  ACCOUNT_TYPE_FEES_LIQUIDITY: t('Fees (Liquidity)'),
+  ACCOUNT_TYPE_FEES_MAKER: t('Fees (Maker)'),
+  ACCOUNT_TYPE_GENERAL: t('General'),
+  ACCOUNT_TYPE_GLOBAL_INSURANCE: t('Global Insurance Pool'),
+  ACCOUNT_TYPE_GLOBAL_REWARD: t('Global Reward Pool'),
+  ACCOUNT_TYPE_INSURANCE: t('Insurance'),
+  ACCOUNT_TYPE_MARGIN: t('Margin'),
+  ACCOUNT_TYPE_PENDING_TRANSFERS: t('Pending Transfers'),
+  ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES: t('Reward - LP Fees received'),
+  ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES: t('Reward - Maker fees paid'),
+  ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES: t('Reward - Maker fees received'),
+  ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS: t('Reward - Market proposers'),
+  ACCOUNT_TYPE_SETTLEMENT: t('Settlement'),
+};
 
 interface PartyAccountsProps {
-  partyId: string;
+  accounts: ExplorerPartyAssetsAccountsFragment[];
 }
 
 /**
@@ -11,22 +34,49 @@ interface PartyAccountsProps {
  * probably do with sorting by asset, and then within asset, by type with general
  * appearing first and... tbd
  */
-export const PartyAccounts = ({ partyId }: PartyAccountsProps) => {
+export const PartyAccounts = ({ accounts }: PartyAccountsProps) => {
-  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  const onClickAsset = useCallback(
-    (assetId?: string) => {
-      assetId && openAssetDetailsDialog(assetId);
-    },
-    [openAssetDetailsDialog]
-  );
-
   return (
-    <div className="block min-h-44 h-60 4 w-full border-red-800 relative">
+    <Table className="max-w-5xl min-w-fit">
-      <AccountManager
+      <thead>
-        partyId={partyId}
+        <TableRow modifier="bordered" className="font-mono">
-        onClickAsset={onClickAsset}
+          <td>{t('Type')}</td>
-        isReadOnly={true}
+          <td>{t('Market')}</td>
-      />
+          <td className="text-right pr-2">{t('Balance')}</td>
-    </div>
+          <td>{t('Asset')}</td>
+        </TableRow>
+      </thead>
+      <tbody>
+        {accounts.map((account) => {
+          const m = get(account, 'market.tradableInstrument.instrument.name');
+
+          return (
+            <TableRow
+              key={`pa-${account.asset.id}-${account.type}`}
+              title={account.asset.name}
+              id={`${accountTypeString[account.type]} ${m ? ` - ${m}` : ''}`}
+            >
+              <td className="text-md">{accountTypeString[account.type]}</td>
+              <td className="text-md">
+                {account.market?.id ? (
+                  <MarketLink id={account.market?.id} />
+                ) : (
+                  <p>-</p>
+                )}
+              </td>
+              <td className="text-md text-right pr-2">
+                <AssetBalance
+                  assetId={account.asset.id}
+                  price={account.balance}
+                  showAssetLink={false}
+                />
+              </td>
+              <td className="text-md">
+                <AssetLink assetId={account.asset.id} />
+              </td>
+            </TableRow>
+          );
+        })}
+      </tbody>
+    </Table>
   );
 };

apps/explorer/src/app/routes/parties/id/components/party-block-accounts.tsx

@@ -1,63 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { useNavigate } from 'react-router-dom';
-import { Routes } from '../../../../routes/route-names';
-import { Button, Icon, Loader } from '@vegaprotocol/ui-toolkit';
-import { PartyBlock } from './party-block';
-import type { AccountFields } from '@vegaprotocol/accounts';
-
-export interface PartyBlockAccountProps {
-  partyId: string;
-  accountData: AccountFields[] | null;
-  accountLoading: boolean;
-  accountError?: Error;
-}
-
-/**
- * Displays an overview of a party's assets. This uses existing data
- * providers to structure the details by asset, rather than looking at
- * it by account. The assumption is that this is a more natural way to
- * get an idea of the assets and activity of a party.
- */
-export const PartyBlockAccounts = ({
-  partyId,
-  accountData,
-  accountLoading,
-  accountError,
-}: PartyBlockAccountProps) => {
-  const navigate = useNavigate();
-
-  const shouldShowActionButton =
-    accountData && accountData.length > 0 && !accountLoading && !accountError;
-
-  const action = shouldShowActionButton ? (
-    <Button
-      size="sm"
-      onClick={() => navigate(`/${Routes.PARTIES}/${partyId}/assets`)}
-    >
-      {t('Show all')}
-    </Button>
-  ) : null;
-
-  return (
-    <PartyBlock title={t('Assets')} action={action}>
-      {accountData && accountData.length > 0 ? (
-        <p>
-          {accountData.length} {t('assets, including')}{' '}
-          {accountData
-            .map((a) => a.asset.symbol)
-            .slice(0, 3)
-            .join(', ')}
-        </p>
-      ) : accountLoading && !accountError ? (
-        <Loader size="small" />
-      ) : accountData && accountData.length === 0 ? (
-        <p>{t('No accounts found')}</p>
-      ) : (
-        <p>
-          <Icon className="mr-1" name="error" />
-          <span className="text-sm">{t('Could not load assets')}</span>
-        </p>
-      )}
-    </PartyBlock>
-  );
-};

apps/explorer/src/app/routes/parties/id/components/party-block-stake.tsx

@@ -1,83 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { useExplorerPartyAssetsQuery } from '../__generated__/Party-assets';
-import GovernanceAssetBalance from '../../../../components/asset-balance/governance-asset-balance';
-import {
-  Icon,
-  KeyValueTable,
-  KeyValueTableRow,
-  Loader,
-} from '@vegaprotocol/ui-toolkit';
-import { PartyBlock } from './party-block';
-import BigNumber from 'bignumber.js';
-
-export interface PartyBlockStakeProps {
-  partyId: string;
-  accountLoading: boolean;
-  accountError?: Error;
-}
-
-/**
- * Displays an overview of a single party's staking balance, importantly maintaining'
- * the same height before and after the details are loaded in.
- *
- * Unlike PartyBlockAccounts there is not action button in the title of this block as
- * there is no page for it to link to currently. That's a future task.
- */
-export const PartyBlockStake = ({
-  partyId,
-  accountLoading,
-  accountError,
-}: PartyBlockStakeProps) => {
-  const partyRes = useExplorerPartyAssetsQuery({
-    // Don't cache data for this query, party information can move quite quickly
-    fetchPolicy: 'network-only',
-    variables: { partyId: partyId },
-    skip: !partyId,
-  });
-
-  const p = partyRes.data?.partiesConnection?.edges[0].node;
-
-  const linkedLength = p?.stakingSummary?.linkings?.edges?.length;
-  const linkedStake =
-    linkedLength && linkedLength > 0
-      ? p?.stakingSummary?.linkings?.edges
-          ?.reduce((total, e) => {
-            return new BigNumber(total).plus(
-              new BigNumber(e?.node.amount || 0)
-            );
-          }, new BigNumber(0))
-          .toString()
-      : '0';
-
-  return (
-    <PartyBlock title={t('Staking')}>
-      {p?.stakingSummary.currentStakeAvailable ? (
-        <KeyValueTable>
-          <KeyValueTableRow noBorder={true}>
-            <div>{t('Available stake')}</div>
-            <div>
-              <GovernanceAssetBalance
-                price={p.stakingSummary.currentStakeAvailable}
-              />
-            </div>
-          </KeyValueTableRow>
-          <KeyValueTableRow noBorder={true}>
-            <div>{t('Active stake')}</div>
-            <div>
-              <GovernanceAssetBalance price={linkedStake || '0'} />
-            </div>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      ) : accountLoading && !accountError ? (
-        <Loader size="small" />
-      ) : !accountError ? (
-        <p>{t('No staking balance')}</p>
-      ) : (
-        <p>
-          <Icon className="mr-1" name="error" />
-          <span className="text-sm">{t('Could not load stake details')}</span>
-        </p>
-      )}
-    </PartyBlock>
-  );
-};

apps/explorer/src/app/routes/parties/id/components/party-block.tsx

@@ -1,24 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface PartyBlockProps {
-  children: ReactNode;
-  title: string;
-  action?: ReactNode;
-}
-
-export function PartyBlock({ children, title, action }: PartyBlockProps) {
-  return (
-    <div className="border-2 min-h-[138px] border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
-      <div
-        className="flex flex-col md:flex-row gap-1 justify-between content-start mb-2"
-        data-testid="page-title"
-      >
-        <h3 className="font-semibold text-lg">{title}</h3>
-
-        {action ? action : null}
-      </div>
-
-      {children}
-    </div>
-  );
-}

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -1,26 +1,24 @@
+import { getNodes } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { SubHeading } from '../../../components/sub-heading';
+import { Panel } from '../../../components/panel';
 import { toNonHex } from '../../../components/search/detect-search';
 import { useTxsData } from '../../../hooks/use-txs-data';
 import { TxsInfiniteList } from '../../../components/txs';
 import { PageHeader } from '../../../components/page-header';
+import { useExplorerPartyAssetsQuery } from './__generated__/Party-assets';
+import type { ExplorerPartyAssetsAccountsFragment } from './__generated__/Party-assets';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
-import { Icon, Intent, Notification, Splash } from '@vegaprotocol/ui-toolkit';
+import GovernanceAssetBalance from '../../../components/asset-balance/governance-asset-balance';
-import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
+import { PartyAccounts } from './components/party-accounts';
-import { PartyBlockStake } from './components/party-block-stake';
-import { PartyBlockAccounts } from './components/party-block-accounts';
-import { isValidPartyId } from './components/party-id-error';
-import { useDataProvider } from '@vegaprotocol/data-provider';
 
 const Party = () => {
   const { party } = useParams<{ party: string }>();
 
   useDocumentTitle(['Public keys', party || '-']);
-  const navigate = useNavigate();
-
   const partyId = toNonHex(party ? party : '');
   const { isMobile } = useScreenDimensions();
   const visibleChars = useMemo(() => (isMobile ? 10 : 14), [isMobile]);
@@ -30,72 +28,71 @@ const Party = () => {
     filters,
   });
 
-  const variables = useMemo(() => ({ partyId }), [partyId]);
+  const partyRes = useExplorerPartyAssetsQuery({
-  const {
+    // Don't cache data for this query, party information can move quite quickly
-    data: AccountData,
+    fetchPolicy: 'network-only',
-    loading: AccountLoading,
+    variables: { partyId: partyId },
-    error: AccountError,
+    skip: !party,
-  } = useDataProvider({
-    dataProvider: aggregatedAccountsDataProvider,
-    variables,
   });
 
-  if (!isValidPartyId(partyId)) {
+  const p = partyRes.data?.partiesConnection?.edges[0].node;
-    return (
+
-      <div className="max-w-sm mx-auto">
+  const header = p?.id ? (
-        <Notification
+    <PageHeader
-          message={t('Invalid party ID')}
+      title={p.id}
-          intent={Intent.Danger}
+      copy
-          buttonProps={{
+      truncateStart={visibleChars}
-            text: t('Go back'),
+      truncateEnd={visibleChars}
-            action: () => navigate(-1),
+    />
-            className: 'py-1',
+  ) : (
-            size: 'sm',
+    <Panel>
-          }}
+      <p>No data found for public key {party}</p>
-        />
+    </Panel>
-      </div>
+  );
-    );
+
-  }
+  const staking = (
+    <section>
+      {p?.stakingSummary?.currentStakeAvailable ? (
+        <div className="mt-4 leading-3">
+          <strong className="font-semibold">{t('Staking Balance: ')}</strong>
+          <GovernanceAssetBalance
+            price={p.stakingSummary.currentStakeAvailable}
+          />
+        </div>
+      ) : null}
+    </section>
+  );
+
+  const accounts = getNodes<ExplorerPartyAssetsAccountsFragment>(
+    p?.accountsConnection
+  );
 
   return (
     <section>
-      <PageHeader
+      <h1
-        title={partyId}
+        className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
-        copy
+        data-testid="parties-header"
-        truncateStart={visibleChars}
+      >
-        truncateEnd={visibleChars}
+        {t('Public key')}
-      />
+      </h1>
+      {partyRes.data ? (
+        <>
+          {header}
+          <SubHeading>{t('Asset data')}</SubHeading>
+          {accounts ? <PartyAccounts accounts={accounts} /> : null}
+          {staking}
 
-      <div className="grid md:grid-flow-col grid-flow-row md:space-x-4 grid-cols-1 md:grid-cols-2 w-full">
+          <SubHeading>{t('Transactions')}</SubHeading>
-        <PartyBlockAccounts
+          <TxsInfiniteList
-          accountError={AccountError}
+            hasMoreTxs={hasMoreTxs}
-          accountLoading={AccountLoading}
+            areTxsLoading={loading}
-          accountData={AccountData}
+            txs={txsData}
-          partyId={partyId}
+            loadMoreTxs={loadTxs}
-        />
+            error={error}
-        <PartyBlockStake
+            className="mb-28"
-          accountError={AccountError}
+          />
-          accountLoading={AccountLoading}
+        </>
-          partyId={partyId}
+      ) : null}
-        />
-      </div>
-
-      <SubHeading>{t('Transactions')}</SubHeading>
-      {!error && txsData ? (
-        <TxsInfiniteList
-          hasMoreTxs={hasMoreTxs}
-          areTxsLoading={loading}
-          txs={txsData}
-          loadMoreTxs={loadTxs}
-          error={error}
-          className="mb-28"
-        />
-      ) : (
-        <Splash>
-          <Icon name="error" className="mr-1" />
-          &nbsp;{t('Could not load transaction list for party')}
-        </Splash>
-      )}
     </section>
   );
 };

apps/explorer/src/app/routes/parties/id/template.tsx

@@ -1,7 +0,0 @@
-import { Outlet } from 'react-router-dom';
-
-const PartiesSubPage = () => {
-  return <Outlet />;
-};
-
-export default PartiesSubPage;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DATA_SOURCES } from '../../config';
+import type { TendermintUnconfirmedTransactionsResponse } from '../txs/tendermint-unconfirmed-transactions-response.d';
+import { TxList } from '../../components/txs';
+import { RouteTitle } from '../../components/route-title';
+import { t } from '@vegaprotocol/i18n';
+import { useFetch } from '@vegaprotocol/react-helpers';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+
+const PendingTxs = () => {
+  const {
+    state: { data: unconfirmedTransactions },
+  } = useFetch<TendermintUnconfirmedTransactionsResponse>(
+    `${DATA_SOURCES.tendermintUrl}/unconfirmed_txs`
+  );
+
+  useDocumentTitle(['Pending transactions']);
+
+  return (
+    <section>
+      <RouteTitle data-testid="unconfirmed-transactions-header">
+        {t('Unconfirmed transactions')}
+      </RouteTitle>
+      <br />
+      <div>{t(`Number: ${unconfirmedTransactions?.result?.n_txs || 0}`)}</div>
+      <br />
+      <div>
+        <br />
+        <TxList data={unconfirmedTransactions} />
+      </div>
+    </section>
+  );
+};
+
+export { PendingTxs };

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

@@ -8,66 +8,35 @@ import { Oracle } from './oracles/id';
 import Party from './parties';
 import { Parties } from './parties/home';
 import { Party as PartySingle } from './parties/id';
+import Txs from './txs';
 import { ValidatorsPage } from './validators';
 import Genesis from './genesis';
 import { Block } from './blocks/id';
 import { Blocks } from './blocks/home';
 import { Tx } from './txs/id';
 import { TxsList } from './txs/home';
+import { PendingTxs } from './pending';
 import flags from '../config/flags';
 import { t } from '@vegaprotocol/i18n';
 import { Routes } from './route-names';
 import { NetworkParameters } from './network-parameters';
-import type { Params, RouteObject } from 'react-router-dom';
+import type { RouteObject } from 'react-router-dom';
-import { createBrowserRouter } from 'react-router-dom';
-import { Link } from 'react-router-dom';
 import { MarketPage, MarketsPage } from './markets';
-import type { ReactNode } from 'react';
-import { ErrorBoundary, Layout } from './layout';
-import compact from 'lodash/compact';
-import { AssetLink, MarketLink } from '../components/links';
-import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
-import { remove0x } from '@vegaprotocol/utils';
-import { PartyAccountsByAsset } from './parties/id/accounts';
 
 export type Navigable = {
   path: string;
-  handle: {
+  name: string;
-    name: string;
+  text: string;
-    text: string;
-  };
-};
-export const isNavigable = (item: RouteObject): item is Navigable =>
-  (item as Navigable).path !== undefined &&
-  (item as Navigable).handle !== undefined &&
-  (item as Navigable).handle.name !== undefined &&
-  (item as Navigable).handle.text !== undefined;
-
-export type Breadcrumbable = {
-  handle: { breadcrumb: (data?: Params<string>) => ReactNode | string };
-};
-export const isBreadcrumbable = (item: RouteObject): item is Breadcrumbable =>
-  (item as Breadcrumbable).handle !== undefined &&
-  (item as Breadcrumbable).handle.breadcrumb !== undefined;
-
-type RouteItem =
-  | RouteObject
-  | (RouteObject & Navigable)
-  | (RouteObject & Breadcrumbable);
-type Route = RouteItem & {
-  children?: RouteItem[];
 };
+type Route = RouteObject & Navigable;
 
 const partiesRoutes: Route[] = flags.parties
   ? [
       {
         path: Routes.PARTIES,
+        name: t('Parties'),
+        text: t('Parties'),
         element: <Party />,
-        handle: {
-          name: t('Parties'),
-          text: t('Parties'),
-          breadcrumb: () => <Link to={Routes.PARTIES}>{t('Parties')}</Link>,
-        },
         children: [
           {
             index: true,
@@ -75,43 +44,7 @@ const partiesRoutes: Route[] = flags.parties
           },
           {
             path: ':party',
-            element: <Party />,
+            element: <PartySingle />,
-
-            children: [
-              {
-                index: true,
-                element: <PartySingle />,
-                handle: {
-                  breadcrumb: (params: Params<string>) => (
-                    <Link to={linkTo(Routes.PARTIES, params.party)}>
-                      {truncateMiddle(params.party as string)}
-                    </Link>
-                  ),
-                },
-              },
-              {
-                path: 'assets',
-                element: <Party />,
-                handle: {
-                  breadcrumb: (params: Params<string>) => (
-                    <Link to={linkTo(Routes.PARTIES, params.party)}>
-                      {truncateMiddle(params.party as string)}
-                    </Link>
-                  ),
-                },
-                children: [
-                  {
-                    index: true,
-                    element: <PartyAccountsByAsset />,
-                    handle: {
-                      breadcrumb: () => {
-                        return t('Assets');
-                      },
-                    },
-                  },
-                ],
-              },
-            ],
           },
         ],
       },
@@ -122,11 +55,8 @@ const assetsRoutes: Route[] = flags.assets
   ? [
       {
         path: Routes.ASSETS,
-        handle: {
+        text: t('Assets'),
-          name: t('Assets'),
+        name: t('Assets'),
-          text: t('Assets'),
-          breadcrumb: () => <Link to={Routes.ASSETS}>{t('Assets')}</Link>,
-        },
         children: [
           {
             index: true,
@@ -135,11 +65,6 @@ const assetsRoutes: Route[] = flags.assets
           {
             path: ':assetId',
             element: <AssetPage />,
-            handle: {
-              breadcrumb: (params: Params<string>) => (
-                <AssetLink assetId={params.assetId as string} />
-              ),
-            },
           },
         ],
       },
@@ -150,13 +75,8 @@ const genesisRoutes: Route[] = flags.genesis
   ? [
       {
         path: Routes.GENESIS,
-        handle: {
+        name: t('Genesis'),
-          name: t('Genesis'),
+        text: t('Genesis Parameters'),
-          text: t('Genesis Parameters'),
-          breadcrumb: () => (
-            <Link to={Routes.GENESIS}>{t('Genesis Parameters')}</Link>
-          ),
-        },
         element: <Genesis />,
       },
     ]
@@ -166,13 +86,8 @@ const governanceRoutes: Route[] = flags.governance
   ? [
       {
         path: Routes.GOVERNANCE,
-        handle: {
+        name: t('Governance proposals'),
-          name: t('Governance proposals'),
+        text: t('Governance Proposals'),
-          text: t('Governance Proposals'),
-          breadcrumb: () => (
-            <Link to={Routes.GOVERNANCE}>{t('Governance Proposals')}</Link>
-          ),
-        },
         element: <Proposals />,
       },
     ]
@@ -182,11 +97,8 @@ const marketsRoutes: Route[] = flags.markets
   ? [
       {
         path: Routes.MARKETS,
-        handle: {
+        name: t('Markets'),
-          name: t('Markets'),
+        text: t('Markets'),
-          text: t('Markets'),
-          breadcrumb: () => <Link to={Routes.MARKETS}>{t('Markets')}</Link>,
-        },
         children: [
           {
             index: true,
@@ -195,11 +107,6 @@ const marketsRoutes: Route[] = flags.markets
           {
             path: ':marketId',
             element: <MarketPage />,
-            handle: {
-              breadcrumb: (params: Params<string>) => (
-                <MarketLink id={params.marketId as string} />
-              ),
-            },
           },
         ],
       },
@@ -210,15 +117,8 @@ const networkParametersRoutes: Route[] = flags.networkParameters
   ? [
       {
         path: Routes.NETWORK_PARAMETERS,
-        handle: {
+        name: t('NetworkParameters'),
-          name: t('NetworkParameters'),
+        text: t('Network Parameters'),
-          text: t('Network Parameters'),
-          breadcrumb: () => (
-            <Link to={Routes.NETWORK_PARAMETERS}>
-              {t('Network Parameters')}
-            </Link>
-          ),
-        },
         element: <NetworkParameters />,
       },
     ]
@@ -228,122 +128,80 @@ const validators: Route[] = flags.validators
   ? [
       {
         path: Routes.VALIDATORS,
-        handle: {
+        name: t('Validators'),
-          name: t('Validators'),
+        text: t('Validators'),
-          text: t('Validators'),
-          breadcrumb: () => (
-            <Link to={Routes.VALIDATORS}>{t('Validators')}</Link>
-          ),
-        },
         element: <ValidatorsPage />,
       },
     ]
   : [];
 
-const linkTo = (...segments: (string | undefined)[]) =>
+const routerConfig: Route[] = [
-  compact(segments).join('/');
-
-export const routerConfig: Route[] = [
   {
     path: Routes.HOME,
-    element: <Layout />,
+    name: t('Home'),
-    handle: {
+    text: t('Home'),
-      name: t('Home'),
+    element: <Home />,
-      text: t('Home'),
+    index: true,
-      breadcrumb: () => <Link to={Routes.HOME}>{t('Home')}</Link>,
+  },
-    },
+  {
-    errorElement: <ErrorBoundary />,
+    path: Routes.TX,
+    name: t('Txs'),
+    text: t('Transactions'),
+    element: <Txs />,
+    children: [
+      {
+        path: 'pending',
+        element: <PendingTxs />,
+      },
+      {
+        path: ':txHash',
+        element: <Tx />,
+      },
+      {
+        index: true,
+        element: <TxsList />,
+      },
+    ],
+  },
+  {
+    path: Routes.BLOCKS,
+    name: t('Blocks'),
+    text: t('Blocks'),
+    element: <BlockPage />,
     children: [
       {
         index: true,
-        element: <Home />,
+        element: <Blocks />,
       },
       {
-        path: Routes.TX,
+        path: ':block',
-        handle: {
+        element: <Block />,
-          name: t('Txs'),
-          text: t('Transactions'),
-          breadcrumb: () => <Link to={Routes.TX}>{t('Transactions')}</Link>,
-        },
-        children: [
-          {
-            path: ':txHash',
-            element: <Tx />,
-            handle: {
-              breadcrumb: (params: Params<string>) => (
-                <Link to={linkTo(Routes.TX, params.txHash)}>
-                  {truncateMiddle(remove0x(params.txHash as string))}
-                </Link>
-              ),
-            },
-          },
-          {
-            index: true,
-            element: <TxsList />,
-          },
-        ],
       },
-      {
-        path: Routes.BLOCKS,
-        handle: {
-          name: t('Blocks'),
-          text: t('Blocks'),
-          breadcrumb: () => <Link to={Routes.BLOCKS}>{t('Blocks')}</Link>,
-        },
-        element: <BlockPage />,
-        children: [
-          {
-            index: true,
-            element: <Blocks />,
-          },
-          {
-            path: ':block',
-            element: <Block />,
-            handle: {
-              breadcrumb: (params: Params<string>) => (
-                <Link to={linkTo(Routes.BLOCKS, params.block)}>
-                  {params.block}
-                </Link>
-              ),
-            },
-          },
-        ],
-      },
-      {
-        path: Routes.ORACLES,
-        handle: {
-          name: t('Oracles'),
-          text: t('Oracles'),
-          breadcrumb: () => <Link to={Routes.ORACLES}>{t('Oracles')}</Link>,
-        },
-        element: <OraclePage />,
-        children: [
-          {
-            index: true,
-            element: <Oracles />,
-          },
-          {
-            path: ':id',
-            element: <Oracle />,
-            handle: {
-              breadcrumb: (params: Params<string>) => (
-                <Link to={linkTo(Routes.ORACLES, params.id)}>
-                  {truncateMiddle(params.id as string)}
-                </Link>
-              ),
-            },
-          },
-        ],
-      },
-      ...partiesRoutes,
-      ...assetsRoutes,
-      ...genesisRoutes,
-      ...governanceRoutes,
-      ...marketsRoutes,
-      ...networkParametersRoutes,
-      ...validators,
     ],
   },
+  {
+    path: Routes.ORACLES,
+    name: t('Oracles'),
+    text: t('Oracles'),
+    element: <OraclePage />,
+    children: [
+      {
+        index: true,
+        element: <Oracles />,
+      },
+      {
+        path: ':id',
+        element: <Oracle />,
+      },
+    ],
+  },
+  ...partiesRoutes,
+  ...assetsRoutes,
+  ...genesisRoutes,
+  ...governanceRoutes,
+  ...marketsRoutes,
+  ...networkParametersRoutes,
+  ...validators,
 ];
 
-export const router = createBrowserRouter(routerConfig);
+export default routerConfig;

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

@@ -1,4 +1,5 @@
-import { useParams } from 'react-router-dom';
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
 import { remove0x } from '@vegaprotocol/utils';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { DATA_SOURCES } from '../../../config';
@@ -7,6 +8,9 @@ import { TxDetails } from './tx-details';
 import type { BlockExplorerTransaction } from '../../../routes/types/block-explorer-response';
 import { toNonHex } from '../../../components/search/detect-search';
 import { PageHeader } from '../../../components/page-header';
+import { Routes } from '../../../routes/route-names';
+import { IconNames } from '@blueprintjs/icons';
+import { Icon } from '@vegaprotocol/ui-toolkit';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
 const Tx = () => {
@@ -18,7 +22,6 @@ const Tx = () => {
 
   const {
     state: { data, loading, error },
-    refetch,
   } = useFetch<BlockExplorerTransaction>(
     `${DATA_SOURCES.blockExplorerUrl}/transactions/${toNonHex(hash)}`
   );
@@ -31,6 +34,17 @@ const Tx = () => {
 
   return (
     <section>
+      <Link
+        className="font-normal underline underline-offset-4 block mb-5"
+        to={`/${Routes.TX}`}
+      >
+        <Icon
+          className="text-vega-light-150 dark:text-vega-light-150"
+          name={IconNames.CHEVRON_LEFT}
+        />
+        All Transactions
+      </Link>
+
       <PageHeader
         title="transaction"
         truncateStart={5}
@@ -42,7 +56,6 @@ const Tx = () => {
         error={error}
         loading={loading}
         errorMessage={errorMessage}
-        refetch={refetch}
       >
         <TxDetails
           className="mb-28"

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -10,7 +10,7 @@ interface TxDetailsProps {
 
 export const txDetailsTruncateLength = 30;
 
-export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
+export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
   if (!txData) {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }

apps/explorer/src/app/routes/validators/validators-page.tsx

@@ -21,14 +21,13 @@ import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { PageTitle } from '../../components/page-helpers/page-title';
 import BigNumber from 'bignumber.js';
 import {
-  EtherscanLink,
+  ContractAddressLink,
   DApp,
   TOKEN_VALIDATOR,
   useLinks,
 } from '@vegaprotocol/environment';
 import classNames from 'classnames';
 import { NodeStatus, NodeStatusMapping } from '@vegaprotocol/types';
-import { PartyLink } from '../../components/links';
 
 type RateProps = {
   value: BigNumber | number | undefined;
@@ -192,9 +191,7 @@ export const ValidatorsPage = () => {
                       <KeyValueTable>
                         <KeyValueTableRow>
                           <div>{t('ID')}</div>
-                          <div className="break-all text-xs font-mono">
+                          <div className="break-all text-xs">{v.id}</div>
-                            {v.id}
-                          </div>
                         </KeyValueTableRow>
                         <KeyValueTableRow>
                           <div>{t('Status')}</div>
@@ -221,15 +218,13 @@ export const ValidatorsPage = () => {
                           </div>
                         </KeyValueTableRow>
                         <KeyValueTableRow>
-                          <div>{t('Key')}</div>
+                          <div>{t('Public key')}</div>
-                          <div className="break-all text-xs">
+                          <div className="break-all text-xs">{v.pubkey}</div>
-                            <PartyLink id={v.pubkey} />
-                          </div>
                         </KeyValueTableRow>
                         <KeyValueTableRow>
                           <div>{t('Ethereum address')}</div>
-                          <div className="break-all text-xs font-mono">
+                          <div className="break-all text-xs">
-                            <EtherscanLink address={v.ethereumAddress} />{' '}
+                            <ContractAddressLink address={v.ethereumAddress} />{' '}
                             <CopyWithTooltip text={v.ethereumAddress}>
                               <button title={t('Copy address to clipboard')}>
                                 <Icon size={3} name="duplicate" />
@@ -239,9 +234,7 @@ export const ValidatorsPage = () => {
                         </KeyValueTableRow>
                         <KeyValueTableRow>
                           <div>{t('Tendermint public key')}</div>
-                          <div className="break-all text-xs font-mono">
+                          <div className="break-all text-xs">{v.tmPubkey}</div>
-                            {v.tmPubkey}
-                          </div>
                         </KeyValueTableRow>
 
                         <KeyValueTableRow>

apps/explorer/src/main.tsx

@@ -1,4 +1,5 @@
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './styles.css';
 
 import App from './app/app';
@@ -9,6 +10,8 @@ const root = rootElement && createRoot(rootElement);
 
 root?.render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

apps/explorer/src/styles.css

@@ -1,7 +1,3 @@
-@import 'ag-grid-community/dist/styles/ag-grid.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham.css';
-@import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
-
 /* You can add global styles to this file, and also import other style files */
 @tailwind base;
 @tailwind components;
@@ -15,48 +11,3 @@
 .react-markdown-container a:before {
   content: '🔗 ';
 }
-
-/* AG GRID - Do not edit without updating other global stylesheets for each app */
-
-.vega-ag-grid .ag-root-wrapper {
-  border: solid 0px;
-}
-
-.vega-ag-grid .ag-react-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.vega-ag-grid .ag-cell,
-.vega-ag-grid .ag-full-width-row .ag-cell-wrapper.ag-row-group {
-  line-height: calc(min(var(--ag-line-height, 26px), 26px) - 4px);
-}
-
-.vega-ag-grid .ag-row {
-  border-width: 1px 0;
-  border-bottom: 1px solid transparent;
-}
-
-/* Light variables */
-.ag-theme-balham {
-  --ag-background-color: theme(colors.white);
-  --ag-border-color: theme(colors.neutral[300]);
-  --ag-header-background-color: theme(colors.white);
-  --ag-odd-row-background-color: theme(colors.white);
-  --ag-header-column-separator-color: theme(colors.neutral[300]);
-  --ag-row-border-color: theme(colors.white);
-  --ag-row-hover-color: theme(colors.neutral[100]);
-  --ag-font-size: 12px;
-}
-
-/* Dark variables */
-.ag-theme-balham-dark {
-  --ag-background-color: theme(colors.black);
-  --ag-border-color: theme(colors.neutral[700]);
-  --ag-header-background-color: theme(colors.black);
-  --ag-odd-row-background-color: theme(colors.black);
-  --ag-header-column-separator-color: theme(colors.neutral[600]);
-  --ag-row-border-color: theme(colors.black);
-  --ag-row-hover-color: theme(colors.neutral[800]);
-  --ag-font-size: 12px;
-}

apps/governance-e2e/.env

@@ -5,22 +5,18 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_FAIRGROUND=false
 NX_VEGA_NETWORKS={}
 
-NX_VEGA_URL=http://localhost:3008/graphql
+NX_VEGA_URL=http://localhost:3028/query
 NX_ETHEREUM_CHAIN_ID=1440
 NX_ETH_URL_CONNECT=1
 NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session
 NX_LOCAL_PROVIDER_URL=http://localhost:8545/
-NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
-NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
-NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false
-CYPRESS_VEGA_URL=http://localhost:3008/graphql
+CYPRESS_VEGA_URL=http://localhost:3028/query
 CYPRESS_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session
 CYPRESS_ETHEREUM_PROVIDER_URL=http://localhost:8545
 CYPRESS_EXPLORER_URL=https://explorer.fairground.wtf
@@ -30,6 +26,7 @@ CYPRESS_TRUNCATED_VEGA_PUBLIC_KEY2=7f9cf0…c25535
 CYPRESS_VEGA_ENV=CUSTOM
 CYPRESS_VEGA_PUBLIC_KEY=02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65
 CYPRESS_VEGA_PUBLIC_KEY2=7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535
-CYPRESS_VEGA_TOKEN_URL=https://governance.fairground.wtf
+CYPRESS_VEGA_TOKEN_URL=https://token.fairground.wtf
+CYPRESS_VEGA_URL=http://localhost:3028/query
 CYPRESS_VEGA_WALLET_URL=http://localhost:1789
 CYPRESS_VEGA_WALLET_API_TOKEN=