From 5ab5aa01a26ec410ac6908a4e321b5ba1fc96e4d Mon Sep 17 00:00:00 2001
From: Sam Keen <samuel@vegaprotocol.io>
Date: Fri, 3 Feb 2023 10:34:32 +0000
Subject: [PATCH] feat(trading): 2803 console announcement banner (#2830)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>
---
 .../src/integration/market-info.cy.ts         | 10 +++--
 .../trading-e2e/src/integration/markets.cy.ts |  3 +-
 apps/trading/components/banner/banner.tsx     | 39 +++++++++++++++++++
 apps/trading/components/banner/index.tsx      |  1 +
 apps/trading/pages/_app.page.tsx              | 18 ++++++---
 apps/trading/stores/global.ts                 |  2 +
 6 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 apps/trading/components/banner/banner.tsx
 create mode 100644 apps/trading/components/banner/index.tsx

diff --git a/apps/trading-e2e/src/integration/market-info.cy.ts b/apps/trading-e2e/src/integration/market-info.cy.ts
index fbacc004a..e2287ad6d 100644
--- a/apps/trading-e2e/src/integration/market-info.cy.ts
+++ b/apps/trading-e2e/src/integration/market-info.cy.ts
@@ -4,6 +4,7 @@ const marketInfoBtn = 'Info';
 const row = 'key-value-table-row';
 const marketTitle = 'accordion-title';
 const externalLink = 'external-link';
+const accordionContent = 'accordion-content';
 
 describe('market info is displayed', { tags: '@smoke' }, () => {
   before(() => {
@@ -179,7 +180,8 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
       'termination.BTC.value'
     );
 
-    cy.getByTestId(externalLink)
+    cy.getByTestId(accordionContent)
+      .find(`[data-testid="${externalLink}"]`)
       .should('have.attr', 'href')
       .and('contain', '/oracles');
   });
@@ -187,12 +189,14 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   it('proposal displayed', () => {
     cy.getByTestId(marketTitle).contains('Proposal').click();
 
-    cy.getByTestId(externalLink)
+    cy.getByTestId(accordionContent)
+      .find(`[data-testid="${externalLink}"]`)
       .first()
       .should('have.text', 'View governance proposal')
       .and('have.attr', 'href')
       .and('contain', '/proposals/market-0');
-    cy.getByTestId(externalLink)
+    cy.getByTestId(accordionContent)
+      .find(`[data-testid="${externalLink}"]`)
       .eq(1)
       .should('have.text', 'Propose a change to market')
       .and('have.attr', 'href')
diff --git a/apps/trading-e2e/src/integration/markets.cy.ts b/apps/trading-e2e/src/integration/markets.cy.ts
index e8e847808..dbadcd20b 100644
--- a/apps/trading-e2e/src/integration/markets.cy.ts
+++ b/apps/trading-e2e/src/integration/markets.cy.ts
@@ -104,7 +104,8 @@ describe('markets table', { tags: '@smoke' }, () => {
       'have.length',
       10
     );
-    cy.getByTestId('external-link')
+    cy.getByTestId('tab-proposed-markets')
+      .find('[data-testid="external-link"]')
       .should('have.length', 11)
       .last()
       .should('have.text', 'Propose a new market')
diff --git a/apps/trading/components/banner/banner.tsx b/apps/trading/components/banner/banner.tsx
new file mode 100644
index 000000000..968caa57a
--- /dev/null
+++ b/apps/trading/components/banner/banner.tsx
@@ -0,0 +1,39 @@
+import {
+  AnnouncementBanner,
+  ExternalLink,
+  Icon,
+} from '@vegaprotocol/ui-toolkit';
+import { useGlobalStore } from '../../stores';
+
+export const Banner = () => {
+  const { update, shouldDisplayAnnouncementBanner } = useGlobalStore(
+    (store) => ({
+      update: store.update,
+      shouldDisplayAnnouncementBanner: store.shouldDisplayAnnouncementBanner,
+    })
+  );
+
+  // Return an empty div so that the grid layout in _app.page.ts
+  // renders correctly
+  if (!shouldDisplayAnnouncementBanner) {
+    return <div />;
+  }
+
+  return (
+    <AnnouncementBanner>
+      <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
+        <button
+          onClick={() => update({ shouldDisplayAnnouncementBanner: false })}
+        >
+          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
+        </button>
+        <div>
+          <span className="pr-4">The Mainnet sims are live!</span>
+          <ExternalLink href="https://fairground.wtf/">
+            Come help stress test the network
+          </ExternalLink>
+        </div>
+      </div>
+    </AnnouncementBanner>
+  );
+};
diff --git a/apps/trading/components/banner/index.tsx b/apps/trading/components/banner/index.tsx
new file mode 100644
index 000000000..5f15d5d4e
--- /dev/null
+++ b/apps/trading/components/banner/index.tsx
@@ -0,0 +1 @@
+export * from './banner';
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index 17284a939..b823cceee 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -33,6 +33,8 @@ import ToastsManager from './toasts-manager';
 import { HashRouter, useLocation, useSearchParams } from 'react-router-dom';
 import { Connectors } from '../lib/vega-connectors';
 import { ViewingBanner } from '../components/viewing-banner';
+import { Banner } from '../components/banner';
+import classNames from 'classnames';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -70,6 +72,11 @@ function AppBody({ Component }: AppProps) {
   const location = useLocation();
   const { VEGA_ENV } = useEnvironment();
 
+  const gridClasses = classNames(
+    'h-full relative z-0 grid',
+    'grid-rows-[repeat(3,min-content),1fr,min-content]'
+  );
+
   return (
     <div className="h-full dark:bg-black dark:text-white">
       <Head>
@@ -80,20 +87,21 @@ function AppBody({ Component }: AppProps) {
       <VegaWalletProvider>
         <AppLoader>
           <Web3Provider>
-            <div className="h-full relative z-0 grid grid-rows-[min-content,min-content,1fr,min-content]">
+            <div className={gridClasses}>
               <Navbar
                 navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
               />
+              <Banner />
               <ViewingBanner />
               <main data-testid={location.pathname}>
                 <Component />
               </main>
               <Footer />
-              <DialogsContainer />
-              <ToastsManager />
-              <TransactionsHandler />
-              <MaybeConnectEagerly />
             </div>
+            <DialogsContainer />
+            <ToastsManager />
+            <TransactionsHandler />
+            <MaybeConnectEagerly />
           </Web3Provider>
         </AppLoader>
       </VegaWalletProvider>
diff --git a/apps/trading/stores/global.ts b/apps/trading/stores/global.ts
index 0ed57d77b..257a08184 100644
--- a/apps/trading/stores/global.ts
+++ b/apps/trading/stores/global.ts
@@ -7,6 +7,7 @@ interface GlobalStore {
   marketId: string | null;
   update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
   shouldDisplayWelcomeDialog: boolean;
+  shouldDisplayAnnouncementBanner: boolean;
 }
 
 interface PageTitleStore {
@@ -18,6 +19,7 @@ export const useGlobalStore = create<GlobalStore>((set) => ({
   networkSwitcherDialog: false,
   marketId: LocalStorage.getItem('marketId') || null,
   shouldDisplayWelcomeDialog: false,
+  shouldDisplayAnnouncementBanner: true,
   update: (newState) => {
     set(
       produce((state: GlobalStore) => {