feat(explorer): reduce footer noise (#2676)

apps/explorer/src/app/app.tsx

@@ -2,12 +2,12 @@ import classnames from 'classnames';
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
-import { NetworkInfo } from '@vegaprotocol/network-info';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
 import type { InMemoryCacheConfig } from '@apollo/client';
+import { Footer } from './components/footer/footer';
 
 function App() {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -44,9 +44,7 @@ function App() {
           <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
           <Nav menuOpen={menuOpen} />
           <Main />
-          <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-sm md:text-md md:flex md:col-span-2 p-4 gap-4 border-t border-neutral-700 dark:border-neutral-300">
+          <Footer />
-            <NetworkInfo />
-          </footer>
         </div>
       </NetworkLoader>
     </TendermintWebsocketProvider>

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

@@ -0,0 +1,49 @@
+import { useEnvironment } from '@vegaprotocol/environment';
+import { t } from '@vegaprotocol/react-helpers';
+import { Link } from '@vegaprotocol/ui-toolkit';
+
+export const Footer = () => {
+  const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL, setNodeSwitcherOpen } =
+    useEnvironment();
+  return (
+    <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
+      <div className="flex justify-between gap-2 align-middle">
+        <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
+          {GIT_COMMIT_HASH && (
+            <p data-testid="git-commit-hash">
+              {t('Version')}:{' '}
+              <Link
+                href={
+                  GIT_ORIGIN_URL
+                    ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
+                    : undefined
+                }
+                target={GIT_ORIGIN_URL ? '_blank' : undefined}
+              >
+                {GIT_COMMIT_HASH}
+              </Link>
+            </p>
+          )}
+        </div>
+
+        <div className="flex pl-2 content-center">
+          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+          <Link className="ml-2" onClick={setNodeSwitcherOpen}>
+            {t('Change')}
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+const NodeUrl = ({ url }: { url: string }) => {
+  // get base url from api url, api sub domain
+  const urlObj = new URL(url);
+  const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
+  return (
+    <Link href={'https://' + nodeUrl} target="_blank">
+      {nodeUrl}
+    </Link>
+  );
+};