Merge branch 'master' into feature/29-market-list-table-improvments

apps/explorer-e2e/.env

@@ -2,6 +2,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
 
 NX_EXPLORER_ASSETS = 1
 NX_EXPLORER_GENESIS = 1

apps/explorer-e2e/.env.devent

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Devnet'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.mainnet

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Mainnet'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.stagnet1

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Stagnet 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.stagnet2

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Stagnet 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer-e2e/.env.testnet

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer/.env.devent

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Devnet'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'

apps/explorer/.env.local

@@ -3,6 +3,8 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'
 
 # App flags
 NX_EXPLORER_ASSETS = 1

apps/explorer/.env.mainnet

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Mainnet'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'

apps/explorer/.env.stagnet1

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Stagnet 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

apps/explorer/.env.stagnet2

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Stagnet 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'

apps/explorer/.env.testnet

@@ -3,3 +3,5 @@ NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-
 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"
+NX_VEGA_ENV = 'Testnet'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/explorer/src/app/App.scss

@@ -28,7 +28,6 @@ body,
 
 .template-sidebar {
   border-bottom: 1px solid $white;
-  border-top: 1px solid $white;
   display: grid;
   grid-template-rows: auto minmax(700px, 1fr);
   grid-template-columns: 300px minmax(auto, 1fr);

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

@@ -19,7 +19,7 @@ export const BlockData = ({ block, className }: BlockProps) => {
       <TableRow data-testid="block-row" modifier="background">
         <TableCell
           data-testid="block-height"
-          className="pl-4 py-2"
+          className="pl-4 py-2 font-mono"
           aria-label="Block height"
         >
           <Link
@@ -40,7 +40,7 @@ export const BlockData = ({ block, className }: BlockProps) => {
         </TableCell>
         <TableCell
           data-testid="validator-link"
-          className="px-8 text-center"
+          className="px-8 text-center font-mono"
           aria-label="Validator"
         >
           <Link to={`/${Routes.VALIDATORS}`}>
@@ -49,7 +49,7 @@ export const BlockData = ({ block, className }: BlockProps) => {
         </TableCell>
         <TableCell
           data-testid="block-time"
-          className="text-center pr-28 text-neutral-300"
+          className="text-center pr-28 text-neutral-300 w-[170px]"
           aria-label="Block genesis"
         >
           <SecondsAgo date={block.header?.time} />

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

@@ -3,4 +3,6 @@ export const DATA_SOURCES = {
   tendermintUrl: process.env['NX_TENDERMINT_URL'] as string,
   tendermintWebsocketUrl: process.env['NX_TENDERMINT_WEBSOCKET_URL'] as string,
   dataNodeUrl: process.env['NX_VEGA_URL'] as string,
+  envName: process.env['NX_VEGA_ENV'] as string,
+  restEndpoint: process.env['NX_VEGA_REST'] as string,
 };

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

@@ -36,7 +36,7 @@ const Block = () => {
           <TableCell modifier="bordered">
             <Link
               data-testid="block-validator"
-              className="text-vega-yellow"
+              className="text-vega-yellow font-mono"
               to={'/validators'}
             >
               {header.proposer_address}

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

@@ -1,9 +1,20 @@
-import { StatsManager } from '@vegaprotocol/mainnet-stats-manager';
+import { DATA_SOURCES } from '../../config';
+import { StatsManager } from '@vegaprotocol/network-stats';
+
+const envName = DATA_SOURCES.envName;
+const restEndpoint = DATA_SOURCES.restEndpoint;
+const statsEndpoint = `${restEndpoint}/statistics`;
+const nodesEndpoint = `${restEndpoint}/nodes-data`;
 
 const Home = () => {
   return (
     <section>
-      <StatsManager className="mt-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-16" />
+      <StatsManager
+        envName={envName}
+        statsEndpoint={statsEndpoint}
+        nodesEndpoint={nodesEndpoint}
+        className="mt-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-16"
+      />
     </section>
   );
 };

apps/stats-e2e/.env

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_ENV = 'TESTNET'
+CYPRESS_VEGA_ENV = 'TESTNET'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/stats-e2e/.env.devnet

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_ENV = 'DEVNET'
+CYPRESS_VEGA_ENV = 'DEVNET'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'

apps/stats-e2e/.env.mainnet

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_ENV = 'MAINNET'
+CYPRESS_VEGA_ENV = 'MAINNET'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'

apps/stats-e2e/.env.stagnet1

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_ENV = 'STAGNET 1'
+CYPRESS_VEGA_ENV = 'STAGNET 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

apps/stats-e2e/.env.stagnet2

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_ENV = 'STAGNET 2'
+CYPRESS_VEGA_ENV = 'STAGNET 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'

apps/stats-e2e/.env.testnet

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_ENV = 'TESTNET'
+CYPRESS_VEGA_ENV = 'TESTNET'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/stats-e2e/cypress.json

@@ -8,7 +8,7 @@
   "supportFile": "./src/support/index.ts",
   "pluginsFile": false,
   "video": true,
-  "videosFolder": "../../dist/cypress/apps/stats-mainnet-e2e/videos",
-  "screenshotsFolder": "../../dist/cypress/apps/stats-mainnet-e2e/screenshots",
+  "videosFolder": "../../dist/cypress/apps/stats-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/stats-e2e/screenshots",
   "chromeWebSecurity": false
 }

apps/stats-e2e/project.json

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

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

@@ -0,0 +1,9 @@
+const textToCheck = Cypress.env('VEGA_ENV');
+
+describe('stats', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display header based on environment name', () => {
+    cy.get('h3').should('have.text', `/ ${textToCheck}`);
+  });
+});

apps/stats-mainnet-e2e/project.json

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

apps/stats-mainnet-e2e/src/integration/app.spec.ts

@@ -1,7 +0,0 @@
-describe('stats-mainnet', () => {
-  beforeEach(() => cy.visit('/'));
-
-  it('should display header', () => {
-    cy.get('h3').should('have.text', '/ Mainnet');
-  });
-});

apps/stats/.env.devnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'DEVNET'
+NX_VEGA_REST = 'https://n04.d.vega.xyz/datanode/rest'

apps/stats/.env.mainnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'MAINNET'
+NX_VEGA_REST = 'https://api.token.vega.xyz/'

apps/stats/.env.stagnet1

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'STAGNET 1'
+NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

apps/stats/.env.stagnet2

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'STAGNET 2'
+NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'

apps/stats/.env.testnet

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_ENV = 'TESTNET'
+NX_VEGA_REST = 'https://lb.testnet.vega.xyz/datanode/rest'

apps/stats/jest.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-  displayName: 'stats-mainnet',
+  displayName: 'stats',
   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/stats-mainnet',
+  coverageDirectory: '../../coverage/apps/stats',
   setupFilesAfterEnv: ['./src/setup-tests.ts'],
 };

apps/stats/project.json

@@ -1,6 +1,6 @@
 {
-  "root": "apps/stats-mainnet",
-  "sourceRoot": "apps/stats-mainnet/src",
+  "root": "apps/stats",
+  "sourceRoot": "apps/stats/src",
   "projectType": "application",
   "targets": {
     "build": {
@@ -9,17 +9,17 @@
       "defaultConfiguration": "production",
       "options": {
         "compiler": "babel",
-        "outputPath": "dist/apps/stats-mainnet",
-        "index": "apps/stats-mainnet/src/index.html",
+        "outputPath": "dist/apps/stats",
+        "index": "apps/stats/src/index.html",
         "baseHref": "/",
-        "main": "apps/stats-mainnet/src/main.tsx",
-        "polyfills": "apps/stats-mainnet/src/polyfills.ts",
-        "tsConfig": "apps/stats-mainnet/tsconfig.app.json",
+        "main": "apps/stats/src/main.tsx",
+        "polyfills": "apps/stats/src/polyfills.ts",
+        "tsConfig": "apps/stats/tsconfig.app.json",
         "assets": [
-          "apps/stats-mainnet/src/assets/favicon.ico",
-          "apps/stats-mainnet/src/assets"
+          "apps/stats/src/assets/favicon.ico",
+          "apps/stats/src/assets"
         ],
-        "styles": ["apps/stats-mainnet/src/styles/styles.css"],
+        "styles": ["apps/stats/src/styles/styles.css"],
         "scripts": [],
         "webpackConfig": "@nrwl/react/plugins/webpack"
       },
@@ -27,8 +27,8 @@
         "production": {
           "fileReplacements": [
             {
-              "replace": "apps/stats-mainnet/src/environments/environment.ts",
-              "with": "apps/stats-mainnet/src/environments/environment.prod.ts"
+              "replace": "apps/stats/src/environments/environment.ts",
+              "with": "apps/stats/src/environments/environment.prod.ts"
             }
           ],
           "optimization": true,
@@ -44,12 +44,12 @@
       "executor": "@nrwl/web:dev-server",
       "options": {
         "port": 3010,
-        "buildTarget": "stats-mainnet:build",
+        "buildTarget": "stats:build",
         "hmr": true
       },
       "configurations": {
         "production": {
-          "buildTarget": "stats-mainnet:build:production",
+          "buildTarget": "stats:build:production",
           "hmr": false
         }
       }
@@ -58,14 +58,14 @@
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["apps/stats-mainnet/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": ["apps/stats/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/stats-mainnet"],
+      "outputs": ["coverage/apps/stats"],
       "options": {
-        "jestConfig": "apps/stats-mainnet/jest.config.js",
+        "jestConfig": "apps/stats/jest.config.js",
         "passWithNoTests": true
       }
     }

apps/stats/src/app.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
+import { DATA_SOURCES } from './config';
 import { Header } from './components/header';
-import { StatsManager } from '@vegaprotocol/mainnet-stats-manager';
+import { StatsManager } from '@vegaprotocol/network-stats';
+
+const envName = DATA_SOURCES.envName;
+const restEndpoint = DATA_SOURCES.restEndpoint;
+const statsEndpoint = `${restEndpoint}/statistics`;
+const nodesEndpoint = `${restEndpoint}/nodes-data`;
 
 function App() {
   const [darkMode, setDarkMode] = useState<boolean>(
@@ -15,7 +21,12 @@ function App() {
     >
       <div className="layout-grid w-screen justify-self-center">
         <Header darkMode={darkMode} setDarkMode={setDarkMode} />
-        <StatsManager className="max-w-3xl px-24" />
+        <StatsManager
+          envName={envName}
+          statsEndpoint={statsEndpoint}
+          nodesEndpoint={nodesEndpoint}
+          className="max-w-3xl px-24"
+        />
       </div>
     </div>
   );

apps/stats/src/config/index.tsx

@@ -0,0 +1,4 @@
+export const DATA_SOURCES = {
+  envName: process.env['NX_VEGA_ENV'] as string,
+  restEndpoint: process.env['NX_VEGA_REST'] as string,
+};

apps/trading/.env

@@ -0,0 +1,24 @@
+# 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_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_ETHEREUM_CHAIN_ID = 3
+NX_INFURA_ID = "4f846e79e13f44d1b51bbd7ed9edefb8";

apps/trading/.env.devent

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_URL = "https://n04.d.vega.xyz/query"
+NX_ETHEREUM_CHAIN_ID = 3
+NX_INFURA_ID = "4f846e79e13f44d1b51bbd7ed9edefb8";

apps/trading/.env.mainnet

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_URL = "https://api.token.vega.xyz/query"
+NX_ETHEREUM_CHAIN_ID = 1
+NX_INFURA_ID = "4f846e79e13f44d1b51bbd7ed9edefb8";

apps/trading/.env.stagnet1

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_URL = "https://n03.s.vega.xyz/query"
+NX_ETHEREUM_CHAIN_ID = 3
+NX_INFURA_ID = "4f846e79e13f44d1b51bbd7ed9edefb8";

apps/trading/.env.stagnet2

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_URL = "https://n03.stagnet2.vega.xyz/query"
+NX_ETHEREUM_CHAIN_ID = 3
+NX_INFURA_ID = "4f846e79e13f44d1b51bbd7ed9edefb8";

apps/trading/.env.testnet

@@ -0,0 +1,4 @@
+# App configuration variables
+NX_VEGA_URL = "https://lb.testnet.vega.xyz/query"
+NX_ETHEREUM_CHAIN_ID = 3
+NX_INFURA_ID = "4f846e79e13f44d1b51bbd7ed9edefb8";

apps/trading/components/navbar/navbar.tsx

@@ -12,9 +12,8 @@ export const Navbar = () => {
         </a>
       </Link>
       {[
-        { name: 'Trading', path: '/', exact: true },
+        { name: 'Trading', path: '/markets' },
         { name: 'Portfolio', path: '/portfolio' },
-        { name: 'Markets', path: '/markets' },
       ].map((route) => (
         <NavLink key={route.path} {...route} />
       ))}
@@ -35,7 +34,7 @@ const NavLink = ({ name, path, exact }: NavLinkProps) => {
   return (
     <AnchorButton
       variant={isActive ? 'accent' : 'inline'}
-      className="px-16 py-6 h-[38px] text-h4 uppercase border-0 self-end"
+      className="px-16 py-6 h-[38px] uppercase border-0 self-end xs:text-ui sm:text-body-large md:text-h5 lg:text-h4"
       href={path}
       onClick={(e) => {
         e.preventDefault();

apps/trading/components/vega-wallet-connect-button/index.tsx

@@ -19,8 +19,11 @@ export const VegaWalletButton = ({
   };
 
   return (
-    <button onClick={handleClick} className="ml-auto inline-block">
-      {isConnected ? 'Disconnect' : 'Connect Vega wallet'}
+    <button
+      onClick={handleClick}
+      className="ml-auto inline-block text-ui sm:text-body-large"
+    >
+      {isConnected ? 'Disconnect Vega wallet' : 'Connect Vega wallet'}
     </button>
   );
 };

apps/trading/components/web3-container/index.ts

@@ -0,0 +1 @@
+export { Web3Container } from './web3-container';

apps/trading/components/web3-container/web3-container.spec.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Web3Container } from './web3-container';
+
+const defaultHookValue = {
+  isActive: false,
+  error: undefined,
+  connector: null,
+  chainId: 3,
+};
+let mockHookValue;
+
+jest.mock('@web3-react/core', () => {
+  const original = jest.requireActual('@web3-react/core');
+  return {
+    ...original,
+    useWeb3React: jest.fn(() => mockHookValue),
+  };
+});
+
+test('Prompt to connect opens dialog', () => {
+  mockHookValue = defaultHookValue;
+  render(
+    <Web3Container>
+      <div>Child</div>
+    </Web3Container>
+  );
+
+  expect(screen.queryByText('Child')).not.toBeInTheDocument();
+  expect(screen.queryByTestId('web3-connector-list')).not.toBeInTheDocument();
+  expect(screen.getByText('Connect your Ethereum wallet')).toBeInTheDocument();
+  fireEvent.click(screen.getByText('Connect'));
+  expect(screen.getByTestId('web3-connector-list')).toBeInTheDocument();
+});
+
+test('Error message is shown', () => {
+  const message = 'Opps! An error';
+  mockHookValue = { ...defaultHookValue, error: new Error(message) };
+
+  render(
+    <Web3Container>
+      <div>Child</div>
+    </Web3Container>
+  );
+
+  expect(screen.queryByText('Child')).not.toBeInTheDocument();
+  expect(screen.getByText(`Something went wrong: ${message}`));
+});
+
+test('Chain id matches app configuration', () => {
+  const expectedChainId = 4;
+  mockHookValue = {
+    ...defaultHookValue,
+    isActive: true,
+    chainId: expectedChainId,
+  };
+
+  render(
+    <Web3Container>
+      <div>Child</div>
+    </Web3Container>
+  );
+
+  expect(screen.queryByText('Child')).not.toBeInTheDocument();
+  expect(screen.getByText(`This app only works on chain ID: 3`));
+});

apps/trading/components/web3-container/web3-container.tsx

@@ -0,0 +1,79 @@
+import { Button, Splash } from '@vegaprotocol/ui-toolkit';
+import { Web3Provider, Web3ConnectDialog } from '@vegaprotocol/web3';
+import { useWeb3React } from '@web3-react/core';
+import { ReactNode, useEffect, useState } from 'react';
+import { Connectors } from '../../lib/web3-connectors';
+
+interface Web3ContainerProps {
+  children: ReactNode;
+}
+
+export const Web3Container = ({ children }: Web3ContainerProps) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  return (
+    <Web3Provider connectors={Connectors}>
+      <Web3Content setDialogOpen={setDialogOpen}>{children}</Web3Content>
+      <Web3ConnectDialog
+        connectors={Connectors}
+        dialogOpen={dialogOpen}
+        setDialogOpen={setDialogOpen}
+        desiredChainId={Number(process.env['NX_ETHEREUM_CHAIN_ID'] || 3)}
+      />
+    </Web3Provider>
+  );
+};
+
+interface Web3ContentProps {
+  children: ReactNode;
+  setDialogOpen: (isOpen: boolean) => void;
+}
+
+export const Web3Content = ({ children, setDialogOpen }: Web3ContentProps) => {
+  const appChainId = Number(process.env['NX_ETHEREUM_CHAIN_ID'] || 3);
+  const { isActive, error, connector, chainId } = useWeb3React();
+
+  useEffect(() => {
+    connector?.connectEagerly();
+  }, [connector]);
+
+  if (error) {
+    return (
+      <SplashWrapper>
+        <p className="mb-12">Something went wrong: {error.message}</p>
+        <Button onClick={() => connector.deactivate()}>Disconnect</Button>
+      </SplashWrapper>
+    );
+  }
+
+  if (!isActive) {
+    return (
+      <SplashWrapper>
+        <p className="mb-12">Connect your Ethereum wallet</p>
+        <Button onClick={() => setDialogOpen(true)}>Connect</Button>
+      </SplashWrapper>
+    );
+  }
+
+  if (chainId !== appChainId) {
+    return (
+      <SplashWrapper>
+        <p className="mb-12">This app only works on chain ID: {appChainId}</p>
+        <Button onClick={() => connector.deactivate()}>Disconnect</Button>
+      </SplashWrapper>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+interface SplashWrapperProps {
+  children: ReactNode;
+}
+
+const SplashWrapper = ({ children }: SplashWrapperProps) => {
+  return (
+    <Splash>
+      <div className="text-center">{children}</div>
+    </Splash>
+  );
+};

apps/trading/hooks/use-vega-wallet-eager-connect.ts

@@ -1,7 +1,7 @@
 import { useVegaWallet, WALLET_CONFIG } from '@vegaprotocol/wallet';
 import { useEffect } from 'react';
 import { LocalStorage } from '@vegaprotocol/react-helpers';
-import { Connectors } from '../lib/connectors';
+import { Connectors } from '../lib/vega-connectors';
 
 export function useEagerConnect() {
   const { connect } = useVegaWallet();
@@ -21,7 +21,10 @@ export function useEagerConnect() {
 
     // Developer hasn't provided this connector
     if (!connector) {
-      throw new Error(`Connector ${cfgObj?.connector} not configured`);
+      console.warn(
+        `Can't eager connect, connector: ${cfgObj.connector} not found`
+      );
+      return;
     }
 
     connect(Connectors[cfgObj.connector]);

apps/trading/lib/web3-connectors.ts

@@ -0,0 +1,25 @@
+import { initializeConnector } from '@web3-react/core';
+import { MetaMask } from '@web3-react/metamask';
+import { WalletConnect } from '@web3-react/walletconnect';
+
+export const metamask = initializeConnector<MetaMask>(
+  (actions) => new MetaMask(actions)
+);
+
+const infuraId = process.env['NX_INFURA_ID '];
+
+export const walletconnect = initializeConnector<WalletConnect>(
+  (actions) =>
+    new WalletConnect(actions, {
+      rpc: {
+        1: `https://mainnet.infura.io/v3/${infuraId}`,
+        3: `https://ropsten.infura.io/v3/${infuraId}`,
+      },
+    }),
+  [1, 3]
+);
+
+export const Connectors = {
+  metamask,
+  walletconnect,
+};

apps/trading/pages/_app.page.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import { Navbar } from '../components/navbar';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
 import { VegaConnectDialog, VegaWalletProvider } from '@vegaprotocol/wallet';
-import { Connectors } from '../lib/connectors';
+import { Connectors } from '../lib/vega-connectors';
 import { useCallback, useMemo, useState } from 'react';
 import { createClient } from '../lib/apollo-client';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
@@ -15,11 +15,7 @@ import { useThemeSwitcher } from '../hooks/use-theme-switcher';
 import './styles.css';
 
 function VegaTradingApp({ Component, pageProps }: AppProps) {
-  const client = useMemo(
-    () =>
-      createClient(process.env['NX_VEGA_URL'] || 'https://lb.testnet.vega.xyz'),
-    []
-  );
+  const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [theme, toggleTheme] = useThemeSwitcher();
 

apps/trading/pages/markets/trade-grid.tsx

@@ -5,11 +5,33 @@ import { useState, ReactNode } from 'react';
 import { GridTab, GridTabs } from './grid-tabs';
 import { DealTicketContainer } from '../../components/deal-ticket-container';
 import { OrderListContainer } from '../..//components/order-list-container';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
-const Chart = () => <div>TODO: Chart</div>;
-const Orderbook = () => <div>TODO: Orderbook</div>;
-const Positions = () => <div>TODO: Positions</div>;
-const Collateral = () => <div>TODO: Collateral</div>;
+const Chart = () => (
+  <Splash>
+    <p>Chart</p>
+  </Splash>
+);
+const Orderbook = () => (
+  <Splash>
+    <p>Orderbook</p>
+  </Splash>
+);
+const Positions = () => (
+  <Splash>
+    <p>Positions</p>
+  </Splash>
+);
+const Collateral = () => (
+  <Splash>
+    <p>Collateral</p>
+  </Splash>
+);
+const Trades = () => (
+  <Splash>
+    <p>Trades</p>
+  </Splash>
+);
 
 type TradingView = keyof typeof TradingViews;
 
@@ -20,6 +42,7 @@ const TradingViews = {
   orders: OrderListContainer,
   positions: Positions,
   collateral: Collateral,
+  trades: Trades,
 };
 
 interface TradeGridProps {
@@ -47,7 +70,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
       <TradeGridChild className="row-start-1 row-end-3">
         <GridTabs group="trade">
           <GridTab name="trades">
-            <pre>{JSON.stringify(market.trades, null, 2)}</pre>
+            <TradingViews.trades />
           </GridTab>
           <GridTab name="orderbook">
             <TradingViews.orderbook />
@@ -120,7 +143,7 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
           )}
         </AutoSizer>
       </div>
-      <div className="flex flex-nowrap gap-4 overflow-x-auto my-4">
+      <div className="flex flex-nowrap gap-4 overflow-x-auto my-4 max-w-full">
         {Object.keys(TradingViews).map((key: TradingView) => {
           const isActive = view === key;
           const className = classNames('py-4', 'px-12', 'capitalize', {

apps/trading/pages/portfolio/deposit/index.page.tsx

@@ -0,0 +1,28 @@
+import { useWeb3React } from '@web3-react/core';
+import { Web3Container } from '../../../components/web3-container';
+
+const Deposit = () => {
+  return (
+    <Web3Container>
+      <div>
+        <h1>Deposit</h1>
+        <Info />
+      </div>
+    </Web3Container>
+  );
+};
+
+const Info = () => {
+  const { isActive, chainId, accounts } = useWeb3React();
+  if (!isActive) {
+    return <div>Not active</div>;
+  }
+  return (
+    <div>
+      <p>{chainId}</p>
+      <p>{accounts[0]}</p>
+    </div>
+  );
+};
+
+export default Deposit;

apps/trading/pages/portfolio/index.page.tsx

@@ -1,3 +1,4 @@
+import { AnchorButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
 const Portfolio = () => {
@@ -10,6 +11,9 @@ const Portfolio = () => {
           Keypair: {keypair.name} {keypair.pub}
         </p>
       )}
+      <div className="flex gap-4">
+        <AnchorButton href="/portfolio/deposit">Deposit</AnchorButton>
+      </div>
     </div>
   );
 };

libs/mainnet-stats-manager/README.md

@@ -1,7 +0,0 @@
-# mainnet-stats-manager
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test mainnet-stats-manager` to execute the unit tests via [Jest](https://jestjs.io).

libs/mainnet-stats-manager/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/mainnet-stats-manager",
-  "version": "0.0.1"
-}

libs/network-stats/README.md

@@ -0,0 +1,7 @@
+# network-stats
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test network-stats` to execute the unit tests via [Jest](https://jestjs.io).

libs/network-stats/jest.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  displayName: 'mainnet-stats-manager',
+  displayName: 'network-stats',
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/mainnet-stats-manager',
+  coverageDirectory: '../../coverage/libs/network-stats',
 };

libs/network-stats/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/network-stats",
+  "version": "0.0.1"
+}

libs/network-stats/project.json

@@ -1,6 +1,6 @@
 {
-  "root": "libs/mainnet-stats-manager",
-  "sourceRoot": "libs/mainnet-stats-manager/src",
+  "root": "libs/network-stats",
+  "sourceRoot": "libs/network-stats/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -8,16 +8,16 @@
       "executor": "@nrwl/web:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/libs/mainnet-stats-manager",
-        "tsConfig": "libs/mainnet-stats-manager/tsconfig.lib.json",
-        "project": "libs/mainnet-stats-manager/package.json",
-        "entryFile": "libs/mainnet-stats-manager/src/index.ts",
+        "outputPath": "dist/libs/network-stats",
+        "tsConfig": "libs/network-stats/tsconfig.lib.json",
+        "project": "libs/network-stats/package.json",
+        "entryFile": "libs/network-stats/src/index.ts",
         "external": ["react/jsx-runtime"],
         "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
         "compiler": "babel",
         "assets": [
           {
-            "glob": "libs/mainnet-stats-manager/README.md",
+            "glob": "libs/network-stats/README.md",
             "input": ".",
             "output": "."
           }
@@ -28,14 +28,14 @@
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["libs/mainnet-stats-manager/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": ["libs/network-stats/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/libs/mainnet-stats-manager"],
+      "outputs": ["coverage/libs/network-stats"],
       "options": {
-        "jestConfig": "libs/mainnet-stats-manager/jest.config.js",
+        "jestConfig": "libs/network-stats/jest.config.js",
         "passWithNoTests": true
       }
     }