From 50f98314baa9a985a69e07f81d1d1b776c89efa5 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Fri, 14 Oct 2022 15:15:39 +0200
Subject: [PATCH] Fix: banner text (#4095)

* Fix: adjust banner text

* Bump version

* Fix undefined
---
 package.json                               |   2 +-
 src/components/PsaBanner/index.module.scss |  38 ++++++
 src/components/PsaBanner/index.tsx         | 145 ++++++++++++---------
 3 files changed, 123 insertions(+), 62 deletions(-)
 create mode 100644 src/components/PsaBanner/index.module.scss

diff --git a/package.json b/package.json
index dbf7da052c..162fbf8139 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "3.32.0",
+  "version": "3.32.1",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {
diff --git a/src/components/PsaBanner/index.module.scss b/src/components/PsaBanner/index.module.scss
new file mode 100644
index 0000000000..2dda2a1b8a
--- /dev/null
+++ b/src/components/PsaBanner/index.module.scss
@@ -0,0 +1,38 @@
+.banner {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgb(0, 140, 115);
+  color: #fff;
+  padding: 5px 20px;
+  font-size: 16px;
+}
+
+.banner a {
+  color: inherit;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  alignitems: center;
+  height: 70px;
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 10px;
+}
+
+.close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  z-index: 2;
+}
diff --git a/src/components/PsaBanner/index.tsx b/src/components/PsaBanner/index.tsx
index bdb41baf47..31c3ec0daf 100644
--- a/src/components/PsaBanner/index.tsx
+++ b/src/components/PsaBanner/index.tsx
@@ -5,86 +5,134 @@ import Close from '@material-ui/icons/Close'
 import { currentChainId } from 'src/logic/config/store/selectors'
 import { hasFeature } from 'src/logic/safe/utils/safeVersion'
 import useCachedState from 'src/utils/storage/useCachedState'
+import styles from './index.module.scss'
 
 const BANNERS = {
-  '4': <>🚨 Rinkeby is being deprecated. Please migrate to Goerli. 🚨</>,
-  '5': (
-    <>
-      🚨 On <b>13.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Goerli, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
-    </>
-  ),
-  '73799': (
-    <>
-      🚨 On <b>13.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Volta, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
-    </>
-  ),
-  '246': (
-    <>
-      🚨 On <b>13.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Energy Web Chain, during which
-      the functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
-    </>
-  ),
+  '4': <>🚨 Rinkeby will be deprecated by the end of October 2022. Please migrate to Görli. 🚨</>,
+
   '1313161554': (
     <>
       🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Aurora, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '42161': (
     <>
       🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Arbitrum, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '43114': (
     <>
       🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Avalanche, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '10': (
     <>
       🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Optimism, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '137': (
     <>
       🚨 On <b>18.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Polygon, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '56': (
     <>
       🚨 On <b>18.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on BNB Smart Chain, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '100': (
     <>
       🚨 On <b>20.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Gnosis Chain, during which the
-      functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
   '1': (
     <>
       🚨 On <b>24.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Ethereum mainnet, during which
-      the functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
+      the functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
+      <a
+        target="_blank"
+        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
+        rel="noreferrer"
+      >
+        More information
+      </a>{' '}
+      🚨
     </>
   ),
 }
 
 const WARNING_BANNER = 'WARNING_BANNER'
 
-const PsaBanner = (): ReactElement => {
+const PsaBanner = (): ReactElement | null => {
   const chainId = useSelector(currentChainId)
   const banner = BANNERS[chainId]
   const isEnabled = hasFeature(WARNING_BANNER as FEATURES)
   const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`, true)
 
-  const showBanner = isEnabled && banner && !closed
+  const showBanner = Boolean(isEnabled && banner && !closed)
 
   const onClose = () => {
     setClosed(true)
@@ -94,40 +142,15 @@ const PsaBanner = (): ReactElement => {
     document.body.setAttribute('data-with-banner', showBanner.toString())
   }, [showBanner])
 
-  return (
-    showBanner && (
-      <div
-        style={{
-          position: 'fixed',
-          zIndex: 10000,
-          top: 0,
-          left: 0,
-          right: 0,
-          backgroundColor: 'rgb(0, 140, 115)',
-          color: '#fff',
-          padding: '5px 20px',
-          fontSize: '16px',
-        }}
-      >
-        <div
-          style={{
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            height: '70px',
-          }}
-        >
-          <div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center', padding: '10px' }}>{banner}</div>
+  return showBanner ? (
+    <div className={styles.banner}>
+      <div className={styles.wrapper}>
+        <div className={styles.content}>{banner}</div>
 
-          <Close
-            style={{ position: 'absolute', right: '10px', top: '10px', cursor: 'pointer', zIndex: 2 }}
-            onClick={onClose}
-          />
-        </div>
+        <Close className={styles.close} onClick={onClose} />
       </div>
-    )
-  )
+    </div>
+  ) : null
 }
 
 export default PsaBanner