Feat/633: Oracles MVP in block explorer (#871)

* frontend-monorepo-633: Oracles in block explorer - initial oracles page and router setup

* frontend-monorepo-633: Oracles in block explorer - added generated types file

* Feat/633: Cleanup for MVP1

* Feat/633: Cleanup of route name

apps/explorer-e2e/.env

@@ -12,6 +12,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
 NX_EXPLORER_TXS_LIST=0
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1

apps/explorer-e2e/.env.devnet

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

apps/explorer-e2e/.env.stagnet1

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

apps/explorer-e2e/.env.stagnet2

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

apps/explorer-e2e/.env.testnet

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

apps/explorer/.env

@@ -23,4 +23,5 @@ NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
 NX_EXPLORER_TXS_LIST=1

apps/explorer/.env.capsule

@@ -13,6 +13,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_ORACLES=1
 NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1

apps/explorer/README.md

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

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

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

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ import BlockPage from './blocks';
 import Governance from './governance';
 import Home from './home';
 import Markets from './markets';
+import Oracles from './oracles';
 import Party from './parties';
 import { Parties } from './parties/home';
 import { Party as PartySingle } from './parties/id';
@@ -84,6 +85,17 @@ const marketsRoutes = flags.markets
     ]
   : [];
 
+const oraclesRoutes = flags.oracles
+  ? [
+      {
+        path: Routes.ORACLES,
+        name: 'Oracles',
+        text: t('Oracles'),
+        element: <Oracles />,
+      },
+    ]
+  : [];
+
 const networkParametersRoutes = flags.networkParameters
   ? [
       {
@@ -154,6 +166,7 @@ const routerConfig = [
   ...genesisRoutes,
   ...governanceRoutes,
   ...marketsRoutes,
+  ...oraclesRoutes,
   ...networkParametersRoutes,
   ...validators,
 ];

libs/types/src/__generated__/globalTypes.ts

@@ -67,6 +67,17 @@ export enum BusEventType {
   Withdrawal = "Withdrawal",
 }
 
+/**
+ * Comparator describes the type of comparison.
+ */
+export enum ConditionOperator {
+  OperatorEquals = "OperatorEquals",
+  OperatorGreaterThan = "OperatorGreaterThan",
+  OperatorGreaterThanOrEqual = "OperatorGreaterThanOrEqual",
+  OperatorLessThan = "OperatorLessThan",
+  OperatorLessThanOrEqual = "OperatorLessThanOrEqual",
+}
+
 /**
  * The status of a deposit
  */
@@ -119,6 +130,14 @@ export enum NodeStatus {
   Validator = "Validator",
 }
 
+/**
+ * Status describe the status of the oracle spec
+ */
+export enum OracleSpecStatus {
+  StatusActive = "StatusActive",
+  StatusUnused = "StatusUnused",
+}
+
 /**
  * Reason for the order being rejected by the core node
  */
@@ -202,6 +221,19 @@ export enum OrderType {
   Network = "Network",
 }
 
+/**
+ * Type describes the type of properties that are supported by the oracle
+ * engine.
+ */
+export enum PropertyKeyType {
+  TypeBoolean = "TypeBoolean",
+  TypeDecimal = "TypeDecimal",
+  TypeEmpty = "TypeEmpty",
+  TypeInteger = "TypeInteger",
+  TypeString = "TypeString",
+  TypeTimestamp = "TypeTimestamp",
+}
+
 /**
  * Reason for the proposal being rejected by the core node
  */