feat: add network switcher to block explorer (#1242)

* feat: add network switcher to block explorer

* fix: add mock for @vegaprotocol/environment

* fix: #723 add test to see if network switcher gets rendered

* fix: formatting on header.spec.tsx

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

@@ -2,6 +2,12 @@ import { render, screen } from '@testing-library/react';
 import { Header } from './header';
 import { MemoryRouter } from 'react-router-dom';
 
+jest.mock('@vegaprotocol/environment', () => ({
+  NetworkSwitcher: () => (
+    <div data-testid="network-switcher">NetworkSwitcher</div>
+  ),
+}));
+
 jest.mock('../search', () => ({
   Search: () => <div data-testid="search">OrderList</div>,
 }));
@@ -25,4 +31,10 @@ describe('Header', () => {
 
     expect(screen.getByTestId('search')).toBeInTheDocument();
   });
+
+  it('should render network switcher', () => {
+    render(renderComponent());
+
+    expect(screen.getByTestId('network-switcher')).toBeInTheDocument();
+  });
 });

apps/explorer/src/app/components/header/header.tsx

@@ -5,6 +5,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
 import type { Dispatch, SetStateAction } from 'react';
+import { NetworkSwitcher } from '@vegaprotocol/environment';
 
 interface ThemeToggleProps {
   theme: 'light' | 'dark';
@@ -27,14 +28,17 @@ export const Header = ({
   );
   return (
     <header className={headerClasses}>
-      <Link to={Routes.HOME}>
-        <h1
-          className="text-3xl font-alpha uppercase calt mb-0"
-          data-testid="explorer-header"
-        >
-          {t('Vega Explorer')}
-        </h1>
-      </Link>
+      <div className="flex h-full items-center sm:items-stretch gap-4">
+        <Link to={Routes.HOME}>
+          <h1
+            className="text-3xl font-alpha uppercase calt mb-0"
+            data-testid="explorer-header"
+          >
+            {t('Vega Explorer')}
+          </h1>
+        </Link>
+        <NetworkSwitcher />
+      </div>
       <button
         data-testid="open-menu"
         className="md:hidden"