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

Commit

Permalink
Fix: banner text (#4095)
Browse files Browse the repository at this point in the history 
* Fix: adjust banner text

* Bump version

* Fix undefined
  • Loading branch information
@katspaugh
katspaugh authored Oct 14, 2022
1 parent f870a52 commit 50f9831
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 62 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
38 changes: 38 additions & 0 deletions src/components/PsaBanner/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
145 changes: 84 additions & 61 deletions src/components/PsaBanner/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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

0 comments on commit 50f9831

Please sign in to comment.