diff --git a/src/components/PsaBanner/Countdown.tsx b/src/components/PsaBanner/Countdown.tsx new file mode 100644 index 0000000000..a9b8c73c8d --- /dev/null +++ b/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(seconds) + const [cancel, setCancel] = useState(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({countdown})}{' '} + setCancel(true)}>Cancel + + ) +} + +export default Countdown diff --git a/src/components/PsaBanner/index.module.scss b/src/components/PsaBanner/index.module.scss index 2dda2a1b8a..3339664df9 100644 --- a/src/components/PsaBanner/index.module.scss +++ b/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 { diff --git a/src/components/PsaBanner/index.tsx b/src/components/PsaBanner/index.tsx index 31c3ec0daf..2b0eb89a9f 100644 --- a/src/components/PsaBanner/index.tsx +++ b/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 17.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '42161': ( - <> - 🚨 On 17.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '43114': ( - <> - 🚨 On 17.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '10': ( - <> - 🚨 On 17.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '137': ( - <> - 🚨 On 18.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '56': ( - <> - 🚨 On 18.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '100': ( - <> - 🚨 On 20.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 - - ), - '1': ( +const redirectToNewApp = (): void => { + const path = window.location.pathname.replace(/^\/app/, '') + window.location.replace(NEW_URL + path) +} + +const BANNERS: Record = { + '*': ( <> - 🚨 On 24.10.2022 @ 9am CEST 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.{' '} - - More information - {' '} - 🚨 + ⚠️ Safe's new official URL is app.safe.global.
+ Please update your bookmarks.{' '} + + {(count) => <>Redirecting in {count} seconds...} + ), } @@ -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(`${WARNING_BANNER}_${chainId}_closed`, true)