fix: after 1 dismissal FoR banner should go away (#5778)

* Revert "fix: use localStorage for Fiat announcement (#5750)"

This reverts commit 62361647.

* fix: when a user dismisses the FoR banner, never show it again

* pr feedback

* fix some weird nft e2e test issues

cypress/e2e/nfts.test.ts

@@ -3,8 +3,9 @@ import { getTestSelector } from '../utils'
 const COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
 
 describe('Testing nfts', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/')
+    cy.get(getTestSelector('FiatOnrampAnnouncement-close')).first().click()
   })
 
   it('should load nft leaderboard', () => {
@@ -22,13 +23,8 @@ describe('Testing nfts', () => {
     cy.get(getTestSelector('nft-collection-filter-buy-now')).should('exist')
   })
 
-  it('should be able to open bag and open sweep', () => {
-    cy.get(getTestSelector('nft-sweep-button')).first().click()
-    cy.get(getTestSelector('nft-empty-bag')).should('exist')
-    cy.get(getTestSelector('nft-sweep-slider')).should('exist')
-  })
-
   it('should be able to navigate to activity', () => {
+    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-activity')).first().click()
     cy.get(getTestSelector('nft-activity-row')).should('exist')
   })
@@ -45,19 +41,11 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
+    cy.visit(`#/nfts/asset/${COLLECTION_ADDRESS}/8565`)
     cy.get(getTestSelector('nft-details-description-text')).should('exist')
     cy.get(getTestSelector('nft-details-description')).click()
     cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
     cy.get(getTestSelector('nft-details-toggle-bag')).eq(1).click()
     cy.get(getTestSelector('nft-bag')).should('exist')
   })
-
-  it('should go view my nfts', () => {
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('nft-view-self-nfts')).click()
-    cy.get(getTestSelector('nft-explore-nfts-button')).should('exist')
-    cy.get(getTestSelector('nft-no-nfts-selected')).should('exist')
-    cy.get(getTestSelector('nft-bag-close-icon')).click()
-    cy.get(getTestSelector('nft-explore-nfts-button')).click()
-  })
 })

cypress/e2e/pool.test.ts

+import { getTestSelector } from '../utils'
+
 describe('Pool', () => {
   beforeEach(() => cy.visit('/pool'))
 
   it('add liquidity links to /add/ETH', () => {
+    cy.get(getTestSelector('FiatOnrampAnnouncement-close')).first().click()
     cy.get('#join-pool-button').click()
     cy.url().should('contain', '/add/ETH')
   })

src/components/FiatOnrampAnnouncement/index.tsx

@@ -7,11 +7,9 @@ import { BaseVariant } from 'featureFlags'
 import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
 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'
@@ -95,22 +93,23 @@ const Body = styled(ThemedText.BodySmall)`
   position: relative;
 `
 
-const MAX_RENDER_COUNT = 3
+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 fiatOnrampDismissed = useAppSelector((state) => state.user.fiatOnrampDismissed)
-
   useEffect(() => {
+    if (!sessionStorage.getItem(ANNOUNCEMENT_RENDERED)) {
       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
+      sessionStorage.setItem(ANNOUNCEMENT_RENDERED, 'true')
+    }
+  }, [acknowledge, acks])
 
-  const dispatch = useDispatch()
   const handleClose = useCallback(() => {
-    dispatch(dismissFiatOnramp())
-  }, [dispatch])
+    localStorage.setItem(ANNOUNCEMENT_DISMISSED, 'true')
+  }, [])
 
   const toggleWalletDropdown = useToggleWalletDropdown()
   const handleClick = useCallback(() => {
@@ -126,7 +125,7 @@ export function FiatOnrampAnnouncement() {
     !account ||
     acks?.user ||
     fiatOnrampFlag === BaseVariant.Control ||
-    fiatOnrampDismissed ||
+    localStorage.getItem(ANNOUNCEMENT_DISMISSED) ||
     acks?.renderCount >= MAX_RENDER_COUNT ||
     isMobile ||
     openModal !== null
@@ -136,7 +135,7 @@ export function FiatOnrampAnnouncement() {
   return (
     <ArrowWrapper>
       <Arrow />
-      <CloseIcon onClick={handleClose} />
+      <CloseIcon onClick={handleClose} data-testid="FiatOnrampAnnouncement-close" />
       <Wrapper onClick={handleClick}>
         <Header>
           <Trans>Buy crypto</Trans>

src/state/user/reducer.ts

@@ -10,7 +10,6 @@ const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
   fiatOnrampAcknowledgments: { renderCount: number; system: boolean; user: boolean }
-  fiatOnrampDismissed: boolean
 
   selectedWallet?: ConnectionType
 
@@ -62,8 +61,6 @@ 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,
@@ -91,9 +88,6 @@ const userSlice = createSlice({
     ) {
       state.fiatOnrampAcknowledgments = { ...state.fiatOnrampAcknowledgments, ...payload }
     },
-    dismissFiatOnramp(state) {
-      state.fiatOnrampDismissed = true
-    },
     updateSelectedWallet(state, { payload: { wallet } }) {
       state.selectedWallet = wallet
     },
@@ -188,7 +182,6 @@ export const {
   addSerializedPair,
   addSerializedToken,
   updateFiatOnrampAcknowledgments,
-  dismissFiatOnramp,
   updateSelectedWallet,
   updateHideClosedPositions,
   updateMatchesDarkMode,