Skip to content
This repository has been archived by the owner on Nov 10, 2023. It is now read-only.

Commit

Permalink
Feat: new app banner with redirect (#4108)
Browse files Browse the repository at this point in the history
  • Loading branch information
katspaugh authored Nov 7, 2022
1 parent 5bf0906 commit 897cade
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 112 deletions.
45 changes: 45 additions & 0 deletions src/components/PsaBanner/Countdown.tsx
Original file line number Diff line number Diff line change
@@ -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
11 changes: 11 additions & 0 deletions src/components/PsaBanner/index.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
127 changes: 15 additions & 112 deletions src/components/PsaBanner/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
),
}
Expand All @@ -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)

Expand Down

0 comments on commit 897cade

Please sign in to comment.