import { useState, useLayoutEffect } from 'react' import { shade } from 'polished' import Vibrant from 'node-vibrant' import { hex } from 'wcag-contrast' import { Token, ChainId } from '@luaswap/sdk' import { IsTomoChain } from '../utils' const commit_hash = '7ab366e49618c07ec8b9c39c1f93c4e58e1429fb' async function getColorFromToken(token: Token): Promise<string | null> { if (token.chainId === ChainId.RINKEBY && token.address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') { return Promise.resolve('#FAAB14') } const IsTomo = IsTomoChain(token.chainId) let path if (IsTomo) { path = `https://raw.githubusercontent.com/tomochain/luaswap-token-list/${commit_hash}/src/tokens/icons/tomochain/${token.address}.png` } else { path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${token.address}/logo.png` } 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') } return detectedHex } return null }) .catch(() => null) } export function useColor(token?: Token) { const [color, setColor] = useState('#2172E5') useLayoutEffect(() => { let stale = false if (token) { getColorFromToken(token).then(tokenColor => { if (!stale && tokenColor !== null) { setColor(tokenColor) } }) } return () => { stale = true setColor('#2172E5') } }, [token]) return color }