chore: remove favoriteTokens flag (#4955)

* chore: remove favoriteTokens flag

* remove more favorites stuff

* unused imports

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
-import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
@@ -203,14 +202,6 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-      <FeatureFlagGroup name="Phase 0 Follow-ups">
-        <FeatureFlagOption
-          variant={FavoriteTokensVariant}
-          value={useFavoriteTokensFlag()}
-          featureFlag={FeatureFlag.favoriteTokens}
-          label="Favorite Tokens"
-        />
-      </FeatureFlagGroup>
       <FeatureFlagGroup name="Phase 1">
         <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
       </FeatureFlagGroup>

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -5,7 +5,6 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
 import { checkWarning } from 'constants/tokenSafety'
-import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { PriceDurations, PricePoint, SingleTokenData } from 'graphql/data/Token'
 import { TopToken } from 'graphql/data/TopTokens'
 import { CHAIN_NAME_TO_CHAIN_ID, TimePeriod } from 'graphql/data/util'
@@ -15,8 +14,8 @@ import { useMemo } from 'react'
 import styled from 'styled-components/macro'
 import { textFadeIn } from 'theme/animations'
 
-import { filterTimeAtom, useIsFavorited, useToggleFavorite } from '../state'
-import { ClickFavorited, FavoriteIcon, L2NetworkLogo, LogoContainer } from '../TokenTable/TokenRow'
+import { filterTimeAtom } from '../state'
+import { L2NetworkLogo, LogoContainer } from '../TokenTable/TokenRow'
 import PriceChart from './PriceChart'
 import ShareButton from './ShareButton'
 
@@ -79,8 +78,6 @@ export default function ChartSection({
   nativeCurrency?: Token | NativeCurrency
   prices: PriceDurations
 }) {
-  const isFavorited = useIsFavorited(token.address)
-  const toggleFavorite = useToggleFavorite(token.address)
   const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
   const L2Icon = getChainInfo(chainId)?.circleLogoUrl
   const warning = checkWarning(token.address ?? '')
@@ -127,11 +124,6 @@ export default function ChartSection({
         </TokenNameCell>
         <TokenActions>
           {token.name && token.symbol && token.address && <ShareButton token={token} isNative={!!nativeCurrency} />}
-          {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && (
-            <ClickFavorited onClick={toggleFavorite}>
-              <FavoriteIcon isFavorited={isFavorited} />
-            </ClickFavorited>
-          )}
         </TokenActions>
       </TokenInfoContainer>
       <ChartContainer>

src/components/Tokens/TokenTable/FavoriteButton.tsx

-import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
-import { Heart } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { SMALLEST_MOBILE_MEDIA_BREAKPOINT } from '../constants'
-import { showFavoritesAtom } from '../state'
-import FilterOption from './FilterOption'
-
-const FavoriteButtonContent = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-`
-const FavoriteText = styled.span`
-  @media only screen and (max-width: ${SMALLEST_MOBILE_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
-
-export default function FavoriteButton() {
-  const theme = useTheme()
-  const [showFavorites, setShowFavorites] = useAtom(showFavoritesAtom)
-  return (
-    <FilterOption onClick={() => setShowFavorites(!showFavorites)} active={showFavorites} highlight>
-      <FavoriteButtonContent>
-        <Heart size={20} color={showFavorites ? theme.accentActive : theme.textPrimary} />
-        <FavoriteText>
-          <Trans>Favorites</Trans>
-        </FavoriteText>
-      </FavoriteButtonContent>
-    </FilterOption>
-  )
-}

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -5,13 +5,12 @@ import { EventName } from 'analytics/constants'
 import SparklineChart from 'components/Charts/SparklineChart'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
-import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
 import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
-import { ArrowDown, ArrowUp, Heart } from 'react-feather'
+import { ArrowDown, ArrowUp } from 'react-feather'
 import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components/macro'
 import { ClickableStyle } from 'theme'
@@ -30,9 +29,7 @@ import {
   sortAscendingAtom,
   sortMethodAtom,
   TokenSortMethod,
-  useIsFavorited,
   useSetSortMethod,
-  useToggleFavorite,
 } from '../state'
 import { useTokenLogoURI } from '../TokenDetails/ChartSection'
 import InfoTip from '../TokenDetails/InfoTip'
@@ -47,13 +44,11 @@ const StyledTokenRow = styled.div<{
   first?: boolean
   last?: boolean
   loading?: boolean
-  favoriteTokensEnabled?: boolean
 }>`
   background-color: transparent;
   display: grid;
   font-size: 16px;
-  grid-template-columns: ${({ favoriteTokensEnabled }) =>
-    favoriteTokensEnabled ? '1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr' : '1fr 7fr 4fr 4fr 4fr 4fr 5fr'};
+  grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr;
   line-height: 24px;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
   min-width: 390px;
@@ -110,23 +105,6 @@ const StyledTokenRow = styled.div<{
     }
   }
 `
-export const ClickFavorited = styled.span`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 60%;
-  }
-`
-
-export const FavoriteIcon = styled(Heart)<{ isFavorited: boolean }>`
-  ${ClickableStyle}
-  height: 22px;
-  width: 24px;
-  color: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : theme.textSecondary)};
-  fill: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : 'transparent')};
-`
 
 const ClickableContent = styled.div`
   display: flex;
@@ -139,15 +117,6 @@ const ClickableName = styled(ClickableContent)`
   gap: 8px;
   max-width: 100%;
 `
-const FavoriteCell = styled(Cell)`
-  min-width: 40px;
-  color: ${({ theme }) => theme.textSecondary};
-  fill: none;
-
-  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
 const StyledHeaderRow = styled(StyledTokenRow)`
   border-bottom: 1px solid;
   border-color: ${({ theme }) => theme.backgroundOutline};
@@ -376,7 +345,6 @@ function HeaderCell({
 
 /* Token Row: skeleton row component */
 export function TokenRow({
-  favorited,
   header,
   listNumber,
   tokenInfo,
@@ -387,7 +355,6 @@ export function TokenRow({
   sparkLine,
   ...rest
 }: {
-  favorited: ReactNode
   first?: boolean
   header: boolean
   listNumber: ReactNode
@@ -401,7 +368,6 @@ export function TokenRow({
   last?: boolean
   style?: CSSProperties
 }) {
-  const favoriteTokensEnabled = useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled
   const rowCells = (
     <>
       <ListNumberCell header={header}>{listNumber}</ListNumberCell>
@@ -411,15 +377,10 @@ export function TokenRow({
       <TvlCell sortable={header}>{tvl}</TvlCell>
       <VolumeCell sortable={header}>{volume}</VolumeCell>
       <SparkLineCell>{sparkLine}</SparkLineCell>
-      {favoriteTokensEnabled && <FavoriteCell>{favorited}</FavoriteCell>}
     </>
   )
-  if (header) return <StyledHeaderRow favoriteTokensEnabled={favoriteTokensEnabled}>{rowCells}</StyledHeaderRow>
-  return (
-    <StyledTokenRow favoriteTokensEnabled={favoriteTokensEnabled} {...rest}>
-      {rowCells}
-    </StyledTokenRow>
-  )
+  if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
+  return <StyledTokenRow {...rest}>{rowCells}</StyledTokenRow>
 }
 
 /* Header Row: top header row component for table */
@@ -427,7 +388,6 @@ export function HeaderRow() {
   return (
     <TokenRow
       header={true}
-      favorited={null}
       listNumber="#"
       tokenInfo={<Trans>Token name</Trans>}
       price={<HeaderCell category={TokenSortMethod.PRICE} sortable />}
@@ -443,7 +403,6 @@ export function HeaderRow() {
 export function LoadingRow() {
   return (
     <TokenRow
-      favorited={null}
       header={false}
       listNumber={<SmallLoadingBubble />}
       loading
@@ -475,8 +434,6 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const tokenAddress = token.address
   const tokenName = token.name
   const tokenSymbol = token.symbol
-  const isFavorited = useIsFavorited(tokenAddress)
-  const toggleFavorite = useToggleFavorite(tokenAddress)
   const filterString = useAtomValue(filterStringAtom)
   const sortAscending = useAtomValue(sortAscendingAtom)
 
@@ -509,16 +466,6 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
       >
         <TokenRow
           header={false}
-          favorited={
-            <ClickFavorited
-              onClick={(e) => {
-                e.preventDefault()
-                toggleFavorite()
-              }}
-            >
-              <FavoriteIcon isFavorited={isFavorited} />
-            </ClickFavorited>
-          }
           listNumber={rank}
           tokenInfo={
             <ClickableName>

src/components/Tokens/TokenTable/TokenTable.tsx

 import { Trans } from '@lingui/macro'
-import { showFavoritesAtom } from 'components/Tokens/state'
 import { PAGE_SIZE, useTopTokens } from 'graphql/data/TopTokens'
 import { validateUrlChainParam } from 'graphql/data/util'
-import { useAtomValue } from 'jotai/utils'
 import { ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useParams } from 'react-router-dom'
@@ -80,8 +78,6 @@ export function LoadingTokenTable({ rowCount }: { rowCount?: number }) {
 }
 
 export default function TokenTable({ setRowCount }: { setRowCount: (c: number) => void }) {
-  const showFavorites = useAtomValue<boolean>(showFavoritesAtom)
-
   // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
   const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
   const { tokens, sparklines } = useTopTokens(chainName)
@@ -100,11 +96,7 @@ export default function TokenTable({ setRowCount }: { setRowCount: (c: number) =
       />
     )
   } else if (tokens?.length === 0) {
-    return showFavorites ? (
-      <NoTokensState message={<Trans>You have no favorited tokens</Trans>} />
-    ) : (
-      <NoTokensState message={<Trans>No tokens found</Trans>} />
-    )
+    return <NoTokensState message={<Trans>No tokens found</Trans>} />
   } else {
     return (
       <GridContainer>

src/components/Tokens/state.ts

 import { TimePeriod } from 'graphql/data/util'
 import { atom, useAtom } from 'jotai'
-import { atomWithReset, atomWithStorage, useAtomValue } from 'jotai/utils'
-import { useCallback, useMemo } from 'react'
+import { atomWithReset } from 'jotai/utils'
+import { useCallback } from 'react'
 
 export enum TokenSortMethod {
   PRICE = 'Price',
@@ -10,31 +10,11 @@ export enum TokenSortMethod {
   VOLUME = 'Volume',
 }
 
-export const favoritesAtom = atomWithStorage<string[]>('favorites', [])
-export const showFavoritesAtom = atomWithStorage<boolean>('showFavorites', false)
 export const filterStringAtom = atomWithReset<string>('')
 export const filterTimeAtom = atom<TimePeriod>(TimePeriod.DAY)
 export const sortMethodAtom = atom<TokenSortMethod>(TokenSortMethod.VOLUME)
 export const sortAscendingAtom = atom<boolean>(false)
 
-/* for favoriting tokens */
-export function useToggleFavorite(tokenAddress: string | undefined | null) {
-  const [favoriteTokens, updateFavoriteTokens] = useAtom(favoritesAtom)
-
-  return useCallback(() => {
-    if (!tokenAddress) return
-    let updatedFavoriteTokens
-    if (favoriteTokens.includes(tokenAddress.toLocaleLowerCase())) {
-      updatedFavoriteTokens = favoriteTokens.filter((address: string) => {
-        return address !== tokenAddress.toLocaleLowerCase()
-      })
-    } else {
-      updatedFavoriteTokens = [...favoriteTokens, tokenAddress.toLocaleLowerCase()]
-    }
-    updateFavoriteTokens(updatedFavoriteTokens)
-  }, [favoriteTokens, tokenAddress, updateFavoriteTokens])
-}
-
 /* keep track of sort category for token table */
 export function useSetSortMethod(newSortMethod: TokenSortMethod) {
   const [sortMethod, setSortMethod] = useAtom(sortMethodAtom)
@@ -49,12 +29,3 @@ export function useSetSortMethod(newSortMethod: TokenSortMethod) {
     }
   }, [sortMethod, setSortMethod, setSortAscending, sortAscending, newSortMethod])
 }
-
-export function useIsFavorited(tokenAddress: string | null | undefined) {
-  const favoritedTokens = useAtomValue<string[]>(favoritesAtom)
-
-  return useMemo(
-    () => (tokenAddress ? favoritedTokens.includes(tokenAddress.toLocaleLowerCase()) : false),
-    [favoritedTokens, tokenAddress]
-  )
-}

src/graphql/data/TopTokens.ts

 import graphql from 'babel-plugin-relay/macro'
 import {
-  favoritesAtom,
   filterStringAtom,
   filterTimeAtom,
-  showFavoritesAtom,
   sortAscendingAtom,
   sortMethodAtom,
   TokenSortMethod,
@@ -97,16 +95,11 @@ function useSortedTokens(tokens: NonNullable<TopTokens100Query['response']['topT
 
 function useFilteredTokens(tokens: NonNullable<TopTokens100Query['response']['topTokens']>) {
   const filterString = useAtomValue(filterStringAtom)
-  const favorites = useAtomValue(favoritesAtom)
-  const showFavorites = useAtomValue(showFavoritesAtom)
 
   const lowercaseFilterString = useMemo(() => filterString.toLowerCase(), [filterString])
 
   return useMemo(() => {
     let returnTokens = tokens
-    if (showFavorites) {
-      returnTokens = returnTokens?.filter((token) => token?.address && favorites.includes(token.address))
-    }
     if (lowercaseFilterString) {
       returnTokens = returnTokens?.filter((token) => {
         const addressIncludesFilterString = token?.address?.toLowerCase().includes(lowercaseFilterString)
@@ -116,7 +109,7 @@ function useFilteredTokens(tokens: NonNullable<TopTokens100Query['response']['to
       })
     }
     return returnTokens
-  }, [tokens, showFavorites, lowercaseFilterString, favorites])
+  }, [tokens, lowercaseFilterString])
 }
 
 // Number of items to render in each fetch in infinite scroll.

src/pages/Tokens/index.tsx

@@ -4,12 +4,10 @@ import { PageName } from 'analytics/constants'
 import { Trace } from 'analytics/Trace'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { filterStringAtom } from 'components/Tokens/state'
-import FavoriteButton from 'components/Tokens/TokenTable/FavoriteButton'
 import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
 import SearchBar from 'components/Tokens/TokenTable/SearchBar'
 import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
 import TokenTable, { LoadingTokenTable } from 'components/Tokens/TokenTable/TokenTable'
-import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { PAGE_SIZE } from 'graphql/data/TopTokens'
 import { chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
@@ -106,7 +104,6 @@ const Tokens = () => {
         <FiltersWrapper>
           <FiltersContainer>
             <NetworkFilter />
-            {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && <FavoriteButton />}
             <TimeSelector />
           </FiltersContainer>
           <SearchContainer>