feat: add tax service discount to help menu (#6211)

src/components/NavBar/MenuDropdown.tsx

@@ -19,7 +19,7 @@ import { NavLink, NavLinkProps } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
-import { useToggleModal } from '../../state/application/hooks'
+import { useToggleModal, useToggleTaxServiceModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
@@ -123,6 +123,7 @@ export const MenuDropdown = () => {
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
+  const toggleTaxServiceModal = useToggleTaxServiceModal()
 
   return (
     <>
@@ -163,6 +164,14 @@ export const MenuDropdown = () => {
                 <SecondaryLinkedText href="https://help.uniswap.org/en/">
                   <Trans>Help center</Trans> ↗
                 </SecondaryLinkedText>
+                <SecondaryLinkedText
+                  onClick={() => {
+                    toggleTaxServiceModal()
+                    toggleOpen()
+                  }}
+                >
+                  <Trans>Save on Tax Services</Trans> ↗
+                </SecondaryLinkedText>
                 <SecondaryLinkedText href="https://docs.uniswap.org/">
                   <Trans>Documentation</Trans> ↗
                 </SecondaryLinkedText>

src/components/TaxServiceModal/TaxServiceBanner.tsx

@@ -5,6 +5,8 @@ import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button'
 import { bodySmall, subhead } from 'nft/css/common.css'
 import { useCallback, useState } from 'react'
 import { X } from 'react-feather'
+import { useModalIsOpen, useToggleTaxServiceModal } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
 import { useTaxServiceDismissal } from 'state/user/hooks'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
@@ -117,7 +119,9 @@ const MAX_RENDER_COUNT = 1
 export default function TaxServiceBanner() {
   const isDarkMode = useIsDarkMode()
   const [dismissals, addTaxServiceDismissal] = useTaxServiceDismissal()
-  const [modalOpen, setModalOpen] = useState(false)
+  const modalOpen = useModalIsOpen(ApplicationModal.TAX_SERVICE)
+  const toggleTaxServiceModal = useToggleTaxServiceModal()
+
   const sessionStorageTaxServiceDismissed = sessionStorage.getItem(TAX_SERVICE_DISMISSED)
 
   if (!sessionStorageTaxServiceDismissed) {
@@ -126,9 +130,6 @@ export default function TaxServiceBanner() {
   const [bannerOpen, setBannerOpen] = useState(
     sessionStorageTaxServiceDismissed !== 'true' && (dismissals === undefined || dismissals < MAX_RENDER_COUNT)
   )
-  const onDismiss = useCallback(() => {
-    setModalOpen(false)
-  }, [])
 
   const handleClose = useCallback(() => {
     sessionStorage.setItem(TAX_SERVICE_DISMISSED, 'true')
@@ -136,11 +137,14 @@ export default function TaxServiceBanner() {
     dismissals === undefined ? addTaxServiceDismissal(1) : addTaxServiceDismissal(dismissals + 1)
   }, [addTaxServiceDismissal, dismissals])
 
-  const handleLearnMoreClick = useCallback((e: any) => {
+  const handleLearnMoreClick = useCallback(
-    e.preventDefault()
+    (e: any) => {
-    e.stopPropagation()
+      e.preventDefault()
-    setModalOpen(true)
+      e.stopPropagation()
-  }, [])
+      toggleTaxServiceModal()
+    },
+    [toggleTaxServiceModal]
+  )
 
   return (
     <PopupContainer show={bannerOpen} isDarkMode={isDarkMode}>
@@ -175,7 +179,7 @@ export default function TaxServiceBanner() {
           </Button>
         </TraceEvent>
       </InnerContainer>
-      <TaxServiceModal isOpen={modalOpen} onDismiss={onDismiss} />
+      <TaxServiceModal isOpen={modalOpen} onDismiss={toggleTaxServiceModal} />
     </PopupContainer>
   )
 }

src/state/application/hooks.ts

@@ -122,6 +122,10 @@ export function useToggleSelfClaimModal(): () => void {
   return useToggleModal(ApplicationModal.SELF_CLAIM)
 }
 
+export function useToggleTaxServiceModal(): () => void {
+  return useToggleModal(ApplicationModal.TAX_SERVICE)
+}
+
 export function useToggleDelegateModal(): () => void {
   return useToggleModal(ApplicationModal.DELEGATE)
 }

src/state/application/reducer.ts

@@ -30,6 +30,7 @@ export enum ApplicationModal {
   SELF_CLAIM,
   SETTINGS,
   SHARE,
+  TAX_SERVICE,
   TIME_SELECTOR,
   VOTE,
   WALLET,