fix: use localStorage for Fiat announcement (#5750)

* fix: use localStorage for Fiat announcement

* move to redux

* rm locally

* lint

* add change to hook

* fixes

src/components/FiatOnrampAnnouncement/index.tsx

@@ -3,11 +3,13 @@ import { useWeb3React } from '@web3-react/core'
 import fiatMaskUrl from 'assets/svg/fiat_mask.svg'
 import { BaseVariant } from 'featureFlags'
 import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { X } from 'react-feather'
+import { useDispatch } from 'react-redux'
 import { useToggleWalletDropdown } from 'state/application/hooks'
 import { useAppSelector } from 'state/hooks'
 import { useFiatOnrampAck } from 'state/user/hooks'
+import { dismissFiatOnramp } from 'state/user/reducer'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { isMobile } from 'utils/userAgent'
@@ -91,25 +93,22 @@ const Body = styled(ThemedText.BodySmall)`
   position: relative;
 `
 
-const ANNOUNCEMENT_RENDERED = 'FiatOnrampAnnouncement-rendered'
-const ANNOUNCEMENT_DISMISSED = 'FiatOnrampAnnouncement-dismissed'
-
 const MAX_RENDER_COUNT = 3
+
 export function FiatOnrampAnnouncement() {
   const { account } = useWeb3React()
   const [acks, acknowledge] = useFiatOnrampAck()
-  const [locallyDismissed, setLocallyDismissed] = useState(false)
+  const fiatOnrampDismissed = useAppSelector((state) => state.user.fiatOnrampDismissed)
+
   useEffect(() => {
-    if (!sessionStorage.getItem(ANNOUNCEMENT_RENDERED)) {
-      acknowledge({ renderCount: acks?.renderCount + 1 })
-      sessionStorage.setItem(ANNOUNCEMENT_RENDERED, 'true')
-    }
-  }, [acknowledge, acks])
+    acknowledge({ renderCount: acks?.renderCount + 1 })
+    // The dependency list is empty so this is only run once on mount
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
+  const dispatch = useDispatch()
   const handleClose = useCallback(() => {
-    setLocallyDismissed(true)
-    sessionStorage.setItem(ANNOUNCEMENT_DISMISSED, 'true')
-  }, [])
+    dispatch(dismissFiatOnramp())
+  }, [dispatch])
 
   const toggleWalletDropdown = useToggleWalletDropdown()
   const handleClick = useCallback(() => {
@@ -124,8 +123,7 @@ export function FiatOnrampAnnouncement() {
     !account ||
     acks?.user ||
     fiatOnrampFlag === BaseVariant.Control ||
-    locallyDismissed ||
-    sessionStorage.getItem(ANNOUNCEMENT_DISMISSED) ||
+    fiatOnrampDismissed ||
     acks?.renderCount >= MAX_RENDER_COUNT ||
     isMobile ||
     openModal !== null

src/state/user/reducer.ts

@@ -10,6 +10,7 @@ const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
   fiatOnrampAcknowledgments: { renderCount: number; system: boolean; user: boolean }
+  fiatOnrampDismissed: boolean
 
   selectedWallet?: ConnectionType
 
@@ -61,6 +62,8 @@ function pairKey(token0Address: string, token1Address: string) {
 
 export const initialState: UserState = {
   fiatOnrampAcknowledgments: { renderCount: 0, system: false, user: false },
+  fiatOnrampDismissed: false,
+
   selectedWallet: undefined,
   matchesDarkMode: false,
   userDarkMode: null,
@@ -88,6 +91,9 @@ const userSlice = createSlice({
     ) {
       state.fiatOnrampAcknowledgments = { ...state.fiatOnrampAcknowledgments, ...payload }
     },
+    dismissFiatOnramp(state) {
+      state.fiatOnrampDismissed = true
+    },
     updateSelectedWallet(state, { payload: { wallet } }) {
       state.selectedWallet = wallet
     },
@@ -182,6 +188,7 @@ export const {
   addSerializedPair,
   addSerializedToken,
   updateFiatOnrampAcknowledgments,
+  dismissFiatOnramp,
   updateSelectedWallet,
   updateHideClosedPositions,
   updateMatchesDarkMode,