Reposition banner in tree (#479)

cowprotocol · Apr 28, 2022 · c0bfbcb · c0bfbcb
1 parent 4baa0b3
commit c0bfbcb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/src/custom/components/SideBanner/index.tsx b/src/custom/components/SideBanner/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import styled from 'styled-components/macro'
 import AnniversaryImage from 'assets/cow-swap/anniversary-icons.png'
 import TwitterImage from 'assets/cow-swap/twitter.svg'
@@ -20,7 +20,6 @@ export enum BannerType {
 }
 export interface BannerProps {
   type: BannerType
-  isVisible: boolean
 }
 
 function playAnniversarySound() {
@@ -143,10 +142,19 @@ const FooterContent = styled.div`
   }
 `
 
-export default function SideBanner({ type, isVisible }: BannerProps) {
-  const [isActive, setIsActive] = useState(isVisible)
+const getShowBannerState = (key: string) => {
+  const localStorageValue = localStorage.getItem(key)
 
-  // const isHidden = !isVisible || !isActive
+  // item doesn't exist, show banner (true)
+  if (localStorageValue === null) return true
+
+  // else return localstorage state (!! for type safety)
+  return !!JSON.parse(localStorageValue)
+}
+
+export default function SideBanner({ type }: BannerProps) {
+  const isSideBannerVisible = useMemo(() => getShowBannerState(IS_SIDE_BANNER_VISIBLE_KEY), []) // empty array only calls on mount
+  const [isActive, setIsActive] = useState(isSideBannerVisible)
 
   const handleClose = () => {
     setIsActive(false)

diff --git a/src/custom/pages/App/index.tsx b/src/custom/pages/App/index.tsx
@@ -1,7 +1,7 @@
 import AppMod from './AppMod'
 import styled from 'styled-components/macro'
 import { RedirectPathToSwapOnly, RedirectToSwap } from 'pages/Swap/redirects'
-import { Suspense, lazy, useMemo } from 'react'
+import { Suspense, lazy } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 
 import AnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers'
@@ -13,9 +13,6 @@ import { useFilterEmptyQueryParams } from 'hooks/useFilterEmptyQueryParams'
 import RedirectAnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers/RedirectAnySwapAffectedUsers'
 import { SENTRY_IGNORED_GP_QUOTE_ERRORS } from 'api/gnosisProtocol/errors/QuoteError'
 
-import SideBanner, { BannerType } from 'components/SideBanner'
-import { IS_SIDE_BANNER_VISIBLE_KEY } from 'constants/misc'
-
 const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN
 const SENTRY_TRACES_SAMPLE_RATE = process.env.REACT_APP_SENTRY_TRACES_SAMPLE_RATE
 
@@ -91,28 +88,15 @@ function createRedirectExternal(url: string) {
 
 const Loading = <LoadingWrapper>Loading...</LoadingWrapper>
 
-const getShowBannerState = (key: string) => {
-  const localStorageValue = localStorage.getItem(key)
-
-  // item doesn't exist, show banner (true)
-  if (localStorageValue === null) return true
-
-  // else return localstorage state (!! for type safety)
-  return !!JSON.parse(localStorageValue)
-}
-
 export default function App() {
   // Dealing with empty URL queryParameters
   useFilterEmptyQueryParams()
 
-  const isSideBannerVisible = useMemo(() => getShowBannerState(IS_SIDE_BANNER_VISIBLE_KEY), []) // empty array only calls on mount
-
   return (
     <>
       <RedirectAnySwapAffectedUsers />
       <Wrapper>
         <Suspense fallback={Loading}>
-          <SideBanner isVisible={isSideBannerVisible} type={BannerType.ANNIVERSARY} />
           <Switch>
             <Redirect from="/claim" to="/profile" />
             <Route exact strict path="/swap" component={Swap} />

diff --git a/src/index.tsx b/src/index.tsx
@@ -36,6 +36,7 @@ import getLibrary from 'utils/getLibrary'
 import AppziButton from 'components/AppziButton'
 import RadialGradientByChainUpdater from 'theme/RadialGradientByChainUpdater'
 import { nodeRemoveChildFix } from 'utils/node'
+import SideBanner, { BannerType } from 'components/SideBanner'
 
 // Node removeChild hackaround
 // based on: https://github.com/facebook/react/issues/11538#issuecomment-417504600
@@ -81,6 +82,7 @@ ReactDOM.render(
                 <Updaters />
                 <ThemeProvider>
                   <ThemedGlobalStyle />
+                  <SideBanner type={BannerType.ANNIVERSARY} />
                   <AppziButton />
                   <App />
                 </ThemeProvider>