fix: fiat onramp polish (#36)

* fix: fiat onramp polish

* add 3 session render cap on FoR announcement

src/components/FiatOnrampAnnouncement/index.tsx

@@ -3,7 +3,7 @@ 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 { MouseEvent, useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { X } from 'react-feather'
 import { useToggleWalletDropdown } from 'state/application/hooks'
 import { useFiatOnrampAck } from 'state/user/hooks'
@@ -91,18 +91,26 @@ 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 handleClose = useCallback(
-    (e: MouseEvent<HTMLOrSVGElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
-      acknowledge({ user: false })
-    },
-    [acknowledge]
-  )
+  useEffect(() => {
+    if (!sessionStorage.getItem(ANNOUNCEMENT_RENDERED)) {
+      acknowledge({ renderCount: acks.renderCount + 1 })
+      sessionStorage.setItem(ANNOUNCEMENT_RENDERED, 'true')
+    }
+  }, [acknowledge, acks.renderCount])
+
+  const handleClose = useCallback(() => {
+    setLocallyDismissed(true)
+    sessionStorage.setItem(ANNOUNCEMENT_DISMISSED, 'true')
+  }, [])
 
   const toggleWalletDropdown = useToggleWalletDropdown()
   const handleClick = useCallback(() => {
@@ -111,7 +119,14 @@ export function FiatOnrampAnnouncement() {
   }, [acknowledge, toggleWalletDropdown])
   const fiatOnrampFlag = useFiatOnrampFlag()
 
-  if (!account || acks?.user || fiatOnrampFlag === BaseVariant.Control) {
+  if (
+    !account ||
+    acks?.user ||
+    fiatOnrampFlag === BaseVariant.Control ||
+    locallyDismissed ||
+    sessionStorage.getItem(ANNOUNCEMENT_DISMISSED) ||
+    acks.renderCount >= MAX_RENDER_COUNT
+  ) {
     return null
   }
   return (

src/components/TopLevelModals/index.tsx

@@ -23,9 +23,10 @@ export default function TopLevelModals() {
   const location = useLocation()
   const fiatOnrampFlagEnabled = useFiatOnrampFlag() === BaseVariant.Enabled
   const pageShowsNftPromoBanner =
-    location.pathname.startsWith('/swap') ||
-    location.pathname.startsWith('/tokens') ||
-    location.pathname.startsWith('/pool')
+    !fiatOnrampFlagEnabled &&
+    (location.pathname.startsWith('/swap') ||
+      location.pathname.startsWith('/tokens') ||
+      location.pathname.startsWith('/pool'))
   useAccountRiskCheck(account)
   const accountBlocked = Boolean(blockedAccountModalOpen && account)
   return (

src/state/user/hooks.tsx

@@ -4,6 +4,8 @@ import { useWeb3React } from '@web3-react/core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { SupportedLocale } from 'constants/locales'
 import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
+import { BaseVariant } from 'featureFlags'
+import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
 import JSBI from 'jsbi'
 import { useCallback, useMemo } from 'react'
 import { shallowEqual } from 'react-redux'
@@ -107,8 +109,9 @@ export function useExpertModeManager(): [boolean, () => void] {
 }
 
 interface FiatOnrampAcknowledgements {
-  user: boolean
+  renderCount: number
   system: boolean
+  user: boolean
 }
 export function useFiatOnrampAck(): [
   FiatOnrampAcknowledgements,
@@ -126,7 +129,8 @@ export function useFiatOnrampAck(): [
 }
 export function useHideNFTWelcomeModal(): [boolean | undefined, () => void] {
   const dispatch = useAppDispatch()
-  const hideNFTWelcomeModal = useAppSelector((state) => state.user.hideNFTWelcomeModal)
+  const fiatOnrampFlagEnabled = useFiatOnrampFlag() === BaseVariant.Enabled
+  const hideNFTWelcomeModal = useAppSelector((state) => state.user.hideNFTWelcomeModal) || fiatOnrampFlagEnabled
   const hideModal = useCallback(() => {
     dispatch(updateHideNFTWelcomeModal({ hideNFTWelcomeModal: true }))
   }, [dispatch])

src/state/user/reducer.ts

@@ -9,7 +9,7 @@ import { SerializedPair, SerializedToken } from './types'
 const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
-  fiatOnrampAcknowledgments: { user: boolean; system: boolean }
+  fiatOnrampAcknowledgments: { renderCount: number; system: boolean; user: boolean }
 
   selectedWallet?: ConnectionType
 
@@ -63,7 +63,7 @@ function pairKey(token0Address: string, token1Address: string) {
 }
 
 export const initialState: UserState = {
-  fiatOnrampAcknowledgments: { user: false, system: false },
+  fiatOnrampAcknowledgments: { renderCount: 0, system: false, user: false },
   selectedWallet: undefined,
   matchesDarkMode: false,
   userDarkMode: null,
@@ -87,7 +87,10 @@ const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
-    updateFiatOnrampAcknowledgments(state, { payload }: { payload: { user?: boolean; system?: boolean } }) {
+    updateFiatOnrampAcknowledgments(
+      state,
+      { payload }: { payload: Partial<{ renderCount: number; user: boolean; system: boolean }> }
+    ) {
       state.fiatOnrampAcknowledgments = { ...state.fiatOnrampAcknowledgments, ...payload }
     },
     updateSelectedWallet(state, { payload: { wallet } }) {