Feat: new app banner with redirect (#4108)

Author: katspaugh

src/components/PsaBanner/Countdown.tsx

@@ -0,0 +1,45 @@
+import { ReactElement, useEffect, useState } from 'react'
+
+const Countdown = ({
+  children,
+  seconds,
+  onEnd,
+}: {
+  children: (count: ReactElement) => ReactElement
+  seconds: number
+  onEnd: () => void
+}): ReactElement | null => {
+  const [countdown, setCountdown] = useState<number>(seconds)
+  const [cancel, setCancel] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (cancel) return
+
+    const interval = setInterval(() => {
+      if (cancel) {
+        clearInterval(interval)
+        return
+      }
+
+      setCountdown((prevCountdown) => {
+        if (prevCountdown === 1) {
+          clearInterval(interval)
+          onEnd()
+        }
+
+        return prevCountdown - 1
+      })
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [onEnd, cancel])
+
+  return cancel ? null : (
+    <>
+      {children(<span style={{ display: 'inline-block', width: '1em' }}>{countdown}</span>)}{' '}
+      <a onClick={() => setCancel(true)}>Cancel</a>
+    </>
+  )
+}
+
+export default Countdown

src/components/PsaBanner/index.module.scss

@@ -12,6 +12,17 @@
 
 .banner a {
   color: inherit;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.banner a:hover {
+  text-decoration: underline;
+}
+
+.banner a:not([href]) {
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 .wrapper {

src/components/PsaBanner/index.tsx

@@ -6,120 +6,23 @@ 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'
+import Countdown from './Countdown'
 
-const BANNERS = {
-  '4': <>🚨 Rinkeby will be deprecated by the end of October 2022. Please migrate to Görli. 🚨</>,
+const NEW_URL = 'https://app.safe.global'
 
-  '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.{' '}
-      <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.{' '}
-      <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.{' '}
-      <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.{' '}
-      <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.{' '}
-      <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.{' '}
-      <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.{' '}
-      <a
-        target="_blank"
-        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
-        rel="noreferrer"
-      >
-        More information
-      </a>{' '}
-      🚨
-    </>
-  ),
-  '1': (
+const redirectToNewApp = (): void => {
+  const path = window.location.pathname.replace(/^\/app/, '')
+  window.location.replace(NEW_URL + path)
+}
+
+const BANNERS: Record<string, ReactElement | string> = {
+  '*': (
     <>
-      🚨 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.{' '}
-      <a
-        target="_blank"
-        href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
-        rel="noreferrer"
-      >
-        More information
-      </a>{' '}
-      🚨
+      ⚠️ Safe&apos;s new official URL is <a href={NEW_URL}>app.safe.global</a>.<br />
+      Please update your bookmarks.{' '}
+      <Countdown seconds={10} onEnd={redirectToNewApp}>
+        {(count) => <>Redirecting in {count} seconds...</>}
+      </Countdown>
     </>
   ),
 }
@@ -128,7 +31,7 @@ const WARNING_BANNER = 'WARNING_BANNER'
 
 const PsaBanner = (): ReactElement | null => {
   const chainId = useSelector(currentChainId)
-  const banner = BANNERS[chainId]
+  const banner = BANNERS[chainId] || BANNERS['*']
   const isEnabled = hasFeature(WARNING_BANNER as FEATURES)
   const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`, true)