refactor: remove token promo banner (#5114)

* Remove token promo banner

* Remove unused variable and import

Co-authored-by: Yannie Yip <yannie@UNISWAP-MAC-072.local>

src/components/Tokens/TokensBanner.tsx

@@ -1,100 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { ElementName, Event, EventName } from 'analytics/constants'
-import { TraceEvent } from 'analytics/TraceEvent'
-import { chainIdToBackendName } from 'graphql/data/util'
-import { X } from 'react-feather'
-import { Link } from 'react-router-dom'
-import { useShowTokensPromoBanner } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-import { opacify } from 'theme/utils'
-import { Z_INDEX } from 'theme/zIndex'
-
-import tokensPromoDark from '../../assets/images/tokensPromoDark.png'
-import tokensPromoLight from '../../assets/images/tokensPromoLight.png'
-
-const BackgroundColor = styled(Link)<{ show: boolean }>`
-  background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : '#FDF0F8')};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  border-radius: 12px;
-  bottom: 48px;
-  box-shadow: ${({ theme }) => theme.deepShadow};
-  display: ${({ show }) => (show ? 'block' : 'none')};
-  height: 88px;
-  position: fixed;
-  right: clamp(0px, 1vw, 16px);
-  text-decoration: none;
-  width: 320px;
-  z-index: ${Z_INDEX.sticky};
-`
-const PopupContainer = styled.div`
-  background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : opacify(60, '#FDF0F8'))};
-  background-image: url(${({ theme }) => (theme.darkMode ? `${tokensPromoDark}` : `${tokensPromoLight}`)});
-  background-size: cover;
-  background-blend-mode: overlay;
-  border-radius: 12px;
-  color: ${({ theme }) => theme.textPrimary};
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  height: 100%;
-  padding: 12px 16px 12px 20px;
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `${duration.slow} opacity ${timing.in}`};
-`
-const Header = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-`
-const HeaderText = styled.span`
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-`
-
-const Description = styled.span`
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  width: max(212px, calc(100% - 36px));
-`
-
-export default function TokensBanner() {
-  const theme = useTheme()
-  const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner()
-  const { chainId: connectedChainId } = useWeb3React()
-  const chainName = chainIdToBackendName(connectedChainId).toLowerCase()
-
-  return (
-    <BackgroundColor show={showTokensPromoBanner} to={`/tokens/${chainName}`}>
-      <TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
-        <PopupContainer>
-          <Header>
-            <HeaderText>
-              <Trans>Explore Top Tokens on Uniswap</Trans>
-            </HeaderText>
-            <X
-              size={20}
-              color={theme.textSecondary}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                setShowTokensPromoBanner(false)
-              }}
-              style={{ cursor: 'pointer' }}
-            />
-          </Header>
-
-          <Description>
-            <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
-          </Description>
-        </PopupContainer>
-      </TraceEvent>
-    </BackgroundColor>
-  )
-}

src/components/TopLevelModals/index.tsx

@@ -1,11 +1,9 @@
 import { useWeb3React } from '@web3-react/core'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
-import TokensBanner from 'components/Tokens/TokensBanner'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
 import { lazy } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 
@@ -18,7 +16,6 @@ export default function TopLevelModals() {
 
   const blockedAccountModalOpen = useModalIsOpen(ApplicationModal.BLOCKED_ACCOUNT)
   const { account } = useWeb3React()
-  const location = useLocation()
 
   useAccountRiskCheck(account)
   const open = Boolean(blockedAccountModalOpen && account)
@@ -26,7 +23,6 @@ export default function TopLevelModals() {
     <>
       <AddressClaimModal isOpen={addressClaimOpen} onDismiss={addressClaimToggle} />
       <ConnectedAccountBlocked account={account} isOpen={open} />
-      {(location.pathname.includes('/pool') || location.pathname.includes('/swap')) && <TokensBanner />}
       <Bag />
       {useNftFlag() === NftVariant.Enabled && <TransactionCompleteModal />}
     </>

src/state/user/hooks.tsx

@@ -19,7 +19,6 @@ import {
   removeSerializedToken,
   updateHideClosedPositions,
   updateShowSurveyPopup,
-  updateShowTokensPromoBanner,
   updateUserClientSideRouter,
   updateUserDarkMode,
   updateUserDeadline,
@@ -117,18 +116,6 @@ export function useShowSurveyPopup(): [boolean | undefined, (showPopup: boolean)
   return [showSurveyPopup, toggleShowSurveyPopup]
 }
 
-export function useShowTokensPromoBanner(): [boolean, (showTokensBanner: boolean) => void] {
-  const dispatch = useAppDispatch()
-  const showTokensPromoBanner = useAppSelector((state) => state.user.showTokensPromoBanner)
-  const toggleShowTokensPromoBanner = useCallback(
-    (showTokensBanner: boolean) => {
-      dispatch(updateShowTokensPromoBanner({ showTokensPromoBanner: showTokensBanner }))
-    },
-    [dispatch]
-  )
-  return [showTokensPromoBanner, toggleShowTokensPromoBanner]
-}
-
 export function useClientSideRouter(): [boolean, (userClientSideRouter: boolean) => void] {
   const dispatch = useAppDispatch()
 

src/state/user/reducer.ts

@@ -53,8 +53,6 @@ export interface UserState {
   showSurveyPopup: boolean | undefined
 
   showDonationLink: boolean
-
-  showTokensPromoBanner: boolean // show tokens promo banner for token explore
 }
 
 function pairKey(token0Address: string, token1Address: string) {
@@ -78,7 +76,6 @@ export const initialState: UserState = {
   URLWarningVisible: true,
   showSurveyPopup: undefined,
   showDonationLink: true,
-  showTokensPromoBanner: true,
 }
 
 const userSlice = createSlice({
@@ -124,9 +121,6 @@ const userSlice = createSlice({
     updateShowDonationLink(state, action) {
       state.showDonationLink = action.payload.showDonationLink
     },
-    updateShowTokensPromoBanner(state, action) {
-      state.showTokensPromoBanner = action.payload.showTokensPromoBanner
-    },
     addSerializedToken(state, { payload: { serializedToken } }) {
       if (!state.tokens) {
         state.tokens = {}
@@ -216,6 +210,5 @@ export const {
   updateUserExpertMode,
   updateUserLocale,
   updateUserSlippageTolerance,
-  updateShowTokensPromoBanner,
 } = userSlice.actions
 export default userSlice.reducer