fix: fixing token colors and token select persistence (#4575)

* fixing token colors and token select persistence
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/components/Tokens/TokenDetails/TokenDetail.tsx

@@ -14,14 +14,14 @@ import { useAtomValue } from 'jotai/utils'
 import { darken } from 'polished'
 import { Suspense, useCallback } from 'react'
 import { useState } from 'react'
-import { ArrowLeft, Heart } from 'react-feather'
+import { ArrowLeft } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
-import { ClickableStyle, CopyContractAddress } from 'theme'
+import { CopyContractAddress } from 'theme'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
-import { favoritesAtom, filterNetworkAtom, useToggleFavorite } from '../state'
-import { ClickFavorited } from '../TokenTable/TokenRow'
+import { filterNetworkAtom, useIsFavorited, useToggleFavorite } from '../state'
+import { ClickFavorited, FavoriteIcon } from '../TokenTable/TokenRow'
 import LoadingTokenDetail from './LoadingTokenDetail'
 import Resource from './Resource'
 import ShareButton from './ShareButton'
@@ -81,13 +81,7 @@ const NetworkBadge = styled.div<{ networkColor?: string; backgroundColor?: strin
   color: ${({ theme, networkColor }) => networkColor ?? theme.textPrimary};
   background-color: ${({ theme, backgroundColor }) => backgroundColor ?? theme.backgroundSurface};
 `
-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 NoInfoAvailable = styled.span`
   color: ${({ theme }) => theme.textTertiary};
   font-weight: 400;
@@ -181,8 +175,7 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
   const { chainId: connectedChainId } = useWeb3React()
   const token = useToken(address)
   let currency = useCurrency(address)
-  const favoriteTokens = useAtomValue<string[]>(favoritesAtom)
-  const isFavorited = favoriteTokens.includes(address)
+  const isFavorited = useIsFavorited(address)
   const toggleFavorite = useToggleFavorite(address)
   const warning = checkWarning(address)
   const navigate = useNavigate()

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -7,12 +7,12 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import { TimePeriod, TokenData } from 'graphql/data/TopTokenQuery'
 import { useCurrency } from 'hooks/Tokens'
-import { useAtom } from 'jotai'
 import { useAtomValue } from 'jotai/utils'
 import { ReactNode } from 'react'
 import { ArrowDown, ArrowUp, Heart } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components/macro'
+import { ClickableStyle } from 'theme'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
 import {
@@ -23,12 +23,12 @@ import {
 } from '../constants'
 import { LoadingBubble } from '../loading'
 import {
-  favoritesAtom,
   filterNetworkAtom,
   filterStringAtom,
   filterTimeAtom,
   sortCategoryAtom,
   sortDirectionAtom,
+  useIsFavorited,
   useSetSortCategory,
   useToggleFavorite,
 } from '../state'
@@ -109,6 +109,14 @@ export const ClickFavorited = styled.span`
   }
 `
 
+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;
   text-decoration: none;
@@ -461,9 +469,7 @@ export default function LoadedRow({
   const currency = useCurrency(tokenAddress)
   const tokenName = tokenData.name
   const tokenSymbol = tokenData.symbol
-  const theme = useTheme()
-  const [favoriteTokens] = useAtom(favoritesAtom)
-  const isFavorited = favoriteTokens.includes(tokenAddress)
+  const isFavorited = useIsFavorited(tokenAddress)
   const toggleFavorite = useToggleFavorite(tokenAddress)
   const filterString = useAtomValue(filterStringAtom)
   const filterNetwork = useAtomValue(filterNetworkAtom)
@@ -482,7 +488,6 @@ export default function LoadedRow({
     search_token_address_input: filterString,
   }
 
-  const heartColor = isFavorited ? theme.accentActive : undefined
   // TODO: currency logo sizing mobile (32px) vs. desktop (24px)
   return (
     <StyledLink
@@ -498,7 +503,7 @@ export default function LoadedRow({
               toggleFavorite()
             }}
           >
-            <Heart size={18} color={heartColor} fill={heartColor} />
+            <FavoriteIcon isFavorited={isFavorited} />
           </ClickFavorited>
         }
         listNumber={tokenListIndex + 1}

src/components/Tokens/state.ts

 import { SupportedChainId } from 'constants/chains'
 import { TimePeriod } from 'graphql/data/TopTokenQuery'
 import { atom, useAtom } from 'jotai'
-import { atomWithReset, atomWithStorage } from 'jotai/utils'
-import { useCallback } from 'react'
+import { atomWithReset, atomWithStorage, useAtomValue } from 'jotai/utils'
+import { useCallback, useMemo } from 'react'
 
 import { Category, SortDirection } from './types'
 
@@ -20,12 +20,12 @@ export function useToggleFavorite(tokenAddress: string) {
 
   return useCallback(() => {
     let updatedFavoriteTokens
-    if (favoriteTokens.includes(tokenAddress)) {
+    if (favoriteTokens.includes(tokenAddress.toLocaleLowerCase())) {
       updatedFavoriteTokens = favoriteTokens.filter((address: string) => {
-        return address !== tokenAddress
+        return address !== tokenAddress.toLocaleLowerCase()
       })
     } else {
-      updatedFavoriteTokens = [...favoriteTokens, tokenAddress]
+      updatedFavoriteTokens = [...favoriteTokens, tokenAddress.toLocaleLowerCase()]
     }
     updateFavoriteTokens(updatedFavoriteTokens)
   }, [favoriteTokens, tokenAddress, updateFavoriteTokens])
@@ -47,3 +47,9 @@ export function useSetSortCategory(category: Category) {
     }
   }, [category, sortCategory, setSortCategory, sortDirection, setDirectionCategory])
 }
+
+export function useIsFavorited(tokenAddress: string) {
+  const favoritedTokens = useAtomValue<string[]>(favoritesAtom)
+
+  return useMemo(() => favoritedTokens.includes(tokenAddress.toLocaleLowerCase()), [favoritedTokens, tokenAddress])
+}