From ae37f76b1c63293747bcdcbc7143f268ebdce36f Mon Sep 17 00:00:00 2001
From: Dexter Edwards <dexter.edwards93@gmail.com>
Date: Wed, 23 Mar 2022 09:57:51 +0000
Subject: [PATCH] Search implementation (#97)

* make titles look prettier

* link to parties from transactions table

* render what data is found conditionally

* more syntax highlighting

* re-jig file orders

* remove footer component for now

* add subheading component

* adjust column layout

* Style up header

* enable ligatures

* change env files

* fix error if data is null

* show governance header even if there is no data

* remove dead css

* add dark theme for block explorer

* use memo on parties submit

* remove some css from header

* basic search implementation

* allow passing classNames to form group

* add tests for form group

* add form-grpup stories

* bad rebase fixes

* add link

* tidy up tests

* fix tests

* tidy up env files

* final test fixes

* switch order of classes

* fix test id

* force build for testing

* rename file for linting

* add tests for header component

* rename export

* input error tests

* use descriptive function names as per PR comment

* fix casing issue for CI

* handle empty state

* make query easier to understand
---
 apps/explorer-e2e/.env.devent                 |  20 ---
 apps/explorer-e2e/.env.mainnet                |  21 ---
 apps/explorer-e2e/.env.stagnet1               |  21 ---
 apps/explorer-e2e/.env.stagnet2               |  20 ---
 apps/explorer-e2e/.env.testnet                |  20 ---
 .../src/support/pages/network-page.js         |   2 +-
 .../src/support/pages/transactions-page.js    |   2 +-
 apps/explorer/.env                            |   7 -
 apps/explorer/.env.devent                     |  29 ----
 apps/explorer/.env.local                      |  14 ++
 apps/explorer/.env.mainnet                    |  29 ----
 apps/explorer/.env.stagnet1                   |  30 ----
 apps/explorer/.env.stagnet2                   |  29 ----
 apps/explorer/.env.testnet                    |  29 ----
 apps/explorer/jest.config.js                  |   2 +-
 apps/explorer/src/app/App.scss                |  14 +-
 apps/explorer/src/app/app.spec.tsx            |   2 +-
 apps/explorer/src/app/app.tsx                 |   2 -
 .../src/app/components/footer/index.tsx       |  15 --
 .../src/app/components/header/header.spec.tsx |  28 ++++
 .../src/app/components/header/header.tsx      |  12 ++
 .../src/app/components/header/index.tsx       |  10 +-
 .../app/components/jump-to-block/index.tsx    |  13 +-
 .../src/app/components/route-title/index.tsx  |  16 +-
 .../src/app/components/search/index.tsx       | 109 +-------------
 .../src/app/components/search/search.spec.tsx | 140 ++++++++++++++++++
 .../src/app/components/search/search.tsx      |  84 +++++++++++
 .../src/app/components/sub-heading/index.tsx  |  27 ++++
 .../txs/{home => }/block-txs-data.tsx         |   6 +-
 .../explorer/src/app/components/txs/index.tsx |   7 +-
 .../components/txs/{pending => }/tx-list.tsx  |   2 +-
 .../index.tsx => tx-order-type.tsx}           |   0
 .../index.tsx => txs-per-block.tsx}           |  65 ++++----
 apps/explorer/src/app/hooks/use-fetch.tsx     |   2 +-
 apps/explorer/src/app/routes/assets/index.tsx |   8 +-
 .../src/app/routes/blocks/id/index.tsx        |   2 +-
 .../explorer/src/app/routes/genesis/index.tsx |   3 +-
 .../src/app/routes/governance/index.tsx       |  11 +-
 .../explorer/src/app/routes/markets/index.tsx |  21 ++-
 .../app/routes/network-parameters/index.tsx   |   8 +-
 .../src/app/routes/parties/home/index.tsx     |  56 ++++++-
 .../src/app/routes/parties/id/index.tsx       |  27 +++-
 .../explorer/src/app/routes/pending/index.tsx |   5 +-
 apps/explorer/src/app/routes/txs/id/index.tsx |   3 +-
 .../txs/id/tx-content.tsx                     |  13 +-
 .../txs/id/tx-details.tsx                     |   9 +-
 .../src/app/routes/validators/index.tsx       |  25 +++-
 .../src/app/{setupTests.ts => setup-tests.ts} |   0
 apps/explorer/src/app/styles/_reset.scss      |   6 -
 apps/explorer/src/index.html                  |   2 +-
 apps/explorer/tsconfig.spec.json              |   2 +-
 libs/ui-toolkit/jest.config.js                |   1 +
 .../components/callout/callout.stories.tsx    |   5 +
 .../src/components/callout/callout.test.tsx   |   1 -
 .../etherscan-link/etherscan-link.test.tsx    |   1 -
 .../components/form-group/form-group.spec.tsx |  32 ++++
 .../src/components/form-group/form-group.tsx  |  32 ++++
 .../form-group/from-group.stories.tsx         |  30 ++++
 .../src/components/form-group/index.tsx       |  31 +---
 .../components/input-error/input-error.tsx    |   6 +-
 libs/ui-toolkit/src/setup-tests.ts            |   5 +
 61 files changed, 639 insertions(+), 535 deletions(-)
 create mode 100644 apps/explorer/.env.local
 delete mode 100644 apps/explorer/src/app/components/footer/index.tsx
 create mode 100644 apps/explorer/src/app/components/header/header.spec.tsx
 create mode 100644 apps/explorer/src/app/components/header/header.tsx
 create mode 100644 apps/explorer/src/app/components/search/search.spec.tsx
 create mode 100644 apps/explorer/src/app/components/search/search.tsx
 create mode 100644 apps/explorer/src/app/components/sub-heading/index.tsx
 rename apps/explorer/src/app/components/txs/{home => }/block-txs-data.tsx (83%)
 rename apps/explorer/src/app/components/txs/{pending => }/tx-list.tsx (83%)
 rename apps/explorer/src/app/components/txs/{tx-order-type/index.tsx => tx-order-type.tsx} (100%)
 rename apps/explorer/src/app/components/txs/{txs-per-block/index.tsx => txs-per-block.tsx} (50%)
 rename apps/explorer/src/app/{components => routes}/txs/id/tx-content.tsx (73%)
 rename apps/explorer/src/app/{components => routes}/txs/id/tx-details.tsx (91%)
 rename apps/explorer/src/app/{setupTests.ts => setup-tests.ts} (100%)
 delete mode 100644 apps/explorer/src/app/styles/_reset.scss
 create mode 100644 libs/ui-toolkit/src/components/form-group/form-group.spec.tsx
 create mode 100644 libs/ui-toolkit/src/components/form-group/form-group.tsx
 create mode 100644 libs/ui-toolkit/src/components/form-group/from-group.stories.tsx
 create mode 100644 libs/ui-toolkit/src/setup-tests.ts

diff --git a/apps/explorer-e2e/.env.devent b/apps/explorer-e2e/.env.devent
index a852aa565..996011a8e 100644
--- a/apps/explorer-e2e/.env.devent
+++ b/apps/explorer-e2e/.env.devent
@@ -1,23 +1,3 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://n04.d.vega.xyz/tm"
diff --git a/apps/explorer-e2e/.env.mainnet b/apps/explorer-e2e/.env.mainnet
index 9fedccbba..13b74ef15 100644
--- a/apps/explorer-e2e/.env.mainnet
+++ b/apps/explorer-e2e/.env.mainnet
@@ -1,23 +1,3 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://mainnet-observer-proxy01.ops.vega.xyz/"
@@ -28,7 +8,6 @@ NX_VEGA_URL = "https://api.token.vega.xyz/query"
 NX_EXPLORER_ASSETS = 1
 NX_EXPLORER_GENESIS = 1
 NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
 NX_EXPLORER_NETWORK_PARAMETERS = 1
 NX_EXPLORER_PARTIES = 1
 NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer-e2e/.env.stagnet1 b/apps/explorer-e2e/.env.stagnet1
index 3abca14e7..871afdc6d 100644
--- a/apps/explorer-e2e/.env.stagnet1
+++ b/apps/explorer-e2e/.env.stagnet1
@@ -1,30 +1,9 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://n03.s.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.s.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
 
-
 # App flags
 NX_EXPLORER_ASSETS = 1
 NX_EXPLORER_GENESIS = 1
diff --git a/apps/explorer-e2e/.env.stagnet2 b/apps/explorer-e2e/.env.stagnet2
index 5499a2a6b..e4cbaab0d 100644
--- a/apps/explorer-e2e/.env.stagnet2
+++ b/apps/explorer-e2e/.env.stagnet2
@@ -1,23 +1,3 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://n03.stagnet2.vega.xyz/tm"
diff --git a/apps/explorer-e2e/.env.testnet b/apps/explorer-e2e/.env.testnet
index 56370f422..5b296d196 100644
--- a/apps/explorer-e2e/.env.testnet
+++ b/apps/explorer-e2e/.env.testnet
@@ -1,23 +1,3 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
diff --git a/apps/explorer-e2e/src/support/pages/network-page.js b/apps/explorer-e2e/src/support/pages/network-page.js
index faa2b0d32..963e0e1ad 100644
--- a/apps/explorer-e2e/src/support/pages/network-page.js
+++ b/apps/explorer-e2e/src/support/pages/network-page.js
@@ -7,7 +7,7 @@ export default class NetworkParametersPage extends BasePage {
   verifyNetworkParametersDisplayed() {
     cy.getByTestId(this.networkParametersHeader).should(
       'have.text',
-      'NetworkParameters'
+      'Network Parameters'
     );
     cy.getByTestId(this.parameters).should('not.be.empty');
   }
diff --git a/apps/explorer-e2e/src/support/pages/transactions-page.js b/apps/explorer-e2e/src/support/pages/transactions-page.js
index c7187c364..da8d4e47f 100644
--- a/apps/explorer-e2e/src/support/pages/transactions-page.js
+++ b/apps/explorer-e2e/src/support/pages/transactions-page.js
@@ -77,6 +77,6 @@ export default class TransactionsPage extends BasePage {
   }
 
   clickOnTopTransaction() {
-    cy.getByTestId(this.transactionRow).first().find('a').click();
+    cy.getByTestId(this.transactionRow).first().find('a').first().click();
   }
 }
diff --git a/apps/explorer/.env b/apps/explorer/.env
index 56370f422..123a0c798 100644
--- a/apps/explorer/.env
+++ b/apps/explorer/.env
@@ -18,17 +18,10 @@ NX_URL=$URL
 NX_DEPLOY_URL=$DEPLOY_URL
 NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
 
-# App configuration variables
-NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
-NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
-NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
-NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
-
 # App flags
 NX_EXPLORER_ASSETS = 1
 NX_EXPLORER_GENESIS = 1
 NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
 NX_EXPLORER_NETWORK_PARAMETERS = 1
 NX_EXPLORER_PARTIES = 1
 NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/.env.devent b/apps/explorer/.env.devent
index a852aa565..3af139aa8 100644
--- a/apps/explorer/.env.devent
+++ b/apps/explorer/.env.devent
@@ -1,34 +1,5 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://n04.d.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n04.d.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n04.d.vega.xyz/query"
-
-# App flags
-NX_EXPLORER_ASSETS = 1
-NX_EXPLORER_GENESIS = 1
-NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
-NX_EXPLORER_NETWORK_PARAMETERS = 1
-NX_EXPLORER_PARTIES = 1
-NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/.env.local b/apps/explorer/.env.local
new file mode 100644
index 000000000..5b296d196
--- /dev/null
+++ b/apps/explorer/.env.local
@@ -0,0 +1,14 @@
+# App configuration variables
+NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
+NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
+NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
+NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+
+# App flags
+NX_EXPLORER_ASSETS = 1
+NX_EXPLORER_GENESIS = 1
+NX_EXPLORER_GOVERNANCE = 1
+NX_EXPLORER_MARKETS = 1
+NX_EXPLORER_NETWORK_PARAMETERS = 1
+NX_EXPLORER_PARTIES = 1
+NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/.env.mainnet b/apps/explorer/.env.mainnet
index 9fedccbba..ad8c0ef9d 100644
--- a/apps/explorer/.env.mainnet
+++ b/apps/explorer/.env.mainnet
@@ -1,34 +1,5 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 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.token.vega.xyz/query"
-
-# App flags
-NX_EXPLORER_ASSETS = 1
-NX_EXPLORER_GENESIS = 1
-NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
-NX_EXPLORER_NETWORK_PARAMETERS = 1
-NX_EXPLORER_PARTIES = 1
-NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/.env.stagnet1 b/apps/explorer/.env.stagnet1
index 3abca14e7..83cda47ac 100644
--- a/apps/explorer/.env.stagnet1
+++ b/apps/explorer/.env.stagnet1
@@ -1,35 +1,5 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://n03.s.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.s.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.s.vega.xyz/query"
-
-
-# App flags
-NX_EXPLORER_ASSETS = 1
-NX_EXPLORER_GENESIS = 1
-NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
-NX_EXPLORER_NETWORK_PARAMETERS = 1
-NX_EXPLORER_PARTIES = 1
-NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/.env.stagnet2 b/apps/explorer/.env.stagnet2
index 5499a2a6b..05b15b546 100644
--- a/apps/explorer/.env.stagnet2
+++ b/apps/explorer/.env.stagnet2
@@ -1,34 +1,5 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://n03.stagnet2.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://n03.stagnet2.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
-
-# App flags
-NX_EXPLORER_ASSETS = 1
-NX_EXPLORER_GENESIS = 1
-NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
-NX_EXPLORER_NETWORK_PARAMETERS = 1
-NX_EXPLORER_PARTIES = 1
-NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/.env.testnet b/apps/explorer/.env.testnet
index 56370f422..5218200b8 100644
--- a/apps/explorer/.env.testnet
+++ b/apps/explorer/.env.testnet
@@ -1,34 +1,5 @@
-# React Environment Variables
-# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
-
-# Netlify Environment Variables
-# https://www.netlify.com/docs/continuous-deployment/#environment-variables
-NX_VERSION=$npm_package_version
-NX_REPOSITORY_URL=$REPOSITORY_URL
-NX_BRANCH=$BRANCH
-NX_PULL_REQUEST=$PULL_REQUEST
-NX_HEAD=$HEAD
-NX_COMMIT_REF=$COMMIT_REF
-NX_CONTEXT=$CONTEXT
-NX_REVIEW_ID=$REVIEW_ID
-NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
-NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
-NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
-NX_URL=$URL
-NX_DEPLOY_URL=$DEPLOY_URL
-NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
-
 # App configuration variables
 NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
 NX_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
 NX_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
 NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
-
-# App flags
-NX_EXPLORER_ASSETS = 1
-NX_EXPLORER_GENESIS = 1
-NX_EXPLORER_GOVERNANCE = 1
-NX_EXPLORER_MARKETS = 1
-NX_EXPLORER_NETWORK_PARAMETERS = 1
-NX_EXPLORER_PARTIES = 1
-NX_EXPLORER_VALIDATORS = 1
diff --git a/apps/explorer/jest.config.js b/apps/explorer/jest.config.js
index fcdba1f33..21c4b37c8 100644
--- a/apps/explorer/jest.config.js
+++ b/apps/explorer/jest.config.js
@@ -7,5 +7,5 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/explorer',
-  setupFilesAfterEnv: ['./src/app/setupTests.ts'],
+  setupFilesAfterEnv: ['./src/app/setup-tests.ts'],
 };
diff --git a/apps/explorer/src/app/App.scss b/apps/explorer/src/app/App.scss
index 5f7344309..bc35c4932 100644
--- a/apps/explorer/src/app/App.scss
+++ b/apps/explorer/src/app/App.scss
@@ -1,6 +1,5 @@
 @import './styles/colors';
 @import './styles/fonts';
-@import './styles/reset';
 
 html,
 body,
@@ -39,18 +38,23 @@ body,
     padding: 20px;
     grid-column-start: 1;
     grid-column-end: 1;
-    grid-row-start: 1;
+    grid-row-start: 2;
     grid-row-end: 3;
     overflow: hidden;
   }
 
   header {
-    padding: 20px;
     border-bottom: 1px solid $white;
-    grid-column-start: 2;
-    grid-column-end: 2;
+    grid-column-start: 1;
+    grid-column-end: 3;
     grid-row-start: 1;
     grid-row-end: 2;
+
+    h1 {
+      font-family: $font-alpa-lyrae;
+      font-feature-settings: 'calt';
+      text-transform: uppercase;
+    }
   }
 
   main {
diff --git a/apps/explorer/src/app/app.spec.tsx b/apps/explorer/src/app/app.spec.tsx
index 680a016a5..6bccbf1c8 100644
--- a/apps/explorer/src/app/app.spec.tsx
+++ b/apps/explorer/src/app/app.spec.tsx
@@ -1,4 +1,4 @@
-import App from './App';
+import App from './app';
 
 describe('App', () => {
   it('should exist', () => {
diff --git a/apps/explorer/src/app/app.tsx b/apps/explorer/src/app/app.tsx
index 770f5752a..c23ed5385 100644
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@@ -4,7 +4,6 @@ import { ApolloProvider } from '@apollo/client';
 
 import { createClient } from './lib/apollo-client';
 import { Nav } from './components/nav';
-import { Footer } from './components/footer';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import React from 'react';
@@ -24,7 +23,6 @@ function App() {
             <Nav />
             <Header />
             <Main />
-            <Footer />
           </div>
         </div>
       </ApolloProvider>
diff --git a/apps/explorer/src/app/components/footer/index.tsx b/apps/explorer/src/app/components/footer/index.tsx
deleted file mode 100644
index 6e40fb7a2..000000000
--- a/apps/explorer/src/app/components/footer/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// import packageJson from "../../../package.json";
-
-export const Footer = () => {
-  return (
-    <footer>
-      <section>
-        <div>Reading Vega Fairground data from </div>
-        <div>
-          {/* Version/commit hash: {packageJson.version} / */}
-          {process.env['NX_COMMIT_REF'] || 'dev'}
-        </div>
-      </section>
-    </footer>
-  );
-};
diff --git a/apps/explorer/src/app/components/header/header.spec.tsx b/apps/explorer/src/app/components/header/header.spec.tsx
new file mode 100644
index 000000000..f9518c8a7
--- /dev/null
+++ b/apps/explorer/src/app/components/header/header.spec.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { Header } from './header';
+import { MemoryRouter } from 'react-router-dom';
+
+jest.mock('../search', () => ({
+  Search: () => <div data-testid="search">OrderList</div>,
+}));
+
+const renderComponent = () => (
+  <MemoryRouter>
+    <Header />
+  </MemoryRouter>
+);
+
+describe('Header', () => {
+  it('should render heading', () => {
+    render(renderComponent());
+
+    expect(screen.getByTestId('explorer-header')).toHaveTextContent(
+      'Vega Explorer'
+    );
+  });
+  it('should render search', () => {
+    render(renderComponent());
+
+    expect(screen.getByTestId('search')).toBeInTheDocument();
+  });
+});
diff --git a/apps/explorer/src/app/components/header/header.tsx b/apps/explorer/src/app/components/header/header.tsx
new file mode 100644
index 000000000..ee7f2b050
--- /dev/null
+++ b/apps/explorer/src/app/components/header/header.tsx
@@ -0,0 +1,12 @@
+import { Search } from '../search';
+
+export const Header = () => {
+  return (
+    <header className="flex px-16 pt-16 pb-8">
+      <h1 className="text-h3" data-testid="explorer-header">
+        Vega Explorer
+      </h1>
+      <Search />
+    </header>
+  );
+};
diff --git a/apps/explorer/src/app/components/header/index.tsx b/apps/explorer/src/app/components/header/index.tsx
index f9b6f392a..677ca79d4 100644
--- a/apps/explorer/src/app/components/header/index.tsx
+++ b/apps/explorer/src/app/components/header/index.tsx
@@ -1,9 +1 @@
-import Search from "../search";
-
-export const Header = () => {
-  return (
-    <header>
-      <Search />
-    </header>
-  );
-};
+export * from './header';
diff --git a/apps/explorer/src/app/components/jump-to-block/index.tsx b/apps/explorer/src/app/components/jump-to-block/index.tsx
index 30fbd842b..c48555ef8 100644
--- a/apps/explorer/src/app/components/jump-to-block/index.tsx
+++ b/apps/explorer/src/app/components/jump-to-block/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Routes } from '../../routes/router-config';
 
 export const JumpToBlock = () => {
   const navigate = useNavigate();
@@ -14,7 +15,7 @@ export const JumpToBlock = () => {
     const blockNumber = target.blockNumber.value;
 
     if (blockNumber) {
-      navigate(`/blocks/${blockNumber}`);
+      navigate(`/${Routes.BLOCKS}/${blockNumber}`);
     }
   };
 
@@ -28,15 +29,15 @@ export const JumpToBlock = () => {
       </label>
       <input
         id="block-input"
-        type="tel"
-        name={'blockNumber'}
-        placeholder={'Block number'}
+        type="number"
+        name="blockNumber"
+        placeholder="Block number"
         className="bg-white-25 border-white border px-8 py-4 placeholder-white-60"
       />
       <input
         className="border-white border px-28 py-4 cursor-pointer"
-        type={'submit'}
-        value={'Go'}
+        type="submit"
+        value="Go"
       />
     </form>
   );
diff --git a/apps/explorer/src/app/components/route-title/index.tsx b/apps/explorer/src/app/components/route-title/index.tsx
index 9719d1f34..393844f0c 100644
--- a/apps/explorer/src/app/components/route-title/index.tsx
+++ b/apps/explorer/src/app/components/route-title/index.tsx
@@ -1,12 +1,16 @@
 import classnames from 'classnames';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 
-interface RouteTitleProps {
+interface RouteTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
   className?: string;
 }
 
-export const RouteTitle = ({ children, className }: RouteTitleProps) => {
+export const RouteTitle = ({
+  children,
+  className,
+  ...props
+}: RouteTitleProps) => {
   const classes = classnames(
     'font-alpha',
     'text-h3',
@@ -15,5 +19,9 @@ export const RouteTitle = ({ children, className }: RouteTitleProps) => {
     'mb-28',
     className
   );
-  return <h1 className={classes}>{children}</h1>;
+  return (
+    <h1 className={classes} {...props}>
+      {children}
+    </h1>
+  );
 };
diff --git a/apps/explorer/src/app/components/search/index.tsx b/apps/explorer/src/app/components/search/index.tsx
index ff6134ea1..5a2bdeb5b 100644
--- a/apps/explorer/src/app/components/search/index.tsx
+++ b/apps/explorer/src/app/components/search/index.tsx
@@ -1,108 +1 @@
-import { gql, useQuery } from '@apollo/client';
-import React from 'react';
-import { useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import debounce from 'lodash.debounce';
-import { Guess, GuessVariables } from '@vegaprotocol/graphql';
-
-const TX_LENGTH = 64;
-
-enum PossibleIdTypes {
-  Block = 'Block',
-  Tx = 'Tx',
-  Party = 'Party',
-  Market = 'Market',
-  Unknown = 'Unknown',
-}
-
-const GUESS_QUERY = gql`
-  query Guess($guess: ID!) {
-    party(id: $guess) {
-      id
-    }
-    market(id: $guess) {
-      id
-    }
-  }
-`;
-
-const usePossibleType = (search: string) => {
-  const [possibleType, setPossibleType] = useState<PossibleIdTypes>();
-  const { data, loading, error } = useQuery<Guess, GuessVariables>(
-    GUESS_QUERY,
-    {
-      variables: {
-        guess: search,
-      },
-      skip: !search,
-    }
-  );
-
-  React.useEffect(() => {
-    if (!isNaN(Number(search))) {
-      setPossibleType(PossibleIdTypes.Block);
-    } else if (data?.party) {
-      setPossibleType(PossibleIdTypes.Party);
-    } else if (data?.market) {
-      setPossibleType(PossibleIdTypes.Market);
-    } else if (search.replace('0x', '').length === TX_LENGTH) {
-      setPossibleType(PossibleIdTypes.Tx);
-    } else {
-      setPossibleType(PossibleIdTypes.Unknown);
-    }
-  }, [data?.market, data?.party, search, setPossibleType]);
-
-  return {
-    loading,
-    error,
-    possibleType,
-  };
-};
-
-const useGuess = () => {
-  const [search, setSearch] = useState<string>('');
-  const [debouncedSearch, setDebouncedSearch] = useState<string>('');
-  const { loading, error, possibleType } = usePossibleType(debouncedSearch);
-  const debouncedSearchSet = React.useMemo(
-    () => debounce(setDebouncedSearch, 1000),
-    [setDebouncedSearch]
-  );
-
-  const onChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const search = event.target.value;
-      setSearch(search);
-      debouncedSearchSet(search);
-    },
-    [debouncedSearchSet]
-  );
-
-  return {
-    onChange,
-    search,
-    loading,
-    error,
-    possibleType,
-  };
-};
-
-const Search = () => {
-  const { search, onChange } = useGuess();
-  return (
-    <section>
-      <h1 data-testid="explorer-header">Vega Block Explorer</h1>
-      <fieldset>
-        <label htmlFor="search">Search: </label>
-        <input
-          data-testid="search-field"
-          name="search"
-          value={search}
-          onChange={(e) => onChange(e)}
-        />
-      </fieldset>
-    </section>
-  );
-};
-
-export default Search;
+export * from './search';
diff --git a/apps/explorer/src/app/components/search/search.spec.tsx b/apps/explorer/src/app/components/search/search.spec.tsx
new file mode 100644
index 000000000..32ed902a2
--- /dev/null
+++ b/apps/explorer/src/app/components/search/search.spec.tsx
@@ -0,0 +1,140 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Search } from './search';
+import { MemoryRouter } from 'react-router-dom';
+import { Routes } from '../../routes/router-config';
+
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigate,
+}));
+
+beforeEach(() => {
+  mockedNavigate.mockClear();
+});
+
+const renderComponent = () => (
+  <MemoryRouter>
+    <Search />
+  </MemoryRouter>
+);
+
+const getInputs = () => ({
+  input: screen.getByTestId('search'),
+  button: screen.getByTestId('search-button'),
+});
+
+describe('Search', () => {
+  it('should render search input and button', () => {
+    render(renderComponent());
+    expect(screen.getByTestId('search')).toBeInTheDocument();
+    expect(screen.getByTestId('search-button')).toHaveTextContent('Search');
+  });
+
+  it('should render error if input is not known', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    fireEvent.change(input, { target: { value: 'asd' } });
+    fireEvent.click(button);
+
+    expect(await screen.findByTestId('search-error')).toHaveTextContent(
+      "Something doesn't look right"
+    );
+  });
+  it('should render error if no input is given', async () => {
+    render(renderComponent());
+    const { button } = getInputs();
+
+    fireEvent.click(button);
+
+    expect(await screen.findByTestId('search-error')).toHaveTextContent(
+      'Search required'
+    );
+  });
+
+  it('should render error if transaction is not hex', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    fireEvent.change(input, {
+      target: {
+        value:
+          '0x123456789012345678901234567890123456789012345678901234567890123Q',
+      },
+    });
+
+    fireEvent.click(button);
+
+    expect(await screen.findByTestId('search-error')).toHaveTextContent(
+      'Transaction is not hexadecimal'
+    );
+  });
+
+  it('should render error if transaction is not hex and does not have leading 0x', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    fireEvent.change(input, {
+      target: {
+        value:
+          '123456789012345678901234567890123456789012345678901234567890123Q',
+      },
+    });
+
+    fireEvent.click(button);
+
+    expect(await screen.findByTestId('search-error')).toHaveTextContent(
+      'Transaction is not hexadecimal'
+    );
+  });
+
+  it('should redirect to transactions page', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    fireEvent.change(input, {
+      target: {
+        value:
+          '0x1234567890123456789012345678901234567890123456789012345678901234',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(
+        `${Routes.TX}/0x1234567890123456789012345678901234567890123456789012345678901234`
+      );
+    });
+  });
+
+  it('should redirect to transactions page without proceeding 0x', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    fireEvent.change(input, {
+      target: {
+        value:
+          '1234567890123456789012345678901234567890123456789012345678901234',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(
+        `${Routes.TX}/0x1234567890123456789012345678901234567890123456789012345678901234`
+      );
+    });
+  });
+
+  it('should redirect to blocks page if passed a number', async () => {
+    render(renderComponent());
+    const { button, input } = getInputs();
+    fireEvent.change(input, {
+      target: {
+        value: '123',
+      },
+    });
+
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedNavigate).toBeCalledWith(`${Routes.BLOCKS}/123`);
+    });
+  });
+});
diff --git a/apps/explorer/src/app/components/search/search.tsx b/apps/explorer/src/app/components/search/search.tsx
new file mode 100644
index 000000000..adf4d9db7
--- /dev/null
+++ b/apps/explorer/src/app/components/search/search.tsx
@@ -0,0 +1,84 @@
+import { FormGroup, Input, InputError, Button } from '@vegaprotocol/ui-toolkit';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { Routes } from '../../routes/router-config';
+
+const TX_LENGTH = 64;
+
+interface FormFields {
+  search: string;
+}
+
+const isPrependedTransaction = (search: string) =>
+  search.startsWith('0x') && search.length === 2 + TX_LENGTH;
+
+const isTransaction = (search: string) =>
+  !search.startsWith('0x') && search.length === TX_LENGTH;
+
+const isBlock = (search: string) => !Number.isNaN(Number(search));
+
+export const Search = () => {
+  const { register, handleSubmit } = useForm<FormFields>();
+  const navigate = useNavigate();
+  const [error, setError] = React.useState<Error | null>(null);
+  const onSubmit = React.useCallback(
+    (fields: FormFields) => {
+      setError(null);
+
+      const search = fields.search;
+      if (!search) {
+        setError(new Error('Search required'));
+      } else if (isPrependedTransaction(search)) {
+        if (Number.isNaN(Number(search))) {
+          setError(new Error('Transaction is not hexadecimal'));
+        } else {
+          navigate(`${Routes.TX}/${search}`);
+        }
+      } else if (isTransaction(search)) {
+        if (Number.isNaN(Number(`0x${search}`))) {
+          setError(new Error('Transaction is not hexadecimal'));
+        } else {
+          navigate(`${Routes.TX}/0x${search}`);
+        }
+      } else if (isBlock(search)) {
+        navigate(`${Routes.BLOCKS}/${Number(search)}`);
+      } else {
+        setError(new Error("Something doesn't look right"));
+      }
+    },
+    [navigate]
+  );
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex-1 flex ml-16 justify-end"
+    >
+      <FormGroup className="w-2/3 mb-0">
+        <Input
+          {...register('search')}
+          id="search"
+          data-testid="search"
+          hasError={Boolean(error?.message)}
+          type="text"
+          autoFocus={true}
+          placeholder="Enter block number or transaction hash"
+        />
+        {error?.message ? (
+          <InputError
+            data-testid="search-error"
+            intent="danger"
+            className="flex-1 w-full"
+          >
+            {error.message}
+          </InputError>
+        ) : (
+          <div className="h-28"></div>
+        )}
+      </FormGroup>
+      <Button type="submit" variant="secondary" data-testid="search-button">
+        Search
+      </Button>
+    </form>
+  );
+};
diff --git a/apps/explorer/src/app/components/sub-heading/index.tsx b/apps/explorer/src/app/components/sub-heading/index.tsx
new file mode 100644
index 000000000..094ef2faf
--- /dev/null
+++ b/apps/explorer/src/app/components/sub-heading/index.tsx
@@ -0,0 +1,27 @@
+import classnames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+interface SubHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const SubHeading = ({
+  children,
+  className,
+  ...props
+}: SubHeadingProps) => {
+  const classes = classnames(
+    'font-alpha',
+    'text-h4',
+    'uppercase',
+    'mt-12',
+    'mb-12',
+    className
+  );
+  return (
+    <h2 {...props} className={classes}>
+      {children}
+    </h2>
+  );
+};
diff --git a/apps/explorer/src/app/components/txs/home/block-txs-data.tsx b/apps/explorer/src/app/components/txs/block-txs-data.tsx
similarity index 83%
rename from apps/explorer/src/app/components/txs/home/block-txs-data.tsx
rename to apps/explorer/src/app/components/txs/block-txs-data.tsx
index 54bf39782..bde3f6187 100644
--- a/apps/explorer/src/app/components/txs/home/block-txs-data.tsx
+++ b/apps/explorer/src/app/components/txs/block-txs-data.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-blockchain-response';
-import { BlockData } from '../../blocks';
-import { TxsPerBlock } from '../txs-per-block';
+import { TendermintBlockchainResponse } from '../../routes/blocks/tendermint-blockchain-response';
+import { BlockData } from '../blocks';
+import { TxsPerBlock } from './txs-per-block';
 
 interface TxsProps {
   data: TendermintBlockchainResponse | undefined;
diff --git a/apps/explorer/src/app/components/txs/index.tsx b/apps/explorer/src/app/components/txs/index.tsx
index 03b5e94ae..bd8d26d32 100644
--- a/apps/explorer/src/app/components/txs/index.tsx
+++ b/apps/explorer/src/app/components/txs/index.tsx
@@ -1,4 +1,3 @@
-export { TxDetails } from './id/tx-details';
-export { TxContent } from './id/tx-content';
-export { TxList } from './pending/tx-list';
-export { BlockTxsData } from './home/block-txs-data';
+export { TxList } from './tx-list';
+export { BlockTxsData } from './block-txs-data';
+export { TxOrderType } from './tx-order-type';
diff --git a/apps/explorer/src/app/components/txs/pending/tx-list.tsx b/apps/explorer/src/app/components/txs/tx-list.tsx
similarity index 83%
rename from apps/explorer/src/app/components/txs/pending/tx-list.tsx
rename to apps/explorer/src/app/components/txs/tx-list.tsx
index 4c07738a8..1a9198fbc 100644
--- a/apps/explorer/src/app/components/txs/pending/tx-list.tsx
+++ b/apps/explorer/src/app/components/txs/tx-list.tsx
@@ -1,4 +1,4 @@
-import { TendermintUnconfirmedTransactionsResponse } from '../../../routes/txs/tendermint-unconfirmed-transactions-response.d';
+import { TendermintUnconfirmedTransactionsResponse } from '../../routes/txs/tendermint-unconfirmed-transactions-response.d';
 
 interface TxsProps {
   data: TendermintUnconfirmedTransactionsResponse | undefined;
diff --git a/apps/explorer/src/app/components/txs/tx-order-type/index.tsx b/apps/explorer/src/app/components/txs/tx-order-type.tsx
similarity index 100%
rename from apps/explorer/src/app/components/txs/tx-order-type/index.tsx
rename to apps/explorer/src/app/components/txs/tx-order-type.tsx
diff --git a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx b/apps/explorer/src/app/components/txs/txs-per-block.tsx
similarity index 50%
rename from apps/explorer/src/app/components/txs/txs-per-block/index.tsx
rename to apps/explorer/src/app/components/txs/txs-per-block.tsx
index 03043d5f9..67613281e 100644
--- a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx
+++ b/apps/explorer/src/app/components/txs/txs-per-block.tsx
@@ -1,11 +1,11 @@
-import useFetch from '../../../hooks/use-fetch';
-import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
-import { Routes } from '../../../routes/router-config';
-import { DATA_SOURCES } from '../../../config';
+import useFetch from '../../hooks/use-fetch';
+import { ChainExplorerTxResponse } from '../../routes/types/chain-explorer-response';
+import { Routes } from '../../routes/router-config';
+import { DATA_SOURCES } from '../../config';
 import { Link } from 'react-router-dom';
-import { RenderFetched } from '../../render-fetched';
-import { TruncateInline } from '../../truncate/truncate';
-import { TxOrderType } from '../tx-order-type';
+import { RenderFetched } from '../render-fetched';
+import { TruncateInline } from '../truncate/truncate';
+import { TxOrderType } from './tx-order-type';
 
 interface TxsPerBlockProps {
   blockHeight: string | undefined;
@@ -31,20 +31,20 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
 
   return (
     <RenderFetched error={error} loading={loading} className="text-body-large">
-      <div className="overflow-x-auto whitespace-nowrap mb-28">
-        <table className="w-full">
-          <thead>
-            <tr className="font-mono">
-              <td>Transaction</td>
-              <td>From</td>
-              <td>Type</td>
-            </tr>
-          </thead>
-          <tbody>
-            {decodedBlockData &&
-              decodedBlockData.map(({ TxHash, PubKey, Type }) => {
+      {decodedBlockData && decodedBlockData.length ? (
+        <div className="overflow-x-auto whitespace-nowrap mb-28">
+          <table className="w-full">
+            <thead>
+              <tr className="font-mono">
+                <td>Transaction</td>
+                <td>From</td>
+                <td>Type</td>
+              </tr>
+            </thead>
+            <tbody>
+              {decodedBlockData.map(({ TxHash, PubKey, Type }) => {
                 return (
-                  <tr data-testid="transaction-row" key={TxHash}>
+                  <tr key={TxHash} data-testid="transaction-row">
                     <td>
                       <Link to={`/${Routes.TX}/${TxHash}`}>
                         <TruncateInline
@@ -56,12 +56,14 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
                       </Link>
                     </td>
                     <td>
-                      <TruncateInline
-                        text={PubKey}
-                        startChars={truncateLength}
-                        endChars={truncateLength}
-                        className="font-mono"
-                      />
+                      <Link to={`/${Routes.PARTIES}/${PubKey}`}>
+                        <TruncateInline
+                          text={PubKey}
+                          startChars={truncateLength}
+                          endChars={truncateLength}
+                          className="text-vega-yellow font-mono"
+                        />
+                      </Link>
                     </td>
                     <td>
                       <TxOrderType className="mb-4" orderType={Type} />
@@ -69,9 +71,14 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
                   </tr>
                 );
               })}
-          </tbody>
-        </table>
-      </div>
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="font-mono mb-28">
+          No transactions in block {blockHeight}
+        </div>
+      )}
     </RenderFetched>
   );
 };
diff --git a/apps/explorer/src/app/hooks/use-fetch.tsx b/apps/explorer/src/app/hooks/use-fetch.tsx
index 84f3207e2..935fb18e6 100644
--- a/apps/explorer/src/app/hooks/use-fetch.tsx
+++ b/apps/explorer/src/app/hooks/use-fetch.tsx
@@ -57,7 +57,7 @@ function useFetch<T = unknown>(
         }
 
         const data = (await response.json()) as T;
-        if ('error' in data) {
+        if (data && 'error' in data) {
           // @ts-ignore - data.error
           throw new Error(data.error);
         }
diff --git a/apps/explorer/src/app/routes/assets/index.tsx b/apps/explorer/src/app/routes/assets/index.tsx
index e7be5892e..859d90171 100644
--- a/apps/explorer/src/app/routes/assets/index.tsx
+++ b/apps/explorer/src/app/routes/assets/index.tsx
@@ -1,5 +1,7 @@
 import { gql, useQuery } from '@apollo/client';
 import React from 'react';
+import { RouteTitle } from '../../components/route-title';
+import { SubHeading } from '../../components/sub-heading';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import { AssetsQuery } from '@vegaprotocol/graphql';
 
@@ -35,12 +37,12 @@ const Assets = () => {
   if (!data || !data.assets) return null;
   return (
     <section>
-      <h1>Assets</h1>
+      <RouteTitle data-testid="assets-header">Assets</RouteTitle>
       {data?.assets.map((a) => (
         <React.Fragment key={a.id}>
-          <h2 data-testid="asset-header">
+          <SubHeading data-testid="asset-header">
             {a.name} ({a.symbol})
-          </h2>
+          </SubHeading>
           <SyntaxHighlighter data={a} />
         </React.Fragment>
       ))}
diff --git a/apps/explorer/src/app/routes/blocks/id/index.tsx b/apps/explorer/src/app/routes/blocks/id/index.tsx
index 3943d4a95..3dbe82c22 100644
--- a/apps/explorer/src/app/routes/blocks/id/index.tsx
+++ b/apps/explorer/src/app/routes/blocks/id/index.tsx
@@ -4,7 +4,6 @@ import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlocksResponse } from '../tendermint-blocks-response';
 import { RouteTitle } from '../../../components/route-title';
-import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { SecondsAgo } from '../../../components/seconds-ago';
 import {
   Table,
@@ -12,6 +11,7 @@ import {
   TableHeader,
   TableCell,
 } from '../../../components/table';
+import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
diff --git a/apps/explorer/src/app/routes/genesis/index.tsx b/apps/explorer/src/app/routes/genesis/index.tsx
index d573df14a..2b88c265c 100644
--- a/apps/explorer/src/app/routes/genesis/index.tsx
+++ b/apps/explorer/src/app/routes/genesis/index.tsx
@@ -1,3 +1,4 @@
+import { RouteTitle } from '../../components/route-title';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import { DATA_SOURCES } from '../../config';
 import useFetch from '../../hooks/use-fetch';
@@ -12,7 +13,7 @@ const Genesis = () => {
   if (!genesis?.result.genesis) return null;
   return (
     <section>
-      <h1 data-testid="genesis-header">Genesis</h1>
+      <RouteTitle data-testid="genesis-header">Genesis</RouteTitle>
       <SyntaxHighlighter data={genesis?.result.genesis} />
     </section>
   );
diff --git a/apps/explorer/src/app/routes/governance/index.tsx b/apps/explorer/src/app/routes/governance/index.tsx
index 9c35a17f5..1d81a9e80 100644
--- a/apps/explorer/src/app/routes/governance/index.tsx
+++ b/apps/explorer/src/app/routes/governance/index.tsx
@@ -1,5 +1,7 @@
 import { gql, useQuery } from '@apollo/client';
 import React from 'react';
+import { RouteTitle } from '../../components/route-title';
+import { SubHeading } from '../../components/sub-heading';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import {
   ProposalsQuery,
@@ -100,14 +102,13 @@ const PROPOSAL_QUERY = gql`
 const Governance = () => {
   const { data } = useQuery<ProposalsQuery>(PROPOSAL_QUERY);
 
-  if (!data || !data.proposals) return null;
+  if (!data) return null;
   return (
     <section>
-      <h1>Governance</h1>
-      {data.proposals.map((p) => (
+      <RouteTitle data-testid="governance-header">Governance</RouteTitle>
+      {data.proposals?.map((p) => (
         <React.Fragment key={p.id}>
-          {/* TODO get proposal name generator from console */}
-          <h2>{getProposalName(p.terms.change)}</h2>
+          <SubHeading>{getProposalName(p.terms.change)}</SubHeading>
           <SyntaxHighlighter data={p} />
         </React.Fragment>
       ))}
diff --git a/apps/explorer/src/app/routes/markets/index.tsx b/apps/explorer/src/app/routes/markets/index.tsx
index 1fc494e18..45568c903 100644
--- a/apps/explorer/src/app/routes/markets/index.tsx
+++ b/apps/explorer/src/app/routes/markets/index.tsx
@@ -3,6 +3,8 @@ import { MarketsQuery } from '@vegaprotocol/graphql';
 
 import React from 'react';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { RouteTitle } from '../../components/route-title';
+import { SubHeading } from '../../components/sub-heading';
 
 const MARKETS_QUERY = gql`
   query MarketsQuery {
@@ -148,14 +150,17 @@ const Markets = () => {
 
   if (!data || !data.markets) return null;
   return (
-    <section className="px-8 py-12">
-      <h1>Markets</h1>
-      {data.markets.map((m) => (
-        <React.Fragment key={m.id}>
-          <h2 data-testid="markets-header">{m.name}</h2>
-          <SyntaxHighlighter data={m} />
-        </React.Fragment>
-      ))}
+    <section>
+      <RouteTitle data-testid="markets-heading">Markets</RouteTitle>
+
+      {data
+        ? data.markets.map((m) => (
+            <React.Fragment key={m.id}>
+              <SubHeading data-testid="markets-header">{m.name}</SubHeading>
+              <SyntaxHighlighter data={m} />
+            </React.Fragment>
+          ))
+        : null}
     </section>
   );
 };
diff --git a/apps/explorer/src/app/routes/network-parameters/index.tsx b/apps/explorer/src/app/routes/network-parameters/index.tsx
index 46df31664..8a8ed8bd9 100644
--- a/apps/explorer/src/app/routes/network-parameters/index.tsx
+++ b/apps/explorer/src/app/routes/network-parameters/index.tsx
@@ -1,5 +1,7 @@
 import { gql, useQuery } from '@apollo/client';
+import { RouteTitle } from '../../components/route-title';
 import { NetworkParametersQuery } from '@vegaprotocol/graphql';
+import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 
 export const NETWORK_PARAMETERS_QUERY = gql`
   query NetworkParametersQuery {
@@ -14,8 +16,10 @@ const NetworkParameters = () => {
   const { data } = useQuery<NetworkParametersQuery>(NETWORK_PARAMETERS_QUERY);
   return (
     <section>
-      <h1 data-testid="network-param-header">NetworkParameters</h1>
-      <pre data-testid="parameters">{JSON.stringify(data, null, '  ')}</pre>
+      <RouteTitle data-testid="network-param-header">
+        Network Parameters
+      </RouteTitle>
+      {data ? <SyntaxHighlighter data={data} /> : null}
     </section>
   );
 };
diff --git a/apps/explorer/src/app/routes/parties/home/index.tsx b/apps/explorer/src/app/routes/parties/home/index.tsx
index 1d6fd51bc..a1f7ee6f1 100644
--- a/apps/explorer/src/app/routes/parties/home/index.tsx
+++ b/apps/explorer/src/app/routes/parties/home/index.tsx
@@ -1,13 +1,57 @@
-import React from "react";
+import React from 'react';
+import { RouteTitle } from '../../../components/route-title';
+
+import { useNavigate } from 'react-router-dom';
+import { Routes } from '../../router-config';
+
+export const JumpToParty = () => {
+  const navigate = useNavigate();
+
+  const handleSubmit = React.useCallback(
+    () => (e: React.SyntheticEvent) => {
+      e.preventDefault();
+
+      const target = e.target as typeof e.target & {
+        partyId: { value: number };
+      };
+
+      const partyId = target.partyId.value;
+
+      if (partyId) {
+        navigate(`/${Routes.PARTIES}/${partyId}`);
+      }
+    },
+    [navigate]
+  );
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label
+        htmlFor="block-input"
+        className="block uppercase text-h5 font-bold"
+      >
+        Go to party
+      </label>
+      <input
+        id="block-input"
+        name="partyId"
+        placeholder="Party id"
+        className="bg-white-25 border-white border px-8 py-4 placeholder-white-60"
+      />
+      <input
+        className="border-white border px-28 py-4 cursor-pointer"
+        type="submit"
+        value="Go"
+      />
+    </form>
+  );
+};
 
 const Parties = () => {
   return (
     <section>
-      <h1>Parties</h1>
-      <h2>
-        Not sure what to do with this page? Could show all parties but would
-        eventually need to be rewritten. But that's not very useful either
-      </h2>
+      <RouteTitle data-testid="parties-header">Parties</RouteTitle>
+      <JumpToParty />
     </section>
   );
 };
diff --git a/apps/explorer/src/app/routes/parties/id/index.tsx b/apps/explorer/src/app/routes/parties/id/index.tsx
index dd883bdd4..2412ab1f3 100644
--- a/apps/explorer/src/app/routes/parties/id/index.tsx
+++ b/apps/explorer/src/app/routes/parties/id/index.tsx
@@ -2,6 +2,9 @@ import { useQuery } from '@apollo/client';
 import { gql } from '@apollo/client';
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { RouteTitle } from '../../../components/route-title';
+import { SubHeading } from '../../../components/sub-heading';
+import { SyntaxHighlighter } from '../../../components/syntax-highlighter';
 import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import { TendermintSearchTransactionResponse } from '../tendermint-transaction-response';
@@ -47,10 +50,13 @@ const PARTY_ASSETS_QUERY = gql`
 
 const Party = () => {
   const { party } = useParams<{ party: string }>();
+
   const {
     state: { data: partyData },
   } = useFetch<TendermintSearchTransactionResponse>(
-    `${DATA_SOURCES.tendermintWebsocketUrl}/tx_search?query="tx.submitter=%27${party}%27"`
+    `${
+      DATA_SOURCES.tendermintUrl
+    }/tx_search?query="tx.submitter='${party?.replace('0x', '')}'"`
   );
 
   const { data } = useQuery<PartyAssetsQuery, PartyAssetsQueryVariables>(
@@ -65,11 +71,20 @@ const Party = () => {
 
   return (
     <section>
-      <h1>Party</h1>
-      <h2>Tendermint Data</h2>
-      <pre>{JSON.stringify(partyData, null, '  ')}</pre>
-      <h2>Asset data</h2>
-      <pre>{JSON.stringify(data, null, '  ')}</pre>
+      <RouteTitle data-testid="parties-header">Party</RouteTitle>
+      {data ? (
+        <>
+          <SubHeading>Asset data</SubHeading>
+          <SyntaxHighlighter data={data} />
+        </>
+      ) : null}
+
+      {partyData ? (
+        <>
+          <SubHeading>Tendermint Data</SubHeading>
+          <SyntaxHighlighter data={partyData} />
+        </>
+      ) : null}
     </section>
   );
 };
diff --git a/apps/explorer/src/app/routes/pending/index.tsx b/apps/explorer/src/app/routes/pending/index.tsx
index 5118c48a5..1955f0aeb 100644
--- a/apps/explorer/src/app/routes/pending/index.tsx
+++ b/apps/explorer/src/app/routes/pending/index.tsx
@@ -3,6 +3,7 @@ import { DATA_SOURCES } from '../../config';
 import useFetch from '../../hooks/use-fetch';
 import { TendermintUnconfirmedTransactionsResponse } from '../txs/tendermint-unconfirmed-transactions-response.d';
 import { TxList } from '../../components/txs';
+import { RouteTitle } from '../../components/route-title';
 
 const PendingTxs = () => {
   const {
@@ -13,7 +14,9 @@ const PendingTxs = () => {
 
   return (
     <section>
-      <h1>Unconfirmed transactions</h1>
+      <RouteTitle data-testid="unconfirmed-transactions-header">
+        Unconfirmed transactions
+      </RouteTitle>
       https://lb.testnet.vega.xyz/tm/unconfirmed_txs
       <br />
       <div>Number: {unconfirmedTransactions?.result?.n_txs || 0}</div>
diff --git a/apps/explorer/src/app/routes/txs/id/index.tsx b/apps/explorer/src/app/routes/txs/id/index.tsx
index 5698bdbe4..bb78aed50 100644
--- a/apps/explorer/src/app/routes/txs/id/index.tsx
+++ b/apps/explorer/src/app/routes/txs/id/index.tsx
@@ -4,9 +4,10 @@ import useFetch from '../../../hooks/use-fetch';
 import { TendermintTransactionResponse } from '../tendermint-transaction-response.d';
 import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
 import { DATA_SOURCES } from '../../../config';
-import { TxContent, TxDetails } from '../../../components/txs';
 import { RouteTitle } from '../../../components/route-title';
 import { RenderFetched } from '../../../components/render-fetched';
+import { TxContent } from './tx-content';
+import { TxDetails } from './tx-details';
 
 const Tx = () => {
   const { txHash } = useParams<{ txHash: string }>();
diff --git a/apps/explorer/src/app/components/txs/id/tx-content.tsx b/apps/explorer/src/app/routes/txs/id/tx-content.tsx
similarity index 73%
rename from apps/explorer/src/app/components/txs/id/tx-content.tsx
rename to apps/explorer/src/app/routes/txs/id/tx-content.tsx
index e0ecc669d..8d334080c 100644
--- a/apps/explorer/src/app/components/txs/id/tx-content.tsx
+++ b/apps/explorer/src/app/routes/txs/id/tx-content.tsx
@@ -1,8 +1,13 @@
+import { StatusMessage } from '../../../components/status-message';
+import { SyntaxHighlighter } from '../../../components/syntax-highlighter';
+import {
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from '../../../components/table';
+import { TxOrderType } from '../../../components/txs';
 import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
-import { SyntaxHighlighter } from '../../syntax-highlighter';
-import { Table, TableRow, TableHeader, TableCell } from '../../table';
-import { TxOrderType } from '../tx-order-type';
-import { StatusMessage } from '../../status-message';
 
 interface TxContentProps {
   data: ChainExplorerTxResponse | undefined;
diff --git a/apps/explorer/src/app/components/txs/id/tx-details.tsx b/apps/explorer/src/app/routes/txs/id/tx-details.tsx
similarity index 91%
rename from apps/explorer/src/app/components/txs/id/tx-details.tsx
rename to apps/explorer/src/app/routes/txs/id/tx-details.tsx
index 71a9f1915..72005720a 100644
--- a/apps/explorer/src/app/components/txs/id/tx-details.tsx
+++ b/apps/explorer/src/app/routes/txs/id/tx-details.tsx
@@ -1,8 +1,13 @@
 import { Link } from 'react-router-dom';
+import {
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from '../../../components/table';
+import { TruncateInline } from '../../../components/truncate/truncate';
 import { Routes } from '../../../routes/router-config';
 import { Result } from '../../../routes/txs/tendermint-transaction-response.d';
-import { Table, TableRow, TableCell, TableHeader } from '../../table';
-import { TruncateInline } from '../../truncate/truncate';
 
 interface TxDetailsProps {
   txData: Result | undefined;
diff --git a/apps/explorer/src/app/routes/validators/index.tsx b/apps/explorer/src/app/routes/validators/index.tsx
index d27b85c47..68ff1bb49 100644
--- a/apps/explorer/src/app/routes/validators/index.tsx
+++ b/apps/explorer/src/app/routes/validators/index.tsx
@@ -1,5 +1,8 @@
 import { gql, useQuery } from '@apollo/client';
 import React from 'react';
+import { RouteTitle } from '../../components/route-title';
+import { SubHeading } from '../../components/sub-heading';
+import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import { DATA_SOURCES } from '../../config';
 import useFetch from '../../hooks/use-fetch';
 import { TendermintValidatorsResponse } from './tendermint-validator-response';
@@ -41,13 +44,21 @@ const Validators = () => {
 
   return (
     <section>
-      <h1>Validators</h1>
-      <h2 data-testid="tendermint-header">Tendermint data</h2>
-      <pre data-testid="tendermint-data">
-        {JSON.stringify(validators, null, '  ')}
-      </pre>
-      <h2 data-testid="vega-header">Vega data</h2>
-      <pre data-testid="vega-data">{JSON.stringify(data, null, '  ')}</pre>
+      <RouteTitle data-testid="validators-header">Validators</RouteTitle>
+      {data ? (
+        <>
+          <SubHeading data-testid="vega-header">Vega data</SubHeading>
+          <SyntaxHighlighter data-testid="vega-data" data={data} />
+        </>
+      ) : null}
+      {validators ? (
+        <>
+          <SubHeading data-testid="tendermint-header">
+            Tendermint data
+          </SubHeading>
+          <SyntaxHighlighter data-testid="tendermint-data" data={validators} />
+        </>
+      ) : null}
     </section>
   );
 };
diff --git a/apps/explorer/src/app/setupTests.ts b/apps/explorer/src/app/setup-tests.ts
similarity index 100%
rename from apps/explorer/src/app/setupTests.ts
rename to apps/explorer/src/app/setup-tests.ts
diff --git a/apps/explorer/src/app/styles/_reset.scss b/apps/explorer/src/app/styles/_reset.scss
deleted file mode 100644
index 8a3e0c12e..000000000
--- a/apps/explorer/src/app/styles/_reset.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-fieldset {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  min-width: 0;
-}
diff --git a/apps/explorer/src/index.html b/apps/explorer/src/index.html
index b51ae59f9..43ba24a20 100644
--- a/apps/explorer/src/index.html
+++ b/apps/explorer/src/index.html
@@ -9,6 +9,6 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="dark"></div>
   </body>
 </html>
diff --git a/apps/explorer/tsconfig.spec.json b/apps/explorer/tsconfig.spec.json
index 95ef66a08..8c00a45c0 100644
--- a/apps/explorer/tsconfig.spec.json
+++ b/apps/explorer/tsconfig.spec.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node", "@testing-library/jest-dom"]
   },
   "include": [
     "**/*.test.ts",
diff --git a/libs/ui-toolkit/jest.config.js b/libs/ui-toolkit/jest.config.js
index 7b46c9bf8..57204627e 100644
--- a/libs/ui-toolkit/jest.config.js
+++ b/libs/ui-toolkit/jest.config.js
@@ -6,4 +6,5 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/ui-toolkit',
+  setupFilesAfterEnv: ['./src/setup-tests.ts'],
 };
diff --git a/libs/ui-toolkit/src/components/callout/callout.stories.tsx b/libs/ui-toolkit/src/components/callout/callout.stories.tsx
index 249c84ea1..ad910f35e 100644
--- a/libs/ui-toolkit/src/components/callout/callout.stories.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.stories.tsx
@@ -8,6 +8,11 @@ import { Intent } from '../../utils/intent';
 export default {
   title: 'Callout',
   component: Callout,
+  argTypes: {
+    title: {
+      type: 'string',
+    },
+  },
 } as ComponentMeta<typeof Callout>;
 
 const Template: ComponentStory<typeof Callout> = (args) => (
diff --git a/libs/ui-toolkit/src/components/callout/callout.test.tsx b/libs/ui-toolkit/src/components/callout/callout.test.tsx
index 303f9f0bd..8ef09887d 100644
--- a/libs/ui-toolkit/src/components/callout/callout.test.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.test.tsx
@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import { Callout } from '.';
 import { Intent } from '../../utils/intent';
 
diff --git a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx
index 5bef244c7..156436135 100644
--- a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx
+++ b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx
@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import { EtherscanLink } from '.';
 import { EthereumChainIds } from '../../utils/web3';
 
diff --git a/libs/ui-toolkit/src/components/form-group/form-group.spec.tsx b/libs/ui-toolkit/src/components/form-group/form-group.spec.tsx
new file mode 100644
index 000000000..852ca0f15
--- /dev/null
+++ b/libs/ui-toolkit/src/components/form-group/form-group.spec.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+
+import { FormGroup } from './form-group';
+
+describe('FormGroup', () => {
+  it('should render label if given a label', () => {
+    render(
+      <FormGroup label="label" labelFor="test">
+        <input id="test"></input>
+      </FormGroup>
+    );
+    expect(screen.getByLabelText('label')).toBeInTheDocument();
+  });
+
+  it('should add classes passed in', () => {
+    render(
+      <FormGroup label="label" labelFor="test" className="fighter">
+        <input id="test"></input>
+      </FormGroup>
+    );
+    expect(screen.getByTestId('form-group')).toHaveClass('fighter');
+  });
+
+  it('should render children', () => {
+    render(
+      <FormGroup label="label" labelFor="test" className="fighter">
+        <input data-testid="foo" id="test"></input>
+      </FormGroup>
+    );
+    expect(screen.getByTestId('foo')).toBeInTheDocument();
+  });
+});
diff --git a/libs/ui-toolkit/src/components/form-group/form-group.tsx b/libs/ui-toolkit/src/components/form-group/form-group.tsx
new file mode 100644
index 000000000..bd5724943
--- /dev/null
+++ b/libs/ui-toolkit/src/components/form-group/form-group.tsx
@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+interface FormGroupProps {
+  children: ReactNode;
+  label?: string;
+  labelFor?: string;
+  labelAlign?: 'left' | 'right';
+  className?: string;
+}
+
+export const FormGroup = ({
+  children,
+  label,
+  labelFor,
+  labelAlign = 'left',
+  className,
+}: FormGroupProps) => {
+  const labelClasses = classNames('block text-ui mb-4', {
+    'text-right': labelAlign === 'right',
+  });
+  return (
+    <div data-testid="form-group" className={classNames(className, 'mb-20')}>
+      {label && (
+        <label className={labelClasses} htmlFor={labelFor}>
+          {label}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx b/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx
new file mode 100644
index 000000000..da5b18ad5
--- /dev/null
+++ b/libs/ui-toolkit/src/components/form-group/from-group.stories.tsx
@@ -0,0 +1,30 @@
+import { Story, Meta } from '@storybook/react';
+import { Input } from '../input';
+import { FormGroup } from './form-group';
+export default {
+  component: FormGroup,
+  title: 'FormGroup',
+  argTypes: {
+    label: {
+      type: 'string',
+    },
+    labelFor: {
+      type: 'string',
+    },
+    className: {
+      type: 'string',
+    },
+  },
+} as Meta;
+
+const Template: Story = (args) => (
+  <FormGroup {...args} label="label" labelFor="test">
+    <Input id="labelFor" />
+  </FormGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'label',
+  labelFor: 'labelFor',
+};
diff --git a/libs/ui-toolkit/src/components/form-group/index.tsx b/libs/ui-toolkit/src/components/form-group/index.tsx
index 2a7d13074..faeeafc70 100644
--- a/libs/ui-toolkit/src/components/form-group/index.tsx
+++ b/libs/ui-toolkit/src/components/form-group/index.tsx
@@ -1,30 +1 @@
-import classNames from 'classnames';
-import { ReactNode } from 'react';
-
-interface FormGroupProps {
-  children: ReactNode;
-  label?: string;
-  labelFor?: string;
-  labelAlign?: 'left' | 'right';
-}
-
-export const FormGroup = ({
-  children,
-  label,
-  labelFor,
-  labelAlign = 'left',
-}: FormGroupProps) => {
-  const labelClasses = classNames('block text-ui mb-4', {
-    'text-right': labelAlign === 'right',
-  });
-  return (
-    <div className="mb-20">
-      {label && (
-        <label className={labelClasses} htmlFor={labelFor}>
-          {label}
-        </label>
-      )}
-      {children}
-    </div>
-  );
-};
+export * from './form-group';
diff --git a/libs/ui-toolkit/src/components/input-error/input-error.tsx b/libs/ui-toolkit/src/components/input-error/input-error.tsx
index 1fceb6ca2..69e835b09 100644
--- a/libs/ui-toolkit/src/components/input-error/input-error.tsx
+++ b/libs/ui-toolkit/src/components/input-error/input-error.tsx
@@ -1,7 +1,8 @@
 import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
 import { Icon } from '../icon';
 
-interface InputErrorProps {
+interface InputErrorProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   className?: string;
   intent?: 'danger' | 'warning';
@@ -11,6 +12,7 @@ export const InputError = ({
   intent = 'danger',
   className,
   children,
+  ...props
 }: InputErrorProps) => {
   const effectiveClassName = classNames(
     [
@@ -33,7 +35,7 @@ export const InputError = ({
     'fill-intent-warning': intent === 'warning',
   });
   return (
-    <div className={effectiveClassName}>
+    <div className={effectiveClassName} {...props}>
       <Icon name="warning-sign" className={iconClassName} />
       {children}
     </div>
diff --git a/libs/ui-toolkit/src/setup-tests.ts b/libs/ui-toolkit/src/setup-tests.ts
new file mode 100644
index 000000000..8f2609b7b
--- /dev/null
+++ b/libs/ui-toolkit/src/setup-tests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';