diff --git a/src/components/PsaBanner/index.tsx b/src/components/PsaBanner/index.tsx index e4d4b721e5..bdb41baf47 100644 --- a/src/components/PsaBanner/index.tsx +++ b/src/components/PsaBanner/index.tsx @@ -1,4 +1,4 @@ -import { ReactElement, useEffect, useRef } from 'react' +import { ReactElement, useEffect } from 'react' import { FEATURES } from '@gnosis.pm/safe-react-gateway-sdk' import { useSelector } from 'react-redux' import Close from '@material-ui/icons/Close' @@ -79,11 +79,10 @@ const BANNERS = { const WARNING_BANNER = 'WARNING_BANNER' const PsaBanner = (): ReactElement => { - const bannerRef = useRef(null) const chainId = useSelector(currentChainId) const banner = BANNERS[chainId] const isEnabled = hasFeature(WARNING_BANNER as FEATURES) - const [closed = false, setClosed] = useCachedState(`${WARNING_BANNER}_${chainId}_closed`) + const [closed = false, setClosed] = useCachedState(`${WARNING_BANNER}_${chainId}_closed`, true) const showBanner = isEnabled && banner && !closed @@ -92,13 +91,12 @@ const PsaBanner = (): ReactElement => { } useEffect(() => { - document.body.style.paddingTop = bannerRef.current ? bannerRef.current.clientHeight + 'px' : '' - }, [bannerRef]) + document.body.setAttribute('data-with-banner', showBanner.toString()) + }, [showBanner]) return ( showBanner && (
{ color: '#fff', padding: '5px 20px', fontSize: '16px', - height: '80px', }} > -
+
{banner}
diff --git a/src/components/Root/index.module.scss b/src/components/Root/index.module.scss index 0191daf7e3..7c23222a89 100644 --- a/src/components/Root/index.module.scss +++ b/src/components/Root/index.module.scss @@ -58,3 +58,8 @@ html[class="darkMode"] [class*="networkLabel"] { html[class="darkMode"] [class*="networkLabel"] { outline: 1px solid #333; } + +body[data-with-banner="true"], +body[data-with-banner="true"] [class*="safe-list-sidebar"] { + padding-top: 80px; +} diff --git a/src/components/SafeListSidebar/index.tsx b/src/components/SafeListSidebar/index.tsx index fd499dd0be..50e6c984e4 100644 --- a/src/components/SafeListSidebar/index.tsx +++ b/src/components/SafeListSidebar/index.tsx @@ -36,7 +36,7 @@ export const SafeListSidebar = ({ children }: Props): ReactElement => { return ( (key: string): [T | undefined, React.Dispatch>] => { +const useCachedState = ( + key: string, + isSession = false, +): [T | undefined, React.Dispatch>] => { const [cache, setCache] = useState() + const storage = isSession ? session : local useEffect(() => { - const saved = local.getItem(key) + const saved = storage.getItem(key) setCache(saved) - }, [key, setCache]) + }, [key, storage, setCache]) useEffect(() => { - local.setItem(key, cache) - }, [key, cache]) + storage.setItem(key, cache) + }, [key, storage, cache]) return [cache, setCache] }