feat(trading): add oracle banner e2e tests (#3524)

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -1,4 +1,5 @@
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
+import { MarketState } from '@vegaprotocol/types';
 
 const marketInfoBtn = 'Info';
 const row = 'key-value-table-row';
@@ -12,7 +13,12 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   before(() => {
-    cy.mockTradingPage();
+    cy.mockTradingPage(
+      MarketState.STATE_ACTIVE,
+      undefined,
+      undefined,
+      'COMPROMISED'
+    );
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
     cy.wait('@Markets');
@@ -20,6 +26,11 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     cy.wait('@MarketInfo');
   });
 
+  it('show oracle banner', () => {
+    cy.getByTestId(marketTitle).contains('Oracle').click();
+    cy.getByTestId('oracle-status').should('contain.text', 'COMPROMISED');
+  });
+
   it('current fees displayed', () => {
     cy.getByTestId(marketTitle).contains('Current fees').click();
     validateMarketDataRow(0, 'Maker Fee', '0.02%');

apps/trading-e2e/src/support/trading.ts

@@ -1,6 +1,7 @@
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import * as Schema from '@vegaprotocol/types';
 import type { CyHttpMessages } from 'cypress/types/net-stubbing';
+import type { Provider, Status } from '@vegaprotocol/oracles';
 import {
   accountsQuery,
   assetQuery,
@@ -155,7 +156,6 @@ const mockTradingPage = (
   aliasGQLQuery(req, 'ProposalsList', proposalListQuery());
   aliasGQLQuery(req, 'Deposits', depositsQuery());
 };
-
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
@@ -164,32 +164,33 @@ declare global {
       mockTradingPage(
         state?: Schema.MarketState,
         tradingMode?: Schema.MarketTradingMode,
-        trigger?: Schema.AuctionTrigger
+        trigger?: Schema.AuctionTrigger,
+        oracleStatus?: Status
       ): void;
     }
   }
 }
+
 export const addMockTradingPage = () => {
   Cypress.Commands.add(
     'mockTradingPage',
-    (state = Schema.MarketState.STATE_ACTIVE, tradingMode, trigger) => {
+    (
+      state = Schema.MarketState.STATE_ACTIVE,
+      tradingMode,
+      trigger,
+      oracleStatus
+    ) => {
       cy.mockGQL((req) => {
         mockTradingPage(req, state, tradingMode, trigger);
       });
 
-      // Prevent request to github, return some dummy content
-      cy.intercept(
-        'GET',
-        /^https:\/\/raw.githubusercontent.com\/vegaprotocol\/well-known/,
-        {
-          body: [
-            {
+      const oracle: Provider = {
         name: 'Another oracle',
         url: 'https://zombo.com',
         description_markdown:
           'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
         oracle: {
-                status: 'GOOD',
+          status: oracleStatus || 'GOOD',
           status_reason: '',
           first_verified: '2022-01-01T00:00:00.000Z',
           last_verified: '2022-12-31T00:00:00.000Z',
@@ -206,8 +207,13 @@ export const addMockTradingPage = () => {
           },
         ],
         github_link: `https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/public_key-${ORACLE_PUBKEY}.toml`,
-            },
-          ],
+      };
+      // Prevent request to github, return some dummy content
+      cy.intercept(
+        'GET',
+        /^https:\/\/raw.githubusercontent.com\/vegaprotocol\/well-known/,
+        {
+          body: [oracle],
         }
       );
     }

apps/trading/client-pages/market/trade-grid.tsx

@@ -350,7 +350,10 @@ export const TradePanels = ({
 
   return (
     <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
+      <div>
         <TradeMarketHeader market={market} onSelect={onSelect} />
+        <OracleBanner marketId={market?.id || ''} />
+      </div>
       <div className="h-full">
         <AutoSizer>
           {({ width, height }) => (

apps/trading/components/banner/oracle-banner.tsx

@@ -26,7 +26,8 @@ export const OracleBanner = ({ marketId }: { marketId: string }) => {
   return (
     <NotificationBanner intent={Intent.Danger}>
       <div>
-        Oracle status for this market is {oracle.status}.{' '}
+        Oracle status for this market is{' '}
+        <span data-testId="oracle-status">{oracle.status}</span>.{' '}
         {oracleStatuses[oracle.status]}
       </div>
       {oracle.status_reason ? (

libs/market-info/src/hooks/use-market-oracle.ts

@@ -19,25 +19,29 @@ export const useMarketOracle = (marketId: string) => {
       marketInfo.tradableInstrument.instrument.product
         .dataSourceSpecForSettlementData.data;
     return data.find((provider) =>
-      provider.proofs.some(
-        (proof) =>
-          (proof.type === 'eth_address' &&
-            dataSource.sourceType.__typename ===
-              'DataSourceDefinitionExternal' &&
-            dataSource.sourceType.sourceType.signers?.some(
+      provider.proofs.some((proof) => {
+        if (
+          proof.type === 'eth_address' &&
+          dataSource.sourceType.__typename === 'DataSourceDefinitionExternal'
+        ) {
+          return dataSource.sourceType.sourceType.signers?.some(
             (signer) =>
               signer.signer.__typename === 'ETHAddress' &&
               signer.signer.address === proof.eth_address
-            )) ||
-          (proof.type === 'public_key' &&
-            dataSource.sourceType.__typename ===
-              'DataSourceDefinitionExternal' &&
-            dataSource.sourceType.sourceType.signers?.some(
+          );
+        }
+        if (
+          proof.type === 'public_key' &&
+          dataSource.sourceType.__typename === 'DataSourceDefinitionExternal'
+        ) {
+          return dataSource.sourceType.sourceType.signers?.some(
             (signer) =>
               signer.signer.__typename === 'PubKey' &&
               signer.signer.key === proof.public_key
-            ))
-      )
+          );
+        }
+        return false;
+      })
     )?.oracle;
   }, [data, marketInfo]);
 };