feat(explorer,trading,governance): update mainnet sims banner (#3156)

Co-authored-by: asiaznik <artur@vegaprotocol.io>

apps/explorer/src/app/app.tsx

@@ -3,13 +3,18 @@ import { Header } from './components/header';
 import { Main } from './components/main';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
 import { Footer } from './components/footer/footer';
-import { AnnouncementBanner, ExternalLink } from '@vegaprotocol/ui-toolkit';
+import {
+  AnnouncementBanner,
+  ExternalLink,
+  Icon,
+} from '@vegaprotocol/ui-toolkit';
 import {
   AssetDetailsDialog,
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
 import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
 import classNames from 'classnames';
+import { useState } from 'react';
 
 const DialogsContainer = () => {
   const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
@@ -24,16 +29,32 @@ const DialogsContainer = () => {
   );
 };
 
-const MainnetSimAd = () => (
+const MainnetSimAd = () => {
-  <AnnouncementBanner>
+  const [shouldDisplayBanner, setShouldDisplayBanner] = useState<boolean>(true);
-    <div className="font-alpha calt uppercase text-center text-lg text-white">
+
-      <span className="pr-4">Mainnet sim 2 is live!</span>
+  // Return an empty div so that the grid layout in _app.page.ts
-      <ExternalLink href="https://fairground.wtf/">
+  // renders correctly
-        Come help stress test the network
+  if (!shouldDisplayBanner) {
-      </ExternalLink>
+    return <div />;
-    </div>
+  }
-  </AnnouncementBanner>
+
-);
+  return (
+    <AnnouncementBanner>
+      <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
+        <button
+          className="flex items-center"
+          onClick={() => setShouldDisplayBanner(false)}
+        >
+          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
+        </button>
+        <div>
+          <span className="pr-4">Mainnet sim 3 is coming soon!</span>
+          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
+        </div>
+      </div>
+    </AnnouncementBanner>
+  );
+};
 
 function App() {
   return (

apps/governance/src/components/page-templates/template-sidebar.tsx

@@ -21,7 +21,7 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
     <>
       <AnnouncementBanner>
         <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">Mainnet sim 2 is live!</span>
+          <span className="pr-4">Mainnet sim 3 is coming soon!</span>
           <ExternalLink href="https://fairground.wtf/">
             Come help stress test the network
           </ExternalLink>

apps/trading/components/banner/banner.tsx

@@ -30,7 +30,7 @@ export const Banner = () => {
           <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
         </button>
         <div>
-          <span className="pr-4">Mainnet sim 2 is live!</span>
+          <span className="pr-4">Mainnet sim 3 is coming soon!</span>
           <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
         </div>
       </div>