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

Commit 50f9831

Browse files
katspaughkatspaugh
authored
Fix: banner text (#4095)
* Fix: adjust banner text * Bump version * Fix undefined
1 parent f870a52 commit 50f9831

File tree

3 files changed

+123
-62
lines changed

3 files changed

+123
-62
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "safe-react",
3-
"version": "3.32.0",
3+
"version": "3.32.1",
44
"description": "Allowing crypto users manage funds in a safer way",
55
"website": "https://github.com/gnosis/safe-react#readme",
66
"bugs": {

‎src/components/PsaBanner/index.module.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.banner {
2+
position: fixed;
3+
z-index: 10000;
4+
top: 0;
5+
left: 0;
6+
right: 0;
7+
background-color: rgb(0, 140, 115);
8+
color: #fff;
9+
padding: 5px 20px;
10+
font-size: 16px;
11+
}
12+
13+
.banner a {
14+
color: inherit;
15+
}
16+
17+
.wrapper {
18+
position: relative;
19+
display: flex;
20+
flex-direction: column;
21+
alignitems: center;
22+
height: 70px;
23+
}
24+
25+
.content {
26+
max-width: 960px;
27+
margin: 0 auto;
28+
text-align: center;
29+
padding: 10px;
30+
}
31+
32+
.close {
33+
position: absolute;
34+
right: 10px;
35+
top: 10px;
36+
cursor: pointer;
37+
z-index: 2;
38+
}

‎src/components/PsaBanner/index.tsx‎

Lines changed: 84 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,86 +5,134 @@ import Close from '@material-ui/icons/Close'
55
import { currentChainId } from 'src/logic/config/store/selectors'
66
import { hasFeature } from 'src/logic/safe/utils/safeVersion'
77
import useCachedState from 'src/utils/storage/useCachedState'
8+
import styles from './index.module.scss'
89

910
const BANNERS = {
10-
'4': <>🚨 Rinkeby is being deprecated. Please migrate to Goerli. 🚨</>,
11-
'5': (
12-
<>
13-
🚨 On <b>13.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Goerli, during which the
14-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
15-
</>
16-
),
17-
'73799': (
18-
<>
19-
🚨 On <b>13.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Volta, during which the
20-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
21-
</>
22-
),
23-
'246': (
24-
<>
25-
🚨 On <b>13.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Energy Web Chain, during which
26-
the functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
27-
</>
28-
),
11+
'4': <>🚨 Rinkeby will be deprecated by the end of October 2022. Please migrate to Görli. 🚨</>,
12+
2913
'1313161554': (
3014
<>
3115
🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Aurora, during which the
32-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
16+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
17+
<a
18+
target="_blank"
19+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
20+
rel="noreferrer"
21+
>
22+
More information
23+
</a>{' '}
24+
🚨
3325
</>
3426
),
3527
'42161': (
3628
<>
3729
🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Arbitrum, during which the
38-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
30+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
31+
<a
32+
target="_blank"
33+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
34+
rel="noreferrer"
35+
>
36+
More information
37+
</a>{' '}
38+
🚨
3939
</>
4040
),
4141
'43114': (
4242
<>
4343
🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Avalanche, during which the
44-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
44+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
45+
<a
46+
target="_blank"
47+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
48+
rel="noreferrer"
49+
>
50+
More information
51+
</a>{' '}
52+
🚨
4553
</>
4654
),
4755
'10': (
4856
<>
4957
🚨 On <b>17.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Optimism, during which the
50-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
58+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
59+
<a
60+
target="_blank"
61+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
62+
rel="noreferrer"
63+
>
64+
More information
65+
</a>{' '}
66+
🚨
5167
</>
5268
),
5369
'137': (
5470
<>
5571
🚨 On <b>18.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Polygon, during which the
56-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
72+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
73+
<a
74+
target="_blank"
75+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
76+
rel="noreferrer"
77+
>
78+
More information
79+
</a>{' '}
80+
🚨
5781
</>
5882
),
5983
'56': (
6084
<>
6185
🚨 On <b>18.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on BNB Smart Chain, during which the
62-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
86+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
87+
<a
88+
target="_blank"
89+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
90+
rel="noreferrer"
91+
>
92+
More information
93+
</a>{' '}
94+
🚨
6395
</>
6496
),
6597
'100': (
6698
<>
6799
🚨 On <b>20.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Gnosis Chain, during which the
68-
functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
100+
functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
101+
<a
102+
target="_blank"
103+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
104+
rel="noreferrer"
105+
>
106+
More information
107+
</a>{' '}
108+
🚨
69109
</>
70110
),
71111
'1': (
72112
<>
73113
🚨 On <b>24.10.2022 @ 9am CEST</b> we will be undertaking indexer maintenance on Ethereum mainnet, during which
74-
the functionality of this application might be restricted. Please expect downtime of 2-3 hours. 🚨
114+
the functionality of this application might be restricted. Please expect downtime of 2-3 hours.{' '}
115+
<a
116+
target="_blank"
117+
href="https://forum.gnosis-safe.io/t/transaction-service-migration-october-2022/1550"
118+
rel="noreferrer"
119+
>
120+
More information
121+
</a>{' '}
122+
🚨
75123
</>
76124
),
77125
}
78126

79127
const WARNING_BANNER = 'WARNING_BANNER'
80128

81-
const PsaBanner = (): ReactElement => {
129+
const PsaBanner = (): ReactElement | null => {
82130
const chainId = useSelector(currentChainId)
83131
const banner = BANNERS[chainId]
84132
const isEnabled = hasFeature(WARNING_BANNER as FEATURES)
85133
const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`, true)
86134

87-
const showBanner = isEnabled && banner && !closed
135+
const showBanner = Boolean(isEnabled && banner && !closed)
88136

89137
const onClose = () => {
90138
setClosed(true)
@@ -94,40 +142,15 @@ const PsaBanner = (): ReactElement => {
94142
document.body.setAttribute('data-with-banner', showBanner.toString())
95143
}, [showBanner])
96144

97-
return (
98-
showBanner && (
99-
<div
100-
style={{
101-
position: 'fixed',
102-
zIndex: 10000,
103-
top: 0,
104-
left: 0,
105-
right: 0,
106-
backgroundColor: 'rgb(0, 140, 115)',
107-
color: '#fff',
108-
padding: '5px 20px',
109-
fontSize: '16px',
110-
}}
111-
>
112-
<div
113-
style={{
114-
position: 'relative',
115-
display: 'flex',
116-
flexDirection: 'column',
117-
alignItems: 'center',
118-
height: '70px',
119-
}}
120-
>
121-
<div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center', padding: '10px' }}>{banner}</div>
145+
return showBanner ? (
146+
<div className={styles.banner}>
147+
<div className={styles.wrapper}>
148+
<div className={styles.content}>{banner}</div>
122149

123-
<Close
124-
style={{ position: 'absolute', right: '10px', top: '10px', cursor: 'pointer', zIndex: 2 }}
125-
onClick={onClose}
126-
/>
127-
</div>
150+
<Close className={styles.close} onClick={onClose} />
128151
</div>
129-
)
130-
)
152+
</div>
153+
) : null
131154
}
132155

133156
export default PsaBanner

0 commit comments

Comments
 (0)