feat: [info] update color extract default and have PDP fallback (#7432)

* feat: [info] update color extract default and have a fallback

* uncomment section removed for testing

* update snapshot

src/hooks/useColor.ts

@@ -4,6 +4,7 @@ import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import { rgb } from 'polished'
 import { useEffect, useState } from 'react'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
+import { useTheme } from 'styled-components'
 import { getColor } from 'utils/getColor'
 
 function URIForEthToken(address: string) {
@@ -54,7 +55,8 @@ function convertColorArrayToString([red, green, blue]: number[]): string {
 }
 
 export function useColor(token?: Token) {
-  const [color, setColor] = useState('#2172E5')
+  const theme = useTheme()
+  const [color, setColor] = useState(theme.accent1)
   const [src] = useTokenLogoSource(token?.address, token?.chainId, token?.isNative)
 
   useEffect(() => {
@@ -70,9 +72,9 @@ export function useColor(token?: Token) {
 
     return () => {
       stale = true
-      setColor('#2172E5')
+      setColor(theme.accent1)
     }
-  }, [src, token])
+  }, [src, theme.accent1, token])
 
   return color
 }

src/pages/PoolDetails/PoolDetailsStats.tsx

@@ -9,8 +9,9 @@ import { useColor } from 'hooks/useColor'
 import { useScreenSize } from 'hooks/useScreenSize'
 import { ReactNode, useMemo } from 'react'
 import { Text } from 'rebass'
-import styled, { css } from 'styled-components'
+import styled, { css, useTheme } from 'styled-components'
 import { BREAKPOINTS } from 'theme'
+import { colors } from 'theme/colors'
 import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
@@ -99,12 +100,16 @@ export function PoolDetailsStats({ poolData, isReversed, chainId }: PoolDetailsS
   const isScreenSize = useScreenSize()
   const screenIsNotLarge = isScreenSize['lg']
   const { formatNumber } = useFormatter()
+  const theme = useTheme()
 
   const currency0 = useCurrency(poolData?.token0?.id, chainId) ?? undefined
   const currency1 = useCurrency(poolData?.token1?.id, chainId) ?? undefined
 
   const color0 = useColor(currency0?.wrapped)
-  const color1 = useColor(currency1?.wrapped)
+  let color1 = useColor(currency1?.wrapped)
+  if (color0 === color1 && color0 === theme.accent1) {
+    color1 = colors.blue400
+  }
 
   const [token0, token1] = useMemo(() => {
     const fullWidth = poolData?.tvlToken0 / poolData?.token0Price + poolData?.tvlToken1

src/pages/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap

@@ -506,7 +506,7 @@ exports[`PoolDetailsStats renders stats text correctly 1`] = `
 .c9 {
   height: 8px;
   width: 40.698463777008904%;
-  background: #2172E5;
+  background: #FC72FF;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-right: 1px solid #F9F9F9;
@@ -515,7 +515,7 @@ exports[`PoolDetailsStats renders stats text correctly 1`] = `
 .c10 {
   height: 8px;
   width: 59.3015362229911%;
-  background: #2172E5;
+  background: #4C82FB;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   border-left: 1px solid #F9F9F9;

src/pages/PoolDetails/__snapshots__/index.test.tsx.snap

@@ -324,7 +324,7 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
 .c27 {
   height: 8px;
   width: 40.698463777008904%;
-  background: #2172E5;
+  background: #FC72FF;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-right: 1px solid #F9F9F9;
@@ -333,7 +333,7 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
 .c28 {
   height: 8px;
   width: 59.3015362229911%;
-  background: #2172E5;
+  background: #4C82FB;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   border-left: 1px solid #F9F9F9;