fix: Show proper graph color for non-Ethereum L1 chains (#2049) (#2284)

* Switch to fetching token color from the logoURI included

* Fall back to github hosted images

* Move logger to changes to another PR

src/hooks/useColor.ts

 import { Token } from '@uniswap/sdk-core'
-import Vibrant from 'node-vibrant/lib/bundle'
+import { SupportedChainId } from 'constants/chains'
+import Vibrant from 'node-vibrant'
 import { shade } from 'polished'
 import { useLayoutEffect, useState } from 'react'
+import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import uriToHttp from 'utils/uriToHttp'
 import { hex } from 'wcag-contrast'
 
+function URIForEthToken(address: string) {
+  return `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/ethereum/assets/${address}/logo.png`
+}
+
 async function getColorFromToken(token: Token): Promise<string | null> {
-  if (token.chainId !== 1) {
-    return Promise.resolve('#FAAB14')
+  if (!(token instanceof WrappedTokenInfo)) {
+    return null
   }
 
-  const path = `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/ethereum/assets/${token.address}/logo.png`
+  const wrappedToken = token as WrappedTokenInfo
+  const { address } = wrappedToken
+  let { logoURI } = wrappedToken
+  if (!logoURI) {
+    if (token.chainId !== SupportedChainId.MAINNET) {
+      return null
+    } else {
+      logoURI = URIForEthToken(address)
+    }
+  }
 
-  return Vibrant.from(path)
-    .getPalette()
-    .then((palette) => {
-      if (palette?.Vibrant) {
-        let detectedHex = palette.Vibrant.hex
-        let AAscore = hex(detectedHex, '#FFF')
-        while (AAscore < 3) {
-          detectedHex = shade(0.005, detectedHex)
-          AAscore = hex(detectedHex, '#FFF')
+  try {
+    return await getColorFromUriPath(logoURI)
+  } catch (e) {
+    if (logoURI === URIForEthToken(address)) {
+      return null
     }
-        return detectedHex
+
+    try {
+      logoURI = URIForEthToken(address)
+      return await getColorFromUriPath(logoURI)
+    } catch (e) {}
   }
+
   return null
-    })
-    .catch(() => null)
 }
 
 async function getColorFromUriPath(uri: string): Promise<string | null> {
   const formattedPath = uriToHttp(uri)[0]
 
-  return Vibrant.from(formattedPath)
-    .getPalette()
-    .then((palette) => {
-      if (palette?.Vibrant) {
-        return palette.Vibrant.hex
-      }
+  const palette = await Vibrant.from(formattedPath).getPalette()
+  if (!palette?.Vibrant) {
     return null
-    })
-    .catch(() => null)
+  }
+
+  let detectedHex = palette.Vibrant.hex
+  let AAscore = hex(detectedHex, '#FFF')
+  while (AAscore < 3) {
+    detectedHex = shade(0.005, detectedHex)
+    AAscore = hex(detectedHex, '#FFF')
+  }
+
+  return detectedHex
 }
 
 export function useColor(token?: Token) {