chore(trading): 2764 link to mainnet incident reports (#3235)

apps/trading/.env.devnet

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.mainnet

@@ -8,3 +8,4 @@ NX_VEGA_TOKEN_URL=https://token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.mirror

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://mainnet-mirror.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.sandbox

@@ -7,3 +7,4 @@ NX_VEGA_NETWORKS={\"DEVNET\":\"https://dev.token.vega.xyz\",\"STAGNET3\":\"https
 NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.stagnet1

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.stagnet3

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.testnet

@@ -9,3 +9,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/.env.validator-testnet

@@ -9,4 +9,4 @@ NX_VEGA_TOKEN_URL=https://validator-testnet.governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
-
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports

apps/trading/components/footer/footer.spec.tsx

@@ -6,9 +6,10 @@ import { Intent } from '@vegaprotocol/ui-toolkit';
 
 jest.mock('@vegaprotocol/environment', () => ({
   ...jest.requireActual('@vegaprotocol/environment'),
-  useEnvironment: jest
+  useEnvironment: jest.fn().mockImplementation(() => ({
-    .fn()
+    VEGA_URL: 'https://vega-url.wtf',
-    .mockImplementation(() => ({ VEGA_URL: 'https://vega-url.wtf' })),
+    VEGA_INCIDENT_URL: 'https://blog.vega.community',
+  })),
 }));
 
 const mockSetNodeSwitcher = jest.fn();
@@ -26,6 +27,13 @@ describe('NodeHealth', () => {
     await userEvent.click(screen.getByRole('button'));
     expect(mockSetNodeSwitcher).toHaveBeenCalled();
   });
+
+  it('External link to blog should be present', () => {
+    render(<NodeHealth />, { wrapper: MockedProvider });
+    expect(
+      screen.getByRole('link', { name: /^Mainnet status & incidents/ })
+    ).toBeInTheDocument();
+  });
 });
 
 describe('NodeUrl', () => {

apps/trading/components/footer/footer.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useEnvironment, useNodeHealth } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import type { Intent } from '@vegaprotocol/ui-toolkit';
-import { Indicator } from '@vegaprotocol/ui-toolkit';
+import { Indicator, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { useGlobalStore } from '../../stores';
@@ -19,7 +19,7 @@ export const Footer = () => {
 };
 
 export const NodeHealth = () => {
-  const { VEGA_URL } = useEnvironment();
+  const { VEGA_URL, VEGA_INCIDENT_URL } = useEnvironment();
   const setNodeSwitcher = useGlobalStore(
     (store) => (open: boolean) => store.update({ nodeSwitcherDialog: open })
   );
@@ -27,19 +27,36 @@ export const NodeHealth = () => {
   const onClick = useCallback(() => {
     setNodeSwitcher(true);
   }, [setNodeSwitcher]);
-  return VEGA_URL ? (
+  const incidentsLink = VEGA_INCIDENT_URL && (
-    <FooterButton onClick={onClick} data-testid="node-health">
+    <ExternalLink className="ml-1" href={VEGA_INCIDENT_URL}>
-      <FooterButtonPart>
+      {t('Mainnet status & incidents')}
-        <HealthIndicator text={text} intent={intent} />
+    </ExternalLink>
-      </FooterButtonPart>
+  );
-      <FooterButtonPart>
+  return (
-        <NodeUrl url={VEGA_URL} />
+    <>
-      </FooterButtonPart>
+      {VEGA_URL && (
-      <FooterButtonPart>
+        <FooterButton onClick={onClick} data-testid="node-health">
-        <span title={t('Block height')}>{datanodeBlockHeight}</span>
+          <FooterButtonPart>
-      </FooterButtonPart>
+            <HealthIndicator text={text} intent={intent} />
-    </FooterButton>
+          </FooterButtonPart>
-  ) : null;
+          <FooterButtonPart>
+            <NodeUrl url={VEGA_URL} />
+          </FooterButtonPart>
+          {/* create a monospace effect - avoiding jumps of width */}
+          <FooterButtonPart
+            width={`${
+              datanodeBlockHeight
+                ? String(datanodeBlockHeight).length + 'ch'
+                : 'auto'
+            }`}
+          >
+            <span title={t('Block height')}>{datanodeBlockHeight}</span>
+          </FooterButtonPart>
+        </FooterButton>
+      )}
+      {incidentsLink}
+    </>
+  );
 };
 
 interface NodeUrlProps {
@@ -78,9 +95,16 @@ const FooterButton = (props: FooterButtonProps) => {
   return <button {...props} className={buttonClasses} />;
 };
 
-const FooterButtonPart = ({ children }: { children: ReactNode }) => {
+const FooterButtonPart = ({
+  width = 'auto',
+  children,
+}: {
+  children: ReactNode;
+  width?: string;
+}) => {
   return (
     <span
+      style={{ width }}
       className={classNames(
         'relative inline-block mr-2 last:mr-0 pr-2 last:pr-0',
         'last:after:hidden',

libs/environment/src/hooks/use-environment.ts

@@ -285,6 +285,7 @@ function compileEnvVars() {
     GIT_BRANCH: process.env['GIT_COMMIT_BRANCH'],
     GIT_COMMIT_HASH: process.env['GIT_COMMIT_HASH'],
     GIT_ORIGIN_URL: process.env['GIT_ORIGIN_URL'],
+    VEGA_INCIDENT_URL: process.env['NX_VEGA_INCIDENT_URL'],
   };
 
   return env;

libs/environment/src/utils/validate-environment.ts

@@ -50,6 +50,7 @@ const schemaObject = {
   MAINTENANCE_PAGE: z.optional(z.boolean()),
   ETH_LOCAL_PROVIDER_URL: z.optional(z.string()),
   ETH_WALLET_MNEMONIC: z.optional(z.string()),
+  VEGA_INCIDENT_URL: z.optional(z.string()),
 };
 
 // combine schema above with custom rule to ensure either