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

Fix: banner text #4095

Merged
katspaugh merged 3 commits into from
Oct 14, 2022
Merged

Fix: banner text #4095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9397a5f
Fix: adjust banner text
katspaugh Oct 14, 2022
f8cf85c
Bump version
katspaugh Oct 14, 2022
9404e68
Fix undefined
katspaugh Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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