chore: feature flags token favorites (#4680)

* fix: fixes TokenTable header ordering

* flag favorite tokens

* imports

* remove fav col

* hide on token details

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
@@ -232,6 +233,14 @@ export default function FeatureFlagModal() {
           label="Token Safety"
         />
       </FeatureFlagGroup>
+      <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

@@ -7,6 +7,7 @@ import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
 import { nativeOnChain, WRAPPED_NATIVE_CURRENCY } from 'constants/tokens'
 import { checkWarning } from 'constants/tokenSafety'
+import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { SingleTokenData } from 'graphql/data/Token'
 import { useCurrency } from 'hooks/Tokens'
 import styled from 'styled-components/macro'
@@ -100,9 +101,11 @@ export default function ChartSection({ token, tokenData }: { token: Token; token
           {tokenName && tokenSymbol && (
             <ShareButton tokenName={tokenName} tokenSymbol={tokenSymbol} tokenAddress={token.address} />
           )}
-          <ClickFavorited onClick={toggleFavorite}>
-            <FavoriteIcon isFavorited={isFavorited} />
-          </ClickFavorited>
+          {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && (
+            <ClickFavorited onClick={toggleFavorite}>
+              <FavoriteIcon isFavorited={isFavorited} />
+            </ClickFavorited>
+          )}
         </TokenActions>
       </TokenInfoContainer>
       <ChartContainer>

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -5,6 +5,7 @@ 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 { getDurationDetails, SingleTokenData, TimePeriod } from 'graphql/data/Token'
 import { useCurrency } from 'hooks/Tokens'
 import { useAtomValue } from 'jotai/utils'
@@ -41,11 +42,17 @@ const Cell = styled.div`
   align-items: center;
   justify-content: center;
 `
-const StyledTokenRow = styled.div<{ first?: boolean; last?: boolean; loading?: boolean }>`
+const StyledTokenRow = styled.div<{
+  first?: boolean
+  last?: boolean
+  loading?: boolean
+  favoriteTokensEnabled?: boolean
+}>`
   background-color: transparent;
   display: grid;
   font-size: 15px;
-  grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr;
+  grid-template-columns: ${({ favoriteTokensEnabled }) =>
+    favoriteTokensEnabled ? '1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr' : '1fr 7fr 4fr 4fr 4fr 4fr 5fr'};
   height: 60px;
   line-height: 24px;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
@@ -394,6 +401,7 @@ export function TokenRow({
   volume: ReactNode
   last?: boolean
 }) {
+  const favoriteTokensEnabled = useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled
   const rowCells = (
     <>
       <ListNumberCell header={header}>{listNumber}</ListNumberCell>
@@ -403,11 +411,15 @@ export function TokenRow({
       <MarketCapCell sortable={header}>{marketCap}</MarketCapCell>
       <VolumeCell sortable={header}>{volume}</VolumeCell>
       <SparkLineCell>{sparkLine}</SparkLineCell>
-      <FavoriteCell>{favorited}</FavoriteCell>
+      {favoriteTokensEnabled && <FavoriteCell>{favorited}</FavoriteCell>}
     </>
   )
-  if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
-  return <StyledTokenRow {...rest}>{rowCells}</StyledTokenRow>
+  if (header) return <StyledHeaderRow favoriteTokensEnabled={favoriteTokensEnabled}>{rowCells}</StyledHeaderRow>
+  return (
+    <StyledTokenRow favoriteTokensEnabled={favoriteTokensEnabled} {...rest}>
+      {rowCells}
+    </StyledTokenRow>
+  )
 }
 
 /* Header Row: top header row component for table */

src/featureFlags/flags/favoriteTokens.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useFavoriteTokensFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.favoriteTokens)
+}
+
+export { BaseVariant as FavoriteTokensVariant }

src/featureFlags/flags/featureFlags.ts

 export enum FeatureFlag {
+  favoriteTokens = 'favoriteTokens',
   navBar = 'navBar',
   nft = 'nfts',
   redesign = 'redesign',

src/pages/Tokens/index.tsx

@@ -8,6 +8,7 @@ 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 { useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -83,8 +84,8 @@ const Tokens = () => {
         </TitleContainer>
         <FiltersWrapper>
           <FiltersContainer>
-            <FavoriteButton />
             <NetworkFilter />
+            {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && <FavoriteButton />}
             <TimeSelector />
           </FiltersContainer>
           <SearchContainer>
@@ -109,8 +110,8 @@ export const LoadingTokens = () => {
       </TitleContainer>
       <FiltersWrapper>
         <FiltersContainer>
-          <FavoriteButton />
           <NetworkFilter />
+          {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && <FavoriteButton />}
           <TimeSelector />
         </FiltersContainer>
         <SearchContainer>