fix: nft promo banner init state fix (#5384)

init

src/nft/components/nftExploreBanner/NftExploreBanner.tsx

@@ -4,7 +4,7 @@ import { Box } from 'nft/components/Box'
 import { bodySmall, subhead } from 'nft/css/common.css'
 import { X } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
-import { useShowNftPromoBanner } from 'state/user/hooks'
+import { useHideNftPromoBanner } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { StyledInternalLink } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
@@ -88,16 +88,16 @@ const StyledImageContainer = styled(Box)`
 `
 
 export default function NftExploreBanner() {
-  const [showNftPromoBanner, stopShowingNftPromoBanner] = useShowNftPromoBanner()
+  const [hideNftPromoBanner, toggleHideNftPromoBanner] = useHideNftPromoBanner()
   const navigate = useNavigate()
 
   const navigateToNfts = () => {
     navigate('/nfts')
-    stopShowingNftPromoBanner()
+    toggleHideNftPromoBanner()
   }
 
   return (
-    <PopupContainer show={showNftPromoBanner} onClick={navigateToNfts}>
+    <PopupContainer show={!hideNftPromoBanner} onClick={navigateToNfts}>
       <InnerContainer>
         <StyledImageContainer as="img" src={randomizedNftImage} draggable={false} />
         <TextContainer>
@@ -121,7 +121,7 @@ export default function NftExploreBanner() {
           onClick={(e) => {
             e.preventDefault()
             e.stopPropagation()
-            stopShowingNftPromoBanner()
+            toggleHideNftPromoBanner()
           }}
         />
       </InnerContainer>

src/state/user/hooks.tsx

@@ -272,15 +272,15 @@ export function useURLWarningVisible(): boolean {
   return useAppSelector((state: AppState) => state.user.URLWarningVisible)
 }
 
-export function useShowNftPromoBanner(): [boolean, () => void] {
+export function useHideNftPromoBanner(): [boolean, () => void] {
   const dispatch = useAppDispatch()
-  const showNftPromoBanner = useAppSelector((state) => state.user.NFTPromoBannerVisible)
+  const hideNftPromoBanner = useAppSelector((state) => state.user.hideNFTPromoBanner)
 
-  const stopShowingNftPromoBanner = useCallback(() => {
-    dispatch(updateShowNftPromoBanner({ showNftPromoBanner: false }))
+  const toggleHideNftPromoBanner = useCallback(() => {
+    dispatch(updateShowNftPromoBanner({ hideNFTPromoBanner: true }))
   }, [dispatch])
 
-  return [showNftPromoBanner, stopShowingNftPromoBanner]
+  return [hideNftPromoBanner, toggleHideNftPromoBanner]
 }
 
 /**

src/state/user/reducer.ts

@@ -48,7 +48,7 @@ export interface UserState {
 
   timestamp: number
   URLWarningVisible: boolean
-  NFTPromoBannerVisible: boolean // whether or not we should show the nft explore promo banner
+  hideNFTPromoBanner: boolean // whether or not we should hide the nft explore promo banner
 
   // undefined means has not gone through A/B split yet
   showSurveyPopup: boolean | undefined
@@ -75,7 +75,7 @@ export const initialState: UserState = {
   pairs: {},
   timestamp: currentTimestamp(),
   URLWarningVisible: true,
-  NFTPromoBannerVisible: true,
+  hideNFTPromoBanner: false,
   showSurveyPopup: undefined,
   showDonationLink: true,
 }
@@ -124,7 +124,7 @@ const userSlice = createSlice({
       state.showDonationLink = action.payload.showDonationLink
     },
     updateShowNftPromoBanner(state, action) {
-      state.NFTPromoBannerVisible = action.payload.NFTPromoBannerVisible
+      state.hideNFTPromoBanner = action.payload.hideNFTPromoBanner
     },
     addSerializedToken(state, { payload: { serializedToken } }) {
       if (!state.tokens) {