migrate stuff into new NX

apps/explorer-e2e/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/explorer-e2e/cypress.json

@@ -0,0 +1,12 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "supportFile": "./src/support/index.ts",
+  "pluginsFile": false,
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/explorer-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/explorer-e2e/screenshots",
+  "chromeWebSecurity": false
+}

apps/explorer-e2e/project.json

@@ -0,0 +1,28 @@
+{
+  "root": "apps/explorer-e2e",
+  "sourceRoot": "apps/explorer-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/explorer-e2e/cypress.json",
+        "devServerTarget": "explorer:serve"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "explorer:serve:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/explorer-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["explorer"]
+}

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

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

apps/explorer-e2e/src/integration/app.spec.ts

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('explorer', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome explorer');
+  });
+});

apps/explorer-e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

apps/explorer-e2e/src/support/commands.ts

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

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

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/explorer-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}

apps/explorer/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/explorer/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/explorer/.env

@@ -0,0 +1,25 @@
+# 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
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_REPOSITORY_URL=$REPOSITORY_URL
+REACT_APP_BRANCH=$BRANCH
+REACT_APP_PULL_REQUEST=$PULL_REQUEST
+REACT_APP_HEAD=$HEAD
+REACT_APP_COMMIT_REF=$COMMIT_REF
+REACT_APP_CONTEXT=$CONTEXT
+REACT_APP_REVIEW_ID=$REVIEW_ID
+REACT_APP_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
+REACT_APP_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
+REACT_APP_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
+REACT_APP_URL=$URL
+REACT_APP_DEPLOY_URL=$DEPLOY_URL
+REACT_APP_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
+
+# App configuration variables
+REACT_APP_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
+REACT_APP_TENDERMINT_URL = "https://lb.testnet.vega.xyz/tm"
+REACT_APP_TENDERMINT_WEBSOCKET_URL = "wss://lb.testnet.vega.xyz/tm/websocket"
+REACT_APP_VEGA_URL = "https://lb.testnet.vega.xyz/query"

apps/explorer/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/explorer/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  displayName: 'explorer',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/explorer',
+};

apps/explorer/project.json

@@ -0,0 +1,70 @@
+{
+  "root": "apps/explorer",
+  "sourceRoot": "apps/explorer/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/explorer",
+        "index": "apps/explorer/src/index.html",
+        "baseHref": "/",
+        "main": "apps/explorer/src/main.tsx",
+        "polyfills": "apps/explorer/src/polyfills.ts",
+        "tsConfig": "apps/explorer/tsconfig.app.json",
+        "assets": ["apps/explorer/src/favicon.ico", "apps/explorer/src/assets"],
+        "styles": ["apps/explorer/src/styles.scss"],
+        "scripts": [],
+        "webpackConfig": "@nrwl/react/plugins/webpack"
+      },
+      "configurations": {
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/explorer/src/environments/environment.ts",
+              "with": "apps/explorer/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/web:dev-server",
+      "options": {
+        "buildTarget": "explorer:build",
+        "hmr": true
+      },
+      "configurations": {
+        "production": {
+          "buildTarget": "explorer:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/explorer/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/apps/explorer"],
+      "options": {
+        "jestConfig": "apps/explorer/jest.config.js",
+        "passWithNoTests": true
+      }
+    }
+  },
+  "tags": []
+}

apps/explorer/src/app/app.module.scss

@@ -0,0 +1 @@
+/* Your styles goes here. */

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

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app';
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    expect(getByText(/Welcome explorer/gi)).toBeTruthy();
+  });
+});

apps/explorer/src/app/app.tsx

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import styles from './app.module.scss';
+
+import { Route, Link } from 'react-router-dom';
+import App2 from './src/App';
+
+export function App() {
+  return <App2 />;
+}
+
+export default App;

apps/explorer/src/app/src/App.tsx

@@ -0,0 +1,33 @@
+import './App.scss';
+
+import { ApolloProvider } from '@apollo/client';
+
+import { createClient } from './lib/apollo-client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Nav } from './components/nav';
+import { Footer } from './components/footer';
+import { Header } from './components/header';
+import { Main } from './components/main';
+import React from 'react';
+import { DATA_SOURCES } from './config';
+import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
+
+function App() {
+  const [client] = React.useState(createClient(DATA_SOURCES.dataNodeUrl));
+  return (
+    <TendermintWebsocketProvider>
+      <ApolloProvider client={client}>
+        <div className="app">
+          <div className="template-sidebar">
+            <Nav />
+            <Header />
+            <Main />
+            <Footer />
+          </div>
+        </div>
+      </ApolloProvider>
+    </TendermintWebsocketProvider>
+  );
+}
+
+export default App;

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

@@ -1,4 +1,4 @@
-import packageJson from "../../../package.json";
+// import packageJson from "../../../package.json";
 
 export const Footer = () => {
   return (
@@ -6,8 +6,8 @@ export const Footer = () => {
       <section>
         <div>Reading Vega Fairground data from </div>
         <div>
-          Version/commit hash: {packageJson.version} /
-          {process.env.REACT_APP_COMMIT_REF || "dev"}
+          {/* Version/commit hash: {packageJson.version} / */}
+          {process.env['REACT_APP_COMMIT_REF'] || 'dev'}
         </div>
       </section>
     </footer>

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

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom';
+import routerConfig from '../../routes/router-config';
+
+export const Nav = () => {
+  return (
+    <nav>
+      {routerConfig.map((r) => (
+        <div key={r.name}>
+          {/* TODO stupid hack */}
+          <Link to={r.path.replace('/*', '')}>{r.name}</Link>
+          <br />
+        </div>
+      ))}
+    </nav>
+  );
+};

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface RouteErrorBoundaryProps {
   children: React.ReactElement;
@@ -17,11 +17,11 @@ export class RouteErrorBoundary extends React.Component<
     return { hasError: true };
   }
 
-  componentDidCatch(error: Error) {
+  override componentDidCatch(error: Error) {
     console.log(`Error caught in App error boundary ${error.message}`, error);
   }
 
-  render() {
+  override render() {
     if (this.state.hasError) {
       return <h1>Something went wrong</h1>;
     }

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

@@ -0,0 +1,7 @@
+export const DATA_SOURCES = {
+  chainExplorerUrl:
+    'https://explorer.vega.trading/.netlify/functions/chain-explorer-api',
+  tendermintUrl: 'https://lb.testnet.vega.xyz/tm',
+  tendermintWebsocketUrl: 'wss://lb.testnet.vega.xyz/tm/websocket',
+  dataNodeUrl: 'https://lb.testnet.vega.xyz/query',
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

apps/explorer/src/app/src/lib/apollo-client.tsx

@@ -46,7 +46,7 @@ export function createClient(base?: string) {
   });
 
   return new ApolloClient({
-    connectToDevTools: process.env.NODE_ENV === "development",
+    connectToDevTools: process.env["NODE_ENV"] === "development",
     link: from([errorLink, retryLink, httpLink]),
     cache,
   });

apps/explorer/src/app/src/routes/assets/__generated__/AssetsQuery.ts

@@ -3,14 +3,14 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./../../../__generated__/globalTypes";
+import { AccountType } from '../../../__generated__/globalTypes';
 
 // ====================================================
 // GraphQL query operation: AssetsQuery
 // ====================================================
 
 export interface AssetsQuery_assets_source_ERC20 {
-  __typename: "ERC20";
+  __typename: 'ERC20';
   /**
    * The address of the erc20 contract
    */
@@ -18,17 +18,19 @@ export interface AssetsQuery_assets_source_ERC20 {
 }
 
 export interface AssetsQuery_assets_source_BuiltinAsset {
-  __typename: "BuiltinAsset";
+  __typename: 'BuiltinAsset';
   /**
    * Maximum amount that can be requested by a party through the built-in asset faucet at a time
    */
   maxFaucetAmountMint: string;
 }
 
-export type AssetsQuery_assets_source = AssetsQuery_assets_source_ERC20 | AssetsQuery_assets_source_BuiltinAsset;
+export type AssetsQuery_assets_source =
+  | AssetsQuery_assets_source_ERC20
+  | AssetsQuery_assets_source_BuiltinAsset;
 
 export interface AssetsQuery_assets_infrastructureFeeAccount_market {
-  __typename: "Market";
+  __typename: 'Market';
   /**
    * Market ID
    */
@@ -36,7 +38,7 @@ export interface AssetsQuery_assets_infrastructureFeeAccount_market {
 }
 
 export interface AssetsQuery_assets_infrastructureFeeAccount {
-  __typename: "Account";
+  __typename: 'Account';
   /**
    * Account type (General, Margin, etc)
    */
@@ -52,7 +54,7 @@ export interface AssetsQuery_assets_infrastructureFeeAccount {
 }
 
 export interface AssetsQuery_assets {
-  __typename: "Asset";
+  __typename: 'Asset';
   /**
    * The id of the asset
    */

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

@@ -1,22 +1,22 @@
-import React from "react";
-import { useParams } from "react-router-dom";
-import { DATA_SOURCES } from "../../../config";
-import useFetch from "../../../hooks/use-fetch";
-import { ChainExplorerTxResponse } from "../../types/chain-explorer-response";
-import { TendermintBlocksResponse } from "../tendermint-blocks-response";
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { DATA_SOURCES } from '../../../config';
+import useFetch from '../../../hooks/use-fetch';
+import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
+import { TendermintBlocksResponse } from '../tendermint-blocks-response';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
   const { data: decodedBlockData } = useFetch<ChainExplorerTxResponse[]>(
     DATA_SOURCES.chainExplorerUrl,
     {
-      method: "POST",
-      mode: "cors",
+      method: 'POST',
+      mode: 'cors',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        block_height: parseInt(block),
+        block_height: parseInt(block!),
         node_url: `${DATA_SOURCES.tendermintUrl}/`,
       }),
     }
@@ -30,9 +30,9 @@ const Block = () => {
     <section>
       <h1>block</h1>
       <h2>Tendermint Data</h2>
-      <pre>{JSON.stringify(blockData, null, "  ")}</pre>
+      <pre>{JSON.stringify(blockData, null, '  ')}</pre>
       <h2>Decoded data</h2>
-      <pre>{JSON.stringify(decodedBlockData, null, "  ")}</pre>
+      <pre>{JSON.stringify(decodedBlockData, null, '  ')}</pre>
     </section>
   );
 };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Blocks } from './home';
+import { Block } from './id';
+
+const BlockPage = () => {
+  return (
+    <Routes>
+      <Route index={true} element={<Blocks />} />
+      <Route path={`/:block`} element={<Block />} />
+    </Routes>
+  );
+};
+
+export default BlockPage;

apps/explorer/src/app/src/routes/governance/__generated__/ProposalsQuery.ts

@@ -3,14 +3,18 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { ProposalState, ProposalRejectionReason, VoteValue } from "./../../../__generated__/globalTypes";
+import {
+  ProposalState,
+  ProposalRejectionReason,
+  VoteValue,
+} from '../../../__generated__/globalTypes';
 
 // ====================================================
 // GraphQL query operation: ProposalsQuery
 // ====================================================
 
 export interface ProposalsQuery_proposals_party {
-  __typename: "Party";
+  __typename: 'Party';
   /**
    * Party identifier
    */
@@ -18,7 +22,7 @@ export interface ProposalsQuery_proposals_party {
 }
 
 export interface ProposalsQuery_proposals_terms_change_NewMarket_instrument {
-  __typename: "InstrumentConfiguration";
+  __typename: 'InstrumentConfiguration';
   /**
    * Full and fairly descriptive name for the instrument
    */
@@ -26,7 +30,7 @@ export interface ProposalsQuery_proposals_terms_change_NewMarket_instrument {
 }
 
 export interface ProposalsQuery_proposals_terms_change_NewMarket {
-  __typename: "NewMarket";
+  __typename: 'NewMarket';
   /**
    * New market instrument configuration
    */
@@ -34,12 +38,12 @@ export interface ProposalsQuery_proposals_terms_change_NewMarket {
 }
 
 export interface ProposalsQuery_proposals_terms_change_UpdateMarket {
-  __typename: "UpdateMarket";
+  __typename: 'UpdateMarket';
   marketId: string;
 }
 
 export interface ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAsset {
-  __typename: "BuiltinAsset";
+  __typename: 'BuiltinAsset';
   /**
    * Maximum amount that can be requested by a party through the built-in asset faucet at a time
    */
@@ -47,17 +51,19 @@ export interface ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAs
 }
 
 export interface ProposalsQuery_proposals_terms_change_NewAsset_source_ERC20 {
-  __typename: "ERC20";
+  __typename: 'ERC20';
   /**
    * The address of the erc20 contract
    */
   contractAddress: string;
 }
 
-export type ProposalsQuery_proposals_terms_change_NewAsset_source = ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAsset | ProposalsQuery_proposals_terms_change_NewAsset_source_ERC20;
+export type ProposalsQuery_proposals_terms_change_NewAsset_source =
+  | ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAsset
+  | ProposalsQuery_proposals_terms_change_NewAsset_source_ERC20;
 
 export interface ProposalsQuery_proposals_terms_change_NewAsset {
-  __typename: "NewAsset";
+  __typename: 'NewAsset';
   /**
    * The symbol of the asset (e.g: GBP)
    */
@@ -69,7 +75,7 @@ export interface ProposalsQuery_proposals_terms_change_NewAsset {
 }
 
 export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_networkParameter {
-  __typename: "NetworkParameter";
+  __typename: 'NetworkParameter';
   /**
    * The name of the network parameter
    */
@@ -81,14 +87,18 @@ export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_ne
 }
 
 export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter {
-  __typename: "UpdateNetworkParameter";
+  __typename: 'UpdateNetworkParameter';
   networkParameter: ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_networkParameter;
 }
 
-export type ProposalsQuery_proposals_terms_change = ProposalsQuery_proposals_terms_change_NewMarket | ProposalsQuery_proposals_terms_change_UpdateMarket | ProposalsQuery_proposals_terms_change_NewAsset | ProposalsQuery_proposals_terms_change_UpdateNetworkParameter;
+export type ProposalsQuery_proposals_terms_change =
+  | ProposalsQuery_proposals_terms_change_NewMarket
+  | ProposalsQuery_proposals_terms_change_UpdateMarket
+  | ProposalsQuery_proposals_terms_change_NewAsset
+  | ProposalsQuery_proposals_terms_change_UpdateNetworkParameter;
 
 export interface ProposalsQuery_proposals_terms {
-  __typename: "ProposalTerms";
+  __typename: 'ProposalTerms';
   /**
    * RFC3339Nano time and date when voting closes for this proposal.
    * Constrained by "minClose" and "maxClose" network parameters.
@@ -106,7 +116,7 @@ export interface ProposalsQuery_proposals_terms {
 }
 
 export interface ProposalsQuery_proposals_votes_yes_votes_party_stake {
-  __typename: "PartyStake";
+  __typename: 'PartyStake';
   /**
    * The stake currently available for the party
    */
@@ -114,7 +124,7 @@ export interface ProposalsQuery_proposals_votes_yes_votes_party_stake {
 }
 
 export interface ProposalsQuery_proposals_votes_yes_votes_party {
-  __typename: "Party";
+  __typename: 'Party';
   /**
    * Party identifier
    */
@@ -126,7 +136,7 @@ export interface ProposalsQuery_proposals_votes_yes_votes_party {
 }
 
 export interface ProposalsQuery_proposals_votes_yes_votes {
-  __typename: "Vote";
+  __typename: 'Vote';
   /**
    * The vote value cast
    */
@@ -142,7 +152,7 @@ export interface ProposalsQuery_proposals_votes_yes_votes {
 }
 
 export interface ProposalsQuery_proposals_votes_yes {
-  __typename: "ProposalVoteSide";
+  __typename: 'ProposalVoteSide';
   /**
    * Total tokens of governance token from the votes casted for this side
    */
@@ -158,7 +168,7 @@ export interface ProposalsQuery_proposals_votes_yes {
 }
 
 export interface ProposalsQuery_proposals_votes_no_votes_party_stake {
-  __typename: "PartyStake";
+  __typename: 'PartyStake';
   /**
    * The stake currently available for the party
    */
@@ -166,7 +176,7 @@ export interface ProposalsQuery_proposals_votes_no_votes_party_stake {
 }
 
 export interface ProposalsQuery_proposals_votes_no_votes_party {
-  __typename: "Party";
+  __typename: 'Party';
   /**
    * Party identifier
    */
@@ -178,7 +188,7 @@ export interface ProposalsQuery_proposals_votes_no_votes_party {
 }
 
 export interface ProposalsQuery_proposals_votes_no_votes {
-  __typename: "Vote";
+  __typename: 'Vote';
   /**
    * The vote value cast
    */
@@ -194,7 +204,7 @@ export interface ProposalsQuery_proposals_votes_no_votes {
 }
 
 export interface ProposalsQuery_proposals_votes_no {
-  __typename: "ProposalVoteSide";
+  __typename: 'ProposalVoteSide';
   /**
    * Total tokens of governance token from the votes casted for this side
    */
@@ -210,7 +220,7 @@ export interface ProposalsQuery_proposals_votes_no {
 }
 
 export interface ProposalsQuery_proposals_votes {
-  __typename: "ProposalVotes";
+  __typename: 'ProposalVotes';
   /**
    * Yes votes cast for this proposal
    */
@@ -222,7 +232,7 @@ export interface ProposalsQuery_proposals_votes {
 }
 
 export interface ProposalsQuery_proposals {
-  __typename: "Proposal";
+  __typename: 'Proposal';
   /**
    * Proposal ID that is filled by VEGA once proposal reaches the network
    */

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { RouteErrorBoundary } from '../components/router-error-boundary';
+
+import { SplashLoader } from '../components/splash-loader';
+import { SplashScreen } from '../components/splash-screen';
+import Home from './home';
+import routerConfig from './router-config';
+
+export interface RouteChildProps {
+  name: string;
+}
+
+export const AppRouter = () => {
+  const splashLoading = (
+    <SplashScreen>
+      <SplashLoader />
+    </SplashScreen>
+  );
+
+  return (
+    <RouteErrorBoundary>
+      <React.Suspense fallback={splashLoading}>
+        <Routes>
+          <>
+            {routerConfig.map(({ path, component: Component, name }) => (
+              <Route key={name} path={path} element={<Component />} />
+            ))}
+          </>
+        </Routes>
+      </React.Suspense>
+    </RouteErrorBoundary>
+  );
+};

apps/explorer/src/app/src/routes/markets/__generated__/MarketsQuery.ts

@@ -3,14 +3,19 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MarketTradingMode, MarketState, AccountType, AuctionTrigger } from "./../../../__generated__/globalTypes";
+import {
+  MarketTradingMode,
+  MarketState,
+  AccountType,
+  AuctionTrigger,
+} from '../../../__generated__/globalTypes';
 
 // ====================================================
 // GraphQL query operation: MarketsQuery
 // ====================================================
 
 export interface MarketsQuery_markets_fees_factors {
-  __typename: "FeeFactors";
+  __typename: 'FeeFactors';
   /**
    * The factor applied to calculate MakerFees, a non-negative float
    */
@@ -26,7 +31,7 @@ export interface MarketsQuery_markets_fees_factors {
 }
 
 export interface MarketsQuery_markets_fees {
-  __typename: "Fees";
+  __typename: 'Fees';
   /**
    * The factors used to calculate the different fees
    */
@@ -34,7 +39,7 @@ export interface MarketsQuery_markets_fees {
 }
 
 export interface MarketsQuery_markets_tradableInstrument_instrument_metadata {
-  __typename: "InstrumentMetadata";
+  __typename: 'InstrumentMetadata';
   /**
    * An arbitrary list of tags to associated to associate to the Instrument (string list)
    */
@@ -42,7 +47,7 @@ export interface MarketsQuery_markets_tradableInstrument_instrument_metadata {
 }
 
 export interface MarketsQuery_markets_tradableInstrument_instrument_product_settlementAsset_globalRewardPoolAccount {
-  __typename: "Account";
+  __typename: 'Account';
   /**
    * Balance as string - current account balance (approx. as balances can be updated several times per second)
    */
@@ -50,7 +55,7 @@ export interface MarketsQuery_markets_tradableInstrument_instrument_product_sett
 }
 
 export interface MarketsQuery_markets_tradableInstrument_instrument_product_settlementAsset {
-  __typename: "Asset";
+  __typename: 'Asset';
   /**
    * The id of the asset
    */
@@ -74,7 +79,7 @@ export interface MarketsQuery_markets_tradableInstrument_instrument_product_sett
 }
 
 export interface MarketsQuery_markets_tradableInstrument_instrument_product {
-  __typename: "Future";
+  __typename: 'Future';
   /**
    * RFC3339Nano maturity date of the product
    */
@@ -86,7 +91,7 @@ export interface MarketsQuery_markets_tradableInstrument_instrument_product {
 }
 
 export interface MarketsQuery_markets_tradableInstrument_instrument {
-  __typename: "Instrument";
+  __typename: 'Instrument';
   /**
    * Full and fairly descriptive name for the instrument
    */
@@ -110,7 +115,7 @@ export interface MarketsQuery_markets_tradableInstrument_instrument {
 }
 
 export interface MarketsQuery_markets_tradableInstrument_riskModel_LogNormalRiskModel_params {
-  __typename: "LogNormalModelParams";
+  __typename: 'LogNormalModelParams';
   /**
    * r parameter
    */
@@ -126,7 +131,7 @@ export interface MarketsQuery_markets_tradableInstrument_riskModel_LogNormalRisk
 }
 
 export interface MarketsQuery_markets_tradableInstrument_riskModel_LogNormalRiskModel {
-  __typename: "LogNormalRiskModel";
+  __typename: 'LogNormalRiskModel';
   /**
    * Tau parameter of the risk model
    */
@@ -142,7 +147,7 @@ export interface MarketsQuery_markets_tradableInstrument_riskModel_LogNormalRisk
 }
 
 export interface MarketsQuery_markets_tradableInstrument_riskModel_SimpleRiskModel_params {
-  __typename: "SimpleRiskModelParams";
+  __typename: 'SimpleRiskModelParams';
   /**
    * Risk factor for long
    */
@@ -154,17 +159,19 @@ export interface MarketsQuery_markets_tradableInstrument_riskModel_SimpleRiskMod
 }
 
 export interface MarketsQuery_markets_tradableInstrument_riskModel_SimpleRiskModel {
-  __typename: "SimpleRiskModel";
+  __typename: 'SimpleRiskModel';
   /**
    * Params for the simple risk model
    */
   params: MarketsQuery_markets_tradableInstrument_riskModel_SimpleRiskModel_params;
 }
 
-export type MarketsQuery_markets_tradableInstrument_riskModel = MarketsQuery_markets_tradableInstrument_riskModel_LogNormalRiskModel | MarketsQuery_markets_tradableInstrument_riskModel_SimpleRiskModel;
+export type MarketsQuery_markets_tradableInstrument_riskModel =
+  | MarketsQuery_markets_tradableInstrument_riskModel_LogNormalRiskModel
+  | MarketsQuery_markets_tradableInstrument_riskModel_SimpleRiskModel;
 
 export interface MarketsQuery_markets_tradableInstrument_marginCalculator_scalingFactors {
-  __typename: "ScalingFactors";
+  __typename: 'ScalingFactors';
   /**
    * the scaling factor that determines the margin level at which Vega has to search for more money
    */
@@ -180,7 +187,7 @@ export interface MarketsQuery_markets_tradableInstrument_marginCalculator_scalin
 }
 
 export interface MarketsQuery_markets_tradableInstrument_marginCalculator {
-  __typename: "MarginCalculator";
+  __typename: 'MarginCalculator';
   /**
    * The scaling factors that will be used for margin calculation
    */
@@ -188,7 +195,7 @@ export interface MarketsQuery_markets_tradableInstrument_marginCalculator {
 }
 
 export interface MarketsQuery_markets_tradableInstrument {
-  __typename: "TradableInstrument";
+  __typename: 'TradableInstrument';
   /**
    * An instance of or reference to a fully specified instrument.
    */
@@ -204,7 +211,7 @@ export interface MarketsQuery_markets_tradableInstrument {
 }
 
 export interface MarketsQuery_markets_openingAuction {
-  __typename: "AuctionDuration";
+  __typename: 'AuctionDuration';
   /**
    * Duration of the auction in seconds
    */
@@ -216,7 +223,7 @@ export interface MarketsQuery_markets_openingAuction {
 }
 
 export interface MarketsQuery_markets_priceMonitoringSettings_parameters_triggers {
-  __typename: "PriceMonitoringTrigger";
+  __typename: 'PriceMonitoringTrigger';
   /**
    * Price monitoring projection horizon τ in seconds (> 0).
    */
@@ -234,15 +241,17 @@ export interface MarketsQuery_markets_priceMonitoringSettings_parameters_trigger
 }
 
 export interface MarketsQuery_markets_priceMonitoringSettings_parameters {
-  __typename: "PriceMonitoringParameters";
+  __typename: 'PriceMonitoringParameters';
   /**
    * The list of triggers for this price monitoring
    */
-  triggers: MarketsQuery_markets_priceMonitoringSettings_parameters_triggers[] | null;
+  triggers:
+    | MarketsQuery_markets_priceMonitoringSettings_parameters_triggers[]
+    | null;
 }
 
 export interface MarketsQuery_markets_priceMonitoringSettings {
-  __typename: "PriceMonitoringSettings";
+  __typename: 'PriceMonitoringSettings';
   /**
    * Specified a set of PriceMonitoringParameters to be use for price monitoring purposes
    */
@@ -254,7 +263,7 @@ export interface MarketsQuery_markets_priceMonitoringSettings {
 }
 
 export interface MarketsQuery_markets_liquidityMonitoringParameters_targetStakeParameters {
-  __typename: "TargetStakeParameters";
+  __typename: 'TargetStakeParameters';
   /**
    * Specifies length of time window expressed in seconds for target stake calculation
    */
@@ -266,7 +275,7 @@ export interface MarketsQuery_markets_liquidityMonitoringParameters_targetStakeP
 }
 
 export interface MarketsQuery_markets_liquidityMonitoringParameters {
-  __typename: "LiquidityMonitoringParameters";
+  __typename: 'LiquidityMonitoringParameters';
   /**
    * Specifies the triggering ratio for entering liquidity auction
    */
@@ -278,7 +287,7 @@ export interface MarketsQuery_markets_liquidityMonitoringParameters {
 }
 
 export interface MarketsQuery_markets_proposal {
-  __typename: "Proposal";
+  __typename: 'Proposal';
   /**
    * Proposal ID that is filled by VEGA once proposal reaches the network
    */
@@ -286,7 +295,7 @@ export interface MarketsQuery_markets_proposal {
 }
 
 export interface MarketsQuery_markets_accounts_asset {
-  __typename: "Asset";
+  __typename: 'Asset';
   /**
    * The id of the asset
    */
@@ -298,7 +307,7 @@ export interface MarketsQuery_markets_accounts_asset {
 }
 
 export interface MarketsQuery_markets_accounts {
-  __typename: "Account";
+  __typename: 'Account';
   /**
    * Asset, the 'currency'
    */
@@ -314,7 +323,7 @@ export interface MarketsQuery_markets_accounts {
 }
 
 export interface MarketsQuery_markets_data_priceMonitoringBounds_trigger {
-  __typename: "PriceMonitoringTrigger";
+  __typename: 'PriceMonitoringTrigger';
   /**
    * Price monitoring auction extension duration in seconds should the price
    * breach it's theoretical level over the specified horizon at the specified
@@ -328,7 +337,7 @@ export interface MarketsQuery_markets_data_priceMonitoringBounds_trigger {
 }
 
 export interface MarketsQuery_markets_data_priceMonitoringBounds {
-  __typename: "PriceMonitoringBounds";
+  __typename: 'PriceMonitoringBounds';
   /**
    * Minimum price that isn't currently breaching the specified price monitoring trigger
    */
@@ -348,7 +357,7 @@ export interface MarketsQuery_markets_data_priceMonitoringBounds {
 }
 
 export interface MarketsQuery_markets_data_liquidityProviderFeeShare_party {
-  __typename: "Party";
+  __typename: 'Party';
   /**
    * Party identifier
    */
@@ -356,7 +365,7 @@ export interface MarketsQuery_markets_data_liquidityProviderFeeShare_party {
 }
 
 export interface MarketsQuery_markets_data_liquidityProviderFeeShare {
-  __typename: "LiquidityProviderFeeShare";
+  __typename: 'LiquidityProviderFeeShare';
   /**
    * The liquidity provider party id
    */
@@ -372,7 +381,7 @@ export interface MarketsQuery_markets_data_liquidityProviderFeeShare {
 }
 
 export interface MarketsQuery_markets_data {
-  __typename: "MarketData";
+  __typename: 'MarketData';
   /**
    * the mark price (actually an unsgined int)
    */
@@ -460,7 +469,9 @@ export interface MarketsQuery_markets_data {
   /**
    * A list of valid price ranges per associated trigger
    */
-  priceMonitoringBounds: MarketsQuery_markets_data_priceMonitoringBounds[] | null;
+  priceMonitoringBounds:
+    | MarketsQuery_markets_data_priceMonitoringBounds[]
+    | null;
   /**
    * the market value proxy
    */
@@ -468,11 +479,13 @@ export interface MarketsQuery_markets_data {
   /**
    * the equity like share of liquidity fee for each liquidity provider
    */
-  liquidityProviderFeeShare: MarketsQuery_markets_data_liquidityProviderFeeShare[] | null;
+  liquidityProviderFeeShare:
+    | MarketsQuery_markets_data_liquidityProviderFeeShare[]
+    | null;
 }
 
 export interface MarketsQuery_markets {
-  __typename: "Market";
+  __typename: 'Market';
   /**
    * Market ID
    */
@@ -492,14 +505,14 @@ export interface MarketsQuery_markets {
   /**
    * decimalPlaces indicates the number of decimal places that an integer must be shifted by in order to get a correct
    * number denominated in the currency of the Market. (uint64)
-   * 
+   *
    * Examples:
    * Currency     Balance  decimalPlaces  Real Balance
    * GBP              100              0       GBP 100
    * GBP              100              2       GBP   1.00
    * GBP              100              4       GBP   0.01
    * GBP                1              4       GBP   0.0001   (  0.01p  )
-   * 
+   *
    * GBX (pence)      100              0       GBP   1.00     (100p     )
    * GBX (pence)      100              2       GBP   0.01     (  1p     )
    * GBX (pence)      100              4       GBP   0.0001   (  0.01p  )

apps/explorer/src/app/src/routes/parties/id/__generated__/PartyAssetsQuery.ts

@@ -3,14 +3,14 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./../../../../__generated__/globalTypes";
+import { AccountType } from '../../../../__generated__/globalTypes';
 
 // ====================================================
 // GraphQL query operation: PartyAssetsQuery
 // ====================================================
 
 export interface PartyAssetsQuery_party_delegations_node {
-  __typename: "Node";
+  __typename: 'Node';
   /**
    * The node url eg n01.vega.xyz
    */
@@ -19,7 +19,7 @@ export interface PartyAssetsQuery_party_delegations_node {
 }
 
 export interface PartyAssetsQuery_party_delegations {
-  __typename: "Delegation";
+  __typename: 'Delegation';
   /**
    * Amount delegated
    */
@@ -35,7 +35,7 @@ export interface PartyAssetsQuery_party_delegations {
 }
 
 export interface PartyAssetsQuery_party_stake {
-  __typename: "PartyStake";
+  __typename: 'PartyStake';
   /**
    * The stake currently available for the party
    */
@@ -43,21 +43,23 @@ export interface PartyAssetsQuery_party_stake {
 }
 
 export interface PartyAssetsQuery_party_accounts_asset_source_BuiltinAsset {
-  __typename: "BuiltinAsset";
+  __typename: 'BuiltinAsset';
 }
 
 export interface PartyAssetsQuery_party_accounts_asset_source_ERC20 {
-  __typename: "ERC20";
+  __typename: 'ERC20';
   /**
    * The address of the erc20 contract
    */
   contractAddress: string;
 }
 
-export type PartyAssetsQuery_party_accounts_asset_source = PartyAssetsQuery_party_accounts_asset_source_BuiltinAsset | PartyAssetsQuery_party_accounts_asset_source_ERC20;
+export type PartyAssetsQuery_party_accounts_asset_source =
+  | PartyAssetsQuery_party_accounts_asset_source_BuiltinAsset
+  | PartyAssetsQuery_party_accounts_asset_source_ERC20;
 
 export interface PartyAssetsQuery_party_accounts_asset {
-  __typename: "Asset";
+  __typename: 'Asset';
   /**
    * The full name of the asset (e.g: Great British Pound)
    */
@@ -81,7 +83,7 @@ export interface PartyAssetsQuery_party_accounts_asset {
 }
 
 export interface PartyAssetsQuery_party_accounts {
-  __typename: "Account";
+  __typename: 'Account';
   /**
    * Asset, the 'currency'
    */
@@ -97,7 +99,7 @@ export interface PartyAssetsQuery_party_accounts {
 }
 
 export interface PartyAssetsQuery_party {
-  __typename: "Party";
+  __typename: 'Party';
   /**
    * Party identifier
    */

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

@@ -1,14 +1,14 @@
-import { useQuery } from "@apollo/client";
-import { gql } from "@apollo/client";
-import React from "react";
-import { useParams } from "react-router-dom";
-import { DATA_SOURCES } from "../../../config";
-import useFetch from "../../../hooks/use-fetch";
-import { TendermintSearchTransactionResponse } from "../tendermint-transaction-response";
+import { useQuery } from '@apollo/client';
+import { gql } from '@apollo/client';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { DATA_SOURCES } from '../../../config';
+import useFetch from '../../../hooks/use-fetch';
+import { TendermintSearchTransactionResponse } from '../tendermint-transaction-response';
 import {
   PartyAssetsQuery,
   PartyAssetsQueryVariables,
-} from "./__generated__/PartyAssetsQuery";
+} from './__generated__/PartyAssetsQuery';
 
 const PARTY_ASSETS_QUERY = gql`
   query PartyAssetsQuery($partyId: ID!) {
@@ -55,8 +55,9 @@ const Party = () => {
     PARTY_ASSETS_QUERY,
     {
       // Don't cache data for this query, party information can move quite quickly
-      fetchPolicy: "network-only",
-      variables: { partyId: party.replace("0x", "") },
+      fetchPolicy: 'network-only',
+      variables: { partyId: party!.replace('0x', '') },
+      skip: !party,
     }
   );
 
@@ -64,9 +65,9 @@ const Party = () => {
     <section>
       <h1>Party</h1>
       <h2>Tendermint Data</h2>
-      <pre>{JSON.stringify(partyData, null, "  ")}</pre>
+      <pre>{JSON.stringify(partyData, null, '  ')}</pre>
       <h2>Asset data</h2>
-      <pre>{JSON.stringify(data, null, "  ")}</pre>
+      <pre>{JSON.stringify(data, null, '  ')}</pre>
     </section>
   );
 };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Parties } from './home';
+import { Party } from './id';
+
+const PartiesPage = () => {
+  return (
+    <Routes>
+      <Route index={true} element={<Parties />} />
+      <Route path={`/:party`} element={<Party />} />
+    </Routes>
+  );
+};
+
+export default PartiesPage;

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

@@ -0,0 +1,79 @@
+import Assets from './assets';
+import Blocks from './blocks';
+import Governance from './governance';
+import Home from './home';
+import Markets from './markets';
+import Party from './parties';
+import Txs from './txs';
+import Validators from './validators';
+import Genesis from './genesis';
+import NetworkParameters from './network-parameters';
+
+export const Routes = {
+  HOME: '/',
+  TX: 'txs/*',
+  BLOCKS: 'blocks/*',
+  PARTIES: 'parties/*',
+  VALIDATORS: 'validators/*',
+  ASSETS: 'assets/*',
+  GENESIS: 'genesis/*',
+  GOVERNANCE: 'governance/*',
+  MARKETS: 'markets/*',
+  NETWORK_PARAMETERS: 'network-parameters/*',
+};
+
+const routerConfig = [
+  {
+    path: Routes.HOME,
+    name: 'Home',
+    component: Home,
+    index: true,
+  },
+  {
+    path: `${Routes.TX}/*`,
+    name: 'Txs',
+    component: Txs,
+  },
+  {
+    path: Routes.BLOCKS,
+    name: 'Blocks',
+    component: Blocks,
+  },
+  {
+    path: Routes.PARTIES,
+    name: 'Parties',
+    component: Party,
+  },
+  {
+    path: Routes.ASSETS,
+    name: 'Assets',
+    component: Assets,
+  },
+  {
+    path: Routes.GENESIS,
+    name: 'Genesis',
+    component: Genesis,
+  },
+  {
+    path: Routes.GOVERNANCE,
+    name: 'Governance',
+    component: Governance,
+  },
+  {
+    path: Routes.MARKETS,
+    name: 'Markets',
+    component: Markets,
+  },
+  {
+    path: Routes.NETWORK_PARAMETERS,
+    name: 'NetworkParameters',
+    component: NetworkParameters,
+  },
+  {
+    path: Routes.VALIDATORS,
+    name: 'Validators',
+    component: Validators,
+  },
+];
+
+export default routerConfig;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Txs } from './home';
+import { Tx } from './id';
+
+const TxPage = () => {
+  return (
+    <Routes>
+      <Route index={true} element={<Txs />} />
+      <Route path={`/:txHash`} element={<Tx />} />
+    </Routes>
+  );
+};
+
+export default TxPage;

apps/explorer/src/app/src/routes/validators/__generated__/NodesQuery.ts

@@ -3,14 +3,14 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { NodeStatus } from "./../../../__generated__/globalTypes";
+import { NodeStatus } from '../../../__generated__/globalTypes';
 
 // ====================================================
 // GraphQL query operation: NodesQuery
 // ====================================================
 
 export interface NodesQuery_nodes_epochData {
-  __typename: "EpochData";
+  __typename: 'EpochData';
   /**
    * Total number of epochs since node was created
    */
@@ -26,7 +26,7 @@ export interface NodesQuery_nodes_epochData {
 }
 
 export interface NodesQuery_nodes {
-  __typename: "Node";
+  __typename: 'Node';
   /**
    * The node url eg n01.vega.xyz
    */

apps/explorer/src/app/src/styles/_fonts.scss

@@ -0,0 +1,16 @@
+$font-main: 'Helvetica neue', 'Helvetica', arial, sans-serif;
+$font-mono: 'Roboto Mono', monospace;
+$font-alpa-lyrae: AlphaLyrae, 'Helvetica neue', 'Helvetica', arial, sans-serif;
+
+.font-main {
+  font-family: $font-main;
+}
+
+.font-mono {
+  font-family: $font-mono;
+}
+
+@font-face {
+  font-family: AlphaLyrae;
+  // src: url(./AlphaLyrae-Medium.woff);
+}

apps/explorer/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

apps/explorer/src/environments/environment.ts

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false,
+};

apps/explorer/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Explorer</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

apps/explorer/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+
+import App from './app/app';
+
+ReactDOM.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+  document.getElementById('root')
+);

apps/explorer/src/polyfills.ts

@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';

apps/explorer/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

apps/explorer/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

apps/explorer/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

apps/explorer/tsconfig.spec.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ],
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ]
+}

apps/vega-explorer/src/App.tsx

@@ -1,35 +0,0 @@
-import "./App.scss";
-
-import { ApolloProvider } from "@apollo/client";
-
-import { createClient } from "./lib/apollo-client";
-import { BrowserRouter as Router } from "react-router-dom";
-import { Nav } from "./components/nav";
-import { Footer } from "./components/footer";
-import { Header } from "./components/header";
-import { Main } from "./components/main";
-import React from "react";
-import { DATA_SOURCES } from "./config";
-import { TendermintWebsocketProvider } from "./contexts/websocket/tendermint-websocket-provider";
-
-function App() {
-  const [client] = React.useState(createClient(DATA_SOURCES.dataNodeUrl));
-  return (
-    <Router>
-      <TendermintWebsocketProvider>
-        <ApolloProvider client={client}>
-          <div className="app">
-            <div className="template-sidebar">
-              <Nav />
-              <Header />
-              <Main />
-              <Footer />
-            </div>
-          </div>
-        </ApolloProvider>
-      </TendermintWebsocketProvider>
-    </Router>
-  );
-}
-
-export default App;

apps/vega-explorer/src/components/nav/index.tsx

@@ -1,15 +0,0 @@
-import { Link } from "react-router-dom";
-import routerConfig from "../../routes/router-config";
-
-export const Nav = () => {
-  return (
-    <nav>
-      {routerConfig.map((r) => (
-        <div key={r.name}>
-          <Link to={r.path}>{r.name}</Link>
-          <br />
-        </div>
-      ))}
-    </nav>
-  );
-};

apps/vega-explorer/src/config/index.tsx

@@ -1,7 +0,0 @@
-export const DATA_SOURCES = {
-  chainExplorerUrl: process.env.REACT_APP_CHAIN_EXPLORER_URL as string,
-  tendermintUrl: process.env.REACT_APP_TENDERMINT_URL as string,
-  tendermintWebsocketUrl: process.env
-    .REACT_APP_TENDERMINT_WEBSOCKET_URL as string,
-  dataNodeUrl: process.env.REACT_APP_VEGA_URL as string,
-};

apps/vega-explorer/src/index.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

apps/vega-explorer/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

apps/vega-explorer/src/routes/blocks/index.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Route, Switch, useRouteMatch } from "react-router-dom";
-import { Blocks } from "./home";
-import { Block } from "./id";
-
-const BlockPage = () => {
-  const match = useRouteMatch();
-
-  return (
-    <Switch>
-      <Route path={match.path} exact={true}>
-        <Blocks />
-      </Route>
-      <Route path={`${match.path}/:block`}>
-        <Block />
-      </Route>
-    </Switch>
-  );
-};
-
-export default BlockPage;

apps/vega-explorer/src/routes/index.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { RouteErrorBoundary } from "../components/router-error-boundary";
-
-import { SplashLoader } from "../components/splash-loader";
-import { SplashScreen } from "../components/splash-screen";
-import routerConfig from "./router-config";
-
-export interface RouteChildProps {
-  name: string;
-}
-
-export const AppRouter = () => {
-  const splashLoading = (
-    <SplashScreen>
-      <SplashLoader />
-    </SplashScreen>
-  );
-
-  return (
-    <RouteErrorBoundary>
-      <React.Suspense fallback={splashLoading}>
-        <Switch>
-          {routerConfig.map(
-            ({ path, component: Component, exact = false, name }) => (
-              <Route key={name} path={path} exact={exact}>
-                <Component />
-              </Route>
-            )
-          )}
-        </Switch>
-      </React.Suspense>
-    </RouteErrorBoundary>
-  );
-};

apps/vega-explorer/src/routes/parties/index.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Route, Switch, useRouteMatch } from "react-router-dom";
-import { Parties } from "./home";
-import { Party } from "./id";
-
-const PartiesPage = () => {
-  const match = useRouteMatch();
-
-  return (
-    <Switch>
-      <Route path={match.path} exact={true}>
-        <Parties />
-      </Route>
-      <Route path={`${match.path}/:party`}>
-        <Party />
-      </Route>
-    </Switch>
-  );
-};
-
-export default PartiesPage;