feat: remove tax service toast, modal, and menu item (#6244)

* init

* fix

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -4,7 +4,6 @@ import { useMiniPortfolioFlag } from 'featureFlags/flags/miniPortfolio'
 import { NftGraphqlVariant, useNftGraphqlFlag } from 'featureFlags/flags/nftlGraphql'
 import { PayWithAnyTokenVariant, usePayWithAnyTokenFlag } from 'featureFlags/flags/payWithAnyToken'
 import { SwapWidgetVariant, useSwapWidgetFlag } from 'featureFlags/flags/swapWidget'
-import { TaxServiceVariant, useTaxServiceBannerFlag } from 'featureFlags/flags/taxServiceBanner'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
@@ -242,12 +241,6 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.nftGraphql}
         label="Migrate NFT read endpoints to GQL"
       />
-      <FeatureFlagOption
-        variant={TaxServiceVariant}
-        value={useTaxServiceBannerFlag()}
-        featureFlag={FeatureFlag.taxService}
-        label="Tax Service Banner"
-      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/NavBar/MenuDropdown.tsx

@@ -11,12 +11,12 @@ import { Column, Row } from 'nft/components/Flex'
 import { BarChartIcon, EllipsisIcon, GovernanceIcon, PoolIcon } from 'nft/components/icons'
 import { body, bodySmall } from 'nft/css/common.css'
 import { ReactNode, useReducer, useRef } from 'react'
-import { DollarSign, HelpCircle, Shield, Terminal } from 'react-feather'
+import { HelpCircle, Shield, Terminal } from 'react-feather'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
 import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
-import { useToggleModal, useToggleTaxServiceModal } from '../../state/application/hooks'
+import { useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
@@ -140,7 +140,6 @@ export const MenuDropdown = () => {
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
-  const toggleTaxServiceModal = useToggleTaxServiceModal()
   const theme = useTheme()
 
   const mgtmEnabled = useMgtmEnabled()
@@ -222,19 +221,6 @@ export const MenuDropdown = () => {
                     <Trans>Legal & Privacy</Trans>
                   </PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
-                <PrimaryMenuRow
-                  onClick={() => {
-                    toggleTaxServiceModal()
-                    toggleOpen()
-                  }}
-                >
-                  <Icon>
-                    <DollarSign size="24px" color={theme.textSecondary} />
-                  </Icon>
-                  <PrimaryMenuRow.Text>
-                    <Trans>Tax resources</Trans>
-                  </PrimaryMenuRow.Text>
-                </PrimaryMenuRow>
                 {mgtmEnabled && (
                   <Box display={micrositeEnabled ? { xxl: 'flex', xxxl: 'none' } : 'flex'}>
                     <PrimaryMenuRow

src/components/TaxServiceModal/TaxServiceBanner.tsx

-import { Trans } from '@lingui/macro'
-import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
-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 styled from 'styled-components/macro'
-import { useIsDarkMode } from 'theme/components/ThemeToggle'
-import { opacify } from 'theme/utils'
-import { Z_INDEX } from 'theme/zIndex'
-
-import TaxServiceModal from '.'
-import CointrackerLogo from './CointrackerLogo.png'
-import TokenTaxLogo from './TokenTaxLogo.png'
-
-const PopupContainer = styled.div<{ show: boolean; isDarkMode: boolean }>`
-  box-shadow: ${({ theme }) => theme.deepShadow};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  border-radius: 13px;
-  cursor: pointer;
-  color: ${({ theme }) => theme.textPrimary};
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  flex-direction: column;
-  position: fixed;
-  right: clamp(0px, 1vw, 16px);
-  z-index: ${Z_INDEX.sticky};
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `${duration.slow} opacity ${timing.in}`};
-  width: 320px;
-  height: 156px;
-  bottom: 50px;
-  @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
-    border-style: solid none;
-    width: 100%;
-    border-radius: 0;
-    right: auto;
-  }
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-
-    background-image: url(${CointrackerLogo}), url(${TokenTaxLogo});
-    background-size: 15%, 20%;
-    background-repeat: no-repeat;
-    background-position: top right 75px, bottom 5px right 7px;
-    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
-      background-size: 48px, 64px;
-      background-position: top right 75px, bottom 20px right 7px;
-    }
-
-    opacity: ${({ isDarkMode }) => (isDarkMode ? '0.9' : '0.25')};
-  }
-`
-
-const InnerContainer = styled.div<{ isDarkMode: boolean }>`
-  border-radius: 12px;
-  cursor: auto;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  gap: 8px;
-  padding: 16px;
-  background-color: ${({ isDarkMode, theme }) =>
-    isDarkMode ? opacify(10, theme.accentAction) : opacify(4, theme.accentAction)};
-  @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
-    height: 100%;
-    width: 100%;
-    border-radius: 0;
-  }
-`
-
-const Button = styled(ThemeButton)`
-  margin-top: auto;
-  margin-right: auto;
-  padding: 8px 24px;
-  gap: 8px;
-  border-radius: 12px;
-`
-
-const TextContainer = styled.div`
-  user-select: none;
-  display: flex;
-  flex-direction: column;
-  width: 90%;
-  justify-content: center;
-`
-
-export const StyledXButton = styled(X)`
-  color: ${({ theme }) => theme.textPrimary};
-  cursor: pointer;
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-`
-
-const TAX_SERVICE_DISMISSED = 'TaxServiceToast-dismissed'
-
-// TODO(lynnshaoyu): remove this count and change taxServiceDismissals in UserState to be a boolean
-// flag instead after upgrading to redux-persist.
-const MAX_RENDER_COUNT = 1
-
-export default function TaxServiceBanner() {
-  const isDarkMode = useIsDarkMode()
-  const [dismissals, addTaxServiceDismissal] = useTaxServiceDismissal()
-  const modalOpen = useModalIsOpen(ApplicationModal.TAX_SERVICE)
-  const toggleTaxServiceModal = useToggleTaxServiceModal()
-
-  const sessionStorageTaxServiceDismissed = sessionStorage.getItem(TAX_SERVICE_DISMISSED)
-
-  if (!sessionStorageTaxServiceDismissed) {
-    sessionStorage.setItem(TAX_SERVICE_DISMISSED, 'false')
-  }
-  const [bannerOpen, setBannerOpen] = useState(
-    sessionStorageTaxServiceDismissed !== 'true' && (dismissals === undefined || dismissals < MAX_RENDER_COUNT)
-  )
-
-  const handleClose = useCallback(() => {
-    sessionStorage.setItem(TAX_SERVICE_DISMISSED, 'true')
-    setBannerOpen(false)
-    dismissals === undefined ? addTaxServiceDismissal(1) : addTaxServiceDismissal(dismissals + 1)
-  }, [addTaxServiceDismissal, dismissals])
-
-  const handleLearnMoreClick = useCallback(
-    (e: any) => {
-      e.preventDefault()
-      e.stopPropagation()
-      toggleTaxServiceModal()
-    },
-    [toggleTaxServiceModal]
-  )
-
-  return (
-    <PopupContainer show={bannerOpen} isDarkMode={isDarkMode}>
-      <InnerContainer isDarkMode={isDarkMode} tabIndex={0}>
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <TextContainer data-testid="tax-service-description">
-            <div className={subhead} style={{ paddingBottom: '12px' }}>
-              <Trans>Save on your crypto taxes</Trans>
-            </div>
-            <div className={bodySmall} style={{ paddingBottom: '12px' }}>
-              <Trans>Uniswap Labs can save you up to 20% on CoinTracker and TokenTax</Trans>{' '}
-            </div>
-          </TextContainer>
-          <StyledXButton size={20} onClick={handleClose} />
-        </div>
-
-        <TraceEvent
-          events={[BrowserEvent.onClick]}
-          name={SharedEventName.ELEMENT_CLICKED}
-          element={InterfaceElementName.TAX_SERVICE_BANNER_CTA_BUTTON}
-        >
-          <Button
-            size={ButtonSize.small}
-            emphasis={ButtonEmphasis.promotional}
-            onMouseDown={(e) => {
-              e.preventDefault()
-            }}
-            onClick={handleLearnMoreClick}
-            data-testid="learn-more-button"
-          >
-            <Trans>Learn more</Trans>
-          </Button>
-        </TraceEvent>
-      </InnerContainer>
-      <TaxServiceModal isOpen={modalOpen} onDismiss={toggleTaxServiceModal} />
-    </PopupContainer>
-  )
-}

src/components/TaxServiceModal/index.test.tsx

-import { render, screen } from '../../test-utils'
-import TaxServiceModal from './'
-import TaxServiceBanner from './TaxServiceBanner'
-
-it('renders Tax Service Modal content', async () => {
-  render(<TaxServiceModal isOpen={true} onDismiss={() => null} />)
-  expect(screen.getByText('Save 10% on all plans')).toBeInTheDocument()
-  expect(screen.getByText('New and existing users save up to 20%')).toBeInTheDocument()
-  expect(screen.getAllByTestId('tax-service-option-button')).toHaveLength(2)
-})
-
-it('renders Tax Service Banner', async () => {
-  render(<TaxServiceBanner />)
-  expect(screen.getByText('Save on your crypto taxes')).toBeInTheDocument()
-  expect(screen.getAllByTestId('learn-more-button')).toHaveLength(1)
-  expect(screen.getByText('Uniswap Labs can save you up to 20% on CoinTracker and TokenTax')).toBeInTheDocument()
-})

src/components/TaxServiceModal/index.tsx

-import { Trans } from '@lingui/macro'
-import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
-import { ButtonEmphasis } from 'components/Button'
-import { ButtonSize, ThemeButton } from 'components/Button'
-import { Box } from 'nft/components/Box'
-import { bodySmall, subhead } from 'nft/css/common.css'
-import { memo } from 'react'
-import styled from 'styled-components/macro'
-
-import Modal from '../Modal'
-import CointrackerFullLogo from './CointrackerFullLogo.png'
-import { StyledXButton } from './TaxServiceBanner'
-import TokenTaxFullLogo from './TokenTaxFullLogo.png'
-
-interface TaxServiceModalProps {
-  isOpen: boolean
-  onDismiss: () => void
-}
-
-interface TaxServiceOptionProps {
-  logo: any
-  description: string
-  url: string
-}
-
-const InnerContainer = styled.div`
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  overflow: hidden;
-  display: flex;
-  width: 420px;
-  height: 268px;
-  flex-direction: column;
-  position: relative;
-  gap: 20px;
-  padding: 16px;
-`
-
-const TaxOptionContainer = styled.div`
-  display: flex;
-  flex: 1;
-  gap: 16px;
-  justify-content: center;
-`
-
-const TaxOptionDescription = styled.div`
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  user-select: none;
-  text-align: center;
-`
-
-const TaxOption = styled.div`
-  align-items: center;
-  background-color: ${({ theme }) => theme.backgroundModule};
-  border-radius: 12px;
-  cursor: auto;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  justify-content: space-between;
-  padding: 12px;
-  gap: 16px;
-`
-
-const StyledImageContainer = styled(Box)`
-  width: 75%;
-  height: 80%;
-  cursor: auto;
-  object-fit: contain;
-`
-
-const Button = styled(ThemeButton)`
-  cursor: pointer;
-  width: 100%;
-  margin-right: auto;
-`
-
-const TOKEN_TAX_URL = 'https://tokentax.co/uniswap?via=uniswap'
-const COINTRACKER_URL = 'https://www.cointracker.io/partner/uniswap?utm_source=uniswap'
-
-const TOKEN_TAX_DESCRIPTION = 'Save 10% on all plans'
-const COINTRACKER_DESCRIPTION = 'New and existing users save up to 20%'
-
-function TaxServiceOption({ description, logo, url }: TaxServiceOptionProps) {
-  return (
-    <TaxOption tabIndex={0}>
-      <StyledImageContainer as="img" src={logo} draggable={false} />
-      <TaxOptionDescription className={bodySmall}>{description}</TaxOptionDescription>
-      <TraceEvent
-        events={[BrowserEvent.onClick]}
-        name={SharedEventName.ELEMENT_CLICKED}
-        element={
-          url.includes('tokentax')
-            ? InterfaceElementName.TAX_SERVICE_TOKENTAX_BUTTON
-            : InterfaceElementName.TAX_SERVICE_COINTRACKER_BUTTON
-        }
-      >
-        <a href={url} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
-          <Button
-            onMouseDown={(e) => {
-              e.preventDefault()
-            }}
-            size={ButtonSize.medium}
-            emphasis={ButtonEmphasis.medium}
-            data-testid="tax-service-option-button"
-          >
-            Get started
-          </Button>
-        </a>
-      </TraceEvent>
-    </TaxOption>
-  )
-}
-
-export default memo(function TaxServiceModal({ isOpen, onDismiss }: TaxServiceModalProps) {
-  return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90} minHeight={false}>
-      <InnerContainer>
-        <div style={{ display: 'flex', justifyContent: 'space-between', userSelect: 'none' }}>
-          <div className={subhead}>
-            <Trans>Save on your crypto taxes</Trans>
-          </div>
-          <StyledXButton
-            size={20}
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              onDismiss()
-            }}
-          />
-        </div>
-        <TaxOptionContainer>
-          <TaxServiceOption description={COINTRACKER_DESCRIPTION} logo={CointrackerFullLogo} url={COINTRACKER_URL} />
-          <TaxServiceOption description={TOKEN_TAX_DESCRIPTION} logo={TokenTaxFullLogo} url={TOKEN_TAX_URL} />
-        </TaxOptionContainer>
-      </InnerContainer>
-    </Modal>
-  )
-})

src/components/TopLevelModals/index.tsx

@@ -3,14 +3,9 @@ import UniswapWalletBanner from 'components/Banner/UniswapWalletBanner'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import FiatOnrampModal from 'components/FiatOnrampModal'
-import TaxServiceBanner from 'components/TaxServiceModal/TaxServiceBanner'
 import UniwalletModal from 'components/WalletDropdown/UniwalletModal'
-import { useTaxServiceBannerEnabled } from 'featureFlags/flags/taxServiceBanner'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
-import { useIsNftPage } from 'hooks/useIsNftPage'
-import { useIsPoolsPage } from 'hooks/useIsPoolsPage'
 import { lazy } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 
@@ -25,13 +20,6 @@ export default function TopLevelModals() {
   const { account } = useWeb3React()
   useAccountRiskCheck(account)
   const accountBlocked = Boolean(blockedAccountModalOpen && account)
-  const taxServiceEnabled = useTaxServiceBannerEnabled()
-
-  const { pathname } = useLocation()
-  const isNftPage = useIsNftPage()
-  const isPoolPage = useIsPoolsPage()
-
-  const isTaxModalServicePage = isNftPage || isPoolPage || pathname.startsWith('/swap')
 
   return (
     <>
@@ -43,7 +31,6 @@ export default function TopLevelModals() {
       <TransactionCompleteModal />
       <AirdropModal />
       <FiatOnrampModal />
-      {taxServiceEnabled && isTaxModalServicePage && <TaxServiceBanner />}
     </>
   )
 }

src/featureFlags/flags/featureFlags.ts

@@ -8,7 +8,6 @@ export enum FeatureFlag {
   swapWidget = 'swap_widget_replacement_enabled',
   statsigDummy = 'web_dummy_gate_amplitude_id',
   nftGraphql = 'nft_graphql_migration',
-  taxService = 'tax_service_banner',
   mgtm = 'web_mobile_go_to_market_enabled',
   walletMicrosite = 'walletMicrosite',
   miniPortfolio = 'miniPortfolio',

src/featureFlags/flags/taxServiceBanner.ts

-import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
-
-export function useTaxServiceBannerFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.taxService, BaseVariant.Control)
-}
-
-export function useTaxServiceBannerEnabled(): boolean {
-  return useTaxServiceBannerFlag() === BaseVariant.Enabled
-}
-
-export { BaseVariant as TaxServiceVariant }

src/state/application/hooks.ts

@@ -118,10 +118,6 @@ 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/logging.ts

@@ -33,7 +33,6 @@ export const sentryEnhancer = Sentry.createReduxEnhancer({
         popupList: application.popupList,
       },
       user: {
-        taxServiceDismissals: user.taxServiceDismissals,
         selectedWallet: user.selectedWallet,
         lastUpdateVersionTimestamp: user.lastUpdateVersionTimestamp,
         userLocale: user.userLocale,

src/state/user/hooks.tsx

@@ -18,7 +18,6 @@ import {
   addSerializedToken,
   updateHideClosedPositions,
   updateHideUniswapWalletBanner,
-  updateTaxServiceAcknowledgments,
   updateUserClientSideRouter,
   updateUserDeadline,
   updateUserExpertMode,
@@ -69,18 +68,6 @@ export function useIsExpertMode(): boolean {
   return useAppSelector((state) => state.user.userExpertMode)
 }
 
-export function useTaxServiceDismissal(): [number | undefined, (dismissals: number) => void] {
-  const dispatch = useAppDispatch()
-  const taxServiceDismissals = useAppSelector((state) => state.user.taxServiceDismissals)
-  const setDismissals = useCallback(
-    (dismissals: number) => {
-      dispatch(updateTaxServiceAcknowledgments({ taxServiceDismissals: dismissals }))
-    },
-    [dispatch]
-  )
-  return [taxServiceDismissals, setDismissals]
-}
-
 export function useExpertModeManager(): [boolean, () => void] {
   const dispatch = useAppDispatch()
   const expertMode = useIsExpertMode()

src/state/user/reducer.ts

@@ -9,8 +9,6 @@ import { SerializedPair, SerializedToken } from './types'
 const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
-  taxServiceDismissals: number | undefined
-
   selectedWallet?: ConnectionType
 
   // the timestamp of the last updateVersion action
@@ -57,7 +55,6 @@ function pairKey(token0Address: string, token1Address: string) {
 }
 
 export const initialState: UserState = {
-  taxServiceDismissals: 0,
   selectedWallet: undefined,
   userExpertMode: false,
   userLocale: null,
@@ -78,9 +75,6 @@ const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
-    updateTaxServiceAcknowledgments(state, action) {
-      state.taxServiceDismissals = action.payload.taxServiceDismissals
-    },
     updateSelectedWallet(state, { payload: { wallet } }) {
       state.selectedWallet = wallet
     },
@@ -169,7 +163,6 @@ const userSlice = createSlice({
 export const {
   addSerializedPair,
   addSerializedToken,
-  updateTaxServiceAcknowledgments,
   updateSelectedWallet,
   updateHideClosedPositions,
   updateUserClientSideRouter,