feat(explorer): footer updates (#3884)

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

@@ -4,9 +4,11 @@ import {
 } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
+import { Link, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useMemo } from 'react';
 import { ENV } from '../../config/env';
+import { Routes } from '../../routes/route-names';
+import { Link as RouteLink } from 'react-router-dom';
 
 export const Footer = () => {
   const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL } = useEnvironment();
@@ -21,7 +23,7 @@ export const Footer = () => {
   );
 
   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-vega-light-200 dark:border-vega-dark-200">
+    <footer className="grid grid-rows-2 lg:grid-cols-[1fr_auto] text-xs md:text-md lg:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
       <div className="flex justify-between gap-2 align-middle">
         {GIT_COMMIT_HASH && (
           <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
@@ -56,11 +58,16 @@ export const Footer = () => {
           </div>
         ) : null}
       </div>
+      <div className="pl-2 align-center lg:align-right lg:flex lg:justify-end gap-2 align-middle lg:max-w-xs lg:ml-auto">
+        <RouteLink to={`/${Routes.DISCLAIMER}`} className="underline">
+          Disclaimer
+        </RouteLink>
+      </div>
     </footer>
   );
 };
 
-const NodeUrl = ({ url }: { url: string }) => {
+export 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, '');

apps/explorer/src/app/routes/pages/disclaimer.tsx

@@ -0,0 +1,40 @@
+import { t } from '@vegaprotocol/i18n';
+import { RouteTitle } from '../../components/route-title';
+
+export const Disclaimer = () => {
+  return (
+    <section>
+      <div className="px-40 max-sm:px-0 max-md:px-10 mb-4 max-w-5xl">
+        <RouteTitle data-testid="disclaimer-header">
+          {t('Disclaimer')}
+        </RouteTitle>
+        <p className="mt-3">
+          The Vega Block Explorer is an application that allows users to, among
+          other things, browse through blocks, view wallet addresses, network
+          hashrate, transaction data and other key information on the Vega
+          blockchain. It is free, public and open source software. Software
+          upgrades may contain bugs or security vulnerabilities that might
+          result in loss of functionality.
+        </p>
+        <p className="mt-3">
+          The Vega Block Explorer uses data from nodes on the Vega Blockchain.
+          The developers of the Vega Block Explorer do not operate or run the
+          Vega Blockchain or any other blockchain.
+        </p>
+        <p className="mt-3 font-semibold">
+          The Vega Block Explorer is provided “as is”. The developers of the
+          Vega Block Explorer make no representations or warranties of any kind,
+          whether express or implied, statutory or otherwise regarding the Vega
+          Block Explorer. They disclaim all warranties of merchantability,
+          quality, fitness for purpose. They disclaim all warranties that the
+          Vega Block Explorer is free of harmful components or errors.
+        </p>
+        <p className="mt-3 font-bold">
+          No developer of the Vega Block Explorer accepts any responsibility
+          for, or liability to users in connection with their use of the Vega
+          Block Explorer.
+        </p>
+      </div>
+    </section>
+  );
+};

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

@@ -10,4 +10,5 @@ export const Routes = {
   MARKETS: 'markets',
   ORACLES: 'oracles',
   NETWORK_PARAMETERS: 'network-parameters',
+  DISCLAIMER: 'disclaimer',
 };

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

@@ -29,6 +29,7 @@ import { AssetLink, MarketLink } from '../components/links';
 import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
 import { remove0x } from '@vegaprotocol/utils';
 import { PartyAccountsByAsset } from './parties/id/accounts';
+import { Disclaimer } from './pages/disclaimer';
 
 export type Navigable = {
   path: string;
@@ -335,6 +336,17 @@ export const routerConfig: Route[] = [
           },
         ],
       },
+      {
+        path: Routes.DISCLAIMER,
+        element: <Disclaimer />,
+        handle: {
+          name: t('Disclaimer'),
+          text: t('Disclaimer'),
+          breadcrumb: () => (
+            <Link to={Routes.DISCLAIMER}>{t('Disclaimer')}</Link>
+          ),
+        },
+      },
       ...partiesRoutes,
       ...assetsRoutes,
       ...genesisRoutes,